html{ scrollbar-gutter: stable both-edges; }

/* =========================
   SCOPE : #rk-auth-scope
   ========================= */
#rk-auth-scope{
    --rk-bg:#ffffff; --rk-text:#1f2937; --rk-muted:#6b7280; --rk-border:#d7dee3;
    --rk-primary:#5a7f78; --rk-primary-600:#4a6a64;
    --rk-overlay:rgba(17,24,39,.6);
    --rk-radius:14px; --rk-shadow:0 20px 60px rgba(0,0,0,.2);
    --rk-maxw:920px;
}
#rk-auth-scope, #rk-auth-scope *{ box-sizing:border-box; }

/* Bouton d’ouverture (exemple) */
.rk-open-trigger{
    padding:.7rem 1rem;border-radius:10px;border:1px solid var(--rk-border);background:#fff;cursor:pointer;
     
}

/* ---- Modal ---- */
#rk-auth-scope .rk-modal{position:fixed;inset:0;display:none;z-index:999999;}
#rk-auth-scope .rk-modal.is-open{display:block;}
#rk-auth-scope .rk-backdrop{position:fixed;inset:0;background:var(--rk-overlay);}
#rk-auth-scope .rk-dialog{
    position:relative;margin:3vh auto;max-width:var(--rk-maxw);background:var(--rk-bg);
    border-radius:var(--rk-radius);box-shadow:var(--rk-shadow);overflow:hidden;
     
    color:var(--rk-text);
    max-height: calc(100vh - 24px);
    overflow:auto;
}
#rk-auth-scope .rk-close{
    position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:50%;
    background:transparent;color:#fff;font-size:26px;line-height:36px;cursor:pointer;z-index:2;
}
#rk-auth-scope .rk-grid{ display:grid; grid-template-columns:1fr 1fr; }
#rk-auth-scope .rk-grid > *{ min-width:0; }

/* ---- Colonne gauche ---- */
#rk-auth-scope .rk-left{padding:24px 26px;background:#fff;}
#rk-auth-scope .rk-brandline{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
#rk-auth-scope .rk-logo{height:28px}

/* Tabs (mobiles) — div[role="tablist"] */
#rk-auth-scope .rk-tabs{display:none;gap:18px;margin:6px 0 16px;}
#rk-auth-scope .rk-tab{background:transparent;border:0;padding:10px 6px;cursor:pointer;font-weight:600;color:var(--rk-muted);border-bottom:2px solid transparent;}
#rk-auth-scope .rk-tab.is-active{color:var(--rk-text);border-color:var(--rk-primary);}

/* Titres */
#rk-auth-scope .rk-title{ line-height:1.3;margin:10px 0 14px;}
#rk-auth-scope .rk-title-green{color:#73A1A1;}

/* Google */
#rk-auth-scope .rk-google-btn{
    width:100%;height:44px;border-radius:9px;border:1px solid var(--rk-border);background:#fff;
    display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-weight:600;
}
#rk-auth-scope .rk-google-btn:hover{box-shadow:0 2px 10px rgba(0,0,0,.06);}
#rk-auth-scope .rk-gicon{
    width:24px;height:24px;display:inline-grid;place-items:center;font-weight:700;border-radius:50%;border:1px solid var(--rk-border);padding:2px;
}

/* Séparateur centré */
#rk-auth-scope .rk-divider{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:16px 0;color:var(--rk-muted);
}
#rk-auth-scope .rk-divider::before,#rk-auth-scope .rk-divider::after{
    content:"";display:block;height:1px;background:var(--rk-border);
}
#rk-auth-scope .rk-divider>span{display:block;padding:0 .25rem;line-height:1;background:#fff;border-radius:4px;}

/* Formulaire */
#rk-auth-scope .rk-form{display:grid;gap:12px;}
/* Conteneur de champ = DIV (plus de <label> conteneur) */
#rk-auth-scope .rk-field{display:grid;gap:6px;width:100%;}

/* Vrai label, minimal, scoped */
#rk-auth-scope .rk-label{
     color:var(--rk-muted);display:inline-block;
}

/* Label + lien sur la même ligne */
#rk-auth-scope .rk-label-line{display:flex;align-items:center;justify-content:space-between;gap:8px;}
#rk-auth-scope .rk-label-line .rk-forgot{ white-space:nowrap;color:#2b7a70;text-decoration:none;}
#rk-auth-scope .rk-label-line .rk-forgot:hover{text-decoration:underline;}

/* Inputs — reset anti-form-control */
#rk-auth-scope .rk-field input{
    all:unset;display:block;width:100%;height:40px;padding:0 12px;background:#fff;color:var(--rk-text);
    border:1px solid var(--rk-border);border-radius:8px;box-shadow:none;
}
#rk-auth-scope .rk-field input::placeholder{ color:#9aa6b2; }
#rk-auth-scope .rk-field input:hover{border-color:#b6d8d2;}
#rk-auth-scope .rk-field input:focus{border-color:#9ccbc3;box-shadow:0 0 0 3px rgba(156,203,195,.25);}

/* Œil mot de passe */
#rk-auth-scope .rk-input-wrap{ position:relative; width:100%; }
#rk-auth-scope .rk-input-wrap input{ padding-right:44px; }
#rk-auth-scope .rk-eye-btn{
    all:unset; position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:32px; height:32px; display:grid; place-items:center; cursor:pointer;
    color:var(--rk-muted); border-radius:6px; z-index:5;
}
#rk-auth-scope .rk-eye-btn i{ font-size:18px; line-height:1; }
/* Fallback SVG (si FA absent) */
#rk-auth-scope .rk-eye-btn .rk-eye-open,
#rk-auth-scope .rk-eye-btn .rk-eye-closed{ display:none; }
#rk-auth-scope .rk-eye-btn[data-fallback="true"] .rk-eye-open{ display:inline-block; }
#rk-auth-scope .rk-eye-btn[data-fallback="true"][data-visible="false"] .rk-eye-open{ display:none; }
#rk-auth-scope .rk-eye-btn[data-fallback="true"][data-visible="false"] .rk-eye-closed{ display:inline-block; }

/* Checkbox : wrapper DIV + input + label[for] */
#rk-auth-scope .rk-check{display:flex;align-items:center;gap:8px;margin-top:4px;}
#rk-auth-scope .rk-check input{width:16px;height:16px;}
#rk-auth-scope .rk-check-label{ color:var(--rk-text);}

/* Boutons */
#rk-auth-scope .rk-primary{
    all:unset;height:44px;border-radius:10px;background:var(--rk-primary);color:#fff;
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 16px;
}
#rk-auth-scope .rk-primary:hover{background:var(--rk-primary-600);}
#rk-auth-scope .rk-link{color:#E0208E;text-decoration:underline;}
#rk-auth-scope .rk-link:hover{text-decoration:underline;}
#rk-auth-scope .rk-footnote{text-align:center;color:var(--rk-muted);margin-top:10px;}

/* ---- Colonne droite (div, pas <aside>) ---- */
#rk-auth-scope .rk-right{
    padding:28px;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:18px;
    background: radial-gradient(54.95% 70.71% at 50% 50%, rgba(127, 156, 156, 0.90) 0%, rgba(91, 117, 111, 0.90) 100%);
}

#rk-auth-scope .rk-right-sub{margin:0;opacity:.95;}
#rk-auth-scope .rk-bullets{list-style:none;padding:0;margin:10px 0 8px;display:grid;gap:10px;}
#rk-auth-scope .rk-bullets li{position:relative;padding-left:24px;}
#rk-auth-scope .rk-bullets li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:#bdf3e6;}
#rk-auth-scope .rk-right-cta,
#rk-auth-scope .rk-ghost{height:44px;border-radius:10px;font-weight:700;cursor:pointer;}
#rk-auth-scope .rk-right-cta{
    all:unset;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:#415752;
    color:#fff; display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 16px;
}
#rk-auth-scope .rk-right-cta:hover{background:rgba(255,255,255,.16);}
#rk-auth-scope .rk-ghost{all:unset;width:100%;border:1px solid var(--rk-border);background:#fff;border-radius:10px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;}

/* Panneaux (mobile) */
#rk-auth-scope .rk-panel{display:none;}
#rk-auth-scope .rk-panel.is-active{display:block;}

/* Responsive largeur */
@media (max-width:820px){
    #rk-auth-scope .rk-dialog{ margin:10px; }
    #rk-auth-scope .rk-grid{ grid-template-columns:1fr; }
    #rk-auth-scope .rk-right{ display:none !important; } /* cache l'aside en mobile */
    #rk-auth-scope .rk-tabs{ display:flex; }
    #rk-auth-scope .rk-close{ color:#111; }
}
/* Responsive hauteur petite */
@media (max-height:620px){
    #rk-auth-scope .rk-dialog{ margin:8px auto; border-radius:10px; }
}

/* Mobile: style spécial “Je suis nouveau” */
@media (max-width: 820px){
    #rk-auth-scope .rk-panel[data-panel="signup"].is-active{
        /*background: radial-gradient(54.95% 70.71% at 50% 50%, rgba(127,156,156,0.90) 0%, rgba(91,117,111,0.90) 100%);*/
        color:#fff; padding:18px; border-radius:12px;
    }
    #rk-auth-scope .rk-panel[data-panel="signup"].is-active .rk-title{ color:#fff; }
    #rk-auth-scope .rk-panel[data-panel="signup"].is-active .rk-bullets li::before{ color:#bdf3e6; }
    #rk-auth-scope .rk-panel[data-panel="signup"].is-active .rk-ghost{
        background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.45); color:#fff;
    }
    #rk-auth-scope .rk-panel[data-panel="signup"].is-active .rk-ghost:hover{ background: rgba(255,255,255,.20); }

    /* Option : toute la colonne gauche en gradient quand signup actif */
    #rk-auth-scope.rk-signup-mode .rk-left{
        background: radial-gradient(54.95% 70.71% at 50% 50%, rgba(127,156,156,0.90) 0%, rgba(91,117,111,0.90) 100%);
        color:#fff;border-radius:12px;padding:18px;
    }
    #rk-auth-scope.rk-signup-mode .rk-left .rk-title,
    #rk-auth-scope.rk-signup-mode .rk-left .rk-label,
    #rk-auth-scope.rk-signup-mode .rk-left .rk-link{ color:#fff; }
}

/* (facultatif) neutraliser les backdrops externes quand notre modale est ouverte */
body.rk-auth-active .modal-backdrop,
body.rk-auth-active .account-popup-area.signin-popup-box.modal{
    display:none !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important;
}

/* ====== FIX 1 : empêcher le débordement du champ mot de passe ====== */
#rk-auth-scope .rk-left,
#rk-auth-scope .rk-form,
#rk-auth-scope .rk-field,
#rk-auth-scope .rk-input-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;          /* clé anti-overflow en grid/flex */
    overflow:hidden !important;      /* clip toute anomalie visuelle */
}

/* L’input ne peut plus dépasser et n’applique aucun transform hérité */
#rk-auth-scope .rk-input-wrap input,
#rk-auth-scope .rk-field input{
    all:unset !important;
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:40px !important;
    padding:0 44px 0 12px !important; /* place pour l’icône à droite */
    background:#fff !important;
    color:var(--rk-text) !important;
    border:1px solid var(--rk-border) !important;
    border-radius:8px !important;
    box-shadow:none !important;
    transform:none !important;       /* neutralise un scale/transform global */
}

/* L’icône œil reste DANS le champ, ne l’étire pas */
#rk-auth-scope .rk-input-wrap{
    position:relative !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}
#rk-auth-scope .rk-eye-btn{
    all:unset !important;
    position:absolute !important;
    right:10px !important;
    top:37% !important;
    transform:translateY(-50%) !important;
    width:32px !important; height:32px !important;
    display:grid !important; place-items:center !important;
    color:var(--rk-muted) !important;
    z-index:2 !important;
}

/* Sécurité supplémentaire : les colonnes ne forcent pas leur min-width */
#rk-auth-scope .rk-grid > *{ min-width:0 !important; }

/* ====== FIX 2 : bande blanche à gauche (vient du scrollbar-gutter) ====== */
/* Si tu as cette ligne dans ton CSS global, supprime-la : */
/* html{ scrollbar-gutter: stable both-edges; } */
/* …ou écrase-la ainsi : */
html{ scrollbar-gutter: auto; }

/* Et on s’assure qu’aucune marge par défaut ne crée de liseré */
html, body{ margin:0; }

/* =========================
   RK AUTH — neutraliser les tags "sémantiques" dans le scope
   ========================= */

/* 1) Reset ciblé des tags qui héritent souvent de styles globaux */
#rk-auth-scope section,
#rk-auth-scope header,
#rk-auth-scope h1,
#rk-auth-scope h2,
#rk-auth-scope h3,
#rk-auth-scope p,
#rk-auth-scope ul,
#rk-auth-scope li,
#rk-auth-scope a,
#rk-auth-scope small,
#rk-auth-scope label {
    all: unset;            /* on enlève les règles framework */
    display: revert;       /* on remet l’affichage "par défaut navigateur" */
    color: inherit;
    font: inherit;
}

/* 2) Ré-affectations minimales pour ton design */
#rk-auth-scope h2 { display:block;   }
#rk-auth-scope p  { display:block; }
#rk-auth-scope ul { display:block; list-style:none; margin:0; padding:0; }
#rk-auth-scope li { display:list-item; }

/* Liens (ex: "Mot de passe oublié ?", "Se connecter") */
#rk-auth-scope a{ color:#2b7a70; text-decoration:none; cursor:pointer; }
#rk-auth-scope a:hover{ text-decoration:none; }

/* Labels (on garde l’accessibilité tout en neutralisant les règles globales) */
#rk-auth-scope label{ display:inline-block; cursor:default; }

/* Checkbox native propre (évite les fausses coches type ✓ dans le texte) */
#rk-auth-scope .rk-check input{
    all: revert;                 /* rétablit l’apparence système */
    width:auto; height:auto;
    accent-color:#73A1A1;        /* couleur de coche moderne */
    margin:0 .5rem 0 0;
}

/* 3) Petits ajustements visuels pour matcher ta "bonne version" */
#rk-auth-scope .rk-title{ font-size:18px;   }
#rk-auth-scope .rk-divider{
    margin:18px 0;
    color: #73A1A1;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
}
#rk-auth-scope .rk-divider::before,
#rk-auth-scope .rk-divider::after{
    background:#e3eaee;
}

#rk-auth-scope .rk-primary{
    height:48px; border-radius:5px;
    text-align: center;
}
#rk-auth-scope .rk-right-cta,
#rk-auth-scope .rk-ghost{
    height:49px; border-radius:5px;width: 90%;
}
#rk-auth-scope .rk-right{
    background: radial-gradient(55% 70% at 50% 50%, rgba(127,156,156,.90) 0%, rgba(91,117,111,.90) 100%);
}
#rk-auth-scope .rk-right-title{ font-size:28px;   }

/* ===== 1) Séparateur "Ou" : deux traits + texte centré ===== */
#rk-auth-scope .rk-divider{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    margin:18px 0 !important;
    color:var(--rk-muted) !important;
}
#rk-auth-scope .rk-divider::before,
#rk-auth-scope .rk-divider::after{
    content:"" !important;
    flex:1 1 auto !important;
    height:1px !important;
    background:var(--rk-border) !important;
}
/* Si un thème ajoute des pseudo-éléments autour du texte, on les coupe */
#rk-auth-scope .rk-divider > span::before,
#rk-auth-scope .rk-divider > span::after{
    content:none !important;
}
#rk-auth-scope .rk-divider > span{
    flex:none !important;
    padding:0 .5rem !important;
    line-height:1 !important;
    background:#fff !important;
    border-radius:4px !important;
    font-size: 14px;
}

/* ===== 2) Bouton Google : neutraliser tout style global de <button> ===== */
#rk-auth-scope .rk-google-btn{
    all:unset !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    width:100% !important;
    height:44px !important;
    border-radius:9px !important;
    border:1px solid var(--rk-border) !important;
    background:#fff !important;
    font-weight:600 !important;
    cursor:pointer !important;

    border-radius: 5px;
    border: 1px solid #33BCA7;
}
#rk-auth-scope .rk-google-btn:hover{ box-shadow:0 2px 10px rgba(0,0,0,.06) !important; }
#rk-auth-scope .rk-gicon{
    all:unset !important;
    width:24px !important; height:24px !important;
    display:grid !important; place-items:center !important;
    border-radius:50% !important;
    border:1px solid var(--rk-border) !important;
    font-weight:700 !important;
}

/* ===== 3) Alignement vertical des champs (e-mail / MDP) ===== */
#rk-auth-scope .rk-field input{
    height:44px !important;             /* +4px pour respirer */
    line-height:44px !important;        /* texte/placeholder centré */
    padding:0 12px !important;
    font-size:14px !important;
}
#rk-auth-scope .rk-input-wrap input{
    height:44px !important;
    line-height:44px !important;
    padding:0 44px 0 12px !important;   /* place pour l’œil */
}
/* œil parfaitement centré */
#rk-auth-scope .rk-eye-btn{ height:32px !important; width:32px !important; top:50% !important; transform:translateY(-50%) !important; }

/* (optionnel) si un ✓ parasite apparaît à côté de "Rester connecté" */
#rk-auth-scope .rk-check-label::after{ content:none !important; }


#rk-auth-scope .loginError .ng-binding{
    color: #dc1515 !important;
    font-size: 12px;
}