/* =========================================================
   LES COMPAGNONS D’ARMA — THEME PREMIUM (CRT + TACTICAL)
   - Boot HUD garanti au-dessus (z-index > tout)
   - Fond immersif + grain + vignette
   - Card en verre fumé, lisible
   - Carousel responsive sans overflow + edge fades
   - Discord section “officielle”
   - Accessibilité : focus-visible propre
   - Respect des utilisateurs sensibles au mouvement
========================================================= */

/* -----------------------------
   VARIABLES & PREFERENCES
------------------------------ */
:root{
  --fg:#e9eef1;
  --muted:#9ea8ae;
  --subtle:#b7c0c6;
  --cyan:#00c8ff;
  --cyan-2:#6ff0ff;
  --orange:#ff7a00;
  --bg:#000;
  --glass:rgba(14,16,18,.36);
  --glass-strong:rgba(14,16,18,.52);
  --stroke:rgba(255,255,255,.06);
  --stroke-subtle:rgba(255,255,255,.04);
  --shadow:0 30px 80px rgba(0,0,0,.75);
  --halo:radial-gradient(60% 60% at 75% 40%, rgba(255,122,0,.10), transparent 65%);
  --mono:ui-monospace,Menlo,Consolas,"Courier New",monospace;
  --wallpaper:url('https://wallpapercave.com/wp/wp15024158.webp');
  color-scheme: dark;
}

/* Motion: désactiver les animations lourdes si demandé */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* -----------------------------
   RESET / BASE
------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Focus accessible sans hein-hein bleu fluo */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:8px;
}

/* -----------------------------
   BACKGROUND LAYERS
------------------------------ */
.bg-wrap{position:fixed;inset:0;overflow:hidden;z-index:0}
.bg{
  position:absolute;inset:-10%;
  background:var(--wallpaper) center/cover no-repeat;
  filter:contrast(.9) brightness(.85) saturate(.7);
  transition:transform 12s linear;
}
.bg::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.7));
  mix-blend-mode:multiply;
}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:3;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="f"><feTurbulence baseFrequency="0.8" numOctaves="2" seed="7"/></filter><rect width="220" height="220" filter="url(%23f)" opacity="0.06"/></svg>');
  mix-blend-mode:overlay;
}
.bg-wrap::before{
  /* Vignette douce pour focus central */
  content:"";position:fixed;inset:-10%;
  background:radial-gradient(120% 80% at 50% 50%,transparent 40%,rgba(0,0,0,.5) 100%);
  z-index:2;pointer-events:none;
}

/* -----------------------------
   BOOT HUD / TERMINAL CRT
------------------------------ */
.hud{
  position:fixed;inset:0;z-index:9999; /* au-dessus de tout */
  background:#000;
  display:grid;grid-template-rows:1fr auto;
  color:#eaeaea;font-family:var(--mono);
}
.hud.hidden{display:none}
.hud-main{display:grid;place-items:center;padding:24px}
.terminal{
  width:min(900px,92vw);max-height:60vh;overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.85);
  border-radius:12px;padding:22px;
  box-shadow:var(--shadow);
  position:relative;
  isolation:isolate;
}
.terminal::before{
  /* Scanlines CRT */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 2px);
  mix-blend-mode:overlay;
}
.terminal::after{
  /* Légère aberration chromatique + glow */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 60% at 80% 30%, rgba(0,200,255,.10), transparent 60%),
    radial-gradient(60% 60% at 20% 70%, rgba(255,122,0,.10), transparent 60%);
  filter:blur(20px);
}
.line{white-space:pre-wrap;line-height:1.35;position:relative;z-index:3}
.caret{display:inline-block;width:8px;height:1.1em;background:#eaeaea;vertical-align:bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hud-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:12px;color:#9aa4ab;opacity:.9;border-top:1px solid rgba(255,255,255,.06)}
.hud-badge{text-transform:uppercase;letter-spacing:.12em}

/* -----------------------------
   WRAP / CARD (verre fumé)
------------------------------ */
.wrap{position:relative;z-index:4;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:64px 20px}
.card{
  width:100%;max-width:1140px;
  display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center;
  padding:48px;border-radius:14px;
  background:linear-gradient(180deg,var(--glass),var(--glass-strong));
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
  opacity:0;transform:translateY(30px);
  transition:opacity .8s ease,transform .8s ease;
}
.card.visible{opacity:1;transform:none}

/* -----------------------------
   HEADER
------------------------------ */
.head{display:flex;gap:18px;align-items:center}
.logo{
  width:86px;height:86px;border-radius:16px;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 10px 28px rgba(0,0,0,.55),0 0 20px rgba(255,122,0,.14);
}
.logo img{width:92%;height:92%;object-fit:contain;border-radius:12px;filter:drop-shadow(0 0 4px rgba(0,0,0,.5))}
.title{
  font-size:clamp(32px,5vw,64px);font-weight:900;line-height:1.02;
  letter-spacing:.01em;position:relative;
}
.title::after{
  /* Trait cyan discret sous le titre */
  content:"";display:block;width:64px;height:3px;margin-top:10px;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-2));
  border-radius:2px;box-shadow:0 0 18px rgba(0,200,255,.35);
}
.subtitle{color:var(--muted);margin:6px 0 18px}

/* -----------------------------
   COUNTDOWN
------------------------------ */
.countdown{display:flex;gap:12px;margin-top:6px}
.panel{
  flex:1;padding:18px 12px;border-radius:10px;text-align:center;
  background:rgba(0,0,0,.45);
  border:1px solid var(--stroke-subtle);
}
.num{font-family:var(--mono);font-size:42px;font-weight:900;letter-spacing:.02em}
.lab{font-size:11px;color:var(--muted);letter-spacing:.14em;margin-top:6px;text-transform:uppercase}

/* -----------------------------
   CTA / BUTTONS
------------------------------ */
.cta-row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{
  display:inline-grid;place-items:center;
  padding:12px 16px;border-radius:10px;font-weight:800;cursor:pointer;
  text-decoration:none;border:1px solid var(--stroke);
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(90deg,var(--cyan),var(--cyan-2));color:#041012;box-shadow:0 10px 28px rgba(0,200,255,.10)}
.btn--ghost{background:transparent;color:var(--fg)}
.btn--orange{background:var(--orange);color:#0b0d0f;font-weight:900;border:none;box-shadow:0 12px 28px rgba(255,122,0,.22)}
.btn--orange:hover{transform:translateY(-1px)}
.btn--discord{background:linear-gradient(90deg,#5865F2,#3A45C9);color:#fff;border:none;box-shadow:0 10px 26px rgba(88,101,242,.35);display:inline-flex;align-items:center;gap:10px}
.btn--discord svg{width:22px;fill:#fff}
.note{margin-top:12px;color:var(--muted);font-size:13px}

/* -----------------------------
   BRIEF / SUBSCRIBE
------------------------------ */
.brief{
  background:rgba(255,255,255,.03);border-radius:12px;padding:20px;
  border:1px solid var(--stroke-subtle);
  opacity:0;transform:translateY(30px);
  transition:opacity .8s ease .15s,transform .8s ease .15s;
}
.brief.visible{opacity:1;transform:none}
.brief h4{font-size:18px;margin-bottom:6px}
.brief p{color:var(--subtle)}
.subscribe{display:flex;gap:8px;margin-top:10px}
.subscribe input{
  flex:1;padding:12px 14px;border-radius:10px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.28);color:var(--fg);
}
.subscribe button{
  padding:12px 14px;border-radius:10px;background:var(--orange);
  color:#07100b;border:none;font-weight:900;
}

/* -----------------------------
   TOAST & MODAL
------------------------------ */
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.76);z-index:6000}
.modal.open{display:grid}
.modal .inner{
  width:min(1000px,92vw);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)
}
.toast{
  position:fixed;right:18px;bottom:18px;background:rgba(18,26,22,.92);color:var(--fg);
  padding:12px 16px;border-radius:10px;border:1px solid var(--stroke);box-shadow:0 10px 30px rgba(0,0,0,.6);
  display:none;z-index:6500;max-width:80vw
}
.toast.show{display:block}

/* -----------------------------
   META
------------------------------ */
.meta-row{display:flex;gap:10px;align-items:center;margin-top:14px}
.meta{font-size:13px;color:var(--muted)}

/* -----------------------------
   SUPPORT / STRIPE
------------------------------ */
.support-section{
  grid-column:1 / -1;position:relative;margin-top:40px;padding:28px;border-radius:14px;
  background:rgba(255,255,255,.02);border:1px solid var(--stroke-subtle);overflow:hidden;
}
.support-section::after{
  content:"";position:absolute;inset:-10%;background:var(--halo);filter:blur(100px);z-index:0;pointer-events:none;
}
.support-header{text-align:center;margin-bottom:22px;position:relative;z-index:1}
.support-header h3{margin-bottom:6px;font-size:26px;color:var(--orange)}
.support-header p{margin:0 auto;max-width:720px;color:var(--muted);font-size:15px;line-height:1.6}

.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;position:relative;z-index:1}
.plan-card{
  display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--stroke);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
  min-height:220px;
}
.plan-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(255,122,0,.22);border-color:rgba(255,122,0,.5);background:rgba(255,122,0,.06)}
.plan-card.highlight{border-color:rgba(255,122,0,.55);background:linear-gradient(180deg,rgba(255,122,0,.10),rgba(255,255,255,.03));box-shadow:0 18px 44px rgba(255,122,0,.24)}
.plan-top{display:flex;justify-content:space-between;align-items:baseline}
.plan-top h4{font-size:18px;font-weight:800}
.price{font-size:28px;font-weight:900;color:var(--orange)}
.plan-desc{color:var(--muted);font-size:14px;line-height:1.6;flex:1;margin:4px 0 8px}
.plan-card .btn{width:100%}

/* Stripe placeholder box (si utilisé plus tard) */
.payment-box{margin-top:24px;background:rgba(255,255,255,.03);padding:20px;border-radius:12px;border:1px solid var(--stroke)}
.payment-box.hidden{display:none}
#card-element{padding:12px;background:rgba(0,0,0,.3);border-radius:10px;margin-bottom:14px}

/* -----------------------------
   GALERIE / CAROUSEL
------------------------------ */
.gallery-section{
  width:100%;max-width:1120px;margin:60px auto;padding:40px 20px;border-radius:14px;
  background:rgba(255,255,255,.02);border:1px solid var(--stroke-subtle);text-align:center;box-sizing:border-box;overflow:hidden;position:relative;
}
.gallery-header h3{color:var(--orange);font-size:28px;margin-bottom:8px;letter-spacing:.02em}
.gallery-header p{color:var(--muted);font-size:15px;margin-bottom:26px}

.carousel{
  position:relative;overflow:hidden;width:100%;max-width:980px;margin:0 auto 24px;border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.6);background:rgba(0,0,0,.35);
}
/* Edge fades pour éviter la coupure sèche */
.carousel::before,.carousel::after{
  content:"";position:absolute;top:0;bottom:0;width:70px;z-index:4;pointer-events:none;
}
.carousel::before{left:0;background:linear-gradient(90deg, rgba(0,0,0,.55), transparent)}
.carousel::after{right:0;background:linear-gradient(-90deg, rgba(0,0,0,.55), transparent)}

.carousel-track{display:flex;transition:transform .6s ease;scroll-snap-type:x mandatory}
.carousel-track img{
  width:100%;max-width:100%;height:auto;object-fit:cover;flex-shrink:0;scroll-snap-align:center;aspect-ratio:16/9;
  background:rgba(255,255,255,.04);display:block;
}

.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.45);transition:transform .15s ease,background .2s ease,opacity .2s ease;z-index:5;
}
.carousel-btn:hover{background:rgba(0,0,0,.8);transform:translateY(-50%) scale(1.05)}
.carousel-btn.prev{left:12px}
.carousel-btn.next{right:12px}

/* Thumbs facultatives (si présentes dans l’HTML) */
.thumbs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.thumbs img{width:84px;height:52px;object-fit:cover;border-radius:8px;opacity:.7;cursor:pointer;transition:opacity .2s ease,transform .2s ease}
.thumbs img:hover{opacity:1;transform:translateY(-2px)}
.thumbs img.active{outline:2px solid var(--orange);opacity:1}

/* -----------------------------
   DISCORD SECTION
------------------------------ */
.discord-section{
  margin-top:64px;padding:50px 30px;background:radial-gradient(circle at 30% 50%, rgba(0,200,255,.10), rgba(255,255,255,.02) 60%);
  border:1px solid var(--stroke-subtle);border-radius:14px;display:flex;justify-content:center;align-items:center;text-align:left;box-shadow:0 20px 40px rgba(0,0,0,.6)
}
.discord-content{display:flex;align-items:center;gap:30px;flex-wrap:wrap;max-width:1000px}
.discord-logo{
  width:120px;height:120px;border-radius:22px;background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 25px rgba(0,200,255,.18);animation:float 4s ease-in-out infinite
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.discord-logo img{width:70%;height:70%;filter:drop-shadow(0 0 10px rgba(0,200,255,.35))}
.discord-info h3{font-size:26px;color:var(--cyan);margin-bottom:6px}
.discord-info p{color:var(--muted);font-size:15px;max-width:520px;line-height:1.6;margin-bottom:14px}

/* -----------------------------
   RESPONSIVE
------------------------------ */
@media (max-width:1080px){
  .card{grid-template-columns:1fr 380px}
}
@media (max-width:980px){
  .card{grid-template-columns:1fr;padding:28px}
  .brief{order:2}
  .discord-section{text-align:center}
}
@media (max-width:640px){
  .carousel-track img{aspect-ratio:16/10}
  .carousel-btn{width:48px;height:48px;font-size:20px}
}
@media (max-width:560px){
  .countdown{flex-wrap:wrap}
  .panel{flex:0 0 48%}
  .discord-logo{margin-bottom:18px}
}