@charset "UTF-8";
/* ==========================================================================
   MoJo Akademi — présence de la marque
   --------------------------------------------------------------------------
   Chargée par tous les gabarits (administration, espaces, connexion, site
   public, erreurs). L'établissement reste la marque principale ; MoJo
   Akademi signe la plateforme, discrètement, une fois par écran :

     ≥ 992 px  dans le bas du menu latéral (toujours visible) ;
     < 992 px  le menu est replié hors écran : la signature passe dans le
               pied de page. Jamais les deux à la fois.

   Chaque jeton a un repli : la feuille tient seule, sans uproh-ds.css.
   Rien de ceci ne s'imprime : un document officiel porte l'établissement.
   ========================================================================== */

:root {
    --mojo-navy: #0B2447;
    --mojo-gold: #A8904E;
    --mojo-ink: var(--u-ink-4, #5F6B85);
    --mojo-line: var(--u-line, rgba(21, 27, 46, .09));
    --mojo-ease: cubic-bezier(.22, .61, .36, 1);
}

/* 1. Le logo --------------------------------------------------------------- */
.mojo-logo { display: inline-flex; line-height: 0; }
.mojo-logo img { display: block; max-width: 100%; height: auto; }
.mojo-logo.is-texte { line-height: 1.2; color: var(--mojo-navy); font-weight: 700; letter-spacing: .01em; }

/* Sur fond sombre : une pastille claire, un filet d'or. Le nom « MoJo » est
   bleu marine et disparaîtrait sinon. */
.mojo-logo.is-plaque {
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(168, 144, 78, .35);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 24px -14px rgba(0, 0, 0, .55);
}

/* 2. La signature --------------------------------------------------------- */
.mojo-sig {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.mojo-sig .mojo-logo { opacity: .86; transition: opacity .4s var(--mojo-ease), transform .5s var(--mojo-ease); }
.mojo-sig:hover .mojo-logo { opacity: 1; transform: translateY(-1px); }
/* Une pastille reste franche : atténuée, elle virerait au gris sur fond sombre. */
.mojo-sig .mojo-logo.is-plaque { opacity: 1; }

/* Bas du menu latéral (administration et espaces) : en ligne, compacte,
   épinglée hors de la zone qui défile. */
.mojo-sig--barre {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    margin: 0 16px;
    padding: 12px 0 14px;
    border-top: 1px solid var(--mojo-line);
}
/* Espaces : le menu entier défile, la signature se pose au bout. */
.pnl-sidebar .mojo-sig--barre { margin-top: auto; }
/* Rail replié de l'administration : 80 px, pas de place pour une signature. */
.pcoded-navbar.navbar-collapsed .mojo-sig--barre { display: none; }
.pcoded-navbar.navbar-collapsed:hover .mojo-sig--barre { display: flex; }

/* Thème sombre des espaces : la pastille revient. */
:root[data-theme="dark"] .mojo-sig--barre .mojo-logo,
:root[data-theme="dark"] .mojo-sig--pied .mojo-logo,
:root[data-theme="dark"] .mojo-empty::after {
    padding: 6px 10px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, .94);
}

/* Connexion : sous la carte du formulaire, sur le fond sombre. La pile
   reprend la perspective du volet, dont la carte a besoin pour son relief. */
.a-panel-pile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    perspective: 1400px;
}
.mojo-sig--auth { margin-top: 26px; }

/* Site public : dans la dernière ligne du pied de page, sombre. */
.mojo-sig--public { flex-direction: row; gap: 12px; }
.mojo-sig--public .mojo-logo.is-plaque { padding: 4px 8px; border-radius: 10px; }

/* Pages d'erreur : la carte, puis la signature en dessous. */
main.u-error { flex-direction: column; }
.mojo-sig--erreur { margin-top: 28px; }

/* 3. Pied de page des espaces --------------------------------------------- */
.mojo-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    margin: 28px 0 8px;
    padding: 14px 4px 0;
    border-top: 1px solid var(--mojo-line);
    font-size: .74rem;
    line-height: 1.5;
    color: var(--mojo-ink);
}
.mojo-foot-ligne { margin: 0; }
.mojo-foot-ligne strong { color: var(--u-ink-2, #454F6E); font-weight: 650; }
.mojo-foot-ligne.is-discret { font-size: .7rem; }
.mojo-foot a {
    margin-left: 6px;
    color: var(--u-brand-700, #B06709);
    font-weight: 600;
    text-decoration: none;
}
.mojo-foot a:hover { text-decoration: underline; text-underline-offset: 2px; }
.mojo-foot-marque { display: flex; align-items: center; gap: 14px; }
.mojo-foot .mojo-sig--pied { flex-direction: row; gap: 10px; }

/* Le menu latéral porte la signature : pas de doublon dans le pied. Sous
   700 px de haut, le menu garde toute sa hauteur et le pied reprend le logo. */
@media (min-width: 992px) and (min-height: 700px) {
    .mojo-foot .mojo-sig--pied { display: none; }
}
@media (max-height: 699.98px) {
    .mojo-sig--barre { display: none !important; }
}
@media (max-width: 640px) {
    .mojo-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* 4. États vides ------------------------------------------------------------- */
/* Le script du pied de page marque le premier grand état vide de l'écran :
   un tableau de bord vide ne se couvre pas de logos. */
.mojo-empty::after {
    content: '';
    display: block;
    width: 72px;
    height: 54px;
    margin: 18px auto 0;
    background: url('../../uploads/setting/mojo_akademi_logo-320.webp') center / contain no-repeat content-box;
    opacity: .32;
}

/* 5. Accessibilité, impression ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .mojo-sig .mojo-logo { transition: none; opacity: .9; }
}
@media print {
    .mojo-sig, .mojo-foot { display: none !important; }
    .mojo-empty::after { display: none !important; }
}