html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* Application de la police Asap à tous les textes — texte noir par défaut */
html, body, * {
    font-family: "Asap", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: #000;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
a {
    color: #000;
}
a:hover {
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
    .evozen-button {
        background-color: #57befa;
        padding: 0.6em 1em;
        border-radius: 10em;
        border: 0;
        color: #fff;
        font-size: 16px;
    }

    #kc-form-buttons {
        display: flex;
        justify-content: center;
    }

    /* Page erreur : un seul CTA (l’ancien template avait aussi « Revenir à l’application », inutile ici) */
    #kc-error-message #backToApplication {
        display: none !important;
    }

    /* Mot de passe oublié — sous le bouton (ex. login-password) */
    .evozen-forgot-password {
        text-align: center;
        margin-top: 1rem;
    }

    /* Mot de passe oublié — au-dessus du bouton Connexion (échange avec « Se souvenir de moi ») */
    .evozen-forgot-password--above-submit {
        margin-top: 0;
        margin-bottom: 0.25rem;
    }

    .evozen-forgot-password a {
        font-size: 0.9rem;
        color: #333;
    }

    /* Se souvenir de moi — sous le bouton lorsque mot de passe oublié est affiché au-dessus */
    .evozen-remember-me {
        text-align: center;
        margin-top: 1rem;
    }

    /* Lien "Problème de connexion ?" — centré sous la zone options / bouton */
    .evozen-connection-help {
        text-align: center;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid #e5e7eb;
    }

    .evozen-connection-help a {
        font-size: 0.85rem;
        color: #888;
    }

    .evozen-connection-help a:hover {
        color: #57befa;
        text-decoration: underline;
    }

    /* Message « Un e-mail vient de vous être envoyé... » (mot de passe oublié) — fond bleu comme le bouton, texte blanc */
    .alert-success.evozen-alert,
    .evozen-alert.alert-success {
        background-color: #57befa;
        color: #fff;
        border-radius: 0.5rem;
        padding: 1rem;
    }

    /* Message d'erreur (identifiants invalides) — texte rouge */
    .alert-error.evozen-alert,
    .evozen-alert.alert-error,
    .evozen-alert.pf-m-danger {
        color: #c0392b;
        background-color: transparent;
        border: none;
        padding: 0;
        font-weight: 600;
        font-size: 0.95rem;
    }

    .alert-error.evozen-alert .evozen-alert-title,
    .evozen-alert.pf-m-danger .evozen-alert-title {
        color: #c0392b;
    }

    .evozen-body {
        min-height: 100vh;
        width: 100%;
    }

    body {
        --mesh-quicksand: rgba(214, 182, 148, 0.4);
        --mesh-bleu: rgba(169, 202, 215, 0.25);
        background: linear-gradient(135deg, #E2D8D3 0%, #F5F2EB 30%, #E2D8D3 65%, #E2D8D3 100%);
        background-color: #F5F2EB;
        min-height: 100vh;
        position: relative;
    }

    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(ellipse 100% 80% at 15% 15%, var(--mesh-quicksand), transparent 50%),
            radial-gradient(ellipse 90% 70% at 85% 85%, var(--mesh-quicksand), transparent 48%),
            radial-gradient(ellipse 70% 50% at 90% 20%, var(--mesh-bleu), transparent 45%);
        opacity: 1;
    }

    body::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.06;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
        background-repeat: repeat;
    }

    #bg-image {
        display: none;
    }
    .custom-kc-login-class {
        position: relative;
        width: 100%;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2em;
      }
      
      @media (max-width: 1024px) {
            .custom-kc-login-class {
                padding: 15px;
            }
        }

    .custom-kc-form-card {
        max-width: 472px!important;
        width: 100%!important;
        z-index: 2;
        padding: 45px 70px;
        background: rgb(255, 255, 255);
        border-radius: 16px;
        border: 1px solid rgb(255, 249, 253);

        overflow: scroll!important;
        /* Hide scrollbar for Chrome, Safari and Opera */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE and Edge */
    }
    .custom-kc-form-card::-webkit-scrollbar {
        display: none;  /* Chrome, Safari and Opera */
    }

    @media (max-width: 780px) {
        .custom-kc-form-card {
            padding: 15px 21px 21px 21px;
            width: 100%!important;
            height: 100%!important;
        }

        .logo {
            width: 150px!important;
        }
        #kc-content {
            font-size: 14px;
        }

    }


    .shining-gold {
        border-image:  1;
        box-shadow: 0 0 30px 0 rgb(217, 181, 61);
    }

    .logo-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        overflow: visible!important;
        position: relative;
        margin-bottom: 1rem;
        z-index: 3;
    }

    .evozen-logo-link {
        display: inline-flex;
        line-height: 0;
    }

    .evozen-logo-link:focus-visible {
        outline: 2px solid #57befa;
        outline-offset: 4px;
        border-radius: 4px;
    }
    #kc-header {
        position: relative;
    }

   

    .circle-border {
        border-radius: 50%;
        overflow: hidden;
        padding: 15px;
    }

    .shining-gold-inner-and-outer {
        border-image:  1;
        border: 3px solid rgb(255 255 255);
        box-shadow: 0 0 10px 0 rgb(255 247 219), 0 0 30px 5px rgb(238 198 68 / 55%), inset 0 0 20px 5px rgb(219 189 97 / 42%), inset 0 0 40px 10px rgb(230 199 97 / 0%);
        animation: shining-gold 6s ease-in-out infinite;
    }

    @keyframes shining-gold {
        0%, 100% {
            box-shadow: 0 0 10px 0 rgb(255 247 219), 0 0 30px 5px rgb(238 198 68 / 55%), inset 0 0 20px 5px rgb(219 189 97 / 42%), inset 0 0 40px 10px rgb(230 199 97 / 0%);
        }
        50% {
            box-shadow: 0 0 20px 0 rgb(255 247 219), 0 0 50px 10px rgb(238 198 68 / 85%), inset 0 0 30px 8px rgb(219 189 97 / 65%), inset 0 0 60px 15px rgb(230 199 97 / 20%);
        }
    }

    .logo {
        z-index: 10;
        width: 220px;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#kc-page-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 1;
}

@media (max-width: 640px) {
    #kc-page-title {
        font-size: 0.75rem;
    }
}

.fade-up {
    animation: fadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    will-change: opacity, transform;
}


#ev-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    position: relative;
}

#ev-content > div:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity:   0.03;

}

#ev-content > div:last-child {
    padding: 2em;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

/** 
 * Styles modernes pour les champs de saisie (input)
 * Inspiré par les standards UI actuels, mobile-first, accessible et épuré.
 */

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 0.60em 1em;
    border: 1.5px solid #e5e7eb; /* gris clair */
    border-radius: 0.5em;
    background-color: #f9fafb;
    color: #111827;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: #6366f1; /* indigo-500 */
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
    background-color: #fff;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled {
    background-color: #f3f4f6;
    color: #000;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

input[type="text"].error,
input[type="email"].error,
input[type="password"].error,
input[aria-invalid="true"] {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.evozen-input-error {
    display: block;
    font-size: 0.85rem;
    color: #c0392b;
}

.evozen-form-error-global {
    margin-bottom: 0.75rem;
    text-align: center;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder {
    color: #666;
    opacity: 1;
    font-size: 1rem;
}

@media (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="password"] {
        font-size: 0.95rem;
        padding: 0.65em 0.9em;
    }
}

.evozen-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.5em 0;
    width: 100%;
}

/* Tag "optionnel" à côté des champs non obligatoires (inscription) */
.field-optional-tag {
    display: inline-block;
    margin-left: 0.35em;
    padding: 0.15em 0.5em;
    font-size: 0.75rem;
    font-weight: 500;
    color: #666;
    background-color: #f0f0f0;
    border-radius: 4px;
    vertical-align: middle;
}

/* Centrage : options (mot de passe oublié / se souvenir de moi), inscription */
#kc-form-options,
.evozen-form-options-wrapper {
    text-align: center;
}

#kc-registration-container,
#kc-registration {
    text-align: center;
}

/* "* Champs requis" affiché sous le dernier champ du formulaire (inscription) */
.evozen-required-fields-footer {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
}

#kc-registration-container a,
#kc-registration a {
    font-weight: 700;
}

/* Styles pour le groupe d'input avec bouton de visibilité */
.evozen-input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.evozen-input-group .evozen-input {
    padding-right: 3rem; /* Espace pour le bouton */
    width: 100%;
    position: relative;
}

/* Bouton de visibilité du mot de passe */
.evozen-password-toggle {

    align-self: anchor-center;
    position: absolute;
    right: 0rem;
    top: 3px;
    background: none;
    border: none;
    color: #000;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    z-index: 10;
}

.evozen-password-toggle:hover {
    color: #333;
    background-color: #f3f4f6;
}

.evozen-password-toggle:focus {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.evozen-password-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

/* Icônes SVG pour le bouton de visibilité */
.evozen-icon-show,
.evozen-icon-hide {
    width: 1.25rem;
    height: 1.25rem;
    transition: opacity 0.2s ease;
    fill: currentColor;
}

.evozen-icon-show::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3E%3C/svg%3E");
}
    
.evozen-icon-hide::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21'/%3E%3C/svg%3E");
}

/* Animation pour le changement d'icône */
.evozen-password-toggle[data-password-visible="true"] .evozen-icon-show {
    opacity: 0;
}

.evozen-password-toggle[data-password-visible="false"] .evozen-icon-hide {
    opacity: 0;
}

/* ============================================
   Boutons des providers d'identité (social)
   ============================================ */

/* Bloc « Nouvel utilisateur ? Créer son compte » — positionné sous le logo */
#kc-info.evozen-signup {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Section sociale : placée juste sous le logo, sans bordure ni titre */
.evozen-social-section {
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-top: 0;
}

/* Séparateur entre les réseaux sociaux et « Connectez-vous à votre compte » */
.evozen-separator {
    border: 0;
    margin:  2rem 0;
    border-top: 1px solid #e5e7eb;
}

.evozen-social-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.evozen-social-list li {
    margin: 0;
}

/* Encart bleu d'information au-dessus du titre de connexion */
.evozen-login-notice {
    background-color: #57befa;
    color: #fff;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.evozen-login-notice a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

.evozen-login-notice a:hover {
    color: #fff;
    text-decoration: underline;
    opacity: 0.9;
}
/* Texte du provider : masqué visuellement, conservé pour l’accessibilité (lecteurs d’écran) */
.evozen-social-name {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Bouton social de base — icône seule (logo uniquement), bouton carré/arrondi */
.evozen-social-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.65em;
    border-radius: 9999px;
    border: 1.5px solid transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-sizing: border-box;
}

.evozen-social-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.evozen-social-button:active {
    transform: translateY(0);
}

.evozen-social-button:focus {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.evozen-social-button::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    margin: 0; /* icône seule : pas de marge pour centrage */
}

/* Icône IdP : masquée pour Google/Facebook/Apple (logo affiché via ::before sur le lien) */
.evozen-social-google .evozen-idp-logo,
#social-google .evozen-idp-logo,
.evozen-social-facebook .evozen-idp-logo,
#social-facebook .evozen-idp-logo,
.evozen-social-apple .evozen-idp-logo,
#social-apple .evozen-idp-logo {
    display: none !important;
}



/* Logo Google en ::before — position absolute left 0 */
.evozen-social-google::before,
#social-google::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E") no-repeat center;
    
}

/* Logo Facebook en ::before — position absolute left 0 */
.evozen-social-facebook::before,
#social-facebook::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E") no-repeat center;
}

/* Logo Apple (silhouette blanche) — même logique que Facebook */
.evozen-social-apple::before,
#social-apple::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.74.8 0 2.24-.91 3.81-.74 1.6.17 2.71.67 3.55 1.8-3.06 1.87-2.54 5.98.48 7.13-.57 1.5-1.31 2.99-2.92 4.04zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* Logo Google (G multicolore) — remplace l’icône Keycloak */
.evozen-social-google-unused {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

.evozen-social-google .evozen-idp-logo::before,
#social-google .evozen-idp-logo::before {
    display: none;
}

/* Logo Facebook (f blanc) — remplace l’icône Keycloak */
.evozen-social-facebook .evozen-idp-logo,
#social-facebook .evozen-idp-logo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    order: -1 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

.evozen-social-facebook .evozen-idp-logo::before,
#social-facebook .evozen-idp-logo::before {
    display: none;
}

.evozen-social-apple .evozen-idp-logo::before,
#social-apple .evozen-idp-logo::before {
    display: none;
}

/* Logo Facebook en ::before si Keycloak n’injecte pas d’icône */
.evozen-social-facebook:not(:has(.evozen-idp-logo))::before,
#social-facebook:not(:has(.evozen-idp-logo))::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* Logo Apple en ::before si Keycloak n’injecte pas d’icône */
.evozen-social-apple:not(:has(.evozen-idp-logo))::before,
#social-apple:not(:has(.evozen-idp-logo))::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.74.8 0 2.24-.91 3.81-.74 1.6.17 2.71.67 3.55 1.8-3.06 1.87-2.54 5.98.48 7.13-.57 1.5-1.31 2.99-2.92 4.04zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* Texte du provider : centré visuellement (prend l’espace restant, texte centré) */
/* --- Google --- */
.evozen-social-google,
#social-google {
    background-color: #fff;
    color: #000;
    border-color: #dadce0;
}

/* Logo Google en ::before si Keycloak n’injecte pas d’icône */
.evozen-social-google:not(:has(.evozen-idp-logo))::before,
#social-google:not(:has(.evozen-idp-logo))::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.evozen-social-google:hover,
#social-google:hover {
    background-color: #f8f9fa;
    border-color: #dadce0;
    color: #000;
}

.evozen-social-google .evozen-idp-logo {
    color: #4285f4;
}

/* --- Facebook --- */
.evozen-social-facebook,
#social-facebook {
    background-color: #1877f2;
    color: #fff;
    border-color: #1877f2;
}

.evozen-social-facebook:hover,
#social-facebook:hover {
    background-color: #166fe5;
    border-color: #166fe5;
    color: #fff;
    filter: brightness(1.02);
}

.evozen-social-facebook .evozen-idp-logo {
    color: #fff;
}

.evozen-social-facebook .evozen-social-name,
#social-facebook .evozen-social-name {
    color: #fff !important;
}

.evozen-social-facebook:hover .evozen-social-name,
#social-facebook:hover .evozen-social-name {
    color: #fff !important;
}

/* --- Apple (style proche « Sign in with Apple » : fond noir, logo blanc) --- */
.evozen-social-apple,
#social-apple {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.evozen-social-apple:hover,
#social-apple:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
    filter: brightness(1.03);
}

.evozen-social-apple .evozen-idp-logo {
    color: #fff;
}

.evozen-social-apple .evozen-social-name,
#social-apple .evozen-social-name {
    color: #fff !important;
}

.evozen-social-apple:hover .evozen-social-name,
#social-apple:hover .evozen-social-name {
    color: #fff !important;
}

/* Autres providers : style neutre par défaut */
.evozen-social-button:not(.evozen-social-google):not(.evozen-social-facebook):not(.evozen-social-apple) {
    background-color: #f3f4f6;
    color: #000;
    border-color: #e5e7eb;
}

.evozen-social-button:not(.evozen-social-google):not(.evozen-social-facebook):not(.evozen-social-apple):hover {
    background-color: #e5e7eb;
    color: #000;
}

/* Grille si plus de 3 providers */
.evozen-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.evozen-social-grid .evozen-social-button {
    min-width: 2.75rem;
}

@media (max-width: 640px) {
    .evozen-social-section {
        margin-bottom: 1rem;
    }

    .evozen-social-button {
        font-size: 0.875rem;
    }
}

.evozen-form-options-wrapper a {
    color: #000;
    border: 1px solid #000;
    padding: 0.6em 1em;
    border-radius: 10em;
    font-size: 16px;
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
}


.evozen-password-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.evozen-password-label-row label {
    margin-bottom: 0;
}

.evozen-forgot-password-link {
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    color: #2f80ed;
    white-space: nowrap;
}

.evozen-forgot-password-link:hover,
.evozen-forgot-password-link:focus {
    text-decoration: none;
    opacity: 0.9;
}

.evozen-remember-me {
    margin-top: 16px;
    margin-bottom: 20px;
}

/* Inscription — disponibilité du nom d'utilisateur (registerUsername.js) */
.evozen-username-feedback {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    min-height: 1.25em;
}

.evozen-username-feedback--ok {
    color: #1b7a3a;
}

.evozen-username-feedback--error {
    color: #c62828;
}

.evozen-username-feedback--muted {
    color: #555;
}

/* Le reset global `* { color: #000 }` écrase l’héritage : cibler le message explicitement */
.evozen-username-feedback--ok .evozen-username-feedback-msg {
    color: #1b7a3a;
}

.evozen-username-feedback--error .evozen-username-feedback-msg {
    color: #c62828;
}

.evozen-username-feedback--muted .evozen-username-feedback-msg {
    color: #555;
}

.evozen-username-feedback-msg {
    display: block;
}

.evozen-username-suggestions {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
}

.evozen-username-suggestions-label {
    font-weight: 600;
    color: #333;
    margin-right: 0.15rem;
}

button.evozen-username-suggestion {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.35em 0.65em;
    border-radius: 999px;
    border: 1px solid #2f80ed;
    background: #fff;
    color: #2f80ed;
    cursor: pointer;
}

button.evozen-username-suggestion:hover,
button.evozen-username-suggestion:focus-visible {
    background: #eaf4ff;
    outline: none;
}