/* ========== VARIABLES CSS - THÈME DARK MODERNE ========== */

:root {

  /* Couleurs principales */

  --color-primary: #8d7d9e;

  --color-primary-dark: #71627f;

  --color-primary-light: #a293ae;

  --color-primary-50: #f5f1f7;

  --color-primary-100: #e5dfea;

  

  --color-secondary: #ad9ab8;

  --color-secondary-dark: #7b6a87;

  --color-secondary-light: #b8a8c1;

  

  --color-accent: #f59e0b;

  --color-accent-dark: #d97706;

  --color-accent-light: #fbbf24;

  

  /* Palette de gris pour le thème dark */

  --color-dark-50: #f2f1f4;

  --color-dark-100: #ece9ee;

  --color-dark-200: #dcd8df;

  --color-dark-300: #c6c2ca;

  --color-dark-400: #9895a0;

  --color-dark-500: #73717a;

  --color-dark-600: #555862;

  --color-dark-700: #3b3d46;

  --color-dark-800: #23252b;

  --color-dark-900: #16171c;

  --color-dark-950: #0f1013;

  

  /* Couleurs sémantiques */

  --color-bg: var(--color-dark-950);

  --color-bg-alt: var(--color-dark-900);

  --color-bg-card: var(--color-dark-800);

  --color-bg-header: rgba(15, 16, 19, 0.95);

  --color-bg-footer: var(--color-dark-900);

  

  --color-text: var(--color-dark-100);

  --color-text-muted: var(--color-dark-400);

  --color-text-light: var(--color-dark-50);

  

  --color-border: var(--color-dark-700);

  --color-border-light: var(--color-dark-600);

  --color-border-dark: var(--color-dark-800);

  

  /* Polices */

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

  

  /* Tailles de police */

  --text-xs: 0.75rem;

  --text-sm: 0.875rem;

  --text-base: 1rem;

  --text-lg: 1.125rem;

  --text-xl: 1.25rem;

  --text-2xl: 1.5rem;

  --text-3xl: 1.875rem;

  --text-4xl: 2.25rem;

  --text-5xl: 3rem;

  --text-6xl: 3.75rem;

  

  /* Espacements */

  --space-1: 0.25rem;

  --space-2: 0.5rem;

  --space-3: 0.75rem;

  --space-4: 1rem;

  --space-5: 1.25rem;

  --space-6: 1.5rem;

  --space-8: 2rem;

  --space-10: 2.5rem;

  --space-12: 3rem;

  --space-16: 4rem;

  --space-20: 5rem;

  

  /* Bordures */

  --radius-sm: 0.375rem;

  --radius: 0.5rem;

  --radius-md: 0.75rem;

  --radius-lg: 1rem;

  --radius-xl: 1.25rem;

  --radius-2xl: 1.5rem;

  --radius-full: 9999px;

  

  /* Ombres */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  

  /* Ombres colorées */

  --shadow-primary: 0 0 0 1px var(--color-primary), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  --shadow-glow: 0 0 24px rgba(145, 129, 159, 0.18);

  

  /* Dégradés */

  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);

  --gradient-dark: linear-gradient(135deg, var(--color-dark-900) 0%, var(--color-dark-950) 100%);

  --gradient-card: linear-gradient(180deg, var(--color-dark-800) 0%, var(--color-dark-900) 100%);

  --gradient-hero: linear-gradient(135deg, #4b4256 0%, #655773 50%, #887397 100%);

  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);

  

  /* Transitions */

  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  --transition-fast: all 0.1s ease;

  --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}



/* ========== RESET ET BASE ========== */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}



html {

  scroll-behavior: smooth;

  font-size: 16px;

  background: var(--color-bg);

}



body {

  font-family: var(--font-main);

  color: var(--color-text);

  background: var(--color-bg);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;

}

html {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}



/* ========== TYPOGRAPHIE ========== */

h1, h2, h3, h4, h5, h6 {

  font-family: var(--font-heading);

  font-weight: 700;

  line-height: 1.2;

  margin-bottom: var(--space-4);

  color: var(--color-text-light);

}



h1 {

  font-size: var(--text-5xl);

  background: linear-gradient(135deg, var(--color-text-light) 0%, var(--color-primary-light) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



h2 {

  font-size: var(--text-4xl);

}



h3 {

  font-size: var(--text-3xl);

}



h4 {

  font-size: var(--text-2xl);

}



h5 {

  font-size: var(--text-xl);

}



h6 {

  font-size: var(--text-lg);

}



p {

  margin-bottom: var(--space-4);

  color: var(--color-text-muted);

  font-weight: 400;

  line-height: 1.7;

}



/* ========== LAYOUT ========== */

.container {

  width: 90%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--space-4);

}



.container-fluid {

  width: 95%;

  max-width: 1400px;

  margin: 0 auto;

}



/* ========== BARRE D'ANNONCE ========== */

.announcement-bar {

  background: var(--gradient-primary);

  color: white;

  padding: var(--space-3) 0;

  position: relative;

  z-index: 1001;

  font-size: var(--text-sm);

}



.announcement-bar .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-4);

}



.announcement-content {

  display: flex;

  align-items: center;

  gap: var(--space-4);

  flex: 1;

  justify-content: center;

}



.announcement-badge {

  background: rgba(255, 255, 255, 0.2);

  padding: var(--space-1) var(--space-3);

  border-radius: var(--radius-full);

  font-size: var(--text-xs);

  font-weight: 600;

  backdrop-filter: blur(10px);

}



.announcement-content p {

  margin: 0;

  font-weight: 500;

  color: white;

}



.announcement-link {

  color: white;

  text-decoration: none;

  font-weight: 600;

  display: flex;

  align-items: center;

  gap: var(--space-2);

  transition: var(--transition);

  font-size: var(--text-sm);

}



.announcement-link:hover {

  opacity: 0.9;

  transform: translateX(var(--space-1));

}



.announcement-close {

  background: none;

  border: none;

  color: white;

  cursor: pointer;

  padding: var(--space-1);

  border-radius: var(--radius);

  transition: var(--transition);

  display: flex;

  align-items: center;

  justify-content: center;

}



.announcement-close:hover {

  background: rgba(255, 255, 255, 0.1);

}



/* ========== HEADER PRINCIPAL ========== */

.site-header {

  background: var(--color-bg-header);

  backdrop-filter: blur(20px) saturate(180%);

  border-bottom: 1px solid var(--color-border);

  padding: var(--space-4) 0;

  position: sticky;

  top: 0;

  z-index: 1000;

  transition: var(--transition);

}



.site-header.scrolled {

  background: rgba(15, 16, 19, 0.98);

  border-bottom-color: var(--color-border-dark);

}



.header-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-8);

}



/* Logo */

.logo {

  display: flex;

  align-items: center;

  gap: var(--space-3);

  text-decoration: none;

  position: relative;

  transition: var(--transition);

}



.logo:hover {

  transform: translateY(-1px);

}



.logo img {

  width: 180px;

  height: auto;

  filter: brightness(0) invert(1);

  transition: var(--transition);

}



.logo-badge {

  background: var(--gradient-primary);

  color: white;

  font-size: var(--text-xs);

  padding: var(--space-1) var(--space-3);

  border-radius: var(--radius-full);

  font-weight: 700;

  position: absolute;

  top: -8px;

  right: -12px;

  box-shadow: var(--shadow-glow);

  animation: pulse 2s infinite;

}



@keyframes pulse {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.05); }

}



/* Navigation principale */

.main-nav {

  display: flex;

  align-items: center;

}



.nav-list {

  display: flex;

  list-style: none;

  gap: var(--space-1);

  margin: 0;

  padding: 0;

}



.nav-item {

  position: relative;

}



.nav-link {

  display: flex;

  align-items: center;

  gap: var(--space-3);

  padding: var(--space-3) var(--space-5);

  text-decoration: none;

  color: var(--color-text);

  font-weight: 500;

  border-radius: var(--radius);

  transition: var(--transition);

  position: relative;

  background: transparent;

  border: 1px solid transparent;

  font-size: var(--text-sm);

}



.nav-link:hover {

  background: var(--gradient-glass);

  border-color: var(--color-border-light);

  color: var(--color-primary-light);

  transform: translateY(-1px);

}



.nav-item.active .nav-link {

  background: var(--gradient-glass);

  border-color: var(--color-primary);

  color: var(--color-primary-light);

  box-shadow: var(--shadow-glow);

}



.nav-icon {

  font-size: 1rem;

  opacity: 0.8;

  transition: var(--transition);

  width: 16px;

  text-align: center;

}



.nav-link:hover .nav-icon {

  opacity: 1;

  transform: scale(1.1);

}



/* Dropdown Menu */

.dropdown {

  position: relative;

}



.dropdown-menu {

  position: absolute;

  top: 100%;

  left: 0;

  width: 600px;

  background: var(--color-bg-card);

  backdrop-filter: blur(20px);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-2xl);

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: var(--transition);

  z-index: 1000;

}



.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.is-open .dropdown-menu {

  opacity: 1;

  visibility: visible;

  transform: translateY(5px);

}



.dropdown-content {

  padding: var(--space-6);

}



.dropdown-section {

  margin-bottom: var(--space-6);

}



.dropdown-section:last-child {

  margin-bottom: 0;

}



.dropdown-section h4 {

  color: var(--color-primary-light);

  margin-bottom: var(--space-4);

  font-size: var(--text-sm);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  font-weight: 600;

}



.dropdown-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-3);

  margin-bottom: var(--space-5);

}



.dropdown-link {

  display: flex;

  align-items: flex-start;

  gap: var(--space-3);

  padding: var(--space-4);

  text-decoration: none;

  color: var(--color-text);

  border-radius: var(--radius);

  transition: var(--transition);

  border: 1px solid var(--color-border);

  background: var(--color-bg-alt);

}



.dropdown-link:hover {

  background: var(--gradient-glass);

  border-color: var(--color-primary);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}



.dropdown-link i {

  color: var(--color-primary);

  font-size: 1.25rem;

  width: 20px;

  text-align: center;

  margin-top: 2px;

}



.dropdown-link-content {

  flex: 1;

}



.dropdown-link span {

  display: block;

  font-weight: 500;

  color: var(--color-text-light);

  margin-bottom: var(--space-1);

}



.dropdown-link small {

  display: block;

  color: var(--color-text-muted);

  font-size: var(--text-xs);

  font-weight: 400;

}



.dropdown-list {

  display: flex;

  flex-direction: column;

  gap: var(--space-2);

}



.dropdown-cta {

  text-align: center;

  padding-top: var(--space-5);

  border-top: 1px solid var(--color-border);

}



/* Actions du header */

.header-actions {

  display: flex;

  align-items: center;

  gap: var(--space-2);

}



.action-btn {

  background: none;

  border: none;

  color: var(--color-text);

  padding: var(--space-3);

  border-radius: var(--radius);

  cursor: pointer;

  transition: var(--transition);

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.action-btn:hover {

  background: var(--gradient-glass);

  color: var(--color-primary-light);

  transform: translateY(-1px);

}



.theme-toggle {

  position: relative;

  width: 44px;

  height: 44px;

}



.theme-toggle .fa-sun {

  display: none;

}



[data-theme="dark"] .theme-toggle .fa-moon {

  display: none;

}



[data-theme="dark"] .theme-toggle .fa-sun {

  display: block;

}



/* Menu hamburger */

.hamburger {

  display: flex;

  flex-direction: column;

  gap: 3px;

  width: 20px;

}



.hamburger span {

  display: block;

  height: 2px;

  background: currentColor;

  border-radius: 1px;

  transition: var(--transition);

}



.hamburger span:nth-child(1) { width: 100%; }

.hamburger span:nth-child(2) { width: 75%; }

.hamburger span:nth-child(3) { width: 100%; }



/* ========== OVERLAY DE RECHERCHE ========== */

.search-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.9);

  backdrop-filter: blur(10px);

  z-index: 2000;

  opacity: 0;

  visibility: hidden;

  transition: var(--transition);

}



.search-overlay.active {

  opacity: 1;

  visibility: visible;

}



.search-container {

  position: absolute;

  top: 20%;

  left: 50%;

  transform: translateX(-50%);

  width: 90%;

  max-width: 600px;

  background: var(--color-bg-card);

  border-radius: var(--radius-xl);

  padding: var(--space-8);

  box-shadow: var(--shadow-2xl);

  border: 1px solid var(--color-border);

}



.search-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: var(--space-6);

}



.search-header h3 {

  color: var(--color-text-light);

  margin: 0;

  font-size: var(--text-xl);

}



.search-close {

  background: none;

  border: none;

  color: var(--color-text-muted);

  cursor: pointer;

  padding: var(--space-2);

  border-radius: var(--radius);

  transition: var(--transition);

  display: flex;

  align-items: center;

  justify-content: center;

}



.search-close:hover {

  background: var(--color-border);

  color: var(--color-text-light);

}



.search-form {

  margin-bottom: var(--space-6);

}



.search-input-group {

  position: relative;

  display: flex;

  align-items: center;

  gap: var(--space-3);

}



.search-icon {

  position: absolute;

  left: var(--space-4);

  color: var(--color-text-muted);

  z-index: 1;

}



.search-input {

  width: 100%;

  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);

  border: 2px solid var(--color-border);

  border-radius: var(--radius-lg);

  font-size: var(--text-lg);

  background: var(--color-bg-alt);

  color: var(--color-text-light);

  transition: var(--transition);

  font-family: var(--font-main);

}



.search-input:focus {

  outline: none;

  border-color: var(--color-primary);

  box-shadow: var(--shadow-primary);

}



.search-submit {

  padding: var(--space-4) var(--space-6);

  background: var(--gradient-primary);

  color: white;

  border: none;

  border-radius: var(--radius-lg);

  cursor: pointer;

  font-weight: 600;

  transition: var(--transition);

  font-family: var(--font-main);

  white-space: nowrap;

}



.search-submit:hover {

  transform: translateY(-1px);

  box-shadow: var(--shadow-lg);

}



.search-suggestions {

  margin-top: var(--space-6);

}



.suggestion-title {

  color: var(--color-text-muted);

  font-size: var(--text-sm);

  margin-bottom: var(--space-3);

  font-weight: 500;

}



.suggestion-tags {

  display: flex;

  gap: var(--space-2);

  flex-wrap: wrap;

}



.suggestion-tag {

  background: var(--color-bg-alt);

  color: var(--color-text);

  padding: var(--space-2) var(--space-4);

  border-radius: var(--radius-full);

  text-decoration: none;

  font-size: var(--text-sm);

  transition: var(--transition);

  border: 1px solid var(--color-border);

}



.suggestion-tag:hover {

  background: var(--color-primary);

  color: white;

  border-color: var(--color-primary);

  transform: translateY(-1px);

}



/* ========== NAVIGATION MOBILE CORRIGÉE ========== */

.mobile-nav {

  position: fixed;

  top: 0;

  right: -100%; /* Changé de left à right */

  width: 320px;

  max-width: 90vw;

  height: 100vh; /* Changé de height: 100% à height: 100vh */

  background: var(--color-bg-card);

  z-index: 3000;

  transition: var(--transition-slow);

  box-shadow: var(--shadow-2xl);

  display: flex;

  flex-direction: column;

  border-left: 1px solid var(--color-border); /* Changé de border-right */

  overflow-y: auto;

}



.mobile-nav.open { /* Changé de .active à .open */

  right: 0; /* Changé de left à right */

}



.mobile-nav-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: var(--space-5);

  border-bottom: 1px solid var(--color-border);

  background: var(--color-bg-alt);

  flex-shrink: 0; /* Empêche le header de rétrécir */

}



.mobile-logo img {

  width: 140px;

  height: auto;

  filter: brightness(0) invert(1);

}



.mobile-close {

  background: none;

  border: none;

  color: var(--color-text);

  cursor: pointer;

  padding: var(--space-2);

  border-radius: var(--radius);

  transition: var(--transition);

  display: flex;

  align-items: center;

  justify-content: center;

}



.mobile-close:hover {

  background: var(--color-border);

  color: var(--color-text-light);

}



.mobile-nav-content {

  flex: 1;

  padding: var(--space-4) 0;

  overflow-y: auto;

}



.mobile-nav-list {

  list-style: none;

  margin: 0;

  padding: 0;

}



.mobile-nav-link {

  display: flex;

  align-items: center;

  gap: var(--space-4);

  padding: var(--space-4) var(--space-6);

  text-decoration: none;

  color: var(--color-text);

  transition: var(--transition);

  border-left: 3px solid transparent;

  font-weight: 500;

  width: 100%;

  text-align: left;

  background: none;

  border: none;

  cursor: pointer;

  font-family: inherit;

  font-size: inherit;

}



.mobile-nav-link:hover,

.mobile-nav-link.active {

  background: var(--gradient-glass);

  border-left-color: var(--color-primary);

  color: var(--color-primary-light);

}



.mobile-nav-dropdown {

  border-bottom: 1px solid var(--color-border);

}



.mobile-dropdown-toggle {

  width: 100%;

  background: none;

  border: none;

  text-align: left;

  cursor: pointer;

  font-family: inherit;

  color: inherit;

  display: flex;

  align-items: center;

  gap: var(--space-4);

  padding: var(--space-4) var(--space-6);

  transition: var(--transition);

  border-left: 3px solid transparent;

}



.mobile-dropdown-toggle:hover {

  background: var(--gradient-glass);

  border-left-color: var(--color-primary);

  color: var(--color-primary-light);

}



.dropdown-icon {

  margin-left: auto;

  transition: var(--transition);

}



.mobile-nav-dropdown.open .dropdown-icon {

  transform: rotate(180deg);

}



.mobile-dropdown-menu {

  max-height: 0;

  overflow: hidden;

  background: var(--color-bg-alt);

  border-left: 3px solid var(--color-primary);

  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.mobile-nav-dropdown.open .mobile-dropdown-menu {

  max-height: 500px; /* Ajustez selon le contenu */

}



.mobile-dropdown-link {

  display: block;

  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-16);

  text-decoration: none;

  color: var(--color-text);

  transition: var(--transition);

  border-bottom: 1px solid var(--color-border-light);

  font-size: var(--text-sm);

}



.mobile-dropdown-link:hover {

  background: rgba(255, 255, 255, 0.05);

  color: var(--color-primary-light);

}



.mobile-dropdown-link.view-all {

  background: var(--gradient-primary);

  color: white;

  font-weight: 600;

  margin: var(--space-2);

  border-radius: var(--radius);

  text-align: center;

  border: none;

  padding: var(--space-3) var(--space-4);

}



.mobile-nav-footer {

  padding: var(--space-5);

  border-top: 1px solid var(--color-border);

  background: var(--color-bg-alt);

  flex-shrink: 0; /* Empêche le footer de rétrécir */

}



.mobile-theme-toggle {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.mobile-theme-toggle span {

  color: var(--color-text);

  font-weight: 500;

}



.theme-switch {

  position: relative;

  display: inline-block;

  width: 50px;

  height: 24px;

}



.theme-switch input {

  opacity: 0;

  width: 0;

  height: 0;

}



.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: var(--color-border);

  transition: var(--transition);

  border-radius: var(--radius-full);

}



.slider:before {

  position: absolute;

  content: "";

  height: 16px;

  width: 16px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  transition: var(--transition);

  border-radius: 50%;

}



input:checked + .slider {

  background-color: var(--color-primary);

}



input:checked + .slider:before {

  transform: translateX(26px);

}



/* ========== OVERLAY DE PAGE CORRIGÉ ========== */

.page-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  backdrop-filter: blur(5px);

  z-index: 2999;

  opacity: 0;

  visibility: hidden;

  transition: var(--transition);

}



.page-overlay.show { /* Changé de .active à .show */

  opacity: 1;

  visibility: visible;

}



/* ========== CORRECTIONS RESPONSIVE ========== */

@media (max-width: 768px) {

  .main-nav {

    display: none;

  }

  

  .nav-toggle {

    display: flex !important; /* Force l'affichage */

  }

  

  .mobile-nav {

    display: flex !important; /* Force l'affichage */

  }

}

/* Le menu complet devient trop serré sur les tablettes et petits laptops. */
@media (max-width: 1100px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex !important; }
  .mobile-nav { display: flex !important; }
}

@media (min-width: 1101px) {
  .nav-toggle,
  .mobile-nav { display: none !important; }
}



@media (min-width: 769px) {

  .nav-toggle {

    display: none;

  }

  

  .mobile-nav {

    display: none;

  }

}



/* Empêcher le scroll quand le menu mobile est ouvert */

body.no-scroll {

  overflow: hidden;

}



/* Animation d'entrée améliorée */

@keyframes slideInRight {

  from {

    transform: translateX(100%);

    opacity: 0;

  }

  to {

    transform: translateX(0);

    opacity: 1;

  }

}



.mobile-nav.open {

  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



/* ========== LIEN SKIP ========== */

.skip-link {

  position: absolute;

  top: -40px;

  left: 6px;

  background: var(--color-primary);

  color: white;

  padding: var(--space-2);

  text-decoration: none;

  border-radius: var(--radius);

  z-index: 10000;

  transition: top 0.3s;

  font-weight: 500;

}



.skip-link:focus {

  top: 6px;

}



/* ========== CONTENU PRINCIPAL ========== */

main {

  min-height: 100vh;

}



/* ========== BOUTONS ========== */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-3);

  padding: var(--space-3) var(--space-6);

  border-radius: var(--radius);

  text-decoration: none;

  font-weight: 600;

  font-size: var(--text-sm);

  border: none;

  cursor: pointer;

  transition: var(--transition);

  position: relative;

  overflow: hidden;

  font-family: var(--font-main);

}



.btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);

  transition: var(--transition-slow);

}



.btn:hover::before {

  left: 100%;

}



.btn-primary {

  background: var(--gradient-primary);

  color: white;

  box-shadow: var(--shadow-md);

}



.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-lg);

}



.btn-secondary {

  background: var(--color-bg-card);

  color: var(--color-text-light);

  border: 1px solid var(--color-border);

  box-shadow: var(--shadow-sm);

}



.btn-secondary:hover {

  background: var(--color-bg-alt);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}



.btn-outline {

  background: transparent;

  color: var(--color-text-light);

  border: 1px solid var(--color-border-light);

  backdrop-filter: blur(10px);

}



.btn-outline:hover {

  background: var(--gradient-glass);

  border-color: var(--color-primary);

  transform: translateY(-2px);

}



.btn-sm {

  padding: var(--space-2) var(--space-4);

  font-size: var(--text-xs);

}



/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {

  .announcement-content {

    flex-direction: column;

    gap: var(--space-2);

    text-align: center;

  }

  

  .main-nav {

    display: none;

  }

  

  .header-actions {

    gap: var(--space-1);

  }

  

  .action-btn {

    padding: var(--space-2);

  }

  

  .dropdown-menu {

    width: 90vw;

    left: 5vw;

  }

  

  .dropdown-grid {

    grid-template-columns: 1fr;

  }

  

  .search-container {

    padding: var(--space-6);

  }

  

  .search-input-group {

    flex-direction: column;

    gap: var(--space-3);

  }

  

  .search-submit {

    width: 100%;

  }

}



@media (min-width: 769px) {

  .nav-toggle {

    display: none;

  }

  

  .mobile-nav {

    display: none;

  }

}



@media (max-width: 480px) {

  .container {

    width: 95%;

    padding: 0 var(--space-3);

  }

  

  .logo img {

    width: 140px;

  }

  

  .search-container {

    padding: var(--space-5);

  }

}



/* ========== ANIMATIONS ========== */

@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes slideInLeft {

  from {

    opacity: 0;

    transform: translateX(-30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



.fade-in {

  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;

}



.slide-in {

  animation: slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;

}



/* ========== ACCESSIBILITÉ ========== */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

  

  html {

    scroll-behavior: auto;

  }

}



/* Focus visible amélioré */

button:focus-visible,

a:focus-visible,

input:focus-visible,

textarea:focus-visible {

  outline: 2px solid var(--color-primary);

  outline-offset: 2px;

  border-radius: var(--radius-sm);

}



/* Mode contraste élevé */

@media (prefers-contrast: high) {

  :root {

    --color-border: #000;

    --color-text: #000;

    --color-bg: #fff;

  }

}

/* Guides piliers : lecture longue, sommaire stable et blocs de preuve. */
.pillar-guide{background:var(--color-bg,#f7f8fc);color:var(--color-text,#182033);min-height:70vh}
.pillar-wrap{width:min(1120px,calc(100% - 32px));margin-inline:auto}
.pillar-hero{padding:54px 0 42px;background:linear-gradient(135deg,#25222a,#5b4f64);color:#fff}
.pillar-breadcrumb{display:flex;gap:8px;align-items:center;margin-bottom:24px;font-size:.9rem;color:#ded6e3}
.pillar-breadcrumb a{color:#fff;text-decoration:none}
.pillar-eyebrow{margin:0 0 10px;color:#b6acbc;font-weight:750;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
.pillar-hero h1{max-width:900px;margin:0 0 16px;font-size:clamp(2rem,5vw,3.45rem);line-height:1.08;letter-spacing:-.035em}
.pillar-lead{max-width:820px;margin:0;color:#e9e4ec;font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.65}
.pillar-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;color:#cbc4ce;font-size:.88rem}
.pillar-layout{display:grid;grid-template-columns:250px minmax(0,760px);gap:52px;align-items:start;padding-block:48px 72px}
.pillar-toc{position:sticky;top:24px;padding:22px;background:#fff;border:1px solid #ded9e1;border-radius:16px;box-shadow:0 10px 28px rgba(57,50,61,.07)}
.pillar-toc strong{display:block;margin-bottom:12px}.pillar-toc ol{margin:0;padding-left:20px}.pillar-toc li+li{margin-top:9px}
.pillar-toc a{color:#71637b;text-decoration:none;font-size:.93rem}.pillar-toc a:hover{text-decoration:underline}
.pillar-content{min-width:0}.pillar-content section{scroll-margin-top:24px;margin:0 0 42px}
.pillar-content h2{margin:0 0 16px;color:#403847;font-size:clamp(1.45rem,3vw,2rem);line-height:1.22}
.pillar-content h3{margin:24px 0 10px;color:#594d61}.pillar-content p,.pillar-content li{line-height:1.75}
.pillar-content ul,.pillar-content ol{padding-left:23px}.pillar-content li+li{margin-top:8px}
.pillar-content table{width:100%;border-collapse:collapse;margin:22px 0;background:#fff}
.pillar-content th,.pillar-content td{padding:13px;border:1px solid #d8d2db;text-align:left;vertical-align:top}.pillar-content th{background:#f0ecf2;color:#51465a}
.pillar-notice{margin:0 0 34px;padding:18px 20px;border-left:4px solid #867591;background:#ede8f0;border-radius:0 12px 12px 0;line-height:1.65}
.pillar-faq details{margin-bottom:12px;background:#fff;border:1px solid #ded8e1;border-radius:12px;padding:16px 18px}
.pillar-faq summary{cursor:pointer;font-weight:700;color:#51465a}.pillar-faq details div{padding-top:12px}
.pillar-sources{padding-top:26px;border-top:1px solid #ded8e1}.pillar-sources a{color:#74647f}
.pillar-related{padding:24px;background:#403847;color:#fff;border-radius:18px}.pillar-related h2{color:#fff;font-size:1.35rem}.pillar-related div{display:flex;flex-wrap:wrap;gap:10px}
.pillar-related a{display:inline-flex;padding:10px 13px;border-radius:999px;background:#fff;color:#685a73;text-decoration:none;font-weight:700;font-size:.9rem}
@media (max-width:820px){.pillar-layout{grid-template-columns:1fr;gap:26px}.pillar-toc{position:static}.pillar-content table{display:block;overflow-x:auto}.pillar-hero{padding-top:38px}}

/* ========== FINITIONS UI/UX 2026 ========== */
[data-theme="light"] {
  --color-bg: #f5f3f6;
  --color-bg-alt: #ede9ef;
  --color-bg-card: #ffffff;
  --color-bg-header: rgba(255, 255, 255, 0.9);
  --color-bg-footer: #111216;
  --color-text: #48434d;
  --color-text-muted: #6e6873;
  --color-text-light: #29262e;
  --color-border: #ded8e1;
  --color-border-light: #ebe6ed;
  --color-border-dark: #cec8d1;
  --gradient-card: linear-gradient(180deg, #ffffff 0%, #f5f3f6 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,.92), rgba(245, 243, 246,.78));
  color-scheme: light;
}

[data-theme="dark"] { color-scheme: dark; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-wrap: pretty;
}

main { flex: 1 0 auto; }

img,
video,
svg { max-width: 100%; }

button,
input,
textarea,
select { font: inherit; }

.content-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  scroll-margin-top: 7rem;
}

.content-anchor:focus { outline: none; }

.site-header {
  box-shadow: 0 10px 35px rgba(15, 16, 19, .08);
}

[data-theme="light"] .site-header.scrolled {
  background: rgba(255, 255, 255, .96);
}

[data-theme="light"] .logo img,
[data-theme="light"] .mobile-logo img { filter: none; }

.nav-link,
.action-btn,
.mobile-nav-link,
.search-submit,
.btn {
  min-height: 44px;
}

.announcement-bar[hidden] { display: none !important; }

.search-overlay {
  overscroll-behavior: contain;
}

.search-container {
  box-shadow: 0 30px 90px rgba(15, 16, 19, .35);
}

.guide-card,
.feature-card,
.app-card {
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}

@media (hover: hover) and (pointer: fine) {
  .guide-card:hover,
  .feature-card:hover,
  .app-card:hover { transform: translateY(-5px); }
}

@media (max-width: 768px) {
  .announcement-content p { display: none; }
  .announcement-content { justify-content: flex-start; gap: .75rem; }
  .announcement-bar { padding: .55rem 0; }
  .site-header { padding: .65rem 0; }
  .logo img { width: 148px; }

  .header-content { min-width: 0; gap: .5rem; }
  .logo { min-width: 0; flex: 0 1 auto; }
  .logo img { width: 124px; }
  .header-actions { flex: 0 0 auto; }
  .header-actions .theme-toggle { display: none; }
  .action-btn { width: 42px; height: 42px; padding: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo-badge,
  .hero-badge.pulse { animation: none !important; }
}

/* ========== PAGES ÉDITORIALES : APPS + GUIDES TECHNIQUES ========== */
.page.guide-page {
  min-height: 70vh;
  color: var(--color-text);
  background:
    radial-gradient(circle at 85% 8%, rgba(162, 147, 174, .12), transparent 30rem),
    var(--color-bg);
}

.page.guide-page > .breadcrumb,
.page.guide-page > .hero-section,
.page.guide-page > .content-section {
  width: min(100% - 3rem, 1120px);
  margin-inline: auto;
}

.page.guide-page > .breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  padding-top: 2rem;
  color: var(--color-text-muted);
  font-size: .9rem;
}

.page.guide-page > .breadcrumb a,
.page.guide-page .content-section a {
  color: var(--color-primary-light);
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}

.page.guide-page > .hero-section {
  padding: clamp(2.75rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4.25rem);
  border-bottom: 1px solid var(--color-border);
}

.page.guide-page .hero-content { max-width: 900px; }

.page.guide-page .hero-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 1.25rem;
  padding: .55rem .9rem;
  border: 1px solid rgba(151, 137, 167, .38);
  border-radius: 999px;
  color: #c6b8cc;
  background: rgba(151, 137, 167, .12);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.page.guide-page h1 {
  max-width: 980px;
  margin: 0;
  color: var(--color-text-light);
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.page.guide-page .hero-description {
  max-width: 860px;
  margin: 1.35rem 0 0;
  color: var(--color-text-muted);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.8;
}

.page.guide-page > .content-section {
  max-width: 920px;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.page.guide-page .content-section > section { margin-top: 3.5rem; }
.page.guide-page .content-section h2 {
  margin: 0 0 1.15rem;
  color: var(--color-text-light);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.page.guide-page .content-section h3 {
  margin: 2rem 0 .8rem;
  color: var(--color-text-light);
}

.page.guide-page .content-section p,
.page.guide-page .content-section li {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.8;
}

.page.guide-page .content-section li + li { margin-top: .55rem; }

.page.guide-page .legal-note,
.page.guide-page .toc {
  margin: 0 0 2rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(35, 37, 43, .62);
  box-shadow: 0 18px 50px rgba(15, 16, 19, .12);
}

.page.guide-page .legal-note { border-left: 4px solid var(--color-primary); }
.page.guide-page .toc strong { display: block; margin-bottom: .8rem; color: var(--color-text-light); }
.page.guide-page .toc ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem 1.5rem;
  margin: 0;
  padding-left: 1.15rem;
}

.page.guide-page .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.page.guide-page table { width: 100%; min-width: 680px; border-collapse: collapse; }
.page.guide-page th,
.page.guide-page td { padding: 1rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.page.guide-page th { color: var(--color-text-light); background: rgba(151, 137, 167, .13); }
.page.guide-page td { color: var(--color-text-muted); }

.page.guide-page details {
  margin-top: .85rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(35, 37, 43, .48);
}
.page.guide-page summary { color: var(--color-text-light); font-weight: 750; cursor: pointer; }

/* Les centaines de guides générés partagent ce gabarit. */
.guide-auto .hero > .container,
.guide-auto > section.container { width: min(100% - 3rem, 960px); max-width: 960px; }
.guide-auto .hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.guide-auto .hero h1 {
  max-width: 900px;
  font-size: clamp(2.15rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.guide-auto .hero .k-desc { max-width: 800px; margin-top: 1rem; font-size: 1.08rem; line-height: 1.75; }
.guide-auto > section.container { padding-top: 2rem; padding-bottom: 4.5rem; }
.guide-auto > section.container > nav[aria-label] {
  margin: 0 0 2.75rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid #3b3d46;
  border-radius: 16px;
  background: rgba(27, 28, 33, .78);
}
.guide-auto > section.container > nav[aria-label] ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem 1.75rem;
  margin: 0;
  padding-left: 1.2rem;
}
.guide-auto > section.container > nav[aria-label] li { margin: 0; line-height: 1.55; }
.guide-auto > section.container > nav[aria-label] a { color: #bcaec5; text-underline-offset: .2em; }
.guide-auto > section.container > section { margin: 2.75rem 0; }
.guide-auto > section.container > section h2 { margin-bottom: 1rem; font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.2; }
.guide-auto > section.container > section h3 { margin: 1.75rem 0 .7rem; line-height: 1.3; }
.guide-auto > section.container p,
.guide-auto > section.container li { font-size: 1rem; line-height: 1.8; }
.guide-auto > section.container li + li { margin-top: .45rem; }
.guide-auto > section.container img { height: auto; border-radius: 14px; }
.guide-auto > section.container table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.guide-auto > section.container th,
.guide-auto > section.container td { min-width: 10rem; padding: .85rem 1rem; border: 1px solid #3b3d46; text-align: left; }
.guide-auto .cta-block { margin-top: 3rem; padding: 2rem; border: 1px solid #3b3d46; border-radius: 18px; background: rgba(27, 28, 33, .72); }

[data-theme="light"] .page.guide-page .legal-note,
[data-theme="light"] .page.guide-page .toc,
[data-theme="light"] .page.guide-page details { background: rgba(255, 255, 255, .88); }

@media (max-width: 640px) {
  .page.guide-page > .breadcrumb,
  .page.guide-page > .hero-section,
  .page.guide-page > .content-section,
  .guide-auto .hero > .container,
  .guide-auto > section.container { width: min(100% - 2rem, 960px); }

  .page.guide-page > .breadcrumb { padding-top: 1.25rem; }
  .page.guide-page > .hero-section { padding-block: 2.5rem; }
  .page.guide-page h1 { font-size: clamp(2rem, 11vw, 3rem); overflow-wrap: anywhere; }
  .page.guide-page .hero-description { line-height: 1.65; }
  .page.guide-page > .content-section { padding-top: 2rem; }
  .page.guide-page .content-section > section { margin-top: 2.75rem; }
  .page.guide-page .toc ul,
  .guide-auto > section.container > nav[aria-label] ul { grid-template-columns: 1fr; }
  .page.guide-page .legal-note,
  .page.guide-page .toc,
  .guide-auto > section.container > nav[aria-label] { padding: 1.1rem; }
  .guide-auto .hero { padding-block: 2.75rem 2.25rem; }
  .guide-auto .hero h1 { font-size: clamp(1.85rem, 9vw, 2.55rem); overflow-wrap: anywhere; }
  .guide-auto > section.container { padding-top: 1.5rem; }
}