/* ==========================================================================
   Charte graphique DYN GROUP — portail de connexion Authelia
   --------------------------------------------------------------------------
   Servi en same-origin par le conteneur `authelia-proxy` (nginx) sur
   /dyn-assets/dyn.css. La CSP d'Authelia est `style-src 'self' 'nonce-...'` :
   un <style> inline injecte par sub_filter est REFUSE par le navigateur,
   d'ou cette feuille externe. Ne pas repasser a du CSS inline.

   Couleurs : DYN GROUP = noir #000000, accent leger #CCCCCC (charte, sect. 2).
   Police   : Montserrat (charte, sect. 3), auto-hebergee — `default-src 'self'`
              interdit fonts.gstatic.com.
   ========================================================================== */

/* --- Montserrat (auto-hebergee) ------------------------------------------
   Google Fonts sert UN SEUL fichier woff2 par sous-ensemble pour toutes les
   graisses : c'est la version variable de Montserrat (axe wght 100-900).
   D'ou la plage `font-weight: 100 900` plutot que huit @font-face.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/dyn-assets/fonts/montserrat-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/dyn-assets/fonts/montserrat-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

:root {
    --dyn-black: #000000;
    --dyn-ink: #1a1a1a;
    --dyn-grey-20: #cccccc;
    --dyn-muted: #6b6b70;
    --dyn-line: #e2e2e5;
    --dyn-line-strong: #9a9aa0;
}

/* --- Typographie globale ------------------------------------------------ */

body,
.MuiTypography-root,
.MuiInputBase-root,
.MuiInputBase-input,
.MuiFormLabel-root,
.MuiButton-root {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif !important;
}

/* --- Fond de page ------------------------------------------------------- */

body {
    background: radial-gradient(
        1100px 620px at 50% -12%,
        #ffffff 0%,
        #f5f5f6 52%,
        #e9e9ec 100%
    ) !important;
    background-attachment: fixed !important;
    color: var(--dyn-ink) !important;
}

#root > .MuiBox-root {
    background: transparent !important;
}

/* --- Barre du haut (selecteur de langue) -------------------------------- */

.MuiAppBar-root {
    background: transparent !important;
    box-shadow: none !important;
}

#language-button,
#language-button .MuiTypography-root,
#language-button svg {
    color: #52525b !important;
    font-size: 0.82rem !important;
}

#language-button:hover,
#language-button:hover .MuiTypography-root {
    color: var(--dyn-black) !important;
}

/* --- La carte de connexion ---------------------------------------------- */

.MuiContainer-root.MuiContainer-maxWidthXs {
    position: relative !important;
    max-width: 424px !important;
    padding: 40px 36px 26px !important;
    background: #ffffff !important;
    border: 1px solid var(--dyn-line) !important;
    border-radius: 14px !important;
    /* Detoure le filet DYN ci-dessous sur les angles arrondis. Rien d'autre ne
       deborde de la carte, donc aucun risque de rognage. */
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
        0 18px 40px -16px rgba(0, 0, 0, 0.22) !important;
}

/* Filet noir DYN en tete de carte. Les -1px mordent sur la bordure pour qu'il
   n'y ait pas de liliseré clair entre le filet et le bord de la carte. */
.MuiContainer-root.MuiContainer-maxWidthXs::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 4px;
    background: linear-gradient(90deg, #000000 0%, #3d3d42 55%, var(--dyn-grey-20) 100%);
}

/* --- Logo ---------------------------------------------------------------- */

/* Le logo.png est un visuel 800x450 tres marge : on le cadre par la largeur
   et on rattrape le blanc vertical avec des marges negatives. */
.MuiContainer-root img.MuiBox-root {
    display: block !important;
    width: 100% !important;
    max-width: 260px !important;
    height: auto !important;
    max-height: none !important;
    margin: -26px auto -22px !important;
}

/* --- Titre --------------------------------------------------------------- */

.MuiTypography-h5 {
    font-size: 1.22rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: var(--dyn-ink) !important;
    margin-bottom: 10px !important;
}

/* --- Champs de saisie ---------------------------------------------------- */

.MuiOutlinedInput-root {
    border-radius: 9px !important;
    background: #fcfcfd !important;
}

.MuiOutlinedInput-notchedOutline {
    border-color: var(--dyn-line) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: var(--dyn-line-strong) !important;
}

.MuiOutlinedInput-root.Mui-focused {
    background: #ffffff !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-width: 1.5px !important;
    border-color: var(--dyn-black) !important;
}

.MuiFormLabel-root {
    color: var(--dyn-muted) !important;
}

.MuiFormLabel-root.Mui-focused {
    color: var(--dyn-black) !important;
}

.MuiFormLabel-asterisk {
    color: var(--dyn-line-strong) !important;
}

/* --- Case « Rester connecte » -------------------------------------------- */

.MuiCheckbox-root {
    color: var(--dyn-line-strong) !important;
}

.MuiCheckbox-root.Mui-checked {
    color: var(--dyn-black) !important;
}

.MuiFormControlLabel-label {
    font-size: 0.86rem !important;
    color: #3f3f46 !important;
}

/* --- Bouton principal ---------------------------------------------------- */

#sign-in-button,
.MuiButton-containedPrimary {
    background: var(--dyn-black) !important;
    color: #ffffff !important;
    text-transform: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: 9px !important;
    padding: 10px 18px !important;
    box-shadow: none !important;
    transition: background 0.15s ease, box-shadow 0.15s ease,
        transform 0.08s ease !important;
}

#sign-in-button:hover,
.MuiButton-containedPrimary:hover {
    background: #2b2b30 !important;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5) !important;
}

#sign-in-button:active,
.MuiButton-containedPrimary:active {
    transform: translateY(1px) !important;
}

#sign-in-button:focus-visible,
.MuiButton-containedPrimary:focus-visible {
    outline: 2px solid var(--dyn-black) !important;
    outline-offset: 2px !important;
}

/* --- Liens --------------------------------------------------------------- */

.MuiLink-root {
    color: var(--dyn-ink) !important;
    text-decoration-color: var(--dyn-grey-20) !important;
    text-underline-offset: 3px !important;
    font-size: 0.82rem !important;
}

.MuiLink-root:hover {
    color: var(--dyn-black) !important;
    text-decoration-color: var(--dyn-black) !important;
}

/* Mention « Powered by Authelia » : conservee, simplement discrete.
   Elle vit dans une colonne xs-4 devenue trop etroite depuis que la carte est
   limitee a 424px — d'ou l'elargissement du parent et le nowrap. */
a.MuiLink-root[href*="authelia"] {
    display: inline-block !important;
    color: #a1a1aa !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    text-decoration-color: transparent !important;
}

.MuiContainer-root .MuiGrid-grid-xs-4:has(a.MuiLink-root[href*="authelia"]) {
    flex-basis: 100% !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    text-align: center !important;
}

/* --- Petits ecrans ------------------------------------------------------- */

@media (max-width: 480px) {
    .MuiContainer-root.MuiContainer-maxWidthXs {
        padding: 32px 22px 22px !important;
        border-radius: 12px !important;
    }

    .MuiContainer-root img.MuiBox-root {
        max-width: 220px !important;
    }
}