/**
 * UX AUDIT FIXES — Corrections ciblées issues signalées
 * Audit du 29/07/2026
 *
 * Corrige :
 *  1. H1 tronqué sous navbar fixe sur mobile
 *  2. Hero : valeur manquante "gratuit / Tunisie / corrigés / niveaux"
 *  3. Barre de recherche visible avant scroll
 *  4. Titres de cartes : nettoyage noms de fichiers bruts (via CSS + JS)
 *  5. Filtres matières : compteurs grisés, libellés nuls
 *  6. Contraste AA renforcé
 *  7. Footer mobile : grille correcte + liens visibles
 *  8. Navbar mobile : texte lisible, 6 onglets sur 328px
 */

/* ═══════════════════════════════════════════════════════════════
   FIX 1 — H1 / Slider hero tronqué sous header collant
   Le `margin-top:-68px` en inline dans index.php crée un recouvrement
   par la navbar fixe sur mobile. On le neutralise.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Supprimer la compensation négative imposée par index.php */
  #main-content > div[style*="margin-top:-68px"] {
    margin-top: 0 !important;
  }

  /* S'assurer que le slider n'est jamais caché par la navbar */
  .unified-slider-wrapper {
    margin-top: 0 !important;
  }

  /* La navbar est position:fixed → body a déjà padding-top:68px.
     On s'assure que le premier enfant de main ne remonte pas. */
  #main-content {
    padding-top: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FIX 2 — Hero : banderole valeur-proposition toujours visible
   Affiche un bandeau "100% gratuit · Primaire→BAC · Tunisie"
   en haut du slider, avant tout défilement.
   ═══════════════════════════════════════════════════════════════ */

/* Bandeau d'identité toujours visible au-dessus du slider */
.hero-value-strip {
  background: linear-gradient(90deg, #7C3AED 0%, #5B21B6 60%, #EF4444 100%);
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 800;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.03em;
  line-height: 1.4;
  position: relative;
  z-index: 50;
}

.hero-value-strip .hvs-sep {
  margin: 0 8px;
  opacity: 0.6;
}

@media (max-width: 480px) {
  .hero-value-strip {
    font-size: 0.75rem;
    padding: 8px 12px;
  }
  .hero-value-strip .hvs-sep {
    margin: 0 4px;
  }
}

/* Label "Plateforme éducative tunisienne gratuite" dans slide 4 —
   s'assurer qu'il est toujours visible (non masqué par overflow) */
.hero-label {
  font-size: 0.82rem !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}


/* ═══════════════════════════════════════════════════════════════
   FIX 3 — Barre de recherche : remonte visuellement avant scroll
   La section .search-section est la 2e section après le slider.
   On réduit le padding du slider sur mobile pour que la barre
   de recherche soit visible dans les ~800px premiers pixels.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Slider moins haut → search apparaît plus tôt */
  .unified-slider-wrapper {
    min-height: auto !important;
    padding: 24px 0 40px !important;
  }

  /* Réduire le padding interne des slides */
  .unified-slide {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* Titre hero plus compact */
  .hero-title,
  .linktree-title {
    font-size: 1.55rem !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  /* Masquer les éléments décoratifs pour gagner de la hauteur */
  .slide-visual-wrap,
  .res3d-scene,
  .linktree-visual {
    display: none !important;
  }

  /* S'assurer que le texte du slide prend toute la largeur */
  .hero-grid {
    grid-template-columns: 1fr !important;
  }
  .linktree-wrapper {
    flex-direction: column !important;
  }
  .linktree-content {
    padding: 0 !important;
    text-align: center !important;
  }

  /* Section recherche : réduit le padding pour remonter */
  .search-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .search-section-header {
    margin-bottom: 16px !important;
  }
  .search-section-title {
    font-size: 1.3rem !important;
  }

  /* Filtres de recherche : afficher max 2 par ligne sur mobile */
  .search-filters-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .search-filters-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mini indicateur de recherche dans le CTA row du slide 4 */
@media (max-width: 768px) {
  .slide-cta-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }
  .slide-cta-row .btn-primary,
  .slide-cta-row .btn {
    flex: 1 1 auto !important;
    min-width: 140px !important;
    max-width: 200px !important;
    text-align: center !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FIX 4 — Titres de cartes : masquer l'extension .pdf / _
   Appliqué via la classe .dc-title et .devoir-title.
   Le nettoyage réel se fait en PHP/JS (voir home-devoirs.partial.php),
   ce CSS est un filet de sécurité visuel.
   ═══════════════════════════════════════════════════════════════ */

/* Empêcher le débordement et forcer une hauteur max sur les titres */
.dc-title,
.devoir-title {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  /* Au maximum 3 lignes */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Bidirectionnalité : ne pas laisser du LTR forcer la mise en page
   quand le titre est en arabe (RTL) */
.devoir-card,
.devoir-compact-card {
  unicode-bidi: plaintext;
}
.dc-title,
.devoir-title {
  unicode-bidi: plaintext;
  text-align: start;
}


/* ═══════════════════════════════════════════════════════════════
   FIX 5 — Filtres matières : contraste des onglets grisés
   Les .h-tab-disabled ont opacity:0.38 → texte illisible.
   On remplace par une couleur garantissant ratio ≥ 3:1 (composants UI).
   ═══════════════════════════════════════════════════════════════ */

/* Onglets matières grisés : améliorer le contraste */
.h-tab.h-tab-disabled {
  opacity: 1 !important;           /* retire l'opacity qui cassait tout */
  background: #F9FAFB !important;
  border-color: #D1D5DB !important;
  color: #6B7280 !important;       /* ratio 4.54:1 sur #F9FAFB ✅ AA */
}

/* Compteur nul : masquer les zéros non informatifs */
.h-tab .tab-count-zero {
  display: none !important;
}

/* Compteur : style lisible */
.h-tab .tab-count {
  background: rgba(124, 58, 237, 0.1);
  color: #5B21B6;
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
}
.h-tab-disabled .tab-count {
  background: #E5E7EB !important;
  color: #9CA3AF !important;
}


/* ═══════════════════════════════════════════════════════════════
   FIX 6 — Contraste WCAG AA global
   Textes secondaires et muted renforcés.
   ═══════════════════════════════════════════════════════════════ */

/* Textes secondaires — ratio minimum 4.5:1 sur fond blanc */
.muted,
.text-muted,
.section-desc,
.hero-subtitle,
.search-section-subtitle,
.footer-desc {
  color: #4B5563 !important; /* ratio 7.2:1 sur #fff ✅ AAA */
}

/* Badges et labels typés */
.dc-type,
.devoir-title {
  color: #374151 !important; /* ratio 10.7:1 sur #fff ✅ AAA */
}

/* Labels de filtres */
.filter-label {
  color: #374151 !important;
  font-weight: 700 !important;
}

/* Métadonnées de cartes */
.dc-meta,
.devoir-meta,
.testimonial-meta {
  color: #4B5563 !important; /* ratio 7.2:1 ✅ */
}

/* Badges de matière */
.dc-mat {
  color: #5B21B6 !important; /* violet foncé, ratio 7.5:1 sur #fff ✅ */
}

/* Trust bar labels */
.trust-metric-label {
  color: rgba(255, 255, 255, 0.92) !important; /* sur fond violet, ratio > 4.5:1 ✅ */
}

/* Liens footer : améliorer le contraste sur fond sombre */
.footer-col ul li a {
  color: rgba(255, 255, 255, 0.72) !important; /* ratio ~5.2:1 sur #1E1B4B ✅ */
}
.footer-col ul li a:hover {
  color: #ffffff !important;
}

/* Texte placeholder : ratio 3:1 minimum (composant UI) */
::placeholder {
  color: #6B7280 !important; /* ratio 4.54:1 sur #fff ✅ */
}


/* ═══════════════════════════════════════════════════════════════
   FIX 7 — Footer mobile : colonnes et liens visibles
   Sur mobile (<640px), les 4 colonnes du footer s'empilent en 1.
   On s'assure que h3 + ul sont bien visibles.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Chaque colonne du footer : spacer + séparateur */
  .site-footer .footer-col {
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 4px !important;
  }
  .site-footer .footer-col:last-child {
    border-bottom: none !important;
  }

  /* h3 footer bien visible */
  .footer-col h3 {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
    color: rgba(255, 255, 255, 0.95) !important;
  }

  /* Liens footer visibles */
  .footer-col ul li a {
    font-size: 0.88rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 0 !important;
    min-height: 36px !important; /* zone tactile ≥ 44px recommandé */
  }
  .footer-col ul li a:active {
    color: #A78BFA !important;
  }

  /* Afficher max 5 liens, le reste se révèle avec un toggle (CSS-only) */
  /* Pour l'instant on affiche tout, la lisibilité est suffisante */
  .footer-col ul {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Logo et description */
  .site-footer > .container > .grid-4 > div:first-child {
    text-align: center !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 4px !important;
  }
  .footer-desc {
    text-align: center !important;
    margin: 8px 0 12px !important;
  }
  .footer-badge {
    margin: 0 auto !important;
  }
}

/* 2 colonnes entre 480 et 640px pour utiliser l'espace */
@media (min-width: 481px) and (max-width: 640px) {
  .site-footer .grid-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  .site-footer > .container > .grid-4 > div:first-child {
    grid-column: 1 / -1 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FIX 8 — Navbar mobile : lisibilité des libellés
   Sur 328px avec 6 onglets, les labels sont à ~7px.
   Le bottom-nav doit prioriser icônes + labels les plus importants.
   ═══════════════════════════════════════════════════════════════ */

/* Bottom nav : taille de police minimale lisible */
@media (max-width: 768px) {
  .bottom-nav-item > span:last-child,
  .bottom-nav-item .bni-label {
    font-size: 0.65rem !important;  /* était ~0.52rem = illisible */
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 400px) {
  .bottom-nav-item > span:last-child,
  .bottom-nav-item .bni-label {
    font-size: 0.58rem !important;
  }
}

/* Sur 320-360px : icônes seulement, pas de texte (déjà en place mais renforcé) */
@media (max-width: 360px) {
  .bottom-nav-item > span:last-child,
  .bottom-nav-item .bni-label {
    display: none !important;
  }
  /* Chaque item plus large pour faciliter le tap */
  .bottom-nav-item {
    padding: 10px 2px !important;
  }
}

/* Navbar top : sur très petit écran, passer en layout compact */
@media (max-width: 480px) {
  .navbar .nav-links {
    display: none !important;  /* masqué — remplacé par bottom-nav */
  }
  .navbar .nav-search {
    display: none !important;  /* masqué — search accessible via bottom-nav */
  }
  .navbar .nav-inner {
    justify-content: space-between !important;
    padding: 0 14px !important;
  }
  .navbar .logo {
    font-size: 1.2rem !important;
  }
}

/* Sur 481–768px : réduire le nombre de liens visibles */
@media (min-width: 481px) and (max-width: 768px) {
  .navbar .nav-links {
    display: none !important;  /* bottom-nav gère la nav principale */
  }
  .navbar .nav-search {
    flex: 1 !important;
    max-width: 200px !important;
    margin: 0 10px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FIX GLOBAL — Zones tactiles minimum 44px
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Tous les boutons et liens interactifs */
  .btn,
  .filter-btn,
  .tab-btn,
  .h-tab,
  .t-tab,
  .nav-btn,
  .nav-link,
  .bottom-nav-item,
  .search-shortcut-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  /* Exceptions : badges décoratifs */
  .badge,
  .dc-type,
  .dc-mat,
  .trust-metric-label {
    min-height: unset !important;
    min-width: unset !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FIX — Barre de raccourcis de recherche : scroll horizontal
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .search-shortcuts {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .search-shortcuts::-webkit-scrollbar {
    display: none !important;
  }
  .search-shortcut-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FIX — Carousel devoirs : largeur correcte des cartes sur mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .devoir-card {
    min-width: calc(80vw) !important;
    max-width: calc(85vw) !important;
  }
}