/* ── Styles spécifiques : portfolio.html ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    :root {
      --bg:     #0c0c0e;
      --surf:   #0f0f12;
      --border: rgba(255,255,255,0.07);
      --acc:    #c8f135;
      --text:   #e8e8e2;
      --muted:  #5a5a60;
      --muted2: #8a8a90;
    }

    html { scroll-behavior:smooth; }
    body { background:var(--bg); color:var(--text); font-family:'DM Mono',monospace; overflow-x:hidden; }

    body::before {
      content:''; position:fixed; inset:0;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events:none; z-index:998; opacity:.5;
    }

    /* ── NAV ── */
    nav {
      position:fixed; top:0; left:0; right:0; z-index:200;
      display:flex; justify-content:space-between; align-items:center;
      padding:1.8rem 4rem;
      border-bottom:1px solid transparent;
      transition:border-color .4s, background .4s, backdrop-filter .4s;
    }
    nav.scrolled { border-color:var(--border); background:rgba(12,12,14,.9); backdrop-filter:blur(20px); }
    .logo { font-family:'DM Serif Display',serif; font-size:1.25rem; letter-spacing:-.02em; color:var(--text); text-decoration:none; }
    .logo span { color:var(--acc); }
    nav ul { list-style:none; display:flex; gap:2.5rem; }
    nav ul li a { text-decoration:none; color:var(--muted2); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; transition:color .2s; }
    nav ul li a:hover { color:var(--text); }
    nav ul li a.active { color:var(--acc); }
    .nav-cta { background:var(--acc)!important; color:#0c0c0e!important; padding:.5rem 1.2rem; border-radius:2px; font-weight:500!important; }

    /* ── HERO ── */
    .hero {
      padding: 11rem 4rem 5rem;
      max-width:1300px; margin:0 auto;
      display:grid; grid-template-columns:1fr 1fr;
      gap:4rem; align-items:end;
    }

    .hero-left { }
    .eyebrow {
      display:flex; align-items:center; gap:.8rem;
      font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--acc);
      margin-bottom:1.8rem;
      opacity:0; animation:fadeUp .6s .1s ease forwards;
    }
    .eyebrow::before { content:''; width:28px; height:1px; background:var(--acc); }

    h1 {
      font-family:'DM Serif Display',serif;
      font-size:clamp(3.5rem,6vw,6rem);
      line-height:.92; letter-spacing:-.04em;
      opacity:0; animation:fadeUp .8s .22s ease forwards;
    }
    h1 em { font-style:italic; color:var(--muted2); display:block; }

    .hero-right {
      padding-bottom:.5rem;
      opacity:0; animation:fadeUp .7s .35s ease forwards;
    }
    .hero-right p { font-size:.81rem; color:var(--muted2); line-height:1.95; max-width:44ch; }
    .hero-right p strong { color:var(--text); font-weight:500; }

    /* Counter row */
    .counter-row {
      display:flex; gap:3rem; margin-top:2.5rem;
    }
    .ctr { }
    .ctr-num { font-family:'DM Serif Display',serif; font-size:2.4rem; letter-spacing:-.04em; color:var(--text); line-height:1; }
    .ctr-num span { color:var(--acc); }
    .ctr-label { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.3rem; }

    /* ── TICKER ── */
    .ticker-wrap { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:.8rem 0; margin-bottom:0; }
    .ticker { display:flex; white-space:nowrap; animation:ticker 26s linear infinite; }
    .ticker span { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:0 2rem; }
    .ticker span.a { color:var(--acc); }

    /* ── FILTER BAR ── */
    .filter-section {
      max-width:1300px; margin:0 auto;
      padding:4rem 4rem 0;
      display:flex; justify-content:space-between; align-items:center;
      gap:2rem;
      opacity:0; animation:fadeUp .6s .5s ease forwards;
    }

    .filters { display:flex; gap:.5rem; flex-wrap:wrap; }
    .filter-btn {
      font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
      padding:.45rem 1rem; border-radius:2px;
      border:1px solid var(--border); color:var(--muted2);
      background:transparent; cursor:pointer;
      transition:border-color .2s, color .2s, background .2s;
      font-family:'DM Mono',monospace;
    }
    .filter-btn:hover { border-color:rgba(200,241,53,.25); color:var(--text); }
    .filter-btn.active { background:var(--acc); color:#0c0c0e; border-color:var(--acc); }

    .filter-right { display:flex; gap:.5rem; }
    .view-btn {
      width:34px; height:34px;
      border:1px solid var(--border); border-radius:2px;
      background:transparent; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:border-color .2s, background .2s;
    }
    .view-btn svg { width:14px; height:14px; color:var(--muted2); }
    .view-btn.active { border-color:rgba(200,241,53,.3); background:rgba(200,241,53,.05); }
    .view-btn.active svg { color:var(--acc); }

    /* ── PROJECTS GRID ── */
    .projects-section {
      max-width:1300px; margin:0 auto;
      padding:2.5rem 4rem 7rem;
    }

    .projects-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1.5px;
      background:var(--border);
      transition:all .3s;
    }
    .projects-grid.list-view {
      grid-template-columns:1fr;
    }

    /* ── PROJECT CARD ── */
    .proj-card {
      background:var(--bg);
      position:relative; overflow:hidden;
      cursor:pointer;
      transition:background .3s;
    }
    .proj-card.hidden { display:none; }

    /* Top accent line on hover */
    .proj-card::before {
      content:''; position:absolute;
      top:0; left:0; right:0; height:2px;
      background:var(--acc);
      transform:scaleX(0); transform-origin:left;
      transition:transform .4s cubic-bezier(.22,1,.36,1);
      z-index:2;
    }
    .proj-card:hover::before { transform:scaleX(1); }

    /* Card preview area */
    .card-preview {
      height:220px;
      background:var(--surf);
      position:relative; overflow:hidden;
      transition:height .3s;
    }
    .list-view .card-preview { height:160px; }

    /* Grid pattern bg for preview */
    .card-preview::before {
      content:''; position:absolute; inset:0;
      background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
      background-size:32px 32px;
    }

    /* Overlay on hover */
    .card-overlay {
      position:absolute; inset:0;
      background:rgba(12,12,14,.75);
      display:flex; align-items:center; justify-content:center;
      opacity:0; transition:opacity .3s;
    }
    .proj-card:hover .card-overlay { opacity:1; }

    .overlay-btn {
      display:flex; align-items:center; gap:.6rem;
      font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
      color:var(--acc); border:1px solid rgba(200,241,53,.4);
      padding:.6rem 1.3rem; border-radius:2px;
      transform:translateY(8px);
      transition:transform .3s cubic-bezier(.22,1,.36,1);
    }
    .proj-card:hover .overlay-btn { transform:translateY(0); }

    /* Mock website inside preview */
    .preview-mock {
      position:absolute; inset:12px;
      background:#0c0c0e;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      transform:translateY(0); transition:transform .4s ease;
    }
    .proj-card:hover .preview-mock { transform:translateY(-4px); }

    .pm-bar {
      height:22px; background:#0a0a0c; border-bottom:1px solid rgba(255,255,255,.06);
      display:flex; align-items:center; padding:0 .6rem; gap:.35rem;
    }
    .pm-dot { width:6px; height:6px; border-radius:50%; }

    .pm-body { padding:.7rem .8rem; display:flex; flex-direction:column; gap:.35rem; }
    .pm-line { height:5px; border-radius:2px; background:rgba(255,255,255,.07); }
    .pm-line.acc { background:rgba(200,241,53,.2); }
    .pm-line.dark { background:rgba(255,255,255,.04); }
    .pm-blocks { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-top:.3rem; }
    .pm-block { height:28px; border-radius:2px; background:rgba(255,255,255,.04); }
    .pm-block.acc { background:rgba(200,241,53,.1); }

    /* Unique preview per project */
    .prev-ecom .pm-blocks { grid-template-columns:1fr 1fr; }
    .prev-ecom .pm-block { height:40px; }
    .prev-blog .pm-body { gap:.25rem; }
    .prev-saas .pm-blocks { grid-template-columns:repeat(4,1fr); }
    .prev-saas .pm-block { height:18px; }

    /* Card body */
    .card-body { padding:2rem 2rem 2rem; }

    .card-meta {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:.9rem;
    }
    .card-cat {
      font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--acc);
    }
    .card-year { font-size:.6rem; color:var(--muted); letter-spacing:.08em; }

    .card-title {
      font-family:'DM Serif Display',serif;
      font-size:1.3rem; letter-spacing:-.02em; color:var(--text);
      margin-bottom:.6rem; line-height:1.15;
      transition:color .25s;
    }
    .proj-card:hover .card-title { color:var(--acc); }

    .card-desc { font-size:.74rem; color:var(--muted2); line-height:1.8; margin-bottom:1.2rem; }

    .card-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.4rem; }
    .c-tag {
      font-size:.58rem; letter-spacing:.07em; text-transform:uppercase;
      padding:.22rem .6rem; border:1px solid var(--border); border-radius:2px; color:var(--muted);
      transition:border-color .2s, color .2s;
    }
    .proj-card:hover .c-tag { border-color:rgba(200,241,53,.15); color:var(--muted2); }

    .card-footer {
      display:flex; align-items:center; justify-content:space-between;
      border-top:1px solid var(--border); padding-top:1.1rem;
    }
    .card-result {
      font-size:.65rem; color:var(--muted2); display:flex; align-items:center; gap:.4rem;
    }
    .result-dot { width:5px; height:5px; border-radius:50%; background:var(--acc); }
    .card-link-btn {
      display:flex; align-items:center; gap:.4rem;
      font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
      text-decoration:none; transition:color .2s, gap .2s;
    }
    .card-link-btn:hover { color:var(--acc); gap:.7rem; }

    /* ── LIST VIEW override ── */
    .list-view .proj-card { display:grid; grid-template-columns:260px 1fr; }
    .list-view .card-preview { height:100%; min-height:160px; }
    .list-view .card-body { padding:1.8rem 2rem; display:flex; flex-direction:column; justify-content:center; }

    /* ── FEATURED PROJECT (full-width first card) ── */
    .proj-card.featured {
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:1fr 1fr;
    }
    .proj-card.featured .card-preview { height:100%; min-height:300px; }
    .proj-card.featured .card-body { padding:3rem; display:flex; flex-direction:column; justify-content:center; }
    .proj-card.featured .card-title { font-size:1.8rem; }
    .proj-card.featured .card-desc { max-width:44ch; }

    /* ── FEATURED BADGE ── */
    .feat-badge {
      position:absolute; top:1rem; left:1rem; z-index:3;
      font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
      background:var(--acc); color:#0c0c0e;
      padding:.2rem .6rem; border-radius:2px;
    }

    /* ── MODAL ── */
    .modal-overlay {
      position:fixed; inset:0; z-index:900;
      background:rgba(12,12,14,.9); backdrop-filter:blur(12px);
      display:flex; align-items:center; justify-content:center;
      padding:2rem;
      opacity:0; pointer-events:none;
      transition:opacity .3s;
    }
    .modal-overlay.show { opacity:1; pointer-events:all; }

    .modal {
      background:var(--surf); border:1px solid var(--border);
      border-radius:8px; width:100%; max-width:800px;
      max-height:88vh; overflow-y:auto;
      transform:translateY(24px) scale(.98);
      transition:transform .35s cubic-bezier(.22,1,.36,1);
      position:relative;
    }
    .modal-overlay.show .modal { transform:none; }

    .modal::-webkit-scrollbar { width:4px; }
    .modal::-webkit-scrollbar-track { background:transparent; }
    .modal::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

    .modal-close {
      position:sticky; top:0; z-index:10;
      display:flex; justify-content:flex-end;
      padding:1rem 1.2rem; background:var(--surf);
      border-bottom:1px solid var(--border);
    }
    .modal-close-btn {
      width:32px; height:32px; border-radius:2px;
      border:1px solid var(--border); background:transparent;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:border-color .2s, background .2s;
    }
    .modal-close-btn:hover { border-color:rgba(200,241,53,.3); background:rgba(200,241,53,.05); }
    .modal-close-btn svg { width:12px; height:12px; color:var(--muted2); }

    .modal-body { padding:2.5rem 3rem 3rem; }

    .modal-cat { font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--acc); margin-bottom:1rem; }
    .modal-title { font-family:'DM Serif Display',serif; font-size:2.4rem; letter-spacing:-.03em; line-height:1.05; margin-bottom:1rem; }
    .modal-title em { font-style:italic; color:var(--muted2); }
    .modal-desc { font-size:.81rem; color:var(--muted2); line-height:1.95; margin-bottom:2rem; }
    .modal-desc strong { color:var(--text); font-weight:500; }

    /* Modal preview */
    .modal-preview {
      height:220px; background:var(--bg); border:1px solid var(--border); border-radius:4px;
      margin-bottom:2rem; position:relative; overflow:hidden;
    }
    .modal-preview::before {
      content:''; position:absolute; inset:0;
      background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
      background-size:40px 40px;
    }
    .modal-preview-inner {
      position:absolute; inset:16px;
      background:#0c0c0e; border-radius:4px;
      border:1px solid rgba(255,255,255,.07);
      overflow:hidden;
    }

    .modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:2rem; }
    .modal-info-block h4 { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.8rem; }
    .modal-info-block .tags { display:flex; flex-wrap:wrap; gap:.4rem; }
    .modal-info-block .tag { font-size:.65rem; padding:.3rem .7rem; border:1px solid var(--border); border-radius:2px; color:var(--muted2); }

    .modal-results {
      background:rgba(200,241,53,.04); border:1px solid rgba(200,241,53,.15);
      border-radius:4px; padding:1.5rem;
      display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
      margin-bottom:2rem;
    }
    .mr-item { text-align:center; }
    .mr-val { font-family:'DM Serif Display',serif; font-size:1.8rem; letter-spacing:-.03em; color:var(--acc); line-height:1; }
    .mr-label { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:.3rem; }

    .modal-actions { display:flex; gap:1rem; }
    .btn-main {
      display:inline-flex; align-items:center; gap:.7rem;
      background:var(--acc); color:#0c0c0e;
      text-decoration:none; font-family:'DM Mono',monospace;
      font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
      padding:.85rem 1.6rem; border-radius:2px;
      transition:opacity .2s, gap .2s;
    }
    .btn-main:hover { opacity:.88; gap:1rem; }
    .btn-ghost-sm {
      display:inline-flex; align-items:center; gap:.5rem;
      font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
      color:var(--muted2); text-decoration:none;
      padding:.85rem 1.4rem; border:1px solid var(--border); border-radius:2px;
      transition:border-color .2s, color .2s;
    }
    .btn-ghost-sm:hover { border-color:rgba(200,241,53,.25); color:var(--text); }

    /* ── CTA BOTTOM ── */
    .cta-bottom {
      margin:0 4rem 8rem;
      border:1px solid var(--border); border-radius:4px;
      background:linear-gradient(135deg,#111114,#0f0f0a);
      padding:5rem; display:flex; justify-content:space-between; align-items:center; gap:3rem;
      position:relative; overflow:hidden;
    }
    .cta-bottom::before {
      content:''; position:absolute; top:-100px; right:-100px;
      width:400px; height:400px;
      background:radial-gradient(circle,rgba(200,241,53,.06) 0%,transparent 70%);
      border-radius:50%; pointer-events:none;
    }
    .cta-bottom h2 { font-family:'DM Serif Display',serif; font-size:clamp(2rem,3.5vw,3rem); letter-spacing:-.03em; line-height:1.05; max-width:14ch; }
    .cta-bottom h2 em { font-style:italic; color:var(--muted2); }
    .cta-r p { font-size:.8rem; color:var(--muted2); line-height:1.8; margin-bottom:1.5rem; max-width:34ch; }

    /* ── FOOTER ── */
    footer { border-top:1px solid var(--border); padding:2.5rem 4rem; display:flex; justify-content:space-between; align-items:center; }
    .footer-logo { font-family:'DM Serif Display',serif; font-size:1.1rem; color:var(--text); }
    .footer-logo span { color:var(--acc); }
    footer p { font-size:.62rem; color:var(--muted); letter-spacing:.08em; }
    .fl { display:flex; gap:1.5rem; }
    .fl a { font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; }
    .fl a:hover { color:var(--text); }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp { from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;} }
    @keyframes ticker { from{transform:translateX(0);}to{transform:translateX(-50%);} }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.75);} }

    .reveal { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; }
    .reveal.visible { opacity:1; transform:none; }

    /* stagger children */
    .proj-card { opacity:0; transform:translateY(24px); transition:opacity .55s ease,transform .55s ease,background .3s; }
    .proj-card.anim { opacity:1; transform:none; }
    .proj-card.hidden { display:none!important; }

    /* ── RESPONSIVE ── */
    @media(max-width:1000px) {
      nav { padding:1.5rem 2rem; } nav ul { display:none; }
      .hero { grid-template-columns:1fr; padding:8rem 2rem 4rem; gap:2rem; }
      .filter-section { padding:3rem 2rem 0; flex-direction:column; align-items:flex-start; }
      .projects-section { padding:2rem 2rem 5rem; }
      .projects-grid { grid-template-columns:1fr; }
      .proj-card.featured { grid-template-columns:1fr; }
      .proj-card.featured .card-preview { min-height:200px; }
      .list-view .proj-card { grid-template-columns:1fr; }
      .modal-body { padding:1.5rem; }
      .modal-grid { grid-template-columns:1fr; }
      .modal-results { grid-template-columns:1fr 1fr; }
      .cta-bottom { margin:0 2rem 5rem; padding:3rem 2rem; flex-direction:column; align-items:flex-start; }
      footer { padding:2rem; flex-direction:column; gap:.8rem; text-align:center; }
      .fl { justify-content:center; }
    }