:root{
  --primary:#1F6FEB;
  --accent:#FF8A00;
  --bg:#F8F9FB;
  --card:#FFFFFF;
  --text:#222831;
  --muted:#5B6473;
  --border:#E0E3E9;
  --radius:18px;
  --ring:rgba(31,111,235,0.25);
  --nav-h:64px;
  --anchor-offset:72px;
  --nav-bg:rgba(255,255,255,0.92);
  --nav-border:var(--border);
  --menu-bg:rgba(255,255,255,0.9);
  --thumb:#F1F3F6;
}
[data-theme="dark"]{
  --bg:#0B0D12;
  --card:#121621;
  --text:#E6EAF2;
  --muted:#96A1B2;
  --border:rgba(255,255,255,0.12);
  --nav-bg:rgba(11,13,18,0.85);
  --nav-border:rgba(255,255,255,0.12);
  --menu-bg:rgba(11,13,18,0.92);
  --thumb:#0D1117;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:clamp(16px,2.5vw,24px)}

header.nav{position:sticky;top:0;background:var(--nav-bg);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--nav-border);z-index:100}
.nav-inner{display:flex;gap:18px;align-items:center;justify-content:space-between;min-height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text)}
.logo-dot{width:28px;height:28px;border-radius:50%;background:conic-gradient(from 0deg,var(--primary),var(--primary) 50%,var(--accent) 50%,var(--accent));display:grid;place-items:center;color:#fff;font-size:14px}

.menu a{padding:10px 12px;border-radius:10px;color:var(--text);font-weight:500}
.menu a:hover{background:var(--border)}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto;justify-content:flex-end}

.nav-toggle{display:none;align-items:center;gap:10px;border-radius:12px;padding:12px 14px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer}
.nav-toggle .label{font-weight:600}
.nav-toggle .burger{width:18px;height:12px;position:relative;display:inline-block}
.nav-toggle .burger::before,.nav-toggle .burger::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px}
.nav-toggle .burger::before{top:0}
.nav-toggle .burger::after{bottom:0}
.nav-toggle:active{transform:scale(0.98)}

.theme-toggle{display:inline-flex;justify-content:center;align-items:center;width:38px;height:38px;min-width:38px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(135deg,#000 50%,#fff 50%);cursor:pointer}
.theme-toggle:active{transform:scale(0.98)}

.hero{padding:64px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(28px,5vw,42px);line-height:1.2;margin:0 0 12px;color:var(--text)}
.hero p{color:var(--muted);font-size:18px;margin:0 0 20px}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:12px;padding:12px 16px;border:1px solid var(--border);background:var(--card);color:var(--text);font-weight:500}
.btn.primary{background:var(--primary);color:#fff;border:none}
.btn.accent{background:var(--accent);color:#fff;border:none}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 2px 6px rgba(0,0,0,0.04)}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.hero{grid-template-columns:1fr}}
@media (max-width:860px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

section{padding:36px 0}
section h2{font-size:clamp(20px,3.2vw,28px);margin:0 0 12px;color:var(--text)}
section, section *[id]{scroll-margin-top: var(--anchor-offset)}
#top{scroll-margin-top: var(--anchor-offset)}
.muted{color:var(--muted)}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--border);font-size:12px;color:var(--muted);margin-right:8px}
.skillbar{height:8px;background:#EDEFF2;border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.skillbar > span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent))}

.project{display:flex;gap:16px;align-items:flex-start}
.project .thumb{width:110px;height:80px;border-radius:14px;background:var(--thumb);border:1px solid var(--border)}
.testi{display:flex;gap:14px}
.testi .quote{font-style:italic;color:var(--muted)}
footer{padding:26px 0;border-top:1px solid var(--border);color:var(--muted);background:#fff}
[data-theme="dark"] footer{background:var(--card)}
.pill{padding:6px 10px;border-radius:10px;background:var(--border);color:var(--text)}
.notice{border:1px dashed var(--border);padding:12px;border-radius:12px;color:var(--muted);background:#fff}
[data-theme="dark"] .notice{background:var(--card)}

@media (max-width:820px){
  .menu{display:none}
  .nav-toggle{display:inline-flex}
  .nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px;justify-content:flex-end}
  .menu{
    position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    padding:16px 24px;background:var(--menu-bg);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    backdrop-filter:saturate(180%) blur(10px);
    z-index:105;height:calc(100dvh - var(--nav-h));
    overflow-y:auto;overflow-x:hidden;
    visibility:hidden;opacity:0;transform:translateY(-8px);
    pointer-events:none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    display:flex;flex-direction:column;gap:8px;
  }
  .menu.open{
    visibility:visible;opacity:1;transform:translateY(0);
    pointer-events:auto;
    transition: opacity .2s ease, transform .2s ease;
  }
  .menu a{
    display:block;padding:14px 16px;border-radius:12px;
    white-space:normal;word-break:break-word;overflow-wrap:anywhere;hyphens:auto
  }
  .nav-inner{align-items:center}
}


/* bandeau fin entre sections (option) */
.section-break{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,111,235,.25), rgba(255,138,0,.25), transparent);
  margin: 8px 0 28px;
  border: 0;
}

.section-title {
  display: flex;
  align-items: center; /* centre verticalement l’image et le texte */
  gap: 10px; /* espace entre l’icône et le texte */
  margin: 0 0 12px;
}

.section-title .icon {
  width: 36px;   /* ou 32px selon ta préférence */
  height: 36px;
  flex-shrink: 0; /* empêche l’icône de se déformer */
}







/* Downloads (section repliable) */
.downloads { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 24px; }
.downloads-header { display:flex; align-items:center; gap:10px; }
.downloads-icon { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:rgba(0,0,0,.06); color:var(--text); }
.downloads h2 { margin:0; font-size:1.2rem; line-height:1.2; }









/*
.toggle-btn {
  margin-left:auto; width:36px; height:36px; border-radius:10px; border:1px solid var(--border);
  background:var(--card); cursor:pointer; font-weight:700; font-size:18px; line-height:1;
}
.toggle-btn:focus { outline: 2px solid var(--accent, #007bff); outline-offset: 2px; }
*/




/* Base commune */
.toggle-btn {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-weight: 800;
  font-size: 20px;         /* pour le +/- */
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease, transform .05s ease;
}
.toggle-btn:focus {
  outline: 2px solid var(--accent, #4da3ff);
  outline-offset: 2px;
}
.toggle-btn:active { transform: translateY(1px); }






.toggle-btn {
    background: #1e293b;         /* dark slate */
    color: #f8fafc;               /* clair pour +/- */
    border-color: rgba(0,0,0,.35);
  }
  .toggle-btn:hover {
    background: #111827;          /* un poil plus foncé au survol */
    border-color: #ff9800;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, .35); /* halo ORANGE */
    color: #ffffff;
  }
















.downloads-content { margin-top: 12px; }
.dl-list { list-style:none; margin: 0 0 8px; padding:0; display:grid; gap:10px; }
.dl-list li {
  display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--border);
  border-radius:12px; background:var(--card);
}
.dl-list .meta { color: var(--muted); font-size: .9rem; margin-left: 6px; }
.dl-list .actions { margin-left:auto; }
.btn.small { padding:6px 10px; font-size:.9rem; border-radius:8px; }

/* États (ouvert/fermé) */
.downloads.collapsed .downloads-content { display:none; }




/* Webclient (section repliable) */
.webclient { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 24px; }
.webclient-header { display:flex; align-items:center; gap:10px; }
.webclient-icon { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:rgba(0,0,0,.06); color:var(--text); }
.webclient h2 { margin:0; font-size:1.2rem; line-height:1.2; }

.webclient-content { margin-top: 12px; }
.webclient-content p { margin: 4px 0; }

.webclient.collapsed .webclient-content { display:none; }