/* ============================================================
   STYLE.CSS — Styles globaux partagés par toutes les pages
   Contient : variables, reset, typographie, nav, footer
   ============================================================ */


/* ── 1. VARIABLES ──────────────────────────────────────────
   Toutes les couleurs et polices sont définies ici une seule
   fois. Pour modifier l'aspect global du site, c'est ici.
   ─────────────────────────────────────────────────────────── */

:root {

  /* Couleurs de fond */
  --bg-principal    : #080808 ;   /* Fond principal (noir violet profond) */
  --bg-secondaire   : #180F1E;   /* Fond légèrement plus clair */
  --bg-carte        : #201429;   /* Fond des cartes / blocs */

  /* Couleurs de texte */
  --texte           : #EDE8F5;   /* Texte principal (blanc légèrement violacé) */
  --texte-attenue   : #7A7085;   /* Texte secondaire, labels, descriptions */

  /* Couleur accent principale — violet profond */
  --or              : #9B6FD4;   /* Accent violet (remplace l'or) */
  --or-sombre       : #5E3F85;   /* Version atténuée du violet, pour les bordures */

  /* Accent secondaire — orange (usage ~5–10%) */
  --orange          : #FFA500;   /* Orange proche du jaune, réservé au hero et aux CTA pleins */

  /* Bordures */
  --bordure         : rgba(155, 111, 212, 0.15);  /* Bordure subtile violette */

  /* Polices */
  --police-serif    : 'Cormorant Garamond', Georgia, serif;  /* Titres élégants */
  --police-sans     : 'Syne', sans-serif;                    /* Corps, labels */

}


/* ── 2. RESET ──────────────────────────────────────────────
   Neutralise les marges et paddings par défaut du navigateur.
   ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
}


/* ── 3. BASE ───────────────────────────────────────────────
   Styles de base du body.
   ─────────────────────────────────────────────────────────── */

body {
  background   : var(--bg-principal);
  color        : var(--texte);
  font-family  : var(--police-sans);
  font-size    : 15px;
  line-height  : 1.6;
  overflow-x   : hidden;  /* Évite le scroll horizontal parasite */
}


/* ── 4. IMPORTATION DES POLICES ────────────────────────────
   Les polices Google sont chargées depuis le HTML de chaque
   page via une balise <link>. Ce bloc sert de référence.

   Polices utilisées :
   - Cormorant Garamond (300, 400, 500, 600 + italiques) → titres
   - Syne (400, 500, 600, 700) → corps, navigation, labels
   ─────────────────────────────────────────────────────────── */


/* ── 5. NAVIGATION ─────────────────────────────────────────
   Barre de navigation fixe en haut de page.
   Devient opaque au scroll via la classe .scrollee (JS).
   ─────────────────────────────────────────────────────────── */

nav {
  position        : fixed;
  top             : 0;
  left            : 0;
  right           : 0;
  z-index         : 100;

  display         : flex;
  justify-content : space-between;
  align-items     : center;

  padding         : 1.4rem 3rem;
  background      : transparent;
  transition      : background 0.4s, border-bottom 0.4s;
}

/* Classe ajoutée par JS quand l'utilisateur descend la page */
nav.scrollee {
  background    : rgba(16, 12, 20, 0.92);   /* Teinte bg-principal */
  border-bottom : 1px solid var(--bordure);
  backdrop-filter: blur(8px);
}

/* Logo / nom dans la nav */
.nav-logo {
  font-family     : var(--police-serif);
  font-size       : 1.1rem;
  font-weight     : 400;
  letter-spacing  : 0.08em;
  color           : var(--texte);
  text-decoration : none;
}

/* Liste des liens */
.nav-liens {
  display    : flex;
  gap        : 2.5rem;
  list-style : none;
}

.nav-liens a {
  font-family     : var(--police-sans);
  font-size       : 0.68rem;
  font-weight     : 600;
  letter-spacing  : 0.2em;
  text-transform  : uppercase;
  color           : var(--texte-attenue);
  text-decoration : none;
  transition      : color 0.2s;
}

.nav-liens a:hover {
  color : var(--or);
}

/* Lien actif — à appliquer manuellement sur chaque page
   via class="actif" sur le <a> correspondant */
.nav-liens a.actif {
  color : var(--or);
}


/* ── 6. FOOTER ─────────────────────────────────────────────
   Pied de page présent sur toutes les pages.
   ─────────────────────────────────────────────────────────── */

footer {
  padding        : 2.5rem 3rem;
  border-top     : 1px solid var(--bordure);
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.footer-nom {
  font-family  : var(--police-serif);
  font-size    : 0.9rem;
  font-weight  : 300;
  font-style   : italic;
  color        : var(--texte-attenue);
}

.footer-copy {
  font-size      : 0.65rem;
  letter-spacing : 0.1em;
  color          : var(--texte-attenue);
  opacity        : 0.5;
}


/* ── 7. COMPOSANTS RÉUTILISABLES ───────────────────────────
   Boutons et éléments communs à plusieurs pages.
   ─────────────────────────────────────────────────────────── */

/* Bouton plein — orange : c'est l'élément "action", doit trancher
   dans l'univers violet pour capter l'attention immédiatement */
.btn-plein {
  display         : inline-flex;
  align-items     : center;
  gap             : 1rem;

  font-family     : var(--police-sans);
  font-size       : 0.7rem;
  font-weight     : 600;
  letter-spacing  : 0.2em;
  text-transform  : uppercase;

  color           : var(--bg-principal);
  background      : var(--orange);         /* Orange : CTA visible et chaud */
  padding         : 1rem 2rem;
  text-decoration : none;

  transition : background 0.25s, gap 0.25s;
}

.btn-plein:hover {
  background : var(--texte);
  gap        : 1.5rem;
}

/* Bouton contour (transparent, bordure violet) */
.btn-contour {
  display         : inline-flex;
  align-items     : center;
  gap             : 1rem;

  font-family     : var(--police-sans);
  font-size       : 0.7rem;
  font-weight     : 600;
  letter-spacing  : 0.18em;
  text-transform  : uppercase;

  color           : var(--or);
  border          : 1px solid var(--or-sombre);
  padding         : 1rem 2rem;
  text-decoration : none;

  transition : background 0.25s, color 0.25s, gap 0.25s;
}

.btn-contour:hover {
  background : var(--or);
  color      : var(--bg-principal);
  gap        : 1.5rem;
}


/* ── 8. RESPONSIVE ─────────────────────────────────────────
   Ajustements globaux pour mobile (< 900px).
   Les ajustements spécifiques à chaque page sont dans
   les fichiers CSS propres à chaque page.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

  nav {
    padding : 1.2rem 1.5rem;
  }

  footer {
    flex-direction : column;
    gap            : 1rem;
    text-align     : center;
  }

}