/* =========================================================
   BlackSword Studios — styles.css (Header+i18n menu + Sections)
   ========================================================= */

/* ---------- Font Face ---------- */
@font-face{
  font-family: "AllrounderMonumentTest-Medium";
  src: url("/assets/fonts/AllrounderMonumentTest-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,0.82);
  --a1:#6ee7ff;      /* cyan steel */
  --a2:#4f46e5;      /* deep indigo */

  /* Header height (compensation) */
  --nav-h:108px;

  /* Reveal timings (apparition == disparition) */
  --reveal-dur: 420ms;
  --reveal-ease: cubic-bezier(.22,.61,.36,1);
  --reveal-shift: 12px;
  --reveal-stagger: 70ms;

  /* Preloader */
  --preloader-fade: 420ms;

  /* i18n dropdown */
  --menu-bg: rgba(8,8,10,0.82);
  --menu-border: rgba(255,255,255,0.18);
  --menu-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 2px 10px rgba(110,231,255,0.10);
  --menu-item-hover: rgba(255,255,255,0.06);
  --check-blue: #69d7ff;
}

/* ---------- Base / Reset ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; scroll-behavior:smooth; }
html{ scroll-padding-top: var(--nav-h); } /* évite que le header masque les ancres */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:var(--bg); color:var(--fg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
::selection{ background:rgba(110,231,255,.28); color:#fff; }
::placeholder{ color:rgba(255,255,255,.55); }

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

/* =========================================================
   PRELOADER (écran noir + SVG animé)
   ========================================================= */
body.loading { overflow: hidden; }
#preloader{
  position: fixed; inset: 0; background:#000; color:#fff; z-index:9999;
  display:grid; place-items:center;
  opacity:1; visibility:visible;
  transition: opacity var(--preloader-fade) var(--reveal-ease), visibility var(--preloader-fade) var(--reveal-ease);
}
#preloader.is-fading{ opacity:0; }
#preloader.is-hidden{ opacity:0; visibility:hidden; }
#preloader .pl-inner{ display:flex; flex-direction:column; align-items:center; gap:20px; }

#preloader .pl-svg{
  width: clamp(280px, 48vmin, 1100px);
  max-width: min(92vw, 92vh);
  height: auto;
  opacity:.95;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.25))
    drop-shadow(0 0 40px rgba(255,255,255,.15));
}
@media (max-width: 380px){
  #preloader .pl-svg{
    width: clamp(240px, 70vw, 340px);
    max-width: 90vw;
  }
}
@media (min-width: 1600px) and (min-height: 900px){
  #preloader .pl-svg{
    width: clamp(600px, 52vmin, 1400px);
    max-width: min(94vw, 94vh);
  }
}
#preloader .pl-fallback{
  width: clamp(72px, 10vmin, 120px);
  height: clamp(72px, 10vmin, 120px);
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.18);
  border-top-color: rgba(120,190,255,0.95);
  animation: plspin 1s linear infinite; display:none;
}
@keyframes plspin { to { transform: rotate(360deg); } }

/* =========================================================
   HEADER — fixe, logo + liens à gauche, i18n à droite
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0;
  min-height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px 16px; z-index:100; /* ↑ au-dessus du contenu */
  pointer-events:auto;
  isolation:isolate;
  backdrop-filter: blur(2px) saturate(120%);
}
.nav::before{
  content:""; position:absolute; inset:0;
  background:#000; z-index:-1; pointer-events:none;
}
/* Masque dégradé (80% noir -> 100% transparent) */
@supports ((-webkit-mask-image: linear-gradient(black, transparent)) or
           (mask-image: linear-gradient(black, transparent))){
  .nav::before{
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  }
}
/* Fin voile en bas (pas de box-shadow dur) */
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0));
  pointer-events:none;
}

/* --- Scoped hard reset (empêche fonds/bordures iOS sur boutons du header) --- */
.nav button,
.nav .nav-link,
.nav .lang-btn{
  -webkit-appearance:none !important; appearance:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important; margin:0; border-radius:0 !important;
  font:inherit; color:inherit;
}
.nav img{ background:transparent !important; border:0; }

.brand{
  pointer-events:auto;
  display:flex; align-items:center; gap:14px;
  color:#fff; letter-spacing:.03em;
}

/* Logo */
.brand-logo-btn{
  display:inline-grid; place-items:center;
  border-radius:14px; cursor:pointer;
}
.brand-logo{
  width:72px; height:72px;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 3px rgba(120,190,255,.55))
    drop-shadow(0 0 10px rgba(120,190,255,.28))
    drop-shadow(0 4px 12px rgba(0,0,0,.65));
  pointer-events:none;
  transition: filter .24s ease;
}
.brand-logo-btn:hover .brand-logo,
.brand-logo-btn:focus-visible .brand-logo{
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 5px rgba(120,190,255,.75))
    drop-shadow(0 0 16px rgba(120,190,255,.40))
    drop-shadow(0 6px 16px rgba(0,0,0,.75));
}

/* Liens (Services / Products / Contact) */
.brand-links{ display:flex; align-items:center; gap:18px; margin-left:10px; }
.nav-link{
  cursor:pointer; color:#fff;
  font-family:"AllrounderMonumentTest-Medium", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif !important;
  font-weight:500;
  font-size: clamp(1.05rem, 2.2vw, 1.85rem);
  letter-spacing:.04em; line-height:1;
  position:relative;
  text-shadow:
    0 0 1px rgba(120,190,255,.35),
    0 0 6px rgba(120,190,255,.18),
    0 2px 8px rgba(0,0,0,.55);
  transition:
    text-shadow .22s ease,
    transform .18s ease,
    opacity .18s ease;
  opacity:.98;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:linear-gradient(90deg,
    rgba(110,231,255,0),
    rgba(110,231,255,.9),
    rgba(110,231,255,0));
  opacity:0; transform:scaleX(.6);
  transform-origin:center;
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover,
.nav-link:focus-visible{
  transform:translateY(-0.5px);
  text-shadow:
    0 0 2px rgba(120,190,255,.55),
    0 0 10px rgba(120,190,255,.35),
    0 3px 12px rgba(0,0,0,.70);
}
.nav-link:hover::after,
.nav-link:focus-visible::after{
  opacity:1; transform:scaleX(1);
}

/* Zone droite (i18n) */
.nav-actions{
  display:flex; align-items:center; gap:12px;
  position: relative; /* parent pour positionner le menu */
}

/* Bouton i18n
   - On conserve un background-image en fallback
   - On supporte aussi <img class="lang-icon"> à l’intérieur (plus fiable) */
.lang-btn{
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(255,255,255,0.16) !important;
  background:
    rgba(255,255,255,0.06)
    url("/assets/i18n/i18n.svg") center/22px 22px no-repeat !important;
  filter: drop-shadow(0 0 2px rgba(120,190,255,.35));
  cursor:pointer;
  display:grid; place-items:center;
  transition: transform .18s ease, filter .22s ease, border-color .18s ease, background-color .18s ease;
}
.lang-btn:hover,
.lang-btn:focus-visible{
  transform:translateY(-0.5px);
  border-color: rgba(110,231,255,.38) !important;
  background-color: rgba(255,255,255,0.10) !important;
  filter: drop-shadow(0 0 6px rgba(120,190,255,.50));
}
/* Si on utilise <img class="lang-icon">, on l’affiche proprement */
.lang-btn .lang-icon{
  width:22px; height:22px; display:block;
  filter: drop-shadow(0 0 2px rgba(120,190,255,.35));
}
/* Fallback emoji éventuel injecté via JS */
.lang-btn .fallback-emoji{
  font-size:18px; line-height:1;
  filter: drop-shadow(0 0 2px rgba(120,190,255,.35));
}

/* Select de langue caché mais présent pour la logique */
.lang{ display:contents; } /* garde l'ordre DOM */
#langSel{ /* visually hidden */
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap;
}

/* ===================== i18n DROPDOWN MENU ===================== */
.lang-dropdown{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-height: 70vh;
  overflow:auto;
  padding: 6px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 12px;
  box-shadow: var(--menu-shadow);
  backdrop-filter: blur(8px) saturate(130%);
  z-index: 2000; /* > header */
}
.lang-dropdown[hidden]{ display:none !important; }

.lang-list{ list-style:none; margin:0; padding:0; }

.lang-item{
  display:grid;
  grid-template-columns: 28px 1fr 22px; /* flag | name | check */
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  color:#fff;
  cursor:pointer;
  user-select:none;
  transition: background .15s ease, transform .1s ease;
}
.lang-item:hover{ background: var(--menu-item-hover); }
.lang-item:active{ transform: translateY(0.5px); }

.lang-item[aria-checked="true"]{
  background: rgba(110,231,255,0.10);
  outline: 1px solid rgba(110,231,255,0.25);
}

.flag{
  width:24px; height:24px; object-fit:cover;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.35));
  border-radius:3px;
}
.lang-name{ font-size: 0.98rem; line-height:1.2; }
.check{
  width:22px; height:22px;
  display:grid; place-items:center;
  font-size: 1rem;
  color: var(--check-blue);
  text-shadow: 0 0 6px rgba(120,190,255,0.55);
}
.lang-item[aria-checked="true"] .check::before{ content:"✓"; }
.lang-item[aria-checked="false"] .check::before{ content:""; }

/* Mobile */
@media (max-width: 820px){
  :root{ --nav-h:96px; }
  .nav{ padding: 12px clamp(12px, 3vw, 20px); }
  .brand-links{ gap:12px; }
  .lang-dropdown{ right: -4px; min-width: 210px; }
}

/* =========================================================
   SIDE NAV — supprimée
   ========================================================= */
.side-nav{ display:none !important; }

/* =========================================================
   PANELS / BACKGROUNDS
   ========================================================= */
.panel{ position:relative; height:200vh; }
.sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }

/* Background media (no parallax) */
.media-wrap{ position:absolute; inset:0; z-index:0; }
.bgvid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:contrast(1.06) saturate(1.05);
  background:#000; z-index:0; /* tout au fond */
}
.bg-solid{ position:absolute; inset:0; background:#000; z-index:0; }
.scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.62), rgba(0,0,0,0.40));
  z-index:1; /* au-dessus de la vidéo */
}

/* =========================================================
   CONTENT BLOCK (titre + textes + chevron)
   ========================================================= */
.copy{
  position:absolute; inset:0; z-index:5; /* au-dessus de la vidéo/scrim */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: clamp(12px, 3.5vw, 24px);
  /* plus d’air en haut et bas, tolérant aux petits écrans/hauteurs */
  padding-top: calc(var(--nav-h) + clamp(8px, 2.5vh, 18px));
  padding-bottom: clamp(20px, 10vh, 16vh);
}

/* =========================================================
   TYPO / LISIBILITÉ
   ========================================================= */
.title{
  font-size:clamp(1.9rem, 5.2vw, 4.2rem);
  font-weight:900; line-height:1.06;
  letter-spacing:.01em;
  background:linear-gradient(90deg,var(--a1),var(--a2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 18px rgba(0,0,0,0.5);
}
.subtitle{
  max-width:min(92vw,860px);
  margin:12px auto 0;
  font-size:clamp(0.98rem, 1.9vw, 1.22rem);
  line-height:1.6;
  color:var(--muted);
}

/* Viewports de faible hauteur */
@media (max-height: 720px){
  .title{    font-size:clamp(1.7rem, 4.6vw, 3.6rem); }
  .subtitle{ font-size:clamp(0.92rem, 1.7vw, 1.12rem); }
  .copy{     padding-bottom: clamp(16px, 9vh, 14vh); }
}

/* =========================================================
   CHEVRONS
   ========================================================= */
.chev{
  width: clamp(32px, 4.2vw, 54px);
  height: auto;
  display:inline-block;
  padding:10px;
  border-radius:12px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  opacity:.98;
  pointer-events:auto;
  touch-action:manipulation;
  position:relative; z-index:10; /* ↑ au-dessus du texte */
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.30))
    drop-shadow(0 0 12px rgba(120,190,255,.40))
    drop-shadow(0 3px 12px rgba(0,0,0,.75));
  transition: filter 160ms ease, opacity 160ms ease;
}
.chev:hover,
.chev:focus-visible{
  opacity:1;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.55))
    drop-shadow(0 0 18px rgba(120,190,255,.38))
    drop-shadow(0 6px 18px rgba(0,0,0,.70));
}
.chev.down{ margin-top: clamp(12px, 4.5vh, 8vh); }
/* IMPORTANT: plus de flip vertical ici (on utilisera l’icône “up” dédiée) */
.chev.up{
  margin: clamp(16px, 4vh, 28px) 0;
}
@media (hover: none) and (pointer: coarse){
  .chev{ padding: 12px; }
}

/* =========================================================
   REVEAL (apparition + réapparition)
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(var(--reveal-shift));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }
.reveal.stagger{ transition-delay: calc(var(--reveal-stagger) * var(--i, 0)); }

/* =========================================================
   CONTACT
   ========================================================= */
.section-contact{
  padding: clamp(36px, 6vw, 64px) 0 clamp(40px, 7vw, 72px);
  background: #000;
}
.container{ width: min(980px, 92vw); margin: 0 auto; }
.section-head{
  text-align: center;
  margin-bottom: clamp(18px, 3.5vw, 28px);
}
.section-head .lead{
  max-width: 780px;
  margin: 10px auto 0;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.6;
  color: var(--muted);
}

/* Formulaire */
.contact-form{
  margin: clamp(14px, 2.5vw, 22px) auto 0;
  padding: clamp(14px, 2.6vw, 24px);
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px) saturate(130%);
}
.contact-form .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .contact-form .row{ grid-template-columns: 1fr; }
}
.field{ display:block; margin-top: 12px; }
.field span{ display:block; font-size:.95rem; color:var(--muted); margin: 0 0 6px 2px; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  color: var(--fg);
  font-size: 1rem;
}
.contact-form textarea{ resize: vertical; min-height: 140px; }

/* Focus states — pas d'outline “neon” */
.contact-form input[type="text"]:focus-visible,
.contact-form input[type="email"]:focus-visible,
.contact-form textarea:focus-visible,
.btn.send:focus-visible{
  outline: none;
  border-color: rgba(110,231,255,.55);
}

/* Bouton envoyer */
.btn.send{
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: var(--fg);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.btn.send:hover{
  background: rgba(255,255,255,0.10);
}
.form-msg{ margin-top: 10px; font-size: .95rem; }
.hp{ position:absolute; left:-9999px; opacity:0; pointer-events:none; }

/* Contact dans le dernier panel */
.contact-wrap{
  width: min(980px, 92vw);
  max-height: calc(100vh - var(--nav-h) - 7vh);
  overflow: auto;
  padding: clamp(14px, 2.6vw, 24px);
  margin: 0 auto;
  background: transparent;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 18px 0 28px;
  color: rgba(255,255,255,0.72);
  text-align: center;
}
.site-footer .legal{ margin:0; font-size:.95rem; }

/* =========================================================
   RTL tweaks
   ========================================================= */
body.rtl { direction: rtl; }
body.rtl .contact-form .row { direction: rtl; }
body.rtl .field span { text-align:right; }

/* =========================================================
   Motion preferences (global)
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html,body{ scroll-behavior:auto; }
  .reveal{ transition:none; transform:none; }
  #preloader{ transition:none; }
}