/* ==========================================================================
   IV OVERRIDES - chargé APRÈS main.css (gagne sur les règles existantes)
   1) Polices alignées sur la référence (Inter Tight + JetBrains Mono)
   2) Correctif définitif du header (menu qui ne chevauche plus le logo)
   ========================================================================== */

/* ---- 1) POLICES (Inter Tight partout, JetBrains Mono en accent mono) ---- */
:root {
    --font-display: "Inter Tight", system-ui, -apple-system, sans-serif;
    --font-accent:  "Inter Tight", system-ui, -apple-system, sans-serif;
    --font-body:    "Inter Tight", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}
body,
h1, h2, h3, h4, h5, h6,
.navbar-logo, .footer-logo,
.hero-title, .section-title, .svc-explorer__heading,
.intro-title, .cta-title, .testimonial-text {
    font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
}
/* Bug SOC-20: forcer text-transform: none sur .hero-title (override main.css) */
.hero-title { text-transform: none !important; }
/* Le « V » du logo garde son accent couleur, en Inter Tight */
.navbar-logo .logo-v, .footer-logo .logo-v { font-family: inherit; }

/* ---- 2) HEADER : 3 zones, menu compact centré, CTA toujours visible, zéro chevauchement ---- */
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1rem, 2.5vw, 2.5rem);
}
.navbar-logo { flex: 0 0 auto; }
.navbar-links {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;           /* doit rester visible : sinon le sous-menu déroulant (top:100%) est rogné */
    display: flex;
    justify-content: center;
}
.navbar-links-list {
    flex-wrap: nowrap;
    gap: clamp(0.55rem, 1.1vw, 1rem);
}
.navbar-links-list li a.nav-link {
    text-transform: none;        /* enlève les MAJUSCULES (gain de largeur, plus net) */
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.navbar-cta-btn { flex: 0 0 auto; }

/* Sous 1080px, le menu horizontal ne tient pas : on bascule en hamburger */
@media (max-width: 1080px) {
    .navbar-links { display: none; }
    .navbar-cta-btn:not(.navbar-cta-btn--mobile) { display: none; }
    .navbar-hamburger { display: flex; }
}
/* === /IV OVERRIDES === */

/* ==========================================================================
   ROUND 2 - Fond clair pro + mega-menu horizontal + alignements globaux
   ========================================================================== */

/* Canvas clair (near-white chaud), accents dorés conservés */
:root { --cream: #FAF9F7; --canvas: #FAF9F7; --surface: #FFFFFF; }
body { background: #FAF9F7; }

/* ---- Mega-menu : sous-options en panneau HORIZONTAL multi-colonnes au survol ---- */
.navbar-links-list li.menu-item-has-children { position: relative; }
.navbar-links-list .sub-menu {
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    display: flex;
    flex-wrap: wrap;
    width: max-content;
    max-width: min(720px, 92vw);
    padding: 1rem 1.25rem;
    gap: 0.15rem 1.5rem;
    border: 1px solid rgba(44,36,32,.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.navbar-links-list li:hover > .sub-menu,
.navbar-links-list li:focus-within > .sub-menu {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.navbar-links-list .sub-menu li {
    flex: 0 0 auto;
    width: calc(50% - 0.75rem);          /* 2 colonnes ; auto si peu d'items */
    min-width: 180px;
}
.navbar-links-list .sub-menu li a.nav-link {
    display: block;
    padding: 0.5rem 0.4rem;
    white-space: normal;
    border-bottom: 1px solid transparent;
}
.navbar-links-list .sub-menu li a.nav-link:hover { border-bottom-color: var(--rose, #C4A98B); }
/* Panneaux des items proches du bord droit : éviter le débordement */
.navbar-links-list > li:nth-last-child(-n+2) .sub-menu { left: auto; right: 0; transform: translateX(0) translateY(6px); }
.navbar-links-list > li:nth-last-child(-n+2):hover > .sub-menu,
.navbar-links-list > li:nth-last-child(-n+2):focus-within > .sub-menu { transform: translateX(0) translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .navbar-links-list .sub-menu { transition: none; }
}

/* ---- Alignements globaux : conteneurs centrés cohérents, médias responsives ---- */
.container, .iv-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
img, video, iframe { max-width: 100%; height: auto; }
*, *::before, *::after { box-sizing: border-box; }
/* anti-débordement horizontal mobile */
html, body { overflow-x: hidden; }
/* === /ROUND 2 === */

/* ==========================================================================
   ROUND 3 - En-tête solide + hamburger à DROITE + menu mobile lisible
   (charge après main.css : gagne sur les deux systèmes .open / .is-open)
   ========================================================================== */

/* --- En-tête SOLIDE PAR DÉFAUT (pas seulement au défilement) ---
   Les liens sont foncés (charcoal) : sur le héros foncé en haut ils étaient
   illisibles (transparent), et le fil d'Ariane (1er élément) passait SOUS la
   navbar fixe (chevauchement du logo). Fond blanc constant + dégagement de la
   hauteur de la navbar dans le contenu corrige les deux, sur tout le site. */
:root { --iv-nav-h: 4.6rem; }
.navbar {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(196,169,139,0.22);
    box-shadow: 0 1px 10px rgba(44,36,32,0.05);
    padding: 0.8rem 0;
}
.navbar.scrolled {
    background: #FFFFFF;                 /* opaque, fini la transparence */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(196,169,139,0.30);
    box-shadow: 0 2px 18px rgba(44,36,32,0.08);
}
/* Le contenu commence SOUS le bandeau promo (fixe) ET la navbar (fixe). */
body { padding-top: calc(var(--iv-topbar-h) + var(--iv-nav-h)); }
body.admin-bar { padding-top: calc(32px + var(--iv-topbar-h) + var(--iv-nav-h)); }
@media (max-width: 782px) {
    body.admin-bar { padding-top: calc(46px + var(--iv-topbar-h) + var(--iv-nav-h)); }
}

/* --- Hamburger ALIGNÉ À DROITE (le flex-start groupait logo+burger à gauche) --- */
@media (max-width: 1080px) {
    .navbar-hamburger { margin-left: auto; }   /* pousse le burger au bord droit */
}
.navbar-hamburger {                            /* cible tactile WCAG 2.5.5 */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

/* --- Menu mobile : ouvrir sur .open ET .is-open (les deux systèmes coexistent) --- */
.mobile-menu.open,
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-overlay.open,
.mobile-menu-overlay.is-open { opacity: 1; pointer-events: auto; }

/* --- CTA du menu ouvert : contenu, contrasté, lisible IMMÉDIATEMENT --- */
.mobile-menu-cta { padding: 1.25rem 1.5rem 1.75rem; }
.mobile-menu-cta .navbar-cta-btn,
.navbar-cta-btn--mobile {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.95rem 1.25rem;
    background: #2C2420;                /* charcoal plein */
    color: #FFFFFF !important;         /* texte blanc lisible d'emblée (pas de gris) */
    border: 0;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    white-space: normal;               /* ne déborde pas du bouton */
    text-align: center;
    opacity: 1;
    line-height: 1.2;
}
.mobile-menu-cta .navbar-cta-btn:hover,
.navbar-cta-btn--mobile:hover { background: #1f1a16; color: #FFFFFF !important; }

/* --- Fil d'Ariane : bande propre sous l'en-tête, logo intact (gabarits .iv-pel-breadcrumb / .breadcrumbs) --- */
.iv-pel-breadcrumb, .breadcrumbs.iv-breadcrumb-band {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(196,169,139,0.25);
}
/* === /ROUND 3 header === */


/* ============================================================
   T3 NAV (writer-b) : libelles de groupe SOINS AVANCES / SOINS ESSENTIELS
   Les items de menu portant la classe .iv-nav-group sont rendus comme
   des en-tetes de section non cliquables dans le dropdown Services.
   Bronze #8A6D4C = token nav accessible du theme (WCAG AA sur blanc).
   ============================================================ */
.navbar-links-list .sub-menu li.iv-nav-group > a.nav-link,
.mobile-nav-list li.iv-nav-group > a.nav-link {
    pointer-events: none;
    cursor: default;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.66rem;
    font-weight: 700;
    color: #8A6D4C;
    padding-top: 0.85rem;
    padding-bottom: 0.2rem;
    opacity: 0.95;
}
.navbar-links-list .sub-menu li.iv-nav-group:first-child > a.nav-link {
    padding-top: 0.35rem;
}
.navbar-links-list .sub-menu li.iv-nav-group > a.nav-link::after,
.navbar-links-list .sub-menu li.iv-nav-group > a.nav-link::before {
    display: none !important;
}
.navbar-links-list .sub-menu li.iv-nav-group > a.nav-link:hover {
    background: transparent;
    color: #8A6D4C;
}