@import url(./header-nav.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: border 0s;
  outline: none;
  &::-webkit-scrollbar {
    width: 0;
    padding: 0;
  }
}

html,
body {
  height: 100dvh;
  width: 100dvw;
  font-family: var(--font-family-sans);
  color: var(--color-secondary);
  scroll-behavior: smooth;
  background-color: var(--color-primary);
}

/*
  ============================================
  DESIGN SYSTEM : PALETTE DE COULEURS & VARIABLES
  ============================================
*/
:root {
  /* ---------------------------------
  1. COULEURS DE BASE (PRIMAIRES)
  ---------------------------------
  Vos couleurs fondamentales.
  */
  --color-primary: #70007b; /* Violet foncé */
  --color-secondary: #fe01ed; /* Rose vif */
  --color-tertiary: #ff70f5; /* Rose clair */

  /* ---------------------------------
  2. VARIATIONS DE COULEURS
  ---------------------------------
  Teintes (plus claires) et ombres (plus foncées) pour les survols,
  bordures, fonds, etc.
  */
  --color-primary-light: #9d47a3;
  --color-primary-dark: #4b0052;

  --color-secondary-light: #fe67f3;
  --color-secondary-dark: #b700a9;

  /* ---------------------------------
  3. COULEURS NEUTRES (ÉCHELLE DE GRIS)
  ---------------------------------
  Essentiel pour les textes, fonds, et bordures.
  */
  --color-neutral-0: #ffffff;
  --color-neutral-100: #f8f9fa; /* Fond très clair */
  --color-neutral-200: #e9ecef; /* Bordures / Lignes */
  --color-neutral-300: #dee2e6;
  --color-neutral-400: #ced4da;
  --color-neutral-500: #adb5bd; /* Texte secondaire */
  --color-neutral-600: #6c757d;
  --color-neutral-700: #495057; /* Texte principal */
  --color-neutral-800: #343a40;
  --color-neutral-900: #212529; /* Titres / Texte très foncé */
  --color-neutral-1000: #000000;

  /* ---------------------------------
  4. COULEURS SÉMANTIQUES (FEEDBACK UTILISATEUR)
  ---------------------------------
  Pour les messages de succès, d'erreur, d'avertissement...
  */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #17a2b8;

  /* ---------------------------------
  5. VARIABLES FONCTIONNELLES
  ---------------------------------
  Assignation sémantique des couleurs pour une maintenance facile.
  Changez juste ici pour modifier tout le site.
  */
  --color-text-body: var(--color-neutral-700);
  --color-text-heading: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-500);
  --color-text-link: var(--color-primary);
  --color-text-link-hover: var(--color-primary-dark);

  --color-background-body: var(--color-neutral-100);
  --color-background-card: var(--color-neutral-0);

  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-400);

  /* ---------------------------------
  6. VERSIONS RGB (POUR L'OPACITÉ)
  ---------------------------------
  Utilisez avec rgba(var(--rgb-primary), 0.5) pour de la transparence.
  */
  --rgb-primary: 112, 0, 123;
  --rgb-secondary: 254, 1, 237;
  --rgb-tertiary: 255, 112, 245;
  --rgb-neutral-1000: 0, 0, 0;
  --rgb-neutral-0: 255, 255, 255;

  /* ---------------------------------
  7. TYPOGRAPHIE
  ---------------------------------
  */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-family-serif: "Georgia", serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace;

  --font-size-xxxs: 0.5rem; /* 8px */
  --font-size-xxs: 0.625rem; /* 10px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-md: 1.25rem; /* 20px */
  --font-size-lg: 1.5rem; /* 24px */
  --font-size-xl: 1.75rem; /* 28px */
  --font-size-xxl: 2rem; /* 32px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* ---------------------------------
  8. ESPACEMENTS (SPACING)
  ---------------------------------
  Système de marge/padding basé sur une unité de base (0.25rem = 4px).
  */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */

  /* ---------------------------------
  9. AUTRES VARIABLES
  ---------------------------------
  */
  --radius-sm: 0.2rem;
  --radius-md: 0.4rem;
  --radius-lg: 0.8rem;
  --radius-round: 50%;

  --shadow-sm: 0 1px 2px 0 rgba(var(--rgb-neutral-1000), 0.05);
  --shadow-md: 0 4px 6px -1px rgba(var(--rgb-neutral-1000), 0.1),
    0 2px 4px -1px rgba(var(--rgb-neutral-1000), 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(var(--rgb-neutral-1000), 0.1),
    0 4px 6px -2px rgba(var(--rgb-neutral-1000), 0.05);
}

/*
  ===============================
  BALISE DE BASE INITIALISER ICI
  ===============================
*/

section {
  height: 100dvh;
  width: 100%;
}

section #s-title {
  z-index: 3;
  position: sticky;
  top: 27.5px;
  left: 60px;
  color: var(--color-neutral-0);
}

/*
  =====================================
  NOTIFICATION GLOBAL DE L'APPLICATION
  =====================================
*/

/* Le conteneur #notif gère la position et l'alignement des notifications */
#notif {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* Espace entre les notifications si plusieurs sont affichées */
  font-family: sans-serif; /* Une police de secours est toujours une bonne idée */
  opacity: 1;
}
/* Style de base pour chaque notification */
.notification {
  padding: 10px 20px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-0);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Ombre plus visible */
  opacity: 0;
  transform: translateY(20px); /* Commence en dessous et monte */
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* État affiché : la notification devient visible */
.notification.show {
  opacity: 1;
  transform: translateY(0);
}
/* Styles spécifiques par type de notification */
.notification-info {
  background-color: var(--color-info);
  border: 2px solid var(--color-info);
}
.notification-succes {
  background-color: var(--color-success);
  border: 2px solid var(--color-success);
}
.notification-erreur {
  background-color: var(--color-danger);
  border: 2px solid var(--color-danger);
}
.notification-avertissement {
  background-color: var(--color-warning);
  border: 2px solid var(--color-warning);
}

/*
  ===========================
  EFFET DE CHARGEMENT GLOBAL
  ===========================
*/

#loading-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  background-color: #121212; /* Un fond plus sobre */
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0.5s;
}
#loading-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.loading-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-logo {
  z-index: -1;
  position: absolute;
  width: 50px;
  height: 50px;
  animation: pulse 2s infinite cubic-bezier(0.66, 0, 0.34, 1);
}
#loading-percentage {
  display: flex;
  position: absolute;
  font-size: 1.2rem;
  color: var(--color-neutral-0);
  font-weight: bold;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-round);
  overflow: hidden;
}
.progress-ring {
  transform: rotate(-90deg); /* Pour que le cercle commence en haut */
}
.progress-ring__bg {
  fill: transparent;
  stroke: #333; /* Couleur du fond du cercle */
  stroke-width: 4;
}
.progress-ring__circle {
  fill: transparent;
  stroke: rgb(254, 1, 237); /* Couleur de la progression */
  stroke-width: 4;
  stroke-linecap: round; /* Bords arrondis */
  transition: stroke-dashoffset 0.3s linear;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
}

/*
  ===================================
  EFFET DE TRANTITION ENTRE LES PAGES
  ===================================
*/

#transition-wave-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  display: none;
  background-color: transparent;
}