/* =========================================================
   VOLTRIP — voltrip.net
   Feuille de style unique, chargée par toutes les pages.

   POURQUOI UNE FEUILLE EXTERNE POUR UN SI PETIT SITE

   Quatre pages seulement, mais quatre pages qui partagent tout : la même
   barre, le même pied, les mêmes cartes, les mêmes couleurs. Écrire le style
   dans chaque page, c'est accepter qu'il diverge au premier ajustement — et
   c'est perdre le cache du navigateur, qui télécharge alors le même style
   quatre fois pour un visiteur qui lit les mentions légales.

   Palette reprise du jeu, à l'identique. Un site qui ne ressemble pas à ce
   qu'il vend fait douter de ce qu'il vend.
   ========================================================= */

:root{
  --fond:      #05070d;
  --fond2:     #0b1018;
  --carte:     #0e141f;
  --ligne:     rgba(255,255,255,.09);
  --txt:       #e8eef7;
  --muted:     #93a2b8;
  --volt:      #ffd23f;
  --cyan:      #35e6ff;
  --vert:      #3dffa8;
  --rouge:     #ff3b3b;
  --rayon:     14px;
  --largeur:   1080px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--fond);
  color:var(--txt);
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--cyan); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width:var(--largeur); margin:0 auto; padding:0 20px; }

/* ---------------- Barre ---------------- */
.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(5,7,13,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ligne);
}
.nav__in{
  max-width:var(--largeur); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:18px;
}
.nav__logo{ font-weight:800; letter-spacing:.06em; font-size:18px; color:var(--txt); }
.nav__logo span{ color:var(--volt); }
.nav__links{ margin-left:auto; display:flex; gap:18px; flex-wrap:wrap; }
.nav__links a{ color:var(--muted); font-size:14px; }
.nav__links a:hover{ color:var(--txt); text-decoration:none; }

/* ---------------- Bandeau ---------------- */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--ligne);
  padding:72px 0 64px;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:url('../img/hero.webp') center/cover no-repeat;
  opacity:.28;
  /* Le flou est appliqué ici et non à l'image : elle sert aussi de visuel
     net plus bas dans la page, et deux fichiers pour la même illustration
     coûteraient plus cher que ce filtre, qui n'est peint qu'une fois. */
  filter:blur(3px) saturate(1.1);
  transform:scale(1.06);
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(5,7,13,.72) 0%, rgba(5,7,13,.5) 45%, rgba(5,7,13,.96) 100%);
}
.hero__in{ position:relative; z-index:2; }
.hero h1{
  margin:0 0 6px; font-size:clamp(38px, 8vw, 68px); letter-spacing:.02em; line-height:1.05;
}
.hero h1 b{ color:var(--volt); font-weight:800; }
.hero__tag{ margin:0 0 22px; font-size:clamp(17px, 3vw, 22px); color:var(--muted); max-width:640px; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

.btn{
  display:inline-block; padding:13px 22px; border-radius:12px;
  font-weight:700; font-size:15px; border:1px solid transparent;
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.08); text-decoration:none; }
.btn--volt{ background:var(--volt); color:#0b0f14; }
.btn--ghost{ border-color:var(--ligne); color:var(--txt); background:rgba(255,255,255,.04); }

.badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.badge{
  font-size:12px; color:var(--muted);
  border:1px solid var(--ligne); border-radius:999px; padding:5px 12px;
}

/* ---------------- Sections ---------------- */
section{ padding:64px 0; border-bottom:1px solid var(--ligne); }
section:last-of-type{ border-bottom:0; }
h2{ font-size:clamp(24px, 4vw, 34px); margin:0 0 8px; letter-spacing:.01em; }
.sub{ color:var(--muted); margin:0 0 30px; max-width:680px; }

.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.card{
  background:var(--carte); border:1px solid var(--ligne); border-radius:var(--rayon);
  padding:20px;
}
.card h3{ margin:0 0 8px; font-size:17px; }
.card h3 i{ font-style:normal; margin-right:8px; }
.card p{ margin:0; color:var(--muted); font-size:14.5px; }
.card--chaos{ border-color:rgba(255,59,59,.45); background:rgba(255,59,59,.05); }
.card--chaos h3{ color:#ff6b6b; }

.shots{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
.shots img{
  width:100%; height:auto; display:block;
  border-radius:var(--rayon); border:1px solid var(--ligne);
}

/* ---------------- Pages légales ---------------- */
.legal{ max-width:820px; }
.legal h2{ margin-top:38px; font-size:21px; }
.legal h2:first-of-type{ margin-top:0; }
.legal p, .legal li{ color:#c9d4e4; font-size:15px; }
.legal ul{ padding-left:22px; }
.legal .maj{ color:var(--muted); font-size:13px; }
.note{
  border:1px solid rgba(255,210,63,.35); background:rgba(255,210,63,.07);
  border-radius:12px; padding:14px 16px; margin:22px 0;
  font-size:14px;
}
.note b{ color:var(--volt); }

/* ---------------- Pied ---------------- */
footer{
  border-top:1px solid var(--ligne); padding:34px 0 46px;
  color:var(--muted); font-size:13.5px; background:var(--fond2);
}
footer .wrap{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
footer nav{ margin-left:auto; display:flex; gap:16px; flex-wrap:wrap; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn:hover{ transform:none; }
}

/* ---------------------------------------------------------
   PORTFOLIO DE CAPTURES

   Les captures viennent de plusieurs appareils et n'ont donc pas le même
   rapport hauteur/largeur. Une grille brute les affichait de tailles
   différentes, ce qui se lit comme un montage bâclé même quand chaque image
   est bonne. On impose donc une TUILE DE PROPORTION FIXE : l'image la
   remplit en recadrant par le centre, et l'image entière ne se voit qu'au
   clic. Le regard balaie une grille régulière, et c'est le contenu qui
   ressort au lieu du cadrage.
   --------------------------------------------------------- */
.folio{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
.folio__item{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--rayon); border:1px solid var(--ligne);
  background:var(--carte);
  /* EXACTEMENT LE RAPPORT DES CAPTURES (1080x2090 du Galaxy S23 FE).
     La tuile était en 9/16, un format d'écran générique : chaque capture y
     perdait une bande en bas, celle qui porte justement le bouton STOP et le
     bandeau de légende. En calant la tuile sur les images réelles, plus rien
     n'est rogné — et si une capture d'un autre appareil arrive un jour, le
     `object-fit:cover` ci-dessous la rattrape sans casser l'alignement. */
  aspect-ratio:540 / 1045;
  transition:transform .15s ease, border-color .15s ease;
}
.folio__item:hover{ transform:translateY(-3px); border-color:rgba(255,210,63,.45); text-decoration:none; }
.folio__item img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:top center;
}
.folio__leg{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 10px 9px;
  font-size:12.5px; letter-spacing:.02em; text-align:center; color:var(--txt);
  background:linear-gradient(180deg, rgba(5,7,13,0), rgba(5,7,13,.92));
}

/* ---------------------------------------------------------
   SÉLECTEUR DE LANGUE

   Un <details> plutôt qu'un script : il fonctionne sans JavaScript, au
   clavier, et se referme tout seul. Un sélecteur de langue qui a besoin d'un
   script est un sélecteur qui ne marche pas quand le script échoue —
   c'est-à-dire exactement quand le visiteur en a besoin.

   Aucun libellé à côté du drapeau : l'écrire, ce serait l'écrire dans UNE
   langue, celle que le visiteur ne comprend peut-être pas.
   --------------------------------------------------------- */
.lang{ position:relative; margin-left:14px; }
.lang__btn{
  list-style:none; cursor:pointer;
  font-size:20px; line-height:1;
  padding:6px 9px; border-radius:10px;
  border:1px solid var(--ligne); background:rgba(255,255,255,.04);
  user-select:none;
}
.lang__btn::-webkit-details-marker{ display:none; }
.lang__btn:hover{ border-color:rgba(255,255,255,.28); }
.lang__menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30;
  background:var(--carte); border:1px solid var(--ligne);
  border-radius:10px; padding:5px; min-width:46px;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.lang__menu a{
  display:block; text-align:center; font-size:20px; line-height:1;
  padding:6px 8px; border-radius:7px;
}
.lang__menu a:hover{ background:rgba(255,255,255,.08); text-decoration:none; }

/* ---------------------------------------------------------
   FENÊTRE D'AGRANDISSEMENT

   L'image tient dans l'écran quoi qu'il arrive : `max-height` en unités de
   fenêtre plutôt qu'une hauteur fixe. Une capture de téléphone est très
   haute — figée en pixels, elle déborderait sur tout écran d'ordinateur
   portable, et on ne verrait jamais le bas.
   --------------------------------------------------------- */
.modale{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:28px 18px;
  background:rgba(3,5,10,.9);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:modaleIn .18s ease;
}
.modale[hidden]{ display:none !important; }
@keyframes modaleIn{ from{ opacity:0; } to{ opacity:1; } }

.modale__fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.modale__img{
  max-width:min(92vw, 460px); max-height:78vh;
  width:auto; height:auto; display:block;
  border-radius:var(--rayon); border:1px solid var(--ligne);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.modale__leg{ font-size:13.5px; color:var(--muted); letter-spacing:.03em; }

.modale__fermer{
  position:absolute; top:14px; right:16px;
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--ligne); background:rgba(255,255,255,.06);
  color:var(--txt); font-size:26px; line-height:1; cursor:pointer;
}
.modale__fermer:hover{ background:rgba(255,255,255,.14); }

/* La vignette reste un lien : le curseur doit le dire. */
.folio__item{ cursor:zoom-in; }

/* Les drapeaux sont des IMAGES : ils gardent la même forme sur tous les
   systèmes. Le léger arrondi et le liseré évitent qu'un drapeau à fond blanc
   se fonde dans le bouton. */
.lang__btn img, .lang__menu img{
  display:block; border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
}
.lang__btn{ display:flex; align-items:center; padding:8px 10px; }