История отладки: укрощение капризов Firefox с Bootstrap 5

@startuml
left to right direction
actor "Frontend-разработчик" 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 "Браузер Firefox" 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 "ДОМ" 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