// dans les attributs style="" inline du template sans passer par la compilation Sass.

/* L'app force body{background:lightgrey} globalement (app.scss) : on retablit
   le fond clair du design uniquement sur cette page.
   MODIF: font-family retire du body (app.scss charge apres avec !important et gagne) ;
   la police est appliquee directement sur les conteneurs de la page login. */
body {
    background: var(--mfp-bg-app) !important;
    color: var(--mfp-text);
}

/* MODIF (retour Sophie) : le bandeau IA de pied de page doit rester visible sans
   defilement sur tout ecran. 100dvh (hauteur visible reelle) au lieu du 100vh de
   .min-vh-100 : sur mobile, 100vh compte la barre d'URL retractable, donc le
   footer se retrouve dessous meme quand le flux est correct. */
body.min-vh-100 {
    min-height: 100dvh;
    /* MODIF (retour Sophie) : min-height seul laisse le body grandir au-dela de
       l'ecran des que la carte ne tient pas, et le footer repart hors champ
       (mesure : bas du footer a 728px pour un ecran de 625). height + overflow
       figent la page a l'ecran ; le debordement est absorbe par le defilement
       interne de .mfp-auth-wrap, donc le bandeau IA reste toujours visible. */
    height: 100dvh;
    overflow: hidden;
}

/* Poppins applique directement sur les conteneurs login pour depasser l'heritage
   de body{font-family:'Open Sans'!important} issu de app.scss. Un selecteur direct
   l'emporte sur une valeur heritee, meme !important sur le parent. */
.mfp-auth-nav,
.mfp-auth-wrap {
    font-family: var(--mfp-font-body);
}

/* ---- Navbar "auth" --------------------------------------------------- */
/* sticky-top bg-white = Bootstrap ; seule la hauteur et la couleur de bordure restent */
.mfp-auth-nav {
    height: 64px;
    border-bottom: 1px solid var(--mfp-border-lt);
}

/* fw-semibold lh-1 = Bootstrap ; letter-spacing et couleur de marque restent */


/* text-decoration-none = Bootstrap ; font-family herite de body */
.mfp-meta-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--mfp-accent);

    &:hover { color: var(--mfp-accent-deep); }
}

/* ---- Scene : carte centree sur une mosaique de logos en filigrane ---- */
.mfp-auth-wrap {
    position: relative;

    /* MODIF (retour Sophie) : min-height:calc(100vh - 64px) reservait toute la
       hauteur restante SANS deduire le footer -> le bandeau IA tombait hors
       ecran a TOUTES les tailles (mesure : +35px en 1920x937, +404px en mobile
       paysage). flex:1 + min-height:0 dans le body flex-column de base.html.twig
       fait l'inverse : le wrap prend ce qui reste une fois la nav ET le footer
       places. Ne pas remettre flex:1 0 auto, qui reproduirait le defaut. */
    flex: 1;
    min-height: 0;

    display: flex;
    /* Centrage par marges auto sur la carte (cf. .mfp-card) plutot que par
       align-items:center : avec un conteneur qui defile, center rogne le HAUT
       du contenu sans moyen de l'atteindre (meme piege que le loader de
       _home_banner.html.twig). */
    /* 3vh : la carte etant centree par marges auto, ce padding ne joue que
       comme marge minimale en cas de debordement -- le reduire ne change rien
       au rendu bureau, mais evite un defilement interne inutile en mobile
       portrait (mesure : 390x800, la carte debordait de quelques pixels). */
    padding: clamp(12px, 3vh, 48px) 24px;

    /* Dernier recours sur ecran tres court (mobile paysage) : c'est la carte qui
       defile a l'interieur du wrap, le footer, lui, reste visible. overflow-x
       reste hidden pour continuer de clipper les tuiles pivotees du fond. */
    overflow-x: hidden;
    overflow-y: auto;
}

.mfp-auth-backdrop {
    position: absolute;
    inset: 0;
    /* MODIF: la grille de tuiles (4 rangees de 120px + gouttieres) est plus haute
       que le wrap sur un ecran court ; comme le wrap defile desormais, ce
       debordement decoratif y ajoutait une zone de defilement fantome. Le
       clipper ici garde le fond purement decoratif. */
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 120px;
    gap: 28px;
    padding: 60px;
    opacity: 0.55;
    pointer-events: none;
    /* fond degage au centre (lisibilite de la carte), tuiles visibles sur les bords */
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 32%, #000 78%);
    mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 32%, #000 78%);

    > div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---- Carte ----------------------------------------------------------- */
.mfp-card {
    /* AJOUT (retour Sophie) : rythme de la carte en variables. Les paliers
       @media (max-height) plus bas ne retouchent que ces valeurs, ce qui laisse
       le rendu strictement identique au-dessus de 780px de hauteur d'ecran. */
    --mfp-card-pad: 40px;
    --mfp-card-stack: 24px;
    --mfp-form-gap: 18px;
    --mfp-field-h: 48px;

    position: relative;
    z-index: 1;
    margin: auto; /* centre tant qu'il y a la place, sans rogner en debordement */
    width: 440px;
    max-width: 100%;
    padding: var(--mfp-card-pad);
    background: var(--mfp-surface);
    border-radius: var(--mfp-radius-xl);
    box-shadow: 0 24px 60px rgba(15, 40, 80, 0.14);
}

/* fw-semibold text-uppercase = Bootstrap ; font-size et letter-spacing restent */
.mfp-kicker {
    font-size: 11.5px;
    color: var(--mfp-text-muted);
    letter-spacing: 0.06em;
}

/* fw-bold mb-0 = Bootstrap ; font-family display, taille et couleur de marque restent */
.mfp-h1 {
    font-family: var(--mfp-font-display);
    font-size: 28px;
    line-height: 1.1;
    color: var(--mfp-navy);
}

/* font-family herite de body */
.mfp-sub {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--mfp-text-muted);
}

/* Gaps repris des style="gap:..." du template (deplaces ici pour etre
   adaptables en media query). Valeurs d'origine inchangees. */
.mfp-card__stack { gap: var(--mfp-card-stack); }
.mfp-card__brand { gap: 14px; }
.mfp-auth-form  { gap: var(--mfp-form-gap); }
.mfp-field-group { gap: 8px; }

/* ---- Champs ---------------------------------------------------------- */
/* fw-semibold text-uppercase = Bootstrap ; display, taille et letter-spacing restent */
.mfp-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    color: var(--mfp-text-muted);
    letter-spacing: 0.06em;
}

.mfp-field__box {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--mfp-field-h, 48px); /* size lg du design (champ d'auth confortable) */
    padding: 0 12px;
    background: var(--mfp-bg-app);
    border: 1px solid var(--mfp-border);
    border-radius: var(--mfp-radius-md);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;

    &:focus-within {
        border-color: var(--mfp-primary);
        box-shadow: var(--mfp-focus-ring);
    }

    &.has-error { border-color: var(--mfp-danger); }
}

/* flex-shrink-0 d-inline-flex align-items-center lh-1 = Bootstrap */
.mfp-field__icon {
    font-size: 16px;
    color: var(--mfp-text-muted);
}

/* font-family herite de body */
.mfp-field__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--mfp-text);
    line-height: 1.2;

    &::placeholder { color: var(--mfp-text-soft); }
}

/* flex-shrink-0 d-inline-flex align-items-center = Bootstrap */
.mfp-field__toggle {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--mfp-text-muted);
    cursor: pointer;

    &:hover { color: var(--mfp-text); }
}

/* ---- Boutons --------------------------------------------------------- */
/* font-family herite de body */
.mfp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    border-radius: var(--mfp-radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out, transform 80ms ease-out;

    &:active { transform: translateY(1px); }
}

.mfp-btn--secondary {
    background: var(--mfp-surface);
    color: var(--mfp-text);
    border-color: var(--mfp-border);

    &:hover { background: var(--mfp-bg-app); color: var(--mfp-text); }
}

/* ---- Divers ---------------------------------------------------------- */
/* text-decoration-none = Bootstrap ; font-family herite de body */
.mfp-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--mfp-accent);

    &:hover { color: var(--mfp-accent-deep); }
}

.mfp-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0;

    &::before,
    &::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--mfp-border-lt);
    }

    /* font-family herite de body */
    span {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--mfp-text-soft);
        letter-spacing: 0.06em;
    }
}

/* ---- Ecrans courts --------------------------------------------------- */
/* AJOUT (retour Sophie) : la carte fait 580px a elle seule ; avec la nav (64) et
   le bandeau IA (35), il faut ~730px d'ecran pour tout voir. En dessous, on
   resserre le rythme plutot que de renvoyer le footer hors champ. Rien ici ne
   s'applique au-dessus de 780px : l'affichage bureau reste identique. */
@media (max-height: 780px) {
    .mfp-auth-nav { height: 56px; }

    .mfp-card {
        --mfp-card-pad: 26px;
        --mfp-card-stack: 16px;
        --mfp-form-gap: 12px;
        --mfp-field-h: 44px;
    }

    .mfp-h1 { font-size: 23px; }
    .mfp-sub { margin-top: 6px; font-size: 13px; }
    .mfp-btn { padding: 10px 16px; }
}

/* Mobile en paysage : meme a ce regime la carte ne peut pas tenir (il resterait
   ~290px utiles). Elle defile alors dans le wrap -- le footer, lui, reste
   visible, ce qui est la demande. */
@media (max-height: 620px) {
    .mfp-auth-nav { height: 52px; }

    .mfp-card {
        --mfp-card-pad: 20px;
        --mfp-card-stack: 12px;
        --mfp-form-gap: 10px;
        --mfp-field-h: 40px;
    }

    .mfp-h1 { font-size: 21px; }
    .mfp-btn { padding: 9px 14px; }
}