/* iManage — toast */

/* ─── Notification box structure ─────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════
   LE BANDEAU EST UN VOLET COULISSANT — UNE SEULE HAUTEUR LE GOUVERNE
   (06/09/2026)

   #notification_slider empile DEUX barres : le message, puis la barre
   permanente (marque, titre, contrôles de session). La boîte n'en montre
   qu'une à la fois — elle fait la hauteur d'UNE barre et `overflow: hidden`
   coupe l'autre. Au repos le volet est remonté d'exactement une barre : le
   message est hors champ, la barre permanente occupe la fente. Une
   notification le ramène à zéro et le message prend la place.

   TROIS VALEURS DOIVENT DONC ÊTRE ÉGALES : la hauteur de la boîte, celle de
   chaque barre, et la distance de translation. Elles étaient écrites en dur à
   trois endroits, et les tenir accordées à la main a produit deux défauts :

     · en mobile, `#notification_message_bar { height: 40px }` de la requête
       média était ANNULÉ par `#notification_message_bar { height: 48px }`
       déclaré plus bas — même spécificité, la dernière gagne. Boîte à 40,
       barre à 48 : la barre dépassait sa propre fente de 8px ;
     · un message long était TRANCHÉ. Mesuré à 375px de large sur « Vous n'avez
       pas l'autorisation d'effectuer cette action. Demandez-la au responsable
       de l'application. » : le texte réclame 56px, la boîte en montrait 40 —
       seize pixels de message perdus, dont la fin de la phrase.

   Un correctif tenté avant celui-ci remplaçait `height` par `min-height` et
   `-48px` par `-100%`. Il partait d'un constat juste mais CASSAIT le volet :
   sans hauteur fixe, la boîte grandit pour contenir les DEUX barres, les
   affiche ensemble et recouvre le menu ; et `-100%` translate alors de la
   hauteur des deux, non d'une.

   La règle tient désormais dans une seule variable, --nt-h. Pour les messages
   longs, toast.js la HAUSSE le temps du message (voir _ajuster_hauteur) : le
   volet reste exact puisque tout en dépend.
   ═══════════════════════════════════════════════════════════════════════ */
/* La variable vit sur :root, PAS sur #notification_box. Le décalage du corps
   de page (body, imanage.css) et la position collante du menu (.navbar,
   menu.css) doivent la suivre eux aussi — et ils ne sont pas des descendants
   de la boîte, ils n'en hériteraient jamais. C'est ce qui manquait au premier
   jet de ce correctif : la boîte grandissait à 72px et recouvrait le menu,
   resté à 48. */
:root {
    --nt-h: 48px;
    /* LE MOUVEMENT DU BANDEAU, à lui seul (06/09/2026, demande du propriétaire).
       Il empruntait --transition-slow (0,4s), un token PARTAGÉ avec les tiroirs,
       la boîte de connexion et le conteneur de formulaire : le ralentir aurait
       alourdi toute l'application.
       0,6s, et une courbe ease-in-out cubique — cubic-bezier(0.65, 0, 0.35, 1).
       Elle démarre et finit lentement, avec de la vitesse au milieu : un
       bandeau qui descend sur le contenu doit s'annoncer, pas surgir. */
    --nt-transition: 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

#notification_box {
    width: 100%;
    position: fixed;
    z-index: 1090;
    background: var(--bg-notification);
    height: var(--nt-h);
    overflow: hidden;
    top: 0;
    left: 0;
    /* La hauteur s'anime avec le volet : un message long qui grandirait d'un
       coup ferait sauter la page sous lui. */
    transition: height var(--nt-transition);
}
/* Mobile : barre plus compacte. Une seule déclaration suffit — tout le reste
   en découle, et plus rien ne peut la contredire plus bas. */
@media (max-width: 575.98px) {
    :root { --nt-h: 40px; }
    .notification_message_content { padding: 0 36px; }
}

#notification_slider {
    transform: translateY(calc(-1 * var(--nt-h)));
    transition: transform var(--nt-transition);
}

#notification_slider.show-notification {
    transform: translateY(0);
}

#notification_message_bar {
    height: var(--nt-h);
    background: transparent;
    position: relative;
    transition: background-color var(--transition);
}

/* ─── Toast (notification_box) ───────────────────────────── */
.notification_message_content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    padding: 0 44px;   /* space for dismiss button on both sides */
}
/* Texte — toujours blanc quel que soit le fond sémantique */
#notification_text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    color: var(--text-on-dark);
}
/* Force l'héritage sur tout le HTML injecté (spans, strong, a, badges...) */
#notification_text *:not(.badge):not(.btn) {
    color: inherit !important;
}
.nt-icon { display: none; }   /* icons disabled */
.nt-dismiss {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-on-dark);
    opacity: var(--opacity-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
    transition: color var(--transition-fast), opacity var(--transition-fast);
    border-radius: var(--radius-xs);
}
.nt-dismiss:hover { color: var(--text-on-dark); opacity: 1; background: rgba(255,255,255,.12); }
/* Barre de progression — fine ligne au bas */
.nt-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: rgba(255,255,255,.4);
    width: 100%;
    border-radius: 0 0 0 0;
}
/* Couleurs sémantiques */
/* Le bandeau de succès prend un DÉGRADÉ qui va vers le plus foncé (04/09/2026,
   demande du propriétaire de LEMAI, posée ici pour les dix-huit projets qui
   partagent ce socle plutôt qu'en surcharge d'un seul).
   Il se construit à partir de --status-success et le fonce par color-mix : il
   reste donc VERT partout, et suit un projet qui redéfinirait ce jeton. Sur un
   bandeau qui passe deux secondes devant les yeux, l'aplat clair manquait
   d'assise. La couleur de repli reste servie pour qui ne connaît pas
   background-image. */
/* `.bg-success` est repris EN PLUS de `.nt-success` : toast.js traduit bien
   l'un en l'autre (ligne 69), mais seulement pour qui passe par le composant.
   Trois projets ont leur propre couche de notification et posent la classe
   Bootstrap directement sur le bandeau — le dégradé les aurait manqués en
   silence, ce que la session dep_boisson a mesuré avant de le signaler
   (04/09/2026). Un sélecteur de plus coûte moins qu'une dérive invisible. */
#notification_message_bar.nt-success,
#notification_message_bar.bg-success {
    background: var(--status-success);
    background-image: linear-gradient(135deg,
        var(--status-success) 0%,
        color-mix(in srgb, var(--status-success) 78%, black) 100%);
}
#notification_message_bar.nt-warning { background: var(--status-warning); }
#notification_message_bar.nt-danger  { background: var(--status-danger); }
#notification_message_bar.nt-info    { background: var(--accent); }

/* ─── Brand (logo + label) — v3.6.0 ─────────────────────────────────
   #brand_home est le lien cliquable de la barre supérieure (configuré par
   chaque projet via iManage.toast.configure({brand_label, logo_url, ...})).
   Il déclenche la navigation vers brand_link_id (typiquement 'dashboard').
*/
#brand_home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}
#brand_home:hover { opacity: 0.85; }

#brand_home .brand-logo {
    height: 22px;
    width: auto;
    max-width: 140px;
    display: block;
    object-fit: contain;
    /* Le logo est rendu blanc sur la barre sombre via filter (compatible logos transparents).
       Les projets dont le logo est déjà clair peuvent annuler ce filter dans leur app.css. */
    filter: brightness(0) invert(1);
}

#brand_home .brand-label {
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
}