:root{
    --bg:#121212; --card:#1d1d1d; --text:#eee; --muted:#aaa; --accent:#feec0c; --border:#2a2a2a;
  }
  *{box-sizing:border-box}
  html,body{  scrollbar-gutter: stable;    margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif }
  img{max-width:100%;height:auto;display:block}
  a{color:#fff;text-decoration:none}
  a:focus,button:focus{outline:2px solid var(--accent);outline-offset:2px}
  .container{max-width:1080px;margin:0 auto;padding:0 16px}
  
  .site-header{position:sticky;top:0;background:rgba(18,18,18,.9);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--border);z-index:10}
  .header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
  /* .logo img{height:80px; transform: scale(1.8);} */
  .logo{
    display:flex;
    align-items:center;
  }
  
  .logo img{
    height:80px;          /* taille maîtrisée */
    transform: scale(1.8);
    width:auto;           /* ⬅️ empêche l’écrasement */
    object-fit:contain;   /* sécurité */
  }
  
  .site-header nav a{margin-left:16px;color:#ddd}
  .site-header nav a[aria-current="page"]{color:#fff;font-weight:600}
  
  .site-footer{border-top:1px solid var(--border);margin-top:40px}
  .footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:16px 0}
  .footer-inner nav a{color:#ddd;margin-left:12px}
  
  .hero{padding:40px 0 24px;border-bottom:1px solid var(--border)}
  .hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
  .hero h1{font-size:40px;margin:0 0 8px}
  .hero p{margin:0 0 16px}
  .muted{color:var(--muted);}
  .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom: 15px;  }
  
  .btn{display:inline-block;padding:12px 16px;border-radius:10px;border:1px solid var(--border)}
  .btn-primary{background:var(--accent);border-color:var(--accent);color:#121212}
  .btn-ghost{background:transparent;color:#bdbdbd}
  
  .features{padding:28px 0}
  .features .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:16px}
  .card-profile{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  
  .profile-media{
    width:100%;
    aspect-ratio: 4 / 5;          /* zone stable (portrait) */
    border-radius:15px;           /* aligné avec la card */
    border:1px solid var(--border);
    overflow:hidden;
    background:#111;              /* fond pour les “bandes” si contain */
  }
  
  /* .profile-img{ object-fit: cover; object-position: center top; transform: scale(1.08); } */
  .profile-img{
    width:100%;
    height:100%;
    display:block;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.08);
  }
  

  
  
  .screens{padding:10px 0 28px}
  .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  
  .page{padding:28px 0}
  .page h1{margin-top:0}
  .page ul{padding-left:18px}
  .page li{margin:4px 0}
  
  .full-center{min-height:100vh;display:grid;place-items:center;text-align:center;padding:32px}
  .notfound h1{font-size:64px;margin:0 0 8px}
  
  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr}
    .shots{grid-template-columns:1fr 1fr}
  }
  @media (max-width:600px){
    .features .grid{grid-template-columns:1fr}
    .shots{grid-template-columns:1fr}
  }
  
/* Desktop vs Mobile */
.nav-desktop{display:flex;gap:16px;align-items:center}
.nav-toggle{display:none;background:transparent;border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer}

/* Overlay */
.nav-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index:20;

  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
}

/* Panel (toujours à droite, hors écran par défaut) */
.nav-panel{
  position:fixed;
  top:0;
  right:0;
  left:auto;
  margin:0;

  height:100vh;
  width:min(86vw, 360px);

  background:rgba(18,18,18,.98);
  border-left:1px solid var(--border);
  z-index:30;

  transform: translate3d(100%,0,0);
  transition: transform .22s ease;
  will-change: transform;
}

/* OUVERT */
.menu-open .nav-overlay{
  opacity:1;
  pointer-events:auto;
}
.menu-open .nav-panel{
  transform: translate3d(0,0,0);
}

/* Panel content */
.nav-panel-header{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 12px}
.nav-close{background:transparent;border:1px solid var(--border);border-radius:10px;padding:8px 10px;color:#ddd;cursor:pointer}
.nav-mobile{display:flex;flex-direction:column;gap:10px;padding:6px 4px}
.nav-mobile a{
  padding:12px 10px;border:1px solid var(--border);
  border-radius:12px;color:#eee;background:var(--card);
}
.nav-mobile a[aria-current="page"]{border-color:var(--accent)}

/* Mobile breakpoint */
@media (max-width: 760px){
  .nav-desktop{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .nav-panel, .nav-overlay{transition:none}
}



/* Burger visible quoi qu'il arrive */
.burger{
  display:block;
  width:22px;
  height:2px;
  background:#ddd;
  position:relative;
}
.burger::before,.burger::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:#ddd;
}
.burger::before{ top:-7px; }
.burger::after{ top:7px; }