/* JW Design — compiled stylesheet (équivalent de scss/style.scss) */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden;transition:background-color .5s ease,color .5s ease}

:root,[data-theme="dark"]{
  --accent:#11a3b2;
  --accent-soft:rgba(17,163,178,.18);
  --accent-tint:rgba(17,163,178,.08);
  --bg-0:#0a1f22;
  --bg-1:#0e272b;
  --bg-2:#123036;
  --ink:#eef3f2;
  --ink-2:#a8bbba;
  --ink-3:#6a8583;
  --rule:#1b3a3e;
  --logo-src:url('../assets/logo_jw_white.png');
}
[data-theme="light"]{
  --accent:#11a3b2;
  --accent-soft:rgba(17,163,178,.18);
  --accent-tint:rgba(17,163,178,.06);
  --bg-0:#f6f8f7;
  --bg-1:#ffffff;
  --bg-2:#eef2f1;
  --ink:#0a1f22;
  --ink-2:#3e5a5c;
  --ink-3:#8aa1a2;
  --rule:#d7e0df;
  --logo-src:url('../assets/logo_jw_color.png');
}

body{
  color:var(--ink);
  background:var(--bg-0);
  background-image:
    radial-gradient(1200px 700px at 80% -10%, var(--accent-tint) 0%, transparent 60%),
    radial-gradient(900px 600px at 0% 100%, var(--accent-tint) 0%, transparent 55%);
  background-attachment:fixed;
}

a{color:inherit;text-decoration:none;transition:color .25s ease}
a:hover{color:var(--accent)}

.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;letter-spacing:.01em}

.container-jw{max-width:1120px;margin:0 auto;padding-left:40px;padding-right:40px}

/* ---------- Nav ---------- */
.nav-top{display:flex;align-items:center;justify-content:space-between;padding:28px 40px;max-width:1120px;margin:0 auto;gap:24px}
.nav-top .brand{font-family:'Cormorant Garamond',serif;font-size:18px;letter-spacing:.35em;color:var(--ink-2);text-transform:uppercase}
.nav-top .links{display:flex;align-items:center;gap:34px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.nav-top .links a:hover{color:var(--accent)}

.theme-toggle{
  appearance:none;background:transparent;border:1px solid var(--rule);color:var(--ink-2);
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .25s ease,color .25s ease,background .25s ease,transform .4s ease;
  padding:0;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="light"] .theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-moon{display:none}

/* ---------- Hero ---------- */
.hero{min-height:calc(100vh - 90px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 40px 120px;position:relative}
.hero .logo{width:min(520px,72vw);height:auto;opacity:0;animation:fadeUp .9s .1s ease-out forwards;transition:opacity .4s ease}
.hero .tagline{margin-top:42px;font-size:clamp(18px,2vw,22px);letter-spacing:.45em;text-transform:uppercase;color:var(--ink-2);font-weight:300;opacity:0;animation:fadeUp .9s .45s ease-out forwards}
.hero .rule{margin:36px auto 0;width:80px;height:1px;background:var(--accent);opacity:0;animation:grow .9s .7s ease-out forwards}
.hero .intro{margin-top:36px;max-width:620px;font-size:17px;line-height:1.7;color:var(--ink-2);opacity:0;animation:fadeUp .9s .8s ease-out forwards}
.hero .scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;animation:fadeUp .9s 1.1s ease-out forwards}
.hero .scroll .line{width:1px;height:36px;background:linear-gradient(var(--accent),transparent);animation:scrollPulse 2.2s ease-in-out infinite}

/* ---------- Sections ---------- */
section{padding:120px 0}
.section-label{display:flex;align-items:center;gap:16px;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);margin-bottom:28px}
.section-label::before{content:"";width:36px;height:1px;background:var(--accent)}
.section-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-.005em;margin-bottom:56px;max-width:760px}
.section-title em{font-style:italic;color:var(--accent);font-weight:300}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.about-grid p{color:var(--ink-2);font-size:16px;line-height:1.85;margin:0}
.about-grid p+p{margin-top:18px}
.about-meta{border-left:1px solid var(--rule);padding-left:32px;margin:0}
.about-meta dt{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.about-meta dd{font-size:15px;color:var(--ink);margin:0 0 26px;line-height:1.5}
.about-meta dd.serif{font-size:22px}

.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.skill{padding:40px 34px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);position:relative;transition:background .35s ease}
.skill:hover{background:var(--accent-tint)}
.skill:hover .skill-num{color:var(--accent)}
.skill-num{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--ink-3);letter-spacing:.1em;transition:color .35s ease}
.skill-title{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:400;margin:14px 0 12px;line-height:1.1}
.skill-desc{font-size:14px;color:var(--ink-2);line-height:1.6;margin:0}

.contact{text-align:center;padding:140px 0 120px;border-top:1px solid var(--rule)}
.contact .section-label{justify-content:center}
.contact .section-label::before{display:none}
.contact h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(44px,6vw,76px);line-height:1.05;margin:0 0 36px}
.contact h2 em{color:var(--accent);font-style:italic}
.contact .mail{display:inline-block;font-family:'Cormorant Garamond',serif;font-size:clamp(22px,2.4vw,30px);letter-spacing:.04em;padding-bottom:6px;border-bottom:1px solid var(--accent-soft);transition:border-color .3s ease,color .3s ease}
.contact .mail:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Footer turquoise ---------- */
.site-footer{background:var(--accent);color:#fff}
.site-footer .footer-inner{max-width:1120px;margin:0 auto;padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-footer .footer-logo{height:40px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.site-footer .footer-meta{font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.9);text-align:right}
.site-footer .footer-meta .line-1{font-family:'Cormorant Garamond',serif;font-size:16px;letter-spacing:.25em;text-transform:uppercase;margin-bottom:6px}
.site-footer a{color:#fff}
.site-footer a:hover{color:rgba(255,255,255,.75)}

/* ---------- Animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes grow{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .container-jw{padding-left:24px;padding-right:24px}
  .nav-top{padding:20px 24px}
  .nav-top .links{gap:20px;font-size:11px}
  section{padding:80px 0}
  .about-grid{grid-template-columns:1fr;gap:50px}
  .about-meta{border-left:none;border-top:1px solid var(--rule);padding:32px 0 0}
  .skills-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .site-footer .footer-inner{flex-direction:column;padding:32px 24px;gap:18px}
  .site-footer .footer-meta{text-align:center}
}
@media (max-width:520px){
  .nav-top .links a.nav-link{display:none}
}