/* Sky Explorer BDE — design tokens
   Palette et typo reprises de https://sky-explorer.fr (kit Elementor .elementor-kit-4) */

@font-face {
  font-family: 'Trash Bold';
  src: url('fonts/trash-bold.woff2') format('woff2'),
       url('fonts/trash-bold.woff') format('woff');
  font-weight: 400 900;   /* fichier unique : on l'appelle à tous les poids */
  font-style: normal;
  font-display: swap;
}

/* Saira : Google Fonts (OFL) — 400 / 700 suffisent pour le site
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Saira:wght@400;700&display=swap" rel="stylesheet"> */

:root {
  /* --- couleurs --- */
  --c-primary:      #24265A;  /* navy — texte, titres, fond dominant */
  --c-secondary:    #0077C8;  /* bleu — hover, état actif */
  --c-accent:       #E4F803;  /* jaune acide — trait/texte uniquement, jamais en aplat large */
  --c-text-muted:   #7A7A7A;  /* gris — texte secondaire sur blanc, min. 16px */
  --c-neutral:      #BBC4CC;  /* gris bleuté — séparateurs, fonds doux */
  --c-white:        #FFFFFF;
  --c-deep:         #000A2A;  /* navy de la video d'intro — le hero DOIT demarrer dessus */
  --c-overlay-dark: #24265A33; /* navy 20% */
  --c-overlay-light:#FFFFFF42; /* blanc 26% */

  /* --- typo --- */
  --f-display: 'Trash Bold', Impact, sans-serif;
  --f-body:    'Saira', system-ui, sans-serif;

  --fs-h1: 70px;   /* 50px <=1024  |  30px <=767 */
  --fs-h2: 36px;   /* 32px <=1024  |  28px <=767 */
  --fs-h3: 32px;   /* 28px <=1024  |  20px <=767 */
  --fs-body: 18px;

  /* --- layout --- */
  --container: 1300px;
  --radius: 0;        /* le site n'a aucun arrondi */
  --btn-border: 3px;
}

body { font-family: var(--f-body); font-size: var(--fs-body); color: var(--c-primary); }

h1, h2 { font-family: var(--f-display); text-transform: uppercase; font-weight: 700; }
h1 { font-size: var(--fs-h1); line-height: 1.2em; letter-spacing: -2.5px; }
h2 { font-size: var(--fs-h2); }
h3, h4, h5 { font-family: var(--f-body); text-transform: uppercase; letter-spacing: 1px; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.6em; }

a        { color: var(--c-primary); }
a:hover  { color: var(--c-secondary); }

/* bouton fantôme — la signature du site */
.btn {
  font-family: var(--f-display);
  font-size: 20px;
  text-transform: uppercase;
  background: transparent;
  border: var(--btn-border) solid currentColor;
  border-radius: var(--radius);
  padding: 15px 35px;
  color: var(--c-primary);
}
.btn--accent { color: var(--c-accent); }   /* sur fond navy uniquement */

@media (max-width: 1024px) { :root { --fs-h1:50px; --fs-h2:32px; --fs-h3:28px; --container:1024px; } }
@media (max-width:  767px) { :root { --fs-h1:30px; --fs-h2:28px; --fs-h3:20px; } }