:root {
      --glass-bg: rgba(255,255,255,0.08);
      --glass-border: rgba(99,102,241,0.35);
      --indigo-bg: linear-gradient(135deg, #0F172A 0%, #1E3A8A 30%, #3730A3 70%, #020617 100%);
      --shadow-glass: 0 25px 80px rgba(30,58,138,0.4);
      --shadow-hover: 0 35px 120px rgba(99,102,241,0.5);
      --text-main: #F8FAFC;
      --text-muted: #CBD5E1;
      --primary: #818CF8;
      --primary-soft: rgba(129,140,248,0.18);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
      background:var(--indigo-bg);
      color:var(--text-main);
      line-height:1.6;
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    .glass{
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      border:1px solid var(--glass-border);
      border-radius:24px;
      box-shadow:var(--shadow-glass);
      transition:all .4s cubic-bezier(.4,0,.2,1);
    }
    .glass:hover{
      transform:translateY(-6px);
      box-shadow:var(--shadow-hover);
    }
    /* Sidebar */
    .sidebar{
      position:fixed;left:84%;top:26%;width:240px;z-index:20;
      padding:2rem;
    }
    .avatar{
      width:70px;height:70px;border-radius:24px;
      background:rgba(248,250,252,.2);
      display:flex;align-items:center;justify-content:center;
      font-size:2.2rem;font-weight:600;margin-bottom:1.5rem;
      margin:auto;
    }
    .profile-mini{text-align:center;margin-bottom:2rem}
    .profile-mini .role{font-size:1.1rem;font-weight:500}
    .profile-mini .location{color:var(--text-muted);font-size:.95rem}
    .quick-links{display:flex;gap:1.5rem;justify-content:center;margin-bottom:1.5rem}
    .quick-links a{font-size:1.3rem;opacity:.8;transition:.3s}
    .quick-links a:hover{opacity:1;transform:scale(1.15)}
    .availability{text-align:center;color:#A78BFA;font-weight:500;font-size:.95rem}
    /* Hero */
    .hero{min-height:100vh;display:flex;align-items:center;
      padding:clamp(2rem,6vw,4rem) clamp(2rem,7vw,10rem);
    }
    .hero-inner{
      max-width:1600px;margin:0 auto;
      display:grid;grid-template-columns:1fr 1fr;
      gap:5rem;align-items:center;
    }
    .hero-text h1{
      font-size:clamp(3.5rem,9vw,7.5rem);
      font-weight:500;line-height:1.1;margin-bottom:1.5rem;
    }
    .hero-text .accent{color:#A78BFA}
    .hero-stats{display:flex;gap:1.8rem;margin-bottom:1.8rem;font-size:1.05rem;opacity:.9}
    .hero-subtitle{font-size:1.3rem;max-width:520px;margin-bottom:2.5rem}
    .highlights{display:flex;flex-direction:column;gap:1rem;margin-bottom:2.8rem}
    .highlights div{position:relative;padding-left:1.5rem;font-size:1rem}
    .highlights div:before{
      content:'';position:absolute;left:0;top:.45rem;width:6px;height:6px;
      border-radius:50%;background:#A78BFA;
    }
    .cta-row{display:flex;gap:1rem;flex-wrap:wrap}
    .btn-pill{
      padding:1rem 2.3rem;border-radius:999px;border:1px solid var(--glass-border);
      font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
      background:rgba(15,23,42,.5);transition:all .35s cubic-bezier(.4,0,.2,1);
    }
    .btn-pill.primary{background:var(--primary-soft);color:var(--text-main)}
    .btn-pill.primary:hover{background:rgba(129,140,248,.3);transform:translateY(-4px) scale(1.02)}
    .btn-pill.ghost{background:rgba(15,23,42,.7);}
    .btn-pill.ghost:hover{background:rgba(15,23,42,.9);transform:translateY(-3px)}
    .hero-visual{justify-self:end;opacity:.95}
    .hero-svg{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 18px 60px rgba(15,23,42,.8))}
    /* Sections génériques */
    .section{
      padding:clamp(3rem,7vh,5rem) clamp(2rem,7vw,10rem);
    }
    .section-header{text-align:center;max-width:620px;margin:0 auto 3.5rem}
    .section-header h2{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:500;margin-bottom:.7rem}
    .section-header p{color:var(--text-muted);font-size:.98rem}
    /* Tools */
    .tools-wrapper{overflow:hidden}
    .tools-marquee{
      display:flex;gap:2rem;animation:marquee 70s linear infinite;
    }
    @keyframes marquee{
      0%{transform:translateX(0)}
      100%{transform:translateX(-50%)}
    }
    .tool-card{
      flex:0 0 360px;padding:2rem;
    }
    .tool-icon{margin-bottom:1.4rem}
    .toolSvgModern{width:64px;height:64px}
    .tool-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem}
    .tool-head h3{font-size:1.2rem;font-weight:500}
    .badge{
      background:rgba(167,139,250,.25);color:#E9D5FF;
      padding:.25rem .7rem;border-radius:999px;font-size:.75rem;
    }
    .tool-desc{font-size:.95rem;color:var(--text-main);margin-bottom:1.2rem}
    .tool-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.4rem}
    .tool-tags span{
      font-size:.8rem;padding:.25rem .7rem;
      background:rgba(248,250,252,.12);border-radius:999px;
    }
    .tool-link{font-size:.9rem;color:var(--primary);font-weight:500}
    /* Timeline */
/* Timeline - Centrée avec marges */
.timeline-section {
  padding: clamp(4rem, 8vh, 6rem) clamp(2rem, 5vw, 8rem);
}

.timeline-wrap {
  max-width: 900px;
  margin: 0 auto; /* ← CENTRE */
}

.timeline-line {
  position: relative;
  margin: 0 auto 0 2rem; /* ← Marge ajustée */
  padding: 2rem 0; /* ← Espacement vertical */
}

.exp {
  display: flex;
  gap: 2rem; /* ← Meilleur espacement */
  margin-bottom: 3.5rem; /* ← Marge entre expériences */
  opacity: 0;
  transform: translateY(40px);
  transition: all .6s ease;
}
    .exp.animate{opacity:1;transform:translateY(0)}
    .exp-dot{
      width:12px;height:12px;border-radius:999px;
      background:#A78BFA;margin-top:.4rem;
    }
    .exp-main{flex:1}
    .exp-period{font-size:.8rem;color:#C4B5FD;margin-bottom:.3rem;letter-spacing:.04em;text-transform:uppercase}
    .exp-title{font-size:1.1rem;font-weight:500;margin-bottom:.15rem}
    .exp-org{color:var(--text-muted);font-size:.95rem;margin-bottom:.7rem}
    .exp-main ul{padding-left:1.1rem;font-size:.95rem}
    .exp-main li{margin-bottom:.35rem}
    /* Skills */
    .skills-grid{
      max-width:1100px;margin:0 auto;
      display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:2rem;
    }
    .skill-card{padding:1.8rem}
    .skill-card h4{font-size:1.1rem;margin-bottom:1rem}
    .skill-tags{display:flex;flex-wrap:wrap;gap:.5rem}
    .skill-tags span{
      font-size:.85rem;padding:.35rem .9rem;
      background:rgba(15,23,42,.8);border-radius:999px;
    }
    /* Compact formation / intérêts */
    .compact-grid{
      max-width:1000px;margin:0 auto;
      display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;
    }
    .edu-item{margin-bottom:1rem;font-size:.94rem}
    .edu-title{font-weight:500}
    .edu-period{color:var(--text-muted);font-size:.8rem;margin-left:.4rem}
    .edu-school{display:block;color:var(--text-muted);font-size:.9rem}
    .interests-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
    .interests-tags span{
      padding:.45rem 1rem;border-radius:999px;
      background:rgba(15,23,42,.85);font-size:.85rem;
    }
    /* Contact */
    .contact-grid{
      max-width:1000px;margin:0 auto;
      display:grid;grid-template-columns:1fr 1fr;gap:2rem;
    }
    .contact-meta{padding:1.8rem}
    .contact-meta-row{margin-bottom:1rem;font-size:.95rem}
    .contact-meta-row span:first-child{display:block;color:var(--text-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
    .contact-meta-row span:last-child{font-weight:500}
    form .field{display:flex;flex-direction:column;margin-bottom:1.2rem;font-size:.9rem}
    form .field span{margin-bottom:.3rem}
    input,textarea{
      border-radius:14px;border:1px solid rgba(148,163,184,.5);
      background:rgba(15,23,42,.85);color:var(--text-main);
      padding:.7rem 1rem;font-family:inherit;font-size:.92rem;
    }
    textarea{min-height:130px;resize:vertical}
    .form-note{font-size:.85rem;margin-bottom:1rem}
    .form-note.ok{color:#4ade80}
    .form-note.err{color:#f97373}
    .hp{display:none}
    .footer{
      padding:2.5rem 1.5rem;text-align:center;
      border-top:1px solid rgba(148,163,184,.4);
      font-size:.85rem;color:var(--text-muted);margin-top:2rem;
    }
    .footer a{margin-left:1rem;color:var(--primary)}
    /* Responsive */
    @media(max-width:1100px){
      .sidebar{position:static;width:100%;max-width:700px;margin:1.5rem auto 0}
      .hero{padding-top:1rem}
      .hero-inner{grid-template-columns:1fr;gap:3rem;text-align:center}
      .hero-visual{justify-self:center}
      .hero-subtitle{margin:0 auto 2.3rem}
      .highlights{align-items:flex-start;margin-inline:auto;max-width:520px;text-align:left}
      .cta-row{justify-content:center}
    }
    @media(max-width:900px){
      .section,.hero{padding-inline:1.5rem}
      .compact-grid{grid-template-columns:1fr}
      .contact-grid{grid-template-columns:1fr}
    }
    @media(max-width:700px){
      .tools-marquee{flex-direction:column;animation:none}
      .tools-wrapper{overflow:visible}
    }
    .topbar{
  position:sticky;
  top:0;
  z-index:50;
  margin:0 auto;
  margin-top:0.6rem;
  max-width:1200px;
  padding:0.6rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  backdrop-filter:blur(20px);
}

.topbar-left{display:flex;align-items:center;gap:.6rem;}

.brand{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-size:.95rem;
  font-weight:600;
}
.brand-dot{
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg,#A78BFA,#C4B5FD);
  box-shadow:0 0 0 6px rgba(129,140,248,.28);
}
.brand-text{letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;opacity:.9;}

.topnav{
  display:flex;
  align-items:center;
  gap:1.4rem;
  font-size:.9rem;
}
.topnav a{
  position:relative;
  color:var(--text-muted);
  padding-bottom:.15rem;
  transition:color .25s;
}
.topnav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,#A78BFA,#818CF8);
  border-radius:999px;
  transition:width .25s;
}
.topnav a:hover{
  color:var(--text-main);
}
.topnav a:hover::after{
  width:100%;
}
.topnav-cta{
  padding:.45rem .9rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.5);
  background:rgba(15,23,42,.9);
}
.topnav-cta::after{display:none;}
.topnav-cta:hover{
  background:rgba(129,140,248,.22);
  color:var(--text-main);
}

/* Mobile */
@media(max-width:900px){
  .topnav{
    gap:.8rem;
    font-size:.8rem;
  }
  .brand-text{display:none;}
}
@media(max-width:600px){
  .topbar{
    max-width:none;
    margin-inline:.7rem;
    padding-inline:1rem;
  }
  .topnav{
    display:none; /* si tu veux plus tard un burger menu */
  }
}
/* Marges internes manquantes (expérience, formation, intérêts, contact) */

/* Cartes expérience */
.exp-main.glass {
  padding: 1.6rem 1.8rem;
}

/* Formation + Centres d’intérêt */
.compact-grid > .glass {
  padding: 1.8rem 2rem;
}

/* Formulaire de contact */
.contact-grid form.glass {
  padding: 1.8rem 2rem;
}

/* (Optionnel) Harmoniser la meta contact */
.contact-meta.glass {
  padding: 1.8rem 2rem;
}
/* ===================== AJOUT ANIMATIONS ===================== */

/* Apparition au scroll */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.reveal-left {
  transform: translateX(-60px);
}

.reveal-right {
  transform: translateX(60px);
}

.reveal-zoom {
  transform: scale(0.92);
}

/* Hover cartes / blocs */
.card, .bloc, .section-box {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.card:hover,
.bloc:hover,
.section-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
/* ===================== SIDEBAR ANIMÉE ===================== */
.sidebar {
  transition: width 0.4s ease, background 0.4s ease;
}


.sidebar .label,
.sidebar span.text {
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.sidebar:hover .label,
.sidebar:hover span.text {
  opacity: 1;
}

/* Lien actif */
.sidebar a.active {
  background: linear-gradient(90deg, rgba(130,120,255,0.25), transparent);
  border-left: 4px solid #8f7cff;
}