html {
    margin: 0;
    padding: 0;
}

/***********************************************************************************************
*  La couleur de marque
*
*  Le chrome (pastille de notifications, pastille d'initiales, entrée de projet courante,
*  bascule de thème) est teinté à la couleur du logo de l'application — conditionnée par
*  `data-application` sur <body>, comme les variantes de logo le sont par le thème.
*
*  Les valeurs sont relevées sur l'hexagone de chaque logo (`logo-{application}-mini.png`) :
*  `--marque` est l'encre elle-même, `--marque-survol` la même à 18 % plus sombre, et
*  `--marque-claire` une déclinaison lisible sur les surfaces sombres (toutes vérifiées
*  au-delà de 4,5:1 sur le #1a1d20 du chrome sombre — l'encre brute y est trop foncée).
*
*  Point d'extension : une application fille qui n'est pas de cette liste ajoute son bloc
*  ici. Sans lui, elle hérite des valeurs de :root, celles du template.
***********************************************************************************************/
:root {
    --marque: #086672;
    --marque-survol: #07545D;
    --marque-claire: #69C7D3;
}

[data-application="check"] {
    --marque: #005CA9;
    --marque-survol: #004B8B;
    --marque-claire: #69A3D3;
}

[data-application="exploit"] {
    --marque: #2F2F9D;
    --marque-survol: #272781;
    --marque-claire: #7A7AD7;
}

[data-application="monithor"] {
    --marque: #83509B;
    --marque-survol: #6B427F;
    --marque-claire: #A97FBD;
}

[data-application="access"] {
    --marque: #AB1779;
    --marque-survol: #8C1363;
    --marque-claire: #D369AF;
}

body {
    position: relative;
    /* Lato est vendorisée dans fonts.css ; la pile de repli couvre le temps de chargement
       et les environnements où la police n'est pas disponible. */
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
}

#containerPublic {
    min-height:100vh;
}

/* Logo de l'application : sa variante blanche est affichée en thème sombre (le mot
   « easy » de l'hexagone est une réserve, il prend le fond de la page). Les deux images
   sont dans le DOM, le thème choisit laquelle est visible — même motif que l'étoile de
   favori. Règle globale : elle sert dans la navbar, sur la page de connexion et dans le
   pied de page. Seule la variante masquée porte une règle — celle qui est affichée garde
   ainsi le `display` de son contexte (`block` pour le logo du pied de page). */
html:not([data-bs-theme="dark"]) .logo-sombre {
    display: none;
}

[data-bs-theme="dark"] .logo-clair {
    display: none;
}

.toggle-password{
    background-color: #0000;
    border: none;
    flex-direction: row;
    place-items: center;
    height: 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    display: flex;
    justify-content: end;
    top: -3.5rem;
    position: relative;
}

.container-scroller {
    overflow: hidden;
}

.page-body-wrapper {
    min-height: calc(100vh - 60px);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    padding-left: 0;
    padding-right: 0;
    padding-top: 60px;

    &.full-page-wrapper {
        width: 100%;
        min-height: 100vh;
        padding-top: 0;
    }
}

.main-panel {
    transition: width 0.25s ease, margin 0.25s ease;
    width: calc(100% - 235px);
    min-height: calc(100vh - 60px);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.content-wrapper {
    background: #F5F7FF;
    width: 100%;
    min-height: calc(100vh - 60px);
    -webkit-flex-grow: 1;
    flex-grow: 1;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Déclinaison sombre : fond de page plus sombre que les surfaces du chrome
   (#1a1d20), comme le fond clair #F5F7FF est plus soutenu que leur blanc. */
[data-bs-theme="dark"] .content-wrapper {
    background: #16191c;
}
/***********************************************************************************************
*  Page d'accueil (ajoutée par socle-dev) : nom de l'application à la couleur de sa marque.
***********************************************************************************************/
.accueil {
    min-height: 70vh;
}

.accueil-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.accueil-logo-sombre,
[data-bs-theme="dark"] .accueil-logo-clair {
    display: none;
}

[data-bs-theme="dark"] .accueil-logo-sombre {
    display: inline;
}

.accueil-surtitre {
    color: var(--marque);
    letter-spacing: .2em;
    font-size: .85rem;
}

.accueil-nom {
    color: var(--marque);
}

[data-bs-theme="dark"] .accueil-surtitre,
[data-bs-theme="dark"] .accueil-nom {
    color: var(--marque-claire);
}

.accueil-titre {
    letter-spacing: -.02em;
}

.accueil-titre::after {
    content: '';
    display: block;
    width: 4rem;
    height: .3rem;
    margin: 1.25rem auto 0;
    border-radius: 1rem;
    background: var(--marque);
}

[data-bs-theme="dark"] .accueil-titre::after {
    background: var(--marque-claire);
}

.accueil-icone {
    color: var(--marque);
}

/* Carte d'accueil : léger dégradé de la couleur de marque, deux halos flous en fond. */
.accueil-carte {
    width: 100%;
    max-width: 46rem;
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--marque) 10%, var(--bs-body-bg)) 0%,
            var(--bs-body-bg) 55%,
            color-mix(in srgb, #2E9D5B 8%, var(--bs-body-bg)) 100%);
    border: 1px solid color-mix(in srgb, var(--marque) 18%, transparent);
}

.accueil-halo {
    position: absolute;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .35;
    pointer-events: none;
}

.accueil-halo--un {
    top: -9rem;
    left: -8rem;
    background: var(--marque);
}

.accueil-halo--deux {
    right: -9rem;
    bottom: -10rem;
    background: #2E9D5B;
}

[data-bs-theme="dark"] .accueil-halo {
    opacity: .22;
}

/* Pastille de session : arrondie en pilule tant qu'elle tient sur une ligne, moins
   arrondie sur les petits écrans, où elle passe sur deux lignes. */
.accueil-session {
    border-radius: 1.25rem;
}

@media (min-width: 576px) {
    .accueil-session {
        border-radius: 50rem;
    }
}

/* Le billet de l'easter egg : il flotte doucement, se penche au survol. */
.accueil-billet {
    display: inline-flex;
    padding: .5rem;
    border: 0;
    border-radius: 1rem;
    background: transparent;
    cursor: pointer;
    animation: accueil-billet-flotte 3.2s ease-in-out infinite;
    transition: transform .2s ease;
}

.accueil-billet:hover {
    transform: rotate(-6deg) scale(1.08);
}

.accueil-billet:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--marque) 55%, transparent);
    outline-offset: 4px;
}

.accueil-billet__icone {
    width: 88px;
    height: auto;
    filter: drop-shadow(0 .45rem .6rem rgba(0, 0, 0, .18));
}

.accueil-billet--secoue {
    animation: accueil-billet-secoue .5s ease, accueil-billet-flotte 3.2s ease-in-out infinite;
}

@keyframes accueil-billet-flotte {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

@keyframes accueil-billet-secoue {
    0%, 100% { rotate: 0deg; }
    20% { rotate: -14deg; }
    40% { rotate: 12deg; }
    60% { rotate: -8deg; }
    80% { rotate: 5deg; }
}

@media (prefers-reduced-motion: reduce) {
    .accueil-billet,
    .accueil-billet--secoue {
        animation: none;
    }
}

/***********************************************************************************************
*  Pluie d'argent : l'easter egg de la page d'accueil (pluie_argent_controller.js). Chaque
*  billet ou pièce reçoit sa position, sa taille, sa durée, son délai, sa dérive et sa
*  rotation en variables CSS ; le calque ne capte aucun clic.
***********************************************************************************************/
.pluie-argent {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    pointer-events: none;
}

.pluie-argent__element {
    position: absolute;
    top: 0;
    left: var(--x);
    width: var(--taille);
    translate: -50% -120%;
    animation: pluie-argent-chute var(--duree) cubic-bezier(.35, .1, .65, 1) var(--delai) both;
}

.pluie-argent__element svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .2));
}

@keyframes pluie-argent-chute {
    0% {
        translate: -50% -120%;
        rotate: 0deg;
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        translate: calc(-50% + var(--derive)) 110vh;
        rotate: var(--rotation);
        opacity: 0;
    }
}