调试日志：利用 Bootstrap 5 控制 Firefox 的反复无常

@startuml
left to right direction
actor "前端开发者" as Dev

rectangle "Bootstrap 5 UI原型" {
  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 : (empty)
(UC2) ..> Firefox : <<extend>>
(UC3) ..> Firefox : (empty)
(UC4) ..> Firefox : <<extend>>
(UC5) ..> Firefox : <<extend>>

note right of Firefox : 揭示兼容性问题
@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 : 需求
JS ..> iDOM : 实现

HTML ..> iCSS : 需要
CSS ..> iCSS : 实现

CSS ..> iVars : 需要
BS ..> iVars : 提供

HTML ..> iUtils : 使用
BS ..> iUtils : 提供

note right of JS
- 测量导航栏的高度
- 动态应用填充
end note

note right of CSS
- 使用 clamp() 进行排版
- 减少菜单的边距
- 通过变量覆盖菜单图标
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: 加载页面
activate Browser

Browser -> JS: 触发事件 'DOMContentLoaded'
activate JS

JS -> DOM: querySelector('.navbar.fixed-top')
activate DOM
DOM --> JS: 返回Navbar元素
deactivate DOM

JS -> DOM: querySelector('.hero-section')
activate DOM
DOM --> JS: 返回Hero元素
deactivate DOM

JS -> DOM: navbar.offsetHeight
activate DOM
DOM --> JS: 返回计算的高度（例如：83px）
deactivate DOM

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

deactivate JS
deactivate Browser

... Plus tard ...

Utilisateur -> Browser: 调整窗口大小
activate Browser
Browser -> JS: 触发 'resize' 事件
activate JS
JS -> JS: 再次执行 adjustHeroPadding()
note right of JS: 测量过程和\n填充的应用会重复。
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