/* ====== Police ====== */
@font-face{
  font-family: "Univia Pro";
  src:
    url("fonts/univiapro-regular-webfont.woff2") format("woff2"),
    url("fonts/univiapro-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ====== Palette & tokens ====== */
:root{
  --navy:#0B1D3A;
  --ink:#0A0E1A;
  --gold:#D4AF37;
  --ring:#465449;
  --ivory:#F2EBDD;
  --text:#E8EDF5;
  --muted:#9FB0C9;
  --radius:22px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html, body { overflow-x: hidden; } /* évite tout scroll horizontal */
img{max-width:100%;display:block}

body{
  font-family:"Univia Pro", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(80vw 80vw at 20% -10%, rgba(212,175,55,.08), transparent 60%),
    linear-gradient(180deg, #0C1F3F 0%, #0A1426 60%, #080E1C 100%);
}
p{line-height:1.55}
.muted{color:var(--muted)}
.center{text-align:center}

.wrap{width:92%;max-width:1100px;margin-inline:auto}
.grid{display:grid;gap:20px}
.grid.three{grid-template-columns:repeat(1,1fr)}
@media(min-width:700px){.grid.three{grid-template-columns:repeat(3,1fr)}}

.card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
}
.card.cover{padding:0;overflow:hidden}
.card.cover img{aspect-ratio: 16/9; object-fit: cover}
.card.cover figcaption{padding:10px 14px;color:var(--muted);font-size:.95rem}

/* ====== Header ====== */
.site-header{
  position:sticky;top:0;z-index:1000;
  background: rgba(11,29,58,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{height:40px;width:auto}
.brand-text{font-weight:700;letter-spacing:.5px}

.nav ul{display:flex;gap:22px;list-style:none;align-items:center}
.nav a{font-weight:600;text-decoration:none;color:var(--text)}
.btn{
  display:inline-block;border:2px solid var(--gold);color:var(--gold);
  padding:10px 16px;border-radius:999px;font-weight:700;letter-spacing:.5px;
}

/* ====== Burger ====== */
.burger{
  position: relative;
  width: 32px; height: 24px;
  display: none;
  flex-direction: column; justify-content: space-between; align-items: center; gap: 5px;
  padding: 4px; border-radius: 10px;
  z-index: 4000;
}
.burger span{
  width: 100%; height: 3px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: center;
}
.burger:hover{ background: rgba(212,175,55,.08); }

/* Burger → X quand menu ouvert (via .is-open) */
.burger.is-open span:nth-child(1){ transform: translateY(9.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity: 0; }
.burger.is-open span:nth-child(3){ transform: translateY(-9.5px) rotate(-45deg); }

/* ====== Nav mobile (panneau latéral opaque & plein écran) ====== */
@media (max-width: 768px){
  .burger{ display:flex }
  .nav{
    position: fixed !important;
    top: 0 !important; right: 0 !important; left: auto !important; bottom: auto !important;
    height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important;
    width: 78vw !important;
    background-color: #0A1426 !important; /* OPAQUE */
    border-left: 1px solid rgba(255,255,255,.08);
    z-index: 3001 !important;
    padding: 80px 22px 22px !important;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    transform: translateX(100%);             /* fermé par défaut */
    transition: transform .32s ease, visibility .0s linear .32s;
    visibility: hidden; pointer-events: none;
  }
  .nav.open{
    transform: translateX(0);
    visibility: visible; pointer-events: auto;
    transition: transform .32s ease;
  }
  .nav ul{
    display:flex; flex-direction:column; gap:18px; margin:0; padding:0; list-style:none;
  }
  .nav a{ color:#E8EDF5; font-size:18px; }
  .nav::before, .nav.open::before{ content:none !important; } /* purge anciens styles */
}

/* ====== Hero ====== */
.hero{
  min-height:78vh;
  display:grid; place-items:center;
  position:relative; isolation:isolate;
  text-align:center; padding:50px 0 60px;
  background:#0A1426; overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:
    linear-gradient(180deg, rgba(10,14,26,.55), rgba(10,14,26,.65)),
    url("Screnn_crusader.png") center 42% / cover no-repeat;
  transform:translateZ(0);
  z-index:0;
}
.hero-glow{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(260px 260px at 50% 42%, rgba(212,175,55,.16), rgba(212,175,55,0) 60%),
    radial-gradient(120% 100% at 50% 60%, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 95%);
  filter: blur(6px);
  opacity:.95;
}
.hero-inner{z-index:2}
.hero-logo{width:min(280px,55vw);margin-inline:auto;filter:drop-shadow(0 0 20px rgba(212,175,55,.2))}
.tagline{margin:16px auto 22px;max-width:45ch;color:var(--text);opacity:.92}
@media (max-width: 600px){
  .hero{min-height:72vh}
  .hero::before{
    background:
      linear-gradient(180deg, rgba(10,14,26,.55), rgba(10,14,26,.68)),
      url("Screnn_crusader.png") center 35% / cover no-repeat;
  }
}

/* ====== Sections ====== */
.section{padding:56px 0}
.section h2,.section h3{color:var(--ivory);letter-spacing:.3px;margin-bottom:10px}

/* Frise #qui qui se fond dans le fond global */
section#qui{
  background:
    linear-gradient(180deg,
      rgba(10, 20, 38, .95) 0px,
      rgba(10, 20, 38, .80) 80px,
      rgba(10, 20, 38, .55) 160px,
      rgba(10, 20, 38, 0.00) 240px);
  padding-top: 48px; padding-bottom: 56px;
  overflow: hidden; isolation: isolate;
}

/* ====== Banner ====== */
.banner{
  position:relative;
  background: radial-gradient(80% 80% at 50% 50%, rgba(212,175,55,.10), rgba(11,29,58,.1)),
              var(--banner) center/cover no-repeat;
  min-height:38vh; display:grid;align-items:center;
  border-block:1px solid rgba(255,255,255,.08);
}
.banner::after{ content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg, rgba(10,14,26,.45), rgba(10,14,26,.65)); }
.banner .wrap{position:relative;z-index:1}
.banner-kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.2em;font-weight:700;margin-bottom:6px}
.banner-title{font-size:clamp(1.4rem, 1.2rem + 1.2vw, 2rem)}

/* ====== Domaines (tiles) ====== */
.tile{
  position:relative;min-height:220px;border-radius:var(--radius);
  overflow:hidden;background:#0a0e1a;
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08);
}
.tile::before{ content:"";position:absolute;inset:0;background:var(--img) center/cover no-repeat;opacity:.9; }
.tile::after{ content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,14,26,.2), rgba(10,14,26,.75)); }
.tile-body{position:relative;z-index:1;padding:18px}
.tile h3{margin-bottom:6px;color:var(--ivory)}
.tile p{color:#cfe0ff}

/* ====== Galerie ====== */
.gallery{ --gap:12px; margin-top:16px; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
@media(min-width:900px){.gallery{grid-template-columns:repeat(4,1fr)}}
.g-item{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);background:#0b1426}
.g-item img{width:100%;height:100%;object-fit:cover}
.g-item.wide{grid-column:span 2}
.g-item.tall{grid-row:span 2}
@supports not (aspect-ratio: 1 / 1){ .card.cover img, .g-item img{ width:100%; height:auto; } }
@media(max-width:899px){.g-item.wide,.g-item.tall{grid-column:auto;grid-row:auto}}

/* ====== CTA block ====== */
.cta-block .wrap{display:grid;gap:16px;justify-items:center}

/* ====== Footer ====== */
.site-footer{
  margin-top: 40px;
  background:
    linear-gradient(180deg, rgba(10,14,26,.0), rgba(10,14,26,.35) 30%, rgba(10,14,26,.65)),
    radial-gradient(120% 100% at 50% -30%, rgba(212,175,55,.10), transparent 60%);
  border-top: none; padding: 18px 0; color: #C7D3EB;
  position: relative; background-clip: padding-box;
}
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,.55) 12%, rgba(212,175,55,.75) 50%, rgba(212,175,55,.55) 88%, transparent 100%);
  pointer-events:none; transform: translateZ(0);
}
.footer-grid{ display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:.95rem; }
.footer-left{ display:flex; align-items:center; gap:10px; opacity:.95; }
.footer-mark{ width:22px; height:22px; object-fit:contain; border-radius:50%; filter: drop-shadow(0 0 8px rgba(212,175,55,.18)); }
.footer-nav{ display:flex; align-items:center; gap:18px; }
.footer-nav a{ color: var(--gold); text-decoration: none; font-weight: 700; border: 1.5px solid var(--gold); border-radius: 999px; padding: 6px 12px; }
.footer-nav a:active{ transform: translateY(1px); }
@media (max-width: 600px){ .footer-grid{ flex-direction:column; gap:10px; text-align:center; } }

/* ====== Lightbox ====== */
.lightbox{ position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center; z-index:2000; padding:20px; }
.lightbox.show{display:flex}
.lb-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-close{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:999px; border:2px solid var(--gold); background:transparent; color:var(--gold); }

/* ====== Boutons: remplissage or persistant + scintillement interne ====== */
.btn, .footer-nav a, button{
  position: relative; display: inline-block; overflow: hidden;
  border: 2px solid var(--gold); color: var(--gold);
  border-radius: 999px; padding: 10px 16px; background: transparent;
  isolation: isolate; transition: color .2s ease, transform .08s ease, box-shadow .2s ease; z-index: 0;
}
.btn::before, .footer-nav a::before, button::before{
  content:""; position:absolute; inset:0; background: var(--gold);
  transform-origin: left center; transform: scaleX(0); transition: transform .35s ease; z-index: -1;
}
.btn::after, .footer-nav a::after, button::after{
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 60%);
  opacity:0; z-index: -1;
}
.btn:hover, .footer-nav a:hover, button:hover{
  color:#fff; box-shadow: 0 8px 22px rgba(212,175,55,.28);
}
.btn:hover::before, .footer-nav a:hover::before, button:hover::before{ transform: scaleX(1); }
.btn:hover::after, .footer-nav a:hover::after, button:hover::after{ animation: shimmer 1.1s ease-in-out infinite; opacity:.85; }
.btn:active, .footer-nav a:active, button:active{ transform: translateY(1px) scale(.98); }
.btn:focus-visible, .footer-nav a:focus-visible, button:focus-visible{
  outline:none; box-shadow: 0 0 0 3px rgba(10,20,38,1), 0 0 0 5px rgba(212,175,55,.85);
}
@keyframes shimmer{
  0%{ transform: translateX(0); opacity:.0; }
  10%{ opacity:.85; }
  50%{ transform: translateX(220%); opacity:.6; }
  90%,100%{ opacity:.0; transform: translateX(220%); }
}
@media (prefers-reduced-motion: reduce){
  .btn::before, .btn::after, .footer-nav a::before, .footer-nav a::after, button::before, button::after{
    animation: none !important; transition: none !important;
  }
}

/* ====== Compat Samsung Internet ====== */
html.samsung .site-header{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11,29,58,.95); }
html.samsung .nav, html.samsung .nav.open{ background-color:#0A1426 !important; height:100vh !important; }
html.samsung #qui, html.samsung .lightbox, html.samsung .gallery{ isolation: auto; }
html.samsung .hero::before, html.samsung .hero-glow{ top:0; right:0; bottom:0; left:0; }
html.samsung .lightbox{ background: rgba(0,0,0,.92); z-index: 9999; }