डिबगिंग की कहानी: बूटस्ट्रैप 5 के साथ फ़ायरफ़ॉक्स की अजीब हरकतों को काबू करना

@startuml
left to right direction
actor "फ़्रंट-एंड डेवलपर" as Dev

rectangle "बूटस्ट्रैप 5 UI मॉकअप" {
  usecase "फ़्लेक्सबॉक्स संरेखण को ठीक करें" 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 "Corrections CSS" as iCSS
}

package "फ़्रेमवर्क" {
  component "बूटस्ट्रैप 5.2" as BS
  interface "Variables 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