/* =============================================
   FLORIAN MOUTOUVIRIN — PORTFOLIO
   style.css — Version finale complète
   ============================================= */

/* ===== VARIABLES ===== */
:root {
    --bg:           #0a0a0f;
    --bg2:          #111118;
    --surface:      #151522;
    --surface2:     #1a1a2e;
    --primary:      #6c63ff;
    --primary2:     #00d4ff;
    --accent:       #ff6b9d;
    --glow:         rgba(108,99,255,0.25);
    --text:         #f4f4f8;
    --text2:        #b0b8d8;
    --text3:        #6a7090;
    --border:       rgba(255,255,255,0.1);
    --radius:       20px;
    --trans:        all 0.35s cubic-bezier(0.4,0,0.2,1);
    --font:         'Inter', -apple-system, sans-serif;
    --shadow:       0 20px 60px rgba(0,0,0,0.4);
  }
  
  /* ===== RESET ===== */
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden;
  }
  img { max-width:100%; display:block; }
  a { text-decoration:none; color:inherit; }
  ul { list-style:none; }
  .container { max-width:1300px; margin:0 auto; padding:0 6vw; }
  
  /* ===== LOADER ===== */
  #loader {
    position:fixed; inset:0;
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    z-index:9999;
    transition:opacity 0.6s ease, visibility 0.6s;
  }
  #loader.out { opacity:0; visibility:hidden; }
  .loader-inner { text-align:center; }
  .loader-logo {
    font-size:4rem; font-weight:900;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    margin-bottom:0.5rem;
  }
  .loader-name { color:var(--text3); margin-bottom:2rem; }
  .loader-bar-wrap {
    width:200px; height:4px; background:var(--surface2);
    border-radius:2px; overflow:hidden; margin:0 auto 1rem;
  }
  .loader-bar {
    height:100%; width:0%;
    background:linear-gradient(90deg,var(--primary),var(--primary2));
    transition:width 0.1s ease;
  }
  .loader-percent { color:var(--primary); font-weight:600; }
  
  /* ===== THEME TOGGLE ===== */
  #theme-toggle {
    position:fixed; right:1.5rem; top:50%; transform:translateY(-50%);
    z-index:500; display:flex; flex-direction:column; align-items:center; gap:0.4rem;
  }
  .toggle-track {
    width:46px; height:88px;
    background:var(--surface);
    border:1.5px solid var(--border);
    border-radius:99px; padding:5px;
    cursor:pointer; position:relative;
    transition:var(--trans);
    box-shadow:0 4px 24px rgba(0,0,0,0.3);
  }
  .toggle-track:hover { border-color:var(--primary); box-shadow:0 4px 24px var(--glow); }
  .toggle-thumb {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    position:absolute; left:50%; transform:translateX(-50%);
    top:4px; transition:top 0.4s cubic-bezier(0.4,0,0.2,1);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:0.85rem;
  }
  body.light .toggle-thumb { top:calc(100% - 36px); }
  .toggle-icon-top,.toggle-icon-bot {
    position:absolute; left:50%; transform:translateX(-50%);
    font-size:0.65rem; color:var(--text3); pointer-events:none;
    transition:opacity 0.3s;
  }
  .toggle-icon-top { top:8px; }
  .toggle-icon-bot { bottom:8px; }
  body.light .toggle-icon-top { opacity:0.3; }
  body:not(.light) .toggle-icon-bot { opacity:0.3; }
  .toggle-label {
    font-size:0.6rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase;
    color:var(--text3);
  }
  
  /* ===== NAVBAR ===== */
  #navbar {
    position:fixed; top:0; left:0; right:0;
    background:transparent; backdrop-filter:blur(20px);
    z-index:1000; transition:var(--trans);
  }
  #navbar.scrolled {
    background:rgba(10,10,15,0.96);
    box-shadow:0 8px 40px rgba(0,0,0,0.4);
  }
  .nav-inner {
    max-width:1300px; margin:0 auto; padding:1.1rem 6vw;
    display:flex; align-items:center; justify-content:space-between;
  }
  .nav-logo {
    font-size:1.8rem; font-weight:900;
    color:var(--text); letter-spacing:-0.03em;
  }
  .nav-logo span { color:var(--primary); }
  .nav-links { display:flex; gap:2rem; }
  .nav-links a {
    color:var(--text3); font-weight:500;
    padding:0.4rem 0; position:relative;
    transition:color 0.3s;
  }
  .nav-links a::after {
    content:''; position:absolute; bottom:0; left:0;
    width:0; height:2px;
    background:linear-gradient(90deg,var(--primary),var(--primary2));
    transition:width 0.3s;
  }
  .nav-links a:hover, .nav-links a.active { color:var(--primary); }
  .nav-links a:hover::after, .nav-links a.active::after { width:100%; }
  .nav-links a.nav-cta {
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    color:#fff; padding:0.6rem 1.4rem;
    border-radius:10px; font-weight:600;
  }
  .nav-links a.nav-cta::after { display:none; }
  .nav-burger {
    display:none; flex-direction:column; gap:5px;
    cursor:pointer; padding:5px; background:none; border:none;
  }
  .nav-burger span {
    display:block; width:26px; height:3px;
    background:var(--text); border-radius:3px;
    transition:var(--trans);
  }
  .nav-burger.open span:nth-child(1) { transform:rotate(45deg) translate(6px,6px); }
  .nav-burger.open span:nth-child(2) { opacity:0; }
  .nav-burger.open span:nth-child(3) { transform:rotate(-45deg) translate(6px,-6px); }
  
  /* ===== BUTTONS ===== */
  .btn {
    display:inline-flex; align-items:center; gap:0.6rem;
    padding:1rem 2rem; border-radius:12px;
    font-weight:600; font-size:0.95rem;
    transition:var(--trans); cursor:pointer; border:none;
  }
  .btn-primary {
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    color:#fff; box-shadow:0 8px 28px var(--glow);
  }
  .btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 40px var(--glow); }
  .btn-outline {
    border:2px solid var(--primary); color:var(--primary); background:transparent;
  }
  .btn-outline:hover { background:var(--primary); color:#fff; transform:translateY(-2px); }
  .btn-sm { padding:0.7rem 1.3rem; font-size:0.88rem; }
  .btn-primary-sm {
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.7rem 1.3rem; border-radius:10px;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    color:#fff; font-weight:600; font-size:0.88rem;
    transition:var(--trans);
  }
  .btn-primary-sm:hover { transform:translateY(-2px); }
  .btn-outline-sm {
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.7rem 1.3rem; border-radius:10px;
    border:2px solid var(--primary); color:var(--primary);
    font-weight:600; font-size:0.88rem; background:transparent;
    transition:var(--trans);
  }
  .btn-outline-sm:hover { background:var(--primary); color:#fff; }
  
  /* ===== HERO ===== */
  .hero {
    min-height:100vh; display:flex; align-items:center;
    padding:10rem 6vw 5rem; position:relative; overflow:hidden;
  }
  .hero-bg {
    position:absolute; inset:0; pointer-events:none;
  }
  .hero-blob {
    position:absolute; border-radius:50%;
    filter:blur(80px); opacity:0.15;
  }
  .hero-blob.b1 {
    width:500px; height:500px; background:var(--primary);
    top:-150px; right:-100px;
    animation:float1 8s ease-in-out infinite;
  }
  .hero-blob.b2 {
    width:350px; height:350px; background:var(--primary2);
    bottom:-100px; left:-80px;
    animation:float2 10s ease-in-out infinite reverse;
  }
  @keyframes float1 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.05)} }
  @keyframes float2 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-20px) scale(1.03)} }
  .hero-grid {
    max-width:1300px; margin:0 auto; width:100%;
    display:grid; grid-template-columns:1fr 420px; gap:5rem; align-items:center;
    position:relative; z-index:1;
  }
  .hero-badge {
    display:inline-flex; align-items:center; gap:0.6rem;
    background:var(--surface); border:1px solid var(--border);
    padding:0.6rem 1.2rem; border-radius:99px;
    font-size:0.9rem; color:var(--text2); margin-bottom:2rem;
  }
  .badge-dot {
    width:8px; height:8px; border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 8px #22c55e;
    animation:pulse 2s infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
  .hero-name {
    font-size:clamp(3.5rem,9vw,7rem);
    font-weight:900; line-height:1.05; margin-bottom:1.5rem;
  }
  .hero-name .line1 { display:block; color:var(--text2); font-weight:700; font-size:0.55em; }
  .hero-name .line2 {
    background:linear-gradient(135deg,var(--primary),var(--primary2),var(--accent));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  .hero-sub { font-size:1.2rem; color:var(--text2); margin-bottom:2.5rem; max-width:520px; }
  .hero-actions { display:flex; gap:1.2rem; flex-wrap:wrap; }
  .hero-visual { position:relative; }
  .hero-photo-ring {
    position:absolute; inset:-12px;
    border-radius:50%; 
    border:2px dashed rgba(108,99,255,0.4);
    animation:spin 20s linear infinite;
  }
  @keyframes spin { to { transform:rotate(360deg); } }
  .hero-photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    position: relative;
    z-index: 1;
    border: 4px solid rgba(108, 99, 255, 0.4);
    box-shadow: 0 20px 60px rgba(108, 99, 255, 0.3);
  } 
  .hero-status {
    position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
    background:var(--surface); border:1px solid var(--border);
    padding:0.5rem 1.2rem; border-radius:99px;
    font-size:0.85rem; white-space:nowrap; z-index:2;
  }
  .hero-status i { color:#22c55e; margin-right:0.4rem; }
  .hero-scroll {
    position:absolute; bottom:3rem; left:50%; transform:translateX(-50%);
  }
  .hero-scroll span {
    display:block; width:2px; height:50px;
    background:linear-gradient(var(--primary),transparent);
    margin:0 auto; animation:scrolldown 2s ease-in-out infinite;
  }
  @keyframes scrolldown { 0%,100%{opacity:1;transform:scaleY(1)} 50%{opacity:0.4;transform:scaleY(0.6)} }
  
  /* ===== SECTIONS ===== */
  .section { padding:100px 0; }
  .dark-section { background:var(--bg2); }
  .section-head { text-align:center; margin-bottom:5rem; }
  .section-label {
    font-size:0.95rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.18em;
    color:var(--primary); margin-bottom:1rem;
  }
  
  /* ===== TITRES COLORÉS + ENCADRÉS (BIEN VISIBLES) ===== */
  .section-title {
    font-size:clamp(2.8rem,7vw,4.8rem);
    font-weight:900; line-height:1.1;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    display:inline-block; position:relative;
    padding-bottom:1rem;
  }
  .section-title::after {
    content:''; position:absolute;
    bottom:0; left:50%; transform:translateX(-50%);
    width:80px; height:4px;
    background:linear-gradient(90deg,var(--primary),var(--primary2));
    border-radius:2px;
  }
  .dark-section .section-title {
    background:linear-gradient(135deg,var(--primary2),var(--accent));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  .dark-section .section-title::after {
    background:linear-gradient(90deg,var(--primary2),var(--accent));
  }
  
  /* ===== REVEAL ANIMATION ===== */
  .reveal {
    opacity:0; transform:translateY(40px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.visible { opacity:1; transform:translateY(0); }
  
  /* ===== ABOUT ===== */
  .about-grid {
    display:grid; grid-template-columns:2fr 1fr; gap:5rem; align-items:start;
  }
  .about-text p { font-size:1.1rem; color:var(--text2); margin-bottom:1.5rem; }
  .about-infos { display:flex; flex-direction:column; gap:0.9rem; margin-top:2rem; }
  .info-item {
    display:flex; align-items:center; gap:0.8rem;
    color:var(--text2); font-size:0.95rem;
  }
  .info-item i { color:var(--primary); width:18px; }
  .about-stats {
    display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
  }
  .stat-card {
    background:var(--surface); padding:2rem 1.5rem;
    border-radius:var(--radius); text-align:center;
    border:1px solid var(--border); transition:var(--trans);
  }
  .stat-card:hover { transform:translateY(-6px); border-color:var(--primary); }
  .stat-card.accent { background:linear-gradient(135deg,var(--surface),var(--surface2)); }
  .stat-num {
    font-size:2.6rem; font-weight:900;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    margin-bottom:0.4rem;
  }
  .stat-label { color:var(--text3); font-size:0.88rem; }
  
  /* ===== SKILLS ===== */
  .skills-wrapper {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:2.5rem;
  }
  .skill-category {
    background:var(--surface); padding:2.5rem;
    border-radius:var(--radius); border:1px solid var(--border);
    transition:var(--trans);
  }
  .skill-category:hover { border-color:var(--primary); transform:translateY(-6px); }
  .cat-title {
    font-size:1.2rem; font-weight:700;
    color:var(--primary2);
    margin-bottom:1.8rem;
    display:flex; align-items:center; gap:0.7rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--border);
  }
  .skills-list { display:flex; flex-direction:column; gap:1.2rem; }
  .skill-item {
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:0.5rem;
  }
  .skill-item span {
    font-size:0.9rem; font-weight:500; color:var(--text2);
    display:flex; align-items:center; gap:0.5rem;
  }
  .skill-item span i { color:var(--primary); width:16px; }
  .skill-item em {
    font-style:normal; font-size:0.8rem;
    color:var(--primary); font-weight:600;
  }
  .skill-track {
    grid-column:1/-1; height:8px;
    background:var(--surface2); border-radius:4px; overflow:hidden;
  }
  .skill-fill {
    height:100%; width:0; border-radius:4px;
    background:linear-gradient(90deg,var(--primary),var(--primary2));
    transition:width 1.8s cubic-bezier(0.4,0,0.2,1);
  }
  
  /* ===== PROJECTS ===== */
  .projects-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:2.5rem;
  }
  .project-card {
    background:var(--surface); padding:2.5rem;
    border-radius:var(--radius); border:1px solid var(--border);
    transition:var(--trans); display:flex; flex-direction:column; gap:1rem;
  }
  .project-card:hover { transform:translateY(-12px); border-color:var(--primary); box-shadow:var(--shadow); }
  .project-card.featured {
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(108,99,255,0.2);
  }
  .project-card.school { border-color:rgba(0,212,255,0.3); }
  .project-card.school:hover { border-color:var(--primary2); }
  .card-top {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:0.5rem;
  }
  .card-num {
    font-size:2.5rem; font-weight:900;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    line-height:1;
  }
  .feat-icon { color:#f59e0b; font-size:1.3rem; }
  .project-card h3 {
    font-size:1.35rem; font-weight:700; color:var(--text);
  }
  .project-card p { color:var(--text2); font-size:0.95rem; flex:1; }
  .tech-tags { display:flex; flex-wrap:wrap; gap:0.5rem; }
  .tech-tags span {
    padding:0.35rem 0.8rem; border-radius:99px;
    background:rgba(108,99,255,0.12); color:var(--primary2);
    font-size:0.8rem; font-weight:600;
  }
  .card-actions { display:flex; gap:0.8rem; flex-wrap:wrap; margin-top:auto; }
  
  /* ===== TIMELINE ===== */
  .timeline { position:relative; max-width:900px; margin:0 auto; }
  .timeline::before {
    content:''; position:absolute; left:28px; top:0; bottom:0;
    width:3px;
    background:linear-gradient(to bottom,var(--primary),transparent);
  }
  .timeline-item {
    display:flex; gap:2rem; padding-left:0; margin-bottom:3.5rem; position:relative;
  }
  .tl-icon {
    flex-shrink:0; width:58px; height:58px;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.3rem;
    box-shadow:0 8px 24px var(--glow); z-index:1;
  }
  .tl-content {
    flex:1; background:var(--surface); padding:2rem;
    border-radius:var(--radius); border:1px solid var(--border);
    transition:var(--trans);
  }
  .tl-content:hover { border-color:var(--primary); }
  .tl-meta {
    display:flex; flex-wrap:wrap; gap:0.8rem; margin-bottom:0.8rem;
  }
  .tl-type {
    background:rgba(108,99,255,0.15); color:var(--primary);
    padding:0.3rem 0.8rem; border-radius:99px;
    font-size:0.82rem; font-weight:600;
  }
  .tl-date { color:var(--text3); font-size:0.88rem; padding-top:0.2rem; }
  .tl-content h3 { font-size:1.25rem; margin-bottom:0.5rem; color:var(--text); }
  .tl-company { color:var(--primary2); font-weight:600; margin-bottom:0.8rem; display:block; }
  .tl-content p { color:var(--text2); font-size:0.95rem; }
  
  /* ===== FORMATIONS ===== */
  .formations-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem;
  }
  .formation-card {
    background:var(--surface); padding:2.5rem;
    border-radius:var(--radius); border:1px solid var(--border);
    display:flex; gap:1.5rem; align-items:flex-start;
    transition:var(--trans);
  }
  .formation-card:hover { transform:translateY(-8px); border-color:var(--primary); }
  .formation-card.active { border-color:rgba(34,197,94,0.4); }
  .formation-card.upcoming { border-color:rgba(0,212,255,0.4); }
  .form-icon {
    flex-shrink:0; width:52px; height:52px;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    border-radius:14px; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.3rem;
  }
  .form-body { flex:1; }
  .form-body h3 { font-size:1.15rem; font-weight:700; margin-bottom:0.5rem; color:var(--text); }
  .form-body p { color:var(--text2); margin-bottom:0.5rem; font-size:0.9rem; }
  .form-date { color:var(--primary2); font-size:0.85rem; font-weight:600; }
  .badge {
    display:inline-block; padding:0.25rem 0.7rem;
    border-radius:99px; font-size:0.78rem; font-weight:700;
    margin-bottom:0.6rem;
  }
  .badge-en-cours { background:rgba(34,197,94,0.15); color:#22c55e; }
  .badge-upcoming  { background:rgba(0,212,255,0.15); color:var(--primary2); }
  
  /* ===== VEILLE ===== */
  .veille-intro { color:var(--text2); margin-top:0rem; margin-bottom:3rem; font-size:1rem; }
  .veille-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.8rem;
  }
  .veille-card {
    background:var(--surface); padding:2rem 1.5rem;
    border-radius:var(--radius); border:1px solid var(--border);
    display:flex; align-items:center; gap:1.2rem;
    transition:var(--trans); position:relative; overflow:hidden;
  }
  .veille-card:hover { transform:translateY(-8px); border-color:var(--primary); box-shadow:var(--shadow); }
  .veille-card i:first-child { font-size:2rem; color:var(--primary); flex-shrink:0; }
  .veille-card span { font-weight:600; color:var(--text); font-size:0.95rem; }
  .veille-card .link-icon {
    margin-left:auto; font-size:0.7rem; color:var(--text3); flex-shrink:0;
  }
  
  /* ===== CONTACT ===== */
  .contact-intro { color:var(--text2); margin-top:0rem; margin-bottom:3rem; }
  .contact-cards {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem;
    max-width:1100px; margin:0 auto;
  }
  .contact-card {
    background:var(--surface); padding:2.5rem 2rem;
    border-radius:var(--radius); border:1px solid var(--border);
    display:flex; flex-direction:column; align-items:center; gap:0.8rem;
    text-align:center; transition:var(--trans);
  }
  .contact-card:hover { transform:translateY(-8px); border-color:var(--primary); }
  .contact-card i { font-size:2.5rem; color:var(--primary); }
  .cc-label { color:var(--text3); font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; }
  .cc-val { color:var(--text2); font-size:0.9rem; word-break:break-word; }
  
  /* ===== FOOTER ===== */
  footer {
    background:var(--bg2); border-top:1px solid var(--border);
    padding:2.5rem 0;
  }
  .footer-inner {
    display:flex; flex-wrap:wrap; gap:1.5rem;
    align-items:center; justify-content:space-between;
    font-size:0.88rem; color:var(--text3);
  }
  .footer-logo { font-size:1.5rem; font-weight:900; color:var(--text); }
  .footer-logo span { color:var(--primary); }
  .footer-links { display:flex; gap:1.2rem; }
  .footer-links a { color:var(--text3); font-size:1.2rem; transition:color 0.3s; }
  .footer-links a:hover { color:var(--primary); }
  
  /* ===== LIGHT MODE ===== */
  body.light {
    --bg:       #f6f7fb;
    --bg2:      #edeef4;
    --surface:  #ffffff;
    --surface2: #f0f1f8;
    --text:     #0d0d1a;
    --text2:    #4a4a72;
    --text3:    #8888aa;
    --border:   rgba(0,0,0,0.07);
    --shadow:   0 20px 60px rgba(0,0,0,0.1);
  }
  body.light #navbar.scrolled { background:rgba(246,247,251,0.95); }
  body.light .hero-blob.b1 { background:var(--primary); opacity:0.08; }
  body.light .hero-blob.b2 { background:var(--primary2); opacity:0.06; }
  body.light .skill-track { background:#e0e0ef; }
  body.light .timeline::before { background:linear-gradient(to bottom,var(--primary),transparent); }
  
  /* ===== RESPONSIVE ===== */
  @media (max-width:1100px) {
    .hero-grid { grid-template-columns:1fr; text-align:center; }
    .hero-name .line2 { font-size:clamp(3rem,12vw,5.5rem); }
    .hero-sub { max-width:100%; }
    .hero-actions { justify-content:center; }
    .hero-visual { max-width:300px; margin:0 auto; }
    .about-grid { grid-template-columns:1fr; }
    .about-stats { grid-template-columns:repeat(4,1fr); }
  }
  
  @media (max-width:900px) {
    .section { padding:70px 0; }
    .section-head { margin-bottom:3.5rem; }
    .skills-wrapper { grid-template-columns:1fr; }
    .formations-grid { grid-template-columns:1fr; }
    .timeline::before { left:24px; }
    .tl-icon { width:50px; height:50px; font-size:1.1rem; }
  }
  
  @media (max-width:768px) {
    .nav-links {
      position:fixed; top:68px; left:0; right:0;
      background:rgba(10,10,15,0.97); backdrop-filter:blur(30px);
      flex-direction:column; padding:2rem 6vw; gap:0;
      transform:translateY(-20px); opacity:0; visibility:hidden;
      transition:var(--trans);
    }
    .nav-links.open { transform:translateY(0); opacity:1; visibility:visible; }
    .nav-links li a { display:block; padding:1rem 0; border-bottom:1px solid var(--border); font-size:1.05rem; }
    .nav-links li:last-child a { border-bottom:none; }
    body.light .nav-links { background:rgba(246,247,251,0.98); }
    .nav-burger { display:flex; }
    .hero { padding:9rem 6vw 5rem; }
    .about-stats { grid-template-columns:1fr 1fr; }
    .projects-grid { grid-template-columns:1fr; }
    .contact-cards { grid-template-columns:1fr 1fr; }
    .footer-inner { flex-direction:column; text-align:center; }
    #theme-toggle { right:0.75rem; top:auto; bottom:1.5rem; transform:none; flex-direction:row; }
    .toggle-track { width:66px; height:36px; }
    .toggle-thumb { width:26px; height:26px; top:50%; transform:translateY(-50%); left:4px; }
    body.light .toggle-thumb { top:50%; left:calc(100% - 30px); }
    .toggle-icon-top { top:50%; left:14px; transform:translateY(-50%); }
    .toggle-icon-bot { bottom:auto; top:50%; right:10px; left:auto; transform:translateY(-50%); }
  }
  
  @media (max-width:600px) {
    .section-title { font-size:clamp(2.2rem,10vw,3.5rem); }
    .hero-name { font-size:clamp(2.8rem,11vw,5rem); }
    .contact-cards { grid-template-columns:1fr; }
    .veille-grid { grid-template-columns:1fr 1fr; }
    .about-stats { grid-template-columns:1fr 1fr; }
    .hero-actions { flex-direction:column; align-items:center; }
    .hero-actions .btn { width:100%; justify-content:center; }
  }
  
  @media (max-width:400px) {
    .container { padding:0 4vw; }
    .veille-grid { grid-template-columns:1fr; }
    .projects-grid { grid-template-columns:1fr; }
    .card-actions { flex-direction:column; }
  }