/* =============================================
   PORTFOLIO — Sébastien Maurice
   style.css — v2.0 — 2026
============================================= */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
  CSS Custom Properties (variables CSS).
  Avantages vs SASS/LESS :
  → Natives dans le navigateur (pas de compilation)
  → Modifiables en JS au runtime (ex: theme switcher)
  → Héritées dans le DOM (peuvent être redéfinies dans un sous-sélecteur)
  
  Convention de nommage : sémantique (--dark, --cream) pas technique
  (--color-1). Un nom sémantique dit ce que la variable représente,
  pas sa valeur brute.
*/
:root {
  /* === PALETTE PRINCIPALE ===
     Tons organiques chauds — sable, pierre, olive, ambre.
     Inspirés de la nature (terre, pierre, végétation).
     Le contraste fond sombre / texte crème évite la fatigue visuelle
     par rapport à un blanc pur (#ffffff). */
  --sand: #c8c4b4;
  --stone: #9a9488;
  --warm: #f2ede4;
  --dark: #1b1914;      /* fond principal — pas noir pur, plus doux */
  --ink: #2e2b25;
  --olive: #5c6340;
  --olive2: #8a9463;
  --amber: #b87333;     /* couleur accent principale — chaleureux */
  --rust: #8b4a2e;
  --cream: #ede9dc;     /* texte principal — blanc cassé plus lisible */

  /* === ACCENT BLEU ===
     Ajout v3 : une couleur froide en contrepoint des tons chauds.
     Utilisée pour le badge Lighthouse, les highlights techniques.
     Le bleu = confiance, technique — contrebalance le côté "artisanal" de l'olive. */
  --accent: #3b82f6;
  --accent-light: #60a5fa;

  /* === TYPOGRAPHIE ===
     3 familles, 3 usages distincts :
     - Serif (DM Serif Display) : les grands titres H1/H2 → élégance, caractère
     - Mono (DM Mono) : labels, tags, code → précision, identité tech
     - Sans (Syne) : corps, navigation → lisibilité + modernité
     
     Règle générale : jamais plus de 2-3 familles sur un même site. */
  --serif: "DM Serif Display", Georgia, serif;
  --mono: "DM Mono", monospace;
  --sans: "Syne", sans-serif;

  /* === GLASSMORPHISM ===
     Variables pour les effets de verre dépoli (backdrop-filter).
     --gb = glass background (très transparent)
     --gbh = glass background hover (légèrement plus opaque)
     --gborder = glass border (bord semi-transparent)
     
     Le rgba() permet de jouer sur l'opacité sans affecter la couleur. */
  --gb: rgba(237, 233, 220, 0.04);
  --gbh: rgba(237, 233, 220, 0.09);
  --gborder: rgba(200, 196, 180, 0.14);
  --gborderh: rgba(200, 196, 180, 0.3);

  /* === EASING (COURBES D'ANIMATION) ===
     cubic-bezier() définit la courbe de vitesse d'une transition.
     --ease : "spring" — démarre fort, finit doucement (naturel)
     --ease2 : "bounce" — légère élasticité à la fin
     
     Outil utile : https://cubic-bezier.com */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease2: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === COULEURS PROJET CINÉ DÉLICES ===
     Ces variables sont spécifiques au projet Ciné Délices dans le portfolio.
     Les isoler dans des variables évite de les "hardcoder" partout et
     facilite la maintenance si le projet change de palette. */
  --cd-gold: #c4a052;
  --cd-gold-shimmer: linear-gradient(
    135deg,
    #b8882a 0%,
    #d4a843 30%,
    #f2c84b 55%,
    #ffe085 80%,
    #d4a843 100%
  );
  --cd-rouge: #c23018;
}

/*
  scroll-behavior: smooth → défilement fluide lors des ancres (#section).
  Alternative CSS pure à window.scrollTo({ behavior: 'smooth' }) en JS.
  Attention : certains utilisateurs préfèrent moins de mouvement.
  La bonne pratique est d'ajouter @media (prefers-reduced-motion) en complément.
*/
html {
  scroll-behavior: smooth;
}

/*
  Le body est la racine visuelle de la page.
  overflow-x: hidden → empêche le scroll horizontal dû aux animations
  qui sortent temporairement du viewport (transform: translateX).
  cursor: none → on cache le curseur natif pour notre curseur custom en JS.
  Si le JS ne charge pas, l'utilisateur n'a plus de curseur — à garder en tête
  pour l'accessibilité en production.
*/
body {
  background: var(--dark);
  color: var(--cream);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
  cursor: none;
}

/* =============================================
   2. GRAIN — Texture de bruit sur le fond
   
   Technique : pseudo-élément ::after sur le body avec une image SVG
   générée inline en Data URI. L'image utilise feTurbulence (filtre SVG)
   pour générer du bruit fractal — le même principe que Photoshop "Bruit".
   
   Pourquoi ?
   → Un fond noir/sombre "plat" manque de profondeur. Le grain ajoute
     une texture organique subtile qui rend l'ensemble moins "screen".
   
   Paramètres clés :
   → opacity: 0.028 : très léger, subliminal — trop fort serait distrayant
   → mix-blend-mode: overlay : le grain s'intègre dans les couleurs existantes
     plutôt que de les couvrir
   → pointer-events: none : le pseudo-élément ne capte aucun clic/hover
   → z-index: 9999 : au-dessus de tout, mais inactif (pointer-events: none)
============================================= */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.028;
  background-size: 200px;
  mix-blend-mode: overlay;
}

/* =============================================
   3. CURSEUR PERSONNALISÉ
   
   Architecture : 2 éléments superposés en position: fixed
   → #cur : point central (petit, réactif, suit la souris exactement)
   → #cring : anneau extérieur (plus grand, suit avec un léger délai
     grâce à l'interpolation linéaire dans le JS : rx += (mx - rx) * 0.1)
   
   Ce décalage naturel s'appelle "lerping" (Linear Interpolation).
   C'est une technique simple pour donner une sensation de fluidité/physique.
   
   Les états :
   → .hov : survol d'un élément interactif → anneau s'agrandit
   → .click : mousedown → point se réduit (feedback tactile visuel)
   
   transform: translate(-50%, -50%) → centre l'élément sur la position
   exacte de la souris (sans ça, c'est le coin supérieur-gauche qui suit).
============================================= */
#cur,
#cring {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
#cur {
  width: 8px;
  height: 8px;
  background: var(--amber);
  z-index: 99999;
  transition:
    width 0.25s var(--ease),
    height 0.25s var(--ease),
    background 0.3s;
}
#cring {
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(184, 115, 51, 0.4);
  z-index: 99998;
  transition:
    width 0.35s var(--ease),
    height 0.35s var(--ease),
    border-color 0.3s,
    opacity 0.3s;
}
#cur.hov {
  width: 16px;
  height: 16px;
  background: var(--olive2);
}
#cring.hov {
  width: 56px;
  height: 56px;
  border-color: var(--amber);
  opacity: 0.65;
}
#cur.click {
  width: 6px;
  height: 6px;
  background: var(--cream);
}

/* =============================================
   4. CANVAS PARTICULES
   
   Le <canvas> couvre toute la fenêtre en position: fixed.
   Le dessin des particules est géré entièrement en JS (classe Pt dans main.js).
   
   Pourquoi canvas plutôt que des div animées ?
   → Des centaines de div avec des animations CSS = layout thrashing (le
     navigateur recalcule le layout à chaque frame).
   → Canvas = un seul élément, tout dessiné en 2D context, 1 seul repaint
     par frame via requestAnimationFrame. Beaucoup plus performant.
   
   pointer-events: none → les particules ne captent aucune interaction.
   z-index: 0 → sous le contenu mais au-dessus du fond.
============================================= */
#pc {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/*
  Le spotlight suit la souris via une variable CSS --sx/--sy mise à jour en JS.
  radial-gradient() crée un cercle de lumière douce centré sur la souris.
  C'est une technique moderne : mettre à jour une var CSS en JS est plus
  performant que de recalculer le style complet à chaque mousemove.
*/
.spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    600px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(92, 99, 64, 0.08),
    transparent 40%
  );
}

/* =============================================
   5. NAVBAR + MENU MOBILE
   
   La navbar est en position: fixed → reste en haut même au scroll.
   backdrop-filter: blur() crée l'effet "verre dépoli" (glassmorphism).
   
   Important : backdrop-filter nécessite un background semi-transparent
   pour fonctionner — un fond opaque cacherait l'effet.
   
   -webkit-backdrop-filter : préfixe pour la compatibilité Safari.
   Safari a longtemps été le seul à supporter backdrop-filter,
   et garde toujours le préfixe pour certaines propriétés.
   
   La classe .scrolled est ajoutée via JS (IntersectionObserver ou scroll event)
   quand l'utilisateur a dépassé 80px de scroll → padding réduit,
   fond légèrement plus opaque pour la lisibilité.
============================================= */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background: rgba(27, 25, 20, 0.7);
  border-bottom: 1px solid var(--gborder);
  transition:
    padding 0.4s var(--ease),
    background 0.4s;
}
nav.scrolled {
  padding: 12px 52px;
  background: rgba(27, 25, 20, 0.88);
}
.nav-logo {
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.nav-logo em {
  color: var(--amber);
  font-style: italic;
}
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--amber);
  transition: width 0.35s var(--ease);
}
.nav-links a:hover {
  color: var(--cream);
}
.nav-links a:hover::after {
  width: 100%;
}
.nav-soc {
  display: flex;
  gap: 13px;
  align-items: center;
}
.nav-soc a {
  font-family: var(--mono);
  font-size: 0.61rem;
  color: var(--stone);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.nav-soc a:hover {
  color: var(--amber);
}
.nav-soc .sp {
  color: var(--stone);
  opacity: 0.28;
}
.nav-contact-quick {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--stone);
  letter-spacing: 0.08em;
  border-left: 1px solid var(--gborder);
  padding-left: 13px;
}
.nav-contact-quick a {
  color: var(--olive2);
  text-decoration: none;
  transition: color 0.3s;
}
.nav-contact-quick a:hover {
  color: var(--amber);
}
.nav-contact-quick .sep-dot {
  opacity: 0.3;
  margin: 0 4px;
}
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: none;
  padding: 4px;
}
.burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--cream);
  transition: all 0.35s var(--ease);
}
.m-nav {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(27, 25, 20, 0.97);
  backdrop-filter: blur(28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.m-nav.open {
  opacity: 1;
  pointer-events: all;
}
.m-nav a {
  font-family: var(--serif);
  font-size: 1.85rem;
  color: var(--cream);
  text-decoration: none;
  font-style: italic;
  transform: translateY(20px);
  opacity: 0;
  transition:
    color 0.3s,
    transform 0.5s var(--ease),
    opacity 0.5s var(--ease);
}
.m-nav.open a {
  transform: translateY(0);
  opacity: 1;
}
.m-nav.open a:nth-child(1) {
  transition-delay: 0.05s;
}
.m-nav.open a:nth-child(2) {
  transition-delay: 0.1s;
}
.m-nav.open a:nth-child(3) {
  transition-delay: 0.15s;
}
.m-nav.open a:nth-child(4) {
  transition-delay: 0.2s;
}
.m-nav a:hover {
  color: var(--amber);
}

/* =============================================
   6. HERO SECTION
============================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 52px 80px;
  z-index: 1;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.orb1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(92, 99, 64, 0.22), transparent 70%);
  top: -150px;
  right: -120px;
  animation: orbpulse 8s ease-in-out infinite;
}
.orb2 {
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle,
    rgba(184, 115, 51, 0.15),
    transparent 70%
  );
  bottom: -40px;
  left: -100px;
  animation: orbpulse 10s ease-in-out infinite reverse;
}
@keyframes orbpulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.75;
  }
}
.hero-in {
  max-width: 1200px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--amber);
}
.eyebrow span {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--olive2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-name {
  font-family: var(--serif);
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  line-height: 0.92;
  color: var(--cream);
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.hero-name em {
  color: var(--amber);
  font-style: italic;
  display: block;
}
.hero-name .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: charIn 0.6s var(--ease) forwards;
}
@keyframes charIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-style: italic;
  color: var(--sand);
  margin-bottom: 22px;
  line-height: 1.2;
}
.hero-sub {
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.12em;
  color: var(--stone);
  text-transform: uppercase;
  margin-bottom: 46px;
  line-height: 1.9;
}
.hero-sub .dot {
  color: var(--amber);
  margin: 0 7px;
}
.ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 50px;
  border: none;
  transition: all 0.4s var(--ease);
  cursor: none;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent);
  opacity: 0;
  transition: opacity 0.35s;
}
.btn:hover::after {
  opacity: 1;
}
.btn-p {
  background: linear-gradient(135deg, var(--olive) 0%, var(--olive2) 100%);
  color: var(--cream);
  box-shadow:
    0 4px 20px rgba(92, 99, 64, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-p:hover {
  box-shadow:
    0 10px 36px rgba(92, 99, 64, 0.55),
    0 0 0 1px rgba(138, 148, 99, 0.3);
  transform: translateY(-3px) scale(1.02);
}
.btn-g {
  background: rgba(237, 233, 220, 0.04);
  color: var(--cream);
  border: 1px solid rgba(200, 196, 180, 0.2);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(237, 233, 220, 0.06);
}
.btn-g:hover {
  border-color: var(--amber);
  color: var(--amber);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(184, 115, 51, 0.2);
}
.btn-cv {
  background: linear-gradient(
    135deg,
    rgba(184, 115, 51, 0.15) 0%,
    rgba(184, 115, 51, 0.08) 100%
  );
  color: var(--amber);
  border: 1px solid rgba(184, 115, 51, 0.35);
  backdrop-filter: blur(12px);
}
.btn-cv:hover {
  background: linear-gradient(
    135deg,
    rgba(184, 115, 51, 0.28) 0%,
    rgba(184, 115, 51, 0.15) 100%
  );
  border-color: var(--amber);
  box-shadow: 0 8px 28px rgba(184, 115, 51, 0.25);
  transform: translateY(-3px);
}
.btn .arr {
  transition: transform 0.3s var(--ease);
  display: inline-block;
}
.btn:hover .arr {
  transform: translateX(5px);
}
.btn-g:hover .arr,
.btn-cv:hover .arr {
  transform: translateY(3px);
}
.hero-avail {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--olive2);
  letter-spacing: 0.1em;
  border: 1px solid rgba(92, 99, 64, 0.35);
  background: rgba(92, 99, 64, 0.08);
  padding: 7px 14px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
}
.avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
  animation: blink 2s ease-in-out infinite;
  flex-shrink: 0;
}
.avail-loc {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--stone);
  letter-spacing: 0.08em;
}
.scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.61rem;
  color: var(--stone);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}
.scl {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, var(--stone));
  animation: sl 2s ease-in-out infinite;
}
@keyframes sl {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* =============================================
   WOW HERO — Terminal + rings
============================================= */
.wow-stage {
  position: relative;
  width: 500px;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wow-stage::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(92, 99, 64, 0.18) 0%,
    rgba(184, 115, 51, 0.1) 35%,
    transparent 70%
  );
  filter: blur(50px);
  animation: stagePulse 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes stagePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}
.wow-ring-outer {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  border: 1px dashed rgba(184, 115, 51, 0.12);
  animation: ringRotate 40s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.wow-ring-mid {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(92, 99, 64, 0.1);
  animation: ringRotate 28s linear infinite reverse;
  pointer-events: none;
  z-index: 1;
}
.wow-ring-inner {
  position: absolute;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  border: 1px solid rgba(200, 196, 180, 0.07);
  animation: ringRotate 18s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes ringRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.ring-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px 2px rgba(184, 115, 51, 0.6);
  top: -2.5px;
  left: 50%;
  transform: translateX(-50%);
}
.ring-dot-green {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--olive2);
  box-shadow: 0 0 6px 2px rgba(138, 148, 99, 0.5);
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
}
.wow-terminal {
  width: 360px;
  background: linear-gradient(
    160deg,
    rgba(18, 15, 10, 0.96) 0%,
    rgba(22, 18, 12, 0.98) 100%
  );
  border: 1px solid rgba(200, 196, 180, 0.2);
  border-radius: 14px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(237, 233, 220, 0.12),
    0 0 80px rgba(92, 99, 64, 0.12),
    0 0 120px rgba(184, 115, 51, 0.06);
  overflow: hidden;
  position: relative;
  z-index: 10;
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
  transition:
    transform 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}
.wow-stage:hover .wow-terminal {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(237, 233, 220, 0.15),
    0 0 100px rgba(92, 99, 64, 0.18),
    0 0 160px rgba(184, 115, 51, 0.1);
}
.wow-term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: rgba(237, 233, 220, 0.035);
  border-bottom: 1px solid rgba(200, 196, 180, 0.08);
}
.wow-dots {
  display: flex;
  gap: 6px;
}
.wd {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.wd1 {
  background: #ff5f57;
}
.wd2 {
  background: #ffbd2e;
}
.wd3 {
  background: #28c840;
}
.wow-term-title {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: rgba(200, 196, 180, 0.38);
  letter-spacing: 0.08em;
  margin-left: 6px;
  flex: 1;
}
.wow-term-branch {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: rgba(138, 148, 99, 0.65);
  letter-spacing: 0.06em;
  background: rgba(92, 99, 64, 0.15);
  border: 1px solid rgba(92, 99, 64, 0.2);
  border-radius: 4px;
  padding: 2px 7px;
}
.wow-term-body {
  padding: 18px 20px 22px;
  font-family: var(--mono);
  font-size: 0.71rem;
  line-height: 2;
  min-height: 200px;
  color: rgba(200, 196, 180, 0.7);
  position: relative;
}
.term-line {
  display: block;
  white-space: nowrap;
}
.term-line.comment {
  color: rgba(138, 148, 99, 0.52);
}
.term-line.keyword {
  color: rgba(184, 115, 51, 0.88);
}
.term-line.func {
  color: rgba(138, 148, 99, 0.92);
}
.term-line.string {
  color: rgba(200, 196, 180, 0.55);
}
.term-line.indent {
  padding-left: 1.2em;
}
.term-line.prop {
  color: rgba(155, 190, 220, 0.75);
}
.term-line.dramatic {
  color: rgba(194, 48, 24, 0.85);
}
.term-cursor {
  display: inline-block;
  width: 7px;
  height: 0.95em;
  background: var(--amber);
  vertical-align: text-bottom;
  animation: cursorBlink 0.85s step-end infinite;
  margin-left: 2px;
  border-radius: 1px;
}
@keyframes cursorBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.wow-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  z-index: 20;
}
.wow-orbit {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
}
.wow-orbit-1 {
  top: -28px;
  left: 28px;
  animation: wow-float1 4.8s ease-in-out infinite;
}
.wow-orbit-2 {
  top: 50px;
  right: -64px;
  animation: wow-float2 5.6s ease-in-out infinite 0.4s;
}
.wow-orbit-3 {
  bottom: 110px;
  right: -68px;
  animation: wow-float1 5.2s ease-in-out infinite 0.9s;
}
.wow-orbit-4 {
  top: -28px;
  right: 48px;
  animation: wow-float2 6s ease-in-out infinite 1.4s;
}
.wow-orbit-5 {
  bottom: 160px;
  left: -62px;
  animation: wow-float1 4.4s ease-in-out infinite 1.8s;
}
@keyframes wow-float1 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-14px) rotate(-3deg) scale(1.02);
  }
  66% {
    transform: translateY(7px) rotate(1.5deg) scale(0.98);
  }
}
@keyframes wow-float2 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(12px) rotate(3deg) scale(0.98);
  }
  66% {
    transform: translateY(-10px) rotate(-1.5deg) scale(1.02);
  }
}

/* =============================================
   PHOTO DE PROFIL — WOW Stage (nouveau)
============================================= */
.wow-orbit-photo {
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  animation: wow-float1 6.5s ease-in-out infinite 0.7s !important;
}
.wow-photo-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  position: relative;
  cursor: none;
  transition: transform 0.4s var(--ease2);
}
.wow-photo-wrap:hover {
  transform: scale(1.12);
}
.wow-photo-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid rgba(184, 115, 51, 0.5);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.6),
    0 0 0 3px rgba(92, 99, 64, 0.25),
    0 0 20px rgba(184, 115, 51, 0.15);
  display: block;
  transition:
    border-color 0.3s,
    box-shadow 0.4s;
}
.wow-photo-wrap:hover .wow-photo-img {
  border-color: var(--amber);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.7),
    0 0 0 4px rgba(184, 115, 51, 0.3),
    0 0 30px rgba(184, 115, 51, 0.25);
}
.wow-photo-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(184, 115, 51, 0.35);
  animation: ringRotate 12s linear infinite;
  pointer-events: none;
}
.wow-photo-zoom-hint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 25, 20, 0.6);
  color: rgba(237, 233, 220, 0.85);
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.wow-photo-wrap:hover .wow-photo-zoom-hint {
  opacity: 1;
}

/* Lightbox photo profil */
.photo-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(10, 8, 5, 0.9);
  backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
  cursor: none;
}
.photo-zoom-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.photo-zoom-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: scale(0.92);
  transition: transform 0.5s var(--ease);
}
.photo-zoom-overlay.open .photo-zoom-inner {
  transform: scale(1);
}
.photo-zoom-img {
  width: 280px;
  height: 340px;
  object-fit: cover;
  object-position: top;
  border-radius: 18px;
  border: 1px solid rgba(200, 196, 180, 0.2);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
  display: block;
}
.photo-zoom-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(237, 233, 220, 0.08);
  border: 1px solid rgba(200, 196, 180, 0.2);
  color: var(--cream);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: all 0.3s;
}
.photo-zoom-close:hover {
  background: rgba(237, 233, 220, 0.15);
  border-color: var(--amber);
  color: var(--amber);
}
.photo-zoom-caption {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: rgba(200, 196, 180, 0.45);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.wow-skill-card {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background: rgba(22, 20, 16, 0.92);
  border: 1px solid rgba(200, 196, 180, 0.18);
  border-radius: 10px;
  backdrop-filter: blur(16px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  transition:
    border-color 0.3s,
    box-shadow 0.4s,
    transform 0.3s;
}
.wow-skill-card:hover {
  border-color: rgba(200, 196, 180, 0.35);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
  transform: scale(1.06);
}
.wsk-icon {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wsk-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: rgba(200, 196, 180, 0.75);
  letter-spacing: 0.08em;
}
.wsk-html .wsk-icon {
  background: #e34c26;
  color: #fff;
  box-shadow: 0 0 10px rgba(227, 76, 38, 0.4);
}
.wsk-css .wsk-icon {
  background: #264de4;
  color: #fff;
  box-shadow: 0 0 10px rgba(38, 77, 228, 0.4);
}
.wsk-js .wsk-icon {
  background: #f7df1e;
  color: #111;
  box-shadow: 0 0 10px rgba(247, 223, 30, 0.35);
}
.wsk-svelte .wsk-icon {
  background: #ff3e00;
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 62, 0, 0.4);
}
.wsk-figma .wsk-icon {
  background: linear-gradient(
    135deg,
    #f24e1e,
    #ff7262,
    #a259ff,
    #1abcfe,
    #0acf83
  );
  color: #fff;
  font-size: 0.6rem;
  box-shadow: 0 0 12px rgba(162, 89, 255, 0.35);
}
.wow-lh-badge {
  position: absolute;
  bottom: -26px;
  right: 16px;
  width: 88px;
  height: 88px;
  background: rgba(18, 16, 12, 0.95);
  border: 1px solid rgba(184, 115, 51, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.6),
    0 0 0 6px rgba(184, 115, 51, 0.07);
  animation: lhPulse 3s ease-in-out infinite;
}
@keyframes lhPulse {
  0%,
  100% {
    box-shadow:
      0 10px 36px rgba(0, 0, 0, 0.6),
      0 0 0 6px rgba(184, 115, 51, 0.07);
  }
  50% {
    box-shadow:
      0 10px 36px rgba(0, 0, 0, 0.6),
      0 0 0 10px rgba(184, 115, 51, 0.04),
      0 0 40px rgba(184, 115, 51, 0.12);
  }
}
.wow-lh-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lh-ring {
  animation: lhRing 2.2s var(--ease) 1s both;
  stroke-dasharray: 0 163;
}
@keyframes lhRing {
  to {
    stroke-dasharray: 150 163;
  }
}
.wow-lh-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.wow-lh-val {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--cream);
  line-height: 1;
  letter-spacing: -0.02em;
}
.wow-lh-sub {
  font-family: var(--mono);
  font-size: 0.4rem;
  color: var(--olive2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}
.wow-git-status {
  position: absolute;
  bottom: -24px;
  left: 14px;
  background: rgba(18, 16, 12, 0.92);
  border: 1px solid rgba(138, 148, 99, 0.22);
  border-radius: 10px;
  padding: 10px 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 12;
  min-width: 186px;
  animation: wow-float2 7s ease-in-out infinite 2s;
}
.wgs-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.wgs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: blink 2s ease-in-out infinite;
}
.wgs-branch {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: rgba(138, 148, 99, 0.85);
  font-weight: 700;
}
.wgs-sep {
  color: rgba(200, 196, 180, 0.2);
  font-size: 0.62rem;
}
.wgs-sha {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: rgba(200, 196, 180, 0.35);
}
.wgs-msg {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: rgba(237, 233, 220, 0.78);
  margin-bottom: 4px;
}
.wgs-meta {
  font-family: var(--mono);
  font-size: 0.52rem;
  color: rgba(200, 196, 180, 0.3);
  letter-spacing: 0.04em;
}
.wow-status-pill {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 16, 12, 0.9);
  border: 1px solid rgba(138, 148, 99, 0.25);
  border-radius: 20px;
  padding: 7px 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  z-index: 14;
  white-space: nowrap;
  animation: wow-float1 5s ease-in-out infinite 0.5s;
}
.wsp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
  animation: blink 2s ease-in-out infinite;
}
.wsp-txt {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: rgba(200, 196, 180, 0.8);
  letter-spacing: 0.1em;
}
.wow-exp-badge {
  position: absolute;
  top: 0;
  right: -70px;
  background: rgba(18, 16, 12, 0.9);
  border: 1px solid rgba(200, 196, 180, 0.13);
  border-radius: 12px;
  padding: 12px 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  z-index: 12;
  text-align: center;
  animation: wow-float1 4.5s ease-in-out infinite 1s;
}
.web-val {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--olive2);
  line-height: 1;
}
.web-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.52rem;
  color: rgba(200, 196, 180, 0.5);
  letter-spacing: 0.08em;
  margin-top: 3px;
  white-space: nowrap;
}
.wow-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wr1 {
  width: 430px;
  height: 430px;
  border-color: rgba(200, 196, 180, 0.04);
  animation: wowSpin 32s linear infinite;
}
.wr2 {
  width: 340px;
  height: 340px;
  border-color: rgba(92, 99, 64, 0.06);
  animation: wowSpin 22s linear infinite reverse;
}
.wr3 {
  width: 520px;
  height: 520px;
  border-color: rgba(200, 196, 180, 0.02);
  border-style: dashed;
  animation: wowSpin 48s linear infinite;
}
@keyframes wowSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.wow-glow-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(92, 99, 64, 0.1) 0%,
    rgba(184, 115, 51, 0.05) 40%,
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
  animation: wowGlowPulse 6s ease-in-out infinite;
}
@keyframes wowGlowPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* =============================================
   7. MARQUEE STRIP
============================================= */
.marquee-strip {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--gborder);
  border-bottom: 1px solid var(--gborder);
  padding: 14px 0;
  background: rgba(27, 25, 20, 0.5);
  backdrop-filter: blur(8px);
}
.marquee-track {
  display: flex;
  gap: 0;
  animation: mrq 25s linear infinite;
  white-space: nowrap;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.marquee-item {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--stone);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.marquee-item .mi-dot {
  color: var(--amber);
  font-size: 0.4rem;
}
@keyframes mrq {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* =============================================
   8. BLUR QUOTE — déplacée après les tabs
============================================= */
.blur-quote-sec {
  position: relative;
  z-index: 2;
  padding: 70px 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(27, 25, 20, 0.3);
  border-top: 1px solid var(--gborder);
  border-bottom: 1px solid var(--gborder);
  cursor: pointer;
}
.blur-quote-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(92, 99, 64, 0.04) 0%,
    transparent 50%,
    rgba(184, 115, 51, 0.03) 100%
  );
  pointer-events: none;
}
.blur-quote {
  max-width: 900px;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.blur-quote p {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(237, 233, 220, 0.9);
  letter-spacing: -0.02em;
  padding-bottom: 2rem;
}
.blur-quote cite {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--olive2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 500;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.blur-quote cite.animate {
  opacity: 1;
}
.blur-quote .bw {
  display: inline;
  will-change: opacity, filter;
  opacity: 0;
}
.blur-quote .bw.animate {
  opacity: 1;
  filter: blur(0px) !important;
}
.bq-accent {
  color: var(--amber);
  font-style: italic;
}

/* =============================================
   9. TABS / ONGLETS
============================================= */
.tabs-sec {
  position: relative;
  z-index: 2;
  padding: 0 52px 120px;
}
.tabs-bar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--gborder);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky;
  top: var(--nav-h, 66px);
  z-index: 100;
  background: rgba(27, 25, 20, 0.9);
  backdrop-filter: blur(22px);
  margin-left: -52px;
  margin-right: -52px;
  padding-left: 52px;
  padding-right: 52px;
  margin-bottom: 64px;
  transition: top 0.4s var(--ease);
}
.tabs-bar::-webkit-scrollbar {
  display: none;
}
.tab-btn {
  flex-shrink: 0;
  position: relative;
  padding: 20px 0;
  margin-right: 36px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--stone);
  letter-spacing: 0.05em;
  cursor: none;
  transition: color 0.3s;
  white-space: nowrap;
}
.tab-btn::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.tab-btn.active {
  color: var(--cream);
}
.tab-btn.active::after {
  transform: scaleX(1);
}
.tab-btn:hover {
  color: var(--cream);
}
.tab-num {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--olive2);
  margin-right: 7px;
}
.tab-pane {
  display: none;
  animation: fadeSlide 0.5s var(--ease);
}
.tab-pane.active {
  display: block;
}
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section headers */
.sec-hd {
  margin-bottom: 52px;
}
.sec-ey {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}
.sec-ey::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--amber);
}
.sec-ey span {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--olive2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sec-ttl {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  color: var(--cream);
  line-height: 1.05;
  letter-spacing: -0.022em;
}
.sec-ttl em {
  color: var(--amber);
  font-style: italic;
}
.sec-desc {
  margin-top: 13px;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--sand);
  line-height: 1.72;
  max-width: 500px;
}

/* =============================================
   10. CARDS PROJETS
============================================= */
.stack-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 56px;
}
.pill {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  padding: 8px 15px;
  border-radius: 3px;
  border: 1px solid var(--gborder);
  background: var(--gb);
  color: var(--sand);
  backdrop-filter: blur(6px);
  transition: all 0.35s var(--ease);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(92, 99, 64, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.pill:hover {
  border-color: var(--olive2);
  color: var(--olive2);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 18px rgba(92, 99, 64, 0.2);
}
.pill:hover::after {
  opacity: 1;
}
.pill.acc {
  border-color: rgba(184, 115, 51, 0.35);
  color: var(--amber);
}
.pill.acc:hover {
  border-color: var(--amber);
  box-shadow: 0 6px 18px rgba(184, 115, 51, 0.2);
}
.cgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 22px;
}
.cgrid.labs {
  grid-template-columns: repeat(3, 1fr);
}
.card {
  background: rgba(27, 25, 20, 0.22);
  border: 1px solid rgba(200, 196, 180, 0.13);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition:
    transform 0.45s var(--ease),
    border-color 0.3s,
    box-shadow 0.4s;
  position: relative;
  cursor: none;
  box-shadow:
    0 4px 24px rgba(27, 25, 20, 0.3),
    inset 0 1px 0 rgba(237, 233, 220, 0.05);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(92, 99, 64, 0.06) 0%,
    transparent 60%,
    rgba(184, 115, 51, 0.04) 100%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 1;
}
.card:hover {
  transform: translateY(-8px);
  border-color: rgba(200, 196, 180, 0.28);
  box-shadow:
    0 28px 64px rgba(27, 25, 20, 0.55),
    inset 0 1px 0 rgba(237, 233, 220, 0.1);
}
.card:hover::before {
  opacity: 1;
}
.cimg {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cimg.r169 {
  aspect-ratio: 16/9;
}
.cimg.r43 {
  aspect-ratio: 4/3;
}
.cimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
  filter: brightness(0.92) saturate(0.95);
}
.card:hover .cimg img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1);
}
.cimg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(27, 25, 20, 0.75) 0%,
    transparent 55%
  );
  pointer-events: none;
}
.cbody {
  padding: 22px;
  position: relative;
  z-index: 2;
}
.ctag {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--olive2);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ctag::before {
  content: "";
  width: 10px;
  height: 1px;
  background: var(--olive2);
}
.cttl {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 9px;
  letter-spacing: -0.01em;
}
.cdesc {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--sand);
  line-height: 1.68;
  margin-bottom: 17px;
}
.cchips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.chip {
  font-family: var(--mono);
  font-size: 0.58rem;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid rgba(200, 196, 180, 0.1);
  color: var(--stone);
  background: rgba(200, 196, 180, 0.04);
}

/* =============================================
   AVIS CLIENTS (nouveau)
============================================= */
.client-review {
  margin-top: 16px;
  margin-bottom: 4px;
  background: rgba(92, 99, 64, 0.06);
  border: 1px solid rgba(92, 99, 64, 0.2);
  border-left: 2px solid var(--olive2);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  position: relative;
}
.cr-stars {
  font-size: 0.75rem;
  color: #f2c84b;
  letter-spacing: 1px;
  margin-bottom: 7px;
  display: block;
}
.cr-text {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--sand);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 9px;
  display: block;
}
.cr-author {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cr-name {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--olive2);
  letter-spacing: 0.1em;
  font-weight: 500;
}
.cr-role {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--stone);
  letter-spacing: 0.08em;
}
.cr-role::before {
  content: "·";
  margin-right: 5px;
  opacity: 0.4;
}

/* =============================================
   GRILLE DESTRUCTURÉE
============================================= */
.destruct-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
  margin-bottom: 0;
}
.dc {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(27, 25, 20, 0.18);
  border: 1px solid rgba(200, 196, 180, 0.12);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: none;
  transition:
    transform 0.5s var(--ease),
    border-color 0.35s,
    box-shadow 0.5s;
  box-shadow:
    0 4px 24px rgba(27, 25, 20, 0.28),
    inset 0 1px 0 rgba(237, 233, 220, 0.05);
}
.dc:hover {
  transform: translateY(-7px);
  border-color: rgba(200, 196, 180, 0.26);
  box-shadow:
    0 28px 72px rgba(27, 25, 20, 0.55),
    inset 0 1px 0 rgba(237, 233, 220, 0.1);
}
.dc-main {
  grid-column: 1;
  grid-row: 1/3;
}
.dc-side {
  grid-column: 2;
  grid-row: 1;
}
.dc-bottom {
  grid-column: 2;
  grid-row: 2;
}
.dc-img {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.dc-main .dc-img,
.dc-img-top,
.dc-img-land {
  aspect-ratio: 14/9;
  height: auto;
}
.dc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.9s var(--ease),
    filter 0.5s;
  filter: brightness(0.85) saturate(0.92);
  object-position: top center;
  will-change: transform;
}
.dc-main:hover .dc-img img {
  transform: scale(1.08);
  filter: brightness(0.98) saturate(1.06);
  object-position: bottom center;
}
.dc-side:hover .dc-img img,
.dc-bottom:hover .dc-img img {
  transform: scale(1.12);
  filter: brightness(0.98) saturate(1.05);
}
.dc-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(27, 25, 20, 0.9) 0%,
    rgba(27, 25, 20, 0.15) 55%,
    transparent 100%
  );
}
.dc-body {
  padding: 20px 22px 22px;
  position: relative;
  z-index: 2;
}
.dc-body-horiz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.dc-num {
  font-family: var(--mono);
  font-size: 0.56rem;
  color: rgba(138, 148, 99, 0.55);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dc-tag {
  font-family: var(--mono);
  font-size: 0.57rem;
  color: var(--olive2);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.dc-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.dc-title em {
  color: var(--amber);
  font-style: italic;
}
.dc-desc {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--sand);
  line-height: 1.65;
  margin-bottom: 14px;
}
.dc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}
.dc-chip {
  font-family: var(--mono);
  font-size: 0.57rem;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(200, 196, 180, 0.1);
  color: var(--stone);
  background: rgba(200, 196, 180, 0.04);
  transition: all 0.3s;
}
.dc-chip.hi {
  border-color: rgba(184, 115, 51, 0.28);
  color: var(--amber);
}
.dc-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dc-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.61rem;
  color: var(--olive2);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    gap 0.3s,
    color 0.3s;
}
.dc-link:hover {
  color: var(--amber);
  gap: 12px;
}
.dc-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.3;
  top: -60px;
  right: -60px;
  transition: opacity 0.5s;
}
.dc:hover .dc-glow {
  opacity: 0.5;
}
.dc-glow-amber {
  background: radial-gradient(circle, rgba(184, 115, 51, 0.6), transparent 70%);
}
.dc-glow-olive {
  background: radial-gradient(circle, rgba(92, 99, 64, 0.7), transparent 70%);
}
.dc-glow-stone {
  background: radial-gradient(
    circle,
    rgba(154, 148, 136, 0.5),
    transparent 70%
  );
}

/* SLIDESHOW */
.dc-slideshow {
  position: relative;
  overflow: hidden;
}
.dc-slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.dc-slideshow .slide.active {
  opacity: 1;
  position: relative;
}
.dc-slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85) saturate(0.92);
}
.slide-dots {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 10;
  display: flex;
  gap: 5px;
}
.slide-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(237, 233, 220, 0.35);
  transition:
    background 0.3s,
    transform 0.3s;
  cursor: pointer;
}
.slide-dot.active {
  background: var(--amber);
  transform: scale(1.3);
}

/* CINÉ DÉLICES CARD */
.cd-card {
  background: rgba(27, 25, 20, 0.22);
  border-color: rgba(196, 160, 82, 0.22) !important;
  overflow: hidden;
}
.cd-card:hover {
  border-color: rgba(196, 160, 82, 0.55) !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(196, 160, 82, 0.15),
    inset 0 1px 0 rgba(196, 160, 82, 0.12) !important;
}
.cd-pellicule {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 10;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(196, 160, 82, 0.15) 10%,
    rgba(196, 160, 82, 0.65) 35%,
    rgba(196, 160, 82, 0.85) 50%,
    rgba(196, 160, 82, 0.65) 65%,
    rgba(196, 160, 82, 0.15) 90%,
    transparent 100%
  );
  border-radius: 20px 0 0 20px;
}
.cd-shimmer-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196, 160, 82, 0.6) 20%,
    rgba(242, 200, 75, 0.95) 50%,
    rgba(196, 160, 82, 0.6) 80%,
    transparent 100%
  );
  z-index: 10;
  animation: cdShimmer 3s ease-in-out infinite;
}
@keyframes cdShimmer {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}
.cd-badge-phare {
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: 20;
  background: var(--cd-gold-shimmer);
  color: #1c1404;
  font-family: "Cinzel", serif;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 3px;
  box-shadow:
    0 4px 16px rgba(196, 160, 82, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cd-img-zone {
  position: relative;
}
.cd-overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(27, 25, 20, 0.85), transparent);
  z-index: 2;
  pointer-events: none;
}
.cd-img-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 18px;
  z-index: 5;
  background: linear-gradient(
    to top,
    rgba(27, 25, 20, 0.95) 0%,
    rgba(27, 25, 20, 0.7) 60%,
    transparent 100%
  );
}
.cd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 18px;
}
.cd-stat-v {
  font-family: "Bebas Neue", cursive;
  font-size: 1.2rem;
  background: var(--cd-gold-shimmer);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: 0.06em;
}
.cd-stat-l {
  font-family: "Cinzel", serif;
  font-size: 0.38rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(196, 160, 82, 0.5);
  margin-top: 2px;
}
.cd-stat-sep {
  width: 1px;
  height: 28px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(196, 160, 82, 0.3),
    transparent
  );
}
.cd-body {
  padding: 16px 20px 18px 22px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cd-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cd-eyebrow-line {
  flex-shrink: 0;
  width: 18px;
  height: 1px;
  background: rgba(196, 160, 82, 0.45);
}
.cd-eyebrow-txt {
  font-family: "Cinzel", serif;
  font-size: 0.48rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 160, 82, 0.6);
}
.cd-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: -2px 0;
}
.cd-pretitle {
  font-family: "Cinzel", serif;
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(196, 160, 82, 0.35);
  margin-bottom: 1px;
}
.cd-title-main {
  font-family: "Bebas Neue", cursive;
  font-size: 2.2rem;
  letter-spacing: 0.08em;
  color: rgba(232, 232, 232, 0.88);
  line-height: 0.95;
}
.cd-title-gold {
  background: var(--cd-gold-shimmer);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cd-desc {
  font-size: 0.76rem;
  line-height: 1.65;
  color: rgba(232, 232, 232, 0.55);
  font-family: var(--sans);
}
.cd-stack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cd-stack-label {
  font-family: "Cinzel", serif;
  font-size: 0.44rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 160, 82, 0.4);
  margin-bottom: 6px;
}
.cd-stack-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cd-chip {
  font-family: var(--mono);
  font-size: 0.55rem;
  padding: 3px 9px;
  border-radius: 3px;
  font-weight: 500;
}
.cd-chip.fe {
  background: rgba(196, 160, 82, 0.08);
  border: 1px solid rgba(196, 160, 82, 0.28);
  color: rgba(196, 160, 82, 0.85);
}
.cd-chip.be {
  background: rgba(194, 48, 24, 0.08);
  border: 1px solid rgba(194, 48, 24, 0.28);
  color: rgba(232, 100, 80, 0.8);
}
.cd-chip.tool {
  background: rgba(65, 90, 119, 0.2);
  border: 1px solid rgba(65, 90, 119, 0.4);
  color: rgba(232, 232, 232, 0.5);
}
.cd-typo-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(196, 160, 82, 0.08);
}
.cd-typo-item {
  font-family: var(--mono);
  font-size: 0.52rem;
  color: rgba(196, 160, 82, 0.45);
  letter-spacing: 0.06em;
}
.cd-typo-dot {
  color: rgba(196, 160, 82, 0.2);
  font-size: 0.6rem;
  margin: 0 2px;
}
.cd-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cd-btn-voir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  border-radius: 4px;
  background: var(--cd-gold-shimmer);
  color: #1c1404;
  font-family: "Cinzel", serif;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s var(--ease);
  box-shadow:
    0 2px 12px rgba(184, 136, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.cd-btn-voir:hover {
  filter: brightness(1.12);
  box-shadow: 0 6px 22px rgba(212, 168, 67, 0.42);
  transform: translateY(-1px);
}
.cd-glow-corner {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(196, 160, 82, 0.25),
    transparent 65%
  );
  filter: blur(30px);
  pointer-events: none;
  transition: opacity 0.5s;
}
.cd-card:hover .cd-glow-corner {
  opacity: 1.5;
}
.cd-moodboard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(200, 196, 180, 0.03);
  border: 1px solid rgba(200, 196, 180, 0.08);
  margin-top: 2px;
}
.cd-mb-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cd-mb-row--palette {
  flex-wrap: wrap;
  gap: 6px;
}
.cd-mb-label {
  font-family: var(--mono);
  font-size: 0.38rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive2);
  flex-shrink: 0;
}
.cd-mb-swatches {
  display: flex;
  gap: 4px;
  align-items: center;
}
.cd-mb-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.cd-mb-swatch--gold {
  width: 20px;
}
.cd-mb-swatch:hover {
  transform: scale(1.3);
}
.cd-mb-typos {
  display: flex;
  gap: 5px;
  margin-left: 4px;
}
.cd-mb-typo-bb {
  font-family: "Bebas Neue", cursive;
  font-size: 0.78rem;
  color: rgba(196, 160, 82, 0.55);
  line-height: 1;
  letter-spacing: 0.04em;
}
.cd-mb-typo-cz {
  font-family: "Cinzel", serif;
  font-size: 0.58rem;
  color: rgba(196, 160, 82, 0.45);
}
.cd-mb-typo-pf {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.65rem;
  color: rgba(232, 232, 232, 0.35);
}
.cd-mb-typo-la {
  font-family: "Lato", sans-serif;
  font-size: 0.62rem;
  font-weight: 300;
  color: rgba(232, 232, 232, 0.3);
}
.cd-mb-row--badges {
  flex-wrap: wrap;
  gap: 5px;
}
.cd-mb-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.cd-mb-badge--genre {
  background: rgba(27, 38, 59, 0.7);
  border-color: rgba(196, 160, 82, 0.35);
  color: rgba(196, 160, 82, 0.8);
}
.cd-mb-badge--rouge {
  background: rgba(194, 48, 24, 0.12);
  border-color: rgba(194, 48, 24, 0.4);
  color: rgba(232, 100, 80, 0.85);
}
.cd-mb-badge--bleu {
  background: rgba(14, 24, 52, 0.6);
  border-color: rgba(80, 120, 200, 0.32);
  color: rgba(140, 175, 235, 0.85);
}
.cd-mb-badge--info {
  background: rgba(65, 90, 119, 0.18);
  border-color: rgba(65, 90, 119, 0.32);
  color: rgba(232, 232, 232, 0.5);
}
.cd-mb-stars {
  font-size: 0.72rem;
  color: rgba(242, 200, 75, 0.75);
  letter-spacing: 1px;
  margin-left: 4px;
}
.cd-mb-star-e {
  color: rgba(196, 160, 82, 0.2);
}
.cd-mb-rating {
  font-family: var(--serif);
  font-size: 0.65rem;
  color: rgba(232, 232, 232, 0.5);
}
.cd-mb-row--metrics {
  gap: 0;
}
.cd-mb-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 5px;
  border-right: 1px solid rgba(200, 196, 180, 0.07);
}
.cd-mb-metric:last-child {
  border-right: none;
}
.cd-mb-metric-v {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--amber);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.cd-mb-metric-l {
  font-family: var(--mono);
  font-size: 0.36rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 1px;
  opacity: 0.6;
}
.cd-mb-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(200, 196, 180, 0.07);
  flex-shrink: 0;
}

/* =============================================
   11. SECTION DESIGN / CMS / CV
============================================= */
.tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 56px;
}
.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--gb);
  border: 1px solid var(--gborder);
  border-radius: 12px;
  padding: 18px 16px;
  transition: all 0.35s var(--ease);
  cursor: default;
  min-width: 82px;
}
.tech-item:hover {
  border-color: var(--gborderh);
  transform: translateY(-4px);
  background: var(--gbh);
}
.tech-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-family: var(--mono);
  font-weight: 500;
}
.tech-name {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--stone);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.ti-ps {
  background: #001e36;
  color: #31a8ff;
  border: 1px solid rgba(49, 168, 255, 0.3);
}
.ti-ai {
  background: #300;
  color: #ff9a00;
  border: 1px solid rgba(255, 154, 0, 0.3);
}
.ti-id {
  background: #1a003b;
  color: #ff3366;
  border: 1px solid rgba(255, 51, 102, 0.3);
}
.ti-ae {
  background: #00005b;
  color: #9999ff;
  border: 1px solid rgba(153, 153, 255, 0.3);
}
.ti-xd {
  background: #2b001f;
  color: #ff61f6;
  border: 1px solid rgba(255, 97, 246, 0.3);
}
.ti-lr {
  background: #001a35;
  color: #31c5f0;
  border: 1px solid rgba(49, 197, 240, 0.3);
}
.ti-fg {
  background: #0d1117;
  color: #f0f0f0;
  border: 1px solid rgba(240, 240, 240, 0.15);
}
.ti-sk {
  background: #c7b299;
  color: #f7a300;
  border: 1px solid rgba(247, 163, 0, 0.3);
}

/* ── IA Tech Icons dans CV ── */
.ti-claude {
  background: rgba(204, 120, 92, 0.1);
  border: 1px solid rgba(204, 120, 92, 0.35);
}
.ti-gpt {
  background: rgba(16, 163, 127, 0.1);
  border: 1px solid rgba(16, 163, 127, 0.35);
}
.ti-cursor {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.35);
}
.ti-gai {
  background: rgba(66, 133, 244, 0.1);
  border: 1px solid rgba(66, 133, 244, 0.35);
}
.ti-mj {
  background: rgba(108, 92, 231, 0.1);
  border: 1px solid rgba(108, 92, 231, 0.35);
}
.ti-veo {
  background: rgba(26, 115, 232, 0.1);
  border: 1px solid rgba(26, 115, 232, 0.35);
}
.ti-kling {
  background: rgba(255, 76, 139, 0.1);
  border: 1px solid rgba(255, 76, 139, 0.35);
}

/* Badge sous les icônes IA */
.ia-badge-sq {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  margin-top: 4px;
}
.ia-badge-sq.ia-badge-pro {
  background: rgba(184, 115, 51, 0.15);
  border: 1px solid rgba(184, 115, 51, 0.4);
  color: var(--amber);
}
.ia-badge-sq.ia-badge-dev {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}
.ia-badge-sq.ia-badge-lab {
  background: rgba(92, 99, 64, 0.15);
  border: 1px solid rgba(92, 99, 64, 0.4);
  color: var(--olive2);
}

/* Tooltip sur les icônes IA */
.ia-tech-item {
  position: relative;
}
.ia-tech-item::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(20, 18, 12, 0.97);
  border: 1px solid var(--gborder);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--sand);
  line-height: 1.5;
  padding: 10px 14px;
  width: 220px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.ia-tech-item:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
}
.gal-it {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--gborder);
  position: relative;
  background: rgba(27, 25, 20, 0.4);
  backdrop-filter: blur(8px);
  transition: all 0.4s var(--ease);
  cursor: none;
}
.gal-it:hover {
  transform: scale(1.022);
  border-color: var(--gborderh);
  z-index: 2;
}
.gal-it.wide {
  grid-column: span 2;
}
.gal-it img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.gal-it:hover img {
  transform: scale(1.06);
}
.gal-lbl {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(27, 25, 20, 0.88), transparent);
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--stone);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.exp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
  align-items: start;
}
.exp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.exp-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--gborder);
  transition: padding-left 0.3s;
}
.exp-item:last-child {
  border-bottom: none;
}
.exp-item:hover {
  padding-left: 7px;
}
.exp-num {
  font-family: var(--mono);
  font-size: 0.59rem;
  color: var(--olive2);
  letter-spacing: 0.1em;
  padding-top: 2px;
  flex-shrink: 0;
}
.exp-tx {
  font-family: var(--sans);
  font-size: 0.84rem;
  color: var(--sand);
  line-height: 1.55;
}
.exp-tx strong {
  color: var(--cream);
  display: block;
  margin-bottom: 1px;
}
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.stat {
  background: var(--gb);
  border: 1px solid var(--gborder);
  border-radius: 12px;
  padding: 22px;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s;
}
.stat:hover {
  border-color: var(--gborderh);
}
.stat-v {
  font-family: var(--serif);
  font-size: 2.3rem;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 5px;
}
.stat-l {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--stone);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
}
.cv-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 64px;
}
.cv-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.cv-photo {
  width: 180px;
  height: 220px;
  border-radius: 14px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--gborder);
  box-shadow: 0 16px 48px rgba(27, 25, 20, 0.5);
  transition: box-shadow 0.4s;
}
.cv-photo:hover {
  box-shadow: 0 24px 64px rgba(27, 25, 20, 0.7);
}
.cv-badge {
  background: var(--gb);
  border: 1px solid var(--gborder);
  border-radius: 8px;
  padding: 12px 18px;
  text-align: center;
}
.cv-badge-status {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--olive2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cv-badge-val {
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--cream);
}
.cv-badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  margin-right: 6px;
  animation: blink 2s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.cv-main {
  min-width: 0;
}
.cv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.cv-ttl {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--olive2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cv-ttl::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--olive2);
}
.tl {
  display: flex;
  flex-direction: column;
}
.tl-item {
  display: grid;
  grid-template-columns: 1px 1fr;
  gap: 0 22px;
  position: relative;
}
.tl-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, var(--olive2), transparent);
}
.tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dark);
  border: 1.5px solid var(--olive2);
  position: absolute;
  left: -4px;
  top: 5px;
  z-index: 1;
}
.tl-ct {
  padding-bottom: 28px;
}
.tl-per {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--stone);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.tl-role {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 3px;
}
.tl-role em {
  color: var(--amber);
  font-style: italic;
}
.tl-org {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--olive2);
  margin-bottom: 6px;
  font-weight: 600;
}
.tl-desc {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--stone);
  line-height: 1.6;
}
.tools-c {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.toolp {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--gb);
  border: 1px solid var(--gborder);
  border-radius: 5px;
  padding: 9px 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--sand);
  letter-spacing: 0.08em;
  backdrop-filter: blur(6px);
  transition: all 0.35s var(--ease);
}
.toolp:hover {
  border-color: var(--olive2);
  color: var(--olive2);
  transform: translateY(-2px);
}
.fc-cards {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 6px;
}
.fc-card {
  background: var(--gb);
  border: 1px solid var(--gborder);
  border-radius: 10px;
  padding: 17px 20px;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s;
}
.fc-card:hover {
  border-color: var(--gborderh);
}
.fc-yr {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--olive2);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.fc-deg {
  font-family: var(--serif);
  font-size: 0.96rem;
  color: var(--cream);
  margin-bottom: 3px;
}
.fc-sch {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--stone);
}
.sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 13px;
  margin-bottom: 56px;
}
.sk-card {
  background: var(--gb);
  border: 1px solid var(--gborder);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(12px);
  transition: all 0.4s var(--ease);
}
.sk-card:hover {
  border-color: rgba(92, 99, 64, 0.38);
  transform: translateY(-4px);
  background: var(--gbh);
}
.sk-ico {
  font-size: 1.3rem;
  margin-bottom: 12px;
  display: block;
}
.sk-name {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 7px;
}
.sk-desc {
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--stone);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.cv-selector {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.cv-sel-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid var(--gborder);
  background: var(--gb);
  color: var(--stone);
  cursor: none;
  transition: all 0.35s var(--ease);
  text-decoration: none;
  backdrop-filter: blur(8px);
}
.cv-sel-btn:hover,
.cv-sel-btn.active {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(184, 115, 51, 0.08);
  box-shadow: 0 4px 16px rgba(184, 115, 51, 0.15);
  transform: translateY(-2px);
}
.cv-sel-btn .cv-sel-icon {
  font-size: 0.9rem;
}
.cv-sel-label-sub {
  font-family: var(--mono);
  font-size: 0.52rem;
  color: var(--stone);
  letter-spacing: 0.06em;
  display: block;
  margin-top: 2px;
  font-weight: 400;
}

/* =============================================
   12. ORGANIC BANNIÈRE + FOOTER
============================================= */
.organic-sec {
  position: relative;
  z-index: 2;
  padding: 36px 52px;
  overflow: hidden;
}
.organic-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 120% at 10% 50%,
      rgba(60, 74, 34, 0.78) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 120% at 90% 50%,
      rgba(52, 65, 28, 0.7) 0%,
      transparent 55%
    ),
    linear-gradient(
      170deg,
      rgba(52, 65, 28, 0.9) 0%,
      rgba(62, 78, 32, 0.92) 100%
    );
  pointer-events: none;
}
.organic-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.018) 10px,
    rgba(255, 255, 255, 0.018) 11px
  );
  pointer-events: none;
}
.organic-bg::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(138, 148, 99, 0.14),
    transparent 70%
  );
  top: -80px;
  right: 10%;
  pointer-events: none;
  animation: orgpulse 8s ease-in-out infinite;
}
@keyframes orgpulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}
.organic-banner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 2;
}
.org-banner-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(237, 233, 220, 0.06);
  border: 1px solid rgba(237, 233, 220, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 22px 28px;
  box-shadow:
    0 1px 0 rgba(237, 233, 220, 0.06) inset,
    0 16px 48px rgba(10, 16, 5, 0.35);
  transition:
    border-color 0.4s,
    background 0.4s;
}
.org-banner-card:hover {
  border-color: rgba(237, 233, 220, 0.22);
  background: rgba(237, 233, 220, 0.09);
}
.org-banner-ico {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(92, 99, 64, 0.28);
  border: 1px solid rgba(138, 148, 99, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition:
    transform 0.4s var(--ease2),
    background 0.4s;
}
.org-banner-card:hover .org-banner-ico {
  transform: rotate(-8deg) scale(1.08);
  background: rgba(92, 99, 64, 0.44);
}
.org-banner-text {
  flex: 1;
}
.org-banner-eyebrow {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: rgba(138, 148, 99, 0.75);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.org-banner-eyebrow::before {
  content: "✦";
  font-size: 0.4rem;
  color: rgba(184, 115, 51, 0.6);
}
.org-banner-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: rgba(237, 233, 220, 0.88);
  line-height: 1.2;
}
.org-banner-title em {
  color: rgba(184, 115, 51, 0.82);
  font-style: italic;
}
.org-banner-sub {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: rgba(200, 196, 180, 0.48);
  margin-top: 3px;
  line-height: 1.5;
}
.org-banner-sep {
  width: 1px;
  height: 44px;
  flex-shrink: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(237, 233, 220, 0.12),
    transparent
  );
}
.org-banner-stats {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
  align-items: center;
}
.org-bstat-v {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: rgba(237, 233, 220, 0.88);
  display: block;
  line-height: 1;
}
.org-bstat-v em {
  color: rgba(184, 115, 51, 0.8);
  font-style: italic;
}
.org-bstat-l {
  font-family: var(--mono);
  font-size: 0.52rem;
  color: rgba(138, 148, 99, 0.6);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
  display: block;
}
.org-banner-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.59rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 196, 180, 0.65);
  background: rgba(92, 99, 64, 0.18);
  border: 1px solid rgba(138, 148, 99, 0.2);
  border-radius: 20px;
  padding: 8px 16px;
  transition: all 0.35s;
}
.org-banner-badge:hover {
  background: rgba(92, 99, 64, 0.3);
  border-color: rgba(138, 148, 99, 0.38);
  color: rgba(237, 233, 220, 0.9);
}
.org-dispo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(138, 148, 99, 0.85);
  animation: dispopulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dispopulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(138, 148, 99, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(138, 148, 99, 0);
  }
}
.cta-recruiter {
  position: relative;
  z-index: 2;
  padding: 80px 52px;
  text-align: center;
  border-top: 1px solid var(--gborder);
}
.cta-recruiter-inner {
  max-width: 700px;
  margin: 0 auto;
}
.cta-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.cta-eyebrow-line {
  width: 28px;
  height: 1px;
  background: var(--amber);
}
.cta-eyebrow-txt {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--olive2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cta-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--cream);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}
.cta-title em {
  color: var(--amber);
}
.cta-desc {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--sand);
  line-height: 1.75;
  max-width: 500px;
  margin: 0 auto 40px;
}
.cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-dispo {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--stone);
  letter-spacing: 0.1em;
}
footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--gborder);
  padding: 52px 52px 34px;
}
.ft-in {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 52px;
}
.ft-name {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--cream);
  line-height: 1;
  margin-bottom: 11px;
}
.ft-name em {
  color: var(--amber);
  font-style: italic;
}
.ft-tag {
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--stone);
  letter-spacing: 0.1em;
  line-height: 1.75;
}
.ft-loc {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--stone);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ft-loc::before {
  content: "◉";
  color: var(--olive2);
  font-size: 0.48rem;
}
.ft-col-t {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--olive2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 17px;
}
.ft-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ft-links a {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--stone);
  text-decoration: none;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ft-links a::before {
  content: "→";
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--olive2);
  transition: transform 0.3s;
}
.ft-links a:hover {
  color: var(--cream);
}
.ft-links a:hover::before {
  transform: translateX(3px);
}
.ft-socs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ft-soc {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  padding: 9px 13px;
  border: 1px solid var(--gborder);
  border-radius: 5px;
  background: var(--gb);
  backdrop-filter: blur(6px);
  transition: all 0.35s var(--ease);
}
.ft-soc:hover {
  border-color: var(--olive2);
  transform: translateX(4px);
}
.ft-soc .sp2 {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--olive2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ft-soc .sh {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cream);
}
.ft-bot {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid var(--gborder);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ft-copy,
.ft-made {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--stone);
  letter-spacing: 0.06em;
}
.ft-made em {
  color: var(--amber);
  font-style: normal;
}

/* =============================================
   13. MODALE PROJET
============================================= */
.proj-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(27, 25, 20, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.proj-modal-bg.open {
  opacity: 1;
  pointer-events: all;
}
.proj-modal {
  width: 100%;
  max-width: 700px;
  background: rgba(27, 25, 20, 0.72);
  border: 1px solid rgba(200, 196, 180, 0.22);
  border-radius: 20px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-shadow:
    0 40px 120px rgba(27, 25, 20, 0.8),
    inset 0 1px 0 rgba(237, 233, 220, 0.1);
  overflow: hidden;
  transform: translateY(28px) scale(0.97);
  transition: transform 0.5s var(--ease);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.proj-modal-bg.open .proj-modal {
  transform: translateY(0) scale(1);
}
.proj-modal-img {
  width: 100%;
  height: 260px;
  position: relative;
  overflow: hidden;
}
.proj-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8) saturate(0.85);
}
.proj-modal-img-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(27, 25, 20, 0.95) 0%,
    rgba(27, 25, 20, 0.1) 70%,
    transparent 100%
  );
}
.proj-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(27, 25, 20, 0.7);
  border: 1px solid rgba(200, 196, 180, 0.2);
  color: var(--stone);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: all 0.3s;
}
.proj-modal-close:hover {
  background: rgba(200, 196, 180, 0.15);
  color: var(--cream);
  border-color: var(--amber);
}
.proj-modal-body {
  padding: 28px 32px 32px;
}
.proj-modal-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--olive2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.proj-modal-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--olive2);
}
.proj-modal-title {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.proj-modal-title em {
  color: var(--amber);
  font-style: italic;
}
.proj-modal-desc {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--sand);
  line-height: 1.75;
  margin-bottom: 24px;
}
.proj-modal-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.proj-modal-stack-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--stone);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.proj-modal-stack-label::before {
  content: "◈";
  color: var(--amber);
  font-size: 0.55rem;
}
.proj-modal-stack-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.proj-modal-chip {
  font-family: var(--mono);
  font-size: 0.62rem;
  padding: 5px 12px;
  border-radius: 2px;
  border: 1px solid rgba(200, 196, 180, 0.12);
  color: var(--sand);
  background: rgba(200, 196, 180, 0.06);
  transition: all 0.3s;
}
.proj-modal-chip:hover {
  border-color: var(--olive2);
  color: var(--olive2);
}
.proj-modal-chip.fe {
  border-color: rgba(138, 148, 99, 0.3);
  color: var(--olive2);
}
.proj-modal-chip.be {
  border-color: rgba(184, 115, 51, 0.3);
  color: var(--amber);
}
.proj-modal-chip.db {
  border-color: rgba(139, 74, 46, 0.3);
  color: #d4845a;
}
.proj-modal-chip.tool {
  border-color: rgba(200, 196, 180, 0.15);
  color: var(--stone);
}
.proj-modal-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(200, 196, 180, 0.1);
}
.proj-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 24px;
  border-radius: 50px;
  border: none;
  transition: all 0.4s var(--ease);
  cursor: none;
}
.proj-modal-btn.primary {
  background: var(--olive);
  color: var(--cream);
}
.proj-modal-btn.primary:hover {
  background: var(--olive2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(92, 99, 64, 0.35);
}
.proj-modal-btn.ghost {
  background: rgba(237, 233, 220, 0.05);
  color: var(--cream);
  border: 1px solid rgba(200, 196, 180, 0.16);
}
.proj-modal-btn.ghost:hover {
  border-color: var(--amber);
  color: var(--amber);
  transform: translateY(-2px);
}
.modal-slideshow {
  position: relative;
  overflow: hidden;
}
.modal-slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.modal-slideshow .slide.active {
  opacity: 1;
  position: relative;
}
.modal-slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8) saturate(0.85);
}

/* =============================================
   14. ZOOM IMAGE
============================================= */
.img-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 8, 5, 0.92);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
  cursor: none;
}
.img-zoom-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.img-zoom-inner {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.92);
  transition: transform 0.5s var(--ease);
}
.img-zoom-overlay.open .img-zoom-inner {
  transform: scale(1);
}
.img-zoom-inner img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(200, 196, 180, 0.18);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
}
.img-zoom-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(237, 233, 220, 0.08);
  border: 1px solid rgba(200, 196, 180, 0.2);
  color: var(--cream);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: all 0.3s;
}
.img-zoom-close:hover {
  background: rgba(237, 233, 220, 0.15);
  border-color: var(--amber);
  color: var(--amber);
}
.img-zoom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(27, 25, 20, 0.7);
  border: 1px solid rgba(200, 196, 180, 0.2);
  color: var(--cream);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: all 0.3s;
  z-index: 2;
}
.img-zoom-nav:hover {
  background: rgba(200, 196, 180, 0.15);
  border-color: var(--amber);
  color: var(--amber);
}
.img-zoom-prev {
  left: -56px;
}
.img-zoom-next {
  right: -56px;
}
.img-zoom-caption {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: rgba(200, 196, 180, 0.45);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.img-zoom-counter {
  position: absolute;
  top: -38px;
  left: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: rgba(200, 196, 180, 0.35);
  letter-spacing: 0.12em;
}

/* =============================================
   15. TOOLTIP DESCRIPTION
============================================= */
.proj-desc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--stone);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gb);
  border: 1px solid var(--gborder);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: none;
  transition: all 0.3s;
  position: relative;
}
.proj-desc-btn:hover {
  border-color: var(--olive2);
  color: var(--olive2);
}
.proj-desc-btn .desc-icon {
  font-size: 0.7rem;
}
.proj-desc-popup {
  position: fixed;
  z-index: 9500;
  max-width: 440px;
  width: calc(100vw - 40px);
  background: rgba(22, 20, 16, 0.96);
  border: 1px solid rgba(200, 196, 180, 0.2);
  border-radius: 14px;
  backdrop-filter: blur(28px);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(237, 233, 220, 0.08);
  padding: 24px 26px 22px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.97);
  transition:
    opacity 0.3s var(--ease),
    transform 0.35s var(--ease);
}
.proj-desc-popup.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}
.proj-desc-popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.proj-desc-popup-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--cream);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.proj-desc-popup-title em {
  color: var(--amber);
  font-style: italic;
}
.proj-desc-popup-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(200, 196, 180, 0.07);
  border: 1px solid rgba(200, 196, 180, 0.15);
  color: var(--stone);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: all 0.3s;
}
.proj-desc-popup-close:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(184, 115, 51, 0.1);
}
.proj-desc-popup-tag {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--olive2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.proj-desc-popup-tag::before {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--olive2);
}
.proj-desc-popup-body {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--sand);
  line-height: 1.72;
  margin-bottom: 16px;
}
.proj-desc-popup-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.proj-desc-popup-features li {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--stone);
  letter-spacing: 0.04em;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.proj-desc-popup-features li::before {
  content: "→";
  color: var(--olive2);
  flex-shrink: 0;
}
.proj-desc-popup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 12px;
  border-top: 1px solid rgba(200, 196, 180, 0.08);
}
.proj-desc-popup-chip {
  font-family: var(--mono);
  font-size: 0.57rem;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid rgba(200, 196, 180, 0.1);
  color: var(--stone);
  background: rgba(200, 196, 180, 0.04);
}
.proj-desc-popup-chip.fe {
  border-color: rgba(138, 148, 99, 0.3);
  color: var(--olive2);
}
.proj-desc-popup-chip.be {
  border-color: rgba(184, 115, 51, 0.3);
  color: var(--amber);
}
.proj-desc-popup-chip.tool {
  border-color: rgba(200, 196, 180, 0.15);
  color: var(--stone);
}

/* =============================================
   16. REVEAL ANIMATIONS
============================================= */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.rv.vis {
  opacity: 1;
  transform: translateY(0);
}
.d1 {
  transition-delay: 0.08s;
}
.d2 {
  transition-delay: 0.18s;
}
.d3 {
  transition-delay: 0.28s;
}
.d4 {
  transition-delay: 0.38s;
}
.rv-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.rv-stagger.vis > *:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s;
}
.rv-stagger.vis > *:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}
.rv-stagger.vis > *:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: 0.19s;
}
.rv-stagger.vis > *:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: 0.26s;
}
.rv-stagger.vis > *:nth-child(5) {
  opacity: 1;
  transform: none;
  transition-delay: 0.33s;
}
.rv-stagger.vis > *:nth-child(6) {
  opacity: 1;
  transform: none;
  transition-delay: 0.4s;
}
.rv-stagger.vis > *:nth-child(7) {
  opacity: 1;
  transform: none;
  transition-delay: 0.47s;
}
.mw {
  max-width: 1200px;
  margin: 0 auto;
}
.sep {
  border: none;
  border-top: 1px solid var(--gborder);
  margin: 56px 0;
}
.mt0 {
  margin-top: 0;
}
/* =============================================================================
   STYLE-ADDITIONS.CSS — Sébastien Maurice · Portfolio 2026
   À AJOUTER à la fin de css/style.css

   Ce fichier contient tous les styles pour :
   1. Le bento grid webdesign (section "Interfaces & Maquettes")
   2. La galerie BENTO (section "Mockups & Créations")
   3. La lightbox plein écran pour zoomer sur les images

   Astuce O'Clock : on organise ses CSS en sections clairement séparées
   pour s'y retrouver facilement quand le projet grandit !
============================================================================= */

/* =============================================================================
   SECTION 1 — BENTO GRID WEBDESIGN
   Inspiré du style "bento box" d'Apple : une grille asymétrique où
   certaines cartes prennent plus de place que d'autres.

   On utilise CSS Grid avec des colonnes fractionnelles (fr) pour définir
   les proportions. La carte "hero" s'étire sur 2 lignes grâce à grid-row.
============================================================================= */

/*
  Conteneur principal du bento.
  3 colonnes : la gauche plus large (60%), les 2 autres se partagent le reste.
  2 lignes de 240px chacune.
*/
.wd-bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 12px;
  margin-bottom: 20px;
}

/* Carte hero : elle s'étale sur les 2 lignes (span 2 rows) */
.wd-hero {
  grid-row: 1 / 3;
}

/* Carte "wide" : s'étale sur 2 colonnes en bas à droite */
.wd-wide {
  grid-column: span 2;
}

/* Carte "full" : prend toute la largeur sur une 3e ligne */
.wd-full {
  grid-column: 1 / -1; /* -1 = jusqu'à la dernière colonne */
  height: 220px;
}

/* Chaque carte individuelle du bento */
.wd-bento-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--gborder);
  background: rgba(27, 25, 20, 0.5);
  cursor: zoom-in;
  transition:
    transform 0.4s var(--ease),
    border-color 0.3s,
    box-shadow 0.4s;
}

.wd-bento-item:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 196, 180, 0.3);
  box-shadow: 0 20px 60px rgba(8, 6, 3, 0.55);
  z-index: 2;
}

/* L'image couvre toute la carte sans déformation */
.wd-bento-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition:
    transform 0.55s var(--ease),
    filter 0.4s;
  filter: brightness(0.85) saturate(0.85);
}

.wd-bento-item:hover > img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1);
}

/*
  Overlay avec dégradé noir en bas de chaque carte.
  Contient les tags de catégorie (en haut) et le titre du projet (en bas).
*/
.wd-bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 6, 3, 0.88) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  transition: background 0.35s;
}

.wd-bento-item:hover .wd-bento-overlay {
  background: linear-gradient(to top, rgba(8, 6, 3, 0.92) 0%, transparent 45%);
}

/* Ligne du haut : tags de catégorie */
.wd-bento-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.wd-tag {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 233, 220, 0.75);
  background: rgba(27, 25, 20, 0.65);
  border: 1px solid rgba(200, 196, 180, 0.15);
  border-radius: 20px;
  padding: 3px 9px;

  /* Tags cachés par défaut, apparaissent au hover */
  opacity: 0;
  transform: translateY(-5px);
  transition:
    opacity 0.3s,
    transform 0.3s;
}

.wd-bento-item:hover .wd-tag {
  opacity: 1;
  transform: translateY(0);
}

/* Ligne du bas : titre + icône zoom */
.wd-bento-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wd-bento-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 233, 220, 0.85);
}

/* Icône ⊕ qui apparaît au hover */
.wd-bento-zoom {
  font-size: 1.1rem;
  color: var(--amber);
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.3s,
    transform 0.35s;
}

.wd-bento-item:hover .wd-bento-zoom {
  opacity: 1;
  transform: scale(1);
}

/* =============================================================================
   RESPONSIVE — BENTO GRID
   Sur tablette : 2 colonnes. Sur mobile : 1 colonne empilée.
============================================================================= */

@media (max-width: 900px) {
  .wd-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .wd-hero {
    grid-row: auto;
    grid-column: span 2;
    height: 220px;
  }

  .wd-full {
    height: 180px;
  }
}

@media (max-width: 600px) {
  .wd-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }

  .wd-hero,
  .wd-wide,
  .wd-full {
    grid-column: auto;
    grid-row: auto;
    height: 200px;
  }
}

/* =============================================================================
   SECTION 2 — ONGLETS DE CATÉGORIES (galerie Mockups & Créations)
   Système d'onglets entièrement piloté par JS + CSS.
   La classe "active" est ajoutée/retirée par la fonction switchGdTab().
============================================================================= */

/* La barre qui contient tous les boutons d'onglets */
.gd-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gborder);
}

/* Style de base d'un bouton d'onglet */
.gd-tab-btn {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  background: rgba(200, 196, 180, 0.05);
  border: 1px solid rgba(200, 196, 180, 0.12);
  border-radius: 30px;
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.3s;
}

.gd-tab-btn:hover {
  color: var(--cream);
  border-color: rgba(200, 196, 180, 0.3);
  background: rgba(200, 196, 180, 0.08);
}

/* Onglet sélectionné */
.gd-tab-btn.active {
  color: var(--amber);
  background: rgba(184, 115, 51, 0.12);
  border-color: rgba(184, 115, 51, 0.4);
}

/* Petite icône étoile dans l'onglet "Logos" */
.gd-tab-ico {
  font-size: 0.45rem;
  color: var(--amber);
}

/* Badge numérique (nombre de créations dans la catégorie) */
.gd-tab-badge {
  font-family: var(--mono);
  font-size: 0.52rem;
  background: rgba(92, 99, 64, 0.18);
  border: 1px solid rgba(92, 99, 64, 0.3);
  color: var(--olive2);
  border-radius: 20px;
  padding: 2px 8px;
  line-height: 1;
}

.gd-tab-btn.active .gd-tab-badge {
  background: rgba(184, 115, 51, 0.15);
  border-color: rgba(184, 115, 51, 0.35);
  color: var(--amber);
}

/* =============================================================================
   PANNEAUX D'ONGLETS
   Un seul panneau visible à la fois grâce à la classe "active".
============================================================================= */

.gd-tab-panels {
  margin-bottom: 20px;
}

/* Tous les panneaux sont cachés par défaut */
.gd-tab-panel {
  display: none;
  animation: gdFadeIn 0.35s var(--ease);
}

/* Seul le panneau actif est visible */
.gd-tab-panel.active {
  display: block;
}

/*
  Animation d'entrée douce quand on change d'onglet.
  @keyframes = on définit les étapes de l'animation par pourcentage.
  from (0%) = état de départ
  to (100%) = état final
*/
@keyframes gdFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
   GALERIE BENTO (disposition en grille asymétrique)

   La technique CSS Grid remplace l'ancien système masonry.
   Contrairement aux columns CSS qui empilaient les images naturellement
   selon leur ratio, le bento impose une hauteur fixe à chaque cellule
   et joue sur grid-row / grid-column pour créer une hiérarchie visuelle.

   La première image devient automatiquement la carte "hero" (span 2 lignes)
   grâce au sélecteur :first-child — sans toucher au HTML.
   La 4e image prend 2 colonnes via :nth-child(4) pour casser la symétrie.

   Clé de la différence masonry → bento :
   → Masonry : height: auto — chaque image garde son ratio naturel
   → Bento   : height: 100% + object-fit: cover — toutes les cellules
     ont une hauteur fixe définie par grid-auto-rows: 200px
============================================================================= */

.gd-bento-panel {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: 200px;
  gap: 10px;
  margin-bottom: 20px;
}

/*
  Le premier item devient la carte "hero" :
  elle s'étend sur 2 lignes (donc 400px + gap en hauteur).
  Le sélecteur :first-child cible automatiquement la première image
  sans toucher au HTML.
*/
.gd-bento-panel .gd-item:first-child {
  grid-row: span 2;
}

/*
  La 4e image (juste après hero + 2 cartes) prend 2 colonnes
  pour créer la carte "wide" en bas à droite — effet bento classique.
*/
.gd-bento-panel .gd-item:nth-child(4) {
  grid-column: span 2;
}

/* Chaque item de la galerie */
.gd-item {
  break-inside: avoid;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--gborder);
  background: rgba(27, 25, 20, 0.4);
  cursor: zoom-in;
  transition:
    border-color 0.3s,
    transform 0.4s var(--ease),
    box-shadow 0.4s;
}

.gd-item:hover {
  border-color: rgba(200, 196, 180, 0.35);
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 12px 40px rgba(27, 25, 20, 0.65);
  z-index: 2;
}

/*
  L'image couvre tout l'item — object-fit: cover + width/height 100%
  c'est indispensable pour le bento où toutes les cases ont une hauteur fixe.
  (Contrairement au masonry où height: auto préservait le ratio)
*/
.gd-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition:
    transform 0.5s var(--ease),
    filter 0.4s;
  filter: brightness(0.88) saturate(0.9);
}

.gd-item:hover img {
  transform: scale(1.06);
  filter: brightness(1) saturate(1);
}

/* Overlay visible uniquement au hover */
.gd-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(27, 25, 20, 0.9) 0%,
    transparent 60%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 8px 8px;
  opacity: 0;
  transition: opacity 0.3s;
}

.gd-item:hover .gd-overlay {
  opacity: 1;
}

.gd-zoom-ico {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.3rem;
  color: rgba(237, 233, 220, 0.9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.gd-label {
  font-family: var(--mono);
  font-size: 0.52rem;
  color: rgba(237, 233, 220, 0.75);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
}

/* =============================================
   RESPONSIVE — BENTO
============================================= */
@media (max-width: 900px) {
  .gd-bento-panel {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
  }

  /* Sur tablette : hero span 2 colonnes sur 1 ligne */
  .gd-bento-panel .gd-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }

  .gd-bento-panel .gd-item:nth-child(4) {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .gd-bento-panel {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
    gap: 7px;
  }

  .gd-bento-panel .gd-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }

  .gd-bento-panel .gd-item:nth-child(4) {
    grid-column: span 1;
  }
}

/* =============================================================================
   SECTION 3 — LIGHTBOX (VISIONNEUSE PLEIN ÉCRAN)
   Affichée en position: fixed par-dessus tout le reste.
   Invisible par défaut (opacity: 0), visible quand JS ajoute la classe "open".

   Supporte la navigation clavier (← →) et le swipe tactile (géré en JS).
============================================================================= */

/* Fond sombre + flou derrière */
.gd-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 10200;
  background: rgba(8, 6, 3, 0.95);
  backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
  cursor: none;
}

/* Classe ajoutée par JS pour rendre la lightbox visible */
.gd-zoom-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Conteneur de l'image avec légère animation d'échelle */
.gd-zoom-inner {
  position: relative;
  max-width: 88vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: scale(0.93);
  transition: transform 0.5s var(--ease);
}

.gd-zoom-overlay.open .gd-zoom-inner {
  transform: scale(1);
}

/* Image agrandie */
.gd-zoom-inner img {
  max-width: 88vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(200, 196, 180, 0.15);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.85);
  display: block;
}

/* Bouton fermeture (×) */
.gd-zoom-close {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(237, 233, 220, 0.08);
  border: 1px solid rgba(200, 196, 180, 0.2);
  color: var(--cream);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: all 0.3s;
}

.gd-zoom-close:hover {
  background: rgba(237, 233, 220, 0.15);
  border-color: var(--amber);
  color: var(--amber);
}

/* Boutons précédent / suivant */
.gd-zoom-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(27, 25, 20, 0.7);
  border: 1px solid rgba(200, 196, 180, 0.2);
  color: var(--cream);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: all 0.3s;
  z-index: 10;
}

.gd-zoom-nav:hover {
  background: rgba(184, 115, 51, 0.2);
  border-color: var(--amber);
  color: var(--amber);
}

.gd-zoom-prev {
  left: 20px;
}
.gd-zoom-next {
  right: 20px;
}

/* Légende sous l'image */
.gd-zoom-caption {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: rgba(200, 196, 180, 0.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

/* Compteur "3 / 16" en haut au centre */
.gd-zoom-counter {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.6rem;
  color: rgba(200, 196, 180, 0.3);
  letter-spacing: 0.12em;
}

/* =============================================================================
   RESPONSIVE — LIGHTBOX
============================================================================= */

@media (max-width: 768px) {
  .gd-zoom-prev {
    left: 8px;
  }
  .gd-zoom-next {
    right: 8px;
  }
  .gd-zoom-nav {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}
/* =============================================
   17. RESPONSIVE
============================================= */
@media (max-width: 1024px) {
  nav,
  nav.scrolled {
    padding: 16px 28px;
  }
  .nav-contact-quick {
    display: none;
  }
  .hero {
    padding: 100px 28px 80px;
  }
  .hero-in {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .hero-r {
    order: -1;
  }
  .destruct-grid {
    grid-template-columns: 1fr;
  }
  .dc-main,
  .dc-side,
  .dc-bottom {
    grid-column: 1;
    grid-row: auto;
  }
  .proj-modal-stack {
    grid-template-columns: 1fr;
  }
  .tabs-sec {
    padding: 0 28px 100px;
  }
  .tabs-bar {
    margin-left: -28px;
    margin-right: -28px;
    padding-left: 28px;
    padding-right: 28px;
  }
  .exp-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cv-wrap {
    grid-template-columns: 1fr;
  }
  .cv-photo-col {
    flex-direction: row;
    align-items: flex-start;
  }
  .cv-photo {
    width: 140px;
    height: 170px;
  }
  .cv-grid {
    grid-template-columns: 1fr;
  }
  .ft-in {
    grid-template-columns: 1fr 1fr;
  }
  footer {
    padding: 40px 28px 28px;
  }
  .scroll-hint {
    left: 28px;
  }
  .organic-sec {
    padding: 28px 28px;
  }
  .organic-banner {
    flex-wrap: wrap;
    gap: 16px;
  }
  .org-banner-sep {
    display: none;
  }
  .wow-stage {
    width: 380px;
    height: 420px;
  }
  .wow-terminal {
    width: 300px;
  }
  .wow-ring-outer {
    width: 360px;
    height: 360px;
  }
  .wow-ring-mid {
    width: 290px;
    height: 290px;
  }
  .wow-ring-inner {
    width: 220px;
    height: 220px;
  }
  .wow-orbit-photo {
    right: -52px;
  }
  .wow-photo-wrap {
    width: 58px;
    height: 58px;
  }
  .blur-quote-sec {
    padding: 52px 28px;
  }
}
@media (max-width: 768px) {
  nav,
  nav.scrolled {
    padding: 14px 18px;
  }
  .nav-links,
  .nav-soc {
    display: none;
  }
  .burger {
    display: flex;
  }
  .hero {
    padding: 88px 18px 60px;
  }
  .scroll-hint {
    left: 18px;
  }
  .tabs-sec {
    padding: 0 18px 80px;
  }
  .tabs-bar {
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .tab-btn {
    margin-right: 22px;
    font-size: 0.75rem;
  }
  .cgrid,
  .cgrid.labs {
    grid-template-columns: 1fr;
  }
  .gal {
    grid-template-columns: 1fr 1fr;
  }
  .gal-it.wide {
    grid-column: span 2;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  footer {
    padding: 34px 18px 26px;
  }
  .ft-in {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .ft-bot {
    flex-direction: column;
    align-items: flex-start;
  }
  #cur,
  #cring {
    display: none;
  }
  body {
    cursor: auto;
  }
  .btn,
  .tab-btn,
  .card,
  .ft-soc {
    cursor: pointer;
  }
  .marquee-strip {
    display: none;
  }
  .blur-quote-sec {
    padding: 50px 18px;
  }
  .blur-quote p {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }
  .wow-stage {
    width: 320px;
    height: 360px;
  }
  .wow-terminal {
    width: 260px;
  }
  .wow-exp-badge {
    right: -20px;
  }
  .wow-orbit-photo {
    right: -30px;
  }
  .wow-photo-wrap {
    width: 52px;
    height: 52px;
  }
  .cta-recruiter {
    padding: 60px 18px;
  }
  .cv-selector {
    flex-direction: column;
  }
  .proj-modal {
    max-width: 100%;
  }
  .img-zoom-prev {
    left: -36px;
  }
  .img-zoom-next {
    right: -36px;
  }
  .img-zoom-nav {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }
  .photo-zoom-img {
    width: 220px;
    height: 270px;
  }
}

/* =============================================
   BOUTONS DESCRIPTION CMS — Amber visible
============================================= */
.cms-desc-btn {
  background: rgba(184, 115, 51, 0.12) !important;
  border-color: rgba(184, 115, 51, 0.5) !important;
  color: var(--amber) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  transition: all 0.3s var(--ease) !important;
  box-shadow: 0 0 0 0 rgba(184, 115, 51, 0) !important;
}
.cms-desc-btn:hover {
  background: rgba(184, 115, 51, 0.24) !important;
  border-color: var(--amber) !important;
  color: var(--amber) !important;
  box-shadow: 0 4px 16px rgba(184, 115, 51, 0.25) !important;
  transform: translateY(-2px) !important;
}
.cms-desc-btn .desc-icon {
  font-size: 0.8rem;
  opacity: 0.9;
}

/* Tab IA — accent */
.tab-btn-ia {
  color: var(--amber) !important;
}
.tab-btn-ia::after {
  background: var(--amber) !important;
}
.tab-btn-ia.active {
  color: var(--amber) !important;
}

/* =============================================
   PANEL IA — Grille & Cards
============================================= */
.ia-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 0;
}
.ia-category {
}
.ia-cat-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive2);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gborder);
}
.ia-cat-icon {
  font-size: 0.9rem;
}
.ia-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.ia-tool-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(27, 25, 20, 0.22);
  border: 1px solid rgba(200, 196, 180, 0.13);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.ia-tool-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.ia-tool-card:hover {
  border-color: rgba(200, 196, 180, 0.28);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(27, 25, 20, 0.4);
}
.ia-tool-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(200, 196, 180, 0.12);
  background: rgba(27, 25, 20, 0.5);
}
.ia-tool-info {
  flex: 1;
  min-width: 0;
}
.ia-tool-name {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 2px;
}
.ia-tool-maker {
  font-family: var(--mono);
  font-size: 0.57rem;
  color: var(--stone);
  letter-spacing: 0.1em;
  margin-bottom: 7px;
}
.ia-tool-desc {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--sand);
  line-height: 1.6;
}
.ia-tool-badge {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 600;
}
.ia-badge-pro {
  background: rgba(184, 115, 51, 0.15);
  border: 1px solid rgba(184, 115, 51, 0.4);
  color: var(--amber);
}
.ia-badge-dev {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}
.ia-badge-lab {
  background: rgba(92, 99, 64, 0.15);
  border: 1px solid rgba(92, 99, 64, 0.4);
  color: var(--olive2);
}

/* Couleurs accent par outil */
.ia-card-claude {
  border-left: 2px solid rgba(204, 120, 92, 0.5);
}
.ia-card-claude:hover {
  border-color: rgba(204, 120, 92, 0.8);
  border-left-color: rgba(204, 120, 92, 0.8);
}
.ia-card-gpt {
  border-left: 2px solid rgba(16, 163, 127, 0.5);
}
.ia-card-gpt:hover {
  border-color: rgba(16, 163, 127, 0.8);
  border-left-color: rgba(16, 163, 127, 0.8);
}
.ia-card-cursor {
  border-left: 2px solid rgba(99, 102, 241, 0.5);
}
.ia-card-cursor:hover {
  border-color: rgba(99, 102, 241, 0.8);
  border-left-color: rgba(99, 102, 241, 0.8);
}
.ia-card-gai {
  border-left: 2px solid rgba(66, 133, 244, 0.5);
}
.ia-card-gai:hover {
  border-color: rgba(66, 133, 244, 0.8);
  border-left-color: rgba(66, 133, 244, 0.8);
}
.ia-card-mj {
  border-left: 2px solid rgba(108, 92, 231, 0.5);
}
.ia-card-mj:hover {
  border-color: rgba(108, 92, 231, 0.8);
  border-left-color: rgba(108, 92, 231, 0.8);
}
.ia-card-veo {
  border-left: 2px solid rgba(26, 115, 232, 0.5);
}
.ia-card-veo:hover {
  border-color: rgba(26, 115, 232, 0.8);
  border-left-color: rgba(26, 115, 232, 0.8);
}
.ia-card-kling {
  border-left: 2px solid rgba(255, 76, 139, 0.5);
}
.ia-card-kling:hover {
  border-color: rgba(255, 76, 139, 0.8);
  border-left-color: rgba(255, 76, 139, 0.8);
}

@media (max-width: 768px) {
  .ia-tools {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   EASTER EGG — GIT DUMBER
============================================= */
.gitdumber-overlay {
  position: fixed;
  inset: 0;
  z-index: 19999;
  pointer-events: none;
  /* pas de fond sombre — juste un catch-click invisible */
}
.gitdumber-overlay.active {
  pointer-events: all;
}

.gitdumber-wrap {
  position: fixed;
  bottom: 0;
  right: clamp(40px, 6vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  transform: translateY(110%);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 20000;
}
.gitdumber-overlay.active .gitdumber-wrap {
  transform: translateY(0);
  pointer-events: all;
}

/* ---- Mascotte ---- */
.gitdumber-char {
  position: relative;
  width: 200px;
  flex-shrink: 0;
  user-select: none;
}
.gitdumber-img {
  width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 -8px 32px rgba(184, 115, 51, 0.35))
    drop-shadow(0 0 60px rgba(92, 99, 64, 0.2));
  animation: gdBob 3s ease-in-out infinite;
  image-rendering: -webkit-optimize-contrast;
}
@keyframes gdBob {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  30% {
    transform: translateY(-8px) rotate(-1.5deg);
  }
  60% {
    transform: translateY(-4px) rotate(1deg);
  }
}
.gitdumber-shadow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 14px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45) 0%, transparent 70%);
  border-radius: 50%;
  animation: gdShadow 3s ease-in-out infinite;
}
@keyframes gdShadow {
  0%,
  100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.45;
  }
  30% {
    transform: translateX(-50%) scaleX(0.75);
    opacity: 0.2;
  }
  60% {
    transform: translateX(-50%) scaleX(0.88);
    opacity: 0.3;
  }
}

/* ---- Bulle de dialogue ---- */
.gitdumber-bubble {
  position: relative;
  margin-bottom: 6px;
  margin-right: 24px;
  max-width: 310px;
  opacity: 0;
  transform: scale(0.85) translateY(16px);
  transition:
    opacity 0.4s ease 0.35s,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}
.gitdumber-overlay.active .gitdumber-bubble {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.gdb-inner {
  background: rgba(22, 20, 14, 0.97);
  border: 1px solid rgba(184, 115, 51, 0.45);
  border-radius: 16px;
  padding: 16px 18px 14px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(184, 115, 51, 0.12) inset,
    0 0 40px rgba(184, 115, 51, 0.12);
  backdrop-filter: blur(20px);
}
.gdb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}
.gdb-badge {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(237, 233, 220, 0.6);
  text-transform: uppercase;
}
.gdb-badge strong {
  color: var(--amber);
  font-weight: 800;
  letter-spacing: 0.1em;
}
.gdb-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(237, 233, 220, 0.06);
  border: 1px solid rgba(237, 233, 220, 0.12);
  color: var(--stone);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: all 0.25s;
  flex-shrink: 0;
}
.gdb-close:hover {
  background: rgba(184, 115, 51, 0.2);
  border-color: var(--amber);
  color: var(--amber);
}
.gdb-msg {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: rgba(237, 233, 220, 0.88);
  line-height: 1.65;
  letter-spacing: 0.02em;
  min-height: 48px;
}
.gdb-msg .gdb-cmd {
  color: var(--olive2);
  font-weight: 500;
}
.gdb-msg .gdb-err {
  color: #f97316;
}
.gdb-msg .gdb-ok {
  color: #4ade80;
}
.gdb-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(237, 233, 220, 0.06);
}
.gdb-branch {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--olive2);
  background: rgba(92, 99, 64, 0.15);
  border: 1px solid rgba(92, 99, 64, 0.25);
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: 0.08em;
}
.gdb-commit {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: rgba(200, 196, 180, 0.3);
  letter-spacing: 0.06em;
}

/* Queue de la bulle */
.gdb-tail {
  position: absolute;
  bottom: -10px;
  right: 32px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 11px solid rgba(184, 115, 51, 0.45);
}
.gdb-tail::after {
  content: "";
  position: absolute;
  top: -13px;
  left: -9px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid rgba(22, 20, 14, 0.97);
}

/* Shake d'attention si on reclique */
@keyframes gdShake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  20% {
    transform: translateX(-6px) rotate(-2deg);
  }
  40% {
    transform: translateX(6px) rotate(2deg);
  }
  60% {
    transform: translateX(-4px) rotate(-1deg);
  }
  80% {
    transform: translateX(4px) rotate(1deg);
  }
}
.gitdumber-img.shake {
  animation:
    gdShake 0.5s ease,
    gdBob 3s ease-in-out 0.5s infinite;
}

#pc,
.spotlight {
  display: none !important;
}

/* =============================================
   HERO — Nouvelle version photo + texte
============================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 52px 60px;
  z-index: 1;
  overflow: hidden;
}

/* Fond dégradé subtil — remplace les orbs animés */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 75% 40%, rgba(92,99,64,.14) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 25% 70%, rgba(184,115,51,.08) 0%, transparent 55%);
  pointer-events: none;
}

.hero-layout {
  max-width: 1200px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* ---- Texte gauche ---- */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--stone);
  letter-spacing: .14em;
}

.avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74,222,128,.7);
  animation: blink 2s ease-in-out infinite;
  flex-shrink: 0;
  display: inline-block;
}

.hero-name {
  font-family: var(--serif);
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  line-height: .92;
  color: var(--cream);
  letter-spacing: -.025em;
  margin-bottom: 22px;
}
.hero-name em {
  color: var(--amber);
  font-style: italic;
  display: block;
}

.hero-role {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--sand);
  font-style: italic;
  line-height: 1.25;
  margin-bottom: 22px;
}
.hero-role-sub {
  display: block;
  font-size: .82em;
  color: var(--stone);
  font-style: normal;
  font-family: var(--mono);
  letter-spacing: .1em;
  margin-top: 4px;
}

.hero-pitch {
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--sand);
  line-height: 1.75;
  max-width: 500px;
  margin-bottom: 28px;
}

.hero-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 36px;
}
.hero-stack span {
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--stone);
  letter-spacing: .1em;
  border: 1px solid var(--gborder);
  border-radius: 3px;
  padding: 5px 11px;
  background: var(--gb);
  transition: all .3s;
}
.hero-stack span:hover {
  border-color: var(--olive2);
  color: var(--olive2);
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Visual droit ---- */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.hero-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
}

.hero-photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top center;
  border-radius: 20px;
  border: 1px solid rgba(200,196,180,.18);
  box-shadow:
    0 32px 80px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(237,233,220,.06);
  display: block;
  transition: box-shadow .5s var(--ease);
  cursor: zoom-in;
}
.hero-photo:hover {
  box-shadow:
    0 40px 100px rgba(0,0,0,.65),
    0 0 0 1px rgba(184,115,51,.25);
}

.hero-photo-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: .6rem;
  color: rgba(237,233,220,.9);
  letter-spacing: .1em;
  background: rgba(22,20,14,.88);
  border: 1px solid rgba(200,196,180,.18);
  border-radius: 20px;
  padding: 7px 14px;
  backdrop-filter: blur(12px);
}

.hero-numbers {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 380px;
  background: rgba(27,25,20,.4);
  border: 1px solid var(--gborder);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  padding: 18px 0;
}
.hero-num {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 16px;
}
.hero-num-sep {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, rgba(200,196,180,.15), transparent);
  flex-shrink: 0;
}
.hero-num-val {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--cream);
  line-height: 1;
  letter-spacing: -.02em;
}
.hero-num-val em {
  color: var(--amber);
  font-style: italic;
  font-size: .8em;
}
.hero-num-label {
  font-family: var(--mono);
  font-size: .52rem;
  color: var(--stone);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}

.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: .61rem;
  color: var(--stone);
  letter-spacing: .14em;
  text-transform: uppercase;
  z-index: 2;
}

/* =============================================
   INTRO ÉDITORIALE
============================================= */
.intro-sec {
  padding: 80px 52px;
  border-top: 1px solid var(--gborder);
  border-bottom: 1px solid var(--gborder);
  background: rgba(27,25,20,.3);
}
.intro-inner {
  max-width: 760px;
}
.intro-label {
  font-family: var(--mono);
  font-size: .64rem;
  color: var(--olive2);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.intro-label::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--amber);
}
.intro-quote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-style: italic;
  color: rgba(237,233,220,.9);
  line-height: 1.4;
  letter-spacing: -.02em;
  margin-bottom: 24px;
}
.intro-quote em {
  color: var(--amber);
}
.intro-body {
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--sand);
  line-height: 1.75;
  max-width: 620px;
}

/* =============================================
   PROJETS FRONT-END
============================================= */
.projects-sec {
  position: relative;
  z-index: 2;
  padding: 80px 52px 100px;
}
.design-sec,
.cms-sec,
.cv-sec {
  position: relative;
  z-index: 2;
  padding: 80px 52px 100px;
  border-top: 1px solid var(--gborder);
}

/* Grille featured : carte hero + 2 cartes côte à côte */
.proj-featured {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px;
  margin-bottom: 0;
}

.proj-side-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- Carte héro projet ---- */
.proj-hero-card {
  background: rgba(27,25,20,.2);
  border: 1px solid rgba(200,196,180,.13);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .5s var(--ease), border-color .35s, box-shadow .5s;
  position: relative;
}
.proj-hero-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200,196,180,.28);
  box-shadow: 0 28px 72px rgba(27,25,20,.55);
}

.proj-hero-img {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}
.proj-hero-img .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.proj-hero-img .slide.active {
  opacity: 1;
  position: relative;
}
.proj-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.88) saturate(.92);
  transition: filter .5s, transform .9s var(--ease);
}
.proj-hero-card:hover .proj-hero-img img {
  filter: brightness(.98) saturate(1);
  transform: scale(1.04);
}

.proj-hero-body {
  padding: 22px 26px 26px;
}

.proj-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27,25,20,.9) 0%, rgba(27,25,20,.1) 55%, transparent 100%);
  pointer-events: none;
}

.proj-tag {
  font-family: var(--mono);
  font-size: .58rem;
  color: var(--olive2);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.proj-tag::before {
  content: "";
  width: 10px;
  height: 1px;
  background: var(--olive2);
}

.proj-title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -.015em;
}
.proj-title em { color: var(--amber); font-style: italic; }

.proj-desc {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--sand);
  line-height: 1.72;
  margin-bottom: 16px;
}

.proj-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 16px;
}
.chip {
  font-family: var(--mono);
  font-size: .57rem;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid rgba(200,196,180,.1);
  color: var(--stone);
  background: rgba(200,196,180,.04);
}
.chip.fe { border-color: rgba(138,148,99,.3); color: var(--olive2); }
.chip.be { border-color: rgba(184,115,51,.3); color: var(--amber); }
.chip.db { border-color: rgba(139,74,46,.3); color: #d4845a; }
.chip.tool { border-color: rgba(200,196,180,.12); color: var(--stone); }

.proj-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.proj-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--olive2);
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: gap .3s, color .3s;
}
.proj-link:hover { color: var(--amber); gap: 10px; }

/* ---- Carte projet secondaire ---- */
.proj-card {
  background: rgba(27,25,20,.2);
  border: 1px solid rgba(200,196,180,.12);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .45s var(--ease), border-color .3s, box-shadow .4s;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.proj-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200,196,180,.26);
  box-shadow: 0 20px 56px rgba(27,25,20,.5);
}

.proj-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}
.proj-card-img .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.proj-card-img .slide.active {
  opacity: 1;
  position: relative;
}
.proj-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.85) saturate(.9);
  transition: filter .4s, transform .6s var(--ease);
}
.proj-card:hover .proj-card-img img {
  filter: brightness(.98) saturate(1);
  transform: scale(1.05);
}

.proj-card-body {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.proj-card-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.proj-card-title em { color: var(--amber); font-style: italic; }
.proj-card-desc {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--sand);
  line-height: 1.65;
  flex: 1;
}

/* ---- Labs ---- */
.labs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.lab-card {
  background: rgba(27,25,20,.2);
  border: 1px solid rgba(200,196,180,.11);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.lab-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200,196,180,.24);
  box-shadow: 0 16px 48px rgba(27,25,20,.45);
}
.lab-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.lab-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.85) saturate(.9);
  transition: transform .6s var(--ease), filter .4s;
}
.lab-card:hover .lab-img img {
  transform: scale(1.05);
  filter: brightness(.98) saturate(1);
}
.lab-body { padding: 16px 18px 18px; }
.lab-tag {
  font-family: var(--mono);
  font-size: .55rem;
  color: var(--olive2);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.lab-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--cream);
  margin-bottom: 8px;
}
.lab-desc {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--sand);
  line-height: 1.65;
  margin-bottom: 12px;
}

/* =============================================
   SECTION TITLE HELPERS
============================================= */
.sec-ttl-sm {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  color: var(--cream);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.sec-ttl-sm em { color: var(--amber); font-style: italic; }

/* =============================================
   NAVBAR — Ajustements
============================================= */
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-email,
.nav-tel {
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--stone);
  text-decoration: none;
  letter-spacing: .08em;
  transition: color .3s;
}
.nav-email:hover { color: var(--olive2); }
.nav-tel:hover { color: var(--amber); }
.nav-soc {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nav-soc a {
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--stone);
  text-decoration: none;
  letter-spacing: .08em;
  transition: color .3s;
}
.nav-soc a:hover { color: var(--amber); }
.nav-soc span { color: var(--stone); opacity: .3; }

/* =============================================
   RESPONSIVE HERO v4
============================================= */
@media (max-width: 1024px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-visual {
    order: -1;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
  }
  .hero-photo-wrap {
    max-width: 220px;
    flex-shrink: 0;
  }
  .hero-numbers {
    flex: 1;
    min-width: 240px;
  }
  .proj-featured {
    grid-template-columns: 1fr;
  }
  .proj-side-grid {
    flex-direction: row;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 88px 18px 60px;
  }
  .hero-scroll { left: 18px; }
  .hero-visual {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-photo-wrap { max-width: 100%; }
  .labs-grid { grid-template-columns: 1fr; }
  .proj-side-grid { flex-direction: column; }
  .projects-sec,
  .design-sec,
  .cms-sec,
  .cv-sec { padding: 56px 18px 72px; }
  .intro-sec { padding: 52px 18px; }
  .nav-right { display: none; }
  .nav-email, .nav-tel { display: none; }
}
/* =============================================
   PORTFOLIO — Sébastien Maurice
   css/additions.css — v5.0 — 2026
   
   À AJOUTER À LA FIN DE style.css
   (ou via <link> après style.css dans le HTML)
   
   Contient les styles pour :
   1.  Hero v5 — pills primaires, différenciateur, badge O'Clock
   2.  Section Compétences — barres animées, catégories, légende
   3.  Badges projet (proj-tag-badge)
   4.  "Ce que j'ai fait" (what-i-did block)
   5.  fc-card mise en avant (O'Clock)
   6.  Nuance IA
   7.  Utilitaires divers
============================================= */

/* =============================================
   1. HERO — Nouvelles classes
============================================= */

/* Pills primaires vs secondaires */
.pill-hero {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  padding: 6px 13px;
  border-radius: 3px;
  border: 1px solid var(--gborder);
  background: var(--gb);
  color: var(--sand);
  backdrop-filter: blur(6px);
  transition: all .3s var(--ease);
  cursor: default;
}
.pill-hero.primary {
  border-color: rgba(138, 148, 99, .35);
  color: var(--olive2);
  background: rgba(138, 148, 99, .06);
}
.pill-hero:hover {
  border-color: var(--olive2);
  color: var(--olive2);
  transform: translateY(-2px);
}

/* Bloc différenciateur */
.hero-pitch-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.hero-differentiator {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: rgba(92, 99, 64, .06);
  border: 1px solid rgba(92, 99, 64, .18);
  border-radius: 10px;
  padding: 14px 16px;
}

.diff-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--sand);
  letter-spacing: .04em;
}
.diff-ico {
  font-size: .88rem;
  flex-shrink: 0;
}

/* Badge O'Clock sur la photo */
.hero-oclock-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(18, 16, 12, .9);
  border: 1px solid rgba(184, 115, 51, .35);
  border-radius: 10px;
  padding: 9px 13px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.oclock-ico { font-size: 1rem; flex-shrink: 0; }
.oclock-title {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
}
.oclock-sub {
  font-family: var(--mono);
  font-size: .52rem;
  color: var(--stone);
  letter-spacing: .06em;
  margin-top: 2px;
}

/* =============================================
   2. SECTION COMPÉTENCES
============================================= */
.skills-sec {
  position: relative;
  z-index: 2;
  padding: 80px 52px 100px;
  border-top: 1px solid var(--gborder);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 36px;
}

.skill-category {
  background: rgba(27, 25, 20, .22);
  border: 1px solid rgba(200, 196, 180, .13);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(4px);
  transition: border-color .3s, box-shadow .4s;
}
.skill-category:hover {
  border-color: rgba(200, 196, 180, .26);
  box-shadow: 0 12px 40px rgba(27, 25, 20, .3);
}

/* Label de catégorie */
.skill-cat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gborder);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  color: var(--cream);
}
.skill-cat-icon { font-size: .95rem; }
.skill-cat-tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
.primary-tag {
  background: rgba(138, 148, 99, .15);
  border: 1px solid rgba(138, 148, 99, .35);
  color: var(--olive2);
}
.design-tag {
  background: rgba(184, 115, 51, .12);
  border: 1px solid rgba(184, 115, 51, .35);
  color: var(--amber);
}
.backend-tag {
  background: rgba(200, 196, 180, .06);
  border: 1px solid rgba(200, 196, 180, .2);
  color: var(--stone);
}

/* Barres */
.skill-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.skill-bar-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.skill-bar-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}
.skill-bar-name {
  font-family: var(--mono);
  font-size: .64rem;
  color: var(--sand);
  letter-spacing: .04em;
}
.skill-bar-level {
  font-family: var(--mono);
  font-size: .52rem;
  color: var(--stone);
  letter-spacing: .08em;
  flex-shrink: 0;
  font-style: italic;
}

/* Track (arrière-plan de la barre) */
.skill-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(200, 196, 180, .1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

/* Remplissage animé
   Démarre à width:0 puis JS ajoute la classe .animated
   et applique la vraie width via data-width.
   La transition CSS fait le reste. */
.skill-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--bar-color, var(--olive2));
  transition: width 1.2s cubic-bezier(.16, 1, .3, 1);
  position: relative;
}
/* Petit reflet lumineux sur la barre */
.skill-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(255,255,255,.15) 100%);
  border-radius: 2px;
}

/* Légende */
.skills-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(200, 196, 180, .03);
  border: 1px solid var(--gborder);
  border-radius: 10px;
  margin-top: 4px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--stone);
  letter-spacing: .05em;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.legend-note {
  width: 100%;
  font-family: var(--mono);
  font-size: .58rem;
  color: var(--stone);
  letter-spacing: .04em;
  opacity: .7;
  font-style: italic;
  margin-top: 4px;
}

/* Responsive skills grid */
@media (max-width: 1024px) {
  .skills-grid { grid-template-columns: 1fr 1fr; }
  .skills-sec { padding: 56px 28px 80px; }
}
@media (max-width: 768px) {
  .skills-grid { grid-template-columns: 1fr; }
  .skills-sec { padding: 56px 18px 72px; }
}

/* =============================================
   3. BADGES PROJET
============================================= */
.proj-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.proj-tag-badge {
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  border: 1px solid rgba(200, 196, 180, .12);
  color: var(--stone);
  background: rgba(200, 196, 180, .04);
}
.proj-tag-badge.primary-badge {
  border-color: rgba(184, 115, 51, .3);
  color: var(--amber);
  background: rgba(184, 115, 51, .06);
}

/* =============================================
   4. "CE QUE J'AI FAIT" block
============================================= */
.proj-what-i-did {
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: rgba(92, 99, 64, .05);
  border: 1px solid rgba(92, 99, 64, .15);
  border-left: 2px solid var(--olive2);
  border-radius: 0 8px 8px 0;
}
.wid-label {
  font-family: var(--mono);
  font-size: .55rem;
  color: var(--olive2);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wid-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wid-list li {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--sand);
  letter-spacing: .03em;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.wid-list li::before {
  content: "→";
  color: var(--olive2);
  flex-shrink: 0;
}

/* =============================================
   5. FC-CARD HIGHLIGHT (O'Clock)
============================================= */
.fc-card-highlight {
  border-color: rgba(184, 115, 51, .3) !important;
  background: rgba(184, 115, 51, .04) !important;
  position: relative;
  overflow: hidden;
}
.fc-card-highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
}
.fc-yr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: .55rem;
  color: var(--amber);
  letter-spacing: .12em;
  background: rgba(184, 115, 51, .12);
  border: 1px solid rgba(184, 115, 51, .3);
  border-radius: 3px;
  padding: 2px 8px;
  margin-bottom: 8px;
}
.fc-detail {
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--stone);
  letter-spacing: .04em;
  line-height: 1.65;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gborder);
}

/* =============================================
   6. NUANCE IA
============================================= */
.ia-nuance {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--stone);
  line-height: 1.7;
  letter-spacing: .04em;
  font-style: italic;
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 2px solid rgba(200, 196, 180, .15);
  background: rgba(200, 196, 180, .03);
  border-radius: 0 6px 6px 0;
}

.hero-role-sub {
  display: block;
  font-size: .82em;
  color: var(--stone);
  font-style: normal;
  font-family: var(--mono);
  letter-spacing: .1em;
  margin-top: 4px;
}

.skill-cat-note {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--stone);
  margin-top: 14px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  font-style: italic;
  padding: 8px 12px;
  border-left: 2px solid rgba(200, 196, 180, 0.15);
  background: rgba(200, 196, 180, 0.02);
  border-radius: 0 4px 4px 0;
}

.wd-tag:first-child {
}

/* =============================================
   7. RESPONSIVE — hero v5 ajustements
============================================= */
@media (max-width: 1024px) {
  .hero-oclock-badge { display: none; }
}
@media (max-width: 768px) {
  .hero-differentiator { display: none; }
}

@media (max-width: 600px) {
  .hero-numbers {
    flex-direction: column;
    padding: 16px;
    gap: 12px;
  }
  .hero-num-sep { width: 40px; height: 1px; }
}

/* Responsive */
@media (max-width: 768px) {
  .gitdumber-char {
    width: 150px;
  }
  .gitdumber-img {
    width: 150px;
  }
  .gitdumber-wrap {
    right: 16px;
  }
  .gitdumber-bubble {
    max-width: 260px;
  }
}