/* ============================================================
   UAMDD - Correctifs globaux : LISIBILITÉ + RESPONSIVE
   Chargé sur toutes les pages via js/ui-enhance.js
   ============================================================ */

/* ---------- 1. LISIBILITÉ / CONTRASTE ---------- */

/* Les variables de gris ne servent qu'au TEXTE dans ce projet → assombries
   (améliore la lisibilité partout où elles sont utilisées) */
:root {
  --gray-600: #4f5867;   /* était #6c757d (trop pâle) */
  --gray-500: #6b7280;   /* était #adb5bd (trop pâle) */
}

/* Texte secondaire trop pâle → assombri (AA sur fond clair) */
.text-muted,
small.text-muted,
.section-desc,
.section-subtitle,
.hero-subtitle,
.text-secondary,
.stat-label,
.course-description,
.formation-description,
.detail-item { color: #475467 !important; }

/* Titres de cartes : bien sombres */
.formation-title,
.course-title,
.card-title { color: #1f2937 !important; }

/* Catégorie en blanc posée sur l'image : ombre pour rester lisible */
.formation-category { text-shadow: 0 1px 4px rgba(0,0,0,.65); }
/* Étoiles de notation un peu plus contrastées */
.formation-rating { color: #e0990a !important; }

/* Page Formations - contraste renforcé (cartes + filtres) */
.formation-description, .detail-item, .formation-meta,
.formation-level, .formation-duration, .result-count { color: #374151 !important; }
.filter-title, .filter-section h5, .sort-label { color: #1f2937 !important; }
.form-check-label, .filter-section label { color: #2d3540 !important; }

/* En-tête du catalogue : le fond a été passé en clair, mais le texte était
   resté BLANC (conçu pour l'ancien fond rouge) → on le repasse en sombre. */
.catalogue-header { color: #1f2937 !important; }
.catalogue-header .lead { color: #475467 !important; }
.catalogue-header .breadcrumb-item a { color: #DA0434 !important; }
.catalogue-header .breadcrumb-item.active { color: #374151 !important; }
.catalogue-header .breadcrumb-item + .breadcrumb-item::before { color: #9aa0a6 !important; }
.catalogue-header .cta-box {
  background: #ffffff !important;
  border: 1px solid #e5e8ee !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  backdrop-filter: none !important;
}
.catalogue-header .cta-box h5 { color: #1f2937 !important; }
.catalogue-header .cta-box p  { color: #475467 !important; }

/* Footer sombre : textes trop transparents → remontés */
.u-footer-text        { color: rgba(255,255,255,.85) !important; }
.u-footer-link        { color: rgba(255,255,255,.74) !important; }
.u-footer-link:hover  { color: #ffffff !important; }
.u-footer-title       { color: #ffffff !important; }
.u-footer-social a    { color: rgba(255,255,255,.85) !important; }
.u-footer-bottom p,
.u-footer-bottom a    { color: rgba(255,255,255,.6) !important; }
.newsletter-row input::placeholder { color: rgba(255,255,255,.55) !important; }

/* Surcharge des gris clairs écrits EN STYLE INLINE (toutes les pages).
   Seul un sélecteur d'attribut + !important peut battre un style inline. */
[style*="#9ca3af"], [style*="#adb5bd"], [style*="#ced4da"],
[style*="#9CA3AF"], [style*="#ADB5BD"] { color: #5a6473 !important; }
[style*="#6c757d"], [style*="#6C757D"] { color: #475467 !important; }

/* Placeholders de formulaires plus visibles */
input::placeholder, textarea::placeholder { color: #8a93a0; opacity: 1; }

/* Liens dans les dropdowns / nav : contraste suffisant */
.dropdown-item { color: #1f2937; }

/* Badges/pills clairs : garantir un texte lisible */
.badge.bg-light, .badge.bg-warning { color: #1f2937 !important; }

/* ---------- 2. RESPONSIVE - SOCLE UNIVERSEL ---------- */
/* (s'applique même aux pages qui ne chargent pas responsive.css) */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe, canvas, svg { max-width: 100%; }
img, video { height: auto; }

/* Les tableaux larges deviennent défilables horizontalement */
.table-responsive, .table-wrap { -webkit-overflow-scrolling: touch; }

@media (max-width: 991px) {
  .container, .container-lg, .container-xl { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 767px) {
  h1, .h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  h2, .h2 { font-size: clamp(1.3rem, 5vw, 1.6rem) !important; }
  h3, .h3 { font-size: 1.2rem !important; }
  .display-1,.display-2,.display-3,.display-4 { font-size: clamp(1.8rem,7vw,2.4rem) !important; }
  .lead { font-size: 1rem !important; }

  /* Grilles Bootstrap qui ne passent pas en colonne : forcer l'empilement doux */
  .row.flex-nowrap { flex-wrap: wrap !important; }

  /* Boutons pleine largeur dans les groupes serrés */
  .btn-block-sm { width: 100%; }

  /* Tables génériques : compactes + scroll si trop larges */
  table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 575px) {
  .container, .container-fluid { padding-left: .9rem; padding-right: .9rem; }
  .card, .e-card, .section-card { border-radius: 12px; }
  .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

/* Cibles tactiles confortables */
@media (hover: none) and (pointer: coarse) {
  .btn, button, .nav-link { min-height: 42px; }
}

/* Hero accueil : garantir un texte lisible sur TOUTES les tailles
   (corrige le conflit de styles : titre sombre posé sur un voile sombre) */
.hero-overlay {
  background: linear-gradient(135deg, rgba(18,24,38,.84) 0%, rgba(18,24,38,.64) 55%, rgba(120,8,30,.5) 100%) !important;
}
/* Navbar de l'accueil AU REPOS (sur le hero) : liens en blanc lisibles
   (le CSS d'origine force #495057!important, illisible sur la bande sombre) */
#navbar:not(.scrolled) .nav-link { color: rgba(255,255,255,.96) !important; }
#navbar:not(.scrolled) .nav-link:hover,
#navbar:not(.scrolled) .nav-link.active { color: #fff !important; background: rgba(255,255,255,.15) !important; }
#navbar:not(.scrolled) .brand-sub { color: rgba(255,255,255,.8) !important; }
#navbar:not(.scrolled) .dropdown-toggle::after { color: #fff; }

/* Tout le texte du hero en BLANC (titre, accents rouge/bleu, description, stats) */
.hero-title, .hero-title .red, .hero-title .blue, .hero-title span, .hero-title b {
  color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.hero-desc { color: #ffffff !important; }
.hero-badge { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.32) !important; color: #fff !important; }
.hero-stat-num, .hero-stat-num span { color: #fff !important; }
.hero-stat-label { color: rgba(255,255,255,.85) !important; }

/* ---------- 3. BOUTON FLOTTANT « ESPACE COURS » ---------- */
.espace-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 1200;
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, #005A9C, #003d6b);
  color: #fff !important; text-decoration: none;
  padding: .7rem 1.1rem; border-radius: 50px;
  font-weight: 600; font-size: .9rem; font-family: inherit;
  box-shadow: 0 6px 22px rgba(0,90,156,.45);
  transition: transform .15s, box-shadow .15s; border: none; cursor: pointer;
}
.espace-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,90,156,.55); color:#fff !important; }
.espace-fab .efab-ico { font-size: 1.05rem; line-height: 1; }
@media (max-width: 575px) {
  .espace-fab { right: 12px; bottom: 12px; padding: .65rem .8rem; }
  .espace-fab .efab-txt { display: none; }            /* icône seule sur petit écran */
  .espace-fab { width: 48px; height: 48px; justify-content: center; border-radius: 50%; }
}