@charset "UTF-8";
/* ==========================================================================
   INFSS Scolarité — Habillage photographique institutionnel
   Photographies officielles de l'INFSS (infss-mali.org) : fond défilant de
   l'écran de connexion et bandeau illustré en tête de chaque écran.
   Aucun style en ligne (politique de sécurité stricte) : les images sont
   portées par des balises <img>, l'état par des classes.
   ========================================================================== */

/* ------------------------------------- 1. Fond défilant de la connexion */
.auth-slides { position: absolute; inset: 0; }
.auth-slides img.bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 58% 46%;
    opacity: 0; transform: scale(1.08);
    transition: opacity 1.6s var(--ease), transform 9s linear;
    will-change: opacity, transform;
}
.auth-slides img.bg.is-active { opacity: 1; transform: scale(1); }
.auth-slides img.bg.is-leaving { opacity: 0; transition: opacity 1.6s var(--ease); }

/* Voile de lecture : le texte de la maquette 01 reste lisible sur toute photo. */
.auth-photo::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(120% 90% at 18% 34%, rgba(3, 36, 52, .55) 0%, rgba(3, 36, 52, 0) 70%);
    pointer-events: none;
}

/* Pastilles de navigation du diaporama */
.auth-dots {
    position: absolute; z-index: 4; left: clamp(40px, 4.3vw, 82px); bottom: clamp(26px, 4vh, 46px);
    display: flex; align-items: center; gap: 9px;
}
.auth-dot {
    width: 26px; height: 4px; border-radius: 3px; padding: 0;
    background: rgba(255, 255, 255, .34); cursor: pointer;
    transition: background .25s var(--ease), width .25s var(--ease);
}
.auth-dot:hover { background: rgba(255, 255, 255, .6); }
.auth-dot.is-active { width: 38px; background: linear-gradient(90deg, #f7901e, #ed0584); }
.auth-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Légende de la photo courante */
.auth-caption {
    position: absolute; z-index: 4; right: clamp(24px, 3vw, 54px); bottom: clamp(26px, 4vh, 46px);
    max-width: 46%; text-align: right;
    font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    opacity: 0; transition: opacity .5s var(--ease);
}
.auth-caption.is-shown { opacity: 1; }
.auth-caption b { display: block; color: #fff; font-weight: 700; font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
    .auth-slides img.bg { transition: opacity .01ms; transform: none; }
    .auth-slides img.bg.is-active { transform: none; }
}
@media (max-width: 860px) {
    .auth-dots, .auth-caption { display: none; }
}

/* ------------------------------- 2. Bandeau illustré en tête des écrans */
.pg-band {
    position: relative; display: flex; align-items: center; gap: 18px;
    height: 104px; margin: 0 0 18px; padding: 0 22px 0 24px;
    border-radius: 14px; overflow: hidden; isolation: isolate;
    background: #073246;
    box-shadow: 0 2px 10px rgba(12, 40, 60, .08);
}
.pg-band-photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 42%; z-index: 0;
}
.pg-band::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(96deg, rgba(4, 40, 58, .95) 0%, rgba(5, 46, 66, .84) 38%, rgba(6, 58, 84, .5) 70%, rgba(7, 72, 102, .3) 100%);
}
.pg-band::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 2;
    background: linear-gradient(180deg, #ed0584 0%, #f7901e 42%, #66b33e 100%);
}
.pg-band-ic {
    position: relative; z-index: 3; flex: 0 0 auto;
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .13); color: #fff;
    border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(3px);
}
.pg-band-in { position: relative; z-index: 3; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-band-eyebrow {
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
    color: #8fd3f0;
}
.pg-band-title { font: 800 20px/1.2 var(--font-title); color: #fff; letter-spacing: -.3px; }
.pg-band-sub { font-size: 12.5px; color: rgba(226, 240, 248, .88); line-height: 1.45; max-width: 62ch; }
.pg-band-credit {
    position: absolute; right: 14px; bottom: 8px; z-index: 3;
    font-size: 9.5px; color: rgba(255, 255, 255, .62); letter-spacing: .2px;
    text-shadow: 0 1px 3px rgba(3, 26, 38, .75);
}
.pg-band-credit a { color: inherit; }
.pg-band-credit a:hover { color: #fff; text-decoration: none; }

/* La bannière ne doit pas repousser les écrans denses déjà calés sur 941 px. */
.pg-band.is-slim { height: 76px; }
.pg-band.is-slim .pg-band-title { font-size: 17px; }
.pg-band.is-slim .pg-band-sub { display: none; }

@media (max-width: 1024px) {
    .pg-band { height: auto; min-height: 92px; padding: 14px 18px; }
    .pg-band-sub { display: none; }
}
@media (max-width: 760px) {
    .pg-band { margin-bottom: 14px; border-radius: 12px; }
    .pg-band-ic { width: 38px; height: 38px; }
    .pg-band-title { font-size: 17px; }
    .pg-band-credit { display: none; }
}
@media print {
    .pg-band { display: none; }
}