/*
 * metier-theme.css — surcharges du chrome premium par page métier.
 *
 * Toutes les règles sont "gated" sur `html.mt-active` : elles ne s'appliquent
 * QUE lorsqu'une page métier a appelé applyMetierTheme() (cf. metier-theme.js).
 * Sur toutes les autres pages, le chrome reste bordeaux (défauts de global.css
 * et cursor.css, intacts).
 *
 * Chaque règle lit une variable --mt-* avec fallback bordeaux/crème, pour
 * dégrader proprement si une page oublie un champ de la palette.
 */


/* ============================================================
 * SELECTION — surlignage de texte sur la palette métier
 * ============================================================ */
html.mt-active ::selection {
    background: var(--mt-selection-bg, #5a1224);
    color: var(--mt-selection-fg, #f5efe0);
}


/* ============================================================
 * CURSOR-DOT — pastille curseur + halo au hover
 * (la div .cursor-dot vit dans body, créée par cursor.js)
 * ============================================================ */
html.mt-active .cursor-dot {
    background: var(--mt-cursor, #5a1224);
}
html.mt-active .cursor-dot.is-hover {
    background: var(--mt-cursor-hover, rgba(90, 18, 36, 0.2));
}


/* ============================================================
 * FOCUS VISIBLE — outline accessibilité sur l'accent métier
 * ============================================================ */
html.mt-active :focus-visible {
    outline-color: var(--mt-focus, #5a1224);
}


/* ============================================================
 * SCROLLBAR — surcharge de la scrollbar globale (base : global.css)
 * Firefox (scrollbar-color) + WebKit (::-webkit-scrollbar-*).
 * ============================================================ */
html.mt-active {
    scrollbar-color: var(--mt-scrollbar-thumb, #5a1224) var(--mt-scrollbar-track, #ece5d6);
}
html.mt-active::-webkit-scrollbar-track {
    background: var(--mt-scrollbar-track, #ece5d6);
}
html.mt-active::-webkit-scrollbar-thumb {
    background: var(--mt-scrollbar-thumb, #5a1224);
    border-color: var(--mt-scrollbar-track, #ece5d6);
}


/* ============================================================
 * NAVBAR — accents signature recolorés sur la palette métier.
 * On ne touche pas au fond crème/glass de la navbar : on ne fait
 * que substituer le bordeaux (text/bg-primary-700) et le marine
 * (bg-secondary-900 : pill active + colonnes méga-menu) par la
 * palette métier, plus une fine ligne d'accent en haut.
 * !important pour battre la spécificité des utilities Tailwind.
 * ============================================================ */

/* Fine ligne d'accent en haut de la navbar */
html.mt-active header.sticky {
    box-shadow: inset 0 3px 0 0 var(--mt-nav-accent, #5a1224);
}

/* Accents bordeaux du logo (triangle clip-path + "master" italique) */
html.mt-active header.sticky .text-primary-700 {
    color: var(--mt-nav-accent, #5a1224) !important;
}
html.mt-active header.sticky .bg-primary-700 {
    background-color: var(--mt-nav-accent, #5a1224) !important;
}

/* Hover des items de nav (utility hover:text-primary-700) */
html.mt-active header.sticky .hover\:text-primary-700:hover {
    color: var(--mt-nav-accent, #5a1224) !important;
}

/* Pill active + colonne manifeste Expertises + logo (bg-secondary-900) */
html.mt-active header.sticky .bg-secondary-900 {
    background-color: var(--mt-nav-active-bg, #13234f) !important;
}


/* ── Colonnes manifeste des méga-menus (survol "Expertises" / "Métiers") ──
   Chaque colonne contient un highlight rose codé en dur (#e2a8a0 : pastille,
   <em> du titre, lien "Voir …") + du texte crème, pensés pour un fond sombre.
   Quand la colonne prend une couleur claire (ex. colonne Métiers = navAccent
   jaune sur restauration), rose et crème deviennent illisibles. On les recolore
   donc selon la luminance réelle du fond, calculée en JS (clair → ink sombre ;
   sombre → crème/accent). `[role="menu"]` cible UNIQUEMENT les dropdowns, jamais
   le logo (qui est aussi en .bg-primary-700). */

/* Colonne Expertises — fond = navActiveBg (toujours sombre) : highlight clair */
html.mt-active header.sticky [role="menu"] .bg-secondary-900 .text-\[\#e2a8a0\] {
    color: var(--mt-menu-on-active-accent, #e2a8a0) !important;
}
html.mt-active header.sticky [role="menu"] .bg-secondary-900 .bg-\[\#e2a8a0\] {
    background-color: var(--mt-menu-on-active-accent, #e2a8a0) !important;
}

/* Colonne Métiers — fond = navAccent (parfois clair) : texte ET highlight adaptés.
   Le texte crème (titre hérité + eyebrow + description) bascule en sombre si le
   fond est clair ; le rose devient un accent contrasté. */
html.mt-active header.sticky [role="menu"] .bg-primary-700 {
    color: var(--mt-menu-on-accent-fg, #f5efe0) !important;  /* le <h3> hérite */
}
html.mt-active header.sticky [role="menu"] .bg-primary-700 [class*="text-cream-100"] {
    color: var(--mt-menu-on-accent-fg, #f5efe0) !important;
}
html.mt-active header.sticky [role="menu"] .bg-primary-700 .text-\[\#e2a8a0\] {
    color: var(--mt-menu-on-accent-accent, #e2a8a0) !important;
}
html.mt-active header.sticky [role="menu"] .bg-primary-700 .bg-\[\#e2a8a0\] {
    background-color: var(--mt-menu-on-accent-accent, #e2a8a0) !important;
}
html.mt-active header.sticky [role="menu"] .bg-primary-700 .hover\:text-cream-100:hover {
    color: var(--mt-menu-on-accent-fg, #f5efe0) !important;
}