/* ==========================================================================
   AGRICA (NEC ENT) — Thème Keycloak (jaune inputs + checkbox)
   ========================================================================== */

:root {
    /* Couleurs */
    --agrica-blue: #154292;
    --agrica-yellow: #ffcc30;
    --agrica-cta: #ffcc30;

    /* >>> AJOUT : couleur secondaire (teal) */
    --agrica-teal: #92d0d0;

    /* Typo / layout */
    --title-fs: 1.8rem;
    --title-lh: 150%;
    --title-mb: 30px;
    --label-w: 600;
    --label-w-strong: 700;

    /* Carte */
    --card-px: 28px;
    --card-py: 20px;
    --card-min: 540px;
    --card-border: 5px solid var(--agrica-yellow);
    --card-shadow: var(--pf-global--BoxShadow--lg, 0 1px 12px rgba(0, 0, 0, .12));

    /* Fond */
    --login-bg: url("../img/connexion-bg-particulier.jpg");

    /* Champs / underlines */
    --field-h: 44px;
    --field-fs: 16px;
    --ph-color: #9fb0d6;
    --underline-w: 2px;
    /* << JAUNE franc par défaut >> */
    --underline-rest: var(--agrica-yellow);
    --focus-halo: 0 0 0 2px rgba(255, 204, 48, .25);

    /* Alertes */
    --danger: var(--pf-global--danger-color--100, #c9190b);
    --warning: var(--pf-global--warning-color--100, #f0ab00);
    --success: var(--pf-global--success-color--100, #3e8635);
    --info: var(--pf-global--info-color--100, #2b9af3);

    /* Bouton */
    --btn-bg: var(--agrica-cta);
    --btn-bg-h: var(--agrica-blue);
    --btn-c: var(--agrica-blue);
    --btn-c-h: #fff;
    --btn-fs: 18px;
    --btn-fw: 600;
    --btn-py: 10px;
    --btn-px: 28px;
    --btn-pl: 46px;
    --btn-r: 0;

    --chev-size: 1.25rem;
    --chev-left: 18px;
    --chev-blue: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' fill='none' stroke='%23154292' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --chev-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");

    /* Liens soulignés (discrets) */
    --link-underline-color: rgba(21, 66, 146, .35);
    --link-underline-hover: rgba(21, 66, 146, .7);
    --link-underline-thickness: 2px;
    --link-underline-offset: 2px;
}

body {
    color: #333;
}

.mb-20 {
    margin-bottom: 20px;
}

/* ===== Base + carte ===== */
.login-pf {
    background: none;
}

.login-pf body {
    background: var(--login-bg) no-repeat center/cover fixed;
    height: 100%;
}

textarea.pf-c-form-control {
    height: auto;
}

.card-pf, .pf-v5-c-login__main {
    margin: 0 auto;
    padding: var(--card-py) var(--card-px);
    min-width: var(--card-min);
    border: var(--card-border);
    background: #fff;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

/* ===== Branding / titre ===== */
.brand-logo {
    width: 183px;
    height: auto;
    display: block;
    margin: 0 auto 16px;
}

.login-popin-header__title {
    font: 400 var(--title-fs)/var(--title-lh) Gilroy, Helvetica, Arial, sans-serif;
    color: var(--agrica-blue);
    text-align: center;
    margin-bottom: var(--title-mb);
}
.login-popin-header__title .subtitle-heading {
    font-size: 1.2rem;
    font-weight: 400;
    display: block;
}
.login-popin-header__title span {
    display: block;
}

/* ===== Teinte bleue (ne touche pas aux alertes) ===== */
.pf-v5-c-login__main :where(h1,h2,h3,p,label,.pf-v5-c-check__label,.signup-row),
#kc-form .pf-c-form-control {
    color: var(--agrica-blue);
}

.pf-v5-c-login__main .pf-c-alert.pf-m-danger,
.pf-v5-c-login__main .pf-c-alert.pf-m-danger * {
    color: var(--danger) !important;
}

.pf-v5-c-login__main .pf-c-alert.pf-m-warning,
.pf-v5-c-login__main .pf-c-alert.pf-m-warning * {
    color: var(--warning) !important;
}

.pf-v5-c-login__main .pf-c-alert.pf-m-success,
.pf-v5-c-login__main .pf-c-alert.pf-m-success * {
    color: var(--success) !important;
}

.pf-v5-c-login__main .pf-c-alert.pf-m-info,
.pf-v5-c-login__main .pf-c-alert.pf-m-info * {
    color: var(--info) !important;
}

#kc-form .pf-c-form__group {
    margin-bottom: 1rem;
}

#kc-form label.pf-v5-c-form__label {
    font-weight: var(--label-w-strong);
    cursor: default;
}

.pf-c-form__label, .pf-c-form__label-text {
    font-weight: var(--label-w);
    margin-bottom: .25rem;
    color: var(--agrica-blue);
}

/* Inputs : underline JAUNE par défaut, BLEU au focus, ROUGE en erreur
   (on sur-spécifie + !important pour battre PF) */
#kc-form input.pf-c-form-control[type="text"],
#kc-form input.pf-c-form-control[type="email"],
#kc-form input.pf-c-form-control[type="tel"],
#kc-form input.pf-c-form-control[type="password"] {
    height: var(--field-h);
    font-size: var(--field-fs);
    line-height: var(--field-h);
    padding: 0 .75rem;
    background: transparent;
    border: 0 !important;
    border-bottom: var(--underline-w) solid var(--underline-rest) !important; /* JAUNE */
    border-radius: 0;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}

/* Select : bordure complète jaune + chevron custom */
#kc-form select.pf-c-form-control {
    height: var(--field-h);
    font-size: var(--field-fs);
    line-height: var(--field-h);
    padding: 0 2.25rem 0 .75rem;
    background: transparent;
    border: var(--underline-w) solid var(--underline-rest) !important; /* JAUNE */
    border-radius: 0;
    box-shadow: none !important;
    color: var(--agrica-blue);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpolyline points='2,4 7,10 12,4' fill='none' stroke='%23ffcc30' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    transition: border-color .15s, box-shadow .15s;
}

#kc-form select.pf-c-form-control:focus {
    outline: none;
    border: 2px solid var(--agrica-blue) !important; /* BLEU au focus */
    box-shadow: var(--focus-halo);
}

#kc-form select.pf-c-form-control[aria-invalid="true"] {
    border: 2px solid var(--danger) !important;
    box-shadow: none !important;
}

#kc-form .pf-c-form-control::placeholder {
    color: var(--ph-color);
    opacity: .9;
}

#kc-form .pf-c-form-control:focus {
    outline: none;
    border-bottom: 2px solid var(--agrica-blue) !important; /* BLEU au focus */
    box-shadow: var(--focus-halo);
}

/* Erreur : underline ROUGE uniquement */
#kc-form .pf-c-form-control.pf-m-error,
#kc-form .pf-c-form-control[aria-invalid="true"],
#kc-form .pf-m-error .pf-c-form-control {
    border-bottom: 2px solid var(--danger) !important;
    box-shadow: none !important;
}

#kc-form .pf-c-form-control[aria-invalid="true"]:focus,
#kc-form .pf-m-error .pf-c-form-control:focus {
    border-bottom: 2px solid var(--danger) !important;
    box-shadow: none !important;
}

/* Texte d’erreur non gras */
#kc-form .kc-feedback-text,
#kc-form .pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text,
#kc-form .pf-c-form__helper-text.pf-m-error {
    color: var(--danger) !important;
    font-weight: 400;
}

/* Autofill Chrome */
#kc-form input.pf-c-form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--agrica-blue);
    transition: background-color 5000s ease-in-out 0s;
}

/* ===== Toggle Afficher/Cacher ===== */
.kc-pwd-toggle {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: 2px 6px;
    border: 0;
    background: transparent;
    color: var(--agrica-blue);
    font-weight: 600;
    cursor: pointer;
}

.kc-pwd-toggle:hover {
    text-decoration: underline;
}

.kc-pwd-toggle .kc-eye {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: no-repeat 50% 50%/contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23154292' stroke-width='2' d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/><circle cx='12' cy='12' r='3' fill='%23154292'/></svg>");
}

.kc-pwd-toggle.is-on .kc-eye {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23154292' stroke-width='2' d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/><circle cx='12' cy='12' r='3' fill='%23154292'/><line x1='5' y1='19' x2='19' y2='5' stroke='%23154292' stroke-width='2' stroke-linecap='round'/></svg>");
}

/* ===== Checkbox souvenir : JAUNE par défaut, BLEU quand cochée ===== */
#kc-form .pf-v5-c-check,#kc-form .pf-c-check{display:flex;align-items:center;gap:.6rem;margin-top:.25rem;}
#kc-form input#rememberMe[type="checkbox"],
#kc-form .pf-v5-c-check__input#rememberMe,
#kc-form .pf-c-check__input#rememberMe{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    width:18px;height:18px;
    border:2px solid var(--agrica-yellow) !important; /* JAUNE au repos */
    border-radius:4px;background:#fff;position:relative;cursor:pointer;vertical-align:middle;
    box-shadow:none !important;
}
#kc-form input#rememberMe:focus-visible{outline:none;box-shadow:var(--focus-halo);}
#kc-form input#rememberMe:checked{
    background:var(--agrica-blue);
    border-color:var(--agrica-blue) !important;          /* BLEU quand cochée */
}
#kc-form input#rememberMe:checked::after{
    content:"";position:absolute;inset:0;background:#fff;
    mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.2 11.6L2.6 8l1.4-1.4 2.2 2.2L12 3l1.4 1.4z'/%3E%3C/svg%3E") center/12px 12px no-repeat;
    -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.2 11.6L2.6 8l1.4-1.4 2.2 2.2L12 3l1.4 1.4z'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
#kc-form label[for="rememberMe"],.pf-v5-c-check__label,.pf-c-check__label{
    margin-top:5px;font:600 14px/1.2 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--agrica-blue);cursor:pointer;
}

/* ===== Bouton primaire ===== */
.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary {
    width: auto;
    background: var(--btn-bg);
    color: var(--btn-c);
    font-weight: var(--btn-fw);
    font-size: var(--btn-fs);
    padding: var(--btn-py) var(--btn-px);
    padding-left: var(--btn-pl);
    border-radius: var(--btn-r);
    position: relative;
    display: inline-block;
    margin: 2rem auto;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.pf-v5-c-button.pf-m-primary::before,
.pf-c-button.pf-m-primary::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--chev-left);
    transform: translateY(-50%);
    width: var(--chev-size);
    height: var(--chev-size);
    background: no-repeat 50%/100% 100% var(--chev-blue);
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover {
    background: var(--btn-bg-h);
    color: var(--btn-c-h);
}

.pf-v5-c-button.pf-m-primary:hover::before,
.pf-c-button.pf-m-primary:hover::before {
    background-image: var(--chev-white);
}

/* ===== Bouton secondaire (mêmes métriques que le primaire)
   - bordures en teal (#92d0d0)
   - pas de radius
   - ::before identique au primaire (chevron bleu / blanc au hover)
   - background teal uniquement au :hover
*/
.kc-secondary-button {
    position: relative;
    display: inline-block;
    width: auto;
    background: transparent;
    color: var(--agrica-blue);
    font-weight: var(--btn-fw);
    font-size: var(--btn-fs);
    padding: var(--btn-py) var(--btn-px);
    padding-left: var(--btn-pl);
    border: 2px solid var(--agrica-teal);
    border-radius: 0; /* pas de radius */
    cursor: pointer;
    text-decoration: none !important;
    text-align: center;
    transition: background-color .2s, color .2s;
}

.kc-secondary-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--chev-left);
    transform: translateY(-50%);
    width: var(--chev-size);
    height: var(--chev-size);
    /* même couleur que le primaire */
    background: no-repeat 50%/100% 100% var(--chev-blue);
}

.kc-secondary-button:hover {
    background: var(--agrica-teal); /* uniquement le background change */
    color: var(--agrica-blue);
}

.pf-v5-c-login__main .pf-v5-c-button.pf-m-primary,
.pf-v5-c-login__main .pf-c-button.pf-m-primary,
.pf-v5-c-login__main .kc-secondary-button {
    min-width: 190px;
}

/* ===== Bouton secondaire rempli (Ré-envoyer) ===== */
.kc-secondary-button--filled {
    background: var(--agrica-blue);
    color: #fff;
    border-color: var(--agrica-blue);
}
.kc-secondary-button--filled:hover {
    background: var(--agrica-teal);
    border-color: var(--agrica-teal);
    color: var(--agrica-blue);
}

/* ===== Utilitaire — bouton sans chevron ===== */
.no-chevron .pf-v5-c-button.pf-m-primary::before,
.no-chevron .pf-c-button.pf-m-primary::before,
.no-chevron.kc-secondary-button::before {
    display: none;
}

.btn-block .pf-v5-c-button.pf-m-primary,
.btn-block .pf-c-button.pf-m-primary,
.btn-block.kc-secondary-button {
    width: 100%;
    margin: 0;
    padding-left: var(--btn-px);
}

/* ===== Bouton désactivé ===== */
.kc-secondary-button:disabled,
.kc-secondary-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== btn-group-vertical ===== */
.btn-group-vertical {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: 2rem;
}
/* Margin top bouton "essayer une autre methode" */
#kc-select-try-another-way-form {
    margin-top: 1rem;
}

/* ===== Liens ===== */
.pf-v5-c-login__main a {
    color: var(--agrica-blue) !important;
    text-decoration-line: underline;
    text-decoration-color: var(--link-underline-color);
    text-decoration-thickness: 1px;
    text-underline-offset: var(--link-underline-offset);
    text-decoration-skip-ink: auto;
}

.pf-v5-c-login__main a:hover {
    text-decoration-color: var(--link-underline-hover);
}

/* ===== CODE OTP — bandeau code envoyé ===== */
.alert-info .pf-v5-c-alert__title {
    font-weight: unset;
}
.code-sent-banner {
    background: var(--agrica-yellow);
    color: var(--agrica-blue);
    text-align: left;
    padding: 8px 10px;
    margin-bottom: 16px;
}

/* ===== Bloc bas de page (CTA autre espace + CGU) ===== */
.other-space-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin: 18px 0 6px;
}

/* label non gras */
.other-space-label {
    color: var(--agrica-blue);
    font-weight: 400; /* pas en gras */
    text-align: center;
}

/* login-forgot-links */
.login-forgot-links {
    margin-top: -20px;
}
.login-forgot-links .sep {
    color: var(--agrica-blue);
    margin: 0 15px;
}

/* Liens bas de page — on veut que le lien CGU soit sans underline par défaut
   mais SOULIGNÉ AU HOVER, sans impacter les autres liens globaux */
.login-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin: 25px 0;
}

.login-footer-links span {
    color: var(--agrica-blue);
}

.login-footer-links a.plain-link {
    color: var(--agrica-blue) !important;
    text-decoration: none !important; /* enlève l’underline par défaut ici seulement */
}

.login-footer-links a.plain-link:hover {
    text-decoration: underline !important; /* underline seulement au :hover */
}

/* Footer & langue */
.footer_div p {
    margin: 8px 0 20px;
}

#kc-locale {
    position: relative;
    text-align: right;
    z-index: 1;
}

#kc-locale-dropdown {
    display: inline-block;
}

#kc-locale ul {
    background: var(--pf-global--BackgroundColor--100, #fff);
    display: none;
    top: 20px;
    min-width: 120px;
    padding: 0;
}

#kc-locale-dropdown:hover ul {
    display: block;
}

#kc-locale-dropdown a, #kc-locale-dropdown button {
    color: var(--pf-global--Color--200, #6a6e73);
    font-size: var(--pf-global--FontSize--sm, .875rem);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: right;
}

/* Masque l’œil Edge legacy */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear {
    display: none;
}

.code-otp-container input[name="otp"]{
    border: unset;
    /*margin: auto !important;*/
}
.code-otp-container .pf-v5-c-form-control:before,
.code-otp-container .pf-v5-c-form-control:after {
    /*
    border-block-start: unset;
    border-block-end: unset;
    border-inline-start: unset;
    border-inline-end: unset;
    */
}
.code-otp-container .pf-v5-c-form-control{
    margin-top: 10px;
}

.login-divider {
    margin: 30px auto;
}

.loginForm .pf-v5-c-login__container {
    width: 57%;
}

.loginForm .pf-v5-c-login__main-header .pf-v5-c-login__container {
    width: 100% !important;
}

.containerform {
    display: flex;
    flex-direction: row;
}

.franceConnect {
    width: 60%;
}

.kc-form-wrapper {
    width: 40%;
}

.loginform h2 {
    font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
}

.login-form__coltitle {
    text-align: center;
    margin: 0 0 1em;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -.01em;
    font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
}

.login-form__note {
    margin: 5rem auto 1rem auto;
    color: #26418d;
}

.login-form__colchapo, .login-form__coltitle {
    color: #154292;
}


.notetitle {

    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
    position: relative;
    top: 1px;
    background-image: url(../img/note.svg);
}

.centertext {
    text-align: center;
}

.loginFormswitch{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    width: 100%;
    flex-basis: 100%;
}

.loginFormswitch .kc-secondary-button {
    border: 2px solid #92d0d0;
    background-color: #fff;
}


/** strt **/
body[data-page-id="login-login"] *, body[data-page-id="login-login"] :after, body[data-page-id="login-login"] :before {
    box-sizing: unset;
}

body[data-page-id="login-login"] div.pf-v5-c-login__main-body {
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    position: relative;
}
body[data-page-id="login-login"] input {
    box-sizing: border-box;
}

#social-oidc {
    padding: 0px;
    width: 217px;
    margin-left: 25%;
}

.sacialagrica .login-form__colchapo {
    text-align: center;
}

.frconnecthover {
    display: none;
}

#social-oidc:hover .frconnecthover {
    display: block;
}

#social-oidc:hover .frconnect {
    display: none;
}

#kc-social-providers ul {
    padding: 0;
}
#kc-social-providers {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 7px;
}
#kc-social-providers > ul {
    margin-left: auto;
    margin-right: auto;
}
.login-form__mention {
    font-size: 14px;
    color: #26418d;
    text-align: center;
}

.loginagrica {
    margin-top: 5rem;
}

body[data-page-id="login-login"] .pf-v5-c-login__main-body:not(:has(.sacialagrica)) .loginagrica {
    margin-top: 0;
}


body[data-page-id="login-login"] .pf-v5-c-login {
    padding: 0 !important;
}


label:has(input:checked)::before {
    background-image: url(../img/checked.svg);
}

body[data-page-id="login-login"] .pf-v5-c-login__main-body:has(.sacialagrica):before {
    content: "";
    width: 2px;
    max-height: 500px;
    height: 100%;
    background-color: #f9de58;
    z-index: 5;
    transform: translateX(-50%);
    display: block;
    position: absolute;
    left: 50%;
    rotate: 90deg;
    top: 28%;

}

body[data-page-id="login-login"] .pf-v5-c-login__main-body:has(.sacialagrica):after {
    content: "\004F\0055";
    padding: .2rem .2rem;
    background-color: #fff;
    top: 46%;
    left: 50%;
    z-index: 6;
    font-weight: 700;
    font-size: 1.4rem;
    color: #26418d;
    transform: translate(-50%, -50%);
    display: block;
    position: absolute;
    border-color: #f9de58;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
}

#kc-form-login .pf-v5-c-form-control:after {
    border-block-end-color: transparent !important;
    border-block-end-width: 0px;
}

#kc-form-login  .pf-v5-c-form-control {
    --pf-v5-c-form-control--before--BorderRightColor: transparent;
    --pf-v5-c-form-control--before--BorderTopColor: transparent;
    --pf-v5-c-form-control--before--BorderLeftColor: transparent;
}

#kc-form-login  .pf-v5-c-form-control:focus-within input {
    --pf-v5-c-form-control--after--BorderBottomColor: transparent;
    --pf-v5-c-form-control--after--BorderBottomWidth: transparent;


}

#kc-form-login .pf-v5-c-input-group__item:has(.fas) {
    position: absolute;
    right: 0;
    border: unset;
}

#kc-form-login .pf-v5-c-input-group__item:has(.fas) .pf-v5-c-button {
    background-color: transparent;
    border: unset;
}

#kc-form-login  .pf-v5-c-input-group__item:has(.fas) .pf-v5-c-button:after {
    border: unset
}

#kc-form-login .pf-v5-c-form-control {
    background-color: #fff;
    border: unset
}

input[type="text"],#kc-form-login input[type="password"] {
    color: var(--agrica-blue);
    border-width: 0 0 2px;
    border-style: solid;
    border-color: #ffcc30;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#kc-form-login input[type="text"]:not(:placeholder-shown),#kc-form-login input[type="text"]:focus, #kc-form-login input[type="text"]:focus-within,#kc-form-login input[type="password"]:focus,#kc-form-login input[type="password"]:focus-within,#kc-form-login input[type="password"]:not(:placeholder-shown) {
    box-shadow: 0 0 5px 1px #ffcc30;
    outline: none;
}
body[data-page-id="login-login"] .pf-v5-c-login{
    min-height: 698px;
}
body[data-page-id="login-login"] .pf-v5-c-alert{
    z-index: 5;
    box-sizing: border-box;
}

#kc-form.step-up-auth {
    margin-top: 30px;
}
body[data-page-id="login-login"] .pf-v5-c-login__main-body:not(:has(.sacialagrica)) .loginagrica {
    width: 100%;
}

body[data-page-id="login-login"] .pf-v5-c-alert {
    width: 100%;
}
.pf-v5-c-login__main-header {
    color: var(--agrica-blue);
}

@media (min-width: 768px) {
    .pf-v5-c-login__container {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .pf-v5-c-login__main-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;

    }

    body[data-page-id="login-login"] .pf-v5-c-login__main {
        width: 50%;
        min-width: 830px;
    }

    .pf-v5-c-login__main .pf-v5-c-button.pf-m-primary,
    .pf-v5-c-login__main .pf-c-button.pf-m-primary,
    .pf-v5-c-login__main .kc-secondary-button {
        min-width: 252px;
    }

    body[data-page-id="login-login"] .pf-v5-c-login__main:not(:has(.sacialagrica)) {
        min-width: var(--card-min);
        width: auto;
    }

    body[data-page-id="login-login"] .pf-v5-c-login__main-body:not(:has(.sacialagrica)) {
        flex-direction: column;
        align-items: center;
    }

    body[data-page-id="login-login"] .pf-v5-c-login__main-body:not(:has(.sacialagrica)) .loginagrica {
        margin-left: auto;
        margin-right: auto;
        max-width: 536px;
    }

    .sacialagrica {
        width: 50%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .loginagrica {
        width: 40%;
        margin-left: 2rem;
        margin-top: unset;
    }

    body[data-page-id="login-login"] .pf-v5-c-login__main-body:has(.sacialagrica):after {
        top: 230px;
        left: 52%;

    }

    body[data-page-id="login-login"] .pf-v5-c-login__main-body:has(.sacialagrica):before {

        left: 52%;
        rotate: unset;
        top: unset;

    }

    .pf-v5-c-input-group{
        position: relative;
    }
}


/* ===== Responsive ===== */
@media (max-width: 767px) {

    .login-pf body {
        background: #fff;
    }

    .card-pf, .pf-v5-c-login__main {
        max-width: none;
        min-width: auto;
        border-width: 4px;
        padding: 16px;
    }

    .login-popin-header__title {
        font-size: 1.5rem;
    }

}
@media (min-width: 380px) and (max-width: 763px) {
    body[data-page-id="login-login"] .pf-v5-c-login__main-body:has(.sacialagrica):after{
        top:38% !important;
    }
    body[data-page-id="login-login"] .pf-v5-c-login__main-body:has(.sacialagrica):before{
        top:17% !important;
    }
}
@media (max-width: 379px) {
    body[data-page-id="login-login"] .pf-v5-c-login__main-body:has(.sacialagrica):after{
        top:39% !important;
    }
    body[data-page-id="login-login"] .pf-v5-c-login__main-body:has(.sacialagrica):before{
        top:19% !important;
    }
}
@media (min-width: 576px) {
    .pf-v5-c-login {
        align-items: start;
        margin-top: 2%;
    }
}

#timer-counter-alert-block .pf-v5-c-alert {
    padding: 10px !important;
}

.pf-v5-c-input-group {
    position: relative;
}

#reset-login {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 4px;
    color: var(--agrica-blue);
    cursor: pointer;
}

#reset-login:hover {
    color: var(--agrica-teal);
}

/* Supprime l'encadré bleu autour du bouton FranceConnect */
#social-particulier-france-connect {
    padding: 0 !important;
    width: 209px;
    height: 56px;
}
#social-particulier-france-connect::after {
    border: none;
}

#kc-delete-text {
    margin-top: 50px;
    max-width: 400px;
}

/* Champ readonly : grisé, pas de focus bleu */
.pf-c-form-control[readonly] {
    color: #8a8a8a;
    background: #f0f0f0;
}

/* bouton revenir au site */
#backToApplication {
    display: block;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}