/* Couche de marque, portail public.
 *
 * Les jetons viennent de tokens.css, chargé juste avant celui-ci. Ce qui
 * suit ne rattrape que ce qu'aucune variable ne peut atteindre.
 *
 * La raison tient à la façon dont le portail est compilé : contrairement au
 * bureau, la feuille du site web fige une partie de ses couleurs à la
 * compilation Sass ($body-color, $headings-color, $navbar-bg, $input-bg sont
 * des littéraux dans website.bundle.css). Redéfinir une variable CSS ne les
 * atteint pas. Les règles ci-dessous visent donc des éléments et des blocs
 * structurels, jamais des classes utilitaires internes, pour rester lisibles
 * et survivre aux montées de version.
 *
 * Ordre de chargement, vérifié sur /login : website.bundle, erpnext-web.bundle,
 * portal.css, puis login.bundle. La feuille de connexion passe donc APRÈS
 * celle-ci et gagne à spécificité égale. C'est sans conséquence : elle
 * s'exprime en variables, que tokens.css a déjà réassignées.
 */

/* Le sol. Le portail pose du blanc pur et un texte gris moyen ; la crème et
   l'encre douce donnent la même page en plus posé, et surtout raccordent le
   portail au bureau, qui a déjà ce fond. */
body {
    background-color: var(--maeba-creme);
    color: var(--maeba-encre-douce);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--maeba-encre);
}

a {
    color: var(--maeba-encre);
    text-decoration-color: var(--maeba-bordure-marquee);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--maeba-encre-douce);
    text-decoration-color: var(--maeba-encre);
}

/* Anneau de repérage au clavier, à l'accent, comme sur le bureau. Le portail
   n'en pose aucun de cohérent : les navigateurs retombent sur leur contour
   par défaut, bleu, qui jure avec le reste. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--maeba-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* Rien n'est posé sur .page-card, la carte de connexion, et c'est délibéré.
   login.bundle.css la vise par « .for-login .page-card », de spécificité
   (0,2,0), et passe après cette feuille : toute règle en « .page-card » y
   perdrait. La contourner demanderait soit un !important, soit la reprise des
   six classes d'état internes, deux dettes pour un gain nul. La carte prend
   donc le fond de page en crème, et le formulaire s'y détache par ses champs
   blancs et son bouton encre, ce qui suffit et reste dans l'esprit dépouillé
   de l'écran d'origine. */

/* Barre de navigation du site. $navbar-bg est figé à blanc par Sass, et
   aucun trait ne sépare la barre du contenu une fois le fond passé en crème. */
.navbar {
    background-color: var(--maeba-surface) !important;
    border-bottom: 1px solid var(--maeba-bordure);
}

.navbar .navbar-brand img {
    max-height: 32px;
    width: auto;
}

/* Pied de page. */
.web-footer {
    background-color: var(--maeba-surface-sourde);
    border-top: 1px solid var(--maeba-bordure);
}

.web-footer,
.web-footer a {
    color: var(--maeba-texte-attenue);
}

.web-footer a:hover {
    color: var(--maeba-encre);
}

/* Champs de saisie hors page de connexion (formulaires web, recherche).
   $input-bg et $input-border-color sont figés sur la rampe grise froide ;
   sans cette reprise, un formulaire web garde des champs gris bleutés au
   milieu d'une page crème. */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    background-color: var(--maeba-surface);
    border: 1px solid var(--maeba-bordure-marquee);
    color: var(--maeba-encre-douce);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: var(--maeba-surface);
    border-color: var(--maeba-encre);
    box-shadow: var(--highlight-shadow);
}

::placeholder {
    color: var(--maeba-texte-attenue);
    opacity: 1;
}

/* Actions. Le portail compile ses boutons Bootstrap sur $primary, figé à
   #171717 : l'encre ne les atteint pas par variable. */
.btn-primary,
.btn-dark {
    background-color: var(--maeba-encre);
    border-color: var(--maeba-encre);
    color: var(--maeba-surface);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--maeba-encre-douce);
    border-color: var(--maeba-encre-douce);
    color: var(--maeba-surface);
}

.btn-secondary,
.btn-light,
.btn-default {
    background-color: var(--maeba-surface-sourde);
    border-color: var(--maeba-bordure);
    color: var(--maeba-encre);
}

.btn-secondary:hover,
.btn-light:hover,
.btn-default:hover {
    background-color: var(--maeba-surface-creuse);
    border-color: var(--maeba-bordure-marquee);
    color: var(--maeba-encre);
}

/* Cartes et séparateurs du site, alignés sur le bureau. */
.card {
    background-color: var(--maeba-surface);
    border-color: var(--maeba-bordure);
}

hr {
    border-color: var(--maeba-bordure);
}

/* Blocs de code et citations : le portail sert aussi la documentation. */
pre,
code {
    background-color: var(--maeba-surface-creuse);
    color: var(--maeba-encre);
}

blockquote {
    border-left: 3px solid var(--maeba-accent);
    color: var(--maeba-texte-attenue);
}

/* ------------------------------------------------- fond de l'écran de connexion

   Photographie plein cadre, légèrement floutée, sous un voile encre.

   Portée par « body:has(.for-login) » : la section .for-login n'existe que sur
   l'écran de connexion, le reste du portail n'est donc pas touché. La
   spécificité de :has() est celle de son argument le plus fort, soit (0,1,1)
   ici, ce qui passe devant le « body » de login.bundle.css malgré son
   chargement postérieur.

   Le flou vit sur un pseudo-élément, jamais sur le corps : un filter posé sur
   body aurait emporté le formulaire avec lui. L'agrandissement de 4 % masque
   la frange claire que le flou crée sur les bords de l'image.

   La carte n'a besoin d'aucune règle de fond : elle porte déjà --bg-color,
   donc une surface crème opaque, et se détache seule de la photographie. */

body:has(.for-login) {
    background-color: var(--maeba-encre);
}

body:has(.for-login)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("/assets/maeba_brand/images/login-background.jpg") center / cover no-repeat;
    filter: blur(3px);
    transform: scale(1.04);
    z-index: -2;
}

body:has(.for-login)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(17, 25, 31, 0.42);
    z-index: -1;
}

body:has(.for-login) .page-card {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 32px 64px rgba(0, 0, 0, 0.22);
}

/* Sous le point de rupture, la v16 met la carte en plein écran : il ne reste
   de la photographie que deux liserés sur les côtés. Elle est donc retirée,
   et non seulement masquée. Un pseudo-élément en display:none ne déclenche
   aucune requête, ce qui épargne 204 Ko de données mobiles pour un décor que
   personne ne verra. */
@media (max-width: 575.98px) {
    body:has(.for-login)::before,
    body:has(.for-login)::after {
        display: none;
    }

    body:has(.for-login) .page-card {
        border-radius: 0;
        box-shadow: none;
    }
}