:root {
    --swiss-red: #e60000;
    --dark-blue: #020817;
    --nav-height: 65px;
    --sf-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 992px) {
    :root { --nav-height: 72px; }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 20px);
    /* overflow-x: clip empêche le débordement sans créer de scroll-container.
       Contrairement à hidden, clip ne gonfle pas le layout viewport —
       c'est ce qui faisait sortir le hamburger de l'écran. */
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    max-width: 100vw;
    width: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: white;
    color: var(--dark-blue);
    overflow-x: clip;
    overscroll-behavior-x: none;
    -ms-overflow-style: none;
    /* NB : on NE met PAS touch-action: pan-y ici — sur certains navigateurs
       mobiles cela pouvait gêner les taps et bloquait le zoom (accessibilité).
       Le débordement horizontal est déjà empêché par overflow-x: clip. */
    max-width: 100vw;
    width: 100%;
}

/* Empêcher le débordement horizontal SANS casser le centrage du conteneur.
   NB : on ne force PLUS .container à max-width:100% — cela annulait les
   largeurs max responsive de Bootstrap et étalait le contenu bord à bord. */
.row, section, header, footer, nav {
    max-width: 100%;
    box-sizing: border-box;
}
/* Le conteneur garde les largeurs max centrées de Bootstrap ; on ajoute juste
   un petit padding latéral qui tient compte des encoches (safe-area). */
.container { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
/* On laisse Bootstrap gérer les gouttières (marges négatives de .row) :
   les surcharger cassait l'alignement des colonnes et tassait la mise en page. */

section[id] { scroll-margin-top: calc(var(--nav-height) + 20px); }
[id]         { scroll-margin-top: calc(var(--nav-height) + 20px); }
#hero        { scroll-margin-top: 0; }

/* Typography */
.fw-black    { font-weight: 900 !important; }
.tracking-widest { letter-spacing: 0.12em !important; }
.tracking-tighter{ letter-spacing: -0.04em !important; }
.text-dark-blue  { color: var(--dark-blue); }
.bg-dark-blue    { background-color: var(--dark-blue); }
.text-swiss-red  { color: var(--swiss-red); }
.bg-swiss-red    { background-color: var(--swiss-red); }
.border-white-10 { border-color: rgba(255,255,255,0.1) !important; }
.xsmall  { font-size: 0.65rem; }
.xxsmall { font-size: 0.6rem; }

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    /* dvw = dynamic viewport width = viewport VISUEL (pas le layout viewport).
       Garantit que la navbar ne dépasse jamais l'écran, même si du contenu
       en-dehors provoque un layout viewport plus large. */
    width: 100vw;            /* fallback */
    width: 100dvw;           /* Chrome 108+, Safari 15.4+, FF 101+ */
    max-width: 100vw;
    overflow: visible;
    z-index: 1050;
    height: var(--nav-height);
    transition: background 0.35s ease, box-shadow 0.35s ease;
    background: transparent;
}
.navbar.scrolled {
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

/* ── NAVBAR DESKTOP (≥ 992px) ──────────────────────────────────────── */
.navbar .container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

/* ── NAVBAR MOBILE (< 992px) ────────────────────────────────────────
   Triple protection contre le débordement :
   1. overflow-x:clip sur html/body empêche le gonflement du layout viewport
   2. Navbar et container en dvw = toujours liés au viewport visuel
   3. Hamburger en-flux (in-flow) avec flex-shrink:0 — jamais éjecté
   Ainsi même si le layout viewport est gonflé par du contenu en dehors
   de la navbar, le hamburger reste TOUJOURS dans l'espace visible. */
@media (max-width: 991.98px) {
    #navbar .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        /* dvw = viewport visuel, garantit le bon calcul même en DevTools */
        max-width: 100vw !important;
        max-width: 100dvw !important;
        min-width: 0 !important;
        padding: 0 0.75rem !important;
        box-sizing: border-box !important;
    }
    #navbar .navbar-brand {
        min-width: 0 !important;
        flex: 0 1 auto !important;
        max-width: calc(100% - 56px) !important;
        overflow: hidden !important;
    }
    #navbar .navbar-brand span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline !important;
        vertical-align: middle !important;
    }
    /* ── Cache TOUT le menu desktop sur mobile (double sécurité) ─── */
    #navbar .d-none,
    #navbar .d-lg-flex,
    #navbar .d-none.d-lg-flex {
        display: none !important;
    }
    /* ── Hamburger : in-flow, taille fixe, jamais réduit ─────────── */
    #menuToggle {
        position: static !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 1060 !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        clip-path: none !important;
    }
}

/* Nav text colours */
.navbar:not(.scrolled) .nav-link { color: white !important; }
.navbar.scrolled .nav-link      { color: var(--dark-blue) !important; }

/* Brand text: bleu sombre dans tous les états */
#navbar:not(.scrolled) .navbar-brand .brand-text { color: #020817 !important; }
#navbar.scrolled .navbar-brand .brand-text { color: #020817 !important; }
.navbar-brand .text-swiss-red { color: var(--swiss-red) !important; }

/* ── BOUTON DE LANGUE ──────────────────────────────────────────────────
   Problème : Bootstrap's .btn lit sa couleur via --bs-btn-color.
   Les règles .nav-lang-btn précédentes surchargeaient `color` mais pas
   la variable CSS que Bootstrap lit en premier.
   Fix : on override --bs-btn-color directement + border-color via ID
   (sélecteur ID = spécificité 0-1-0-0, bat toujours les classes Bootstrap).
*/
#navbar:not(.scrolled) #langBtnDesktop {
    --bs-btn-color: var(--dark-blue);
    color: var(--dark-blue) !important;
    border-color: rgba(2,8,23,0.25) !important;
    transition: color 0.35s ease, border-color 0.35s ease;
}
#navbar:not(.scrolled) #langBtnDesktop span,
#navbar:not(.scrolled) #langBtnDesktop i {
    color: var(--dark-blue) !important;
}
#navbar.scrolled #langBtnDesktop {
    --bs-btn-color: var(--dark-blue);
    color: var(--dark-blue) !important;
    border-color: rgba(2,8,23,0.25) !important;
    transition: color 0.35s ease, border-color 0.35s ease;
}
#navbar.scrolled #langBtnDesktop span,
#navbar.scrolled #langBtnDesktop i {
    color: var(--dark-blue) !important;
}

/* Hamburger colours */
.navbar:not(.scrolled) #menuToggle,
.navbar:not(.scrolled) #applyMenuToggle { color: var(--dark-blue) !important; }
.navbar.scrolled #menuToggle,
.navbar.scrolled #applyMenuToggle { color: var(--dark-blue) !important; }

.navbar-brand { cursor: pointer; text-decoration: none; flex-shrink: 0; }
.navbar-brand span.fw-black {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.nav-link {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    transition: opacity 0.3s;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.nav-link:hover { opacity: 0.7; }

/* Hamburger button */
#menuToggle, #applyMenuToggle {
    flex-shrink: 0;
    flex-grow: 0;
    line-height: 1;
    cursor: pointer;
    padding: 6px;
    z-index: 2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-width: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
}
@media (min-width: 992px) {
    #menuToggle { display: none !important; }
}

/* ============================================
   MOBILE MENU
   Fix : left:0 + right:0 + width:auto ancre le menu aux deux bords du
   viewport visuel sans dépendre de window.innerWidth ni de dvw.
   Un width explicite sur un position:fixed avec left ET right définis
   crée un conflit — width:auto laisse le navigateur calculer la largeur
   à partir des bords ancrés, ce qui donne toujours exactement la largeur
   de l'écran physique.
   ============================================ */
#mobileMenu {
    position: fixed !important;
    top: var(--nav-height) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    height: calc(100dvh - var(--nav-height)) !important;
    background: white;
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
/* Fallback si dvh non supporté */
@supports not (height: 100dvh) {
    #mobileMenu { height: calc(100vh - var(--nav-height)) !important; }
}
#mobileMenu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.mobile-menu .nav-link {
    color: var(--dark-blue) !important;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

/* Overlay pour fermer en cliquant dans le vide */
#menuOverlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 1039;
    cursor: pointer;
}
#menuOverlay.active { display: block; }

/* ============================================
   LANGUAGE SELECTOR
   ============================================ */
.lang-selector { position: relative; }
.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    min-width: 150px;
    z-index: 1060;
    overflow: hidden;
}
.lang-option {
    padding: 10px 16px;
    display: block;
    width: 100%;
    border: none;
    background: white;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 500;
    font-size: 0.85rem;
    text-align: left;
    touch-action: manipulation;
}
.lang-option:hover { background: #f8f9fa; }
.lang-option.active { background: rgba(230,0,0,0.06); color: var(--swiss-red); font-weight: 700; }

/* ============================================
   BUTTONS
   ============================================ */
.btn-danger-custom {
    background: var(--swiss-red);
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 40px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    touch-action: manipulation;
    white-space: nowrap;
    cursor: pointer;
}
.btn-danger-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230,0,0,0.3);
    color: white;
}
.btn-danger-custom:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* ============================================
   HERO
   ============================================ */
#hero {
    overflow: hidden !important;
    height: auto;
    min-height: 92vh;
    max-height: 1000px;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: var(--nav-height);
    background-color: var(--dark-blue);
}
.hero-slide {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}
.hero-slide.active { opacity: 1; }

/* ============================================
   CARDS & FEATURES
   ============================================ */
.feature-card {
    border: 1px solid #f1f3f5;
    border-radius: 20px;
    padding: 24px;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: white;
    height: 100%;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -12px rgba(0,0,0,0.1);
    border-color: rgba(230,0,0,0.2);
}
.icon-wrapper {
    width: 52px; height: 52px;
    background: rgba(230,0,0,0.06);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: var(--swiss-red);
    margin-bottom: 16px;
    transition: all 0.3s;
    flex-shrink: 0;
}
.feature-card:hover .icon-wrapper {
    background: var(--swiss-red);
    color: white;
    transform: rotate(-5deg);
}

/* ============================================
   CALCULATOR
   ============================================ */
.custom-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 5px;
    border-radius: 5px; background: #dee2e6;
    outline: none; flex: 1; min-width: 0;
}
.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%; background: var(--swiss-red);
    cursor: pointer; border: 3px solid white;
    box-shadow: 0 2px 8px rgba(230,0,0,0.3);
}
.custom-slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%; background: var(--swiss-red);
    cursor: pointer; border: 3px solid white;
}
.calc-input-row {
    display: flex; align-items: center;
    gap: 0.5rem; min-width: 0; overflow: hidden;
}
.calc-input-row input { width: 85px; min-width: 65px; flex-shrink: 0; }

/* ============================================
   SERVICE / CORP TABS
   ============================================ */
.service-tab, .corp-tab {
    padding: 14px 18px;
    border-radius: 14px;
    transition: all 0.3s;
    cursor: pointer;
    border-left: 3px solid transparent;
    touch-action: manipulation;
}
.service-tab.active, .corp-tab.active {
    background: #f8f9fa;
    border-left-color: var(--swiss-red);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ============================================
   REVIEWS
   ============================================ */
.review-card {
    background: #fcfcfc;
    border: 1px solid #eee;
    padding: 18px;
    border-radius: 14px;
    height: 100%;
    transition: all 0.3s;
}
.review-card:hover { border-color: var(--swiss-red); box-shadow: 0 8px 24px rgba(0,0,0,0.05); }
.review-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* Stats */
.stat-number { font-size: 2.2rem; font-weight: 900; }

/* Footer */
.social-icon-circle {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5);
    transition: all 0.3s; text-decoration: none; flex-shrink: 0;
}
.social-icon-circle:hover { background: var(--swiss-red); color: white; transform: translateY(-3px); }
.contact-icon-circle {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(220,53,69,0.1); color: var(--swiss-red);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ceo-contact-item { background: rgba(255,215,0,0.05); border-radius: 8px; border: 1px solid rgba(255,215,0,0.2); padding: 7px 10px; }
.ceo-icon { background: linear-gradient(135deg, #FFD700, #FFA500); color: #000; }

/* ============================================
   PHOTO CEO (section À propos)
   Taille contrôlée + centrée pour ne pas dévorer l'écran mobile.
   ============================================ */
.ceo-photo {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 3 / 4;
    max-height: 460px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1.25rem;
    overflow: hidden;
}
.ceo-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* AOS : repli si la librairie ne se charge pas (html.no-aos ajouté par JS)
   → tout le contenu reste visible, aucune section fantôme. */
html.no-aos [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Images */
img, video, iframe, svg { max-width: 100%; height: auto; }

/* Sections overflow fix */
section { overflow-x: hidden; }
footer .container { overflow: visible; }
footer [class*="col-"] {
    padding-left: 0.75rem; padding-right: 0.75rem;
    word-wrap: break-word; overflow-wrap: break-word;
}

/* ============================================
   TABLET  (< 992px)
   ============================================ */
@media (max-width: 991px) {
    #hero { height: auto !important; min-height: 82vh !important; max-height: none !important; padding: 110px 0 64px; }
    .stat-number { font-size: 1.9rem; }
    .display-4, .display-5 { font-size: 1.75rem !important; }
    .display-3 { font-size: 2.2rem !important; }
    .service-tab, .corp-tab { padding: 10px 14px; }
    .position-relative.rounded-4[style*="height:400px"],
    .position-relative.rounded-4[style*="height:450px"] { height: 300px !important; }
    section[id], [id] { scroll-margin-top: calc(var(--nav-height) + 10px); }
}

/* ============================================
   MOBILE  (< 768px)
   ============================================ */
@media (max-width: 767px) {
    html, body { overflow-x: clip !important; max-width: 100vw; width: 100%; overscroll-behavior-x: none; }

    .display-4 { font-size: 1.35rem !important; }
    .display-5 { font-size: 1.2rem !important; }
    .display-6 { font-size: 1.05rem !important; }
    .display-3 { font-size: 1.7rem !important; }
    h1 { font-size: 1.3rem !important; }
    h2 { font-size: 1.15rem !important; }
    h3 { font-size: 1rem !important; }
    h5 { font-size: 0.9rem !important; }
    .lead { font-size: 0.88rem !important; }
    .fs-4 { font-size: 0.95rem !important; }

    .navbar-brand img { height: 26px !important; }
    .navbar-brand span { font-size: 0.95rem !important; }

    section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .p-5 { padding: 1.5rem !important; }
    .p-md-5 { padding: 1.25rem !important; }

    #hero { min-height: 600px !important; padding: 110px 0 60px; }

    /* Sécurité anti-chevauchement : le hero est isolé au-dessous, les sections
       suivantes passent au-dessus avec un fond opaque → le bouton du hero ne
       peut jamais recouvrir le texte de la section « À propos ». */
    #hero { z-index: 0; }
    #about, #services, #why, #calc, #contact, #faq, footer { position: relative; z-index: 1; }
    #about { background: #fff; }

    /* Flèches du slider hero masquées sur mobile (défilement auto suffit,
       elles gênaient près du bas du hero). */
    #prevSlide, #nextSlide { display: none !important; }

    /* Photo CEO nettement plus compacte et centrée sur mobile */
    .ceo-photo { max-width: 260px; max-height: 340px; }

    .apply-hero { height: 28vh !important; min-height: 180px !important; }
    .apply-hero h1 { font-size: 1.2rem !important; }
    .apply-hero p  { font-size: 0.82rem !important; }

    .btn-danger-custom { padding: 9px 16px; font-size: 0.72rem; }

    .position-relative.rounded-4[style*="height:400px"],
    .position-relative.rounded-4[style*="height:450px"] { height: 220px !important; }

    .feature-card { padding: 18px; }
    .stat-number { font-size: 1.65rem; }
    #calc .col-md-6 { margin-bottom: 0.75rem; }
    .d-flex.align-items-center.gap-2:has(.custom-slider) { flex-wrap: nowrap; overflow: hidden; }
    .custom-slider { min-width: 0; }
    .form-control.w-25 { width: 78px !important; min-width: 60px; }

    .form-container { margin-top: -35px !important; }
    .form-card .p-4 { padding: 1.1rem !important; }
    .step-label { font-size: 0.6rem; }
    .step-circle { width: 32px !important; height: 32px !important; font-size: 0.78rem !important; }
    .step-indicator::before { top: 16px; }
    .progress-fill { top: 16px; }

    footer .col-lg-3, footer .col-lg-4, footer .col-md-6 { margin-bottom: 1.25rem; }
    .lang-dropdown { right: 0; min-width: 145px; }
    table { font-size: 0.78rem; }
    #reviewsContainer .col-md-4 { width: 100%; }
}

/* ============================================
   SMALL MOBILE  (< 576px)
   ============================================ */
@media (max-width: 575px) {
    #navbar .container { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
    .navbar-brand img { height: 22px !important; }
    .navbar-brand span { font-size: 0.82rem !important; }
    .btn-danger-custom { padding: 8px 12px; font-size: 0.68rem; letter-spacing: 0.04em; }
    .step-circle { width: 28px !important; height: 28px !important; font-size: 0.7rem !important; }
    .step-label { font-size: 0.55rem; }
    .step-indicator::before { top: 14px; }
    .progress-fill { top: 14px; }
    .position-relative.rounded-4[style*="height:400px"],
    .position-relative.rounded-4[style*="height:450px"] { height: 180px !important; }
    .apply-hero { min-height: 160px !important; }
    .apply-hero h1 { font-size: 1rem !important; }
    .form-container { margin-top: -22px !important; }
    .lang-dropdown { right: -8px; }
    .stat-number { font-size: 1.45rem; }
    .display-3 { font-size: 1.5rem !important; }
    #serviceDetail, #corpDetail { padding: 0.85rem !important; }
    footer a[href^="mailto"] { word-break: break-all; font-size: 0.68rem !important; }
}

/* iOS safe area */
@supports (padding-top: env(safe-area-inset-top)) {
    #navbar .container {
        padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
    }
    footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

/* ── AOS : accessibilité ──────────────────────────────────────────
   On respecte prefers-reduced-motion : pas d'animation pour les
   utilisateurs qui la désactivent (contenu immédiatement visible). */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── AOS sur mobile/tablette : contenu TOUJOURS visible ────────────
   Sur certains téléphones (iOS Safari notamment), la détection de scroll
   d'AOS peut ne pas se déclencher et laisser des sections invisibles.
   Pour une fiabilité totale, on désactive le masquage sous 992px :
   tout le contenu s'affiche immédiatement (les animations restent
   actives sur desktop). Aucune section fantôme, aucun risque de
   superposition invisible qui capterait les taps. */
@media (max-width: 991.98px) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}