داستان یک اشکال‌زدایی : تسخیر أهواء فایرفاکس با Bootstrap 5

@startuml
left to right direction
actor "توسعه‌دهنده فرونت‌اند" as Dev

rectangle "نمونهٔ UI Bootstrap 5" {
  usecase "ترازمان Flexbox را اصلاح کنید" as UC1
  usecase "تنظیم پدینگ به صورت دینامیک (JS)" as UC2
  usecase "کنترل حروفچینی (clamp())" as UC3
  usecase "حل ریزش منو" as UC4
  usecase "مرئی کردن آیکن منو" as UC5
}

actor "مرورگر فایرفاکس" as Firefox

Dev -- (UC1)
Dev -- (UC2)
Dev -- (UC3)
Dev -- (UC4)
Dev -- (UC5)

(UC1) ..> Firefox : <<extend>>
(UC2) ..> Firefox : <<extend>>
(UC3) ..> Firefox : <<extend>>
(UC4) ..> Firefox : <<extend>>
(UC5) ..> Firefox : <<extend>>

note right of Firefox : Révèle les problèmes de compatibilité
@enduml

@startuml
!theme plain

package "حل فرانت‌اند" {
  component "HTML (قالب‌های FTL)" as HTML
  component "script.js" as JS
  component "styles.css" as CSS

  interface "کاری با DOM" as iDOM
  interface "اصلاحات CSS" as iCSS
}

package "چارچوب" {
  component "Bootstrap 5.2" as BS
  interface "متغیرهای CSS" as iVars
  interface "کلاس‌های ابزار" as iUtils
}

HTML ..> iDOM : nécessite
JS ..> iDOM : réalise

HTML ..> iCSS : nécessite
CSS ..> iCSS : réalise

CSS ..> iVars : nécessite
BS ..> iVars : fournit

HTML ..> iUtils : utilise
BS ..> iUtils : fournit

note right of JS
  - Mesure la hauteur de la navbar
  - Applique le padding dynamiquement
end note

note right of CSS
  - Utilise clamp() pour la typographie
  - Réduit les marges du menu
  - Surcharge l'icône du menu via les variables
end note

@enduml

<section id="home" class="hero-section">
    <div class="container">
        <!-- Cette ligne est la clé du problème -->
        <div class="row align-items-center min-vh-100">
            <div class="col-lg-6">
                <!-- Contenu de gauche -->
            </div>
            <div class="col-lg-6">
                <!-- Carte de droite -->
            </div>
        </div>
    </div>
</section>

<section id="home" class="hero-section">
    <div class="container h-100">
        <div class="row align-items-center min-vh-100 h-100">
            <!-- ... -->
        </div>
    </div>
</section>

document.addEventListener('DOMContentLoaded', function() {
    function adjustHeroPadding() {
        const navbar = document.querySelector('.navbar.fixed-top');
        const heroSection = document.querySelector('.hero-section');

        if (navbar && heroSection) {
            const navbarHeight = navbar.offsetHeight;
            heroSection.style.paddingTop = navbarHeight + 'px';
        }
    }

    // Ajuster au chargement et au redimensionnement
    adjustHeroPadding();
    window.addEventListener('resize', adjustHeroPadding);
});

@startuml
title حل مشکل نوار ناوبری قفسه‌کش
actor Utilisateur
participant "مرورگر" as Browser
participant "script.js" as JS
participant "DOM" as DOM

Utilisateur -> Browser: Charge la page
activate Browser

Browser -> JS: Déclenche l'événement 'DOMContentLoaded'
activate JS

JS -> DOM: querySelector('.navbar.fixed-top')
activate DOM
DOM --> JS: Retourne l'élément Navbar
deactivate DOM

JS -> DOM: querySelector('.hero-section')
activate DOM
DOM --> JS: Retourne l'élément Hero
deactivate DOM

JS -> DOM: navbar.offsetHeight
activate DOM
DOM --> JS: Retourne la hauteur calculée (ex: 83px)
deactivate DOM

JS -> DOM: heroSection.style.paddingTop = "83px"
activate DOM
deactivate DOM

deactivate JS
deactivate Browser

... Plus tard ...

Utilisateur -> Browser: Redimensionne la fenêtre
activate Browser
Browser -> JS: Déclenche l'événement 'resize'
activate JS
JS -> JS: Exécute à nouveau adjustHeroPadding()
note right of JS: Le processus de mesure et\nd'application du padding se répète.
deactivate JS
deactivate Browser

@enduml

.hero-content h1 {
    color: var(--text-primary);
    line-height: 1.2;
    /*
       Min: 2rem
       Préférée: s'adapte à la vue
       Max: 2.5rem (40px)
    */
    font-size: clamp(2rem, 1.2rem + 1.5vw, 2.5rem);
}

/* La version finale, légèrement plus compacte */
.navbar-nav .nav-link {
    font-size: 0.9rem; /* 90% de la taille de base */
    color: var(--text-primary) !important;
    font-weight: 500;
    margin: 0 0.2rem;
    padding: 0.5rem 0.5rem !important;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

/* ======================
   Fix pour l'icône du menu Burger (Blanc)
   ====================== */
[data-bs-theme="dark"] .navbar-toggler-icon,
[data-bs-theme="high-contrast"] .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@startmindmap
+ Débogage Cross-Browser : Bootstrap 5
++ **Conflit :** Chrome (Blink) vs Firefox (Gecko)
++ **Problème 1 : Alignement Hero**
+++ Cause : Hauteur implicite
+++ Solution : Classe `.h-100`
++ **Problème 2 : Navbar Cannibale**
+++ Cause : "عدد جادویی" (padding fixe)
+++ Solution : JS `offsetHeight`
++ **Problème 3 : Typographie Géante**
+++ Cause : Rendu des `rem`
+++ Solution : CSS `clamp()`
++ **Problème 4 : Menu qui déborde**
+++ Cause : Calcul de largeur sub-pixel
+++ Solution : Réduction des marges/paddings
++ **Problème 5 : Icône Invisible**
+++ Cause : SVG non adaptable au thème
+++ Solution : Surcharge de variable CSS
++ **Leçons Clés**
+++ Firefox force un code robuste
+++ Fuir les "اعداد جادویی"
+++ Maîtriser la typographie fluide
+++ Personnaliser via les variables CSS
@endmindmap