/* ==========================================================================
   AGRICA (NEC) — Thème Keycloak (charte verte proto)
   ========================================================================== */

:root {
    /* Couleurs — charte proto / mire nec-ent */
    --agrica-primary: #002E11;      /* vert foncé (boutons) */
    --agrica-primary-hover: #00250e;
    --agrica-green: #00A840;        /* vert vif */
    --agrica-heading: #006E40;      /* titres / liens */
    --agrica-light: #C7FF99;
    --agrica-subtle: #CCEED9;
    --agrica-ink: #000401;

    /* Alias historiques (rétrocompat) → verts proto */
    --agrica-blue: var(--agrica-heading);
    --agrica-yellow: var(--agrica-green);
    --agrica-cta: var(--agrica-primary);
    --agrica-teal: rgba(0, 168, 64, .5);

    /* 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-subtle);
    --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: rgba(0, 4, 1, .5);
    --underline-w: 2px;
    --underline-rest: rgba(179, 185, 181, .5);
    --focus-halo: 0 0 0 2px rgba(0, 168, 64, .25);

    /* Alertes */
    --danger: #B3261E;
    --warning: var(--pf-global--warning-color--100, #f0ab00);
    --success: var(--agrica-green);
    --info: var(--pf-global--info-color--100, #2b9af3);

    /* Bouton — aligné sur .btn.btn-submit (proto) */
    --btn-bg: var(--agrica-primary);           /* #002E11 */
    --btn-bg-h: var(--agrica-primary);         /* hover : reste vert foncé */
    --btn-c: #fff;
    --btn-c-h: #fff;
    --btn-fs: calc(1.275rem + 0.1973684211vw);
    --btn-fw: 400;
    --btn-py: 1.9rem;
    --btn-px: 3rem;
    --btn-pl: 3rem;
    --btn-r: 5rem;                             /* pill */

    --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='%23C7FF99' 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='%23002E11' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");

    /* Liens soulignés (discrets) */
    --link-underline-color: rgba(0, 110, 64, .35);
    --link-underline-hover: rgba(0, 110, 64, .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;
}

/* Fond / bordure / texte / icône en vert (triade --bs-success-bg-subtle,
   --bs-success-border-subtle, --bs-success-text-emphasis du template proto),
   au lieu du jaune/orange PatternFly par défaut. */
.pf-v5-c-alert.pf-m-inline.pf-v5-u-mb-md.pf-m-warning {
    background-color: var(--agrica-subtle) !important; /* #cceed9 */
    border-color: #99DCB3 !important;
    color: #006e40 !important;
}

.pf-v5-c-alert.pf-m-inline.pf-v5-u-mb-md.pf-m-warning .pf-v5-c-alert__title {
    color: #006e40 !important;
    font-size: 1.25rem !important;
}

.pf-v5-c-alert.pf-m-inline.pf-v5-u-mb-md.pf-m-warning .pf-v5-c-alert__icon {
    color: #006e40 !important;
    font-size: 1.4rem !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;
}

/* Alerte "délai de connexion dépassé" : texte agrandi */
.login-form__error-set--wrapper .pf-v5-c-alert__title.kc-feedback-text {
    font-size: 1rem;
}

#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 =====
   proto.css positionne .show-password avec un top:2.3em fixe (pensé pour un
   champ d'une certaine hauteur) au lieu d'un centrage vertical réel : sur le
   champ .form-floating>.form-control (~6rem de haut), l'icône apparaît trop
   basse. On la recentre avec top:50%/translateY, en sur-spécifiant pour
   battre proto.css (chargé après styles.css). */
.form-floating .show-password {
    top: 50%;
    transform: translateY(-50%);
}

.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 : neutralisé au profit du style proto (.form-check-input) =====
   Les anciennes règles PatternFly (bordure jaune !important, coche bleue) écrasaient
   le rendu du prototype ; elles sont désactivées ci-dessous. */
/*
#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;
    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;
}
#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 — même rendu que .btn.btn-submit (proto) ===== */
.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary {
    width: auto;
    background: var(--btn-bg);
    background-color: var(--btn-bg);
    color: var(--btn-c);
    font-weight: var(--btn-fw);
    font-size: var(--btn-fs);
    padding: var(--btn-py) var(--btn-px);
    border: 1px solid var(--btn-bg);
    border-radius: var(--btn-r);
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1;
    transition: background-color .2s, color .2s, border-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,
.pf-v5-c-button.pf-m-primary:focus,
.pf-c-button.pf-m-primary:focus {
    background: var(--btn-bg-h);
    background-color: var(--btn-bg-h);
    border-color: 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);
}

/* ===== Utilitaires boutons proto ===== */
.btn-block {
    width: 100%;
    justify-content: center;
}
.mb-2 {
    margin-bottom: .5rem !important;
}

/* ===== Bouton secondaire (mêmes métriques que le primaire)
   - contour vert proto
   - forme pill
*/
.kc-secondary-button {
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    background: transparent;
    color: var(--agrica-heading);
    font-weight: var(--btn-fw);
    font-size: var(--btn-fs);
    padding: var(--btn-py) var(--btn-px);
    border: 1px solid rgba(0, 168, 64, .5);
    border-radius: var(--btn-r);
    cursor: pointer;
    text-decoration: none !important;
    text-align: center;
    line-height: 1;
    transition: background-color .2s, color .2s, border-color .2s;
}

.kc-secondary-button::before {
    display: none;
}

.kc-secondary-button:hover {
    background: var(--agrica-subtle);
    color: var(--agrica-primary);
    border-color: rgba(0, 168, 64, .5);
}

.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,
.pf-v5-c-login__main .btn {
    min-width: 190px;
}

/* ===== Bouton secondaire rempli (Ré-envoyer) — aligné outline proto ===== */
.kc-secondary-button--filled {
    background: transparent;
    color: var(--agrica-heading);
    border-color: rgba(0, 168, 64, .5);
}
.kc-secondary-button--filled:hover {
    background: var(--agrica-subtle);
    border-color: rgba(0, 168, 64, .5);
    color: var(--agrica-primary);
}

/* ===== 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,
.btn-block.btn {
    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;
}

/* ===== OTP shared — libellé, champ, alerte danger & compteur agrandis =====
   Ciblage direct par attributs/id + !important pour battre les styles inline. */
label[for="otp"] .pf-v5-c-form__label-text {
    font-size: 1.15rem !important;
}

input#otp[name="otp"][autocomplete="one-time-code"] {
    font-size: 3.2em !important;
}

/* Champ OTP : on reprend entierement la main sur la geometrie.
   Le <style> inline du .jar (codeOtpField.ftl) enchaine des calc() cales sur
   --otc-gap:1.25 qui desaxent les chiffres et laissent apparaitre une 7e case.

   Ici les N cases sont dimensionnees en fonction de la largeur du conteneur
   (.code-otp-container devient un "conteneur" -> 100cqw = sa largeur) :
     - 1 case (slot) = case grise (--_box) + espace (--_gap)
     - letter-spacing = slot - 1ch  -> chaque chiffre avance d'exactement 1 case
     - --_pad = (box - 1ch)/2        -> chiffre pile au centre de sa case
     - --_slack : marge a droite du dernier chiffre pour que la saisie du 6e
       chiffre ne fasse PAS defiler le champ (sinon le 1er chiffre se cache)
     - slot est calcule pour que  N*slot + 2*pad + slack = 100cqw  : le bloc
       occupe presque toute la largeur, fond centre, champ centre.
   Selecteur (1 id + 2 attributs) : bat le :where() du template. */
.code-otp-container { container-type: inline-size; text-align: center; }

input#otp[name="otp"][autocomplete="one-time-code"] {
    --_n: var(--otp-digits, 6);
    --_gap: 2cqw;                                     /* espace entre deux cases          */
    --_slack: .75ch;                                  /* marge anti-defilement a droite   */
    --_slot: calc((100cqw + var(--_gap) + 1ch - var(--_slack)) / (var(--_n) + 1));
    --_box: calc(var(--_slot) - var(--_gap));         /* largeur d'une case grise         */
    --_pad: calc((var(--_box) - 1ch) / 2);

    box-sizing: border-box;
    display: inline-block;
    inline-size: calc(var(--_n) * var(--_slot) + 2 * var(--_pad) + var(--_slack));
    margin-inline: 0 !important;                      /* annule le +33px desktop du .jar  */
    padding-block: 1ch;
    padding-inline: calc(2 * var(--_pad) + var(--_slack) / 2) 0;
    text-align: left;

    font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
    font-variant-numeric: tabular-nums;               /* chiffres a chasse fixe = 1ch     */
    letter-spacing: calc(var(--_slot) - 1ch);         /* avance d'un chiffre = 1 case     */

    /* fond = exactement N cases (image non repetee, largeur N*slot, centree) */
    background: repeating-linear-gradient(
        90deg,
        #EEE 0 var(--_box),
        transparent var(--_box) var(--_slot)
    ) no-repeat center / calc(var(--_n) * var(--_slot)) 100%;

    clip-path: none;
}

/* ===== Page "Selectionnez une methode de connexion" (select-authenticator) =====
   Les intitules des methodes sont des <h2> : proto.css force h2{font-size:3rem;
   font-weight:800} -> beaucoup trop gros. On ramene a une taille de sous-titre.
   Selecteur .select-auth-box-headline (0,1,0) > h2 (0,0,1), pas de !important. */
.select-auth-box-headline {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .15rem;
}

.select-auth-container {
    padding-left: 0 !important;
}

/* Email "tentative de connexion" (readonly) agrandi sur cette page */
body[data-page-id="login-select-authenticator"] .pf-v5-c-form-control.pf-m-readonly,
body[data-page-id="login-select-authenticator"] #kc-attempted-username {
    font-size: 1.25rem !important;
}
body[data-page-id="login-select-authenticator"] label[for="username"] {
    font-size: 1.15rem;
}

.pf-v5-c-alert.pf-m-inline.pf-m-danger {
    padding: 20px !important;
    font-size: 1.25rem;
}
.pf-v5-c-alert.pf-m-inline.pf-m-danger .pf-v5-c-alert__icon {
    font-size: 1.4rem;
}

#timer-counter-alert-block .pf-v5-c-alert {
    padding: 20px !important;
}
#timer-counter-alert-block {
    font-size: 1.25rem !important;
}
#timer-counter-alert-block .pf-v5-c-alert__icon {
    font-size: 1.4rem;
}
#resend-timer,
#resend-timer #kc-resend-timer-display {
    font-size: 1.25rem !important;
}

.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;
}

/* Espace entre le bloc FranceConnect et le bloc "À noter" qui suit */
/* .login-form__set.form-group.text-center + .login-form__note {
    margin-top: 2.5rem;
} */

/* .st-cl (login.ftl:30) : padding-bottom forcé, !important pour battre
   toute règle Chrome-specific (autofill/UA styles) qui l'écraserait sinon. */
.st-cl {
    padding-bottom: 30px !important;
}

.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 **/
/* Le prototype (Bootstrap-like) repose sur box-sizing:border-box.
   L'ancienne valeur "unset" (content-box) additionnait width + padding
   et faisait déborder #kc-form (colonnes .login-form__col) hors du bloc blanc. */
body[data-page-id="login-login"] *, body[data-page-id="login-login"] :after, body[data-page-id="login-login"] :before {
    box-sizing: border-box;
}

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
}

/* Soulignement jaune global neutralisé : la règle input[type="text"] écrasait
   la bordure arrondie du prototype (.form-control / .form-floating). */
/*
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;
}

/* ==========================================================================
   STEP-UP-AUTH — écran de re-authentification (mot de passe seul, username
   déjà connu) : agrandissement du formulaire + alignement à gauche des
   éléments (au lieu du centrage par défaut), uniquement quand #kc-form
   porte la classe .step-up-auth.
   ========================================================================== */

#kc-form.step-up-auth {
    margin-top: 30px;
    margin-left: 0;
}

/* Élargit #kc-form-wrapper */
#kc-form.step-up-auth #kc-form-wrapper {
    width: 450px;
}

/* .pf-v5-c-form (PatternFly) plafonne sa propre largeur en interne malgré
   .pf-v5-u-w-100 : on force la largeur complète du formulaire, sinon
   .narrow/.form-floating/#password héritent de ce max-width réduit. */
#kc-form.step-up-auth #kc-form-login {
    text-align: left;
    width: 100% !important;
    max-width: none !important;
}

#kc-form.step-up-auth #kc-form-login .login-form__set.text-center {
    text-align: left;
}

#kc-form.step-up-auth #kc-form-login .pf-v5-c-button.pf-m-primary,
#kc-form.step-up-auth #kc-form-login .pf-c-button.pf-m-primary {
    margin-left: 0;
    margin-right: auto;
}

#kc-form.step-up-auth #kc-form-login .login-form__mention {
    text-align: left;
}

/* !important requis : proto.css est chargé après styles.css (theme.properties)
   et redéfinit .narrow{max-width:349px} avec la même spécificité. */
#kc-form.step-up-auth #kc-form-login .narrow {
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 555px !important;
    width: 440px;
}

/* Champ mot de passe + bouton Afficher/Cacher : suivent la largeur de .narrow
   pour s'aligner sur #kc-attempted-username (555px) */
#kc-form.step-up-auth #kc-form-login .form-floating,
#kc-form.step-up-auth #kc-form-login #password {
    width: 100% !important;
}

#kc-form.step-up-auth #kc-form-login .login-form__tools {
    text-align: left;
}

/* #kc-attempted-username est rendu par <@username /> (template.ftl), frère
   de #c-form dans .login-form et non son descendant : ciblage via :has(). */
.login-form:has(#kc-form.step-up-auth) .pf-v5-c-form-control.pf-m-readonly,
.login-form:has(#kc-form.step-up-auth) #kc-attempted-username {
    font-size: 1.5rem !important;
}

/* Texte d'info (stepUpAuthSubtitle) : rendu dans <header>, hors #kc-form —
   aligné sur la même largeur (555px) que le formulaire, ciblage via :has(). */
.login-popin-inner:has(#kc-form.step-up-auth) .login-form__colchapo {
    max-width: 555px;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}
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%;
    font-size: 1.25rem;

}
.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%;
    }
}

.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 !important;
    height: 56px !important;
}
#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;
}