:root {
          --bg: #0b0d12;
          --surface: #0f131a;
          --elev-1: rgba(255, 255, 255, .04);
          --elev-2: rgba(255, 255, 255, .07);
          --elev-3: rgba(255, 255, 255, .12);
          --text: #e8ecf1;
          --muted: #a7afbf;
          --primary: #00d4ff;
          --secondary: #7c5cff;
          --success: #17d79b;
          --warning: #ffb454;
          --danger: #ff5470;
          --skills-accent: var(--primary);
          --skills-glow: rgba(0, 212, 255, .15);
          --ring: 0 0 0 4px rgba(0, 212, 255, .28);
          --shadow-lg: 0 30px 80px rgba(0, 0, 0, .35);
          --shadow-md: 0 14px 40px rgba(0, 0, 0, .28);
          --radius: 16px;
          --divider: radial-gradient(800px 400px at 50% 0%, rgba(124, 92, 255, .15), transparent 70%), radial-gradient(700px 300px at 20% 50%, rgba(0, 212, 255, .12), transparent 70%);
          --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
          --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
          --p-measure: 68ch;
          /* longueur idéale d’une ligne */
          --p-leading: 1.68;
          /* interligne de luxe */
          --p-color: color-mix(in oklab, var(--text) 92%, var(--muted));
          --p-strong: color-mix(in oklab, var(--text) 100%, var(--primary));
          --p-muted: color-mix(in oklab, var(--muted) 96%, var(--text));
        }

        [data-theme="light"] {
          --bg: #f7f9fc;
          --surface: #fff;
          --elev-1: rgba(0, 0, 0, .04);
          --elev-2: rgba(0, 0, 0, .06);
          --elev-3: rgba(0, 0, 0, .08);
          --text: #0f1320;
          --muted: #5b6270;
          --shadow-lg: 0 30px 70px rgba(17, 23, 36, .12);
          --shadow-md: 0 12px 28px rgba(17, 23, 36, .10);
        }

        * {
          box-sizing: border-box
        }

        html,
        body {
          height: 100%;
          scroll-behavior: smooth
        }

        body {
          margin: 0;
          color: var(--text);
          background: var(--bg);
          background-image:
            radial-gradient(1200px 800px at 80% -10%, rgba(124, 92, 255, .18), transparent 60%),
            radial-gradient(900px 600px at 10% 10%, rgba(0, 212, 255, .12), transparent 50%),
            radial-gradient(800px 500px at 50% 110%, rgba(23, 215, 155, .12), transparent 60%);
          overflow-x: hidden;
          font-family: var(--font-sans);
        }

        /* Applique aux paragraphes de contenu long */
        .prose,
        .description,
        .timeline-item p,
        .contact-info p,
        .project-description {
          font-family: var(--font-serif);
          font-size: clamp(15.5px, 1.02rem + 0.15vw, 18.5px);
          line-height: var(--p-leading);
          color: var(--p-color);
          letter-spacing: .005em;
          max-inline-size: var(--p-measure);
          text-wrap: pretty;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
          font-feature-settings: "liga" 1, "clig" 1, "kern" 1;
          font-variation-settings: "opsz" 18;
          /* optical size pour Newsreader */
          hyphens: auto;
          hanging-punctuation: first last;
          margin-block: 0 .85em;
        }

        .prose strong,
        .description strong,
        .project-description strong {
          color: var(--p-strong);
          font-weight: 600;
        }

        .prose em,
        .description em {
          color: var(--text);
          font-style: italic;
        }

        /* Paragraphes d’intro “lead” (optionnel) */
        .lead {
          font-size: clamp(17px, 1.1rem + 0.25vw, 20px);
          line-height: 1.75;
          color: color-mix(in oklab, var(--text) 96%, var(--p-color));
        }

        /* Liens dans le texte */
        .prose a,
        .description a,
        .project-description a {
          color: color-mix(in oklab, var(--primary) 70%, var(--text));
          text-decoration: underline;
          text-decoration-thickness: .08em;
          text-underline-offset: .17em;
        }

        .prose a:hover {
          color: color-mix(in oklab, var(--secondary) 75%, var(--text));
        }

        /* Listes dans du texte long */
        .prose ul,
        .prose ol {
          margin: .6em 0 .9em 1.2em;
        }

        .prose li {
          margin: .25em 0;
        }

        /* Citations élégantes (si tu en utilises) */
        .prose blockquote {
          margin: 1em 0;
          padding: .6em 1em;
          border-left: 3px solid color-mix(in oklab, var(--primary) 55%, var(--elev-3));
          color: var(--p-muted);
          background: color-mix(in oklab, var(--elev-1) 65%, transparent);
          border-radius: 10px;
        }

        /* Petits écrans : un peu plus d’air et de lisibilité */
        @media (max-width: 560px) {

          .prose,
          .description,
          .project-description {
            line-height: 1.74;
            max-inline-size: 100%;
          }
        }

        img {
          max-width: 100%;
          display: block
        }

        a {
          text-decoration: none;
          color: inherit
        }

        :focus-visible {
          outline: none;
          box-shadow: var(--ring);
          border-radius: 12px
        }

        .container {
          width: min(1160px, 100%);
          margin-inline: auto;
          padding-inline: 20px
        }

        /* ===== Sections : full-bleed + alternance douce ===== */
        .section {
          position: relative;
          padding: clamp(64px, 7vw, 100px) 0;
          overflow: clip;
          /* coupe les décorations qui dépassent */
          isolation: isolate;
          /* pour superposer proprement les layers */
        }

        /* couche de fond full-bleed (couvre 100% de la section) */
        .section::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: -1;
          background:
            /* halos colorés subtils */
            radial-gradient(1200px 700px at 85% 0%, color-mix(in oklab, var(--primary) 10%, transparent), transparent 70%),
            radial-gradient(900px 600px at 10% 100%, color-mix(in oklab, var(--secondary) 9%, transparent), transparent 60%),
            /* base : teinte proche du bg pour éviter les “trous” */
            linear-gradient(180deg,
              color-mix(in oklab, var(--bg) 96%, transparent),
              color-mix(in oklab, var(--bg) 96%, transparent) 100%);
        }

        /* variante alternée : un léger voile pour mieux délimiter */
        .section.is-alt::before {
          background:
            radial-gradient(1100px 680px at 15% 0%, color-mix(in oklab, var(--success) 8%, transparent), transparent 65%),
            radial-gradient(900px 620px at 90% 100%, color-mix(in oklab, var(--primary) 10%, transparent), transparent 60%),
            linear-gradient(180deg,
              color-mix(in oklab, var(--surface) 12%, var(--bg)),
              color-mix(in oklab, var(--surface) 12%, var(--bg)) 100%);
        }

        /* ===== Separators élégants (ondes douces) ===== */
        /* ajoute .has-divider-bottom sur la section pour une “vague” en bas */
        .has-divider-bottom::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: -1px;
          height: 90px;
          z-index: 0;
          /* lueur + dégradé d'atténuation */
          background:
            radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, .10), transparent 60%),
            linear-gradient(to bottom, transparent, color-mix(in oklab, var(--bg) 92%, transparent));
          /* masque en vague (pure CSS, pas d’image) */
          -webkit-mask:
            radial-gradient(120% 220% at 50% 120%, #000 58%, transparent 59%) bottom/100% 100% no-repeat;
          mask:
            radial-gradient(120% 220% at 50% 120%, #000 58%, transparent 59%) bottom/100% 100% no-repeat;
          pointer-events: none;
        }

        /* ajoute .has-divider-top pour une vague en haut (si besoin) */
        .has-divider-top::before {
          /* on duplique la couche décorative avant la base */
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: -1px;
          height: 90px;
          z-index: 1;
          background:
            radial-gradient(120% 100% at 50% 100%, rgba(255, 255, 255, .10), transparent 60%),
            linear-gradient(to top, transparent, color-mix(in oklab, var(--bg) 92%, transparent));
          -webkit-mask:
            radial-gradient(120% 220% at 50% -20%, #000 58%, transparent 59%) top/100% 100% no-repeat;
          mask:
            radial-gradient(120% 220% at 50% -20%, #000 58%, transparent 59%) top/100% 100% no-repeat;
          pointer-events: none;
        }

        /* ===== Ajustements responsive ===== */
        @media (max-width: 920px) {
          .section {
            padding: clamp(54px, 7vw, 80px) 0;
          }
        }

        @media (max-width: 560px) {
          .section {
            padding: 48px 0;
          }
        }

        /* ===== Compat thème clair : renforcer légèrement les halos ===== */
        [data-theme="light"] .section::before {
          background:
            radial-gradient(1200px 700px at 85% 0%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 70%),
            radial-gradient(900px 600px at 10% 100%, color-mix(in oklab, var(--secondary) 12%, transparent), transparent 60%),
            linear-gradient(180deg,
              color-mix(in oklab, #fff 96%, transparent),
              color-mix(in oklab, #fff 96%, transparent) 100%);
        }


        .section-title {
          font-size: clamp(22px, 3vw, 32px);
          margin: 0 0 24px;
          letter-spacing: .2px
        }

        .sr-only {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border: 0
        }

        .fade-up {
          opacity: 0;
          transform: translateY(14px);
          transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1)
        }

        .fade-up.visible {
          opacity: 1;
          transform: translateY(0)
        }

        /* Header */
        .header {
          position: sticky;
          top: 0;
          z-index: 50;
          backdrop-filter: blur(12px) saturate(140%);
          border-bottom: 1px solid var(--elev-3);
          background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 70%, transparent), transparent)
        }

        .header .container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          /* nouveau */
          padding: 14px 20px;
        }

        .nav {
          display: flex;
          align-items: center;
          gap: 18px
        }

        /* bouton burger */
        .nav-toggle {
          display: none;
          border: 0;
          background: var(--elev-1);
          color: var(--text);
          padding: 10px;
          border-radius: 12px;
          cursor: pointer;
          transition: transform .2s;
        }

        .nav-toggle:active {
          transform: scale(.98)
        }

        .logo {
          display: inline-flex;
          align-items: center;
          gap: .6rem;
          font-weight: 800;
          letter-spacing: .3px
        }

        .logo::before {
          content: "";
          width: 36px;
          height: 36px;
          border-radius: 10px;
          background: conic-gradient(from 180deg, var(--primary), var(--secondary), var(--success), var(--primary));
          filter: saturate(1.1);
          box-shadow: 0 10px 26px rgba(124, 92, 255, .35), inset 0 0 30px rgba(0, 212, 255, .35)
        }

        .nav {
          display: flex;
          align-items: center;
          gap: 18px
        }

        .nav-links {
          list-style: none;
          display: flex;
          gap: 14px;
          margin: 0;
          padding: 0
        }

        .nav-links a {
          padding: 8px 10px;
          color: var(--muted);
          border-radius: 10px;
          font-weight: 600
        }

        .nav-links a:hover,
        .nav-links a[aria-current="true"] {
          color: var(--text);
          background: var(--elev-1)
        }

        .theme-toggle {
          border: 0;
          background: var(--elev-1);
          color: var(--text);
          padding: 10px;
          border-radius: 12px;
          cursor: pointer;
          transition: transform .2s
        }

        .theme-toggle:active {
          transform: scale(.98)
        }

        /* ===== Buttons – système unifié ===== */
        .btn {
          --btn-bg: var(--surface);
          --btn-fg: var(--text);
          --btn-bd: var(--elev-3);
          --btn-shadow: var(--shadow-md);

          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: .55rem;
          padding: .75rem 1rem;
          /* base */
          border-radius: 14px;
          border: 1px solid var(--btn-bd);
          background: var(--btn-bg);
          color: var(--btn-fg);
          font-weight: 700;
          letter-spacing: .2px;
          line-height: 1;
          text-decoration: none;
          cursor: pointer;
          white-space: nowrap;
          user-select: none;
          box-shadow: var(--btn-shadow);
          transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
          overflow: hidden;
        }

        .btn i {
          display: inline-block;
          width: 1em;
          height: 1em;
          line-height: 1;
        }

        .btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 14px 40px rgba(124, 92, 255, .18);
        }

        .btn:active {
          transform: translateY(-1px);
        }

        .btn:focus-visible {
          outline: none;
          box-shadow: var(--ring), var(--btn-shadow);
        }

        /* Ripple soft (optionnel; s’active si JS met --rx/--ry) */
        .btn::after {
          content: "";
          position: absolute;
          inset: 0;
          background: radial-gradient(220px 220px at var(--rx, 50%) var(--ry, 50%), rgba(255, 255, 255, .10), transparent 40%);
          opacity: 0;
          transition: opacity .25s ease;
          pointer-events: none;
        }

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

        /* Variants */
        .btn-primary {
          --btn-bg: linear-gradient(135deg,
              color-mix(in oklab, var(--primary) 18%, transparent),
              color-mix(in oklab, var(--secondary) 18%, transparent));
          --btn-bd: rgba(124, 92, 255, .35);
        }

        .btn-secondary {
          --btn-bg: linear-gradient(135deg,
              color-mix(in oklab, var(--surface) 70%, transparent),
              color-mix(in oklab, var(--elev-2) 70%, transparent));
        }

        .btn-outline {
          --btn-bg: transparent;
          --btn-fg: var(--text);
          --btn-bd: var(--elev-3);
          box-shadow: none;
        }

        .btn-ghost {
          --btn-bg: transparent;
          --btn-fg: var(--muted);
          --btn-bd: transparent;
          box-shadow: none;
        }

        .btn-link {
          --btn-bg: transparent;
          --btn-fg: color-mix(in oklab, var(--primary) 75%, var(--text));
          --btn-bd: transparent;
          padding: 0;
          box-shadow: none;
          border-radius: 8px;
        }

        /* État */
        .btn.is-active {
          border-color: color-mix(in oklab, var(--primary) 60%, var(--elev-3));
        }

        .btn.is-loading {
          pointer-events: none;
          opacity: .8;
        }

        .btn[disabled],
        .btn.is-disabled {
          opacity: .6;
          cursor: not-allowed;
          transform: none;
        }

        /* Formes & tailles */
        .btn-pill {
          border-radius: 999px;
          padding: .75rem 1.125rem;
        }

        .btn-lg {
          padding: .9rem 1.15rem;
          font-size: 1rem;
          border-radius: 16px;
        }

        .btn-sm {
          padding: .55rem .75rem;
          font-size: .875rem;
          border-radius: 12px;
        }

        .btn-block {
          display: flex;
          width: 100%;
        }

        .btn-icon {
          padding: .6rem;
          aspect-ratio: 1/1;
        }

        /* Bouton groupe (espace homogène) */
        .btn-group {
          display: flex;
          flex-wrap: wrap;
          gap: .5rem;
        }

        .btn-group .btn {
          flex: 0 0 auto;
        }

        /* Compat thème clair : un peu plus de contraste sur outline/link */
        [data-theme="light"] .btn-outline {
          --btn-bd: color-mix(in oklab, black 18%, var(--elev-3));
        }

        [data-theme="light"] .btn-link {
          --btn-fg: color-mix(in oklab, var(--secondary) 70%, #1a1a1a);
        }

        /* Accessibilité au clavier – réduit les sauts visuels */
        @media (prefers-reduced-motion: reduce) {

          .btn,
          .btn::after {
            transition: none !important;
          }
        }

        /* Responsive affinité : boutons plein-largeur sur petits écrans pour CTA primaires */
        @media (max-width:560px) {
          .hero-cta .btn {
            flex: 1 1 auto;
          }

          .btn-lg {
            font-size: .95rem;
          }
        }



        /* =========================
   HERO — layout & visuels
   ========================= */
        .hero {
          position: relative;
          padding: clamp(56px, 7vw, 96px) 0;
          min-height: 92vh;
          display: grid;
          align-items: center;
          isolation: isolate;
        }

        /* Fond 3D + overlay (déjà dans ton HTML) */
        .hero-canvas {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          z-index: -2;
        }

        .hero-overlay {
          position: absolute;
          inset: 0;
          z-index: -1;
          background:
            radial-gradient(900px 600px at 85% 20%, rgba(124, 92, 255, .20), transparent 60%),
            radial-gradient(700px 500px at 10% 80%, rgba(0, 212, 255, .18), transparent 60%),
            linear-gradient(180deg, transparent, color-mix(in oklab, var(--bg) 85%, transparent) 80%);
          will-change: transform;
          transition: transform .3s ease;
        }

        /* Grille principale: texte / visuel */
        .hero-content {
          display: grid;
          grid-template-columns: 1.08fr .92fr;
          gap: clamp(24px, 4.8vw, 48px);
          align-items: center;
        }

        /* ----- Colonne texte ----- */
        .hero-text .hero-kicker {
          display: inline-block;
          font-weight: 700;
          font-size: 12px;
          letter-spacing: .18em;
          text-transform: uppercase;
          color: var(--muted);
          padding: 6px 10px;
          border-radius: 999px;
          background: color-mix(in oklab, var(--primary) 12%, var(--elev-1));
          border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--elev-3));
          margin-bottom: 12px;
        }

        .hero-title {
          margin: 0 0 10px;
          line-height: 1.02;
          font-size: clamp(36px, 7.4vw, 76px);
          letter-spacing: .2px;
        }

        .hero-title .stroke {
          -webkit-text-fill-color: transparent;
          background: linear-gradient(90deg, var(--text), var(--text)) text;
          -webkit-text-stroke: 1px color-mix(in oklab, var(--text) 30%, var(--primary));
          text-shadow: 0 12px 30px rgba(0, 0, 0, .25);
        }

        .hero-title .shine {
          background: linear-gradient(90deg, var(--primary), var(--secondary));
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          position: relative;
        }

        .hero-title .shine::after {
          content: "";
          position: absolute;
          left: -10%;
          top: 0;
          bottom: 0;
          width: 12%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
          transform: skewX(-12deg) translateX(-120%);
          animation: shine 3.2s ease-in-out infinite;
          pointer-events: none;
        }

        @keyframes shine {
          50% {
            transform: skewX(-12deg) translateX(180%);
          }
        }

        .subtitle {
          color: var(--muted);
          font-weight: 600;
          margin: 0 0 8px;
        }

        .description {
          color: color-mix(in oklab, var(--muted) 88%, var(--text));
          margin: 0 0 18px;
          max-width: 62ch;
        }

        .hero-stats {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          padding: 0;
          margin: 0 0 18px;
          list-style: none;
        }

        .hero-stats li {
          font-size: 12px;
          color: var(--muted);
          padding: 8px 10px;
          border-radius: 999px;
          background: var(--elev-1);
          border: 1px solid var(--elev-3);
        }

        /* CTA (remplace .hero-buttons) */
        .hero-cta {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin-top: 6px;
        }

        /* Chips méta (dispo / lieu / github) */
        .hero-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: 14px;
        }

        .chip {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 10px;
          border-radius: 999px;
          background: var(--elev-1);
          border: 1px solid var(--elev-3);
          color: var(--muted);
          font-size: 12px;
          font-weight: 600;
        }

        .chip-available {
          background: color-mix(in oklab, var(--success) 12%, var(--elev-1));
          border-color: color-mix(in oklab, var(--success) 40%, var(--elev-3));
          color: color-mix(in oklab, var(--success) 80%, var(--text));
        }

        .chip .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: var(--success);
          box-shadow: 0 0 0 3px rgba(23, 215, 155, .18);
        }

        /* Indication scroll */
        .scroll-cue {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          color: var(--muted);
          margin-top: 18px;
          opacity: .85;
        }

        .scroll-cue .mouse {
          width: 16px;
          height: 24px;
          border-radius: 10px;
          border: 2px solid var(--muted);
          position: relative;
        }

        .scroll-cue .mouse::after {
          content: "";
          position: absolute;
          top: 4px;
          left: 50%;
          transform: translateX(-50%);
          width: 2px;
          height: 6px;
          border-radius: 2px;
          background: var(--muted);
          animation: wheel 1.8s ease-in-out infinite;
        }

        .scroll-cue .arrow {
          width: 8px;
          height: 8px;
          border-right: 2px solid var(--muted);
          border-bottom: 2px solid var(--muted);
          transform: rotate(45deg);
          margin-left: -2px;
          animation: bounce 1.8s ease-in-out infinite;
        }

        @keyframes wheel {

          0%,
          100% {
            transform: translate(-50%, 0)
          }

          50% {
            transform: translate(-50%, 6px)
          }
        }

        @keyframes bounce {

          0%,
          100% {
            transform: rotate(45deg) translate(0, 0)
          }

          50% {
            transform: rotate(45deg) translate(2px, 2px)
          }
        }

        /* ----- Colonne visuelle ----- */
        .hero-visual {
          position: relative;
          display: grid;
          place-items: center;
          gap: 14px;
        }

        /* Anneaux décoratifs subtils (derrière le cadre) */
        .visual-rings {
          position: absolute;
          z-index: 0;
          width: min(62vmin, 620px);
          height: min(62vmin, 620px);
          border-radius: 50%;
          background:
            radial-gradient(closest-side, rgba(124, 92, 255, .18), transparent 70%),
            conic-gradient(from 0deg, rgba(0, 212, 255, .12), rgba(124, 92, 255, .12), rgba(23, 215, 155, .12), rgba(0, 212, 255, .12));
          filter: blur(20px);
          animation: ringsSpin 36s linear infinite;
        }

        @keyframes ringsSpin {
          to {
            transform: rotate(360deg);
          }
        }

        /* Halos existants */
        .profile-orb {
          position: absolute;
          width: min(54vmin, 540px);
          height: min(54vmin, 540px);
          border-radius: 50%;
          background:
            radial-gradient(closest-side, rgba(124, 92, 255, .34), transparent 70%),
            conic-gradient(from 90deg, rgba(0, 212, 255, .18), rgba(124, 92, 255, .18), rgba(23, 215, 155, .18), rgba(0, 212, 255, .18));
          filter: blur(28px);
          z-index: 0;
          transform: translateY(4%);
          animation: orbPulse 11s ease-in-out infinite;
        }

        .profile-glow {
          position: absolute;
          inset: -12%;
          background: radial-gradient(closest-side, rgba(124, 92, 255, .25), transparent 70%);
          filter: blur(36px);
          z-index: 0;
        }

        @keyframes orbPulse {

          0%,
          100% {
            transform: translateY(4%) scale(1)
          }

          50% {
            transform: translateY(0) scale(1.03)
          }
        }

        /* Cadre “glass + gradient ring” avec légende */
        .visual-frame {
          --r: 22px;
          position: relative;
          z-index: 1;
          padding: 12px;
          border-radius: var(--r);
          backdrop-filter: blur(6px) saturate(120%);
          background: linear-gradient(180deg, var(--elev-2), var(--elev-1));
          border: 1px solid var(--elev-3);
          box-shadow: var(--shadow-lg), inset 0 0 30px rgba(0, 212, 255, .10);
          transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
          will-change: transform;
        }

        .visual-frame:hover {
          transform: translateY(-2px);
          box-shadow: 0 40px 90px rgba(0, 0, 0, .35), inset 0 0 30px rgba(0, 212, 255, .10);
        }

        /* Bordure dégradée (anneau) */
        .visual-border {
          content: "";
          position: absolute;
          inset: -1px;
          border-radius: var(--r);
          pointer-events: none;
          background: conic-gradient(from 210deg,
              rgba(0, 212, 255, .25),
              rgba(124, 92, 255, .25),
              rgba(23, 215, 155, .25),
              rgba(0, 212, 255, .25));
          -webkit-mask:
            linear-gradient(#000, #000) content-box,
            linear-gradient(#000, #000);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          padding: 1px;
          opacity: .9;
        }

        /* Image */
        .visual-img {
          display: block;
          width: min(380px, 74vw);
          aspect-ratio: 1 / 1;
          object-fit: cover;
          border-radius: 16px;
          filter: saturate(1.03) contrast(1.03);
          box-shadow: 0 40px 90px rgba(0, 0, 0, .35);
          transform: translateZ(0);
        }

        /* Légende sous l’image */
        .visual-caption {
          display: grid;
          gap: 2px;
          margin-top: 10px;
          text-align: center;
        }

        .caption-title {
          font-weight: 800;
          letter-spacing: .2px;
        }

        .caption-sub {
          color: var(--muted);
          font-size: 12px;
        }

        /* Badges techniques flottants */
        .visual-badges {
          position: absolute;
          inset: 0;
          z-index: 2;
          pointer-events: none;
        }

        .v-badge {
          position: absolute;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 10px;
          border-radius: 999px;
          background: var(--elev-1);
          border: 1px solid var(--elev-3);
          color: var(--text);
          font-size: 12px;
          font-weight: 700;
          filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .22));
          transform: translateZ(0);
        }

        .v-badge i {
          width: 16px;
          height: 16px;
        }

        /* Placement des 3 badges (autour de l’image) */
        .visual-badges .v-badge:nth-child(1) {
          top: 6%;
          left: 8%;
          transform: translateY(0);
          animation: bob1 6s ease-in-out infinite;
        }

        .visual-badges .v-badge:nth-child(2) {
          top: 20%;
          right: -4%;
          transform: translateY(0);
          animation: bob2 7s ease-in-out infinite;
        }

        .visual-badges .v-badge:nth-child(3) {
          bottom: 6%;
          left: -2%;
          transform: translateY(0);
          animation: bob3 5.6s ease-in-out infinite;
        }

        @keyframes bob1 {
          50% {
            transform: translateY(-6px);
          }
        }

        @keyframes bob2 {
          50% {
            transform: translateY(7px);
          }
        }

        @keyframes bob3 {
          50% {
            transform: translateY(-5px);
          }
        }

        /* =========================
   Section divider (hérité)
   ========================= */
        .section-divider {
          position: relative;
        }

        .section-divider::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: -1px;
          height: 64px;
          background: var(--divider);
          opacity: .55;
          pointer-events: none;
        }

        /* =========================
   Responsivité
   ========================= */
        @media (max-width: 1200px) {
          .hero-content {
            grid-template-columns: 1fr;
          }

          .hero-visual {
            order: -1;
          }

          /* image au-dessus sur tablette */
        }

        @media (max-width: 780px) {
          .hero {
            min-height: 86vh;
            padding: 48px 0;
          }

          .visual-img {
            width: min(340px, 80vw);
          }

          .hero-title {
            font-size: clamp(30px, 10vw, 56px);
          }

          .hero-cta {
            gap: 10px;
          }

          .visual-badges .v-badge:nth-child(2) {
            right: 2%;
          }

          .visual-badges .v-badge:nth-child(3) {
            left: 2%;
          }
        }

        @media (max-width: 520px) {
          .visual-img {
            width: min(300px, 88vw);
          }

          .v-badge {
            font-size: 11px;
            padding: 7px 9px;
          }

          .hero-stats li {
            font-size: 11px;
            padding: 7px 9px;
          }
        }

        /* Accessibilité: respecte la préférence “réduire les animations” */
        @media (prefers-reduced-motion: reduce) {

          .hero-title .shine::after,
          .visual-rings,
          .profile-orb,
          .v-badge {
            animation: none !important;
          }
        }

        /* Skills */

        /* arrière-plan subtil de la section skills */
        #skills {
          position: relative;
          overflow: hidden;
        }

        #skills::before {
          content: "";
          position: absolute;
          inset: -20% -10% -10% -10%;
          background:
            radial-gradient(900px 600px at 80% 10%, rgba(124, 92, 255, .10), transparent 60%),
            radial-gradient(600px 400px at 10% 70%, rgba(0, 212, 255, .10), transparent 60%),
            linear-gradient(180deg, transparent, color-mix(in oklab, var(--bg) 88%, transparent) 80%);
          pointer-events: none;
          z-index: 0;
        }

        /* grille fluide avec colonnes élastiques */
        .skills-grid {
          position: relative;
          z-index: 1;
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 20px;
        }

        @media (max-width: 1024px) {
          .skills-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }

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

        /* carte catégorie = cadre verre + bord dégradé + halo */
        .skill-category {
          --accent: var(--skills-accent);
          --glow: var(--skills-glow);

          position: relative;
          padding: 18px;
          border-radius: calc(var(--radius) + 2px);
          background: color-mix(in oklab, var(--surface) 80%, transparent);
          border: 1px solid color-mix(in oklab, var(--elev-3) 70%, var(--accent));
          box-shadow: 0 16px 42px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .02);
          overflow: hidden;
          transform: translateZ(0);
          transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s, background .35s;
        }

        .skill-category::before {
          /* contour dégradé */
          content: "";
          position: absolute;
          inset: 0;
          border-radius: inherit;
          padding: 1px;
          background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 70%, transparent), transparent 30%, color-mix(in oklab, var(--secondary) 60%, transparent) 75%);
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          pointer-events: none;
          opacity: .8;
        }

        .skill-category::after {
          /* halo interne */
          content: "";
          position: absolute;
          inset: -30% -40% auto -40%;
          height: 60%;
          background: radial-gradient(closest-side, var(--glow), transparent 70%);
          filter: blur(18px);
          pointer-events: none;
        }

        .skill-category:hover {
          transform: translateY(-4px) scale(1.01);
          box-shadow: 0 26px 64px rgba(124, 92, 255, .22);
          border-color: color-mix(in oklab, var(--accent) 60%, var(--elev-3));
        }

        /* titre catégorie + puce accent + soulignement */
        .skill-category h3 {
          position: relative;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin: 0 0 14px;
          font-size: 15px;
          letter-spacing: .28px;
          text-transform: uppercase;
          color: color-mix(in oklab, var(--text) 92%, var(--accent));
        }

        .skill-category h3::before {
          content: "";
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: radial-gradient(circle at 30% 30%, var(--accent), var(--secondary));
          box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
        }

        .skill-category h3::after {
          content: "";
          flex: 1 1 auto;
          height: 1px;
          background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 40%, transparent), transparent 60%);
          margin-left: 8px;
          opacity: .65;
        }

        /* conteneur des tags: rangées respirantes */
        .skill-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 10px 8px;
        }

        /* “pills” premium avec sheen + focus états cohérents */
        .skill-tag {
          --pill-bg: color-mix(in oklab, var(--elev-1) 70%, var(--accent));
          --pill-br: color-mix(in oklab, var(--elev-3) 60%, var(--accent));
          position: relative;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 12px;
          font-weight: 600;
          padding: 8px 12px;
          border-radius: 999px;
          color: color-mix(in oklab, var(--muted) 78%, var(--text));
          background: linear-gradient(180deg, var(--pill-bg), var(--elev-1));
          border: 1px solid var(--pill-br);
          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02), 0 8px 24px rgba(0, 0, 0, .12);
          transition: transform .2s ease, background .25s ease, color .2s ease, border-color .25s ease;
          will-change: transform;
        }

        .skill-tag::after {
          /* lueur diagonale subtile */
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 40%);
          opacity: .0;
          transition: opacity .35s ease;
          border-radius: inherit;
          pointer-events: none;
        }

        .skill-tag:hover {
          transform: translateY(-2px);
          color: var(--text);
          border-color: color-mix(in oklab, var(--accent) 60%, var(--elev-3));
          background: linear-gradient(180deg, color-mix(in oklab, var(--pill-bg) 70%, var(--accent)), var(--elev-1));
        }

        .skill-tag:hover::after {
          opacity: .9;
        }

        .skill-tag:focus-visible {
          outline: none;
          box-shadow: var(--ring);
        }

        /* couleurs d’accent par catégorie via [data-cat] 
   (poses-les via JS pour un visuel plus distinctif) */
        .skill-category[data-cat="Langages"] {
          --accent: #00d4ff;
          --glow: rgba(0, 212, 255, .16);
        }

        .skill-category[data-cat="Frameworks"] {
          --accent: #7c5cff;
          --glow: rgba(124, 92, 255, .18);
        }

        .skill-category[data-cat="Bases de données"] {
          --accent: #17d79b;
          --glow: rgba(23, 215, 155, .18);
        }

        .skill-category[data-cat="Services Web"] {
          --accent: #ffb454;
          --glow: rgba(255, 180, 84, .16);
        }

        .skill-category[data-cat="Outils & Environnements"] {
          --accent: #a7afbf;
          --glow: rgba(167, 175, 191, .15);
        }

        .skill-category[data-cat="Autres"] {
          --accent: #ff5470;
          --glow: rgba(255, 84, 112, .16);
        }

        /* micro-tilt au survol de la carte (optionnel CSS-only) */
        @media (hover:hover) {
          .skill-category:hover {
            transform: perspective(800px) rotateX(1.2deg) rotateY(-1.2deg) translateY(-4px);
          }
        }

        /* ===== Projects — Aurora Cards ===== */
        /* ============ Projects — Masterpiece Aurora Neo ============ */

        /* Grille responsive */
        /* ============ Projects — Masterpiece Aurora Neo ============ */

        /* Grille responsive */
        .projects-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 22px;
        }

        @media (max-width:1024px) {
          .projects-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }

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

        /* -------- Card : profondeur, traits irisés, micro-parallaxe -------- */
        .project-card {
          position: relative;
          border-radius: calc(var(--radius) + 2px);
          background:
            linear-gradient(180deg,
              color-mix(in oklab, var(--elev-2) 75%, transparent),
              color-mix(in oklab, var(--elev-1) 90%, transparent)),
            radial-gradient(120% 120% at -20% -10%,
              color-mix(in oklab, var(--secondary) 10%, transparent), transparent 60%),
            radial-gradient(120% 120% at 120% 110%,
              color-mix(in oklab, var(--primary) 10%, transparent), transparent 60%);
          border: 1px solid color-mix(in oklab, var(--elev-3) 85%, var(--primary) 15%);
          box-shadow:
            0 10px 24px rgba(0, 0, 0, .20),
            inset 0 1px 0 rgba(255, 255, 255, .04);
          overflow: hidden;
          transform: perspective(1200px) translateZ(0);
          transition: transform .45s cubic-bezier(.2, .8, .2, 1),
            box-shadow .35s,
            border-color .35s,
            background .35s;
          isolation: isolate;
          will-change: transform;
          cursor: pointer;
        }

        .project-card::before {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: inherit;
          pointer-events: none;
          background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .08) 25%, transparent 45%) border-box;
          mask: linear-gradient(#000, #000) padding-box, linear-gradient(#000, #000);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          opacity: .6;
        }

        .project-card::after {
          content: "";
          position: absolute;
          inset: 1px;
          border-radius: inherit;
          pointer-events: none;
          background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .09) 18%, transparent 36%);
          transform: translateX(-120%);
          transition: transform .9s ease;
        }

        .project-card:hover::after {
          transform: translateX(120%);
        }

        .project-card:hover {
          transform: perspective(1200px) rotateX(1.6deg) rotateY(-1.6deg) translateY(-2px);
          border-color: color-mix(in oklab, var(--secondary) 55%, var(--elev-3));
          box-shadow: 0 26px 68px rgba(124, 92, 255, .22), 0 8px 18px rgba(0, 0, 0, .28);
        }

        .project-card:focus,
        .project-card:focus-visible {
          outline: none;
          box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 55%, transparent),
            0 18px 44px rgba(124, 92, 255, .18);
        }

        /* -------- Zone média (16:9) avec plateau logos & mode screenshot -------- */
        .project-media {
          position: relative;
          aspect-ratio: 16/9;
          display: grid;
          place-items: center;
          overflow: hidden;
          border-bottom: 1px solid var(--elev-3);
          background:
            radial-gradient(260px 180px at 85% 15%, color-mix(in oklab, var(--secondary) 16%, transparent), transparent 60%),
            radial-gradient(220px 160px at 15% 85%, color-mix(in oklab, var(--primary) 16%, transparent), transparent 60%),
            linear-gradient(180deg, color-mix(in oklab, var(--surface) 45%, var(--bg)), color-mix(in oklab, var(--surface) 12%, var(--bg)));
        }

        /* Label discret (via data-label) */
        .project-media::after {
          content: attr(data-label);
          position: absolute;
          left: 12px;
          bottom: 12px;
          font-size: 12px;
          line-height: 1;
          color: var(--muted);
          padding: 6px 10px;
          border-radius: 999px;
          background: color-mix(in oklab, var(--elev-1) 65%, var(--primary));
          border: 1px solid var(--elev-3);
          opacity: 0;
          transform: translateY(4px);
          transition: opacity .25s ease, transform .25s ease;
          pointer-events: none;
        }

        .project-card:hover .project-media::after {
          opacity: 1;
          transform: translateY(0);
        }

        /* Image par défaut = logo (contain) */
        .project-media>img {
          max-width: 82%;
          max-height: 72%;
          object-fit: contain;
          display: block;
          filter: saturate(1.05) contrast(1.03);
          transform: translateZ(0);
          transition: transform .45s ease, filter .35s ease, opacity .35s ease;
        }

        /* Option plateau “glass” (ajouter .logo-plate sur l’img si souhaité) */
        .project-media>img.logo-plate {
          padding: clamp(8px, 1.2vw, 14px);
          border-radius: 16px;
          background:
            linear-gradient(180deg, color-mix(in oklab, var(--surface) 82%, transparent),
              color-mix(in oklab, var(--surface) 48%, transparent));
          border: 1px solid var(--elev-3);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 32px rgba(0, 0, 0, .28);
        }

        /* Variante screenshot plein cadre */
        .project-media>img.is-screenshot {
          width: 100%;
          height: 100%;
          max-width: none;
          max-height: none;
          object-fit: cover;
          border: 0;
          padding: 0;
          background: none;
          box-shadow: none;
        }

        /* Micro-motion média */
        .project-card:hover .project-media>img {
          transform: translateY(-2px) scale(1.02);
          filter: saturate(1.10) contrast(1.06);
        }

        /* -------- Play centré (si vidéo dispo) -------- */
        /* --- Fix Play centré (écrase les anciens styles) --- */
        .project-media {
          position: relative;
        }

        /* parent d’ancrage */

        .project-media .project-play {
          position: absolute;
          /* on annule toute valeur héritée type inset/bottom/left */
          inset: auto !important;
          bottom: auto !important;
          right: auto !important;

          left: 50% !important;
          top: 50% !important;
          transform: translate(-50%, -50%) scale(.96) !important;

          width: 64px;
          height: 64px;
          display: grid;
          place-items: center;
          border-radius: 999px;
          background:
            radial-gradient(120% 120% at 30% 30%, rgba(255, 255, 255, .18), transparent 55%),
            color-mix(in oklab, var(--elev-1) 65%, var(--secondary));
          border: 1px solid color-mix(in oklab, var(--secondary) 42%, var(--elev-3));
          box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
          backdrop-filter: blur(6px) saturate(120%);
          z-index: 2;
          opacity: 0;
          transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
          pointer-events: none;
          /* laisse la carte gérer le clic */
        }

        .project-card:hover .project-play {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1) !important;
          box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
        }

        .project-media .project-play i {
          width: 28px;
          height: 28px;
        }

        .project-card:hover .project-play {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
          box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
        }

        .project-play i {
          width: 28px;
          height: 28px;
        }

        /* -------- Chip statut -------- */
        .project-chip {
          position: absolute;
          left: 12px;
          top: 12px;
          padding: 6px 10px;
          font-size: 11px;
          font-weight: 700;
          border-radius: 999px;
          color: var(--text);
          background: color-mix(in oklab, var(--primary) 22%, var(--elev-1));
          border: 1px solid color-mix(in oklab, var(--primary) 42%, var(--elev-3));
          backdrop-filter: blur(6px);
        }

        /* -------- Corps -------- */
        .project-content {
          padding: 16px 14px 52px;
        }

        .project-title {
          margin: 0 0 6px;
          font-size: 18px;
          letter-spacing: .2px;
        }

        .project-description {
          margin: 0;
          color: var(--muted);
        }

        /* Tech tags */
        .project-tech {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 10px;
        }

        .tech-tag {
          font-size: 11px;
          padding: 6px 9px;
          border-radius: 999px;
          background: var(--elev-1);
          border: 1px solid var(--elev-3);
          color: var(--muted);
          transition: transform .2s ease, background .25s ease;
        }

        .tech-tag:hover {
          transform: translateY(-1px);
          background: color-mix(in oklab, var(--elev-1) 60%, var(--primary));
          color: var(--text);
        }

        /* -------- CTA flottant -------- */
        .project-cta {
          position: absolute;
          right: 12px;
          bottom: 12px;
          z-index: 3;
          display: flex;
          gap: 8px;
          opacity: 0;
          transform: translateY(6px);
          transition: opacity .28s ease, transform .28s ease;
        }

        .project-card:hover .project-cta {
          opacity: 1;
          transform: translateY(0);
        }

        .project-cta .btn {
          padding: 8px 12px;
          border-radius: 999px;
          font-size: 12px;
        }

        /* Focus visible sur la carte entière (a11y) */
        .project-card:focus-visible .project-cta {
          opacity: 1;
          transform: none;
        }

        /* Petits écrans : plus de place pour les logos */
        @media (max-width:560px) {
          .project-media>img {
            max-width: 88%;
            max-height: 74%;
          }

          .project-content {
            padding-bottom: 58px;
          }
        }

        /* Motion safety */
        @media (prefers-reduced-motion: reduce) {

          .project-card,
          .project-card::after,
          .project-media>img,
          .project-media::after,
          .project-cta,
          .project-play {
            transition: none !important;
            animation: none !important;
          }
        }


        /* ========== Base (garde hidden si présent) ========= */
        .modal[hidden] {
          display: none !important;
        }

        .modal {
          position: fixed;
          inset: 0;
          z-index: 9999;
          display: grid;
          place-items: center;
          /* état initial (avant .is-open) */
          opacity: 0;
          pointer-events: none;
        }

        /* Backdrop: dégradé + blur + grain discret */
        .modal-backdrop {
          position: absolute;
          inset: 0;
          background:
            radial-gradient(1200px 800px at 80% 10%, color-mix(in oklab, var(--secondary) 14%, transparent), transparent 60%),
            radial-gradient(1000px 700px at 10% 90%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 60%),
            color-mix(in oklab, var(--bg) 70%, black);
          backdrop-filter: blur(10px) saturate(120%);
          opacity: 0;
          transition: opacity .26s ease;
          isolation: isolate;
        }

        .modal-backdrop::after {
          content: "";
          position: absolute;
          inset: 0;
          opacity: .06;
          background-image:
            radial-gradient(1px 1px at 25% 35%, #fff, transparent 60%),
            radial-gradient(1px 1px at 65% 70%, #fff, transparent 60%);
          mix-blend-mode: overlay;
          pointer-events: none;
        }

        /* Dialog: glass + double bord lumineux + ombre douce */
        .modal-dialog {
          position: relative;
          width: min(980px, 92vw);
          max-height: 88vh;
          border-radius: 20px;
          overflow: hidden;
          display: grid;
          grid-template-columns: 1.05fr .95fr;
          background:
            linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), color-mix(in oklab, var(--surface) 60%, transparent)),
            linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--surface) 80%, black));
          border: 1px solid color-mix(in oklab, var(--elev-3) 70%, var(--primary));
          box-shadow:
            0 40px 120px rgba(0, 0, 0, .45),
            0 10px 30px rgba(0, 0, 0, .35);
          /* état initial */
          transform: translateY(14px) scale(.98);
          opacity: 0;
          transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .28s ease, box-shadow .28s ease;
          will-change: transform, opacity;
          isolation: isolate;
        }

        /* ring lumineux subtil autour de la boîte */
        .modal-dialog::before {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: inherit;
          padding: 1px;
          background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 35%, transparent), color-mix(in oklab, var(--secondary) 35%, transparent));
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          opacity: .18;
          pointer-events: none;
        }

        /* light sweep au hover (bonus) */
        .modal-dialog::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .08) 18%, transparent 35%);
          transform: translateX(-120%);
          transition: transform .9s ease;
          pointer-events: none;
        }

        .modal-dialog:hover::after {
          transform: translateX(120%);
        }

        @media (max-width: 900px) {
          .modal-dialog {
            grid-template-columns: 1fr;
            width: min(760px, 94vw);
          }
        }

        /* Close button */
        .modal-close {
          position: absolute;
          top: 12px;
          right: 12px;
          border: 0;
          background: color-mix(in oklab, var(--elev-1) 80%, transparent);
          border: 1px solid var(--elev-3);
          border-radius: 12px;
          padding: 8px;
          color: var(--text);
          cursor: pointer;
          box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
          transition: transform .18s ease, background .2s ease;
        }

        .modal-close:hover {
          transform: translateY(-1px);
        }

        /* Media : ratio fixe + vignette élégante */
        .modal-media {
          position: relative;
          display: grid;
          place-items: center;
          aspect-ratio: 16/11;
          /* stabilise la hauteur => pas de saut à l’ouverture */
          min-height: 280px;
          background:
            radial-gradient(300px 200px at 85% 20%, color-mix(in oklab, var(--secondary) 16%, transparent), transparent 60%),
            radial-gradient(260px 180px at 15% 80%, color-mix(in oklab, var(--primary) 16%, transparent), transparent 60%),
            #0b0f16;
          overflow: hidden;
        }

        .modal-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .modal-video iframe,
        .modal-video video {
          width: 100%;
          height: 100%;
          display: block;
          border: 0;
        }

        /* Body */
        .modal-body {
          padding: 20px 18px 18px;
          overflow: auto;
        }

        .modal-header {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 10px;
          margin-bottom: 10px;
        }

        .modal-title {
          margin: 0;
          font-size: clamp(18px, 2.4vw, 24px);
          letter-spacing: .2px;
        }

        .modal-status {
          color: var(--primary);
          background: color-mix(in oklab, var(--primary) 12%, var(--elev-1));
          border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--elev-3));
          padding: 4px 10px;
          border-radius: 999px;
          font-weight: 700;
          font-size: 12px;
        }

        .modal-desc {
          color: var(--muted);
          line-height: 1.65;
          margin: 10px 0 2px;
        }

        .modal-tech {
          margin-top: 12px;
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }

        .modal-badge {
          font-size: 12px;
          font-weight: 700;
          padding: 6px 10px;
          border-radius: 999px;
          background: var(--elev-1);
          border: 1px solid var(--elev-3);
          color: var(--muted);
          transition: transform .18s ease, background .2s ease, color .2s ease;
        }

        .modal-badge:hover {
          transform: translateY(-1px);
          background: color-mix(in oklab, var(--elev-1) 60%, var(--primary));
          color: var(--text);
        }

        .modal-actions {
          display: flex;
          gap: 10px;
          margin-top: 14px;
          flex-wrap: wrap;
        }

        /* ========== States/animations ========== */
        .modal.is-open {
          opacity: 1;
          pointer-events: auto;
        }

        .modal.is-open .modal-backdrop {
          opacity: 1;
        }

        .modal.is-open .modal-dialog {
          opacity: 1;
          transform: translateY(0) scale(1);
        }

        /* Closing state (évite retrait brutal) */
        .modal.is-closing {
          pointer-events: none;
        }


        /* Petit badge "play" sur la vignette carte */
        .project-play {
          position: absolute;
          z-index: 2;
          top: 10px;
          left: 10px;
          display: grid;
          place-items: center;
          width: 36px;
          height: 36px;
          border-radius: 999px;
          background: color-mix(in oklab, var(--secondary) 16%, var(--elev-1));
          border: 1px solid color-mix(in oklab, var(--secondary) 30%, var(--elev-3));
        }

        .project-play i {
          width: 20px;
          height: 20px;
        }


        /* ===== Timeline (premium, responsive, alternée sur desktop) ===== */
        .timeline {
          position: relative;
          display: grid;
          gap: 20px;
          padding-left: 36px;
          /* ligne latérale pour mobile */
          isolation: isolate;
        }

        /* Ligne verticale (mobile / tablettes) */
        .timeline::before {
          content: "";
          position: absolute;
          left: 18px;
          top: 0;
          bottom: 0;
          width: 2px;
          background: linear-gradient(var(--secondary), var(--primary));
          opacity: .35;
          border-radius: 2px;
        }

        /* Cartes */
        .timeline-item {
          position: relative;
          padding: 16px 16px 14px;
          border-radius: var(--radius);
          background: linear-gradient(180deg, var(--elev-2), var(--elev-1));
          border: 1px solid var(--elev-3);
          box-shadow: var(--shadow-md);
          transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }

        /* Effet hover/focus pour lisibilité + affordance */
        .timeline-item:hover {
          transform: translateY(-2px);
          box-shadow: 0 18px 46px rgba(124, 92, 255, .18);
          border-color: color-mix(in oklab, var(--secondary) 40%, var(--elev-3));
        }

        .timeline-item:focus-within {
          box-shadow: var(--ring), 0 18px 46px rgba(124, 92, 255, .14);
        }

        /* Pastille (mobile) */
        .timeline-item::before {
          content: "";
          position: absolute;
          left: -20px;
          top: 20px;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: radial-gradient(circle at 35% 35%, var(--primary), var(--secondary));
          box-shadow: 0 0 0 3px rgba(124, 92, 255, .18);
        }

        /* Header de carte (inutile de changer ton HTML; ces classes sont déjà là) */
        .timeline-date {
          color: var(--muted);
          font-size: 12px;
          margin-bottom: 6px;
          letter-spacing: .2px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .timeline-title {
          margin: 0 0 8px;
          font-size: 18px;
          letter-spacing: .2px;
        }

        .timeline-company {
          color: color-mix(in oklab, var(--muted) 88%, var(--text));
          margin-bottom: 10px;
        }

        /* Chips (compétences) – cohérentes avec tes tech-tags, plus denses */
        .timeline-item .project-tech {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }

        .timeline-item .tech-tag {
          font-size: 11.5px;
          padding: 6px 9px;
          border-radius: 999px;
          background: var(--elev-1);
          border: 1px solid var(--elev-3);
          color: var(--muted);
          transition: transform .18s ease, background .22s ease, border-color .22s ease;
        }

        .timeline-item .tech-tag:hover {
          transform: translateY(-1px);
          background: color-mix(in oklab, var(--elev-1) 55%, var(--primary));
          border-color: color-mix(in oklab, var(--primary) 40%, var(--elev-3));
          color: var(--text);
        }

        /* ————— Desktop : alternance 2 colonnes avec colonne centrale ————— */
        @media (min-width:980px) {
          .timeline {
            grid-template-columns: 1fr 1fr;
            gap: 28px 36px;
            padding-left: 0;
          }

          /* Ligne centrale */
          .timeline::before {
            left: 50%;
            transform: translateX(-50%);
            width: 3px;
            opacity: .28;
          }

          /* Reset mobile marker */
          .timeline-item::before {
            left: auto;
          }

          /* Colonne alternée */
          .timeline-item:nth-child(odd) {
            grid-column: 1;
            margin-right: 22px;
          }

          .timeline-item:nth-child(even) {
            grid-column: 2;
            margin-left: 22px;
          }

          /* Connecteurs vers la ligne centrale */
          .timeline-item::after {
            content: "";
            position: absolute;
            top: 26px;
            width: 24px;
            height: 2px;
            background: linear-gradient(90deg, var(--secondary), var(--primary));
            opacity: .6;
          }

          .timeline-item:nth-child(odd)::after {
            right: -22px;
            /* pointe vers la ligne centrale */
          }

          .timeline-item:nth-child(even)::after {
            left: -22px;
            transform: scaleX(-1);
            /* même dégradé directionnel */
          }

          /* Pastilles (desktop) positionnées côté centre */
          .timeline-item::before {
            top: 20px;
            box-shadow: 0 0 0 4px rgba(124, 92, 255, .16);
          }

          .timeline-item:nth-child(odd)::before {
            right: -32px;
            /* pastille côté ligne centrale */
          }

          .timeline-item:nth-child(even)::before {
            left: -32px;
          }
        }

        /* ————— Petits écrans : compacité & rythme vertical ————— */
        @media (max-width:560px) {
          .timeline {
            gap: 14px;
            padding-left: 30px;
          }

          .timeline-item {
            padding: 14px 14px 12px;
          }

          .timeline-item::before {
            left: -18px;
            width: 10px;
            height: 10px;
          }

          .timeline-title {
            font-size: 17px;
            margin-bottom: 6px;
          }

          .timeline-company {
            margin-bottom: 8px;
          }

          .timeline-date {
            font-size: 12px;
          }
        }

        /* ————— Thème clair : légère augmentation du contraste de la ligne ————— */
        [data-theme="light"] .timeline::before {
          opacity: .45;
        }


        /* Contact */
        .contact-form {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 14px;
          padding: 16px;
          background: linear-gradient(180deg, var(--elev-2), var(--elev-1));
          border: 1px solid var(--elev-3);
          border-radius: var(--radius);
          box-shadow: var(--shadow-md)
        }

        .form-group {
          display: grid;
          gap: 6px
        }

        .form-label {
          font-weight: 600;
          color: var(--muted)
        }

        .form-input,
        .form-textarea {
          width: 100%;
          padding: 12px 14px;
          border: 1px solid var(--elev-3);
          background: var(--surface);
          color: var(--text);
          border-radius: 12px;
          box-shadow: inset 0 4px 10px rgba(0, 0, 0, .06)
        }

        .form-textarea {
          min-height: 120px;
          resize: vertical;
          grid-column: span 2
        }

        .contact-form .btn {
          grid-column: span 2;
          justify-content: center
        }

        .contact-info {
          margin-top: 18px;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px
        }

        .contact-item {
          display: grid;
          gap: 8px;
          padding: 14px;
          border-radius: var(--radius);
          background: linear-gradient(180deg, var(--elev-2), var(--elev-1));
          border: 1px solid var(--elev-3);
          box-shadow: var(--shadow-md)
        }

        .contact-icon {
          width: 38px;
          height: 38px;
          display: grid;
          place-items: center;
          border-radius: 12px;
          background: color-mix(in oklab, var(--primary) 12%, var(--elev-1));
          border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--elev-3))
        }

        .contact-title {
          margin: 0;
          font-size: 14px;
          color: var(--muted)
        }

        .contact-value a {
          color: var(--text);
          border-bottom: 1px dashed var(--elev-3)
        }

        /* Footer */
        .footer {
          border-top: 1px solid var(--elev-3);
          padding: 24px 0;
          background: linear-gradient(to top, color-mix(in oklab, var(--bg) 70%, transparent), transparent)
        }

        .social-links {
          display: flex;
          gap: 10px;
          margin-bottom: 10px
        }

        .social-link {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 12px;
          background: var(--elev-1);
          border: 1px solid var(--elev-3);
          transition: transform .2s, background .2s
        }

        .social-link:hover {
          transform: translateY(-2px);
          background: color-mix(in oklab, var(--elev-1) 60%, var(--secondary))
        }

        /* Profile (hero right) */
        .hero-profile {
          position: relative;
          display: grid;
          place-items: center
        }

        .profile-orb {
          position: absolute;
          width: min(52vmin, 520px);
          height: min(52vmin, 520px);
          border-radius: 50%;
          background: radial-gradient(closest-side, rgba(124, 92, 255, .45), transparent 70%),
            conic-gradient(from 90deg, rgba(0, 212, 255, .22), rgba(124, 92, 255, .22), rgba(23, 215, 155, .22), rgba(0, 212, 255, .22));
          filter: blur(30px);
          z-index: 0;
          transform: translateY(4%);
          animation: orbPulse 10s ease-in-out infinite
        }

        @keyframes orbPulse {

          0%,
          100% {
            transform: translateY(4%) scale(1)
          }

          50% {
            transform: translateY(0) scale(1.03)
          }
        }

        .profile-glow {
          position: absolute;
          inset: -14%;
          background: radial-gradient(closest-side, rgba(124, 92, 255, .35), transparent 70%);
          filter: blur(40px);
          z-index: 0
        }

        .profile-image-container {
          position: relative;
          z-index: 1;
          padding: 10px;
          border-radius: 22px;
          background: linear-gradient(180deg, var(--elev-2), var(--elev-1));
          border: 1px solid var(--elev-3);
          box-shadow: var(--shadow-lg), inset 0 0 30px rgba(0, 212, 255, .10)
        }

        .profile-image {
          display: block;
          width: min(340px, 70vw);
          aspect-ratio: 1/1;
          object-fit: cover;
          border-radius: 16px;
          animation: float 6s ease-in-out infinite
        }

        @keyframes float {

          0%,
          100% {
            transform: translateY(0)
          }

          50% {
            transform: translateY(-10px)
          }
        }

        /* Responsive */
        /* ===== Mobile nav ===== */
        @media (max-width: 920px) {
          .nav {
            gap: 10px
          }

          .nav-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center
          }

          /* pile boutons à droite */
          .header .container {
            gap: 10px;
          }

          /* la liste devient un panneau */
          .nav-links {
            position: fixed;
            inset: auto 0 0 0;
            /* ancré en bas, pleine largeur */
            top: 64px;
            /* sous le header sticky */
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin: 0;
            padding: 12px;
            background: linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--bg) 92%, transparent));
            border-top: 1px solid var(--elev-3);
            max-height: 70vh;
            overflow: auto;
            transform: translateY(8px);
            opacity: 0;
            pointer-events: none;
            transition: transform .25s ease, opacity .25s ease;
            box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
            backdrop-filter: blur(10px) saturate(140%);
          }

          .nav-links[data-open] {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
            height: fit-content;
          }

          .nav-links li a {
            display: block;
            padding: 12px 10px;
            border-radius: 12px;
            background: transparent;
          }

          /* on cache la liste en desktop pour garder l’ancien layout */
          .nav-links[data-mobile-closed] {
            /* juste un marqueur au chargement */
            transform: translateY(8px);
            opacity: 0;
            pointer-events: none;
          }
        }

        /* réduit la motion sur l’ouverture du panneau */
        @media (prefers-reduced-motion: reduce) {
          .nav-links {
            transition: none !important
          }
        }

        @media (max-width:1080px) {
          .hero-content {
            grid-template-columns: 1fr
          }

          .profile-orb {
            width: 64vmin;
            height: 64vmin
          }
        }

        @media (max-width:920px) {
          .skills-grid {
            grid-template-columns: repeat(2, 1fr)
          }

          .projects-grid {
            grid-template-columns: repeat(2, 1fr)
          }

          .contact-info {
            grid-template-columns: repeat(2, 1fr)
          }
        }

        @media (max-width:560px) {
          .hero {
            min-height: 78vh;
            padding: 48px 0
          }

          .hero-title {
            font-size: clamp(30px, 10vw, 54px)
          }

          .skills-grid,
          .projects-grid {
            grid-template-columns: 1fr
          }

          .contact-form {
            grid-template-columns: 1fr
          }

          .form-textarea,
          .contact-form .btn {
            grid-column: auto
          }
        }

        /* Reduced motion */
        @media (prefers-reduced-motion:reduce) {
          .fade-up {
            transition: none !important
          }

          .project-card,
          .btn,
          .profile-image {
            transition: none !important;
            animation: none !important
          }
        }

        /* Helpers */
        .spin {
          animation: spin 1s linear infinite
        }

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