/**
 * ═══════════════════════════════════════════════════════════════
 * PAGES PREMIUM - SYSTÈME DE DESIGN COMPLET
 * Version 1.0 - Septembre 2026
 * Composants réutilisables pour toutes les pages
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHIE RAFFINÉE
   ═══════════════════════════════════════════════════════════════ */

h1, .h1 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: var(--space-6) !important;
  text-wrap: balance !important;
}

h2, .h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: var(--space-5) !important;
  text-wrap: balance !important;
}

h3, .h3 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  line-height: 1.3 !important;
  margin-bottom: var(--space-4) !important;
}

h4, .h4 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
  line-height: 1.4 !important;
  margin-bottom: var(--space-4) !important;
}

h5, .h5,
h6, .h6 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
  margin-bottom: var(--space-3) !important;
}

p, .p {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  margin-bottom: var(--space-4) !important;
  max-width: 65ch !important;
}

.lead {
  font-size: 1.25rem !important;
  line-height: 1.6 !important;
  color: var(--slate-600) !important;
  font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARTES PREMIUM
   ═══════════════════════════════════════════════════════════════ */

.card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: var(--space-6) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover {
  transform: translateY(-4px) !important;
    0 20px 40px -10px rgba(0,0,0,0.1),
    0 10px 20px -5px rgba(0,0,0,0.04) !important;
  border-color: var(--accent) !important;
}

.card-interactive {
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

.card-interactive::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--accent), var(--green-guinea)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s ease !important;
}

.card-interactive:hover::before {
  transform: scaleX(1) !important;
}

.card-header {
  border-bottom: 2px solid var(--border-subtle) !important;
  padding-bottom: var(--space-4) !important;
  margin-bottom: var(--space-5) !important;
}

.card-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  color: var(--slate-900) !important;
  margin: 0 !important;
}

.card-body {
  padding: var(--space-5) 0 !important;
}

.card-footer {
  border-top: 1px solid var(--border-subtle) !important;
  padding-top: var(--space-4) !important;
  margin-top: var(--space-5) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
}

/* Variantes de cartes */
.card-featured {
  border: 2px solid var(--accent) !important;
  background: linear-gradient(135deg, var(--white) 0%, var(--slate-50) 100%) !important;
}

.card-info {
  border-left: 4px solid var(--accent) !important;
}

.card-success {
  border-left: 4px solid var(--green-guinea) !important;
}

.card-warning {
  border-left: 4px solid var(--yellow-guinea) !important;
}

.card-danger {
  border-left: 4px solid var(--red-guinea) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BOUTONS PREMIUM
   ═══════════════════════════════════════════════════════════════ */

/* Cette règle habille tout <button> du site en bouton à pastille, et chacune
   de ses déclarations porte !important : aucune spécificité ne peut la
   contredire. Un bouton qui n'est pas un bouton d'action — une vignette de
   photo, une flèche de visionneuse, une croix de fermeture — s'en trouve
   rembourré de 12 px sur 24 et arrondi à 8 px, quoi qu'en dise le composant.
   La règle prévoyait déjà deux exceptions nommées ; « .btn-icone » en est une
   troisième, générique, pour les commandes qui ne portent qu'une icône. */
.btn,
button:not(.mobile-nav-toggle):not(.search-form button):not(.btn-icone) {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  padding: var(--space-3) var(--space-6) !important;
  border-radius: 8px !important;
  border: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--blue-hover) 100%) !important;
  color: var(--white) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
}

.btn-success {
  background: linear-gradient(135deg, var(--green-guinea) 0%, var(--green-hover) 100%) !important;
  color: var(--white) !important;
}

.btn-success:hover {
  transform: translateY(-2px) !important;
}

.btn-outline {
  background: transparent !important;
  border: 2px solid var(--accent) !important;
  color: var(--accent) !important;
}

.btn-outline:hover {
  background: var(--accent) !important;
  color: var(--white) !important;
  transform: translateY(-2px) !important;
}

.btn-ghost {
  background: var(--slate-100) !important;
  color: var(--slate-700) !important;
}

.btn-ghost:hover {
  background: var(--slate-200) !important;
  transform: translateY(-1px) !important;
}

.btn-lg {
  padding: var(--space-4) var(--space-8) !important;
  font-size: 1.0625rem !important;
}

.btn-sm {
  padding: var(--space-2) var(--space-4) !important;
  font-size: 0.875rem !important;
}

/* Effet shine sur boutons */
.btn-primary::before,
.btn-success::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

.btn-primary:hover::before,
.btn-success:hover::before {
  left: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES & LABELS
   ═══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-1) !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 6px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
}

.badge-primary {
  background: var(--accent) !important;
  color: var(--white) !important;
}

.badge-success {
  background: var(--green-guinea) !important;
  color: var(--white) !important;
}

.badge-warning {
  background: var(--yellow-guinea) !important;
  color: var(--slate-900) !important;
}

.badge-danger {
  background: var(--red-guinea) !important;
  color: var(--white) !important;
}

.badge-info {
  background: var(--slate-100) !important;
  color: var(--slate-700) !important;
}

.badge-outline {
  background: transparent !important;
  border: 2px solid currentColor !important;
}

/* ═══════════════════════════════════════════════════════════════
   FORMULAIRES PREMIUM
   ═══════════════════════════════════════════════════════════════ */

.form-group {
  margin-bottom: var(--space-5) !important;
}

.form-label {
  display: block !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: var(--slate-900) !important;
  margin-bottom: var(--space-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.form-label-required::after {
  content: '*' !important;
  color: var(--red-guinea) !important;
  margin-left: var(--space-1) !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100% !important;
  padding: var(--space-3) var(--space-4) !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--slate-900) !important;
  background: var(--white) !important;
  transition: all 0.2s ease !important;
}

.form-control:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: var(--slate-300) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 4px rgba(0, 85, 164, 0.1),
    0 4px 12px rgba(0,0,0,0.1) !important;
  transform: translateY(-1px) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--slate-400) !important;
  font-weight: 400 !important;
}

.form-help {
  display: block !important;
  font-size: 0.875rem !important;
  color: var(--slate-500) !important;
  margin-top: var(--space-2) !important;
  line-height: 1.5 !important;
}

.form-error {
  display: block !important;
  font-size: 0.875rem !important;
  color: var(--red-guinea) !important;
  margin-top: var(--space-2) !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ALERTES & NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */

.alert {
  padding: var(--space-4) var(--space-5) !important;
  border-radius: 8px !important;
  border-left: 4px solid !important;
  margin-bottom: var(--space-5) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-3) !important;
}

.alert-icon {
  flex-shrink: 0 !important;
  font-size: 1.25rem !important;
}

.alert-content {
  flex: 1 !important;
}

.alert-title {
  font-weight: 600 !important;
  margin-bottom: var(--space-2) !important;
  font-size: 0.9375rem !important;
}

.alert-info {
  background: rgba(0, 85, 164, 0.05) !important;
  border-left-color: var(--accent) !important;
  color: var(--slate-900) !important;
}

.alert-success {
  background: rgba(55,103,77, 0.05) !important;
  border-left-color: var(--green-guinea) !important;
  color: var(--slate-900) !important;
}

.alert-warning {
  background: rgba(252, 209, 22, 0.1) !important;
  border-left-color: var(--yellow-guinea) !important;
  color: var(--slate-900) !important;
}

.alert-danger {
  background: rgba(206, 17, 38, 0.05) !important;
  border-left-color: var(--red-guinea) !important;
  color: var(--slate-900) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTIONS & LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.section {
  padding: clamp(24px, 3vw, 40px) 0;
}

.section-header {
  text-align: center !important;
  margin-bottom: clamp(20px, 2.5vw, 28px) !important;
}

.section-title {
  position: relative !important;
  display: inline-block !important;
  padding-bottom: var(--space-3) !important;
}

.section-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--accent), var(--green-guinea)) !important;
  border-radius: 2px !important;
}

.section-subtitle {
  max-width: 800px !important;
  margin: var(--space-5) auto 0 !important;
  color: var(--slate-600) !important;
  font-size: 1.125rem !important;
  line-height: 1.7 !important;
}

.section-alt {
  background: var(--slate-50) !important;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGES & MÉDIAS
   ═══════════════════════════════════════════════════════════════ */

/* « height: auto !important » portait sur toutes les images du site et
   l'emportait sur tout composant voulant en dimensionner une : une vignette
   carrée, une photo de couverture, une affiche de vidéo se retrouvaient
   enfermées dans leur boîte avec du vide autour, et object-fit n'avait plus
   rien à recadrer. Le cas se voyait déjà sur .gc__slide img, qui demande
   height: 100% depuis le socle sans jamais l'obtenir.

   La déclaration reste, sans « !important » : « auto » étant la valeur par
   défaut d'une image, la retirer de la surcharge ne change rien là où rien
   d'autre ne fixe de hauteur — et rend la main là où un composant en fixe
   une exprès. */
img {
  max-width: 100% !important;
  height: auto;
  border-radius: 8px !important;
}

.img-featured {
  border-radius: 12px !important;
  transition: transform 0.3s ease !important;
}

.img-featured:hover {
  transform: scale(1.02) !important;
}

.img-rounded {
  border-radius: 50% !important;
}

.img-overlay {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

.img-overlay::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.img-overlay:hover::after {
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   LISTES PREMIUM
   ═══════════════════════════════════════════════════════════════ */

.list-reset {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.list-checkmark li {
  position: relative !important;
  padding-left: var(--space-8) !important;
  margin-bottom: var(--space-3) !important;
  line-height: 1.7 !important;
}

.list-checkmark li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--space-6) !important;
  height: var(--space-6) !important;
  background: var(--green-guinea) !important;
  color: var(--white) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   TABLES PREMIUM
   ═══════════════════════════════════════════════════════════════ */

.table-wrapper {
  overflow-x: auto !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
}

table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-body) !important;
}

thead {
  background: var(--slate-50) !important;
}

thead th {
  padding: var(--space-4) var(--space-5) !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: var(--slate-900) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid var(--border) !important;
}

tbody tr {
  border-bottom: 1px solid var(--border-subtle) !important;
  transition: background 0.2s ease !important;
}

tbody tr:hover {
  background: var(--slate-50) !important;
}

tbody td {
  padding: var(--space-4) var(--space-5) !important;
  color: var(--slate-700) !important;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITAIRES
   ═══════════════════════════════════════════════════════════════ */

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.text-muted { color: var(--slate-500) !important; }
.text-primary { color: var(--accent) !important; }
.text-success { color: var(--green-guinea) !important; }
.text-danger { color: var(--red-guinea) !important; }

.bg-white { background: var(--white) !important; }
.bg-subtle { background: var(--slate-50) !important; }
.bg-primary { background: var(--accent) !important; }
.bg-success { background: var(--green-guinea) !important; }

.shadow-sm { }
.shadow-md { }
.shadow-lg { }

.rounded { border-radius: 8px !important; }
.rounded-lg { border-radius: 12px !important; }
.rounded-full { border-radius: 9999px !important; }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS RÉUTILISABLES
   ═══════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out !important;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in-up {
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Animations décalées pour listes */
.stagger-animation > * {
  animation: fadeIn 0.6s ease-out !important;
}

.stagger-animation > *:nth-child(1) { animation-delay: 0s !important; }
.stagger-animation > *:nth-child(2) { animation-delay: 0.1s !important; }
.stagger-animation > *:nth-child(3) { animation-delay: 0.2s !important; }
.stagger-animation > *:nth-child(4) { animation-delay: 0.3s !important; }
.stagger-animation > *:nth-child(5) { animation-delay: 0.4s !important; }
.stagger-animation > *:nth-child(6) { animation-delay: 0.5s !important; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .section {
    padding: 24px 0;
  }

  .card {
    padding: var(--space-5) !important;
  }

  h1, .h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  }

  h2, .h2 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
}