:root {
  --bg-dark: #0a0a0a;
  --bg-light: #ffffff;
  --text-dark: #ffffff;
  --text-light: #2d2d2d;
  --pink: #a9396f;
  --pink-glow: rgba(169, 57, 111, 0.4);
  --accent-dark: #1a1a1a;
  --accent-light: #f5f5f5;
}



* {
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg-dark);
  color: var(--text-dark);
  transition: all 0.3s ease;
  overflow-x: hidden;
  cursor: none; /* ← AJOUTÉ pour curseur custom */


}

/* =====================
   HERO EPIC
===================== */

.hero-epic {
  position: relative;
  min-height: 100vh;
    background: #000000;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#iot-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-epic-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: auto;
  padding: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-left {
  position: relative;
  z-index: 2; /* AU-DESSUS de la photo */
  max-width: 720px;
  transform: translateY(-10px); /*après mettre -25*/
  margin-left: -50px;
}

.hero-right {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1; /* DERRIÈRE le texte */
}

.hero-left h1 {
  margin-left: -6px;
}



/* =====================
   HERO H1 ANIMATION
===================== */

.hero-title {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  overflow: hidden;
}

/* Effet typing */
.hero-title .word {
  display: inline-block;
  overflow: visible; /* ← CHANGÉ de hidden à visible */
  white-space: nowrap;
  border-right: 3px solid transparent;
}

.hero-title .word.typing {
  border-right: 3px solid rgba(255, 255, 255, 0.75);
  animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: rgba(255, 255, 255, 0.75); }
}

.hero-title .word.wade.typing {
  border-right-color: var(--pink);
}

/* ENLÈVE les anciennes animations (wordFromTop, wordFromBottom) */
/* Commenté pour ne pas interférer */
.hero-title .word {
  /* animation: wordFromTop ... ← ENLÈVE ÇA */
  opacity: 1; /* ← Visible par défaut */
  transform: none; /* ← Pas de transform */
}


/* =====================
   TEXTE
===================== */

h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(4.2rem, 7.8vw, 6rem);
  font-weight: 500;                     /* plus fin */
  line-height: 1.1;
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}

h1 .wade {
  color: var(--pink);
  display: inline;      /* ⬅IMPORTANT : plus de block */
}

h3.glow-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); 
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: #ffffff;

  text-shadow:
    0 0 6px rgba(169,57,111,0.45),
    0 0 14px rgba(169,57,111,0.35),
    0 0 28px rgba(169,57,111,0.25);
}

@keyframes glowPulseSubtle {            /* ← Nouveau nom */
  0%, 100% { 
    text-shadow: 0 0 8px var(--pink-glow), 0 0 15px var(--pink-glow),;  /* ← Intensité RÉDUITE */
  }
  50% { 
    text-shadow: 0 0 12px var(--pink-glow), 0 0 20px var(--pink-glow), 0 0 30px var(--pink-glow); /* ← Plus discret */
  }
}



/* Highlight "recherche de stage" avec glow FORT */
.highlight-stage {
  color: #ffffff; /* ← Blanc */
  font-weight: 600; /* ← Un peu plus gras */
  position: relative;
  display: inline-block;
  text-shadow: 
    0 0 15px rgba(169, 57, 111, 0.9),
    0 0 30px rgba(169, 57, 111, 0.7),
    0 0 45px rgba(169, 57, 111, 0.5),
    0 0 60px rgba(169, 57, 111, 0.3);
  animation: gentleGlow 3s ease-in-out infinite;
}

/* Effet de fond lumineux derrière */
.highlight-stage::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 150%;
  background: radial-gradient(
    ellipse at center,
    rgba(169, 57, 111, 0.3) 0%,
    rgba(169, 57, 111, 0.15) 40%,
    transparent 70%
  );
  filter: blur(20px);
  z-index: -1;
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes gentleGlow {
  0%, 100% {
    text-shadow: 
      0 0 15px rgba(169, 57, 111, 0.9),
      0 0 30px rgba(169, 57, 111, 0.7),
      0 0 45px rgba(169, 57, 111, 0.5),
      0 0 60px rgba(169, 57, 111, 0.3);
  }
  50% {
    text-shadow: 
      0 0 20px rgba(169, 57, 111, 1),
      0 0 40px rgba(169, 57, 111, 0.9),
      0 0 60px rgba(169, 57, 111, 0.7),
      0 0 80px rgba(169, 57, 111, 0.5);
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* =====================
   BOUTONS
===================== */

/* MON CODE */

.btn {
  padding: 1rem 2rem;
  border-radius: 10px; /* ← Bordures moins arrondies */
  font-weight: 600;
  text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* ← Transition plus fluide */
  display: inline-block;
  cursor: none; /* ← Pour le curseur custom */
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;                      /* ← AJOUTÉ : MAJUSCULES */
letter-spacing: 0.05em;                         /* ← AJOUTÉ : Espacement */
font-size: 0.9rem;                              /* ← AJOUTÉ : Texte légèrement réduit */

}

.btn::before { /* ← NOUVEAU : Glow qui se déplace vers le bas */
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
   width: 80%;                    /* ← 90% → 80% */
  height: 2px;                   /* ← 3px → 2px (plus fin) */
  background: var(--pink-glow);
  filter: blur(10px);            /* ← 8px → 10px (plus diffus) */
  opacity: 0;
  transition: all 0.3s ease;
}

.btn:hover::before { /* ← Glow apparaît en bas au hover */
 opacity: 0.8;                  /* ← 1 → 0.8 (plus subtil) */
  bottom: -15px;                 /* ← -10px → -15px (descend plus) */
  filter: blur(15px);            /* ← AJOUTÉ : Flou au hover */

}

.btn-primary { /* ← Gradient rose → transparent */
  border: rgba(169, 57, 111, 0.3);     /* ← Bordure plus transparente */
  background: linear-gradient(135deg, var(--pink) 0%, rgba(169, 57, 111, 0.3) 100%); /* ← Gradient adouci */
  color: #ffffff;
 
  box-shadow: 0 4px 15px rgba(169, 57, 111, 0.2); /* ← AJOUTÉ : Ombre légère */
}

.btn-primary:hover { /* ← Devient transparent au hover */
 background: rgba(169, 57, 111, 0.05);  /* ← Presque transparent */
  border: 2px solid var(--pink);
  color: var(--pink);
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(169, 57, 111, 0.3); /* ← AJOUTÉ : Ombre au hover */


}

.btn-secondary { /* ← Transparent avec bordure */
  background: rgba(169, 57, 111, 0.05);          /* ← Léger fond */
  border: 2px solid rgba(169, 57, 111, 0.3);      /* ← Bordure plus transparente */
  color: var(--pink);
  backdrop-filter: blur(10px);                    /* ← AJOUTÉ : Effet glassmorphism */

}

.btn-secondary:hover { /* ← Se remplit du gradient au hover */
  background: linear-gradient(135deg, var(--pink) 0%, rgba(169, 57, 111, 0) 100%);
  color: #ffffff;
  transform: translateY(-8px);
   box-shadow: 0 8px 25px rgba(169, 57, 111, 0.3); /* ← AJOUTÉ : Ombre */

}


.cta-buttons {
  display: flex;
  gap: 5.2rem;          /* ← ESPACE ENTRE LES BOUTONS */
  margin-top: 0.5rem;  /* ← Distance texte → boutons */
  align-items: center;
}

.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn:hover::after {
  opacity: 1;
}


/* =====================
   PORTRAIT
===================== */

.portrait-wrapper {
  position: relative;
  width: 900px;
  max-width: none;
  margin-right: -140px;
}

.hero-portrait {
  width: 880px;
  max-width: none;
  animation: portraitReveal 1.6s ease forwards;
  mask-image: radial-gradient(
    ellipse at center,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0) 85%
  );
}

@keyframes portraitReveal {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(40px);
    filter: blur(12px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}


/* =====================
   REVEAL
===================== */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s ease;
}

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

/* =====================
   CURSEUR CUSTOM
===================== */

/* MON NOUVEAU CODE (maintenant) */
.custom-cursor {
  position: fixed;
  width: 16px;                                    /* ← 12px → 16px (plus gros) */
  height: 16px;                                   /* ← 12px → 16px (plus gros) */
  border-radius: 50%;
  background: rgba(169, 57, 111, 0.8);           /* ← Gris foncé → Rose visible */
  border: 2px solid rgba(169, 57, 111, 0.4);    /* ← AJOUTÉ (bordure rose) */
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 0 20px rgba(169, 57, 111, 0.6), /* ← 15px → 20px (glow plus fort) */
              0 0 40px rgba(169, 57, 111, 0.3); /* ← AJOUTÉ (deuxième couche de glow) */
}

.custom-cursor.active {
  transform: translate(-50%, -50%) scale(2.5);
  background: rgba(169, 57, 111, 0.9);           /* ← 0.4 → 0.9 (plus opaque) */
  border: 2px solid rgba(169, 57, 111, 0.6);    /* ← AJOUTÉ (bordure au hover) */
  box-shadow: 0 0 40px rgba(169, 57, 111, 0.9), /* ← 30px → 40px (glow plus fort) */
              0 0 60px rgba(169, 57, 111, 0.5); /* ← AJOUTÉ (deuxième couche de glow) */
}

/* =====================
   RESPONSIVE
===================== */

@media (max-width: 900px) {
  .hero-epic-content {
    flex-direction: column;
    text-align: center;
  }

  .portrait-wrapper {
    margin: 3rem auto 0;
    width: 100%;
  }

  .hero-portrait {
    width: 340px;
  }
}

/* Scrollbar ultra discrète */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255, 95, 162, 0.042),
    rgba(232, 123, 190, 0.14)
  );
  border-radius: 10px;
}



/* =====================
   HEADER GLASSMORPHISM
===================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.2rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}


/* Logo avec effet hover */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.logo img {
  filter: drop-shadow(0 0 10px var(--pink-glow));
  transition: all 0.3s ease;
}

.logo:hover img {
  transform: rotate(5deg) scale(1.1);
  filter: drop-shadow(0 0 20px var(--pink));
}

/* Navigation */
.nav {
  display: flex;
  gap: 3rem;
  align-items: center;
}

.nav a {
  position: relative;
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
  padding: 0.5rem 0;
}



/* Underline progressif */
.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav a:hover::after,
.nav a.active::after {
  width: 100%;
}

/* Glow sur hover */
.nav a:hover {
  color: var(--pink);
  text-shadow: 0 0 15px var(--pink-glow);
}

/* Section active */
.nav a.active {
  color: var(--pink);
  text-shadow: 0 0 10px var(--pink-glow);
}

/* Boutons actions (thème + langue) */
.actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.actions button {
  background: rgba(169, 57, 111, 0.1);
  border: 2px solid rgba(169, 57, 111, 0.3);
  color: rgba(255, 255, 255, 0.7); /* ← COULEUR DISCRÈTE */
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}



.actions button:hover {
  background: rgba(169, 57, 111, 0.2);
  border-color: var(--pink);
  color: var(--pink); /* ← COULEUR ROSE AU HOVER */
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--pink-glow);
}

/* SVG Icônes soleil/lune */
.actions button svg {
  transition: all 0.3s ease;
}

/* Burger (mobile) */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 1001;
}

.burger span {
  width: 25px;
  height: 3px;
  background: var(--text-dark);
  border-radius: 3px;
  transition: all 0.3s ease;
}



/* =====================
   FOOTER GLASSMORPHISM (VRAIMENT 3 COLONNES)
===================== */

.site-footer {
  position: relative;
  margin-top: 150px;
  padding: 2rem 3rem;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
  transition: opacity 0.8s ease, transform 0.8s ease;
  opacity: 0;
  transform: translateY(50px);
}

.site-footer.visible {
  opacity: 1;
  transform: translateY(0);
}



/* Disposition 3 colonnes ÉGALES */
.footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* ← 3 colonnes égales */
  align-items: center;
  gap: 2rem;
  width: 100%;
}

/* Gauche : CV (aligné à gauche) */
.footer-left {
  display: flex;
  justify-content: flex-start; /* ← À gauche */
}

/* Centre : Copyright (vraiment centré) */
.footer-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 0.5rem; /* ← AJOUTÉ : descend légèrement */
}

.footer-center p {
  font-size: 0.9rem;
  opacity: 0.7;
  font-weight: 400;
  margin: 0;
  line-height: 1.6;
  padding-top: 0.5rem;
}

.footer-center .rights {
  font-size: 0.8rem;
  opacity: 0.5;
}

/* Droite : Socials (aligné à droite) */
.footer-right {
  display: flex;
  justify-content: flex-end; /* ← À droite */
}

/* Lien télécharger CV */
.download-cv {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem; /* ← RÉDUIT de 1.2rem à 1rem */
  background: rgba(169, 57, 111, 0.1);
  border: 2px solid rgba(169, 57, 111, 0.3);
  border-radius: 50px;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 0.85rem; /* ← RÉDUIT de 0.85rem à 0.8rem */
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap; /* ← AJOUTÉ : empêche le retour à la ligne */
  width: fit-content;
}


.download-cv:hover {
  background: rgba(169, 57, 111, 0.2);
  border-color: var(--pink);
  color: var(--pink);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--pink-glow);
}

.download-cv svg {
  transition: transform 0.3s ease;
  fill: currentColor;
}

.download-cv:hover svg {
  transform: translateY(2px);
}

/* Icônes sociales */
.socials {
  display: flex;
  gap: 1.5rem; /* ← Espacement normal entre les icônes */
  align-items: center;
}

.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(169, 57, 111, 0.1);
  border: 2px solid rgba(169, 57, 111, 0.3);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: var(--text-dark);
}



.socials a svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: all 0.3s ease;
}

.socials a:hover {
  background: rgba(169, 57, 111, 0.2);
  border-color: var(--pink);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px var(--pink-glow);
}

.socials a:hover svg {
  fill: var(--pink);
  filter: drop-shadow(0 0 10px var(--pink));
}

/* Responsive */
@media (max-width: 768px) {
  .site-footer {
    padding: 1.5rem 1rem;
  }

  .footer-content {
    grid-template-columns: 1fr; /* ← 1 seule colonne sur mobile */
    gap: 1.5rem;
    text-align: center;
  }

  .footer-left,
  .footer-right {
    justify-content: center; /* ← Tout centré sur mobile */
  }

  .socials {
    justify-content: center;
  }
}
/* =====================
   RESPONSIVE
===================== */

@media (max-width: 768px) {
  .header {
    padding: 1rem 1.5rem;
  }

  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(30px);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    transition: right 0.3s ease;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  

  .nav.active {
    right: 0;
  }

  .burger {
    display: flex;
  }

  .burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .burger.active span:nth-child(2) {
    opacity: 0;
  }

  .burger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }


  .socials {
    gap: 1rem;
  }
}



.site-footer.visible {
  opacity: 1;
  transform: translateY(0);
}



.footer-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-left p {
  font-size: 0.9rem;
  opacity: 0.7;
  font-weight: 300;
  margin: 0;
}

/* Scroll Indicator */
.scroll-indicator {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 100;
  opacity: 1;
  transition: opacity 0.5s ease;
  cursor: pointer;
}

.scroll-indicator.hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-indicator span {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  animation: fadeInOut 2s ease-in-out infinite;
}

.scroll-arrow {
  width: 30px;
  height: 50px;
  border: 2px solid rgba(169, 57, 111, 0.5);
  border-radius: 50px;
  position: relative;
  animation: bounce 2s infinite;
}

.scroll-arrow::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--pink-glow);
  animation: scroll-dot 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@keyframes scroll-dot {
  0% { top: 8px; opacity: 1; }
  50% { top: 30px; opacity: 0.5; }
  100% { top: 8px; opacity: 1; }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}


/* =====================
   SECTION À PROPOS PREVIEW (sur index.php)
===================== */

.about-preview {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
  padding: 6rem 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.about-preview .section-title,
.page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  text-align: center;
  margin-bottom: 4rem;
  background: linear-gradient(135deg, var(--pink), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
}

.about-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.about-preview-image {
  position: relative;
}

.about-preview-image,
.intro-image {
  position: relative;
  perspective: 1000px;
}

.about-preview-image img,
.intro-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 50%; /* ← MODIFIÉ : 20px → 50% (ROND) */
  position: relative;
  z-index: 2;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  aspect-ratio: 1 / 1; /* ← AJOUTÉ : Force un cercle parfait */
  object-fit: cover;   /* ← AJOUTÉ : Coupe l'image proprement */
  
  border: 3px solid rgba(169, 57, 111, 0.4); /* ← MODIFIÉ : 2px → 3px */
  box-shadow: 
    0 0 30px rgba(169, 57, 111, 0.4),        /* ← MODIFIÉ : 0.3 → 0.4 */
    0 8px 40px rgba(0, 0, 0, 0.5),           /* ← MODIFIÉ : 32px → 40px, 0.4 → 0.5 */
    inset 0 0 30px rgba(169, 57, 111, 0.15); /* ← MODIFIÉ : 20px → 30px */
  
  /* ← MODIFIÉ : Fondu radial au lieu de linéaire */
  mask-image: radial-gradient(
    circle,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0.7) 80%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image: radial-gradient(
    circle,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0.7) 80%,
    rgba(0,0,0,0) 100%
  );
}

.about-preview-image:hover img,
.intro-image:hover img {
  transform: translateY(-8px) scale(1.05); /* ← MODIFIÉ : 1.02 → 1.05 */
  box-shadow: 
    0 0 50px rgba(169, 57, 111, 0.6),      /* ← MODIFIÉ : 40px/0.5 → 50px/0.6 */
    0 15px 60px rgba(0, 0, 0, 0.6),        /* ← MODIFIÉ : 50px/0.5 → 60px/0.6 */
    inset 0 0 40px rgba(169, 57, 111, 0.25); /* ← MODIFIÉ : 30px/0.2 → 40px/0.25 */
  border-color: rgba(169, 57, 111, 0.8); /* ← MODIFIÉ : 0.7 → 0.8 */
}

.image-glow {
  position: absolute;
  inset: -40px; /* ← MODIFIÉ : -30px → -40px */
  background: radial-gradient(
    circle,
    rgba(169, 57, 111, 0.5) 0%,    /* ← MODIFIÉ : 0.4 → 0.5 */
    rgba(169, 57, 111, 0.3) 30%,   /* ← MODIFIÉ : 0.2/40% → 0.3/30% */
    transparent 70%
  );
  filter: blur(50px); /* ← MODIFIÉ : 40px → 50px */
  z-index: 1;
  animation: glowPulse 4s ease-in-out infinite;
  border-radius: 50%; /* ← AJOUTÉ : Glow rond aussi */
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.15); /* ← MODIFIÉ : 1.1 → 1.15 */
  }
}

/* Responsive */
@media (max-width: 768px) {
  .about-preview-image img,
  .intro-image img {
    max-width: 300px;
  }
}




.subtitle {
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 300;
  opacity: 1;
}



.about-preview-text .btn {
  margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .about-preview-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .about-preview-image img {
    max-width: 300px;
    margin: 0 auto;
  }
}





/*-------------------------------------------------------------------------
---------------------------------------------------------------------------
Page à propos 
---------------------------------------------------------------------------
----------------------------------------------------------------------------
____________________________________________________________________________

*/

/* Page À Propos */
.about-page {
  background: var(--bg-dark);
  color: var(--text-dark);
  min-height: 100vh;
}

/* Hero */
.about-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000000;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
}

.page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.page-title .word {
  display: inline-block;
  color: #ffffff;
}

.page-title .pink {
  color: var(--pink);
  text-shadow: 0 0 30px var(--pink-glow);
}



/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* Intro */
.about-intro {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: center;
}

.intro-image {
  position: relative;
}





.intro-text h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--pink);
  margin-bottom: 1.5rem;
}

.intro-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  opacity: 0.9;
}



/* Stats */
/* Container stats avec perspective */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  perspective: 1000px; /* ← AJOUTÉ : Profondeur 3D */
}

.stat-item {
  text-align: center;
  padding: 1.5rem;
  background: rgba(169, 57, 111, 0.1);
  border: 2px solid rgba(169, 57, 111, 0.3);
  border-radius: 15px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* ← MODIFIÉ : 0.4s → 0.6s */
  transform-style: preserve-3d;
  position: relative;
  cursor: pointer; /* ← AJOUTÉ */
}

.stat-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(169, 57, 111, 0.2) 0%,
    transparent 100%
  );
  border-radius: 15px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

/* ← MODIFIÉ COMPLÈTEMENT : Hover penché en arrière */
.stat-item:hover {
  transform: 
    translateY(-20px)           /* ← MODIFIÉ : -12px → -20px (monte plus) */
    translateZ(-30px)           /* ← AJOUTÉ : Recule */
    rotateX(-15deg);            /* ← MODIFIÉ : 5deg → -15deg (penche en ARRIÈRE) */
  
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.5),     /* ← MODIFIÉ : Ombre plus forte */
    0 0 40px var(--pink-glow),          /* ← MODIFIÉ : 30px → 40px */
    inset 0 0 20px rgba(169, 57, 111, 0.2);
  
  border-color: var(--pink);
}

.stat-item:hover::before {
  opacity: 1;
}

/* ← MODIFIÉ : Chiffre sort vers l'avant */
.stat-item:hover .stat-number {
  transform: scale(1.15) translateZ(20px); /* ← AJOUTÉ translateZ */
  text-shadow: 0 0 25px var(--pink-glow);  /* ← MODIFIÉ : 20px → 25px */
}

.stat-number {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: var(--pink);
  font-family: 'Space Grotesk', sans-serif;
  transition: all 0.4s ease; /* ← MODIFIÉ : 0.3s → 0.4s */
  transform-style: preserve-3d; /* ← AJOUTÉ */
}

.stat-label {
  display: block;
  font-size: 0.9rem;
  opacity: 0.7;
  margin-top: 0.5rem;
  transition: all 0.4s ease; /* ← MODIFIÉ : 0.3s → 0.4s */
  transform-style: preserve-3d; /* ← AJOUTÉ */
}

/* ← MODIFIÉ : Label sort aussi */
.stat-item:hover .stat-label {
  opacity: 1;
  transform: translateY(-3px) translateZ(10px); /* ← AJOUTÉ translateZ */
}

/* Responsive */
@media (max-width: 768px) {
  .stats {
    grid-template-columns: 1fr;
  }
  
  .stat-item:hover {
    transform: translateY(-15px) rotateX(-10deg); /* ← MODIFIÉ pour mobile */
  }
}



/* Skills */
/* =====================
   COMPÉTENCES - PAQUET DE CARTES PENCHÉ
===================== */

.skills-section {
  background: #0a0a0a;
  overflow: visible; /* ← CHANGÉ : hidden → visible */
  padding: 6rem 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  margin-bottom: 3rem;
  background: linear-gradient(135deg, var(--pink), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Filtres */
.skills-filters {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.filter-skill-btn {
  padding: 0.7rem 1.5rem;
  background: rgba(169, 57, 111, 0.1);
  border: 2px solid rgba(169, 57, 111, 0.3);
  border-radius: 50px;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-skill-btn:hover,
.filter-skill-btn.active {
  background: rgba(169, 57, 111, 0.2);
  border-color: var(--pink);
  color: var(--pink);
  box-shadow: 0 4px 15px var(--pink-glow);
}

/* Container des cartes */
.skills-cards-container {
  position: relative;
  width: 100%;
  max-width: 450px; /* ← Largeur fixe pour centrer */
  height: 550px;
  margin: 0 auto;
  perspective: 1200px;
  cursor: grab;
}

.skills-cards-container:active {
  cursor: grabbing;
}

/* Cartes empilées (OPAQUES) */
.skill-category {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 480px;
  background: rgba(10, 10, 10, 1); /* ← OPAQUE à 100% */
  border: 2px solid rgba(169, 57, 111, 0.4);
  border-radius: 20px;
  padding: 2rem 1.8rem; /* ← Padding réduit */
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(169, 57, 111, 0.2);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center bottom;
  overflow: hidden; /* ← IMPORTANT : empêche le débordement */
}

/* Positions empilées penchées (comme une main de cartes) */
.skill-category:nth-child(1) {
  transform: translate(-50%, -50%) rotate(-12deg) translateY(20px);
  z-index: 1;
}

.skill-category:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-8deg) translateY(15px);
  z-index: 2;
}

.skill-category:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-4deg) translateY(10px);
  z-index: 3;
}

.skill-category:nth-child(4) {
  transform: translate(-50%, -50%) rotate(0deg) translateY(5px);
  z-index: 4;
}

.skill-category:nth-child(5) {
  transform: translate(-50%, -50%) rotate(4deg) translateY(10px);
  z-index: 5;
}

.skill-category:nth-child(6) {
  transform: translate(-50%, -50%) rotate(8deg) translateY(15px);
  z-index: 6;
}

/* Carte active (devant) */
.skill-category.active {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-20px) scale(1.05);
  z-index: 100;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.9),
    0 0 50px var(--pink-glow);
  border-color: var(--pink);
}

/* Icônes SVG neutres */
.category-icon {
  margin-bottom: 1.2rem; /* ← Réduit */
  opacity: 0.7;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-icon svg {
  width: 42px; /* ← Réduit : 48px → 42px */
  height: 42px;
  stroke: rgba(255, 255, 255, 0.5);
  transition: all 0.4s ease;
}

.skill-category.active .category-icon {
  opacity: 1;
}

.skill-category.active .category-icon svg {
  stroke: var(--pink);
  filter: drop-shadow(0 0 10px var(--pink-glow));
}

/* Titres */
.skill-category h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1rem, 2vw, 1.3rem); /* ← Réduit */
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem; /* ← Réduit */
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(169,57,111,0.45),
    0 0 14px rgba(169,57,111,0.35),
    0 0 28px rgba(169,57,111,0.25);
}

/* Liste */
.skill-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 280px; /* ← IMPORTANT : limite la hauteur */
  overflow-y: auto; /* ← Scroll si trop de contenu */
}

/* ← ENLEVER LES POINTS */
.skill-list li {
  padding: 0.5rem 0; /* ← Réduit */
  padding-left: 1.5rem;
  position: relative;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.88rem; /* ← Réduit : 0.95rem → 0.88rem */
  line-height: 1.5; /* ← Réduit : 1.6 → 1.5 */
  font-weight: 300;
  list-style: none; /* ← ENLÈVE LES POINTS */
}

.skill-list li::before {
  content: '▹';
  position: absolute;
  left: 0;
  color: var(--pink);
  font-size: 1.1rem; /* ← Réduit */
  opacity: 0.8;
}

/* Scrollbar discrète pour la liste */
.skill-list::-webkit-scrollbar {
  width: 4px;
}

.skill-list::-webkit-scrollbar-track {
  background: transparent;
}

.skill-list::-webkit-scrollbar-thumb {
  background: rgba(169, 57, 111, 0.3);
  border-radius: 10px;
}

/* Indicateur de scroll */
.scroll-hint {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.scroll-hint.hidden {
  opacity: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .skills-cards-container {
    max-width: 320px;
    height: 500px;
  }
  
  .skill-category {
    width: 300px;
    height: 420px;
    padding: 1.5rem;
  }
  
  .skill-list {
    max-height: 240px;
  }
}

/* Timeline */
.education-section {
  background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
}

.timeline {
  position: relative;
  padding-left: 3rem;
  margin-top: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--pink), transparent);
}

.timeline-item {
  position: relative;
  margin-bottom: 3rem;
}

.timeline-dot {
  position: absolute;
  left: -3.5rem;
  top: 0;
  width: 15px;
  height: 15px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--pink-glow);
}

.timeline-content {
  background: rgba(169, 57, 111, 0.05);
  border: 2px solid rgba(169, 57, 111, 0.2);
  border-radius: 15px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.timeline-content:hover {
  border-color: var(--pink);
  box-shadow: 0 8px 20px var(--pink-glow);
}

.timeline-date {
  color: var(--pink);
  font-weight: 600;
  font-size: 0.9rem;
}

.timeline-content h3 {
  font-size: 1.5rem;
  margin: 0.5rem 0;
}

.timeline-school {
  font-style: italic;
  opacity: 0.7;
  /* SUITE DU CSS ABOUT.PHP (à ajouter après le précédent) */


  margin-bottom: 0.5rem;
}

/* Soft Skills */
/* Qualités Personnelles - Cartes empilées */
.soft-skills-section {
  background: #0a0a0a;
  overflow: visible;
  padding: 6rem 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Container des cartes qualités */
.soft-skills-grid {
  position: relative;
  width: 100%;
  max-width: 450px;
  height: 480px;
  margin: 0 auto;
  perspective: 1200px;
  cursor: pointer;
}
/* Cartes empilées */
.soft-skill-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 420px;
  background: rgba(10, 10, 10, 1);
  border: 2px solid rgba(169, 57, 111, 0.4);
  border-radius: 20px;
  padding: 3rem 2rem;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(169, 57, 111, 0.2);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center bottom;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Lignes de connexion */

/* Point de connexion */

.soft-skill-card:nth-child(1)::before {
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
}

.soft-skill-card:nth-child(2)::before {
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
}

.soft-skill-card:nth-child(3)::before {
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
}

.soft-skill-card:nth-child(4)::before {
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
}



.soft-skill-card:hover::before {
  transform: translateY(-50%) scale(1.5);
  box-shadow: 0 0 30px var(--pink);
}

/* Icône emoji grande */
.skill-icon {
  font-size: 5rem;
  margin-bottom: 2rem;
  display: block;
  transition: transform 0.4s ease;
}

/* Titre principal */
.soft-skill-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(169,57,111,0.45),
    0 0 14px rgba(169,57,111,0.35),
    0 0 28px rgba(169,57,111,0.25);
  letter-spacing: -0.01em;
}

/* Description */
.soft-skill-card p {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  font-size: 1.05rem;
  font-weight: 300;
  max-width: 320px;
}


/* Responsive */
@media (max-width: 768px) {
  .soft-skills-grid {
    max-width: 320px;
    height: 450px;
  }
  
  .soft-skill-card {
    width: 300px;
    height: 380px;
    padding: 2rem 1.5rem;
  }
  
  .skill-icon {
    font-size: 4rem;
  }
}


/* Positions empilées avec légère rotation */
.soft-skill-card:nth-child(1) {
  transform: translate(-50%, -50%) rotate(-8deg) translateY(15px);
  z-index: 1;
}

.soft-skill-card:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-4deg) translateY(10px);
  z-index: 2;
}

.soft-skill-card:nth-child(3) {
  transform: translate(-50%, -50%) rotate(0deg) translateY(5px);
  z-index: 3;
}

.soft-skill-card:nth-child(4) {
  transform: translate(-50%, -50%) rotate(4deg) translateY(10px);
  z-index: 4;
}

/* Carte active (devant) */
.soft-skill-card.active {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-20px) scale(1.05);
  z-index: 100;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.9),
    0 0 50px var(--pink-glow);
  border-color: var(--pink);
}
.soft-skill-card.active .skill-icon {
  transform: scale(1.1);
}


/* CTA */
.cta-section {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
  text-align: center;
}

.cta-section h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

.cta-section p {
  font-size: 1.1rem;
  opacity: 0.8;
  margin-bottom: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .timeline {
    padding-left: 2rem;
  }

  .timeline-dot {
    left: -2.5rem;
  }
}




/*--------------------------------------------
Page Portfolio
---------------------------------------------
__________________________________________________
*/

/* Portfolio Page */
.portfolio-page {
  background: var(--bg-dark);
  min-height: 100vh;
}

.portfolio-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  overflow: hidden;
}

.portfolio-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Filtres */
.filters-section {
  background: #0a0a0a;
  padding: 2rem 0;
  
  top: 80px;
  z-index: 100;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(169, 57, 111, 0.2);
}

.filters {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.7rem 1.5rem;
  background: rgba(169, 57, 111, 0.1);
  border: 2px solid rgba(169, 57, 111, 0.3);
  border-radius: 50px;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: rgba(169, 57, 111, 0.2);
  border-color: var(--pink);
  color: var(--pink);
  box-shadow: 0 4px 15px var(--pink-glow);
}

/* Projets Grid */

/* =====================
   PORTFOLIO - CARROUSEL HORIZONTAL
===================== */

.projects-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 4rem 0;
  background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
  position: relative;
}

.carousel-wrapper {
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* Container avec scroll horizontal */
.carousel-container {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 2rem 4rem;
  scroll-snap-type: x mandatory;
  cursor: grab;
  
  /* Masquer la scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-container::-webkit-scrollbar {
  display: none;
}

.carousel-container:active {
  cursor: grabbing;
}

/* Carte projet */
.project-card {
  min-width: 420px;
  max-width: 420px;
  height: 550px;
  background: rgba(10, 10, 10, 0.95);
  border: 2px solid rgba(169, 57, 111, 0.4);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s ease;
  scroll-snap-align: center;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(169, 57, 111, 0.2);
}

.project-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--pink);
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.9),
    0 0 50px var(--pink-glow);
}

/* Image projet */
.project-image {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: #1a1a1a;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-card:hover .project-image img {
  transform: scale(1.1);
}

/* Info projet */
.project-info {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
}

.project-tag {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  background: rgba(169, 57, 111, 0.2);
  color: var(--pink);
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  width: fit-content;
}

.project-tag.iot { 
  background: rgba(100, 200, 255, 0.2); 
  color: #64c8ff; 
}

.project-tag.dev { 
  background: rgba(100, 255, 150, 0.2); 
  color: #64ff96; 
}

.project-tag.systeme { 
  background: rgba(255, 200, 100, 0.2); 
  color: #ffc864; 
}

.project-info h3 {
  font-size: 1.5rem;
  margin: 0;
  color: #ffffff;
}

.project-info p {
  opacity: 0.8;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
  flex-grow: 1;
}

.project-tech {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
}

.project-tech span {
  padding: 0.3rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Flèches de navigation */
.nav-arrows {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
  padding: 0 2rem;
}

.arrow-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(169, 57, 111, 0.1);
  border: 2px solid rgba(169, 57, 111, 0.3);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.5rem;
}

.arrow-btn:hover {
  background: rgba(169, 57, 111, 0.2);
  border-color: var(--pink);
  color: var(--pink);
  transform: scale(1.1);
  box-shadow: 0 8px 20px var(--pink-glow);
}

.arrow-btn:active {
  transform: scale(0.95);
}

/* Indicateurs dots du carrousel */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0 2rem;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(169, 57, 111, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
}

.dot.active {
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink-glow);
  transform: scale(1.3);
}

/* Instructions */
.instructions {
  text-align: center;
  margin-top: 2rem;
  opacity: 0.5;
  font-size: 0.9rem;
  padding: 0 2rem;
}

/* Responsive Portfolio */
@media (max-width: 768px) {
  .carousel-container {
    padding: 2rem 2rem;
  }

  .project-card {
    min-width: 320px;
    max-width: 320px;
    height: 500px;
  }

  .project-image {
    height: 220px;
  }

  .project-info {
    padding: 1.5rem;
  }

  .arrow-btn {
    width: 50px;
    height: 50px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .filters-section {
    top: 70px;
  }
}






/*=======================================
page contact
======================================
*/


/* Contact Page */
.contact-page {
  background: var(--bg-dark);
  min-height: 100vh;
}

.contact-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  overflow: hidden;
}

.contact-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Contact Grid */
.contact-content {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* Formulaire */
.contact-form-wrapper h2,
.contact-info-wrapper h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--pink);
  margin-bottom: 2rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0.9;
}

.form-group input,
.form-group textarea {
  padding: 1rem;
  background: rgba(169, 57, 111, 0.05);
  border: 2px solid rgba(169, 57, 111, 0.3);
  border-radius: 10px;
  color: var(--text-dark);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 20px var(--pink-glow);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  opacity: 0.5;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.submit-btn svg {
  transition: transform 0.3s ease;
}

.submit-btn:hover svg {
  transform: translateX(5px);
}

/* Info Cards */
.contact-info-cards {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.info-card {
  padding: 1.5rem;
  background: rgba(169, 57, 111, 0.05);
  border: 2px solid rgba(169, 57, 111, 0.2);
  border-radius: 15px;
  transition: all 0.3s ease;
}

.info-card:hover {
  border-color: var(--pink);
  box-shadow: 0 8px 20px var(--pink-glow);
  transform: translateY(-3px);
}

.info-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.info-card h3 {
  font-size: 1.1rem;
  color: var(--pink);
  margin-bottom: 0.5rem;
}

.info-card a {
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.info-card a:hover {
  color: var(--pink);
}

.info-card p {
  opacity: 0.8;
  margin: 0;
}

/* Disponibilité */
.availability-card {
  padding: 2rem;
  background: linear-gradient(135deg, rgba(169, 57, 111, 0.2), rgba(169, 57, 111, 0.05));
  border: 2px solid var(--pink);
  border-radius: 15px;
  box-shadow: 0 8px 20px var(--pink-glow);
}

.availability-card h3 {
  font-size: 1.3rem;
  color: var(--pink);
  margin-bottom: 1rem;
}

.availability-card p {
  margin: 0.5rem 0;
  line-height: 1.8;
}

.availability-card strong {
  color: var(--pink);
}

/* Responsive */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ===============================
   SCROLL STORY — BASE
================================ */

section {
  position: relative;
  padding: 120px 0;
}

.scene {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}

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



html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}


/* ===============================
   AU-DELÀ DE LA TECHNIQUE
================================ */

.passion-scene {
  background: linear-gradient(
    180deg,
    #08080d 0%,
    #050508 100%
  );
  padding: 120px 0;
  min-height: 100vh;
}

.passion-wrapper {
  max-width: 1000px; /* ← CENTRÉ */
  margin: 0 auto;
  padding: 0 2rem;
}

.scene-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(3rem, 6vw, 5rem); /* ← BEAUCOUP PLUS GRAND */
  font-weight: 500;
  text-align: center;
  margin-bottom: 6rem;
  background: linear-gradient(135deg, var(--pink), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

/* Container des cartes */
.passion-stack {
  position: relative;
  margin: 0 auto;
  max-width: 800px; /* ← CENTRÉ ET PLUS LARGE */
}

/* Cartes sticky empilées */
.passion-card {
  position: sticky;
  top: 120px;
  margin-bottom: 4rem;
  background: rgba(10, 10, 10, 0.95); /* ← MÊME COULEUR QUE COMPÉTENCES */
  backdrop-filter: blur(20px);
  border-radius: 26px;
  padding: 3rem;
  border: 2px solid rgba(169, 57, 111, 0.4); /* ← MÊME BORDURE */
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(169, 57, 111, 0.2); /* ← MÊME OMBRE */
  transition: all 0.6s ease;
  overflow: hidden;
}

.passion-card:hover {
  transform: translateY(-8px);
  border-color: var(--pink);
  box-shadow: 
    0 40px 100px rgba(0, 0, 0, 0.8),
    0 0 50px var(--pink-glow);
}

/* Structure de la carte */
.passion-card-content {
  display: grid;
  grid-template-columns: 180px 1fr; /* ← IMAGE À GAUCHE, TEXTE À DROITE */
  gap: 2.5rem;
  align-items: center;
}

/* Image/Photo (placeholder pour l'instant) */
.passion-card-image {
  width: 180px;
  height: 180px;
  border-radius: 20px;
  background: rgba(169, 57, 111, 0.1);
  border: 2px solid rgba(169, 57, 111, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  transition: all 0.4s ease;
  overflow: hidden;
  position: relative;
}

.passion-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.passion-card:hover .passion-card-image {
  transform: scale(1.05);
  border-color: var(--pink);
  box-shadow: 0 0 30px var(--pink-glow);
}

/* Contenu texte */
.passion-card-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Titres plus grands */
.passion-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem); /* ← PLUS GRAND */
  font-weight: 500;
  margin-bottom: 1rem;
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(169,57,111,0.45),
    0 0 14px rgba(169,57,111,0.35),
    0 0 28px rgba(169,57,111,0.25);
  letter-spacing: -0.01em;
}

/* Description */
.passion-card p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65); /* ← MÊME COULEUR QUE COMPÉTENCES */
  font-weight: 300;
  margin-bottom: 1rem;
}

/* Bouton "Voir ma galerie" (apparaît au hover) */
.passion-card-btn {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
  margin-top: 0.5rem;
}

.passion-card:hover .passion-card-btn {
  opacity: 1;
  transform: translateY(0);
}

.passion-card-btn a {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.8rem;
  background: rgba(169, 57, 111, 0.1);
  border: 2px solid rgba(169, 57, 111, 0.3);
  border-radius: 50px;
  color: var(--pink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.passion-card-btn a:hover {
  background: rgba(169, 57, 111, 0.2);
  border-color: var(--pink);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px var(--pink-glow);
}

.passion-card-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.passion-card-btn a:hover svg {
  transform: translateX(5px);
}

/* Effet profondeur au scroll (déjà présent) */
.passion-card:nth-child(1) { transform: translateY(0); }
.passion-card:nth-child(2) { transform: translateY(20px); }
.passion-card:nth-child(3) { transform: translateY(40px); }
.passion-card:nth-child(4) { transform: translateY(60px); }

/* Responsive */
@media (max-width: 768px) {
  .passion-card-content {
    grid-template-columns: 1fr; /* ← VERTICAL SUR MOBILE */
    text-align: center;
  }
  
  .passion-card-image {
    margin: 0 auto;
  }
  
  .passion-card {
    position: relative;
    top: auto;
    padding: 2rem;
  }
  
  .scene-title {
    font-size: 2.5rem;
  }
}


/* SEULEMENT le prénom en couleur */
.about-preview-text strong,
.intro-text strong {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}

/* Exception : SEULEMENT "Mame Diarra Wade" reste en rose */
.about-preview-text p:first-of-type strong,
.intro-text p:first-of-type strong {
  color: var(--pink);
  font-weight: 600;
}

/* Enlever les autres strong en rose */
.intro-text p:nth-of-type(2) strong,
.intro-text p:nth-of-type(3) strong,
.about-preview-text p:nth-of-type(2) strong {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}



.subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.6;
  margin-bottom: 3.5rem;
  opacity: 0.85;
  font-weight: 300;
  max-width: 600px;
  margin-left: 0;
  margin-right: 0;
  color: #ffffff; /* ← AJOUTÉ : Force le blanc */
}

.hero-subtitle {
  font-family: 'Space Grotesk', sans-serif; /* ← AJOUTÉ */
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 400; /* ← AJOUTÉ */
  letter-spacing: 0.05em; /* ← AJOUTÉ */
  opacity: 1; /* ← AJOUTÉ (avant 0.8) */
  max-width: 600px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.6); /* ← AJOUTÉ : Gris clair */
}

/* ✅ AJOUTÉ : */
.about-preview-text h3,
.intro-text h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(169,57,111,0.45),
    0 0 14px rgba(169,57,111,0.35),
    0 0 28px rgba(169,57,111,0.25);
}

/* ✅ AJOUTÉ : */
.about-preview-text p,
.intro-text p {
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.65); /* ← AJOUTÉ : Gris clair */
  font-weight: 300;
}



/* ✅ AJOUTÉ : */
.about-preview-text strong,
.intro-text strong {
  color: rgba(255, 255, 255, 0.65); /* ← Par défaut gris */
  font-weight: 600;
}

.about-preview-text p:first-of-type strong,
.intro-text p:first-of-type strong {
  color: var(--pink); /* ← SEUL le premier strong en rose */
  font-weight: 600;
}

/* ✅ AJOUTÉ : */
@media (max-width: 768px) {
  .about-preview-image img,
  .intro-image img {
    max-width: 300px;
  }
  
  .stat-item:hover {
    transform: translateY(-8px); /* ← Effet réduit sur mobile */
  }
}


/* Icônes SVG neutres */
.category-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  opacity: 0.7;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-icon svg {
  width: 48px;
  height: 48px;
  stroke: rgba(255, 255, 255, 0.5); /* ← Gris neutre par défaut */
  transition: all 0.4s ease;
}

.skill-category.active .category-icon {
  opacity: 1;
}

.skill-category.active .category-icon svg {
  stroke: var(--pink); /* ← Rose quand la carte est active */
  filter: drop-shadow(0 0 10px var(--pink-glow));
}



/* =============================================
   NOUVELLES SECTIONS PORTFOLIO
============================================= */

.portfolio-section {
  padding: 6rem 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-subtitle {
  font-size: 1.1rem;
  opacity: 0.7;
  margin-top: 1rem;
}

/* =============================================
   CARROUSEL 3D - PARCOURS
============================================= */

.journey-section {
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
  perspective: 1500px;
}

.carousel-3d-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.carousel-3d {
  width: 320px;
  height: 320px;
  margin: 0 auto;
  position: relative;
  transform-style: preserve-3d;
  animation: spin3d 20s infinite linear;
}

@keyframes spin3d {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.face {
  position: absolute;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  border: 2px solid rgba(169, 57, 111, 0.4);
  backdrop-filter: blur(12px);
  background: rgba(10, 10, 10, 0.8);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.face.france {
  transform: rotateY(0deg) translateZ(220px);
  background: linear-gradient(135deg, rgba(0, 85, 164, 0.2), rgba(10, 10, 10, 0.9));
}

.face.senegal {
  transform: rotateY(120deg) translateZ(220px);
  background: linear-gradient(135deg, rgba(0, 159, 70, 0.2), rgba(10, 10, 10, 0.9));
}

.face.europe {
  transform: rotateY(240deg) translateZ(220px);
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), rgba(10, 10, 10, 0.9));
}

.country-content {
  text-align: center;
  padding: 2rem;
}

.flag {
  font-size: 5rem;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 20px rgba(169, 57, 111, 0.5));
}

.country-content h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--pink);
}

.country-content p {
  opacity: 0.8;
  margin-bottom: 1rem;
}

.year {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: rgba(169, 57, 111, 0.2);
  border-radius: 20px;
  font-size: 0.9rem;
  color: var(--pink);
}

.carousel-hint {
  text-align: center;
  margin-top: 3rem;
  opacity: 0.5;
  font-size: 0.9rem;
}

/* =============================================
   TERMINAL ANSIBLE
============================================= */

.ansible-section {
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
}

.terminal-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
}

.terminal {
  background: #1e1e1e;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(169, 57, 111, 0.2);
}

.terminal-header {
  background: #2d2d2d;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.terminal-buttons {
  display: flex;
  gap: 0.5rem;
}

.terminal-buttons span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.btn-close { background: #ff5f56; }
.btn-minimize { background: #ffbd2e; }
.btn-maximize { background: #27c93f; }

.terminal-title {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-family: 'Courier New', monospace;
}

.terminal-body {
  padding: 1.5rem;
  min-height: 350px;
  max-height: 500px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
}

.terminal-output {
  margin-bottom: 1rem;
}

.terminal-line {
  color: #00ff00;
  margin: 0.5rem 0;
}

.prompt {
  color: var(--pink);
  margin-right: 0.5rem;
}

.terminal-input-line {
  display: flex;
  align-items: center;
}

.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: inherit;
  font-size: inherit;
  padding-left: 0.5rem;
}

.command-suggestions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.cmd-btn {
  padding: 0.7rem 1.5rem;
  background: rgba(169, 57, 111, 0.1);
  border: 1px solid rgba(169, 57, 111, 0.3);
  border-radius: 8px;
  color: var(--pink);
  font-family: 'Courier New', monospace;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cmd-btn:hover {
  background: rgba(169, 57, 111, 0.2);
  border-color: var(--pink);
  transform: translateY(-2px);
}

/* =============================================
   PRUD'HOMMES
============================================= */

.prudhommes-section {
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
}

.prudhommes-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.prudhommes-image {
  position: relative;
}

.image-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: rgba(169, 57, 111, 0.1);
  border: 2px solid rgba(169, 57, 111, 0.3);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8rem;
}

.tag {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: rgba(169, 57, 111, 0.2);
  color: var(--pink);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.prudhommes-text h3 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #ffffff;
}

.prudhommes-text p {
  opacity: 0.8;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.insights-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.insights-list li {
  padding: 0.8rem 0;
  padding-left: 2rem;
  position: relative;
  color: rgba(255, 255, 255, 0.7);
}

.insights-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--pink);
  font-weight: bold;
}

.date-badge {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(169, 57, 111, 0.3);
  border-radius: 10px;
  color: var(--pink);
  font-weight: 600;
}

/* =============================================
   STORYTELLING
============================================= */

.story-section {
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
}

.story-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.story-step {
  flex: 1;
  min-width: 300px;
  padding: 3rem 2rem;
  border-radius: 24px;
  background: rgba(10, 10, 10, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.4s ease;
  position: relative;
}

.story-step:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.story-step.danger {
  border-left: 5px solid #ff4d4d;
}

.story-step.solution {
  border-left: 5px solid #64c8ff;
}

.story-step.result {
  border-left: 5px solid #4ecdc4;
}

.step-icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
}

.story-step h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.story-step > p {
  opacity: 0.8;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.step-details ul {
  list-style: none;
  padding: 0;
}

.step-details li {
  padding: 0.6rem 0;
  opacity: 0.7;
  padding-left: 1.5rem;
  position: relative;
}

.step-details li::before {
  content: '▹';
  position: absolute;
  left: 0;
  color: var(--pink);
}

.arrow {
  font-size: 3rem;
  color: var(--pink);
  opacity: 0.5;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* =============================================
   GALERIE
============================================= */

.gallery-section {
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-item {
  background: rgba(10, 10, 10, 0.8);
  border: 2px solid rgba(169, 57, 111, 0.3);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
  cursor: pointer;
}

.gallery-item:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--pink);
  box-shadow: 0 20px 60px var(--pink-glow);
}

.gallery-image {
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(169, 57, 111, 0.1), rgba(10, 10, 10, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  border-bottom: 2px solid rgba(169, 57, 111, 0.2);
}

.gallery-info {
  padding: 1.5rem;
}

.gallery-info h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.gallery-info p {
  opacity: 0.7;
  font-size: 0.9rem;
}

/* =============================================
   PASSIONS
============================================= */

.passions-section {
  background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
}

.passions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.passion-card {
  background: rgba(10, 10, 10, 0.95);
  border: 2px solid rgba(169, 57, 111, 0.3);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.4s ease;
}

.passion-card:hover {
  transform: translateY(-10px);
  border-color: var(--pink);
  box-shadow: 0 20px 60px var(--pink-glow);
}

.passion-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
}

.passion-card h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.passion-card p {
  opacity: 0.8;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.passion-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.passion-tags span {
  padding: 0.4rem 1rem;
  background: rgba(169, 57, 111, 0.1);
  border: 1px solid rgba(169, 57, 111, 0.3);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--pink);
}

/* =============================================
   RESPONSIVE
============================================= */

@media (max-width: 768px) {
  .prudhommes-content,
  .story-timeline {
    grid-template-columns: 1fr;
  }

  .arrow {
    transform: rotate(90deg);
  }

  .carousel-3d {
    width: 280px;
    height: 280px;
  }

  .face {
    width: 260px;
    height: 260px;
  }
}

/* =============================================
   CERTIFICATIONS
============================================= */

.certifications-section {
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
}

.certifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.certif-card {
  background: rgba(10, 10, 10, 0.95);
  border: 2px solid rgba(169, 57, 111, 0.3);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
  text-align: left; /* ajoute ceci */
}

.certif-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.certif-img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}

.certif-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--pink);
}

.certif-desc {
  opacity: 0.8;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.certif-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.certif-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  opacity: 0.8;
  font-size: 0.95rem;
}

.certif-list li::before {
  content: '▹';
  position: absolute;
  left: 0;
  color: var(--pink);
  font-weight: bold;
}

.btn-certif {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background: rgba(169, 57, 111, 0.1);
  border: 1px solid rgba(169, 57, 111, 0.3);
  border-radius: 8px;
  color: var(--pink);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-certif:hover {
  background: rgba(169, 57, 111, 0.2);
  border-color: var(--pink);
  transform: translateY(-2px);
}


.btn-reco {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.4rem;
  background: linear-gradient(135deg, #6c1d50, #2b1d26);
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-reco:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,99,235,0.4);
}


/* =====================
   NAV DROPDOWN — CLIC
===================== */

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-trigger {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--text-dark);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.3s ease;
}



.nav-dropdown-trigger::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-dropdown.open .nav-dropdown-trigger::after,
.nav-dropdown-trigger:hover::after {
  width: 100%;
}

.nav-dropdown.open .nav-dropdown-trigger,
.nav-dropdown-trigger:hover {
  color: var(--pink);
  text-shadow: 0 0 15px var(--pink-glow);
}

.dropdown-arrow {
  transition: transform 0.3s ease;
  opacity: 0.7;
}

.nav-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 1.2rem);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(8, 8, 12, 0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(169, 57, 111, 0.25);
  border-radius: 16px;
  padding: 0.6rem 0;
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1001;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    0 0 0 1px rgba(169,57,111,0.1),
    0 0 40px rgba(169,57,111,0.08);
}



.nav-dropdown.open .dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1.4rem;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
  margin: 0.1rem 0.5rem;
  border-radius: 8px;
}



.dropdown-menu a:hover {
  color: var(--pink);
  background: rgba(169, 57, 111, 0.08);
  border-left-color: var(--pink);
  padding-left: 1.7rem;
}



/* Séparateur dropdown */
.dropdown-menu a::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pink);
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.dropdown-menu a:hover::before {
  opacity: 1;
}


/* =====================
   MODE CLAIR — PALETTE RICHE & COLORÉE
   Thème : bordeaux chaud + crème rosée
===================== */

:root {
  /* Variables light mode */
  --lm-bg-base: #fdf6f0;
  --lm-bg-2: #f5e8e0;
  --lm-bg-3: #eeddd5;
  --lm-bg-card: #ffffff;
  --lm-bg-card-2: #fdf0ea;
  --lm-text: #2d1a1a;
  --lm-text-2: #5c3535;
  --lm-text-muted: rgba(45, 26, 26, 0.55);
  --lm-border: rgba(169, 57, 111, 0.2);
  --lm-border-hover: rgba(169, 57, 111, 0.5);
  --lm-shadow-sm: 0 2px 16px rgba(169, 57, 111, 0.08);
  --lm-shadow-md: 0 8px 40px rgba(169, 57, 111, 0.14);
  --lm-shadow-lg: 0 20px 70px rgba(169, 57, 111, 0.18);
  --lm-pink-dark: #8b1f55;
  --lm-accent: #c4476e;
}

body.light-mode {
  background: var(--lm-bg-base);
  color: var(--lm-text);
}

/* —— HEADER —— */
body.light-mode .header {
  background: rgba(253, 246, 240, 0.94);
  border-bottom: 1px solid rgba(169, 57, 111, 0.15);
  box-shadow: 0 2px 24px rgba(169, 57, 111, 0.08);
}

body.light-mode .nav a {
  color: var(--lm-text-2);
}

body.light-mode .nav a:hover,
body.light-mode .nav a.active {
  color: var(--lm-pink-dark);
  text-shadow: 0 0 12px rgba(139, 31, 85, 0.2);
}

body.light-mode .nav a::after {
  background: linear-gradient(90deg, transparent, var(--lm-pink-dark), transparent);
}

body.light-mode .nav-dropdown-trigger {
  color: var(--lm-text-2);
}

body.light-mode .nav-dropdown.open .nav-dropdown-trigger,
body.light-mode .nav-dropdown-trigger:hover {
  color: var(--lm-pink-dark);
  text-shadow: 0 0 12px rgba(139, 31, 85, 0.2);
}

body.light-mode .burger span {
  background: var(--lm-text);
}

body.light-mode .dropdown-menu {
  background: rgba(255, 252, 249, 0.98);
  border-color: rgba(169, 57, 111, 0.18);
  box-shadow: 0 16px 50px rgba(169, 57, 111, 0.12), 0 0 0 1px rgba(169, 57, 111, 0.08);
}

body.light-mode .dropdown-menu a {
  color: var(--lm-text-2);
}

body.light-mode .dropdown-menu a:hover {
  color: var(--lm-pink-dark);
  background: rgba(169, 57, 111, 0.07);
  border-left-color: var(--lm-pink-dark);
}

body.light-mode .actions button {
  color: var(--lm-text-2);
  background: rgba(169, 57, 111, 0.08);
  border-color: rgba(169, 57, 111, 0.2);
}

body.light-mode .actions button:hover {
  color: var(--lm-pink-dark);
  background: rgba(169, 57, 111, 0.14);
  border-color: var(--lm-pink-dark);
}

/* —— HERO SECTIONS —— */
body.light-mode .hero-epic {
  background: linear-gradient(135deg, #fdf0ea 0%, #f5ddd5 40%, #fde8f0 100%);
}

body.light-mode .about-hero,
body.light-mode .portfolio-hero,
body.light-mode .contact-hero,
body.light-mode .passions-hero {
  background: linear-gradient(135deg, #f5ddd5 0%, #f0d0e0 100%);
}

/* Titres hero en dark (lisible sur fond crème) */
body.light-mode .page-title .word {
  color: var(--lm-text);
}

body.light-mode .page-title .pink {
  color: var(--lm-pink-dark);
  text-shadow: 0 0 20px rgba(139, 31, 85, 0.2);
}

body.light-mode .glow-subtitle {
  color: var(--lm-text-2);
  text-shadow: 0 0 6px rgba(139, 31, 85, 0.12);
}

body.light-mode .hero-subtitle {
  color: var(--lm-text-muted);
}

body.light-mode .subtitle {
  color: var(--lm-text-2);
}

/* Portrait accueil — cercle avec double anneau rose */
body.light-mode .hero-portrait {
  border-radius: 50%;
  border: 4px solid rgba(139, 31, 85, 0.3);
  box-shadow:
    0 0 0 10px rgba(169, 57, 111, 0.07),
    0 0 0 20px rgba(169, 57, 111, 0.03),
    0 24px 70px rgba(139, 31, 85, 0.2);
  mask-image: none;
  -webkit-mask-image: none;
  width: 400px;
  aspect-ratio: 1;
  object-fit: cover;
}

body.light-mode .portrait-wrapper {
  width: 440px;
}

/* Images rondes partout */
body.light-mode .about-preview-image img,
body.light-mode .intro-image img {
  border-radius: 50%;
  border: 3px solid rgba(139, 31, 85, 0.25);
  box-shadow:
    0 0 0 8px rgba(169, 57, 111, 0.05),
    0 8px 40px rgba(139, 31, 85, 0.12);
  mask-image: none;
  -webkit-mask-image: none;
}

/* —— SECTIONS BACKGROUNDS —— */
body.light-mode .about-preview,
body.light-mode .about-intro {
  background: linear-gradient(180deg, #f5ddd5 0%, #fdf6f0 100%);
}

body.light-mode .story-intro-section {
  background: linear-gradient(180deg, #fdf6f0 0%, #f5e8e0 100%);
}

body.light-mode .education-section {
  background: #fdf6f0;
}

body.light-mode .certifications-about-section {
  background: var(--lm-bg-2);
}

body.light-mode .skills-section {
  background: linear-gradient(180deg, #f5e8e0 0%, #fdf6f0 100%);
}

body.light-mode .soft-skills-section {
  background: #fdf6f0;
}

body.light-mode .engagements-section {
  background: var(--lm-bg-2);
}

body.light-mode .recommandations-section {
  background: linear-gradient(180deg, var(--lm-bg-2) 0%, var(--lm-bg-3) 100%);
}

body.light-mode .passion-scene {
  background: #fdf6f0;
}

body.light-mode .passions-magazine {
  background: var(--lm-bg-2);
}

body.light-mode .ansible-cards-section,
body.light-mode .passion-card-deck-section {
  background: var(--lm-bg-base);
}

body.light-mode .gallery-scroll-section {
  background: var(--lm-bg-2);
}

body.light-mode .cta-section {
  background: linear-gradient(135deg, #f0d0e0 0%, #f5ddd5 100%);
}

body.light-mode .portfolio-page {
  background: var(--lm-bg-base);
}

body.light-mode .projects-section {
  background: linear-gradient(180deg, var(--lm-bg-base) 0%, var(--lm-bg-2) 100%);
}

body.light-mode .filters-section {
  background: rgba(245, 232, 224, 0.97);
  border-bottom: 1px solid rgba(169, 57, 111, 0.15);
}

body.light-mode .stages-section {
  background: linear-gradient(180deg, var(--lm-bg-2) 0%, var(--lm-bg-3) 100%);
}

body.light-mode .certifications-section {
  background: var(--lm-bg-base);
}

body.light-mode .contact-content {
  background: var(--lm-bg-base);
}

body.light-mode .contact-hero {
  background: linear-gradient(135deg, #f5ddd5 0%, #f0d0e0 100%);
}

/* Sections avec style inline */
body.light-mode section[style*="background"] {
  background: var(--lm-bg-base) !important;
}

/* —— TITRES & TEXTES —— */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4 {
  color: var(--lm-text);
}

body.light-mode .section-title {
  background: linear-gradient(135deg, var(--lm-pink-dark) 0%, #6b1a3a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light-mode .scene-title {
  background: linear-gradient(135deg, var(--lm-pink-dark) 0%, #6b1a3a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light-mode .section-subtitle {
  color: var(--lm-text-muted);
}

body.light-mode .about-preview-text h3,
body.light-mode .intro-text h2 {
  color: var(--lm-text);
  text-shadow: none;
}

body.light-mode .about-preview-text p,
body.light-mode .intro-text p {
  color: var(--lm-text-2);
}

body.light-mode .about-preview-text p:first-of-type strong,
body.light-mode .intro-text p:first-of-type strong {
  color: var(--lm-pink-dark);
}

body.light-mode .story-paragraph {
  background: rgba(139, 31, 85, 0.05);
  color: var(--lm-text-2);
  border-left-color: var(--lm-pink-dark);
}

body.light-mode .story-paragraph:hover {
  background: rgba(139, 31, 85, 0.09);
}

body.light-mode .story-paragraph strong {
  color: var(--lm-pink-dark);
}

/* —— BOUTONS —— */
body.light-mode .btn-primary {
  background: linear-gradient(135deg, var(--lm-pink-dark) 0%, rgba(139, 31, 85, 0.7) 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(139, 31, 85, 0.25);
}

body.light-mode .btn-primary:hover {
  background: rgba(139, 31, 85, 0.08);
  border: 2px solid var(--lm-pink-dark);
  color: var(--lm-pink-dark);
  box-shadow: 0 8px 30px rgba(139, 31, 85, 0.2);
}

body.light-mode .btn-secondary {
  background: rgba(139, 31, 85, 0.06);
  border-color: rgba(139, 31, 85, 0.3);
  color: var(--lm-pink-dark);
}

body.light-mode .btn-secondary:hover {
  background: linear-gradient(135deg, var(--lm-pink-dark) 0%, rgba(139, 31, 85, 0) 100%);
  color: #fff;
  box-shadow: 0 8px 30px rgba(139, 31, 85, 0.25);
}

/* —— CARTES GÉNÉRIQUES —— */
body.light-mode .skill-category,
body.light-mode .soft-skill-card,
body.light-mode .project-card,
body.light-mode .project-card-full,
body.light-mode .reco-card,
body.light-mode .engagement-card,
body.light-mode .stage-card,
body.light-mode .certif-card,
body.light-mode .certif-about-card,
body.light-mode .ansible-fiche,
body.light-mode .magazine-card-large,
body.light-mode .magazine-card-small,
body.light-mode .magazine-card-medium,
body.light-mode .info-card,
body.light-mode .timeline-content,
body.light-mode .tl-content,
body.light-mode .passion-deck-card {
  background: var(--lm-bg-card);
  border-color: rgba(169, 57, 111, 0.18);
  box-shadow: var(--lm-shadow-sm);
  color: var(--lm-text);
}

body.light-mode .skill-category:hover,
body.light-mode .skill-category.active,
body.light-mode .soft-skill-card.active,
body.light-mode .project-card:hover,
body.light-mode .project-card-full:hover,
body.light-mode .engagement-card:hover,
body.light-mode .stage-card:hover,
body.light-mode .certif-card:hover,
body.light-mode .certif-about-card:hover,
body.light-mode .magazine-card-large:hover,
body.light-mode .magazine-card-small:hover,
body.light-mode .magazine-card-medium:hover,
body.light-mode .passion-deck-card.active {
  border-color: var(--lm-pink-dark);
  box-shadow: var(--lm-shadow-md);
}

/* —— TEXTES DANS CARTES —— */
body.light-mode .skill-list li,
body.light-mode .soft-skill-card p,
body.light-mode .project-info p,
body.light-mode .pcf-accroche,
body.light-mode .pcf-section-text,
body.light-mode .reco-quote,
body.light-mode .engagement-card p,
body.light-mode .tl-desc,
body.light-mode .mag-body p,
body.light-mode .fiche-desc,
body.light-mode .step-content p,
body.light-mode .certif-desc,
body.light-mode .certif-about-body p,
body.light-mode .stage-problem,
body.light-mode .timeline-school,
body.light-mode .tl-school,
body.light-mode .pcf-step > div:last-child p,
body.light-mode .pcf-bug-item div,
body.light-mode .pcf-learnings p,
body.light-mode .pcf-identity-value,
body.light-mode .scroll-item-caption,
body.light-mode .card-info p {
  color: var(--lm-text-2);
}

body.light-mode .skill-category h3,
body.light-mode .soft-skill-card h3,
body.light-mode .engagement-card h3,
body.light-mode .step-content h4,
body.light-mode .mag-body h3,
body.light-mode .stage-title-block h3,
body.light-mode .tl-content h3,
body.light-mode .timeline-content h3,
body.light-mode .info-card h3,
body.light-mode .project-info h3,
body.light-mode .pcf-title,
body.light-mode .pcf-step > div:last-child strong,
body.light-mode .passion-deck-title,
body.light-mode .card-info h4 {
  color: var(--lm-text);
}

/* Textes en rose foncé dans cartes */
body.light-mode .skill-list li::before,
body.light-mode .certif-list li::before,
body.light-mode .step-details li::before {
  color: var(--lm-pink-dark);
}

body.light-mode .pcf-identity-label,
body.light-mode .pcf-section-label,
body.light-mode .stage-section-label,
body.light-mode .pcf-bugs-label,
body.light-mode .pcf-learnings-label,
body.light-mode .pcf-code-label,
body.light-mode .pcf-diagram-label,
body.light-mode .gallery-scroll-label,
body.light-mode .deck-label,
body.light-mode .mag-category {
  color: var(--lm-pink-dark);
}

body.light-mode .tl-date {
  background: rgba(139, 31, 85, 0.1);
  color: var(--lm-pink-dark);
}

body.light-mode .tl-tag {
  background: rgba(139, 31, 85, 0.07);
  border-color: rgba(139, 31, 85, 0.15);
  color: var(--lm-text-muted);
}

body.light-mode .tl-dot {
  border-color: var(--lm-bg-base);
}

/* —— STATS —— */
body.light-mode .stat-item {
  background: var(--lm-bg-card-2);
  border-color: rgba(169, 57, 111, 0.18);
}

body.light-mode .stat-number {
  color: var(--lm-pink-dark);
}

body.light-mode .stat-label {
  color: var(--lm-text-muted);
}

/* —— FILTRES —— */
body.light-mode .filter-btn,
body.light-mode .filter-skill-btn,
body.light-mode .tag-filter-btn {
  color: var(--lm-text-2);
  background: var(--lm-bg-card);
  border-color: rgba(169, 57, 111, 0.2);
}

body.light-mode .filter-btn:hover,
body.light-mode .filter-btn.active,
body.light-mode .filter-skill-btn:hover,
body.light-mode .filter-skill-btn.active,
body.light-mode .tag-filter-btn:hover,
body.light-mode .tag-filter-btn.active {
  color: var(--lm-pink-dark);
  background: rgba(139, 31, 85, 0.08);
  border-color: var(--lm-pink-dark);
  box-shadow: 0 4px 16px rgba(139, 31, 85, 0.12);
}

body.light-mode .results-counter {
  color: var(--lm-text-muted);
}

/* —— STAGE CARDS —— */
body.light-mode .stage-card-header {
  background: linear-gradient(135deg, rgba(139, 31, 85, 0.05) 0%, transparent 100%);
  border-bottom-color: rgba(169, 57, 111, 0.15);
}

body.light-mode .stage-badge.entreprise {
  background: rgba(139, 31, 85, 0.1);
  color: var(--lm-pink-dark);
  border-color: rgba(139, 31, 85, 0.25);
}

body.light-mode .stage-badge.periode {
  color: var(--lm-text-muted);
  background: rgba(139, 31, 85, 0.05);
  border-color: rgba(169, 57, 111, 0.15);
}

body.light-mode .stage-stack span {
  color: var(--lm-text-2);
  background: rgba(139, 31, 85, 0.05);
  border-color: rgba(169, 57, 111, 0.15);
}

body.light-mode .stage-section-label::after {
  background: rgba(169, 57, 111, 0.18);
}

body.light-mode .stage-problem {
  color: var(--lm-text-2);
  background: rgba(200, 50, 50, 0.04);
}

body.light-mode .step-num {
  background: rgba(139, 31, 85, 0.1);
  border-color: rgba(139, 31, 85, 0.3);
  color: var(--lm-pink-dark);
}

/* —— MOCKUP —— */
body.light-mode .mockup-container {
  background: var(--lm-bg-card-2);
  border-color: rgba(169, 57, 111, 0.2);
  color: var(--lm-text-muted);
}

body.light-mode .mockup-container svg {
  stroke: rgba(139, 31, 85, 0.25);
}

/* —— CERTIFS —— */
body.light-mode .certif-badge-img {
  background: var(--lm-bg-card-2);
  border-bottom-color: rgba(169, 57, 111, 0.15);
}

body.light-mode .certif-issuer {
  color: var(--lm-text-muted);
}

body.light-mode .certif-about-body h3 {
  color: var(--lm-pink-dark);
}

body.light-mode .certif-card h3 {
  color: var(--lm-pink-dark);
}

body.light-mode .btn-certif,
body.light-mode .certif-view-btn {
  color: var(--lm-pink-dark);
  background: rgba(139, 31, 85, 0.07);
  border-color: rgba(139, 31, 85, 0.25);
}

body.light-mode .btn-certif:hover,
body.light-mode .certif-view-btn:hover {
  background: rgba(139, 31, 85, 0.14);
  border-color: var(--lm-pink-dark);
}

/* —— RECOMMANDATIONS —— */
body.light-mode .reco-card {
  background: var(--lm-bg-card);
  box-shadow: var(--lm-shadow-md);
}

body.light-mode .reco-card::before {
  color: rgba(139, 31, 85, 0.1);
}

body.light-mode .reco-author-info strong {
  color: var(--lm-pink-dark);
}

body.light-mode .reco-author-info span {
  color: var(--lm-text-muted);
}

body.light-mode .reco-btn {
  color: var(--lm-text-2);
  background: rgba(139, 31, 85, 0.06);
  border-color: rgba(169, 57, 111, 0.2);
}

body.light-mode .reco-btn:hover {
  color: var(--lm-pink-dark);
  background: rgba(139, 31, 85, 0.12);
  border-color: var(--lm-pink-dark);
}

body.light-mode .reco-dot {
  background: rgba(169, 57, 111, 0.2);
}

body.light-mode .reco-dot.active {
  background: var(--lm-pink-dark);
}

body.light-mode .reco-pdf-btn {
  color: var(--lm-pink-dark);
  background: rgba(139, 31, 85, 0.07);
  border-color: rgba(139, 31, 85, 0.25);
}

/* —— ENGAGEMENTS —— */
body.light-mode .engagement-icon {
  background: rgba(139, 31, 85, 0.08);
  border-color: rgba(139, 31, 85, 0.22);
}

body.light-mode .engagement-icon svg {
  stroke: var(--lm-pink-dark);
}

body.light-mode .engagement-date {
  background: rgba(139, 31, 85, 0.1);
  color: var(--lm-pink-dark);
}

/* —— TIMELINE —— */
body.light-mode .timeline-interactive::before {
  background: linear-gradient(180deg, var(--lm-pink-dark), rgba(139, 31, 85, 0.1));
}

body.light-mode .tl-dot {
  background: var(--lm-pink-dark);
  box-shadow: 0 0 20px rgba(139, 31, 85, 0.3);
}

body.light-mode .tl-content:hover {
  border-color: var(--lm-pink-dark);
  box-shadow: 0 8px 30px rgba(139, 31, 85, 0.15);
}

/* —— PROJECT CARDS FULL —— */
body.light-mode .pcf-context-tag.dev { background: rgba(100, 180, 100, 0.12); color: #2e7d32; }
body.light-mode .pcf-context-tag.reseaux { background: rgba(139, 31, 85, 0.1); color: var(--lm-pink-dark); }
body.light-mode .pcf-context-tag.iot { background: rgba(21, 101, 192, 0.1); color: #1565c0; }
body.light-mode .pcf-context-tag.systeme { background: rgba(230, 81, 0, 0.1); color: #e65100; }
body.light-mode .pcf-context-tag.cyber { background: rgba(183, 28, 28, 0.1); color: #b71c1c; }

body.light-mode .pcf-identity {
  background: rgba(139, 31, 85, 0.05);
  border-color: rgba(169, 57, 111, 0.15);
}

body.light-mode .pcf-section-label::after {
  background: rgba(169, 57, 111, 0.2);
}

body.light-mode .pcf-diagram {
  background: var(--lm-bg-card-2);
  border-color: rgba(169, 57, 111, 0.15);
}

body.light-mode .pcf-bugs {
  background: rgba(183, 28, 28, 0.04);
  border-color: rgba(183, 28, 28, 0.12);
}

body.light-mode .pcf-bug-icon {
  background: rgba(183, 28, 28, 0.1);
  border-color: rgba(183, 28, 28, 0.25);
  color: #b71c1c;
}

body.light-mode .pcf-bugs-label {
  color: #b71c1c;
}

body.light-mode .pcf-learnings {
  background: rgba(139, 31, 85, 0.05);
  border-left-color: var(--lm-pink-dark);
}

body.light-mode .pcf-result-chip {
  background: rgba(46, 125, 50, 0.07);
  border-color: rgba(46, 125, 50, 0.2);
  color: #2e7d32;
}

body.light-mode .pcf-result-chip::before {
  color: #2e7d32;
}

body.light-mode .mvc-layer span:last-child {
  color: rgba(45, 26, 26, 0.55);
}

body.light-mode .pcf-perf-table {
  background: var(--lm-bg-card-2);
  border-color: rgba(169, 57, 111, 0.15);
}

body.light-mode .pcf-perf-row {
  border-bottom-color: rgba(169, 57, 111, 0.1);
}

body.light-mode .pcf-perf-row.header {
  background: rgba(139, 31, 85, 0.07);
}

body.light-mode .pcf-perf-row.header span:first-child {
  color: var(--lm-text-muted);
}

body.light-mode .pcf-perf-row span:first-child {
  color: var(--lm-text-2);
}

body.light-mode code {
  background: rgba(139, 31, 85, 0.08);
  color: var(--lm-pink-dark);
}

/* Timeline crise */
body.light-mode .crisis-h-label {
  color: var(--lm-text-2);
}

body.light-mode .crisis-h-line {
  background: rgba(169, 57, 111, 0.2);
}

/* —— CONTACT —— */
body.light-mode .contact-form-wrapper h2,
body.light-mode .contact-info-wrapper h2 {
  color: var(--lm-pink-dark);
}

body.light-mode .form-group label {
  color: var(--lm-text);
}

body.light-mode .form-group input,
body.light-mode .form-group textarea {
  background: var(--lm-bg-card);
  color: var(--lm-text);
  border-color: rgba(169, 57, 111, 0.22);
}

body.light-mode .form-group input:focus,
body.light-mode .form-group textarea:focus {
  border-color: var(--lm-pink-dark);
  box-shadow: 0 0 0 3px rgba(139, 31, 85, 0.1);
  outline: none;
}

body.light-mode .form-group input::placeholder,
body.light-mode .form-group textarea::placeholder {
  color: rgba(45, 26, 26, 0.35);
}

body.light-mode .info-card a {
  color: var(--lm-text-2);
}

body.light-mode .info-card a:hover {
  color: var(--lm-pink-dark);
}

body.light-mode .info-card p {
  color: var(--lm-text-2);
}

body.light-mode .info-icon-svg {
  background: rgba(139, 31, 85, 0.08);
  border-color: rgba(139, 31, 85, 0.22);
}

body.light-mode .info-icon-svg svg {
  fill: var(--lm-pink-dark);
}

body.light-mode .availability-card {
  background: linear-gradient(135deg, rgba(139, 31, 85, 0.08), rgba(139, 31, 85, 0.03));
  border-color: rgba(139, 31, 85, 0.35);
}

body.light-mode .availability-card h3 {
  color: var(--lm-pink-dark);
}

body.light-mode .availability-card p {
  color: var(--lm-text);
}

body.light-mode .availability-card strong {
  color: var(--lm-pink-dark);
}

/* —— FOOTER —— */
body.light-mode .site-footer {
  background: rgba(245, 232, 224, 0.96);
  border-top: 1px solid rgba(169, 57, 111, 0.15);
  box-shadow: 0 -4px 24px rgba(139, 31, 85, 0.07);
}

body.light-mode .footer-center p,
body.light-mode .footer-center .rights {
  color: var(--lm-text-muted);
}

body.light-mode .download-cv {
  color: var(--lm-text-2);
  background: rgba(139, 31, 85, 0.07);
  border-color: rgba(139, 31, 85, 0.22);
}

body.light-mode .download-cv:hover {
  color: var(--lm-pink-dark);
  background: rgba(139, 31, 85, 0.12);
  border-color: var(--lm-pink-dark);
}

body.light-mode .socials a {
  color: var(--lm-text-2);
  background: rgba(139, 31, 85, 0.07);
  border-color: rgba(139, 31, 85, 0.2);
}

body.light-mode .socials a:hover {
  background: rgba(139, 31, 85, 0.14);
  border-color: var(--lm-pink-dark);
}

body.light-mode .socials a svg {
  fill: var(--lm-text-2);
}

body.light-mode .socials a:hover svg {
  fill: var(--lm-pink-dark);
  filter: drop-shadow(0 0 6px rgba(139, 31, 85, 0.4));
}

/* —— TERMINAL —— */
body.light-mode .terminal {
  background: #1e1228;
}

body.light-mode .terminal-header {
  background: #2a1a38;
}

/* —— ANSIBLE FICHES —— */
body.light-mode .ansible-fiche {
  background: var(--lm-bg-card);
  border-color: rgba(169, 57, 111, 0.18);
}

body.light-mode .fiche-header {
  background: rgba(139, 31, 85, 0.07);
  border-bottom-color: rgba(169, 57, 111, 0.15);
}

body.light-mode .fiche-header h4 {
  color: var(--lm-pink-dark);
}

body.light-mode .fiche-code {
  background: #1e1228;
  color: #64ff96;
}

body.light-mode .fiche-desc {
  color: var(--lm-text-2);
}

/* —— PASSION PAGE —— */
body.light-mode .magazine-card-large,
body.light-mode .magazine-card-small,
body.light-mode .magazine-card-medium {
  background: var(--lm-bg-card);
  border-color: rgba(169, 57, 111, 0.18);
}

body.light-mode .mag-image {
  background: var(--lm-bg-card-2);
}

body.light-mode .scroll-item {
  background: var(--lm-bg-card);
  border-color: rgba(169, 57, 111, 0.18);
}

body.light-mode .scroll-item-placeholder {
  background: var(--lm-bg-card-2);
}

body.light-mode .scroll-item-placeholder svg {
  stroke: rgba(139, 31, 85, 0.3);
}

body.light-mode .photo-item {
  border-color: rgba(169, 57, 111, 0.18);
  background: var(--lm-bg-card-2);
}

body.light-mode .passion-deck-card .card-placeholder {
  background: var(--lm-bg-card-2);
}

body.light-mode .passion-deck-card .card-placeholder svg {
  stroke: rgba(139, 31, 85, 0.3);
}

body.light-mode .card-info {
  background: var(--lm-bg-card);
}

/* —— SCROLL INDICATORS —— */
body.light-mode .scroll-indicator span {
  color: rgba(45, 26, 26, 0.5);
}

body.light-mode .scroll-arrow {
  border-color: rgba(139, 31, 85, 0.4);
}

body.light-mode .scroll-arrow::before {
  background: var(--lm-pink-dark);
  box-shadow: 0 0 10px rgba(139, 31, 85, 0.3);
}

body.light-mode .instructions,
body.light-mode .scroll-hint,
body.light-mode .results-counter,
body.light-mode .carousel-hint,
body.light-mode .deck-hint {
  color: var(--lm-text-muted);
}

/* —— CARROUSEL 3D —— */
body.light-mode .face {
  background: rgba(255, 252, 249, 0.95);
  border-color: rgba(169, 57, 111, 0.2);
  box-shadow: var(--lm-shadow-sm);
}

body.light-mode .country-content h3 {
  color: var(--lm-pink-dark);
}

body.light-mode .country-content p {
  color: var(--lm-text-2);
}

body.light-mode .year {
  background: rgba(139, 31, 85, 0.1);
  color: var(--lm-pink-dark);
}

/* —— STORY STEPS —— */
body.light-mode .story-step {
  background: var(--lm-bg-card);
  box-shadow: var(--lm-shadow-sm);
  border-color: rgba(169, 57, 111, 0.15);
}

body.light-mode .story-step h3 {
  color: var(--lm-text);
}

body.light-mode .story-step > p,
body.light-mode .step-details li {
  color: var(--lm-text-2);
}

/* —— PRUDHOMMES / LEGACY —— */
body.light-mode .prudhommes-text h3 {
  color: var(--lm-text);
}

body.light-mode .prudhommes-text p,
body.light-mode .insights-list li {
  color: var(--lm-text-2);
}

body.light-mode .image-placeholder {
  background: var(--lm-bg-card-2);
  border-color: rgba(169, 57, 111, 0.18);
}

body.light-mode .date-badge {
  color: var(--lm-pink-dark);
  border-color: rgba(169, 57, 111, 0.2);
  background: rgba(139, 31, 85, 0.07);
}

body.light-mode .tag {
  background: rgba(139, 31, 85, 0.1);
  color: var(--lm-pink-dark);
}

/* —— BEFORE/AFTER TABLE —— */
body.light-mode .before-after-table td {
  border-bottom-color: rgba(169, 57, 111, 0.12);
}

body.light-mode .before-after-table th:first-child {
  background: rgba(183, 28, 28, 0.08);
  color: #b71c1c;
}

body.light-mode .before-after-table th:last-child {
  background: rgba(46, 125, 50, 0.08);
  color: #2e7d32;
}

body.light-mode .before-after-table td:first-child {
  color: var(--lm-text-2);
  background: rgba(183, 28, 28, 0.03);
}

body.light-mode .before-after-table td:last-child {
  color: var(--lm-text);
  background: rgba(46, 125, 50, 0.03);
}

/* —— STAGE RESULTS —— */
body.light-mode .stage-result-chip {
  background: rgba(46, 125, 50, 0.07);
  border-color: rgba(46, 125, 50, 0.2);
  color: #2e7d32;
}

body.light-mode .stage-result-chip::before {
  color: #2e7d32;
}

/* —— DOTS & NAV —— */
body.light-mode .dot {
  background: rgba(139, 31, 85, 0.2);
}

body.light-mode .dot.active {
  background: var(--lm-pink-dark);
  box-shadow: 0 0 8px rgba(139, 31, 85, 0.3);
}

body.light-mode .arrow-btn,
body.light-mode .stage-nav-btn,
body.light-mode .reco-btn {
  color: var(--lm-text-2);
  background: rgba(139, 31, 85, 0.07);
  border-color: rgba(139, 31, 85, 0.22);
}

body.light-mode .arrow-btn:hover,
body.light-mode .stage-nav-btn:hover,
body.light-mode .reco-btn:hover {
  color: var(--lm-pink-dark);
  background: rgba(139, 31, 85, 0.13);
  border-color: var(--lm-pink-dark);
  box-shadow: 0 4px 16px rgba(139, 31, 85, 0.15);
}

body.light-mode .stages-dot {
  background: rgba(139, 31, 85, 0.2);
}

body.light-mode .stages-dot.active {
  background: var(--lm-pink-dark);
}

body.light-mode .stages-counter {
  color: var(--lm-text-muted);
}

body.light-mode .stages-counter span {
  color: var(--lm-pink-dark);
}

/* —— CURSOR —— */
body.light-mode .custom-cursor {
  background: rgba(139, 31, 85, 0.7);
  border-color: rgba(139, 31, 85, 0.4);
  box-shadow: 0 0 16px rgba(139, 31, 85, 0.4), 0 0 32px rgba(139, 31, 85, 0.2);
}

body.light-mode .custom-cursor.active {
  background: rgba(139, 31, 85, 0.85);
  box-shadow: 0 0 30px rgba(139, 31, 85, 0.7), 0 0 50px rgba(139, 31, 85, 0.4);
}

/* —— CV PAGE —— */
body.light-mode .cv-page {
  background: var(--lm-bg-base);
}

body.light-mode .cv-title {
  background: linear-gradient(135deg, var(--lm-pink-dark), #6b1a3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light-mode .pdf-viewer {
  background: rgba(139, 31, 85, 0.04);
  border-color: rgba(139, 31, 85, 0.25);
}

/* —— NAV MOBILE —— */
body.light-mode .nav {
  /*background: rgba(253, 246, 240, 0.98);*/
  border-left: 1px solid rgba(169, 57, 111, 0.15);
}

/* —— PASSIONS CARDS ABOUT (section "Au-delà") —— */
body.light-mode .passion-card {
  background: var(--lm-bg-card);
  border-color: rgba(169, 57, 111, 0.18);
}

body.light-mode .passion-card h3 {
  color: var(--lm-text);
  text-shadow: none;
}

body.light-mode .passion-card p {
  color: var(--lm-text-2);
}

body.light-mode .passion-card-image {
  background: rgba(139, 31, 85, 0.07);
  border-color: rgba(139, 31, 85, 0.2);
}

body.light-mode .passion-card-btn a {
  color: var(--lm-pink-dark);
  background: rgba(139, 31, 85, 0.07);
  border-color: rgba(139, 31, 85, 0.25);
}

body.light-mode .passion-card-btn a:hover {
  background: rgba(139, 31, 85, 0.13);
  border-color: var(--lm-pink-dark);
}

/* —— HIGHLIGHT STAGE/ALTERNANCE —— */
body.light-mode .highlight-stage {
  color: var(--lm-text);
  text-shadow:
    0 0 15px rgba(139, 31, 85, 0.6),
    0 0 30px rgba(139, 31, 85, 0.4);
}


/* =====================
   ICONES SVG — CONTACT
===================== */

.info-icon-svg {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(169, 57, 111, 0.1);
  border: 2px solid rgba(169, 57, 111, 0.25);
  border-radius: 50%;
  margin-bottom: 0.8rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.info-icon-svg svg {
  width: 20px;
  height: 20px;
  fill: var(--pink);
}

.info-card:hover .info-icon-svg {
  background: rgba(169, 57, 111, 0.2);
  border-color: var(--pink);
  box-shadow: 0 0 20px var(--pink-glow);
}

/* Availability dot */
.availability-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #27c93f;
  box-shadow: 0 0 8px rgba(39, 201, 63, 0.6);
  margin-right: 0.5rem;
  animation: blink-dot 2s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes blink-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(39, 201, 63, 0.6); }
  50% { opacity: 0.6; box-shadow: 0 0 4px rgba(39, 201, 63, 0.3); }
}

/* =====================
   ABOUT — STORYTELLING
===================== */

.story-intro-section {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
  padding: 6rem 0;
}

.story-intro-section .container {
  max-width: 900px;
}

.story-block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.story-paragraph {
  background: rgba(169,57,111,0.04);
  border-left: 3px solid var(--pink);
  border-radius: 0 14px 14px 0;
  padding: 1.5rem 2rem;
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.8);
  font-weight: 300;
  transition: all 0.3s ease;
}

.story-paragraph:hover {
  background: rgba(169,57,111,0.08);
  transform: translateX(5px);
}

.story-paragraph strong {
  color: var(--pink);
  font-weight: 600;
}

/* =====================
   TIMELINE INTERACTIVE — ALTERNÉE
===================== */

.timeline-interactive {
  position: relative;
  padding: 2rem 0;
  max-width: 1100px;
  margin: 0 auto;
}

.timeline-interactive::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--pink), rgba(169,57,111,0.15));
}

.tl-item {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  align-items: start;
  margin-bottom: 3.5rem;
  position: relative;
}

/* Côté gauche — impairs */
.tl-item:nth-child(odd) .tl-content-left {
  grid-column: 1;
  padding-right: 2rem;
  text-align: right;
}

.tl-item:nth-child(odd) .tl-dot-col {
  grid-column: 2;
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

.tl-item:nth-child(odd) .tl-content-right {
  grid-column: 3;
  visibility: hidden;
}

/* Côté droit — pairs */
.tl-item:nth-child(even) .tl-content-left {
  grid-column: 1;
  visibility: hidden;
}

.tl-item:nth-child(even) .tl-dot-col {
  grid-column: 2;
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

.tl-item:nth-child(even) .tl-content-right {
  grid-column: 3;
  padding-left: 2rem;
  text-align: left;
}

.tl-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pink);
  border: 3px solid #000;
  box-shadow: 0 0 20px var(--pink-glow), 0 0 40px rgba(169,57,111,0.3);
  z-index: 2;
  transition: all 0.3s ease;
  flex-shrink: 0;
  cursor: pointer;
}



.tl-item:hover .tl-dot {
  transform: scale(1.5);
  box-shadow: 0 0 30px var(--pink-glow);
}

.tl-content {
  background: rgba(10,10,10,0.95);
  border: 2px solid rgba(169,57,111,0.3);
  border-radius: 18px;
  padding: 1.8rem;
  transition: all 0.4s ease;
}

.tl-content:hover {
  border-color: var(--pink);
  box-shadow: 0 8px 30px var(--pink-glow);
  transform: translateY(-4px);
}

/* Alignement texte selon côté */
.tl-item:nth-child(odd) .tl-content-left .tl-tags {
  justify-content: flex-end;
}

.tl-item:nth-child(even) .tl-content-right .tl-tags {
  justify-content: flex-start;
}

.tl-date {
  display: inline-block;
  padding: 0.3rem 1rem;
  background: rgba(169,57,111,0.15);
  color: var(--pink);
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.tl-type {
  display: inline-block;
  padding: 0.25rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 12px;
  margin-left: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tl-type.formation { background: rgba(100,200,255,0.15); color: #64c8ff; }
.tl-type.stage { background: rgba(100,255,150,0.15); color: #64ff96; }
.tl-type.certif { background: rgba(255,200,100,0.15); color: #ffc864; }
.tl-type.engagement { background: rgba(169,57,111,0.2); color: var(--pink); }

.tl-content h3 {
  font-size: 1.15rem;
  margin: 0.5rem 0 0.3rem;
  color: #fff;
  font-weight: 500;
}

.tl-school {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  margin-bottom: 0.6rem;
}

.tl-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  font-weight: 300;
}

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

.tl-tag {
  padding: 0.22rem 0.7rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 900px) {
  .timeline-interactive::before {
    left: 24px;
  }

  .tl-item {
    grid-template-columns: 48px 1fr;
    margin-bottom: 2rem;
  }

  .tl-item:nth-child(odd) .tl-content-left,
  .tl-item:nth-child(even) .tl-content-left {
    display: none;
  }

  .tl-item:nth-child(odd) .tl-content-right,
  .tl-item:nth-child(even) .tl-content-right {
    visibility: visible;
    grid-column: 2;
    padding-left: 1rem;
    text-align: left;
  }

  .tl-item:nth-child(odd) .tl-dot-col,
  .tl-item:nth-child(even) .tl-dot-col {
    grid-column: 1;
    justify-content: center;
    padding-top: 0.8rem;
  }

  .tl-item:nth-child(odd) .tl-content-right .tl-tags,
  .tl-item:nth-child(even) .tl-content-right .tl-tags {
    justify-content: flex-start;
  }
}

/* =====================
   CERTIFICATIONS — SECTION ABOUT
===================== */

.certifications-about-section {
  background: #0a0a0a;
  padding: 6rem 0;
}

.certif-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.certif-about-card {
  background: rgba(10,10,10,0.95);
  border: 2px solid rgba(169,57,111,0.3);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(30px);
}

.certif-about-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.certif-about-card:hover {
  border-color: var(--pink);
  box-shadow: 0 12px 40px rgba(169,57,111,0.2);
  transform: translateY(-6px);
}

.certif-badge-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
  background: rgba(169,57,111,0.05);
  padding: 1.5rem;
  border-bottom: 2px solid rgba(169,57,111,0.2);
  transition: transform 0.4s ease;
}

.certif-about-card:hover .certif-badge-img {
  transform: scale(1.04);
}

.certif-about-body {
  padding: 1.5rem;
}

.certif-about-body h3 {
  font-size: 1.05rem;
  color: var(--pink);
  margin-bottom: 0.6rem;
  font-weight: 500;
  line-height: 1.4;
}

.certif-about-body p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-bottom: 1rem;
  font-weight: 300;
}

.certif-about-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.certif-issuer {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  font-style: italic;
}

.certif-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: rgba(169,57,111,0.1);
  border: 1px solid rgba(169,57,111,0.3);
  border-radius: 20px;
  color: var(--pink);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.certif-view-btn:hover {
  background: rgba(169,57,111,0.2);
  border-color: var(--pink);
  transform: translateY(-2px);
}

.certif-view-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}



/* =====================
   RECOMMANDATIONS
===================== */

.recommandations-section {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
  padding: 6rem 0;
  overflow: hidden;
}

.reco-carousel {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow: hidden;
}

.reco-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reco-card {
  min-width: 100%;
  background: rgba(10,10,10,0.95);
  border: 2px solid rgba(169,57,111,0.3);
  border-radius: 24px;
  padding: 3rem;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.reco-card::before {
  content: '\201C';
  position: absolute;
  top: -1rem;
  left: 2rem;
  font-size: 8rem;
  color: rgba(169,57,111,0.15);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

.reco-quote {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.82);
  font-weight: 300;
  font-style: italic;
  margin-bottom: 2rem;
  padding-top: 1.5rem;
}

.reco-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.reco-author-info strong {
  display: block;
  font-size: 1rem;
  color: var(--pink);
  font-weight: 600;
}

.reco-author-info span {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
}

.reco-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: rgba(169,57,111,0.1);
  border: 1px solid rgba(169,57,111,0.3);
  border-radius: 30px;
  color: var(--pink);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.reco-pdf-btn:hover {
  background: rgba(169,57,111,0.2);
  border-color: var(--pink);
  transform: translateY(-2px);
}

.reco-pdf-btn svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.reco-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.reco-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(169,57,111,0.1);
  border: 2px solid rgba(169,57,111,0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.1rem;
}

.reco-btn:hover {
  background: rgba(169,57,111,0.2);
  border-color: var(--pink);
  color: var(--pink);
  transform: scale(1.1);
}

.reco-dots {
  display: flex;
  gap: 0.5rem;
}

.reco-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(169,57,111,0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.reco-dot.active {
  background: var(--pink);
  transform: scale(1.3);
  box-shadow: 0 0 8px var(--pink-glow);
}

/* =====================
   ENGAGEMENTS
===================== */

.engagements-section {
  background: #0a0a0a;
  padding: 6rem 0;
}

.engagements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.engagement-card {
  background: rgba(10,10,10,0.95);
  border: 2px solid rgba(169,57,111,0.3);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.engagement-card:hover {
  border-color: var(--pink);
  box-shadow: 0 12px 40px var(--pink-glow);
  transform: translateY(-6px);
}

.engagement-icon {
  width: 48px;
  height: 48px;
  background: rgba(169,57,111,0.1);
  border: 2px solid rgba(169,57,111,0.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.engagement-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--pink);
  fill: none;
  stroke-width: 1.5;
}

.engagement-card:hover .engagement-icon {
  background: rgba(169,57,111,0.2);
  border-color: var(--pink);
  box-shadow: 0 0 20px var(--pink-glow);
}

.engagement-card h3 {
  font-size: 1.1rem;
  color: #fff;
  font-weight: 500;
}

.engagement-card p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  font-weight: 300;
}

.engagement-date {
  display: inline-block;
  padding: 0.28rem 0.85rem;
  background: rgba(169,57,111,0.1);
  color: var(--pink);
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  width: fit-content;
}

/* Badge bénévolat visuel */
.engagement-badge-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(169,57,111,0.2);
  padding: 4px;
  background: rgba(169,57,111,0.05);
}

/* =====================
   PORTFOLIO — FILTRES ÉTIQUETTES DYNAMIQUES
===================== */

.portfolio-filters-bar {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1.5rem 2rem;
}

.tag-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.3rem;
  background: rgba(169, 57, 111, 0.08);
  border: 2px solid rgba(169, 57, 111, 0.25);
  border-radius: 50px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Space Grotesk', sans-serif;
}

.tag-filter-btn .tag-hash {
  color: var(--pink);
  font-weight: 700;
}

.tag-filter-btn:hover,
.tag-filter-btn.active {
  background: rgba(169, 57, 111, 0.18);
  border-color: var(--pink);
  color: #fff;
  box-shadow: 0 4px 20px var(--pink-glow);
  transform: translateY(-2px);
}

.tag-filter-btn.active .tag-hash {
  text-shadow: 0 0 10px var(--pink-glow);
}



/* Compteur résultats */
.results-counter {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1rem;
  font-style: italic;
}



/* Card masquée par filtre */
.project-card.hidden-by-filter {
  display: none;
}

/* Stage tag */
.project-tag.stage { background: rgba(255,150,50,0.2); color: #ff9632; }
.project-tag.reseaux { background: rgba(169,57,111,0.2); color: var(--pink); }
.project-tag.iot { background: rgba(100,200,255,0.2); color: #64c8ff; }
.project-tag.dev-mobile { background: rgba(100,255,150,0.2); color: #64ff96; }
.project-tag.systeme { background: rgba(255,200,100,0.2); color: #ffc864; }
.project-tag.dev { background: rgba(180,100,255,0.2); color: #b464ff; }

/* =====================
   PORTFOLIO — CARROUSEL EXPÉRIENCES / STAGES
===================== */

.stages-section {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
  padding: 6rem 0;
}

.stages-carousel-wrapper {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.stages-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.stage-slide {
  min-width: 100%;
  padding: 0 2rem;
}

.stage-card {
  background: rgba(10,10,10,0.97);
  border: 2px solid rgba(169,57,111,0.3);
  border-radius: 24px;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.stage-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pink), rgba(169,57,111,0.1));
}

.stage-card:hover {
  border-color: var(--pink);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(169,57,111,0.1);
}

/* Header stage */
.stage-card-header {
  padding: 2.5rem 2.5rem 1.5rem;
  background: linear-gradient(135deg, rgba(169,57,111,0.06) 0%, transparent 100%);
  border-bottom: 1px solid rgba(169,57,111,0.15);
}

.stage-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.stage-title-block h3 {
  font-size: 1.4rem;
  color: #fff;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.stage-badges-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.stage-badge.entreprise {
  background: rgba(169,57,111,0.15);
  color: var(--pink);
  border: 1px solid rgba(169,57,111,0.3);
}

.stage-badge.periode {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.08);
}

.stage-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.stage-stack span {
  padding: 0.28rem 0.8rem;
  background: rgba(169,57,111,0.06);
  border: 1px solid rgba(169,57,111,0.2);
  border-radius: 12px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.65);
  transition: all 0.3s ease;
}

.stage-card:hover .stage-stack span {
  border-color: rgba(169,57,111,0.4);
  color: rgba(255,255,255,0.9);
}

/* Body stage */
.stage-card-body {
  padding: 2rem 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.stage-section {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.stage-section-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pink);
}

.stage-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(169,57,111,0.2);
}

.stage-problem {
  background: rgba(255,77,77,0.05);
  border-left: 3px solid rgba(255,100,100,0.4);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.3rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.75);
  font-weight: 300;
  font-style: italic;
}

.stage-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stage-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(169,57,111,0.12);
  border: 2px solid rgba(169,57,111,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pink);
}

.step-content h4 {
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.step-content p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  font-weight: 300;
}

.stage-results-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stage-result-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.9rem;
  background: rgba(39,201,63,0.07);
  border: 1px solid rgba(39,201,63,0.22);
  border-radius: 20px;
  font-size: 0.8rem;
  color: #64ff96;
}

.stage-result-chip::before {
  content: '✓';
  font-weight: 700;
  font-size: 0.75rem;
}

/* Mockup container */
.mockup-container {
  background: rgba(255,255,255,0.02);
  border: 2px dashed rgba(169,57,111,0.2);
  border-radius: 14px;
  padding: 2rem;
  text-align: center;
  color: rgba(255,255,255,0.25);
  font-size: 0.88rem;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.mockup-container svg {
  width: 32px;
  height: 32px;
  stroke: rgba(169,57,111,0.3);
  fill: none;
  stroke-width: 1.5;
}

.mockup-container img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* Navigation stages carrousel */
.stages-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.stages-counter {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

.stages-counter span {
  color: var(--pink);
  font-weight: 700;
}



.stage-nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(169,57,111,0.1);
  border: 2px solid rgba(169,57,111,0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.stage-nav-btn:hover {
  background: rgba(169,57,111,0.2);
  border-color: var(--pink);
  color: var(--pink);
  transform: scale(1.1);
  box-shadow: 0 8px 20px var(--pink-glow);
}

.stages-dots {
  display: flex;
  gap: 0.5rem;
}

.stages-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(169,57,111,0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.stages-dot.active {
  background: var(--pink);
  transform: scale(1.4);
  box-shadow: 0 0 10px var(--pink-glow);
}



/* =====================
   PASSIONS PAGE
===================== */

.passions-page {
  background: var(--bg-dark);
  min-height: 100vh;
}

.passions-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  overflow: hidden;
}

.passions-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.passions-magazine {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
  padding: 6rem 0;
}

.magazine-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.magazine-card-large { grid-column: span 8; }
.magazine-card-small { grid-column: span 4; }
.magazine-card-medium { grid-column: span 6; }

.magazine-card-large,
.magazine-card-small,
.magazine-card-medium {
  background: rgba(10,10,10,0.95);
  border: 2px solid rgba(169,57,111,0.3);
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.magazine-card-large:hover,
.magazine-card-small:hover,
.magazine-card-medium:hover {
  border-color: var(--pink);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(169,57,111,0.1);
  transform: translateY(-6px);
}

.mag-image {
  width: 100%;
  aspect-ratio: 16/9;
  background: rgba(169,57,111,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mag-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.magazine-card-large:hover .mag-image img,
.magazine-card-small:hover .mag-image img,
.magazine-card-medium:hover .mag-image img {
  transform: scale(1.05);
}

.mag-image-placeholder {
  opacity: 0.35;
}

.mag-body { padding: 1.8rem; }

.mag-category {
  display: inline-block;
  padding: 0.25rem 0.8rem;
  background: rgba(169,57,111,0.12);
  color: var(--pink);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
}

.mag-body h3 {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 0.8rem;
  font-weight: 500;
}

.mag-body p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  font-weight: 300;
  font-style: italic;
}

/* Photo gallery */
.photo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 0 2rem;
}

.photo-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  background: rgba(169,57,111,0.06);
  border: 2px solid rgba(169,57,111,0.18);
  transition: all 0.4s ease;
}

.photo-item:hover {
  border-color: var(--pink);
  box-shadow: 0 10px 30px var(--pink-glow);
  transform: scale(1.02);
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.photo-item:hover img {
  transform: scale(1.08);
}

.photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.photo-item:hover .photo-overlay {
  opacity: 1;
}

.photo-caption {
  font-style: italic;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.9);
}

.photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.96);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 0 80px rgba(169,57,111,0.2);
}

.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(169,57,111,0.2);
  border: 2px solid rgba(169,57,111,0.4);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.lightbox-close:hover {
  background: rgba(169,57,111,0.4);
  border-color: var(--pink);
}

/* Ansible fiches */
.ansible-cards-section {
  background: #0a0a0a;
  padding: 6rem 0;
}

.ansible-fiches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.ansible-fiche {
  background: #1a1a2a;
  border: 1px solid rgba(169,57,111,0.22);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.ansible-fiche:hover {
  border-color: var(--pink);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(169,57,111,0.08);
  transform: translateY(-4px);
}

.fiche-header {
  background: rgba(169,57,111,0.08);
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid rgba(169,57,111,0.15);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.fiche-header svg {
  width: 16px;
  height: 16px;
  fill: var(--pink);
  flex-shrink: 0;
}

.fiche-header h4 {
  font-size: 0.9rem;
  color: var(--pink);
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

.fiche-body { padding: 1.2rem 1.4rem; }

.fiche-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

.fiche-code {
  background: #0d0d1a;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: #64ff96;
  white-space: pre;
  overflow-x: auto;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .magazine-card-large,
  .magazine-card-small,
  .magazine-card-medium {
    grid-column: span 12;
  }

  .photo-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .photo-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================
   PROJECT CARDS FULL — STORYTELLING
===================== */

.project-card-full {
  min-width: 700px;
  max-width: 700px;
  background: rgba(10,10,10,0.97);
  border: 2px solid rgba(169,57,111,0.3);
  border-radius: 24px;
  overflow: hidden;
  scroll-snap-align: center;
  flex-shrink: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.project-card-full:hover {
  border-color: var(--pink);
  box-shadow: 0 0 50px rgba(169,57,111,0.15);
}

body.light-mode .project-card-full {
  background: var(--lm-bg-card);
  border-color: var(--lm-border);
  box-shadow: var(--lm-shadow-sm);
}

body.light-mode .project-card-full:hover {
  border-color: var(--pink);
  box-shadow: var(--lm-shadow-md);
}

/* Visual top */
.pcf-visual {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #111;
}

.pcf-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.project-card-full:hover .pcf-visual img {
  transform: scale(1.05);
  opacity: 0.85;
}

.pcf-visual-gradient { background: #0a0a14; }
.pcf-visual-dark { background: #06060e; }
.worldskills-grad { background: linear-gradient(135deg, #0a0a14, #1a0a1a); }
.minecraft-grad { background: linear-gradient(135deg, #061a08, #0a0a14); }
.datacenter-grad { background: linear-gradient(135deg, #060e1a, #14060e); }
.crise-grad { background: linear-gradient(135deg, #140606, #0a060a); }
.smartgrid-grad { background: linear-gradient(135deg, #060e06, #0a0a0e); }
.oauth-grad { background: linear-gradient(135deg, #060a14, #10060e); }

.pcf-visual-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.crise-placeholder { background: linear-gradient(135deg, rgba(255,77,77,0.05), rgba(0,0,0,0)); }

.pcf-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.2rem;
}

.pcf-stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pcf-badge {
  padding: 0.22rem 0.7rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.pcf-badge.java { background: rgba(255,150,50,0.2); color: #ff9632; border: 1px solid rgba(255,150,50,0.3); }
.pcf-badge.udp { background: rgba(100,200,255,0.2); color: #64c8ff; border: 1px solid rgba(100,200,255,0.3); }
.pcf-badge.mvc { background: rgba(180,100,255,0.2); color: #b464ff; border: 1px solid rgba(180,100,255,0.3); }
.pcf-badge.scrum { background: rgba(255,200,100,0.2); color: #ffc864; border: 1px solid rgba(255,200,100,0.3); }
.pcf-badge.reseau { background: rgba(169,57,111,0.2); color: var(--pink); border: 1px solid rgba(169,57,111,0.3); }
.pcf-badge.systeme { background: rgba(255,200,100,0.2); color: #ffc864; border: 1px solid rgba(255,200,100,0.3); }
.pcf-badge.cyber { background: rgba(255,100,100,0.2); color: #ff6464; border: 1px solid rgba(255,100,100,0.3); }
.pcf-badge.iot { background: rgba(100,200,255,0.2); color: #64c8ff; border: 1px solid rgba(100,200,255,0.3); }
.pcf-badge.dev { background: rgba(100,255,150,0.2); color: #64ff96; border: 1px solid rgba(100,255,150,0.3); }

/* Content area */
.pcf-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  flex: 1;
  overflow-y: auto;
  max-height: calc(550px - 220px);
}

.pcf-content::-webkit-scrollbar { width: 4px; }
.pcf-content::-webkit-scrollbar-track { background: transparent; }
.pcf-content::-webkit-scrollbar-thumb { background: rgba(169,57,111,0.3); border-radius: 10px; }

/* Header */
.pcf-context-tag {
  display: inline-block;
  padding: 0.25rem 0.85rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.5rem;
}

.pcf-context-tag.dev { background: rgba(100,255,150,0.12); color: #64ff96; }
.pcf-context-tag.reseaux { background: rgba(169,57,111,0.15); color: var(--pink); }
.pcf-context-tag.iot { background: rgba(100,200,255,0.12); color: #64c8ff; }
.pcf-context-tag.systeme { background: rgba(255,200,100,0.12); color: #ffc864; }
.pcf-context-tag.cyber { background: rgba(255,100,100,0.12); color: #ff6464; }

.pcf-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  margin: 0.3rem 0 0.6rem;
  line-height: 1.4;
}

body.light-mode .pcf-title { color: var(--lm-text); }

.pcf-accroche {
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  font-style: italic;
}

body.light-mode .pcf-accroche { color: var(--lm-text-2); }

/* Fiche d'identité */
.pcf-identity {
  background: rgba(169,57,111,0.05);
  border: 1px solid rgba(169,57,111,0.15);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body.light-mode .pcf-identity {
  background: rgba(169,57,111,0.04);
  border-color: var(--lm-border);
}

.pcf-identity-item {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.86rem;
}

.pcf-identity-label {
  min-width: 70px;
  color: var(--pink);
  font-weight: 600;
  flex-shrink: 0;
}

.pcf-identity-value {
  color: rgba(255,255,255,0.75);
}

body.light-mode .pcf-identity-value { color: var(--lm-text-2); }

/* Section */
.pcf-section-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pink);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pcf-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(169,57,111,0.2);
}

body.light-mode .pcf-section-label::after {
  background: var(--lm-border);
}

.pcf-section-text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
}

body.light-mode .pcf-section-text { color: var(--lm-text-2); }

/* Steps */
.pcf-steps {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.pcf-step {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.pcf-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(169,57,111,0.12);
  border: 2px solid rgba(169,57,111,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pink);
}

.pcf-step > div:last-child strong {
  display: block;
  font-size: 0.9rem;
  color: #fff;
  margin-bottom: 0.2rem;
}

body.light-mode .pcf-step > div:last-child strong { color: var(--lm-text); }

.pcf-step > div:last-child p,
.pcf-step > div:last-child code {
  font-size: 0.83rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.6);
}

body.light-mode .pcf-step > div:last-child p { color: var(--lm-text-2); }

code {
  font-family: 'Courier New', monospace;
  background: rgba(169,57,111,0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.82em;
  color: var(--pink);
}

body.light-mode code {
  background: rgba(169,57,111,0.08);
}

/* Diagramme MVC */
.pcf-diagram {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(169,57,111,0.15);
  border-radius: 12px;
  padding: 1.2rem;
}

body.light-mode .pcf-diagram {
  background: var(--lm-bg-card-2);
  border-color: var(--lm-border);
}

.pcf-diagram-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pink);
  margin-bottom: 1rem;
}

.pcf-mvc-diagram {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}

.mvc-layer {
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mvc-layer.vue { background: rgba(180,100,255,0.1); border: 1px solid rgba(180,100,255,0.25); }
.mvc-layer.ctrl { background: rgba(255,200,100,0.1); border: 1px solid rgba(255,200,100,0.25); }
.mvc-layer.socket { background: rgba(100,200,255,0.1); border: 1px solid rgba(100,200,255,0.25); }
.mvc-layer.modele { background: rgba(100,255,150,0.1); border: 1px solid rgba(100,255,150,0.25); }

.mvc-layer-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mvc-layer.vue .mvc-layer-title { color: #b464ff; }
.mvc-layer.ctrl .mvc-layer-title { color: #ffc864; }
.mvc-layer.socket .mvc-layer-title { color: #64c8ff; }
.mvc-layer.modele .mvc-layer-title { color: #64ff96; }

.mvc-layer span:last-child {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  font-family: 'Courier New', monospace;
}

body.light-mode .mvc-layer span:last-child { color: rgba(26,21,40,0.55); }

.mvc-arrow {
  font-size: 1rem;
  color: rgba(169,57,111,0.5);
}

/* Bugs résolus */
.pcf-bugs {
  background: rgba(255,77,77,0.04);
  border: 1px solid rgba(255,77,77,0.15);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

body.light-mode .pcf-bugs {
  background: rgba(255,77,77,0.03);
  border-color: rgba(255,77,77,0.1);
}

.pcf-bugs-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ff6464;
  margin-bottom: 0.3rem;
}

.pcf-bug-item {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.85rem;
}

.pcf-bug-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,77,77,0.15);
  border: 1px solid rgba(255,77,77,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ff6464;
}

.pcf-bug-item div {
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

body.light-mode .pcf-bug-item div { color: var(--lm-text-2); }

/* Résultats */
.pcf-results {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pcf-result-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.85rem;
  background: rgba(39,201,63,0.08);
  border: 1px solid rgba(39,201,63,0.2);
  border-radius: 20px;
  font-size: 0.78rem;
  color: #64ff96;
}

.pcf-result-chip::before { content: '✓'; font-weight: 700; }

/* Learnings */
.pcf-learnings {
  background: rgba(169,57,111,0.05);
  border-left: 3px solid var(--pink);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.3rem;
}

body.light-mode .pcf-learnings {
  background: rgba(169,57,111,0.04);
}

.pcf-learnings-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pink);
  margin-bottom: 0.5rem;
}

.pcf-learnings p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
}

body.light-mode .pcf-learnings p { color: var(--lm-text-2); }

/* Code block */
.pcf-code-block {
  background: #0d0d1a;
  border: 1px solid rgba(169,57,111,0.2);
  border-radius: 12px;
  overflow: hidden;
}

body.light-mode .pcf-code-block {
  background: #1e1a2e;
}

.pcf-code-label {
  background: rgba(169,57,111,0.1);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pink);
  font-family: 'Courier New', monospace;
}

.pcf-code {
  margin: 0;
  padding: 0.8rem 1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: #64ff96;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
}

/* Jalons */
.pcf-jalons { display: flex; flex-direction: column; gap: 0.5rem; }
.pcf-jalons-legend { display: flex; justify-content: space-between; font-size: 0.8rem; }

/* Tableau perf */
.pcf-perf-table {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(169,57,111,0.15);
  border-radius: 12px;
  overflow: hidden;
}

body.light-mode .pcf-perf-table {
  background: var(--lm-bg-card-2);
  border-color: var(--lm-border);
}

.pcf-perf-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  padding: 0.65rem 1.1rem;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  gap: 0.5rem;
}

.pcf-perf-row:last-child { border-bottom: none; }

.pcf-perf-row.header {
  background: rgba(169,57,111,0.08);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pcf-perf-row.header span:first-child { color: rgba(255,255,255,0.5); }

body.light-mode .pcf-perf-row { border-bottom-color: var(--lm-border); }
body.light-mode .pcf-perf-row.header { background: rgba(169,57,111,0.05); }
body.light-mode .pcf-perf-row.header span:first-child { color: var(--lm-text-muted); }
body.light-mode .pcf-perf-row span:first-child { color: var(--lm-text-2); }

/* Actions */
.pcf-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.pcf-btn {
  font-size: 0.85rem;
  padding: 0.6rem 1.3rem;
}

/* Timeline crise horizontale */
.crisis-timeline-h {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: 0.5rem 0 1rem;
  scrollbar-width: none;
}

.crisis-timeline-h::-webkit-scrollbar { display: none; }

.crisis-h-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 90px;
  text-align: center;
}

.crisis-h-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pink);
  font-family: 'Courier New', monospace;
}

.crisis-h-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.crisis-h-dot.danger { background: #ff4d4d; box-shadow: 0 0 10px rgba(255,77,77,0.5); }
.crisis-h-dot.cyber { background: #ffc864; box-shadow: 0 0 10px rgba(255,200,100,0.5); }
.crisis-h-dot.sante { background: #64c8ff; box-shadow: 0 0 10px rgba(100,200,255,0.5); }
.crisis-h-dot.ok { background: #27c93f; box-shadow: 0 0 10px rgba(39,201,63,0.5); }

.crisis-h-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
  max-width: 85px;
}

body.light-mode .crisis-h-label { color: var(--lm-text-2); }

.crisis-h-line {
  flex: 1;
  height: 2px;
  background: rgba(169,57,111,0.25);
  margin-top: 1.8rem;
  min-width: 20px;
}

/* Responsive projets */
@media (max-width: 768px) {
  .project-card-full {
    min-width: 320px;
    max-width: 320px;
  }

  .pcf-visual { height: 160px; }

  .pcf-content {
    padding: 1.4rem;
    max-height: none;
  }

  .pcf-perf-row {
    grid-template-columns: 1fr 1fr;
  }

  .pcf-perf-row span:first-child { grid-column: span 2; font-weight: 700; }
}

/* =====================
   PASSIONS PAGE — DÉFILEMENTS GALERIE
===================== */

.gallery-scroll-section {
  background: #0a0a0a;
  padding: 4rem 0;
  overflow: hidden;
}

body.light-mode .gallery-scroll-section { background: var(--lm-bg-2); }

.gallery-scroll-label {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pink);
  margin-bottom: 1.5rem;
}

/* Bande défilante */
.scroll-band {
  display: flex;
  gap: 1rem;
  will-change: transform;
}

.scroll-band.left { animation: scrollLeft 30s linear infinite; }
.scroll-band.right { animation: scrollRight 30s linear infinite; }

.scroll-band:hover { animation-play-state: paused; }

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Item dans la bande */
.scroll-item {
  flex-shrink: 0;
  width: 260px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(169,57,111,0.2);
  background: #1a1a2a;
  transition: border-color 0.3s ease;
  cursor: pointer;
  position: relative;
}

body.light-mode .scroll-item {
  background: var(--lm-bg-card);
  border-color: var(--lm-border);
}

.scroll-item:hover {
  border-color: var(--pink);
}

.scroll-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.scroll-item-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: rgba(169,57,111,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-item-placeholder svg {
  width: 40px;
  height: 40px;
  stroke: rgba(169,57,111,0.3);
  fill: none;
  stroke-width: 1.5;
}

.scroll-item-caption {
  padding: 0.7rem 0.9rem;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

body.light-mode .scroll-item-caption { color: var(--lm-text-muted); }

/* Portrait bande carrée */
.scroll-item.portrait {
  width: 200px;
}

.scroll-item.portrait img,
.scroll-item.portrait .scroll-item-placeholder {
  aspect-ratio: 3/4;
}

/* Empilements de cartes (Cuisine + Photos) */
.passion-card-deck-section {
  background: #0a0a0a;
  padding: 6rem 0;
}

body.light-mode .passion-card-deck-section { background: var(--lm-bg-base); }

.deck-label {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pink);
  margin-bottom: 0.5rem;
}

.deck-hint {
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 3rem;
}

body.light-mode .deck-hint { color: var(--lm-text-muted); }

.passion-decks-row {
  display: flex;
  gap: 6rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Deck carte cuisine / photo */
.passion-deck-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.passion-deck-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
  text-align: center;
}

body.light-mode .passion-deck-title { color: var(--lm-text); }

.passion-deck-container {
  position: relative;
  width: 320px;
  height: 380px;
  perspective: 1200px;
  cursor: pointer;
}

.passion-deck-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 340px;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(169,57,111,0.3);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.light-mode .passion-deck-card {
  border-color: var(--lm-border);
  box-shadow: var(--lm-shadow-md);
}

.passion-deck-card img {
  width: 100%;
  height: 75%;
  object-fit: cover;
  display: block;
}

.passion-deck-card .card-placeholder {
  width: 100%;
  height: 75%;
  background: rgba(169,57,111,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.light-mode .passion-deck-card .card-placeholder {
  background: var(--lm-bg-card-2);
}

.passion-deck-card .card-placeholder svg {
  width: 48px;
  height: 48px;
  stroke: rgba(169,57,111,0.3);
  fill: none;
  stroke-width: 1.5;
}

.card-info {
  padding: 0.8rem 1rem;
  background: rgba(10,10,10,0.95);
  height: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.light-mode .card-info {
  background: var(--lm-bg-card);
}

.card-info h4 {
  font-size: 0.9rem;
  color: #fff;
  margin-bottom: 0.2rem;
  font-weight: 500;
}

body.light-mode .card-info h4 { color: var(--lm-text); }

.card-info p {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}

body.light-mode .card-info p { color: var(--lm-text-muted); }

/* Positions pile */
.passion-deck-card:nth-child(1) {
  transform: translate(-50%, -50%) rotate(-8deg) translateY(12px);
  z-index: 1;
}
.passion-deck-card:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-4deg) translateY(8px);
  z-index: 2;
}
.passion-deck-card:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-1deg) translateY(4px);
  z-index: 3;
}
.passion-deck-card:nth-child(4) {
  transform: translate(-50%, -50%) rotate(2deg) translateY(0);
  z-index: 4;
}
.passion-deck-card:nth-child(5) {
  transform: translate(-50%, -50%) rotate(5deg) translateY(4px);
  z-index: 5;
}

.passion-deck-card.active {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-20px) scale(1.04) !important;
  z-index: 100 !important;
  border-color: var(--pink);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px var(--pink-glow);
}

/* ================================================================
   ADDITIONS CSS — À COLLER EN FIN DE style.css
   Composants : exp-card, masonry, lightbox nav, decks 3D, mag-cta
================================================================ */

/* ── Overlay sur les project-cards (clic → page dédiée) ── */
.project-card { position: relative; overflow: hidden; }

.project-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s ease;
  z-index: 2;
}

.project-card:hover .project-card-overlay {
  background: rgba(0,0,0,0.42);
}

.overlay-cta {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.6rem;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 50px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.project-card:hover .overlay-cta {
  opacity: 1;
  transform: translateY(0);
}

/* ── Grille pcf-visual classées sans image ── */
.project-image.pcf-visual-gradient,
.project-image.crise-grad,
.project-image.smartgrid-grad,
.project-image.oauth-grad {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
}

/* ── Magazine CTA ── */
.mag-cta {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pink);
  letter-spacing: 0.04em;
  transition: letter-spacing 0.3s ease;
}

.mag-clickable { text-decoration: none; cursor: pointer; }
.mag-clickable:hover .mag-cta { letter-spacing: 0.08em; }
.mag-clickable:hover { border-color: var(--pink); }

/* ── EXP CARDS (Brèves de parcours) ── */
.exp-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.exp-card {
  background: rgba(10,10,10,0.97);
  border: 2px solid rgba(169,57,111,0.28);
  border-radius: 24px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.exp-card-link:hover .exp-card {
  border-color: var(--pink);
  box-shadow: 0 16px 50px rgba(169,57,111,0.18);
  transform: translateY(-4px);
}

/* Image aperçu en haut */
.exp-card-image {
  position: relative;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
}

.exp-card-image-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 1;
}

.exp-card-image-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  text-align: center;
}

.exp-card-date-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.3rem 0.85rem;
  background: rgba(169,57,111,0.18);
  border: 1px solid rgba(169,57,111,0.3);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pink);
  letter-spacing: 0.03em;
}

/* Corps */
.exp-card-body {
  padding: 1.8rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.exp-card-header-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.exp-card-type {
  display: inline-block;
  padding: 0.25rem 0.8rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.exp-card-type.engagement { background: rgba(169,57,111,0.15); color: var(--pink); }
.exp-card-type.systeme    { background: rgba(100,200,255,0.12); color: #64c8ff; }
.exp-card-type.formation  { background: rgba(255,200,100,0.12); color: #ffc864; }

.exp-card-title {
  font-size: 1.15rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}

.exp-card-summary {
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.65);
  font-weight: 300;
}

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

.exp-card-tags span {
  padding: 0.22rem 0.7rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.55);
}

.exp-card-cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pink);
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
  transition: letter-spacing 0.3s ease;
}

.exp-card-link:hover .exp-card-cta { letter-spacing: 0.09em; }

/* Light mode */
body.light-mode .exp-card {
  background: var(--lm-bg-card);
  border-color: var(--lm-border);
  box-shadow: var(--lm-shadow-sm);
}
body.light-mode .exp-card-title { color: var(--lm-text); }
body.light-mode .exp-card-summary { color: var(--lm-text-2); }
body.light-mode .exp-card-tags span { color: var(--lm-text-muted); background: rgba(139,31,85,0.05); border-color: var(--lm-border); }
body.light-mode .exp-card-type.engagement { background: rgba(139,31,85,0.1); color: var(--lm-pink-dark); }
body.light-mode .exp-card-type.systeme { background: rgba(21,101,192,0.1); color: #1565c0; }


/* ── GALERIE MASONRY ── */
.masonry-gallery {
  columns: 3 280px;
  column-gap: 1rem;
  padding: 0 0 4rem;
}

.masonry-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 1rem;
  break-inside: avoid;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 2px solid rgba(169,57,111,0.15);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-item:hover {
  border-color: var(--pink);
  transform: scale(1.02);
  box-shadow: 0 10px 35px var(--pink-glow);
}

.masonry-item img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.masonry-item:hover img { transform: scale(1.06); }

.masonry-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: rgba(169,57,111,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.masonry-placeholder svg {
  width: 40px; height: 40px;
  stroke: rgba(169,57,111,0.3); fill: none; stroke-width: 1.5;
}

.masonry-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.8rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.masonry-item:hover .masonry-overlay { opacity: 1; }

.masonry-overlay span {
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(255,255,255,0.9);
}

/* Hauteurs variées */
.masonry-tall img { aspect-ratio: 2/3; object-fit: cover; }
.masonry-wide img { aspect-ratio: 16/7; object-fit: cover; }
.masonry-normal img { aspect-ratio: 4/3; object-fit: cover; }

@media (max-width: 768px) {
  .masonry-gallery { columns: 2 150px; }
}
@media (max-width: 480px) {
  .masonry-gallery { columns: 1; }
}


/* ── DECK SECTION (Voyage + Cuisine) ── */
.deck-section {
  background: #0a0a0a;
  padding: 6rem 0;
}

.passion-deck-container {
  position: relative;
  width: 320px;
  height: 400px;
  perspective: 1400px;
  cursor: pointer;
  /* Le double-clic est géré par JS */
}

/* Pile 3D visible : on voit clairement 2-3 cartes derrière */
.passion-deck-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 360px;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(169,57,111,0.3);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  transition: all 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: rgba(14,14,20,0.98);
}

/* Les cartes derrière sont VISIBLES, pas cachées */
.passion-deck-card:not(.active) {
  pointer-events: none;
}

.passion-deck-card.active {
  transform: translate(-50%,-50%) rotate(0deg) !important;
  z-index: 100 !important;
  border-color: var(--pink);
  box-shadow: 0 24px 70px rgba(0,0,0,0.65), 0 0 40px var(--pink-glow);
  opacity: 1 !important;
}

/* Card content */
.passion-deck-card img {
  width: 100%; height: 73%; object-fit: cover; display: block;
}

.passion-deck-card .card-placeholder {
  width: 100%; height: 73%;
  background: rgba(169,57,111,0.07);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.5rem;
}

.passion-deck-card .card-placeholder svg {
  width: 40px; height: 40px;
  stroke: rgba(169,57,111,0.3); fill: none; stroke-width: 1.5;
}

.card-info {
  padding: 0.8rem 1rem;
  background: rgba(10,10,10,0.97);
  height: 27%;
  display: flex; flex-direction: column; justify-content: center;
}

.card-info h4 { font-size: 0.92rem; color: #fff; margin-bottom: 0.2rem; font-weight: 500; }
.card-info p  { font-size: 0.76rem; color: rgba(255,255,255,0.5); font-style: italic; }

.deck-hint {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  margin-top: 1.2rem;
}


/* ── LIGHTBOX avec navigation ── */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.96);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.open { opacity: 1; pointer-events: all; }

.lightbox-img {
  max-width: 88vw; max-height: 82vh;
  object-fit: contain; border-radius: 12px;
  box-shadow: 0 0 80px rgba(169,57,111,0.2);
  transition: opacity 0.2s ease;
}

.lightbox-close {
  position: absolute; top: 2rem; right: 2rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(169,57,111,0.2);
  border: 2px solid rgba(169,57,111,0.4);
  color: #fff; font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}

.lightbox-close:hover { background: rgba(169,57,111,0.4); border-color: var(--pink); }

/* Flèches navigation lightbox */
.lightbox-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(169,57,111,0.15);
  border: 2px solid rgba(169,57,111,0.35);
  color: #fff; font-size: 1.6rem;
  cursor: pointer; display: none; /* affiché par JS si plusieurs items */
  align-items: center; justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.lightbox-nav:hover {
  background: rgba(169,57,111,0.3);
  border-color: var(--pink);
  color: var(--pink);
}

.lightbox-prev { left: 2rem; }
.lightbox-next { right: 2rem; }

@media (max-width: 600px) {
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.2rem; }
}


/* ── Sections deck ── */
.contemplation-section {
  background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
  padding: 6rem 0;
}

body.light-mode .contemplation-section { background: var(--lm-bg-2); }
body.light-mode .deck-section { background: var(--lm-bg-base); }

body.light-mode .masonry-item {
  border-color: var(--lm-border);
}

body.light-mode .masonry-item:hover {
  border-color: var(--lm-pink-dark);
  box-shadow: var(--lm-shadow-md);
}

body.light-mode .masonry-placeholder {
  background: var(--lm-bg-card-2);
}

body.light-mode .passion-deck-card {
  background: var(--lm-bg-card);
  border-color: var(--lm-border);
}

body.light-mode .passion-deck-card.active {
  border-color: var(--lm-pink-dark);
  box-shadow: var(--lm-shadow-md);
}

body.light-mode .card-info {
  background: var(--lm-bg-card);
}

body.light-mode .card-info h4 { color: var(--lm-text); }
body.light-mode .card-info p  { color: var(--lm-text-muted); }

body.light-mode .exp-card-date-badge {
  background: rgba(139,31,85,0.1);
  border-color: rgba(139,31,85,0.25);
  color: var(--lm-pink-dark);
}


/* ================================================================
   ADDITIONS CSS — À COLLER EN FIN DE style.css
   Composants : exp-card, masonry, lightbox nav, decks 3D, mag-cta
================================================================ */

/* ── Overlay sur les project-cards (clic → page dédiée) ── */
.project-card { position: relative; overflow: hidden; }

.project-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s ease;
  z-index: 2;
}

.project-card:hover .project-card-overlay {
  background: rgba(0,0,0,0.42);
}

.overlay-cta {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.6rem;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 50px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.project-card:hover .overlay-cta {
  opacity: 1;
  transform: translateY(0);
}

/* ── Grille pcf-visual classées sans image ── */
.project-image.pcf-visual-gradient,
.project-image.crise-grad,
.project-image.smartgrid-grad,
.project-image.oauth-grad {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
}

/* ── Magazine CTA ── */
.mag-cta {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pink);
  letter-spacing: 0.04em;
  transition: letter-spacing 0.3s ease;
}

.mag-clickable { text-decoration: none; cursor: pointer; }
.mag-clickable:hover .mag-cta { letter-spacing: 0.08em; }
.mag-clickable:hover { border-color: var(--pink); }

/* ── EXP CARDS (Brèves de parcours) ── */
.exp-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.exp-card {
  background: rgba(10,10,10,0.97);
  border: 2px solid rgba(169,57,111,0.28);
  border-radius: 24px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.exp-card-link:hover .exp-card {
  border-color: var(--pink);
  box-shadow: 0 16px 50px rgba(169,57,111,0.18);
  transform: translateY(-4px);
}

/* Image aperçu en haut */
.exp-card-image {
  position: relative;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
}

.exp-card-image-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 1;
}

.exp-card-image-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  text-align: center;
}

.exp-card-date-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.3rem 0.85rem;
  background: rgba(169,57,111,0.18);
  border: 1px solid rgba(169,57,111,0.3);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pink);
  letter-spacing: 0.03em;
}

/* Corps */
.exp-card-body {
  padding: 1.8rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.exp-card-header-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.exp-card-type {
  display: inline-block;
  padding: 0.25rem 0.8rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.exp-card-type.engagement { background: rgba(169,57,111,0.15); color: var(--pink); }
.exp-card-type.systeme    { background: rgba(100,200,255,0.12); color: #64c8ff; }
.exp-card-type.formation  { background: rgba(255,200,100,0.12); color: #ffc864; }

.exp-card-title {
  font-size: 1.15rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}

.exp-card-summary {
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.65);
  font-weight: 300;
}

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

.exp-card-tags span {
  padding: 0.22rem 0.7rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.55);
}

.exp-card-cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pink);
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
  transition: letter-spacing 0.3s ease;
}

.exp-card-link:hover .exp-card-cta { letter-spacing: 0.09em; }

/* Light mode */
body.light-mode .exp-card {
  background: var(--lm-bg-card);
  border-color: var(--lm-border);
  box-shadow: var(--lm-shadow-sm);
}
body.light-mode .exp-card-title { color: var(--lm-text); }
body.light-mode .exp-card-summary { color: var(--lm-text-2); }
body.light-mode .exp-card-tags span { color: var(--lm-text-muted); background: rgba(139,31,85,0.05); border-color: var(--lm-border); }
body.light-mode .exp-card-type.engagement { background: rgba(139,31,85,0.1); color: var(--lm-pink-dark); }
body.light-mode .exp-card-type.systeme { background: rgba(21,101,192,0.1); color: #1565c0; }


/* ── GALERIE MASONRY ── */
.masonry-gallery {
  columns: 3 280px;
  column-gap: 1rem;
  padding: 0 0 4rem;
}

.masonry-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 1rem;
  break-inside: avoid;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 2px solid rgba(169,57,111,0.15);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-item:hover {
  border-color: var(--pink);
  transform: scale(1.02);
  box-shadow: 0 10px 35px var(--pink-glow);
}

.masonry-item img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.masonry-item:hover img { transform: scale(1.06); }

.masonry-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: rgba(169,57,111,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.masonry-placeholder svg {
  width: 40px; height: 40px;
  stroke: rgba(169,57,111,0.3); fill: none; stroke-width: 1.5;
}

.masonry-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.8rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.masonry-item:hover .masonry-overlay { opacity: 1; }

.masonry-overlay span {
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(255,255,255,0.9);
}

/* Hauteurs variées */
.masonry-tall img { aspect-ratio: 2/3; object-fit: cover; }
.masonry-wide img { aspect-ratio: 16/7; object-fit: cover; }
.masonry-normal img { aspect-ratio: 4/3; object-fit: cover; }

@media (max-width: 768px) {
  .masonry-gallery { columns: 2 150px; }
}
@media (max-width: 480px) {
  .masonry-gallery { columns: 1; }
}


/* ── DECK SECTION (Voyage + Cuisine) ── */
.deck-section {
  background: #0a0a0a;
  padding: 6rem 0;
}

.passion-deck-container {
  position: relative;
  width: 320px;
  height: 400px;
  perspective: 1400px;
  cursor: pointer;
  /* Le double-clic est géré par JS */
}

/* Pile 3D visible : on voit clairement 2-3 cartes derrière */
.passion-deck-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 360px;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(169,57,111,0.3);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  transition: all 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: rgba(14,14,20,0.98);
}

/* Les cartes derrière sont VISIBLES, pas cachées */
.passion-deck-card:not(.active) {
  pointer-events: none;
}

.passion-deck-card.active {
  transform: translate(-50%,-50%) rotate(0deg) !important;
  z-index: 100 !important;
  border-color: var(--pink);
  box-shadow: 0 24px 70px rgba(0,0,0,0.65), 0 0 40px var(--pink-glow);
  opacity: 1 !important;
}

/* Card content */
.passion-deck-card img {
  width: 100%; height: 73%; object-fit: cover; display: block;
}

.passion-deck-card .card-placeholder {
  width: 100%; height: 73%;
  background: rgba(169,57,111,0.07);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.5rem;
}

.passion-deck-card .card-placeholder svg {
  width: 40px; height: 40px;
  stroke: rgba(169,57,111,0.3); fill: none; stroke-width: 1.5;
}

.card-info {
  padding: 0.8rem 1rem;
  background: rgba(10,10,10,0.97);
  height: 27%;
  display: flex; flex-direction: column; justify-content: center;
}

.card-info h4 { font-size: 0.92rem; color: #fff; margin-bottom: 0.2rem; font-weight: 500; }
.card-info p  { font-size: 0.76rem; color: rgba(255,255,255,0.5); font-style: italic; }

.deck-hint {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  margin-top: 1.2rem;
}


/* ── LIGHTBOX avec navigation ── */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.96);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.open { opacity: 1; pointer-events: all; }

.lightbox-img {
  max-width: 88vw; max-height: 82vh;
  object-fit: contain; border-radius: 12px;
  box-shadow: 0 0 80px rgba(169,57,111,0.2);
  transition: opacity 0.2s ease;
}

.lightbox-close {
  position: absolute; top: 2rem; right: 2rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(169,57,111,0.2);
  border: 2px solid rgba(169,57,111,0.4);
  color: #fff; font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}

.lightbox-close:hover { background: rgba(169,57,111,0.4); border-color: var(--pink); }

/* Flèches navigation lightbox */
.lightbox-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(169,57,111,0.15);
  border: 2px solid rgba(169,57,111,0.35);
  color: #fff; font-size: 1.6rem;
  cursor: pointer; display: none; /* affiché par JS si plusieurs items */
  align-items: center; justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.lightbox-nav:hover {
  background: rgba(169,57,111,0.3);
  border-color: var(--pink);
  color: var(--pink);
}

.lightbox-prev { left: 2rem; }
.lightbox-next { right: 2rem; }

@media (max-width: 600px) {
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.2rem; }
}


/* ── Sections deck ── */
.contemplation-section {
  background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
  padding: 6rem 0;
}

body.light-mode .contemplation-section { background: var(--lm-bg-2); }
body.light-mode .deck-section { background: var(--lm-bg-base); }

body.light-mode .masonry-item {
  border-color: var(--lm-border);
}

body.light-mode .masonry-item:hover {
  border-color: var(--lm-pink-dark);
  box-shadow: var(--lm-shadow-md);
}

body.light-mode .masonry-placeholder {
  background: var(--lm-bg-card-2);
}

body.light-mode .passion-deck-card {
  background: var(--lm-bg-card);
  border-color: var(--lm-border);
}

body.light-mode .passion-deck-card.active {
  border-color: var(--lm-pink-dark);
  box-shadow: var(--lm-shadow-md);
}

body.light-mode .card-info {
  background: var(--lm-bg-card);
}

body.light-mode .card-info h4 { color: var(--lm-text); }
body.light-mode .card-info p  { color: var(--lm-text-muted); }

body.light-mode .exp-card-date-badge {
  background: rgba(139,31,85,0.1);
  border-color: rgba(139,31,85,0.25);
  color: var(--lm-pink-dark);
}

/* ================================================================
   PASSIONS FIXES — À ajouter à la fin de style.css ET style-additions.css
   Corrections : mode clair, galerie art, piles cuisine
================================================================ */

/* ── Mode clair header translucide ── */
body.light-mode .header {
  background: rgba(253, 246, 240, 0.82) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

body.light-mode .nav a,
body.light-mode .nav-dropdown-trigger {
  color: var(--lm-text-2);
  background: transparent;
}

/* ── Mode clair passions page ── */
body.light-mode.passions-body {
  background: var(--lm-bg-base);
}

body.light-mode .passion-slider { background: var(--lm-bg-base); }

body.light-mode .pp-hero     { background: linear-gradient(135deg,#f5ddd5,#fde8f0); }
body.light-mode .pp-univers  { background: linear-gradient(180deg,#fdf6f0,#f5e8e0); }
body.light-mode .pp-contemplation { background: linear-gradient(180deg,#f5e8e0,#eeddd5); }
body.light-mode .pp-echappees { background: linear-gradient(180deg,#fdf6f0,#f0d8e8); }
body.light-mode .pp-cuisine   { background: linear-gradient(180deg,#fff8f0,#fdf0ea); }
body.light-mode .pp-ansible   { background: var(--lm-bg-base); }

body.light-mode .passion-section-label { color: rgba(45,26,26,0.35); }
body.light-mode .pnd { background: rgba(139,31,85,0.18); border-color: rgba(139,31,85,0.25); }
body.light-mode .pnd.active { background: var(--lm-pink-dark); border-color: var(--lm-pink-dark); }
body.light-mode .passion-arrow { background: rgba(139,31,85,0.08); border-color: rgba(139,31,85,0.25); color: var(--lm-text-2); }
body.light-mode .passion-arrow:hover { background: rgba(139,31,85,0.18); border-color: var(--lm-pink-dark); color: var(--lm-pink-dark); }

body.light-mode .magazine-card-large,
body.light-mode .magazine-card-small,
body.light-mode .magazine-card-medium { background: var(--lm-bg-card); border-color: var(--lm-border); }
body.light-mode .mag-body h3 { color: var(--lm-text); }
body.light-mode .mag-body p  { color: var(--lm-text-2); }

body.light-mode .deck-card-3d { background: var(--lm-bg-card); border-color: var(--lm-border); }
body.light-mode .deck-card-3d.on-top { border-color: var(--lm-pink-dark); }
body.light-mode .dc-info { background: var(--lm-bg-card); }
body.light-mode .dc-info h4 { color: var(--lm-text); }
body.light-mode .dc-info p  { color: var(--lm-text-muted); }
body.light-mode .deck-title-page { color: var(--lm-text); }
body.light-mode .deck-hint-page  { color: var(--lm-text-muted); }

body.light-mode .scroll-band-label { color: var(--lm-pink-dark); }
body.light-mode .scroll-item { background: var(--lm-bg-card); border-color: var(--lm-border); }
body.light-mode .scroll-item-caption { color: var(--lm-text-muted); }

/* ── Certif cards image plus grande ── */
.certif-about-card .certif-badge-img {
  aspect-ratio: 4/3 !important;
  padding: 1rem !important;
  object-fit: contain;
}

/* ── À propos : menu burger section (même logique que portfolio) ── */
.about-float-menu {
  position: fixed;
  right: 2rem; top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;
}
.afm-trigger {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(169,57,111,0.15); border: 2px solid rgba(169,57,111,0.4);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.3s; backdrop-filter: blur(10px);
}
.afm-trigger:hover, .afm-trigger.open {
  background: rgba(169,57,111,0.3); border-color: var(--pink); box-shadow: 0 0 20px var(--pink-glow);
}
.afm-trigger svg { stroke: var(--pink); transition: transform 0.3s; }
.afm-trigger.open svg { transform: rotate(45deg); }
.afm-links {
  display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end;
  opacity: 0; pointer-events: none; transform: translateX(16px);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.afm-links.open { opacity: 1; pointer-events: all; transform: translateX(0); }
.afm-link {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 1rem;
  background: rgba(10,10,10,0.9); border: 1px solid rgba(169,57,111,0.3);
  border-radius: 30px; color: rgba(255,255,255,0.8);
  text-decoration: none; font-size: 0.82rem; font-weight: 500;
  backdrop-filter: blur(12px); transition: all 0.2s; white-space: nowrap;
}
.afm-link:hover, .afm-link.active { border-color: var(--pink); color: var(--pink); background: rgba(169,57,111,0.1); }
.afm-dot { width:7px;height:7px;border-radius:50%;background:rgba(169,57,111,0.4);flex-shrink:0;transition:background 0.2s; }
.afm-link.active .afm-dot, .afm-link:hover .afm-dot { background:var(--pink); box-shadow:0 0 6px var(--pink-glow); }
body.light-mode .afm-link { background:rgba(253,246,240,0.95);color:var(--lm-text-2);border-color:rgba(169,57,111,0.2); }
body.light-mode .afm-trigger { background:rgba(139,31,85,0.1);border-color:rgba(139,31,85,0.3); }

/* ================================================================
   LIGHT MODE GLOBAL — À coller en FIN de style.css
   Couvre toutes les pages : projet, stage, expérience, contact, about
================================================================ */

/* ── Variables base ── */
body.light-mode {
  --lm-bg-base:   #fdf6f0;
  --lm-bg-2:      #f5e8e0;
  --lm-bg-card:   #ffffff;
  --lm-bg-card-2: #f9f0eb;
  --lm-text:      #2d1a1a;
  --lm-text-2:    #5c3535;
  --lm-text-muted:#8b6060;
  --lm-border:    rgba(139,31,85,0.15);
  --lm-pink-dark: #8b1f55;
  --lm-accent:    #c4476e;
  --lm-shadow-sm: 0 2px 12px rgba(139,31,85,0.08);
  --lm-shadow-md: 0 8px 32px rgba(139,31,85,0.14);
}

/* ── BODY & backgrounds globaux ── */
body.light-mode { background: var(--lm-bg-base); color: var(--lm-text); }
body.light-mode .header {
  background: rgba(253,246,240,0.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(139,31,85,0.1);
}
body.light-mode .nav a,
body.light-mode .nav-dropdown-trigger { color: var(--lm-text-2); background: transparent; }
body.light-mode .nav a:hover,
body.light-mode .nav-dropdown-trigger:hover { color: var(--lm-pink-dark); }
body.light-mode .dropdown-menu {
  background: rgba(253,246,240,0.98);
  border-color: rgba(139,31,85,0.15);
  box-shadow: 0 16px 40px rgba(139,31,85,0.12);
}
body.light-mode .dropdown-menu a { color: var(--lm-text-2); }
body.light-mode .dropdown-menu a:hover { background: rgba(139,31,85,0.06); color: var(--lm-pink-dark); }

/* ── PAGES hero (toutes) ── */
body.light-mode .portfolio-hero,
body.light-mode .project-hero-banner,
body.light-mode .stage-hero-banner,
body.light-mode .contact-hero,
body.light-mode .passions-hero {
  background: linear-gradient(135deg, #f0d4e8 0%, #fde8f0 100%) !important;
}
body.light-mode .page-title .word       { color: var(--lm-text) !important; }
body.light-mode .page-title .word.pink  { color: var(--lm-pink-dark) !important; }
body.light-mode .hero-subtitle          { color: var(--lm-text-muted); }
body.light-mode .project-page-title     { color: var(--lm-text); }
body.light-mode .project-page-accroche  { color: var(--lm-text-2); }
body.light-mode .project-hero-bg { background: rgba(139,31,85,0.04) !important; }

/* ── Meta bars ── */
body.light-mode .project-meta-bar,
body.light-mode .stage-meta-bar,
body.light-mode .meta-bar {
  background: rgba(139,31,85,0.03) !important;
  border-color: rgba(139,31,85,0.1) !important;
}
body.light-mode .pml, body.light-mode .sml, body.light-mode .ml { color: var(--lm-pink-dark); }
body.light-mode .pmv, body.light-mode .smv, body.light-mode .mv { color: var(--lm-text-2); }

/* ── Section backgrounds ── */
body.light-mode .projects-grid-section  { background: var(--lm-bg-base); }
body.light-mode section[style*="background:#000"],
body.light-mode section[style*="background: #000"] { background: var(--lm-bg-2) !important; }
body.light-mode section[style*="background:#0a0a0a"],
body.light-mode section[style*="background: #0a0a0a"] { background: var(--lm-bg-base) !important; }

/* ── Titres & textes sections ── */
body.light-mode .section-title  { color: var(--lm-text); }
body.light-mode .section-subtitle { color: var(--lm-text-muted); }
body.light-mode h2, body.light-mode h3 { color: var(--lm-text); }
body.light-mode p { color: var(--lm-text-2); }

/* ── Story (pages projet/stage) ── */
body.light-mode .project-page,
body.light-mode .stage-page,
body.light-mode .exp-page { background: var(--lm-bg-base); }
body.light-mode .story-h2 { color: var(--lm-text); border-color: rgba(139,31,85,0.15); }
body.light-mode .story-p  { color: var(--lm-text-2); }
body.light-mode .story-p strong { color: var(--lm-text); }
body.light-mode .story-quote {
  background: rgba(139,31,85,0.04);
  border-color: var(--lm-pink-dark);
  color: var(--lm-text-2);
}
body.light-mode .stage-result-chip {
  background: rgba(139,31,85,0.08);
  border-color: rgba(139,31,85,0.2);
  color: var(--lm-pink-dark);
}

/* ── Nav bas de page ── */
body.light-mode .foot-nav,
body.light-mode .project-footer-nav,
body.light-mode .stage-footer-nav { border-color: rgba(139,31,85,0.12); }
body.light-mode .foot-nav a,
body.light-mode .project-footer-nav a,
body.light-mode .stage-footer-nav a {
  background: rgba(139,31,85,0.05);
  border-color: rgba(139,31,85,0.2);
  color: var(--lm-text-2);
}
body.light-mode .foot-nav a:hover,
body.light-mode .project-footer-nav a:hover,
body.light-mode .stage-footer-nav a:hover {
  border-color: var(--lm-pink-dark);
  color: var(--lm-pink-dark);
  background: rgba(139,31,85,0.1);
}

/* ── Breadcrumbs ── */
body.light-mode .project-breadcrumb,
body.light-mode .stage-breadcrumb { color: var(--lm-text-muted); }
body.light-mode .project-breadcrumb a,
body.light-mode .stage-breadcrumb a { color: var(--lm-pink-dark); }

/* ── Cards projet ── */
body.light-mode .project-card-grid {
  background: var(--lm-bg-card);
  border-color: rgba(139,31,85,0.15);
  box-shadow: var(--lm-shadow-sm);
}
body.light-mode .project-card-grid:hover {
  border-color: var(--lm-pink-dark);
  box-shadow: var(--lm-shadow-md);
}
body.light-mode .pcg-title { color: var(--lm-text); }
body.light-mode .pcg-desc  { color: var(--lm-text-2); }
body.light-mode .pcg-stack span {
  background: rgba(139,31,85,0.05);
  border-color: rgba(139,31,85,0.1);
  color: var(--lm-text-muted);
}

/* ── Tags filtres ── */
body.light-mode .tag-filter-btn {
  background: rgba(139,31,85,0.05);
  border-color: rgba(139,31,85,0.18);
  color: var(--lm-text-2);
}
body.light-mode .tag-filter-btn.active,
body.light-mode .tag-filter-btn:hover {
  background: var(--lm-pink-dark);
  color: #fff;
}
body.light-mode .results-counter { color: var(--lm-text-muted); }

/* ── Exp cards ── */
body.light-mode .exp-card {
  background: var(--lm-bg-card);
  border-color: rgba(139,31,85,0.15);
  box-shadow: var(--lm-shadow-sm);
}
body.light-mode .exp-card-link:hover .exp-card {
  border-color: var(--lm-pink-dark);
  box-shadow: var(--lm-shadow-md);
}
body.light-mode .exp-card-title   { color: var(--lm-text); }
body.light-mode .exp-card-summary { color: var(--lm-text-2); }
body.light-mode .exp-card-tags span { color: var(--lm-text-muted); background: rgba(139,31,85,0.05); border-color: rgba(139,31,85,0.1); }
body.light-mode .exp-card-date-badge { background: rgba(139,31,85,0.08); border-color: rgba(139,31,85,0.2); color: var(--lm-pink-dark); }
body.light-mode .exp-card-cta { color: var(--lm-pink-dark); }

/* ── Contact ── */
body.light-mode .contact-page { background: var(--lm-bg-base); }
body.light-mode .contact-form-wrapper h2,
body.light-mode .contact-info-wrapper h2 { color: var(--lm-text); }
body.light-mode .form-group label { color: var(--lm-text-2); }
body.light-mode .form-group input,
body.light-mode .form-group textarea {
  background: var(--lm-bg-card);
  border-color: rgba(139,31,85,0.2);
  color: var(--lm-text);
}
body.light-mode .form-group input:focus,
body.light-mode .form-group textarea:focus { border-color: var(--lm-pink-dark); }
body.light-mode .info-card { background: var(--lm-bg-card); border-color: rgba(139,31,85,0.12); }
body.light-mode .info-card h3 { color: var(--lm-text); }
body.light-mode .info-card a, body.light-mode .info-card p { color: var(--lm-text-2); }
body.light-mode .availability-card { background: rgba(139,31,85,0.05); border-color: rgba(139,31,85,0.15); }
body.light-mode .availability-card h3 { color: var(--lm-text); }
body.light-mode .availability-card p  { color: var(--lm-text-2); }

/* ── Recommandation embed ── */
body.light-mode .reco-embed { background: rgba(139,31,85,0.03); border-color: rgba(139,31,85,0.15); }
body.light-mode .reco-embed-header { background: rgba(139,31,85,0.05); border-color: rgba(139,31,85,0.1); }
body.light-mode .reco-embed-header h3 { color: var(--lm-text); }
body.light-mode .reco-embed-header span { color: var(--lm-text-muted); }
body.light-mode .reco-quote-text { color: var(--lm-text-2); }
body.light-mode .reco-author strong { color: var(--lm-pink-dark); }
body.light-mode .reco-author span   { color: var(--lm-text-muted); }
body.light-mode .reco-footer { border-color: rgba(139,31,85,0.08); }

/* ── Burger flottant ── */
body.light-mode .pfm-link,
body.light-mode .afm-link {
  background: rgba(253,246,240,0.95);
  color: var(--lm-text-2);
  border-color: rgba(139,31,85,0.18);
}
body.light-mode .pfm-link.active,
body.light-mode .pfm-link:hover,
body.light-mode .afm-link.active,
body.light-mode .afm-link:hover { border-color: var(--lm-pink-dark); color: var(--lm-pink-dark); background: rgba(139,31,85,0.07); }
body.light-mode .pfm-trigger,
body.light-mode .afm-trigger { background: rgba(139,31,85,0.08); border-color: rgba(139,31,85,0.25); }

/* ── CTA section ── */
body.light-mode .cta-section { background: linear-gradient(135deg,#f0d4e8,#fde8f0); }
body.light-mode .cta-section h2 { color: var(--lm-text); }
body.light-mode .cta-section p  { color: var(--lm-text-2); }

/* ── Footer ── */
body.light-mode .site-footer {
  background: #f0d8e8;
  border-top: 1px solid rgba(139,31,85,0.12);
}
body.light-mode .footer-center p { color: var(--lm-text-2); }
body.light-mode .socials a { color: var(--lm-text-2); }
body.light-mode .socials a:hover { color: var(--lm-pink-dark); }
body.light-mode .download-cv { color: var(--lm-pink-dark); border-color: rgba(139,31,85,0.25); }

/* ── Terminal ── */
body.light-mode .terminal { background: #1a1a2e; }
body.light-mode .terminal-header { background: #12121e; }

/* ── Lightbox ── */
body.light-mode .lightbox { background: rgba(45,26,26,0.97); }

/* ── Timeline ── */
body.light-mode .tl-item { color: var(--lm-text-2); }
body.light-mode .tl-dot  { background: var(--lm-pink-dark); }
body.light-mode .tl-line { background: rgba(139,31,85,0.2); }

/* ── Certif cards ── */
body.light-mode .certif-card,
body.light-mode .certif-about-card {
  background: var(--lm-bg-card);
  border-color: rgba(139,31,85,0.15);
  box-shadow: var(--lm-shadow-sm);
}
body.light-mode .certif-card h3,
body.light-mode .certif-about-card h3 { color: var(--lm-text); }

/* ── Magazine grid passions ── */
body.light-mode .magazine-card-large,
body.light-mode .magazine-card-small,
body.light-mode .magazine-card-medium {
  background: var(--lm-bg-card);
  border-color: rgba(139,31,85,0.12);
}
body.light-mode .mag-body h3 { color: var(--lm-text); }
body.light-mode .mag-body p  { color: var(--lm-text-2); }
body.light-mode .mag-category { color: var(--lm-pink-dark); }

/* ── Art gallery bands ── */
body.light-mode .art-item { border-color: rgba(139,31,85,0.15); }
body.light-mode .art-item:hover { border-color: var(--lm-pink-dark); box-shadow: var(--lm-shadow-md); }

/* ── Cuisine deck ── */
body.light-mode .cuisine-deck-card { background: var(--lm-bg-card); border-color: rgba(139,31,85,0.18); }
body.light-mode .cuisine-deck-card.active { border-color: var(--lm-pink-dark); box-shadow: 0 16px 50px rgba(139,31,85,0.15); }
body.light-mode .cuisine-card-title { color: var(--lm-text); }
body.light-mode .cuisine-card-sub   { color: var(--lm-text-muted); }

/* ── Mockups ── */
body.light-mode .phone-body {
  background: linear-gradient(145deg,#c8c8d2,#e0e0ea,#c8c8d2);
  box-shadow: 0 30px 60px rgba(0,0,0,0.25), 0 0 40px rgba(139,31,85,0.1);
}
body.light-mode .phone-placeholder { background: linear-gradient(135deg,#f0d8e8,#fdf6f0); }
body.light-mode .phone-placeholder span { color: var(--lm-text-2); }
body.light-mode .laptop-lid  { background: linear-gradient(160deg,#c8c8d2,#b8b8c8); }
body.light-mode .laptop-base { background: linear-gradient(180deg,#c8c8d8,#b8b8c8); }
body.light-mode .laptop-placeholder { background: linear-gradient(135deg,#f0d8e8,#fdf6f0); }

/* ── Passions pages ── */
body.light-mode .pp-hero      { background: linear-gradient(135deg,#f5ddd5,#fde8f0) !important; }
body.light-mode .pp-univers   { background: linear-gradient(180deg,#fdf6f0,#f5e8e0) !important; }
body.light-mode .pp-art       { background: linear-gradient(180deg,#f5e8e0,#eeddd5) !important; }
body.light-mode .pp-echappees { background: linear-gradient(180deg,#fdf6f0,#f0d8e8) !important; }
body.light-mode .pp-cuisine   { background: linear-gradient(180deg,#fff8f0,#fdf0ea) !important; }
body.light-mode .pp-ansible   { background: var(--lm-bg-base) !important; }
body.light-mode .masonry-item { border-color: rgba(139,31,85,0.15); }
body.light-mode .masonry-item:hover { border-color: var(--lm-pink-dark); box-shadow: var(--lm-shadow-md); }
body.light-mode .gallery-band-label { color: var(--lm-pink-dark); }
body.light-mode .deck-hint-page { color: var(--lm-text-muted); }
body.light-mode .passion-section-label { color: rgba(45,26,26,0.28); }
body.light-mode .pnd { background: rgba(139,31,85,0.18); border-color: rgba(139,31,85,0.25); }
body.light-mode .pnd.active { background: var(--lm-pink-dark); border-color: var(--lm-pink-dark); }
body.light-mode .passion-arrow { background: rgba(139,31,85,0.08); border-color: rgba(139,31,85,0.2); color: var(--lm-text-2); }
body.light-mode .passion-arrow:hover { border-color: var(--lm-pink-dark); color: var(--lm-pink-dark); }

/* ── Hero index ── */
body.light-mode .hero-epic { background: linear-gradient(135deg,#f5ddd5,#fde8f0) !important; }
body.light-mode .hero-title .word { color: var(--lm-text) !important; }
body.light-mode .glow-subtitle    { color: var(--lm-text-2) !important; }
body.light-mode .subtitle         { color: var(--lm-text-muted) !important; }
body.light-mode .about-preview    { background: var(--lm-bg-2); }
body.light-mode .about-preview-text h3 { color: var(--lm-text); }
body.light-mode .about-preview-text p  { color: var(--lm-text-2); }
/* ─── Fix : sections après passions ne sont pas bloquées par le slider ─── */
.passion-slider {
  /* S'assure que le slider ne déborde pas en dehors de son conteneur */
  overflow: hidden;
}

/* La page passions entière en full-screen */
.passions-body main {
  overflow: hidden;
  height: 100vh;
}

/* Sections qui suivent les passions (micro-learning, ansible, etc.) */
.micro-learning-section,
.ansible-section,
#microlearning {
  position: relative;
  z-index: 10;
  overflow: visible;
}