Relato de uma depuração: domar os caprichos do Firefox com o Bootstrap 5

@startuml
left to right direction
actor "Desenvolvedor Front-End" as Dev

rectangle "Mockup UI Bootstrap 5" {
  usecase "Corrigir o alinhamento Flexbox" as UC1
  usecase "Ajustar o padding dinamicamente (JS)" as UC2
  usecase "Controlar a tipografia (clamp())" as UC3
  usecase "Resolver o overflow do menu" as UC4
  usecase "Tornar o ícone do menu visível" as UC5
}

actor "Navegador Firefox" as Firefox

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

(UC1) ..> Firefox :
(UC2) ..> Firefox : <<extend>>
(UC3) ..> Firefox : <<extend>>
(UC4) ..> Firefox :  \n(No visible output)
(UC5) ..> Firefox : <<extend>>

note right of Firefox : Revela os problemas de compatibilidade
@enduml

@startuml
!theme plain

package "Solution Front-End" {
  component "HTML (Modelos FTL)" as HTML
  component "script.js" as JS
  component "styles.css" as CSS

  interface "Manipulação do DOM" as iDOM
  interface "Correções CSS" as iCSS
}

package "Framework" {
  component "Bootstrap 5.2" as BS
  interface "Variáveis CSS" as iVars
  interface "Classes Utilitárias" as iUtils
}

HTML ..> iDOM : necessita
JS ..> iDOM : realiza

HTML ..> iCSS : necessita
CSS ..> iCSS : realiza

CSS ..> iVars : necessita
BS ..> iVars : fornece

HTML ..> iUtils : usa
BS ..> iUtils : fornece

note right of JS
- Meça a altura da navbar
- Aplique o padding dinamicamente
end note

note right of CSS
- Utilize clamp() para a tipografia
- Reduz as margens do menu
- Sobrescreva o ícone do menu pelas variáveis
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 Solução ao problema da barra de navegação canibal
actor Utilisateur
participant "Navegador" as Browser
participant "script.js" as JS
participant "DOM" as DOM

Utilisateur -> Browser: carrega a página
activate Browser

Browser -> JS: Desencadeia o evento 'DOMContentLoaded'
activate JS

JS -> DOM: querySelector('.navbar.fixed-top')
activate DOM
DOM --> JS: Retorne o elemento Navbar
deactivate DOM

JS -> DOM: querySelector('.hero-section')
activate DOM
DOM --> JS: Retorna o elemento Hero
deactivate DOM

JS -> DOM: navbar.offsetHeight
activate DOM
DOM --> JS: Retorna a altura calculada (ex: 83px)
deactivate DOM

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

deactivate JS
deactivate Browser

... Plus tard ...

Utilisateur -> Browser: Redimensione a janela
activate Browser
Browser -> JS: Dispara o evento 'resize'
activate JS
JS -> JS: Execute novamente adjustHeroPadding()
note right of JS: O processo de medição e\naplicação do padding repete-se.
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 : "Número Mágico" (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 "números mágicos"
+++ Maîtriser la typographie fluide
+++ Personnaliser via les variables CSS
@endmindmap