:root{
      --bg:#faf8f5;--bg2:#f3ede4;--bg3:#ece4d8;--surface:#ffffff;
      --accent:#b5722a;--accent2:#d45f2e;
      --text:#2c1f14;--text2:#6b5847;--text3:#9e856e;
      --border:rgba(44,31,20,.1);--border2:rgba(44,31,20,.2);
      --grad:linear-gradient(135deg,#b5722a 0%,#d45f2e 100%);
      --nav-w:68px;--nav-exp:230px;
      --r:14px;--rs:8px;
      --shadow:0 2px 16px rgba(44,31,20,.07);
      --shadow-lg:0 12px 40px rgba(44,31,20,.13);
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);margin:0}
    h1,h2,h3,h4,h5,h6{font-family:'Syne',sans-serif}
    a{color:var(--accent);text-decoration:none;transition:.2s}
    a:hover{color:var(--accent2)}
 
    /* PRELOADER */
    #preloader{position:fixed;inset:0;background:var(--bg);z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity .5s}
    #preloader.done{opacity:0;pointer-events:none}
    .loader-ring{width:52px;height:52px;border:4px solid var(--bg3);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}
 
    /* SIDEBAR */
    #sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--nav-w);background:var(--surface);border-right:1px solid var(--border);z-index:1000;display:flex;flex-direction:column;align-items:flex-start;padding:20px 0;overflow:hidden;transition:width .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
    #sidebar:hover{width:var(--nav-exp);box-shadow:var(--shadow-lg)}
    .nav-brand{display:flex;align-items:center;gap:14px;padding:0 14px 22px;width:100%;border-bottom:1px solid var(--border);margin-bottom:14px}
    .nav-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:16px;font-weight:800;color:#fff}
    .nav-brand-text{opacity:0;transition:opacity .18s;white-space:nowrap}
    #sidebar:hover .nav-brand-text{opacity:1}
    .nav-brand-name{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--text);line-height:1.2}
    .nav-brand-sub{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace}
    .nav-link{display:flex;align-items:center;gap:14px;width:calc(var(--nav-w) - 16px);height:44px;border-radius:50px;padding:0 12px;color:var(--text2);font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;transition:all .22s;margin:2px 8px}
    #sidebar:hover .nav-link{width:calc(var(--nav-exp) - 16px)}
    .nav-link i{font-size:18px;flex-shrink:0}
    .nav-label{opacity:0;transition:opacity .18s}
    #sidebar:hover .nav-label{opacity:1}
    .nav-link:hover,.nav-link.active{background:var(--accent);color:#fff}
    #nav-toggle{display:none;position:fixed;top:14px;right:14px;z-index:1100;background:var(--accent);color:#fff;border:none;width:42px;height:42px;border-radius:50%;font-size:20px;cursor:pointer;align-items:center;justify-content:center}
 
    /* MAIN */
    main{margin-left:var(--nav-w)}
 
    /* SECTIONS */
    .section{padding:90px 0}
    .section-alt{background:var(--bg2)}
    .eyebrow{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
    .sec-title{font-size:clamp(28px,4vw,40px);font-weight:800;color:var(--text);margin-bottom:12px}
    .sec-lead{font-size:16px;color:var(--text2);max-width:560px;line-height:1.7;margin-bottom:36px}
    .divider{width:44px;height:4px;background:var(--grad);border-radius:4px;margin-bottom:40px}
 
    /* BUTTONS */
    .btn-p{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;border:none;padding:13px 30px;border-radius:50px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;font-family:'DM Sans',sans-serif}
    .btn-p:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(181,114,42,.35);color:#fff}
    .btn-o{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text);border:1.5px solid var(--border2);padding:13px 30px;border-radius:50px;font-size:15px;font-weight:500;cursor:pointer;transition:border-color .2s,color .2s;font-family:'DM Sans',sans-serif}
    .btn-o:hover{border-color:var(--accent);color:var(--accent)}
    .soc-btn{width:42px;height:42px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:17px;transition:all .22s}
    .soc-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-3px)}
 
    /* HERO */
    #hero{min-height:100vh;background:linear-gradient(150deg,#f5ede0 0%,#ede0cc 55%,#e4d4bc 100%);position:relative;display:flex;align-items:center;overflow:hidden;padding:100px 0 80px}
    .blob{position:absolute;border-radius:50%;opacity:.14}
    .blob.b1{width:700px;height:700px;background:var(--accent);right:-200px;top:-200px}
    .blob.b2{width:350px;height:350px;background:var(--accent2);left:5%;bottom:-100px}
    .blob.b3{width:180px;height:180px;background:var(--accent);left:38%;top:10%}
    .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(181,114,42,.12);border:1px solid rgba(181,114,42,.3);color:var(--accent);font-size:13px;font-weight:600;padding:6px 18px;border-radius:50px;margin-bottom:22px;font-family:'DM Mono',monospace;letter-spacing:.5px}
    .hero-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.8s infinite}
    @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
    .hero-name{font-family:'Syne',sans-serif;font-size:clamp(52px,9vw,88px);font-weight:800;color:var(--text);line-height:1;margin:0 0 14px;animation:fadeUp .8s ease both}
    .hero-role{font-size:clamp(18px,2.5vw,24px);color:var(--text2);font-weight:300;margin:0 0 12px;animation:fadeUp .8s .12s ease both}
    .hero-desc{font-size:16px;color:var(--text2);line-height:1.75;max-width:480px;margin-bottom:32px;animation:fadeUp .8s .22s ease both}
    .hero-desc strong{color:var(--accent)}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px;animation:fadeUp .8s .32s ease both}
    .hero-socials{display:flex;gap:12px;animation:fadeUp .8s .42s ease both}
    .typed-txt{color:var(--accent);font-weight:700;border-bottom:2px solid var(--accent)}
    @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
 
    /* ABOUT */
    .stat-row{display:flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);margin-top:40px}
    .stat-cell{flex:1;padding:24px 16px;text-align:center;border-right:1px solid var(--border)}
    .stat-cell:last-child{border-right:none}
    .stat-cell .num{font-family:'Syne',sans-serif;font-size:30px;font-weight:800;color:var(--accent);line-height:1}
    .stat-cell .lbl{font-size:12px;color:var(--text3);margin-top:4px}
    .tag-row{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
    .tag{background:rgba(181,114,42,.1);color:var(--accent);font-size:13px;font-weight:600;padding:5px 14px;border-radius:50px;border:1px solid rgba(181,114,42,.2)}
    .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-bottom:28px}
    .info-row{display:flex;gap:8px;font-size:14px;align-items:baseline}
    .info-row .il{color:var(--text3);font-weight:500;white-space:nowrap}
    .about-img{border-radius:var(--r);width:100%;max-width:320px;box-shadow:var(--shadow-lg);display:block}
 
    /* RESUME */
    .col-ttl{font-family:'Syne',sans-serif;font-size:19px;font-weight:700;color:var(--text);margin:0 0 20px;padding-left:14px;border-left:4px solid var(--accent)}
    .rc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;margin-bottom:14px;position:relative;transition:all .22s;box-shadow:var(--shadow)}
    .rc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);border-radius:var(--r) 0 0 var(--r)}
    .rc:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
    .rc h4{font-size:15px;font-weight:700;color:var(--text);margin:0 0 6px}
    .rbadge{display:inline-flex;align-items:center;gap:6px;background:rgba(181,114,42,.1);color:var(--accent);font-size:11px;font-weight:600;padding:3px 10px;border-radius:50px;margin-bottom:8px;font-family:'DM Mono',monospace}
    .rbadge.grn{background:rgba(74,124,85,.1);color:#4a7c55}
    .rbadge.blu{background:rgba(42,90,160,.1);color:#2a5aa0}
    .rplace{font-size:13px;color:var(--text3);display:flex;align-items:center;gap:5px;margin-bottom:8px}
    .rc ul{padding-left:18px;margin:0}
    .rc ul li{font-size:14px;color:var(--text2);padding-bottom:5px;line-height:1.6}
    .stags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
    .st{background:var(--bg2);color:var(--text2);font-size:12px;font-weight:600;padding:3px 9px;border-radius:6px;border:1px solid var(--border)}
    .int-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
    .int-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);padding:8px 10px;background:var(--bg2);border-radius:var(--rs);border:1px solid var(--border)}
    .int-item i{color:var(--accent);font-size:15px}
    .obj-ul{list-style:none;padding:0;margin:0}
    .obj-ul li{display:flex;gap:10px;font-size:14px;color:var(--text2);padding:8px 0;border-bottom:1px solid var(--border)}
    .obj-ul li:last-child{border-bottom:none}
    .obj-lbl{font-weight:700;color:var(--accent);min-width:110px;flex-shrink:0;font-size:13px}
 
    /* PORTFOLIO */
    .pf-filters{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:35px
}

.pfb{
    background:rgba(44,31,20,.06);
    color:var(--text2);
    border:1px solid var(--border);
    padding:14px 32px; /* plus grand */
    border-radius:50px;
    font-size:16px; /* texte plus grand */
    font-weight:600;
    cursor:pointer;
    transition:all .2s;
    font-family:'DM Sans',sans-serif
}

.pfb:hover,
.pfb.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff
}

.pfc{
    background:var(--surface);
    border-radius:var(--r);
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:all .3s;
    position:relative
}

.pfc:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
    border-color:var(--accent)
}

.pfc img{
    width:100%;
    display:block;
    aspect-ratio:4/3;
    object-fit:cover;
    transition:transform .4s
}

.pfc:hover img{
    transform:scale(1.04)
}

.pf-ov{
    position:absolute;
    inset:0;
    background:linear-gradient(160deg,rgba(181,114,42,.93),rgba(212,95,46,.93));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px; /* overlay plus spacieux */
    opacity:0;
    transform:translateY(8px);
    transition:all .3s
}

.pfc:hover .pf-ov{
    opacity:1;
    transform:translateY(0)
}

.pf-ov h4{
    font-size:18px;
    font-weight:700;
    color:#fff;
    margin:0 0 6px
}

.pf-ov p{
    font-size:14px;
    color:rgba(255,255,255,.85);
    margin:0 0 14px
}

.pf-tech{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:14px
}

.pf-tech span{
    background:rgba(255,255,255,.2);
    color:#fff;
    font-size:12px;
    font-weight:600;
    padding:5px 10px;
    border-radius:6px;
    font-family:'DM Mono',monospace
}

.pf-acts{
    display:flex;
    gap:10px
}

.pfa{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.4);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    text-decoration:none;
    transition:background .2s
}

.pfa:hover{
    background:rgba(255,255,255,.4);
    color:#fff
}
 
    /* SKILLS/SERVICES */
    .tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px;margin-bottom:44px}
    .tl{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 10px;text-align:center;transition:all .25s;box-shadow:var(--shadow)}
    .tl:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
    .tl img{height:38px;object-fit:contain;margin:0 auto 10px;display:block}
    .tl .tn{font-size:12px;font-weight:600;color:var(--text2)}
    .sk-blk{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);height:100%;transition:all .25s}
    .sk-blk:hover{box-shadow:var(--shadow-lg);border-color:var(--accent)}
    .sk-blk h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:10px}
    .sk-blk h4 i{color:var(--accent);font-size:19px}
    .sk-blk p{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:12px}
    .sp{display:inline-block;background:var(--bg2);color:var(--text);font-size:12px;font-weight:600;padding:3px 9px;border-radius:5px;border:1px solid var(--border);margin:3px 3px 3px 0}
 
    /* VEILLE */
    .v-intro{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px 26px;margin-bottom:28px;border-left:4px solid var(--accent);box-shadow:var(--shadow)}
    .v-intro h4{font-size:15px;font-weight:700;color:var(--text);margin:0 0 8px;display:flex;align-items:center;gap:8px}
    .v-intro h4 i{color:var(--accent)}
    .v-intro p{font-size:14px;color:var(--text2);margin:0;line-height:1.65}
    .tool-list{display:flex;flex-direction:column;gap:8px}
    .tool-i{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text2);padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);transition:all .2s;box-shadow:var(--shadow)}
    .tool-i:hover{border-color:var(--accent);transform:translateX(4px)}
    .tool-i i{color:var(--accent);font-size:17px;flex-shrink:0}
    .art-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;margin-bottom:14px;transition:all .25s;box-shadow:var(--shadow);position:relative;overflow:hidden}
    .art-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
    .art-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
    .art-card h4{font-size:15px;font-weight:700;color:var(--text);margin:0 0 8px}
    .art-card p{font-size:14px;color:var(--text2);line-height:1.65;margin-bottom:12px}
    .art-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text3);flex-wrap:wrap}
    .art-meta span{display:flex;align-items:center;gap:5px}
    .art-meta a{display:inline-flex;align-items:center;gap:5px;background:var(--accent);color:#fff;padding:4px 14px;border-radius:50px;font-size:12px;font-weight:600;transition:opacity .2s}
    .art-meta a:hover{opacity:.85;color:#fff}
    .an-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
    .an-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
    .an-box h5{font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:7px}
    .an-box h5 i{color:var(--accent)}
    .an-box ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
    .an-box ul li{font-size:13px;color:var(--text2);display:flex;align-items:baseline;gap:7px}
    .an-box ul li::before{content:'→';color:var(--accent);font-weight:700;flex-shrink:0}
 
    /* CONTACT */
    .ct-hero{background:var(--grad);border-radius:var(--r);padding:32px 28px;margin-bottom:28px;color:#fff;position:relative;overflow:hidden}
    .ct-hero::after{content:'';position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08)}
    .ct-hero h3{font-size:20px;font-weight:700;margin-bottom:10px;font-family:'Syne',sans-serif}
    .ct-hero p{font-size:14px;opacity:.9;line-height:1.65;margin-bottom:16px}
    .ct-avail{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);padding:6px 16px;border-radius:50px;font-size:13px;font-weight:600}
    .ct-avail::before{content:'';width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.8s infinite}
    .ci{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin-bottom:10px;display:flex;align-items:center;gap:14px;transition:all .22s;box-shadow:var(--shadow)}
    .ci:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
    .ci-ic{width:42px;height:42px;background:rgba(181,114,42,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;flex-shrink:0;transition:all .22s}
    .ci:hover .ci-ic{background:var(--accent);color:#fff}
    .ci h4{font-size:14px;font-weight:700;margin:0 0 2px;color:var(--text)}
    .ci p{font-size:13px;color:var(--text2);margin:0}
    .fw{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
    .fc{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--rs);padding:12px 15px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s}
    .fc:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(181,114,42,.12)}
    .fc::placeholder{color:var(--text3)}
    textarea.fc{resize:vertical;min-height:140px}
 
    /* FOOTER */
    footer{background:var(--bg3);border-top:1px solid var(--border);padding:52px 0 28px}
    .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
    .fb-brand h3{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:var(--text);margin-bottom:8px}
    .fb-brand p{font-size:14px;color:var(--text2);line-height:1.65;margin-bottom:18px}
    .fb-socs{display:flex;gap:10px}
    .fc-col h5{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px;padding-bottom:9px;border-bottom:2px solid var(--accent)}
    .fc-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
    .fc-col ul li a{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:7px;transition:.2s}
    .fc-col ul li a:hover{color:var(--accent);padding-left:3px}
    .fc-col ul li a i{font-size:13px;color:var(--accent)}
    .fb{padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
    .fb p{font-size:13px;color:var(--text3);margin:0}
 
    /* SCROLL TOP */
    #st{position:fixed;bottom:-50px;right:20px;width:44px;height:44px;background:var(--grad);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;z-index:900;transition:bottom .3s;box-shadow:0 4px 16px rgba(181,114,42,.3);text-decoration:none}
    #st.on{bottom:20px}
    #st:hover{box-shadow:0 8px 24px rgba(181,114,42,.5);color:#fff}
 
    /* RESPONSIVE */
    @media(max-width:991px){
      main{margin-left:0}
      #sidebar{display:none}
      #sidebar.open{display:flex;width:var(--nav-exp);box-shadow:var(--shadow-lg)}
      #nav-toggle{display:flex}
      .fg{grid-template-columns:1fr 1fr}
      .stat-row{flex-wrap:wrap}
      .stat-cell{min-width:50%;border-bottom:1px solid var(--border)}
      .an-grid{grid-template-columns:1fr}
    }
    @media(max-width:575px){
      .info-grid{grid-template-columns:1fr}
      .fg{grid-template-columns:1fr}
      .fb{flex-direction:column;text-align:center}
      .tl-grid{grid-template-columns:repeat(3,1fr)}
    }

    #preloader {
  display: none !important;
}