/* ==========================================================================
   common.css — Fondation commune à toutes les pages
   --------------------------------------------------------------------------
   Objectif : centraliser les variables de couleur et les blocs de mise en
   page qui étaient jusqu'ici recopiés (quasi à l'identique) dans le <style>
   de chaque page (index.php, journal.php, forum.php, category.php,
   compte.php, verify.php...). En les mettant ici, on les modifie une seule
   fois pour tout le site.

   Mise en place :
     <link rel="stylesheet" href="common.css">  dans le <head> de la page,
     AVANT le <style> propre à la page (déjà fait sur category.php, compte.php,
     forum.php, index.php, journal.php, verify.php).

   Migration progressive recommandée : une fois ce fichier chargé sur une
   page, on peut supprimer de son <style> local le bloc `:root { --yellow...}`
   et les règles .container / .section-block / .section-label / .section-title
   / .section-desc / .reveal si elles sont identiques à celles ci-dessous —
   ça évite le doublon sans casser les pages qui ne l'ont pas encore fait
   (les règles locales, plus spécifiques ou plus tardives dans le HTML,
   continuent de gagner tant qu'elles existent).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset de base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: #1A1A1A;
}

/* Empêche le fond de la page de se révéler au-dessus du header fixed lors
   du rebond de scroll sur iOS Safari. */
html, body {
  overscroll-behavior-y: none;
}

/* --------------------------------------------------------------------------
   2. Palette — thème violet dégradé
   -------------------------------------------------------------------------- */
:root {
  /* Accent principal : anciennement jaune (#FFB800), désormais violet vif.
     Le NOM de variable est volontairement conservé (--yellow / --gold) pour
     rester compatible avec toutes les pages et fonctions PHP existantes
     (ex. jdg-lib.php) qui référencent encore `var(--yellow)` / `var(--gold)`
     — seule la couleur change, pas la mécanique. */
  --yellow: #7A3FB5;   /* violet mat, légèrement plus foncé — accent principal */
  --gold:   #9B6FD1;   /* violet mat clair — accent secondaire / hover */

  /* Dégradé "futuriste" prêt à l'emploi pour boutons, badges, bannières —
     du violet vers le noir (plutôt qu'un dégradé vers du clair) */
  --gradient-accent: linear-gradient(135deg, var(--gold) 0%, var(--yellow) 50%, var(--black) 100%);
  --gradient-accent-soft: linear-gradient(135deg, var(--gold) 0%, var(--black) 100%);

  /* Couleurs inchangées, listées ici pour éviter de les redéfinir page par page */
  --orange: #E06400;
  --purple: #8B2FC9;
  --sky:    #87CEEB;
  --beige:  #E8C9A0;
  --black:  #1A1A1A;
  --cream:  #FFF8EE;
  --white:  #FFFFFF;

  /* Blanc utilisé comme couleur d'accent décorative (remplace l'ancien
     accent jaune) : cadrans d'objectif du hero, traits de séparation du
     footer, etc. */
  --white-accent: #FFFFFF;

  --section-margin: 3rem;
}

/* --------------------------------------------------------------------------
   3. Body / structure commune
   -------------------------------------------------------------------------- */
body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--black);
  overflow-x: hidden;
}

/* Contenu placé sous le header fixe (header.php calcule et pose
   --site-header-offset en JS) : évite de répéter ce margin-top sur chaque
   page. */
.app-body {
  margin-top: var(--site-header-offset, 64px);
}

/* Conteneur centré générique, réutilisé par toutes les sections */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   4. Bloc "section" générique (titre + label + description)
   -------------------------------------------------------------------------- */
.section-block {
  padding: var(--section-margin) 2rem;
}

.section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 8px 4px 12px;
  border: 2px solid currentColor;
  border-radius: 2px;
  margin-bottom: 1rem;
}

.section-title {
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 0.95;
  margin-bottom: 3rem;
}

.section-desc {
  font-size: 1.05rem;
  color: rgba(0,0,0,0.6);
  max-width: 560px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   5. Animations d'apparition au scroll ("reveal"), communes à toutes les
      pages qui utilisent un IntersectionObserver sur .reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-title {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-title.visible {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
  transform: none;
}

/* --------------------------------------------------------------------------
   6. Boutons génériques réutilisables (nouveau — à utiliser sur les futurs
      boutons plutôt que de recopier un dégradé en dur à chaque fois)
   -------------------------------------------------------------------------- */
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--white);
  background: var(--gradient-accent);
  background-size: 160% 160%;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(139,47,201,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-position 0.4s ease;
}

.btn-accent:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(122,63,181,0.45);
}
