/* =============================================================================
   BASE.CSS – STYLES GLOBAUX (Harmonisé le 2025-07-04)
   ==========================================================================
   ✔  Variables regroupées et centralisées
   ✔  Reset modernisé & factorisé
   ✔  Ajout de --max-width pour la grille
   ✔  Indentation + commentaires uniformes
   (Tous les noms de classes/variables existants sont conservés)
============================================================================= */
/* ---------------------------------------------------------------------------
   🌈 VARIABLES GLOBALES
   ------------------------------------------------------------------------ */

:root {
  --primary: #007bff;       /* Bleu principal */
  --secondary:  #6c757d;     /* Gris / secondaire */
  --accent: #00bcd4;       /* Bleu clair accent */
  --success: #28a745;       /* Vert succès */
  --danger: #dc3545;        /* Rouge danger */
  --warning: #fbc02d;       /* Jaune avertissement */
  --info: #2196f3;          /* Bleu informatif */
  --text-color: #212529;      /* Texte par défaut */
  --bg-color: #ffffff;      /* Fond clair */

 
  /* 🌗 Thème global */
  --bg-color: #181824;
  --text-color: #ffffff;
  --bg-light: #f7f7fa;
  --text-light: #181824;

  /* 📐 Structure */
  --radius: 14px;
  --shadow: 0 4px 24px rgba(20, 20, 40, 0.10);
  --max-width: 1200px;
}
/* Variante claire (classe utilitaire) ------------------------------------- */
html.light {
  --bg-color: var(--bg-light);
  --text-color: var(--text-light);
}

/* ---------------------------------------------------------------------------
   🔄 RESET (inspiré de Normalize + Andy Bell’s Modern Reset)
   ------------------------------------------------------------------------ */
/* 1. Suppression des marges / bordures et uniformisation box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

/* 2. Inheritance typographique de base */
html, body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* 3. Comportement de base du body */
body {
  padding-top: 60px !important; /* espace égal à la hauteur de la navbar fixe */
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* 4. Éléments HTML5 affichés en block dans anciens navigateurs */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* ---------------------------------------------------------------------------
   📐 STRUCTURE & TYPOGRAPHIE
   ------------------------------------------------------------------------ */
.container,
.main-content {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1rem;
}

section { margin-block-end: 3rem; }

/* Titres ----------------------------------------------------------- */
.section-title,
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-block-end: 1.2rem;
  color: var(--text-color);
}

.section-title { font-size: 2.1rem; }
.section-intro {
  font-size: 1.12rem;
  opacity: 0.85;
  margin-block-end: 2rem;
}

/* Texte ------------------------------------------------------------ */
p       { margin-block-end: 1.2em; }
ul, ol  { margin-block-end: 1em; padding-inline-start: 2em; }

/* Liens ------------------------------------------------------------ */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color .2s;
}
a:hover,
a:focus {
  color: var(--accent);
  text-decoration: underline;
  outline: none;
}

/* Médias ----------------------------------------------------------- */
img {
  max-width: 100%;
  display: block;
  border-radius: var(--radius);
}

/* Séparateur ------------------------------------------------------- */
hr {
  border: none;
  border-top: 1px solid var(--secondary);
  margin-block: 2rem;
}

/* ---------------------------------------------------------------------------
   ♿ ACCESSIBILITÉ
   ------------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   🔧 UTILITAIRES MINIMAUX (garde-fou)
   ------------------------------------------------------------------------ */
.text-center { text-align: center !important; }
.py-4        { padding-block: 2rem !important; }
.mt-3        { margin-top: 1rem !important; }
.small       { font-size: .9rem !important; }
.mb-4        { margin-bottom: 2rem !important; } /* Override Bootstrap */

/* ---------------------------------------------------------------------------
   🖱️ SCROLLBAR PERSONALISÉE (WebKit) – Optionnel
   ------------------------------------------------------------------------ */
::-webkit-scrollbar         { width: 10px; background: #111; }
::-webkit-scrollbar-thumb   { background: #555; border-radius: 6px; }
html.light ::-webkit-scrollbar-thumb { background: #d2d2d2; }

/* ---------------------------------------------------------------------------
   📱 RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 650px) {
  .container, .main-content { padding-inline: 0.5rem; }
  .section-title            { font-size: 1.3rem; }
}
@media (max-width: 600px) {
  body {
    padding-bottom: 0 !important; /* ✅ Suppression du padding bas inutile */
  }

  section:last-of-type {
    margin-bottom: 1rem !important; /* ✅ Marge légère uniquement si besoin */
  }

  .scroll-to-top {
    bottom: 1.2rem !important;      /* ✅ Position fixe sans trop d'espace */
    margin-bottom: 0 !important;    /* ✅ Supprime toute marge flottante */
  }

  .cta-text {
    margin-bottom: 0.5rem !important;
  }

  footer {
    margin-bottom: 0 !important;
    padding-bottom: 0.5rem !important; /* ✅ Petit espace pour respirer */
  }
}

@media (max-width: 768px) {
  body.scrolled {
    padding-bottom: 6rem !important; /* Ajoute de l’espace quand le bouton est affiché */
  }

  section:last-of-type {
    margin-bottom: 2rem !important; /* Un peu d’air pour les CTA ou texte de fin */
  }

  .cta-text {
    margin-bottom: 1.5rem !important;
  }

  .scroll-to-top {
    bottom: 1.5rem !important;
  }
}