/* ───────────────── Base & tokens ───────────────── */
:root{
  /* Palette */
  --bg:#000000;
  --elev:#1a1a1a;
  --panel:#0d0d0d;
  --chip:#2e2e2e;
  --text:#ffffff;
  --muted:#b3b3b3;
  --brand:#ff8c42;
  --brand-hover:#ffa64d;

  --max:1100px;
  --radius:12px;
  --shadow:0 2px 8px rgba(0,0,0,0.2);

  /* typo fluide */
  --step--1: clamp(.9rem, .85rem + .2vw, 1rem);
  --step-0 : clamp(1rem, .95rem + .5vw, 1.125rem);
  --step-1 : clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  --step-2 : clamp(1.6rem, 1.3rem + 1.8vw, 2.2rem);
  --step-3 : clamp(2.2rem, 1.8rem + 2.6vw, 3rem);

  /* Accents FR plus nets (optionnel) */
  font-variant-ligatures: contextual common-ligatures;
  font-feature-settings: "kern","liga","clig","calt";
}

*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}

body{
  margin:0;
  font-family:'Segoe UI', Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; height:auto; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 1rem}

/* Visually hidden (accessibility) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Focus visible */
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ───────────────── Header & nav ───────────────── */
.site-header{
  background:var(--elev);
  padding:1rem 0;
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--muted);
}
.site-header .container{
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
}
.brand{margin:0; font-size:var(--step-1); letter-spacing:2px}
.brand a{color:var(--text); text-decoration:none; display:inline-block}
.brand a img{vertical-align:middle; margin-right:10px}
.brand a:hover{
  opacity:.9; transform:scale(1.02);
  transition: opacity .4s ease, transform .4s ease, filter .4s ease;
  filter:drop-shadow(0 0 5px var(--brand));
}

/* Desktop nav visible */
.nav{display:flex; gap:1rem}
.nav a{
  color:#f4f4f4; text-decoration:none; padding:.6rem .7rem;
  border-radius:10px; font-weight:500; opacity:.9;
  transition:color .2s ease, opacity .2s ease;
}
.nav a[aria-current="page"], .nav a:hover{color:var(--brand); opacity:1}

/* Hamburger button (hidden desktop) */
.nav-toggle{display:none}

/* ───────────────── Lang switch in hamburger ───────────────── */
.lang-switch{
  display:flex; align-items:center; gap:.5rem;
  margin-left:auto; /* pousse à droite sur desktop */
}

.flag-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .6rem; border-radius:10px;
  background:var(--panel); border:1px solid rgba(255,255,255,.12);
  color:var(--muted); font-weight:600; font-size:var(--step--1);
  cursor:pointer; transition:transform .15s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.flag-btn:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.25); color:var(--text); }
.flag-btn.active{ background:var(--brand); color:#000; border-color:transparent; }
.flag-btn img{ display:block; border-radius:3px; }

/* dans le menu mobile (popover), on isole la section */
.nav .lang-switch{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:.6rem; padding-top:.6rem;
  justify-content:flex-start;
}

/* ───────────────── Hero ───────────────── */
.hero{
  /* image de fond + overlay */
  background:
    linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)),
    url('images/banner/banner.webp') no-repeat center bottom / cover fixed;
  padding:6rem 0 4rem;
  text-align:center;
  min-height:400px;
  display:flex; align-items:center; position:relative;
}
.hero .container{padding:2rem 1rem}
.hero-logo{
  width:clamp(180px, 40vw, 500px);
  height:auto; margin:0 auto 2rem;
  filter:drop-shadow(0 0 10px rgba(255,140,66,.8));
}
.hero h2{font-size:var(--step-3); margin:.25rem 0 1rem}
.hero p{font-size:var(--step-0); opacity:.9}

/* CTA */
.cta-row{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1rem}
.btn{
  --bg-btn:rgba(255,255,255,.06);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1rem; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:var(--bg-btn); color:var(--text);
  text-decoration:none; font-weight:600;
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{border-color:rgba(255,255,255,.2); transform:translateY(-1px)}
.btn-primary{background:var(--brand); color:#000; border-color:transparent}
.btn-primary:hover{background:var(--brand-hover)}

/* ───────────────── Project section ───────────────── */
.project{background:var(--panel); padding:3rem 0}
.project h2{font-size:var(--step-2); margin:0 0 1rem}
.project p{font-size:var(--step-0); margin:0 0 1.2rem}

/* Features en grille responsive (chips) */
.features{
  list-style:none; padding:0; margin:0 0 2rem 0;
  display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.features li{
  background:var(--chip); padding:.75rem 1rem; border-radius:20px;
  font-size:var(--step--1); border:1px solid rgba(255,255,255,.06);
}

/* ───────────────── Gallery ───────────────── */
.screenshots{
  display:grid; gap:.75rem; margin:0 0 2rem 0; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.screenshots li{list-style:none}
.screenshots img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:10px; background:#333; border:2px solid var(--chip);
  transition:transform .25s ease; cursor:pointer;
}
.screenshots img:hover{transform:scale(1.02)}

/* ───────────────── Contact ───────────────── */
.contact{background:var(--elev); padding:3rem 0}
.contact h2{margin:0 0 1rem}
form{display:grid; gap:1rem; max-width:480px; margin:0 auto}
form input, form textarea{
  padding:.9rem 1rem; border:none; border-radius:8px; font-size:var(--step--1);
  background:var(--chip); color:#f4f4f4; border:1px solid rgba(255,255,255,.08);
}
form button{
  padding:.9rem 1rem; background:var(--brand); color:#000; border:none;
  border-radius:8px; font-size:var(--step--1); font-weight:700; cursor:pointer;
  transition:background .2s ease, transform .15s ease; display:block; margin:0 auto;
  width:60%; max-width:300px;
}
form button:hover{background:var(--brand-hover); transform:translateY(-1px)}
.hp{display:none}

/* Contact layout */
.contact .container{display:flex; flex-direction:column; align-items:center}
.contact h2{text-align:center; margin-bottom:1.25rem}
.contact form{
  width:100%; max-width:560px; margin:0 auto; display:grid; gap:1rem;
}
.contact form label{display:block; width:100%}
.contact form input, .contact form textarea{width:100%; box-sizing:border-box}
.contact form .btn, .contact form button{justify-self:center}

/* ───────────────── Footer ───────────────── */
.site-footer{
  background:var(--panel); text-align:center; padding:1rem 0;
  font-size:var(--step--1); color:var(--muted); border-top:1px solid var(--muted);
}
.site-footer .container{display:flex; flex-direction:column; align-items:center}
.site-footer p{
  width:100%; border-top:1px solid rgba(255,255,255,.1);
  padding-top:1.5rem; padding-bottom:.5rem; margin:0;
}
.social-links{
  display:flex; justify-content:center; gap:1.5rem; width:100%;
  padding-bottom:1.5rem;
}
.social-links a{
  color:var(--muted); font-size:var(--step-1);
  transition: color .2s ease, transform .2s ease;
}
.social-links a:hover{color:var(--brand); transform:translateY(-2px)}

/* ───────────────── Lightbox Styles ───────────────── */
.lightbox{
  /* Hidden by default + container */
  display:flex; justify-content:center; align-items:center;
  position:fixed; inset:0; z-index:1000; overflow:auto;
  background-color:rgba(0,0,0,.9);
  opacity:0; pointer-events:none; transition:opacity .3s ease-in-out;
}
.lightbox.active{opacity:1; pointer-events:auto}
.lightbox-img{
  max-width:90%; max-height:90%; object-fit:contain;
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,.2); color:#fff;
  border:none; border-radius:50%; width:40px; height:40px; font-size:2rem;
  cursor:pointer; display:flex; justify-content:center; align-items:center;
  padding-bottom:5px; transition:background .2s ease; z-index:1010;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{background:var(--brand)}
.lightbox-close{top:20px; right:20px; font-size:3rem; padding-bottom:0}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
/* Focus states */
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}

/* ───────────────── Breakpoints ───────────────── */

/* ≥ 860px : grille de formulaire en colonnes */
@media (min-width: 860px){
  .contact form{grid-template-columns:1fr 1fr}
  .contact form label:nth-child(1),
  .contact form label:nth-child(2){grid-column:auto}
  .contact form label:nth-child(3),
  .contact form label:nth-child(4){grid-column:1 / -1}
  .contact form .btn,
  .contact form button{grid-column:1 / -1; justify-self:end}
}

/* ≤ 780px : mobile */
@media (max-width: 780px){
  /* Header & nav */
  .site-header{position:sticky; top:0; z-index:100}
  .site-header .container{position:relative; flex-direction:row; align-items:center}

  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center;
    gap:5px; width:42px; height:42px; border:1px solid rgba(255,255,255,.2);
    background:transparent; color:#fff; border-radius:10px; cursor:pointer; z-index:120;
  }
  .nav-toggle .line{display:block; height:2px; width:22px; background:#fff; transition:transform .2s ease, opacity .2s ease}
  .nav-toggle{ position: relative; z-index: 130; touch-action: manipulation; }
  
  .nav{
    position:absolute; right:1rem; top:64px;
    display:flex; flex-direction:column; gap:.5rem;
    background:var(--elev); padding:.8rem; border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    width:min(85vw, 280px); max-height:70vh; overflow:auto;
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; z-index:110;
  }
  .nav.is-open{opacity:1; transform:translateY(0); pointer-events:auto}
  .nav a{display:block; padding:.6rem .7rem; margin:0}

  /* Effet croix */
  .nav-toggle[aria-expanded="true"] .line:nth-child(2){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .line:nth-child(3){opacity:0}
  .nav-toggle[aria-expanded="true"] .line:nth-child(4){transform:translateY(-7px) rotate(-45deg)}

  /* Parallax stable mobile */
  .hero{background-attachment:scroll}
  .hero-logo{width:clamp(160px, 50vw, 320px)}

  /* Lightbox hit areas plus grandes */
  .lightbox-close, .lightbox-prev, .lightbox-next{
    width:48px; height:48px; font-size:2.2rem;
  }

  .lang-switch{ margin-left:0; }
  .flag-btn{ width:calc(50% - .25rem); justify-content:center; }
  .nav .lang-switch{ gap:.5rem; }

}

/* Body lock (piloté par JS quand menu ouvert) */
html.nav-open, body.nav-open{overflow:hidden}

/* Option : masquer le label EN/FR et ne garder que les drapeaux (en desktop) */
@media (min-width: 781px){
  .flag-label{ display:none; }
}


/* Reduced motion (unique bloc) */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}