/* =============================================================================
   socle/bandeau-message.css — barre haute des pages de connexion (message BO)
   -----------------------------------------------------------------------------
   Le message personnalisable du Back-Office défile en boucle en haut de TOUTES les
   pages de connexion. Markup : `Views/Shared/Layout/_BandeauMessageConnexion.cshtml`,
   comportement : `assets/js/Login/BandeauMessageConnexion.js`.

   Fichier placé dans `socle/` parce qu'il doit être servi aux DEUX layouts de
   connexion : `_LoginLayout` ne charge pas `login-generique.css`. Il est lié en
   <link> direct dans les deux, comme `socle/loaders.css` et
   `socle/ecran-construction.css`.
   ============================================================================= */

.tg-bandeau-msg {
    --tg-bandeau-msg-hauteur: 2.5rem;
    /* 🛑 Valeur POSEE ICI, et non reprise de `var(--bs-info)` : les deux layouts de connexion ne
       chargent pas le meme jeu de feuilles, donc les tokens n'y ont pas la meme valeur. Mesure du
       2026-08-25 : `--bs-info` vaut #7096ff sur la page de connexion (theme Teogest) mais #0dcaf0
       sur les pages PERSONNALISEES, qui tombent sur le Bootstrap natif (`--bs-primary` y vaut
       #0d6efd, et `--bs-main` est carrement vide). La barre changeait donc de couleur d'une page a
       l'autre. Le jour ou `_LoginLayout` chargera le theme, cette ligne pourra redevenir
       `var(--bs-info)`. */
    --tg-bandeau-msg-fond: #7096ff;
    /* Réécrite en inline par le JS, d'après la longueur réelle du texte. */
    --tg-bandeau-msg-duree: 30s;
    /* `fixed` et non en flux : `_LoginGeneriqueLayout` centre son <body> en flex
       (`d-flex align-items-center`), une barre en flux s'y retrouverait au milieu
       de l'écran. La hauteur est rendue au flux par `.tg-bandeau-msg-cale`. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Sous les notifications TgNotify (1090) — sinon une erreur de connexion passerait
       dessous — et très en dessous de l'écran « Préparation… » (20000). */
    z-index: 1080;
    display: flex;
    align-items: center;
    height: var(--tg-bandeau-msg-hauteur);
    overflow: hidden;
    background-color: var(--tg-bandeau-msg-fond);
    color: #fff;
    /* 1rem et non .875rem : a 14 px les emoji du message devenaient minuscules et se perdaient
       sur le fond colore. */
    font-size: 0.875rem;
}

/* NIVEAU du message, choisi au Back-Office (Message de connexion) : seul le fond change. Classe posée par
   le JS d’après la réponse du serveur (MessageConnexionService.ClasseCssBandeau) : « tg-bandeau-msg-- » suivi
   du nom du niveau en minuscules. Le niveau « info » garde le fond par défaut ci-dessus, sans règle propre.
   Valeurs du thème Teogest posées en dur, pour la même raison que le fond par défaut. */
.tg-bandeau-msg--avertissement {
    --tg-bandeau-msg-fond: #ff815e;
}

.tg-bandeau-msg--important {
    --tg-bandeau-msg-fond: #ff0f2c;
}

.tg-bandeau-msg-cale {
    flex: 0 0 auto;
    height: 2.5rem;
}

/* La piste porte DEUX copies du message, d'où la translation de -50% : la copie 2
   arrive exactement là où commençait la copie 1, la boucle est donc sans raccord. */
/* 🛑 UN SEUL exemplaire du message, jamais deux a l'ecran : la piste part du MILIEU de la
   fenetre (`50vw`) et ne s'arrete qu'une fois entierement sortie a gauche (`-100%` de sa propre
   largeur). Une boucle a deux copies afficherait le message EN DOUBLE des qu'il est plus court
   que l'ecran. `position: absolute` : la piste ne doit pas etre contrainte par la largeur du
   bandeau, sinon un texte long serait replie. */
.tg-bandeau-msg__piste {
    position: absolute;
    left: 0;
    white-space: nowrap;
    will-change: transform;
    animation: tg-bandeau-msg-defile var(--tg-bandeau-msg-duree, 30s) linear infinite;
}

/* Départ au MILIEU de la fenêtre (50vw) et non plus au bord droit : le message est lisible dès
   l’affichage de la page (demande du dev, 2026-09-28). La durée suit la distance réelle, calculée par
   BandeauMessageConnexion.js : moitié de fenêtre plus largeur du message. */
@keyframes tg-bandeau-msg-defile {
    from { transform: translateX(50vw); }
    to   { transform: translateX(-100%); }
}
/* 🛑 Pause au survol ET au focus clavier : le message peut contenir des liens, qui
   seraient inatteignables sur une cible en mouvement. `:focus-within` couvre la
   navigation au clavier jusqu'au lien. */
.tg-bandeau-msg:hover .tg-bandeau-msg__piste,
.tg-bandeau-msg:focus-within .tg-bandeau-msg__piste {
    animation-play-state: paused;
}

/* Le message est saisi au BO avec sa propre mise en forme (gras, italique, couleur) ;
   seuls les liens ont besoin d'être lisibles sur le fond marine. */
.tg-bandeau-msg a {
    color: #fff;
    text-decoration: underline;
}

.tg-bandeau-msg a:hover,
.tg-bandeau-msg a:focus-visible {
    color: #fff;
    text-decoration: none;
}

/* Separateur pose par le serveur a la place des retours a la ligne du message. C'est la seule
   respiration possible sur une barre d'UNE ligne : on lui donne de l'air et un vrai contraste,
   sinon les segments se lisent comme une phrase interminable. */
.tg-bandeau-msg__sep {
    display: inline-block;
    padding: 0 1.5rem;
    color: #fff;
    opacity: .8;
    font-weight: 700;
}

/* 🛑 Les notifications TgNotify sont calees en `top: 0` avec un `z-index` de 1090, donc AU-DESSUS
   de cette barre : sans ce decalage, une erreur de connexion recouvrirait le message. On ne touche
   pas a leur z-index (il les protege du reste de la page), on descend seulement leur point de
   depart de la hauteur du bandeau, et uniquement quand celui-ci est reellement affiche. */
/* ⚠️ `[id="…"]` et NON `#…` : le minifieur (NUglify, via BuildBundlerMinifier) ne sait pas parser un
   ID a l'interieur de `:has()` — il rend « Expected identifier, found '#bandeauMessageConnexion' »
   et FAIT ECHOUER LE BUILD, sans ecrire le .min. Meme parade que `body:has([id="foot"])` de
   socle/shell.css, ou le piege est deja documente. */
body:has([id="bandeauMessageConnexion"]:not(.d-none)) #tgBandeauContainer {
    top: 2.5rem;
}

/* APERCU EN DIRECT (Back-Office > Message de connexion) : la meme barre, posee DANS une card.
   Elle quitte le `position: fixed` du haut d’ecran pour le flux, et son defilement se mesure a la
   largeur de SA card, et non de la fenetre : la piste part du milieu du bandeau (`left: 50%`)
   et sort entierement a gauche (`left: 0` + `translateX(-100%)`). Animer les deux ensemble reste
   lineaire, donc la vitesse est constante sans mesure JS de la largeur du conteneur. */
.tg-bandeau-msg.tg-bandeau-msg--apercu {
    position: relative;
    z-index: auto;
    border-radius: var(--bs-border-radius);
}

.tg-bandeau-msg--apercu .tg-bandeau-msg__piste {
    animation-name: tg-bandeau-msg-defile-apercu;
}

/* Même départ au milieu que la barre réelle, rapporté à la largeur de la card. */
@keyframes tg-bandeau-msg-defile-apercu {
    from { left: 50%; transform: translateX(0); }
    to   { left: 0;   transform: translateX(-100%); }
}

/* Accessibilité : réglage système « animations réduites » (troubles vestibulaires).
   Le message ne bouge plus ; il reste intégralement lisible en le faisant défiler
   à la main, et la copie de bouclage — inutile sans animation — est masquée. */
@media (prefers-reduced-motion: reduce) {
    .tg-bandeau-msg {
        overflow-x: auto;
    }

    .tg-bandeau-msg__piste,
    .tg-bandeau-msg--apercu .tg-bandeau-msg__piste {
        position: static;
        left: auto;
        transform: none;
        animation: none;
    }

}