/* ═══════════════════════════════════════════════════════════════
   [Nexus-Responsive-Nav] NAVIGATION RESPONSIVE — FEUILLE GÉNÉRIQUE
   NautiSphere — partagée par nexus-myvessel.html et nexus-sphere.html

   NON chargée par nexus-skipper-ai.html, et c'est délibéré : ce portail
   n'a aucune destination applicative (0 lien sortant, 0 onglet). Son
   <aside id="sidebar"> est l'historique de conversations — du contenu,
   pas de la navigation. Il conserve js/chat/chat-navigation.js.

   ORDRE DE CHARGEMENT — impératif :
     1. css/sidebar-autohide.css      (feuille partagée du rail desktop)
     2. css/nexus-responsive-nav.css  (CE FICHIER — en neutralise les effets
                                       sous le seuil desktop du portail)
     3. css/<portail>-nav.css         (spécifique : hauteur navbar, compaction,
                                       neutralisation des feuilles héritées)

   ───────────────────────────────────────────────────────────────
   DEUX RÉGIMES — ET DEUX SEULEMENT
   ───────────────────────────────────────────────────────────────
     >= 1280px    rail auto-masqué — css/sidebar-autohide.css, intouché
     <  1280px    navbar compacte + bottom bar fixe (4 items `primary`
                  + « Plus »). Le drawer s'ouvre UNIQUEMENT par « Plus ».

   IL N'Y A PLUS DE BURGER. Deux points d'entrée concurrents vers le même
   drawer — un burger en haut, un « Plus » en bas — obligeaient l'utilisateur
   à apprendre que les deux mènent au même endroit. La bottom bar est le seul
   point d'entrée : elle est permanente, atteignable au pouce, et porte déjà
   l'état actif. Ne pas réintroduire de #nexus-drawer-toggle.

   La plage 768-1279 avait auparavant un burger sans bottom bar ; elle relève
   désormais du même régime que le mobile.

   ───────────────────────────────────────────────────────────────
   ÉCHELLE Z-INDEX SOUS 1280px
   ───────────────────────────────────────────────────────────────
   css/sidebar-autohide.css déclare rail 43 / panneau 45 / zone 40, mais
   tout est enfermé dans ses @media ≥1024px dont on annule les effets.
   Sous le seuil desktop, la pile est donc entièrement définie ici :

     1000  modales             (feuilles de portail)
       50  navbar
       46  drawer
       44  backdrop
       42  bottom bar          ← sous les modales, conforme
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Surchargeable par portail : sphere passe à 4rem sous 768px (top-16). */
    --nexus-navbar-height: 5rem;
    --nexus-bottombar-height: 4rem;
    --nexus-drawer-duration: 200ms;
    /* Largeur maximale de la bottom bar. Au-delà de ~640px de viewport,
       cinq items étalés sur toute la largeur produisent des cibles espacées
       de plusieurs centimètres : on contraint et on centre. */
    --nexus-bottombar-max-width: 40rem;

    /* Les tokens d'échelle de marque — carré et logotype — ont été
       DÉPLACÉS dans css/nexus-brand.css le 2026-08-18, avec les cinq
       règles qui les consomment. Raison : nexus-skipper-ai.html ne
       charge pas cette feuille et ne peut pas (elle porte tout le
       chrome responsive), mais doit partager l'identité de marque.
       Aucune valeur n'a changé. Ne pas les redéclarer ici. */

    /* Design System — seules couleurs de marque de cette feuille */
    --nexus-navy: #001e57;
    --nexus-cyan: #00b9d1;

    /* ── Dégradé de marque ──────────────────────────────────────────────
       Aucun token partagé n'existait : la valeur était redéclarée à
       l'identique dans css/boat-show.css (--bs-gradient),
       css/boat-show-wizard.css (--bsw-gradient), css/crm-modals.css (4×)
       et dans le <style> inline de nexus-myvessel.html (.gradient-bg).

       Il est déclaré ICI et non dans css/design-tokens.css parce que cette
       dernière n'est PAS chargée par nexus-myvessel.html — le token n'y
       atteindrait qu'un portail sur deux. À reprendre dans design-tokens.css
       le jour où myvessel la chargera, et à faire consommer aux quatre
       feuilles ci-dessus. */
    --nexus-gradient-brand: linear-gradient(135deg, #001e57 0%, #00b9d1 100%);
}

/* ═══════════════════════════════════════════════════════════════
   BOUTON SKIPPER AI — dégradé de marque à TOUS les régimes
   Hors media query : desktop ≥1280, tablette 768-1279 (rectangle à label)
   et mobile <768 (carré icône seule) partagent le même fond.

   `!important` requis : sur nexus-sphere.html, `.mp-btn-chat` de
   css/marketplace-responsive.css déclare son propre fond à spécificité
   égale, et le résultat dépendrait alors du seul ordre de chargement.

   CONTRASTE — le libellé est blanc sur un dégradé qui s'éclaircit vers la
   droite. Mesuré : 15,9:1 à l'extrémité navy, ~7,1:1 au centre, mais
   seulement 2,4:1 sur l'extrémité cyan pure. Voir la note du rapport : la
   fin du libellé peut descendre autour de 4:1, sous le seuil AA (4,5:1)
   pour du texte de 14px semi-gras. Décalage du stop cyan si l'on veut la
   conformité stricte.
   ═══════════════════════════════════════════════════════════════ */
[data-nexus-skipper] {
    background: var(--nexus-gradient-brand) !important;
    color: #ffffff;
}

/* Éléments propres au régime < 1280px : absents par défaut, révélés par la
   media query ci-dessous. Déclaré hors @media pour que le premier paint ne
   montre jamais une bottom bar sur desktop. */
#nexus-drawer-backdrop,
#nexus-bottom-nav,
.nexus-drawer-header {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   RÉGIME MOBILE + TABLETTE — < 1280px
   L'autohide est hors-jeu : drawer + bottom bar prennent la main.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {

    /* Neutralise la couche rail de la feuille partagée sur 1024-1279.
       (Sous 1024 elle les masque déjà ; `!important` couvre les deux cas.) */
    #sphere-sidebar-trigger,
    #sphere-sidebar-rail,
    #sphere-sidebar-pin {
        display: none !important;
    }

    /* Filet de sécurité : tout burger résiduel d'un portail reste masqué.
       Le markup a été supprimé — ceci empêche une réintroduction silencieuse
       par une feuille héritée. */
    #nexus-drawer-toggle,
    #mp-menu-toggle,
    .mp-menu-toggle {
        display: none !important;
    }

    /* Le contenu principal reprend toute la largeur.
       `!important` pour l'emporter sur l'utilitaire Tailwind `ml-64` de
       <main>, et sur les règles `margin-left` de la feuille partagée qui
       restent actives entre 1024 et 1279. */
    [data-autohide-main] {
        margin-left: 0 !important;
        /* Réserve pour la bottom bar sur TOUTE la plage, pas seulement mobile :
           sans elle, le dernier bloc de contenu passe sous la barre à 1100px
           exactement comme à 393px. */
        padding-bottom: calc(var(--nexus-bottombar-height)
                             + env(safe-area-inset-bottom, 0px)
                             + 1rem) !important;
    }

    /* ── Le panneau devient un drawer ────────────────────────────
       Il conserve ses classes de portail (`fixed left-0 top-* w-64`) ;
       on ne pilote ici que l'ouverture et la fermeture. */
    [data-autohide-panel] {
        z-index: 46;
        transform: translateX(-100%);
        visibility: hidden;
        pointer-events: none;
        box-shadow: 0 18px 45px -12px rgba(0, 30, 87, 0.38);
        /* Laisse la bottom bar visible : elle reste le repère de position,
           et « Plus » doit pouvoir refermer ce qu'il a ouvert. */
        bottom: calc(var(--nexus-bottombar-height) + env(safe-area-inset-bottom, 0px));
        /* visibility bascule APRÈS le glissement, sinon le panneau
           disparaîtrait d'un coup au lieu de sortir. */
        transition: transform var(--nexus-drawer-duration) ease-out,
                    visibility 0s linear var(--nexus-drawer-duration);
    }

    :root.nexus-drawer-open [data-autohide-panel] {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--nexus-drawer-duration) ease-out,
                    visibility 0s;
    }

    /* ── Backdrop ────────────────────────────────────────────────
       Borné en haut par la navbar et en bas par la bottom bar : les deux
       restent actionnables, dont « Plus » qui doit pouvoir refermer. */
    #nexus-drawer-backdrop {
        display: block;
        position: fixed;
        top: var(--nexus-navbar-height);
        right: 0;
        bottom: calc(var(--nexus-bottombar-height) + env(safe-area-inset-bottom, 0px));
        left: 0;
        z-index: 44;
        background: rgba(0, 30, 87, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--nexus-drawer-duration) ease-out,
                    visibility 0s linear var(--nexus-drawer-duration);
    }

    :root.nexus-drawer-open #nexus-drawer-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity var(--nexus-drawer-duration) ease-out,
                    visibility 0s;
    }

    /* Verrouille le défilement de l'arrière-plan drawer ouvert */
    :root.nexus-drawer-open body {
        overflow: hidden;
    }

    /* ── En-tête du drawer ───────────────────────────────────────
       Le libellé est injecté par js/nexus-responsive-nav.js depuis le
       paramètre `portalName` : aucune chaîne de marque n'est codée dans le
       composant partagé. nexus-sphere.html a son propre en-tête historique
       (.mp-sidebar-header, stylé par marketplace-responsive.css) ; ces
       règles servent aux portails qui n'en avaient pas, dont myvessel. */
    .nexus-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .nexus-drawer-brand {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        min-width: 0;
    }

    .nexus-drawer-brand-mark {
        width: 2rem;
        height: 2rem;
        border-radius: 0.5rem;
        background: var(--nexus-gradient-brand);
        color: #ffffff;
        font-weight: 700;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .nexus-drawer-brand-name {
        font-weight: 700;
        font-size: 0.9375rem;
        color: var(--nexus-navy);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nexus-drawer-close {
        width: 2.75rem;
        height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        border-radius: 0.5rem;
        color: #6b7280;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 150ms ease-out;
    }

    .nexus-drawer-close:hover {
        background-color: #f3f4f6;
    }

    .nexus-drawer-close:focus-visible {
        outline: 2px solid var(--nexus-cyan);
        outline-offset: -2px;
    }

    /* ── Bottom bar — unique point d'entrée du drawer ──────────── */
    #nexus-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 42;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        /* ENCOCHE iPhone : sans ce padding, la barre passe sous l'indicateur
           d'accueil et les items des bords deviennent inatteignables. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 16px -8px rgba(0, 30, 87, 0.25);
    }

    .nexus-bottom-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        height: var(--nexus-bottombar-height);
        color: #6b7280;
        font-size: 0.625rem;
        line-height: 1;
        font-weight: 600;
        text-align: center;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: color 150ms ease-out;
    }

    .nexus-bottom-item i {
        font-size: 1.125rem;
    }

    .nexus-bottom-item.is-active {
        color: var(--nexus-cyan);
    }

    .nexus-bottom-item:focus-visible {
        outline: 2px solid var(--nexus-cyan);
        outline-offset: -2px;
        border-radius: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PROPORTIONS TABLETTE — 640-1279px

   Cinq items répartis sur 1279px placeraient les cibles à ~25 cm l'une de
   l'autre : la barre cesserait d'être atteignable au pouce, qui est sa seule
   raison d'être. On la contraint et on la centre ; elle devient une barre
   flottante ancrée en bas plutôt qu'un bandeau pleine largeur.

   Sous 640px elle reste pleine largeur : c'est là que le bandeau bord à bord
   est le bon comportement, et que la safe-area doit couvrir toute la base.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 1279px) {

    #nexus-bottom-nav {
        max-width: var(--nexus-bottombar-max-width);
        margin-inline: auto;
        border-left: 1px solid #e5e7eb;
        border-right: 1px solid #e5e7eb;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        box-shadow: 0 -6px 24px -10px rgba(0, 30, 87, 0.3);
    }

    /* Un peu plus d'air : la place ne manque plus. */
    .nexus-bottom-item {
        font-size: 0.6875rem;
        gap: 0.25rem;
    }

    .nexus-bottom-item i {
        font-size: 1.25rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR SOUS 1280px — COMPOSITION COMMUNE AUX DEUX PORTAILS

   Écrite UNE FOIS ici, sur des crochets `data-*` que chaque portail pose
   sur ses propres éléments. Les ids diffèrent (#plaisancier-title vs
   .logo-text, #vessel-skipper-link vs .mp-btn-chat) ; les règles, non.

     [data-nexus-brand-text]       bloc de marque (logo mis à part)
     [data-nexus-brand-sub]        sous-titre / slogan / complément de marque
     [data-nexus-skipper]          bouton Skipper AI
     [data-nexus-skipper-label]    son libellé texte
     [data-nexus-navbar-secondary] icônes secondaires (messagerie, alertes)
     [data-nexus-user-chevron]     chevron du menu utilisateur

   Composition cible :
     >= 768px   logo N · marque · Skipper AI à label · avatar
                (+ icônes secondaires propres au portail)
     <  768px   logo N · marque · Skipper AI carré · avatar
                EXACTEMENT trois éléments, rien d'autre.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {

    /* Sous-titres et compléments de marque : jamais sous 1280px. Ce sont eux
       qui allongent le bloc de gauche, pas le nom lui-même.

       .title-complement et #marketplace-slogan sont ciblés PAR LEUR SÉLECTEUR
       PROPRE, en plus du crochet. Raison : nexus-sphere.html:8019 reconstruit
       #marketplace-title en innerHTML depuis la config Design Chat, ce qui
       DÉTRUIT tout attribut data-* posé sur ses enfants. Le complément
       « by NautiSphere® » réapparaissait donc dès le chargement de la config
       et débordait la navbar de 41px à 393px. Une règle de classe survit à
       la réécriture ; un crochet, non. Ne pas retirer ces deux sélecteurs. */
    [data-nexus-brand-sub],
    .title-complement,
    #marketplace-slogan {
        display: none !important;
    }

    /* Le nom de marque reste visible sur TOUTE la plage, y compris sous 768px
       où il était masqué faute de place. La place vient du retrait des icônes
       secondaires et du chevron (voir le bloc < 768px).
       `!important` pour battre le `hidden sm:flex` de Tailwind sur .logo-text
       de nexus-sphere.html. */
    [data-nexus-brand-text] {
        display: flex !important;
    }
}

/* ── ≥ 768px : Skipper AI rectangulaire à label ───────────────────────── */
@media (min-width: 768px) and (max-width: 1279px) {

    [data-nexus-skipper-label] {
        display: inline !important;
    }
}

/* ── < 768px : la navbar se réduit à TROIS éléments ──────────────────────
   logo + marque · Skipper AI carré · avatar. Rien d'autre.

   Messagerie et alertes ne disparaissent pas de l'application : ce sont des
   entrées du drawer « Plus » (vérifié — `messages` et `alerts` figurent dans
   VESSEL_NAV_ITEMS, donc parmi les 11 liens du panneau). Les retirer d'ici
   supprime un doublon, pas un accès.

   Le chevron part avec : l'avatar seul suffit à signifier un menu, et sa
   largeur est précisément ce qui manquait au nom de marque à 393px.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    [data-nexus-navbar-secondary],
    [data-nexus-user-chevron] {
        display: none !important;
    }

    /* ── GÉOMÉTRIE COMMUNE ────────────────────────────────────────────
       Référence : le rendu de nexus-myvessel.html à 393px. sphere s'y
       aligne ici plutôt que par des surcharges locales — c'est la règle.

       Les valeurs viennent TOUTES de ce bloc : aucune feuille portail ne
       redimensionne le logo, le bouton avatar ou le padding de navbar sous
       768px. Si un écart réapparaît, c'est qu'une surcharge a été
       réintroduite ailleurs, pas qu'il faut compenser ici. */

    /* Padding : sphere cumulait `.mp-header { padding: 0 16px }` ET un
       `px-4` sur son conteneur interne, soit 64px contre 48 sur myvessel.
       La valeur est posée ici ; l'outer padding de sphere est neutralisé
       dans css/sphere-nav.css, qui ne fait que désamorcer l'héritage. */
    [data-nexus-navbar] {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Le carré de marque et le logotype au palier mobile sont dans
       css/nexus-brand.css. Ne pas les réintroduire ici. */

    /* Écart logo → nom : `gap-3` (12px) sur myvessel, `--navbar-gap-logo-title`
       (16px, et 1px par défaut dans js/navbar-config.js — deux défauts
       contradictoires pour la même variable) sur sphere. */
    [data-nexus-brand-text] {
        margin-left: 0.75rem !important;
        min-width: 0;
    }

    /* Bouton du menu utilisateur : `px-3` (24px) sur sphere contre
       `p-1 pr-3` (16px) sur myvessel. L'avatar lui-même fait 40px des deux
       côtés — c'est ce padding qui débordait, pas lui. */
    [data-nexus-user-button] {
        padding: 0.25rem 0.75rem 0.25rem 0.25rem !important;
        gap: 0 !important;
    }

    [data-nexus-skipper-label] {
        display: none !important;
    }

    /* Carré, cible tactile 44px, sans padding horizontal résiduel :
       `px-4` (myvessel) et `padding: 8px 16px` (sphere) sont tous deux
       neutralisés, sinon le bouton resterait un rectangle vide. */
    [data-nexus-skipper] {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0 !important;
        gap: 0 !important;
        justify-content: center;
        flex-shrink: 0;
        /* Forme commune. css/marketplace-responsive.css:804 impose
           `border-radius: 50%` à .mp-btn-chat sous 640px — un cercle sur
           sphere face au `rounded-lg` de myvessel. Spécificité égale, cette
           feuille est chargée après : la valeur est neutralisée sans
           `!important` et sans contre-règle côté portail. */
        border-radius: 0.5rem;
    }
}

/* Les valeurs de référence ≥768px — carré public, carré professionnel,
   logotype — sont dans css/nexus-brand.css. Ne pas les réintroduire ici. */

/* ═══════════════════════════════════════════════════════════════
   .nexus-hero — ENCART D'ACCUEIL PARTAGÉ

   Extrait du hero de nexus-myvessel.html (#welcomeBanner), qui était
   du markup Tailwind inline. Il n'existait AUCUN composant hero
   partagé dans le produit : css/design-tokens.css porte des tokens
   `--hero-*` que personne ne consomme, et les trois portails qui ont
   un hero l'ont chacun réimplémenté.

   ── PORTÉE ─────────────────────────────────────────────────────
   nexus-smart-research.html le consomme. nexus-myvessel.html garde
   son markup inline pour l'instant : sa migration est une décision
   séparée, et la faire ici l'aurait modifié sans smoke test.

   Quand elle viendra, remplacer #welcomeBanner par cette structure
   suffit — les deux rendus sont volontairement identiques, à une
   exception près documentée ci-dessous.

   ── LE GRADIENT ────────────────────────────────────────────────
   myvessel utilise `from-cyan-600 via-cyan-500 to-blue-500`, hérité
   d'avant le Design System. Ce composant emploie le token de marque
   navy → cyan, seul gradient autorisé. C'est le seul écart avec
   l'original, et il est délibéré : migrer myvessel alignera son hero
   sur le DS par la même occasion.

   ── STRUCTURE ──────────────────────────────────────────────────
   <section class="nexus-hero">
     <div class="nexus-hero-glow nexus-hero-glow--tr"></div>
     <div class="nexus-hero-glow nexus-hero-glow--bl"></div>
     <div class="nexus-hero-body">
       <div class="nexus-hero-mark">N</div>
       <div class="nexus-hero-text">
         <h2 class="nexus-hero-title">…</h2>
         <p class="nexus-hero-subtitle">…</p>
       </div>
     </div>
   </section>

   Les deux `glow` sont décoratifs et `aria-hidden`. Ils reprennent
   les halos flous de l'original, qui donnent sa profondeur au fond.
   ═══════════════════════════════════════════════════════════════ */

.nexus-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    color: #ffffff;
    background: var(--nexus-gradient-brand);
}

.nexus-hero-glow {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
}

.nexus-hero-glow--tr {
    top: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
    background: rgba(255, 255, 255, 0.10);
    transform: translate(50%, -50%);
    filter: blur(40px);
}

.nexus-hero-glow--bl {
    bottom: 0;
    left: 0;
    width: 12rem;
    height: 12rem;
    background: rgba(0, 185, 209, 0.20);
    transform: translate(-50%, 50%);
    filter: blur(24px);
}

.nexus-hero-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Carré de marque. `flex-shrink: 0` : à 393px, le titre passe sur
   trois lignes — le carré ne doit pas se comprimer pour autant. */
.nexus-hero-mark {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.nexus-hero-mark img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* `min-width: 0` : sans lui, un mot long empêcherait le bloc de
   rétrécir et déborderait le hero en flex. */
.nexus-hero-text {
    min-width: 0;
}

.nexus-hero-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.nexus-hero-subtitle {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

/* Troisième ligne du hero, sous le sous-titre.
   Emplacement DISTINCT de .nexus-hero-subtitle, et c'est le point :
   le sous-titre porte un réglage administrable (module_configs), qu'un
   contenu applicatif ne doit pas écraser. Le portail y range ce qui lui
   appartient — sur SMART RESEARCH, le résumé du projet d'achat.
   Vide par défaut : sans contenu, la ligne ne prend aucune place. */
.nexus-hero-meta {
    margin-top: 0.625rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}

.nexus-hero-meta:empty {
    display: none;
}

@media (min-width: 768px) {
    .nexus-hero {
        padding: 2rem;
    }
    .nexus-hero-body {
        gap: 1.25rem;
    }
    .nexus-hero-mark {
        width: 4rem;
        height: 4rem;
        font-size: 1.75rem;
    }
    .nexus-hero-title {
        font-size: 1.5rem;
    }
    .nexus-hero-subtitle {
        font-size: 0.9375rem;
    }
}

/* Les halos coûtent deux `filter: blur()` en peinture. Sur un écran
   étroit ils n'apportent presque rien : on les retire plutôt que de
   les faire payer. */
@media (max-width: 480px) {
    .nexus-hero-glow {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PLAFOND DU LOGO BLOC — OPT-IN via :root[data-nexus-brand-caps]

   ── CE QUI RESTE ICI, ET POURQUOI LUI SEUL ──────────────────────
   Le bloc ne couvre plus qu'un objet : le LOGO BLOC, l'image unique
   qui remplace à elle seule marque + titre en `brand_mode: 'bloc'`.
   Sa hauteur vient de la config admin, sans échelle de référence à
   laquelle la rapporter — c'est exactement le cas que `min()` sert.

   Le carré de marque en est sorti en db04256, le logotype le
   2026-08-18 : tous deux sont désormais dérivés de
   --nexus-brand-mark-size-*, dans css/nexus-brand.css. Leurs
   anciennes règles étaient à (0,3,1) et auraient battu les règles de
   référence. Ne pas les réintroduire ici.

   ── `min()` BORNE, IL N'IMPOSE PAS ──────────────────────────────
   min(var(--…), 32px) laisse une config à 24px valoir 24px, et
   écrête une config à 50px. L'admin reste maître dans son domaine
   de validité ; on ne corrige que ce qui déborde. Ne pas remplacer
   par une valeur fixe.

   Les plafonds 48 / 40 / 32px dérivent de la hauteur interne utile
   de la navbar, mesurée le 2026-08-06 : 80px − 2 × 16px = 48px. Une
   image de 60px y débordait, même sur desktop.

   ── POURQUOI OPT-IN ─────────────────────────────────────────────
   Les autres portails portent les mêmes crochets [data-nexus-brand-*]
   sans déclarer `data-nexus-brand-caps` sur <html>. L'adoption reste
   un geste délibéré, portail par portail. Seul
   nexus-smart-research.html l'a fait à ce jour.

   --nexus-brand-bloc-h est posée par NavbarConfig.applyToNexus(),
   repli 50px, le défaut de NAVBAR_DEFAULTS. C'est la SEULE des trois
   variables d'origine qui ait encore un consommateur : --nexus-brand-mark-h
   et --nexus-brand-title-h ont été retirées avec leurs dernières règles.
   ═══════════════════════════════════════════════════════════════ */

:root[data-nexus-brand-caps] [data-nexus-brand-mark] img,
:root[data-nexus-brand-caps] [data-nexus-brand-title] img,
:root[data-nexus-brand-caps] [data-nexus-brand-bloc] img {
    width: auto;
    object-fit: contain;
}

/* ≥ 1280px — plafond à la hauteur interne utile de la navbar

   NE FIGURENT PLUS DANS CES PLAFONDS, et ne doivent pas y revenir :

     · le CARRÉ DE MARQUE — porté par --nexus-brand-mark-size-public /
       -pro depuis db04256 ;
     · le LOGOTYPE — porté par --nexus-brand-title-ratio depuis le
       2026-08-18, sa hauteur étant désormais dérivée du carré.

   Les deux vivent dans css/nexus-brand.css, feuille partagée par les
   six portails.

   Les deux étaient à (0,3,1) et l'auraient emporté sur les règles de
   référence, laissant deux sources pour le même objet.

   Le plafond ci-dessous ne concerne plus que le LOGO BLOC, qui remplace
   à lui seul marque + titre en `brand_mode: 'bloc'`. Il n'est dérivé
   d'aucune échelle : c'est une image unique dont la hauteur vient de la
   config admin et peut déborder la navbar. C'est exactement le cas que
   `min()` sert — borner sans imposer. */

:root[data-nexus-brand-caps] [data-nexus-brand-bloc] img {
    max-height: min(var(--nexus-brand-bloc-h, 50px), 48px);
}

/* 768 – 1279px */
@media (min-width: 768px) and (max-width: 1279px) {
    :root[data-nexus-brand-caps] [data-nexus-brand-bloc] img {
        max-height: min(var(--nexus-brand-bloc-h, 50px), 40px);
    }
}

/* < 768px — aligné sur le carré de marque du chrome générique */
@media (max-width: 767px) {
    :root[data-nexus-brand-caps] [data-nexus-brand-bloc] img {
        max-height: min(var(--nexus-brand-bloc-h, 50px), 32px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — mouvement réduit
   Le drawer bascule instantanément ; l'état reste parfaitement lisible.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) and (prefers-reduced-motion: reduce) {
    [data-autohide-panel],
    :root.nexus-drawer-open [data-autohide-panel],
    #nexus-drawer-backdrop,
    :root.nexus-drawer-open #nexus-drawer-backdrop {
        transition: none;
    }
}