/* Fonts */
@font-face{
  font-family:"JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Variable.ttf") format("truetype-variations");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src: url("../fonts/Manrope-Variable.ttf") format("truetype-variations");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

/* Palette & layout */
:root{
  --bg:#ffffff;
  --fg:#0e0e0e;
  --brand:#000000;
  --accent:#FF5C00;
  --muted:#666666;
  --line:#111111;
  --wrap:1100px;
  --radius:10px;
}

/* Reset */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65;
}

/* Liens */
a{color:inherit;text-underline-offset:2px}
a:hover,a:focus{color:var(--accent)}
a.icon{ text-decoration:none; line-height:0; }

/* Conteneur */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* Titres */
h1,h2,h3{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  letter-spacing:-0.005em;
}
h1{
  font-size:clamp(17px,4vw,25px);
  line-height:1.2;
  margin:1.2em 0 0.7em;
  font-weight:700;
}
h2{
  font-size:clamp(14px,4vw,18px);
  line-height:1.2;
  margin:1.0em 0 0.6em;
  font-weight:450;
}
h3{
  font-size:clamp(11px,4vw,16px);
  margin:1.1em 0 0.4em;
  font-weight:450;
}
strong,b{font-weight:700}

/* Texte */
.site-main p,
.site-main li,
.site-main blockquote,
.site-main dd,
.site-main dt,
.site-main figcaption,
.site-main table{
  font-weight:400;
}
.site-main em,.site-main i{font-style:italic}
.site-main strong,.site-main b{font-weight:700}

/* Code */
code,kbd,samp,pre{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-weight:450;
}

/* Header */
.site-header{position:sticky;top:16px;z-index:1000;background:transparent}
.header-card{
  background:var(--brand);
  color:#fff;
  border-radius:var(--radius);
  padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .35s ease, opacity .25s ease, box-shadow .25s ease;
}
.header-card.hide{transform:translateY(-140%);opacity:0}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.brand img{height:32px;display:block;filter:invert(0) brightness(1)}
.brand-name{color:#fff;font-size:18px;letter-spacing:.3px}

.site-nav a{
  margin-left:18px;text-decoration:none;color:#fff;opacity:.95;
  padding:4px 2px;border-radius:6px;transition:color .15s ease,opacity .15s ease
}
.site-nav a:hover,.site-nav a:focus{color:var(--accent);opacity:1}
.site-nav a.active{color:var(--accent)}
.site-nav .icon img{height:20px;vertical-align:middle;filter:invert(1);opacity:.95}
.site-nav .icon img:hover{opacity:1}

/* Main */
.site-main .wrap{padding:12px 24px 24px}

/* Hero */
.hero{margin:0;padding:0;text-align:left}

/* Séparateurs */
hr{border:0;border-top:1px solid var(--line);margin:28px 0}

/* Footer */
.site-footer{margin-top:48px}
.footer-card{
  background:#000;color:#fff;border-radius:var(--radius);
  padding:32px;display:grid;gap:12px;
  grid-template-columns:1.4fr 1fr 1.2fr;
  align-items:center;
}
.footer-brand{display:flex;align-items:center;gap:15px}
.footer-brand img{height:56px;filter:none}
.footer-brand .brand-name{color:#fff;font-size:20px}

.footer-nav a{display:block;color:#fff;text-decoration:none;margin:6px 0}
.footer-nav a:hover{color:var(--accent)}

.footer-info p{margin:.25rem 0}

.footer-bottom{padding:18px 0 28px;text-align:center}
.footer-bottom .divider{height:1px;background:#eaeaea;margin:12px auto 16px;max-width:260px}
.bottom-social{display:flex;align-items:center;justify-content:center;gap:16px}
.bottom-social .icon img{height:22px;display:block;filter:invert(0)}
.copyright{color:var(--muted);font-size:.95rem;margin:10px 0 0}

/* Responsive */
@media (max-width:980px){
  .footer-card{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .site-nav a{margin-left:14px}
  .footer-card{grid-template-columns:1fr}
}

/* Utilitaires */
.tiny{font-size:.9rem;color:var(--muted);text-align:center;margin:16px 0 32px}

/* Mobile */
img{max-width:100%;height:auto}
@media (max-width: 720px){
  .site-header{ top:10px; }
  .header-card{
    padding:12px 14px;
    border-radius:14px;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .brand{ gap:10px; }
  .brand img{ height:28px; }
  .brand-name{ font-size:17px; letter-spacing:0; }
  .site-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 12px;
    width:100%;
  }
  .site-nav a{
    margin:0;
    padding:8px 10px;
    font-size:15px;
    border-radius:10px;
    background:rgba(255,255,255,.06);
  }
  .site-nav .icon{ padding:8px; }
  .site-nav .icon img{ height:18px; }
  .site-main .wrap{ padding:14px 20px 24px; }
}
@media (max-width: 380px){
  .brand-name{ font-size:16px; }
  .site-nav a{ font-size:14px; padding:6px 8px; }
}
@media (max-width: 720px){
  .footer-card{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
    gap:12px;
    padding:22px;
    border-radius:14px;
  }
  .footer-brand{
    flex-direction:column;
    gap:8px;
  }
  .footer-brand img{ height:44px; }
  .footer-brand .brand-name{ font-size:18px; }
  .footer-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 12px;
  }
  .footer-nav a{
    margin:0;
    padding:8px 10px;
    border-radius:10px;
    background:#0f0f0f;
  }
  .footer-info p{ margin:.3rem 0; }
  .footer-bottom .divider{
    max-width:140px;
    margin:14px auto;
  }
}
@media (max-width: 720px){
  .site-header{ top: 8px; }
  .header-card{
    padding: 8px 12px;
    border-radius: 12px;
    gap: 6px;
  }
  .brand img{ height: 22px; }
  .brand-name{ font-size: 15px; }
  .site-nav{ gap: 8px 10px; }
  .site-nav a{
    padding: 5px 7px;
    font-size: 14px;
    border-radius: 8px;
  }
  .site-nav .icon{ padding: 5px; }
  .site-nav .icon img{ height: 16px; }
}