/* ==================================================================================
   PATCH CSS AMÉLIORÉ - CORRECTIONS PARTIE INFÉRIEURE
   Version 3.0 - Focus sur FAQ, Contact et gradients
   21 novembre 2025
   ================================================================================== */

/* ==================================================================================
   IMPORT DU PATCH EXISTANT
   ================================================================================== */
@import url('style-patch.css');

/* ==================================================================================
   MODE SOMBRE - CORRECTIONS SPÉCIFIQUES PARTIE INFÉRIEURE
   ================================================================================== */

@media (prefers-color-scheme: dark) {
  
  /* ========================================
     SECTION FAQ - GRADIENT AMÉLIORÉ
     ======================================== */
  .faq {
    /* Remplace le gradient monotone par un gradient plus subtil et lisible */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    position: relative;
  }
  
  /* Overlay pour améliorer la lisibilité */
  .faq::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 0;
  }
  
  .faq__content {
    position: relative;
    z-index: 1;
  }
  
  /* Items FAQ avec meilleur contraste */
  .faq__item {
    background-color: rgba(45, 45, 65, 0.95) !important;
    border: 1px solid rgba(100, 100, 120, 0.3) !important;
    backdrop-filter: blur(10px);
  }
  
  .faq__item:hover {
    background-color: rgba(55, 55, 75, 0.98) !important;
    border-color: rgba(93, 217, 233, 0.6) !important;
    box-shadow: 0 8px 24px rgba(93, 217, 233, 0.15) !important;
  }
  
  .faq__question {
    color: #f0f0f0 !important;
    font-weight: 600;
  }
  
  .faq__answer {
    color: #c5c5c5 !important;
    line-height: 1.6;
  }
  
  .faq__answer strong {
    color: #ffffff !important;
    font-weight: 600;
  }
  
  /* ========================================
     SECTION CONTACT - GRADIENT VIOLET ADAPTÉ
     ======================================== */
  .contact {
    background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%) !important;
  }
  
  /* CTA Box avec gradient violet adapté au mode sombre */
  .contact__cta {
    /* Gradient violet/purple adapté pour le mode sombre */
    background: linear-gradient(135deg, #4c3a6e 0%, #5a3f7a 100%) !important;
    border: 1px solid rgba(140, 100, 180, 0.3) !important;
    position: relative;
    overflow: hidden;
  }
  
  /* Effet de brillance subtil pour le CTA */
  .contact__cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(255, 255, 255, 0.05), 
      transparent
    );
    transition: left 0.5s ease;
  }
  
  .contact__cta:hover::before {
    left: 100%;
  }
  
  .contact__cta h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .contact__cta p {
    color: rgba(230, 230, 240, 0.95) !important;
  }
  
  .contact__alternative {
    border-top-color: rgba(180, 160, 200, 0.3) !important;
  }
  
  .contact__alternative p {
    color: rgba(210, 210, 220, 0.9) !important;
  }
  
  /* Info box */
  .contact__info {
    background-color: rgba(40, 40, 55, 0.5) !important;
    border: 1px solid rgba(80, 80, 100, 0.3) !important;
    padding: var(--space-24);
    border-radius: 12px;
  }
  
  .contact__info h3 {
    color: #e0e0e0 !important;
  }
  
  .contact__list li {
    color: #b0b0b0 !important;
  }
  
  .contact__list a {
    color: rgba(110, 200, 220, 1) !important;
  }
  
  .contact__list a:hover {
    color: rgba(130, 220, 240, 1) !important;
    text-decoration: underline;
  }
  
  /* ========================================
     BOUTONS ET LIENS
     ======================================== */
  
  /* Boutons primaires dans les sections colorées */
  .faq .btn--primary,
  .contact .btn--primary,
  .cta-button {
    background: linear-gradient(135deg, 
      rgba(93, 217, 233, 1) 0%, 
      rgba(80, 180, 195, 1) 100%
    ) !important;
    color: #1a1a1a !important;
    font-weight: 600;
    border: 1px solid rgba(93, 217, 233, 0.3);
    box-shadow: 0 4px 12px rgba(93, 217, 233, 0.2);
  }
  
  .faq .btn--primary:hover,
  .contact .btn--primary:hover,
  .cta-button:hover {
    background: linear-gradient(135deg, 
      rgba(110, 230, 245, 1) 0%, 
      rgba(93, 217, 233, 1) 100%
    ) !important;
    box-shadow: 0 6px 20px rgba(93, 217, 233, 0.3);
    transform: translateY(-2px);
  }
  
  /* ========================================
     SECTIONS JOURNEY & SESSIONS
     ======================================== */
  .journey {
    background: linear-gradient(135deg, #1a1a1a 0%, #252530 100%) !important;
  }
  
  .journey__story {
    background-color: rgba(35, 35, 45, 0.8) !important;
    border: 1px solid rgba(70, 70, 85, 0.3) !important;
  }
  
  .sessions {
    background-color: #1e1e2a !important;
  }
  
  .sessions .detail-card {
    background-color: rgba(40, 40, 55, 0.9) !important;
    border-color: rgba(80, 80, 100, 0.3) !important;
  }
  
  /* ========================================
     AMÉLIORATION DES FORMULAIRES
     ======================================== */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    background-color: #2a2a3a !important;
    color: #e0e0e0 !important;
    border: 1px solid #4a4a5a !important;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    background-color: #323242 !important;
    border-color: rgba(93, 217, 233, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(93, 217, 233, 0.1) !important;
    outline: none !important;
  }
  
  input::placeholder,
  textarea::placeholder {
    color: #888 !important;
    opacity: 0.7;
  }
  
  /* Labels */
  label {
    color: #d0d0d0 !important;
  }
  
  /* ========================================
     CORRECTIONS SUPPLÉMENTAIRES
     ======================================== */
  
  /* Assure que tout le texte dans les sections gradient est lisible */
  .faq p,
  .faq li,
  .faq span:not(.step__number),
  .contact p,
  .contact li,
  .contact span:not(.step__number),
  .journey p,
  .journey li,
  .sessions p,
  .sessions li {
    color: #c0c0c0 !important;
  }
  
  /* Empêche les images d'être trop sombres */
  .journey img,
  .sessions img,
  .contact img {
    opacity: 0.85;
    filter: brightness(0.9);
  }
  
  /* Steps avec meilleur contraste */
  .step__number {
    background: linear-gradient(135deg, 
      rgba(93, 217, 233, 1) 0%, 
      rgba(80, 180, 195, 1) 100%
    ) !important;
    color: #1a1a1a !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(93, 217, 233, 0.3);
  }
  
  .step__text {
    color: #d0d0d0 !important;
  }
  
}

/* ========================================
   SUPPORT PRÉFÉRENCES SYSTÈME NO-PREFERENCE
   ======================================== */
@media (prefers-color-scheme: no-preference) {
  /* Applique le mode clair par défaut */
  .faq {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
  }
  
  .contact__cta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  }
}

/* ========================================
   ACCESSIBILITÉ - FOCUS VISIBLE
   ======================================== */
*:focus-visible {
  outline: 2px solid rgba(93, 217, 233, 0.8) !important;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  *:focus-visible {
    outline-color: rgba(110, 230, 245, 0.9) !important;
  }
}

/* ========================================
   ANIMATIONS SUBTILES
   ======================================== */
@media (prefers-reduced-motion: no-preference) {
  .faq__item,
  .contact__cta,
  .btn--primary,
  .cta-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ==================================================================================
   FIN DU PATCH CSS v3.0
   
   NOTES D'IMPLÉMENTATION :
   1. Importez ce fichier APRÈS style.css et style-patch.css
   2. L'ordre d'import doit être : style.css → style-patch.css → style-patch-v3.css
   3. Testez avec les DevTools en mode sombre pour vérifier les contrastes
   4. Ratio de contraste minimum WCAG AA : 4.5:1 pour texte normal
   ================================================================================== */