/* Site de support d'Escadrille : couchant rose-mauve du jeu, chrome des envahisseurs, accents cyan et magenta.
   Bungee : police du titre du jeu (Assets/Resources/Polices/Bungee.ttf). */
@font-face { font-family: "Bungee"; src: url("/assets/Bungee.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --nuit: #1a1024;
  --mauve: #4a2c5e;
  --rose: #e98fae;
  --orange: #ffb067;
  --texte: #f6eef6;
  --doux: #cdbcd2;
  --cyan: #46e6f2;
  --magenta: #ff3fb4;
  --chrome: linear-gradient(180deg, #ffffff 0%, #d9dde6 38%, #8d93a3 52%, #e8ebf2 70%, #a7adbb 100%);
  --verre: rgba(42, 24, 56, .62);
  --bord: rgba(246, 238, 246, .16);
  --rayon: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--texte); font: 400 18px/1.6 "Barlow", system-ui, sans-serif;
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(255, 176, 103, .35), transparent 70%),
    linear-gradient(180deg, #e7869f 0%, #9a5a8e 22%, #4a2c5e 48%, #1a1024 78%) fixed;
  background-color: var(--nuit);
  min-height: 100vh;
}
a { color: var(--cyan); }
h1, h2, h3 { font-family: "Bungee", "Barlow", sans-serif; font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.4rem, 3.6vw, 2.1rem); margin-top: 1.8em; }
h3 { font-size: 1.1rem; margin-top: 1.2em; }
.chrome { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(26, 16, 36, .55)); }

nav {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: rgba(26, 16, 36, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord);
}
.nav-marque { display: flex; align-items: center; gap: 10px; color: var(--texte); text-decoration: none; font: 400 1.15rem "Bungee", sans-serif; }
.nav-marque img { border-radius: 8px; }
.nav-liens { display: flex; gap: 22px; align-items: center; }
.nav-liens a { color: var(--texte); text-decoration: none; font-weight: 600; }
.nav-liens a[aria-current] { color: var(--cyan); }
.nav-liens .langue { color: var(--doux); border: 1px solid var(--bord); border-radius: 999px; padding: 2px 12px; }
.hamburger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.hamburger span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--texte); }

main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 64px; }
.texte { max-width: 780px; }
.verre { background: var(--verre); border: 1px solid var(--bord); border-radius: var(--rayon);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 22px 26px; margin: 18px 0; }

.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center; padding: 24px 0 8px; }
.logo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.logo-row img { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.logo-row h1 { margin: 0; }
.accroche { font-size: 1.25rem; }
.note { color: var(--doux); font-size: .95rem; }
.bientot { display: inline-block; margin: 10px 0; padding: 10px 20px; border-radius: 999px; font-weight: 600;
  color: var(--nuit); background: var(--chrome); box-shadow: 0 0 0 2px var(--magenta), 0 0 22px rgba(255, 63, 180, .45); }
.bouton { display: inline-block; background: var(--magenta); color: #fff; text-decoration: none; font-weight: 600;
  padding: 10px 22px; border-radius: 999px; margin: 8px 10px 8px 0; }
.bouton.second { background: transparent; border: 2px solid var(--cyan); color: var(--cyan); }

.ecran { display: block; width: 100%; height: auto; border-radius: 16px; border: 3px solid rgba(232, 235, 242, .85);
  box-shadow: 0 0 0 1px rgba(70, 230, 242, .5), 0 18px 50px rgba(0,0,0,.5); }

.bloc { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin: 44px 0; }
.bloc.inverse > :first-child { order: 2; }
.bloc h2 { margin-top: 0; }
.bloc p { margin: .4em 0; }
.bloc ul { padding-left: 1.2em; margin: .4em 0; }
.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.flotte { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 14px 0; }
.flotte figure { margin: 0; text-align: center; color: var(--doux); font-size: .9rem; background: var(--verre);
  border: 1px solid var(--bord); border-radius: 14px; padding: 12px 8px 8px; }
.flotte img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.flotte.ennemis figure { border-color: rgba(255, 63, 180, .45); }
.flotte.amis figure { border-color: rgba(70, 230, 242, .45); }
.flotte figcaption { font-weight: 600; color: var(--texte); }

.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.carte { background: var(--verre); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px 20px; }
.carte h3 { margin-top: 0; color: var(--cyan); }

details { background: var(--verre); border: 1px solid var(--bord); border-radius: 12px; margin: 10px 0; padding: 0 18px; }
summary { cursor: pointer; font-weight: 600; padding: 14px 0; }
details p, details ul { margin-top: 0; }
table { border-collapse: collapse; width: 100%; }
td, th { border-bottom: 1px solid var(--bord); padding: 8px 10px; text-align: left; vertical-align: top; }

footer { text-align: center; color: var(--doux); padding: 26px 16px 40px; border-top: 1px solid var(--bord); background: rgba(26, 16, 36, .9); }
footer a { color: var(--doux); }

@media (max-width: 900px) {
  .hero, .bloc { grid-template-columns: 1fr; gap: 18px; }
  .bloc.inverse > :first-child { order: 0; }
  .flotte { grid-template-columns: repeat(3, 1fr); }
  .grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .hamburger { display: block; }
  nav { flex-wrap: wrap; }
  .nav-liens { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 4px 6px; }
  nav.open .nav-liens { display: flex; }
  main { padding: 18px 16px 48px; }
  .logo-row img { width: 64px; height: 64px; border-radius: 15px; }
  .flotte { grid-template-columns: 1fr 1fr; }
  .grille { grid-template-columns: 1fr; }
  .paire { grid-template-columns: 1fr; }
}