/* ============================================================
   Pages d'authentification - layout deux colonnes responsive.
   Depend de public/css/tokens.css (charge avant via base.html.twig).
   ============================================================ */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--c2rt-font);
    min-height: 100vh;
    background: var(--gradient-brand-light);
    color: var(--text-primary);
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
    body { background: var(--gradient-brand-dark); }
}

body::before,
body::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 60%);
}

body::before { top: -240px; right: -200px; width: 640px; height: 640px; display: none; }
body::after  { bottom: -300px; left: -180px; width: 720px; height: 720px; opacity: 0.85; display: none; }

.auth-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}

.auth-card {
    width: 100%;
    max-width: 980px;
    background: var(--surface-0);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (prefers-color-scheme: dark) {
    .auth-card { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
}

/* ----------------- Cote marque (gauche) ----------------- */

.auth-brand-side {
    background: var(--gradient-brand-light);
    color: #ffffff;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

@media (prefers-color-scheme: dark) {
    .auth-brand-side { background: var(--gradient-brand-dark); }
}

.auth-brand-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.16), transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.10), transparent 40%);
    pointer-events: none;
}

.auth-brand {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 22px 16px;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22),
                0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 320ms ease;
}

.auth-brand:hover {
    transform: translateY(-2px) rotate(-0.6deg);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22),
                0 2px 6px rgba(15, 23, 42, 0.08);
}

.auth-brand-image {
    height: 80px;
    width: auto;
    display: block;
    transform-origin: center;
    animation: auth-brand-image-in 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms backwards;
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 320ms ease;
}

.auth-brand:hover .auth-brand-image {
    transform: scale(1.04);
    filter: drop-shadow(0 8px 18px rgba(37, 99, 235, 0.28));
}

@keyframes auth-brand-image-in {
    0%   { opacity: 0; transform: translateY(14px) scale(0.85); }
    55%  { opacity: 1; transform: translateY(-3px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Halo lumineux flottant derriere la carte du logo : un degrade
   radial brand qui pulse une seule fois au load puis se stabilise.
   Donne un sentiment d'arrivee solennelle sans pulse continue. */
.auth-brand::before {
    content: '';
    position: absolute;
    inset: -24px;
    background: radial-gradient(circle at 50% 50%,
        rgba(96, 165, 250, 0.35),
        rgba(37, 99, 235, 0.10) 40%,
        transparent 70%);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    animation: auth-brand-halo-in 1400ms ease-out 400ms 1 forwards;
    pointer-events: none;
}

@keyframes auth-brand-halo-in {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 0.95; transform: scale(1.08); }
    100% { opacity: 0.55; transform: scale(1); }
}

.auth-brand:hover::before {
    opacity: 0.85;
    transition: opacity 320ms ease;
}

/* SVG inline logo — conserve si jamais le partial est utilise. */
.auth-brand-logo {
    display: block;
    width: 180px;
    height: 90px;
    overflow: visible;
}

/* Ribbon : descend depuis tres haut au-dessus de la carte, depasse
   en bas, remonte, redepasse plus court... cinq oscillations qui
   miment un tissu qui se pose. La duree est volontairement longue
   (2 secondes) pour que l'animation soit visiblement perceptible
   meme par un utilisateur qui n'y prete pas attention. */
@keyframes auth-brand-ribbon-in {
    0%   { opacity: 0; transform: translateY(-140px) rotate(-8deg); }
    35%  { opacity: 1; transform: translateY(18px)   rotate(5deg); }
    55%  { transform: translateY(-10px) rotate(-3deg); }
    72%  { transform: translateY(6px)   rotate(2deg); }
    86%  { transform: translateY(-2px)  rotate(-1deg); }
    100% { opacity: 1; transform: translateY(0)     rotate(0deg); }
}

/* Lettres : entree en hauteur + scale 0.5 -> 1.06 -> 1.
   L'overshoot a 1.06 evite un effet plat « machinal ». */
@keyframes auth-brand-letter-in {
    0%   { opacity: 0; transform: translateY(18px) scale(0.55); }
    55%  { opacity: 1; transform: translateY(-4px) scale(1.06); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Tagline : fade + resserrement du letter-spacing (de 0.40 a 0.18 em). */
@keyframes auth-brand-tagline-in {
    from { opacity: 0; letter-spacing: 0.40em; transform: translateY(6px); }
    to   { opacity: 1; letter-spacing: 0.18em; transform: translateY(0); }
}

@keyframes auth-brand-dots-in {
    0%   { opacity: 0; transform: scale(0.2); }
    70%  { opacity: 1; transform: scale(1.25); }
    100% { opacity: 1; transform: scale(1); }
}

/* Ligne lumineuse qui glisse une fois sur le logo apres l'arrivee
   complete (effet « sheen », tres discret, deux secondes apres le
   load, une seule fois). Donne le sentiment fini sans agressivite. */
@keyframes auth-brand-sheen {
    0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
    35%  { opacity: 0.55; }
    100% { transform: translateX(220%)  skewX(-18deg); opacity: 0; }
}

.auth-brand-logo {
    transform-origin: center;
}

.auth-brand-logo-letter {
    transform-origin: center;
    animation: auth-brand-letter-in 820ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.auth-brand-logo-letter-c { animation-delay: 280ms; }
.auth-brand-logo-letter-2 { animation-delay: 440ms; }
.auth-brand-logo-letter-r { animation-delay: 600ms; }
.auth-brand-logo-letter-t { animation-delay: 760ms; }

.auth-brand:hover .auth-brand-logo-letter { transform: translateY(-2px); }
.auth-brand:hover .auth-brand-logo-letter-c { transition-delay: 0ms; }
.auth-brand:hover .auth-brand-logo-letter-2 { transition-delay: 40ms; }
.auth-brand:hover .auth-brand-logo-letter-r { transition-delay: 80ms; }
.auth-brand:hover .auth-brand-logo-letter-t { transition-delay: 120ms; }

.auth-brand-logo-ribbon {
    transform-origin: 204px 0px;
    animation: auth-brand-ribbon-in 2000ms ease-out 200ms backwards;
    transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 3px 6px rgba(6, 182, 212, 0.45));
}

.auth-brand:hover .auth-brand-logo-ribbon {
    transform: rotate(10deg) translateY(-3px);
}

.auth-brand-logo-tagline {
    animation: auth-brand-tagline-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 1080ms backwards;
    transition: fill 280ms ease, letter-spacing 280ms ease;
}

.auth-brand:hover .auth-brand-logo-tagline {
    fill: #1d4ed8;
    letter-spacing: 0.22em;
}

.auth-brand-logo-dots circle {
    transform-origin: center;
    animation: auth-brand-dots-in 520ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.auth-brand-logo-dots circle:nth-child(1) { animation-delay: 1280ms; }
.auth-brand-logo-dots circle:nth-child(2) { animation-delay: 1380ms; }
.auth-brand-logo-dots circle:nth-child(3) { animation-delay: 1480ms; }

/* Bandeau lumineux qui balaie la carte une fois apres l'apparition
   complete. Aucun loop : c'est juste un final discret qui ponctue
   l'animation d'entree. */
.auth-brand::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 60%;
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%);
    transform: translateX(-120%) skewX(-18deg);
    pointer-events: none;
    animation: auth-brand-sheen 1600ms ease-out 1800ms 1 forwards;
}

/* Adaptation mode sombre — la carte reste blanche (contraste fort sur
   fond degrade brand-dark) mais on accentue legerement l'ombre et la
   teinte du tagline pour qu'il reste lisible. */
[data-bs-theme="dark"] .auth-brand,
body.ea[data-bs-theme="dark"] .auth-brand {
    background: #ffffff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.50),
                0 1px 3px rgba(0, 0, 0, 0.30);
}

[data-bs-theme="dark"] .auth-brand:hover,
body.ea[data-bs-theme="dark"] .auth-brand:hover {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.60),
                0 2px 6px rgba(0, 0, 0, 0.30);
}

@media (prefers-reduced-motion: reduce) {
    .auth-brand,
    .auth-brand-logo-letter,
    .auth-brand-logo-ribbon,
    .auth-brand-logo-tagline,
    .auth-brand-logo-dots circle {
        animation: none !important;
        transition: none !important;
    }
}

.auth-brand-tagline {
    position: relative;
    color: #ffffff;
}

.auth-brand-tagline h2 {
    margin: 0 0 10px;
    font-family: var(--c2rt-font);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.auth-brand-tagline p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.55;
    font-size: 14px;
}

.auth-brand-illustration {
    position: relative;
    max-width: 180px;
    align-self: center;
    pointer-events: none;
    opacity: 0.88;
}

.auth-brand-illustration svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Liste de points-cles dans le brand-side (sous la baseline) */
.auth-brand-features {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-brand-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
}

.auth-brand-features svg {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.92);
    flex-shrink: 0;
}

/* ----------------- Cote formulaire (droite) ----------------- */

.auth-form-side {
    background: var(--surface-0);
    color: var(--text-primary);
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.auth-title {
    margin: 0 0 4px;
    font-family: var(--c2rt-font);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.auth-text {
    margin: 0 0 22px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 14.5px;
}

.auth-alert {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
}

.auth-alert-danger {
    background: var(--state-danger-bg);
    color: var(--state-danger);
    border-color: var(--state-danger-border);
}

.auth-alert-info {
    background: var(--state-info-bg);
    color: var(--state-info);
    border-color: var(--state-info-border);
}

.auth-alert-success {
    background: var(--state-success-bg);
    color: var(--state-success);
    border-color: var(--state-success-border);
}

.auth-form-group { margin-bottom: 16px; }

/* Quand deux groupes mot de passe se suivent (nouveau + confirmation),
   on resserre l'espace vertical entre eux. */
.auth-form-group:has(.auth-strength) + .auth-form-group {
    margin-top: -4px;
}
.auth-form-group:has(.auth-match) {
    margin-bottom: 12px;
}

.auth-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-primary);
}

.auth-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--surface-0);
    transition:
        border-color var(--c2rt-transition),
        box-shadow var(--c2rt-transition),
        background var(--c2rt-transition);
}

@media (prefers-color-scheme: dark) {
    .auth-input { background: var(--surface-1); }
}

.auth-input:focus {
    outline: none;
    border-color: var(--c2rt-blue-600);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.auth-input::placeholder { color: var(--text-muted); }

/* Saisie OTP : centree, monospace, large kerning pour la lisibilite.
   Utilisee sur l'ecran de verification 2FA pendant le login. */
.auth-input-otp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 22px;
    letter-spacing: 0.36em;
    text-align: center;
    font-weight: 700;
    padding: 14px 16px;
}
.auth-input-otp::placeholder {
    letter-spacing: 0.36em;
    opacity: 0.42;
}

/* Texte d'aide sous un champ (informatif, sans tonalite d'erreur). */
.auth-help-text {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}
.auth-help-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    background: rgba(15, 23, 42, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--text-primary);
}
@media (prefers-color-scheme: dark) {
    .auth-help-text code {
        background: rgba(148, 163, 184, 0.16);
    }
}

.auth-form-errors {
    margin-top: 4px;
    color: var(--state-danger);
    font-size: 12.5px;
    font-weight: 500;
}

.auth-form-errors ul { margin: 0; padding-left: 18px; }

.auth-link {
    color: var(--c2rt-blue-600);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--c2rt-transition);
}

@media (prefers-color-scheme: dark) {
    .auth-link { color: var(--c2rt-blue-400); }
}

.auth-link:hover { text-decoration: underline; }

.auth-secondary {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--text-secondary);
}

.auth-link-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--c2rt-blue-600);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .auth-link-back { color: var(--c2rt-blue-400); }
}

.auth-link-back:hover { text-decoration: underline; }

.auth-footer {
    margin: 22px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ----------------- Responsive ----------------- */

@media (max-width: 880px) {
    html, body {
        min-height: 100vh;
    }

    .auth-shell {
        padding: 20px 14px;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
    }

    .auth-card {
        grid-template-columns: 1fr;
        max-width: 420px;
        width: 100%;
        margin: 0 auto;
    }

    /* Brand-side au-dessus du formulaire : logo C2RT + tagline +
       illustration animee, tout centre. Empile par-dessus le form. */
    .auth-brand-side {
        padding: 26px 24px 18px;
        gap: 14px;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
    }

    .auth-brand {
        width: fit-content;
        margin: 0 auto;
    }

    .auth-brand-tagline {
        display: block;
        text-align: center;
        margin: 0 auto;
        max-width: 280px;
    }

    .auth-brand-illustration {
        display: block;
        margin: 4px auto 0;
        max-width: 200px;
    }

    .auth-form-side { padding: 24px 22px 22px; }
}

@media (max-width: 520px) {
    .auth-shell {
        padding: 12px 10px;
    }
    .auth-card {
        max-width: 100%;
    }
    .auth-brand-side {
        padding: 20px 18px 14px;
    }
    .auth-brand-illustration {
        max-width: 180px;
    }
    .auth-form-side { padding: 22px 18px; }
}

/* ============================================================
   Sifre alani sarici - bouton "afficher / masquer" + ikon kilit
   ============================================================ */

.auth-password {
    position: relative;
}

.auth-password .auth-input {
    padding-right: 44px;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color var(--c2rt-transition), background var(--c2rt-transition);
}

.auth-password-toggle:hover {
    color: var(--c2rt-blue-600);
    background: var(--surface-2);
}

@media (prefers-color-scheme: dark) {
    .auth-password-toggle:hover { color: var(--c2rt-blue-400); }
}

.auth-password-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.30);
}

.auth-password-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

.auth-password-toggle .auth-password-eye-off { display: none; }
.auth-password-toggle[data-state="visible"] .auth-password-eye-on { display: none; }
.auth-password-toggle[data-state="visible"] .auth-password-eye-off { display: block; }

/* ============================================================
   Caps Lock uyarisi (input altinda kayar mesaj)
   ============================================================ */

.auth-capslock {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.30);
    font-size: 12.5px;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .auth-capslock {
        background: rgba(245, 158, 11, 0.18);
        color: #fcd34d;
        border-color: rgba(245, 158, 11, 0.42);
    }
}

.auth-capslock.is-visible { display: inline-flex; }

.auth-capslock svg { width: 14px; height: 14px; }

/* ============================================================
   Sifre kuvveti gostergesi
   ============================================================ */

/* Cache par defaut : se reveille quand l'input est focused ou non vide */
.auth-strength {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    transition:
        opacity 240ms cubic-bezier(0.32, 0.72, 0, 1),
        max-height 320ms cubic-bezier(0.32, 0.72, 0, 1),
        margin-top 240ms cubic-bezier(0.32, 0.72, 0, 1);
}

.auth-form-group:focus-within .auth-strength,
.auth-form-group:has(input:not(:placeholder-shown)) .auth-strength {
    margin-top: 10px;
    max-height: 240px;
    opacity: 1;
    pointer-events: auto;
}

.auth-strength-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 4 segments qui se remplissent un par un - avec glow et fill anime */
.auth-strength-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    flex: 1;
}

.auth-strength-bar span {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    position: relative;
    overflow: hidden;
    transition:
        background 380ms cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Niveau 1 - faible (rouge) */
.auth-strength[data-level="1"] .auth-strength-bar span:nth-child(-n+1) {
    background: linear-gradient(90deg, #b91c1c, #ef4444);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.35);
}

/* Niveau 2 - moyen (orange) */
.auth-strength[data-level="2"] .auth-strength-bar span:nth-child(-n+2) {
    background: linear-gradient(90deg, #d97706, #f59e0b);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

/* Niveau 3 - bon (vert clair) */
.auth-strength[data-level="3"] .auth-strength-bar span:nth-child(-n+3) {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.32);
}

/* Niveau 4 - excellent (vert sature) */
.auth-strength[data-level="4"] .auth-strength-bar span {
    background: linear-gradient(90deg, #15803d, #16a34a);
    box-shadow: 0 0 10px rgba(22, 163, 74, 0.40);
}

/* Pulse subtil sur le dernier segment actif a chaque montee de niveau */
@keyframes auth-strength-pulse {
    0%   { transform: scaleY(1); }
    50%  { transform: scaleY(1.2); }
    100% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-strength[data-level="1"] .auth-strength-bar span:nth-child(1),
    .auth-strength[data-level="2"] .auth-strength-bar span:nth-child(2),
    .auth-strength[data-level="3"] .auth-strength-bar span:nth-child(3),
    .auth-strength[data-level="4"] .auth-strength-bar span:nth-child(4) {
        animation: auth-strength-pulse 480ms cubic-bezier(0.32, 0.72, 0, 1);
    }
}

.auth-strength-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.auth-strength[data-level="1"] .auth-strength-label { color: #b91c1c; }
.auth-strength[data-level="2"] .auth-strength-label { color: #b45309; }
.auth-strength[data-level="3"] .auth-strength-label { color: #92400e; }
.auth-strength[data-level="4"] .auth-strength-label { color: #15803d; }

@media (prefers-color-scheme: dark) {
    .auth-strength[data-level="1"] .auth-strength-label { color: #fca5a5; }
    .auth-strength[data-level="2"] .auth-strength-label { color: #fdba74; }
    .auth-strength[data-level="3"] .auth-strength-label { color: #fcd34d; }
    .auth-strength[data-level="4"] .auth-strength-label { color: #6ee7b7; }
}

.auth-strength[data-level="1"] .auth-strength-label { color: #dc2626; }
.auth-strength[data-level="2"] .auth-strength-label { color: #b45309; }
.auth-strength[data-level="3"] .auth-strength-label { color: #15803d; }
.auth-strength[data-level="4"] .auth-strength-label { color: #15803d; }

@media (prefers-color-scheme: dark) {
    .auth-strength[data-level="1"] .auth-strength-label { color: #fca5a5; }
    .auth-strength[data-level="2"] .auth-strength-label { color: #fcd34d; }
    .auth-strength[data-level="3"] .auth-strength-label { color: #6ee7b7; }
    .auth-strength[data-level="4"] .auth-strength-label { color: #6ee7b7; }
}

/* ============================================================
   Confirmation eslesme gostergesi
   ============================================================ */

.auth-match {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

.auth-match.is-shown { display: inline-flex; }
.auth-match.is-match { color: #15803d; }
.auth-match.is-mismatch { color: #b91c1c; }

@media (prefers-color-scheme: dark) {
    .auth-match.is-match { color: #6ee7b7; }
    .auth-match.is-mismatch { color: #fca5a5; }
}

.auth-match svg { width: 14px; height: 14px; }

/* ============================================================
   "Se souvenir de moi" checkbox
   ============================================================ */

.auth-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 10px;
    font-size: 13.5px;
    color: var(--text-secondary);
    user-select: none;
    cursor: pointer;
}

.auth-remember input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    background: var(--surface-0);
    cursor: pointer;
    position: relative;
    transition: background var(--c2rt-transition), border-color var(--c2rt-transition);
    flex-shrink: 0;
}

.auth-remember input[type="checkbox"]:checked {
    background: var(--c2rt-blue-500);
    border-color: var(--c2rt-blue-500);
}

.auth-remember input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%) rotate(45deg);
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

.auth-remember input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* ============================================================
   Buton loading state (spinner pendant submit)
   ============================================================ */

.btn-primary.is-loading {
    color: transparent;
    pointer-events: none;
    position: relative;
}

.btn-primary.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: auth-spin 720ms linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Skip link (accessibilite clavier)
   ============================================================ */

.auth-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 100;
    background: var(--surface-0);
    color: var(--c2rt-blue-700);
    padding: 8px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--c2rt-blue-500);
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    transition: top 160ms ease;
}

.auth-skip-link:focus-visible {
    top: 16px;
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.20);
}

/* ============================================================
   Aria-described error tying (link error msg to input)
   ============================================================ */

.auth-input[aria-invalid="true"] {
    border-color: var(--state-danger);
}

.auth-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.14);
}

/* ============================================================
   Mobile : tighten remember + strength + match
   ============================================================ */

@media (max-width: 880px) {
    .auth-strength-label { font-size: 11.5px; }
    .auth-capslock { font-size: 11.5px; padding: 5px 8px; }
}

/* ============================================================
   Animation d'entree de la carte (fade + glissement leger)
   ============================================================ */

@keyframes auth-card-enter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-card { animation: auth-card-enter 480ms cubic-bezier(0.32, 0.72, 0, 1) backwards; }
}

/* ============================================================
   Ligne label + bouton generateur (haut du champ)
   ============================================================ */

.auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.auth-label-row .auth-label {
    margin: 0;
}

/* Toolbar conservee pour compatibilite (au cas ou utilisee ailleurs) */
.auth-password-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.auth-password-generate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    color: var(--c2rt-blue-600);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    font-family: var(--c2rt-font);
    font-weight: 600;
    font-size: 11.5px;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background var(--c2rt-transition),
        color var(--c2rt-transition),
        border-color var(--c2rt-transition);
}

.auth-password-generate:hover {
    color: var(--c2rt-blue-700);
    border-color: var(--c2rt-blue-600);
    background: rgba(37, 99, 235, 0.05);
}

.auth-password-generate:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20);
}

@media (prefers-color-scheme: dark) {
    .auth-password-generate {
        color: var(--c2rt-blue-400);
        border-color: rgba(255, 255, 255, 0.15);
    }
    .auth-password-generate:hover {
        color: #ffffff;
        border-color: var(--c2rt-blue-400);
        background: rgba(96, 165, 250, 0.15);
    }
}

.auth-password-generate svg { width: 12px; height: 12px; }

/* Ligne dediee au bouton Generer, en bas du formulaire avant le submit */
.auth-generate-row {
    display: flex;
    justify-content: flex-end;
    margin: 4px 0 12px;
}

/* ============================================================
   Strength meter ameliore : barre continue + checklist criteres
   ============================================================ */

/* Criteria : grille 2 colonnes compacte, sans pills */
.auth-strength-criteria {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.auth-strength-criteria li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-muted);
    transition: color var(--c2rt-transition);
}

.auth-strength-criteria li[data-met="true"] {
    color: #15803d;
    font-weight: 500;
}

.auth-strength-criteria li[data-met="false"] {
    color: #b91c1c;
    font-weight: 400;
}

@media (prefers-color-scheme: dark) {
    .auth-strength-criteria li[data-met="true"] { color: #6ee7b7; }
    .auth-strength-criteria li[data-met="false"] { color: #fca5a5; }
}

.auth-strength-criteria-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Visibilite des 3 icones selon l'etat (empty / true / false) */
.auth-strength-criteria li[data-met="empty"] .auth-strength-criteria-check,
.auth-strength-criteria li[data-met="empty"] .auth-strength-criteria-cross { display: none; }
.auth-strength-criteria li[data-met="empty"] .auth-strength-criteria-dot { display: block; opacity: 0.55; }

.auth-strength-criteria li[data-met="true"] .auth-strength-criteria-dot,
.auth-strength-criteria li[data-met="true"] .auth-strength-criteria-cross { display: none; }
.auth-strength-criteria li[data-met="true"] .auth-strength-criteria-check { display: block; }

.auth-strength-criteria li[data-met="false"] .auth-strength-criteria-check,
.auth-strength-criteria li[data-met="false"] .auth-strength-criteria-dot { display: none; }
.auth-strength-criteria li[data-met="false"] .auth-strength-criteria-cross { display: block; }

/* ============================================================
   Stagger fade-up : elements du formulaire entrent un par un
   ============================================================ */

@keyframes auth-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-form-side > * {
        animation: auth-fade-up 460ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
    }
    .auth-form-side > *:nth-child(1) { animation-delay: 120ms; }
    .auth-form-side > *:nth-child(2) { animation-delay: 180ms; }
    .auth-form-side > *:nth-child(3) { animation-delay: 240ms; }
    .auth-form-side > *:nth-child(4) { animation-delay: 300ms; }
    .auth-form-side > *:nth-child(5) { animation-delay: 360ms; }
    .auth-form-side > *:nth-child(6) { animation-delay: 420ms; }

    .auth-form-side form > * {
        animation: auth-fade-up 460ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
    }
    .auth-form-side form > *:nth-child(1) { animation-delay: 200ms; }
    .auth-form-side form > *:nth-child(2) { animation-delay: 260ms; }
    .auth-form-side form > *:nth-child(3) { animation-delay: 320ms; }
    .auth-form-side form > *:nth-child(4) { animation-delay: 380ms; }
    .auth-form-side form > *:nth-child(5) { animation-delay: 440ms; }
    .auth-form-side form > *:nth-child(6) { animation-delay: 500ms; }
    .auth-form-side form > *:nth-child(7) { animation-delay: 560ms; }
}

/* ============================================================
   Illustration : cizgiler sirayla cizilir (draw-in)
   ============================================================ */

@keyframes auth-illu-draw {
    from { stroke-dashoffset: 200; opacity: 0; }
    to   { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes auth-illu-fade {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-brand-illustration svg line,
    .auth-brand-illustration svg rect,
    .auth-brand-illustration svg path {
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
        animation: auth-illu-draw 1100ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    .auth-brand-illustration svg rect              { animation-delay: 240ms; }
    .auth-brand-illustration svg line:nth-of-type(1),
    .auth-brand-illustration svg line:nth-of-type(2) { animation-delay: 380ms; }
    .auth-brand-illustration svg line:nth-of-type(3),
    .auth-brand-illustration svg line:nth-of-type(4) { animation-delay: 460ms; }
    .auth-brand-illustration svg line:nth-of-type(5),
    .auth-brand-illustration svg line:nth-of-type(6),
    .auth-brand-illustration svg line:nth-of-type(7) { animation-delay: 540ms; }
    .auth-brand-illustration svg circle {
        transform-origin: center;
        opacity: 0;
        animation: auth-illu-fade 380ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
        animation-delay: 880ms;
    }
    .auth-brand-illustration svg path:last-of-type {
        animation-delay: 1020ms;
    }
}

/* ============================================================
   Brand-side radial highlights : nefes 8s
   ============================================================ */

@keyframes auth-glow-breathe {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-brand-side::before {
        animation: auth-glow-breathe 8s ease-in-out infinite;
    }
}

/* ============================================================
   Input focus : ring biraz buyur (4px -> 6px) ile expand his
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
    @keyframes auth-input-ring {
        from { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
        to   { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); }
    }
    .auth-input:focus {
        animation: auth-input-ring 220ms ease-out;
    }
}

/* ============================================================
   Click ripple sur les boutons primaires
   ============================================================ */

.btn-primary { position: relative; overflow: hidden; isolation: isolate; }

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
    transform: translate(-50%, -50%);
    transition: width 480ms ease-out, height 480ms ease-out, opacity 600ms ease-out;
    pointer-events: none;
    z-index: 0;
}

.btn-primary > * { position: relative; z-index: 1; }

.btn-primary:active::before {
    width: 360px;
    height: 360px;
    opacity: 0;
    transition: 0s;
}

/* ============================================================
   Alert shake : quand une erreur d'auth apparait
   ============================================================ */

@keyframes auth-alert-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-alert-danger {
        animation: auth-alert-shake 480ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 80ms;
    }
}

/* ============================================================
   Toast notifications (clipboard copy, etc.)
   ============================================================ */

.auth-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 14px);
    background: var(--surface-0);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.20);
    opacity: 0;
    z-index: 200;
    transition: opacity 240ms ease, transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
}

@media (prefers-color-scheme: dark) {
    .auth-toast { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55); }
}

.auth-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

.auth-toast svg { width: 16px; height: 16px; color: #16a34a; flex-shrink: 0; }

@media (prefers-color-scheme: dark) {
    .auth-toast svg { color: #6ee7b7; }
}

/* ============================================================
   Touch target enlargement
   ============================================================ */

.auth-password-toggle {
    width: 36px;
    height: 36px;
}

.auth-password-toggle svg {
    width: 20px;
    height: 20px;
}

.auth-password-generate {
    min-height: 34px;
}

/* ============================================================
   Animated link underline
   ============================================================ */

.auth-link {
    position: relative;
}

.auth-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
}

.auth-link:hover {
    text-decoration: none;
}

.auth-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* ============================================================
   Forced colors (Windows high contrast)
   ============================================================ */

@media (forced-colors: active) {
    .btn-primary { border: 2px solid CanvasText; }
    .auth-input { border: 2px solid CanvasText; }
    .auth-input:focus { outline: 2px solid Highlight; outline-offset: 2px; }
    .auth-card { border: 1px solid CanvasText; }
    .auth-remember input[type="checkbox"] { border: 2px solid CanvasText; }
}

/* ============================================================
   Prefers more contrast (utilisateurs avec besoin renforce)
   ============================================================ */

@media (prefers-contrast: more) {
    .auth-input { border-width: 2px; }
    .auth-label { font-weight: 700; color: var(--text-primary); }
    .auth-text { color: var(--text-primary); }
    .auth-form-errors { font-weight: 700; }
}

/* ============================================================
   Dark mode form-side : teinte legerement plus chaude
   ============================================================ */

@media (prefers-color-scheme: dark) {
    .auth-form-side { background: #111827; }
    .auth-input { background: #1f2937; border-color: #374151; }
    .auth-input:focus {
        background: #1f2937;
        border-color: var(--c2rt-blue-400);
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
    }
    .auth-input::placeholder { color: #6b7280; }
}

/* ============================================================
   1) Criteria stagger entrance : les 5 items se revelent un par un
   ============================================================ */

.auth-strength-criteria li {
    opacity: 0;
    transform: translateY(6px);
}

@keyframes auth-criteria-in {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-form-group:focus-within .auth-strength-criteria li,
    .auth-form-group:has(input:not(:placeholder-shown)) .auth-strength-criteria li {
        animation: auth-criteria-in 360ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }
    .auth-strength-criteria li:nth-child(1) { animation-delay: 120ms; }
    .auth-strength-criteria li:nth-child(2) { animation-delay: 180ms; }
    .auth-strength-criteria li:nth-child(3) { animation-delay: 240ms; }
    .auth-strength-criteria li:nth-child(4) { animation-delay: 300ms; }
    .auth-strength-criteria li:nth-child(5) { animation-delay: 360ms; }
}

/* Si l'utilisateur a desactive les animations, les items restent visibles */
@media (prefers-reduced-motion: reduce) {
    .auth-form-group:focus-within .auth-strength-criteria li,
    .auth-form-group:has(input:not(:placeholder-shown)) .auth-strength-criteria li {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   2) Force label : crossfade entre Faible / Moyen / Bon / Excellent
   ============================================================ */

.auth-strength-label {
    transition:
        opacity 200ms cubic-bezier(0.32, 0.72, 0, 1),
        color 200ms ease;
}

.auth-strength-label.is-changing { opacity: 0; }

/* ============================================================
   3) Generator button gear rotation au clic
   ============================================================ */

.auth-password-generate svg {
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.auth-password-generate.is-rotating svg {
    transform: rotate(360deg);
}

/* ============================================================
   4) Confirmation mismatch : border rouge persistant + pulse au premier
   ============================================================ */

.auth-input.is-mismatch {
    border-color: var(--state-danger);
}

.auth-input.is-mismatch:focus {
    border-color: var(--state-danger);
    box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.14);
}

@keyframes auth-input-pulse-error {
    0%   { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.45); }
    60%  { box-shadow: 0 0 0 8px rgba(185, 28, 28, 0); }
    100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-input.is-pulsing {
        animation: auth-input-pulse-error 640ms cubic-bezier(0.32, 0.72, 0, 1);
    }
}

/* =========================================================================
   Responsive — refonte mobile aggressive pour les pages d'authentification.
   Le canon historique a 880 px laissait deux problemes visibles sous 640 :
   le panneau marque restait visible et occupait une bande horizontale
   inutile au-dessus du formulaire, et la coque restait fixe a 460 px de
   largeur maxi alors que le viewport pouvait etre plus etroit. Ces deux
   nouveaux blocs traitent le sujet a la racine.
   ========================================================================= */
@media (max-width: 640px) {
    .auth-shell {
        padding: 20px 14px;
        align-items: flex-start;
        padding-top: 28px;
    }
    .auth-card {
        max-width: 100%;
        border-radius: 18px;
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
        grid-template-columns: 1fr;
    }
    .auth-brand-side {
        padding: 18px 18px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
    }
    .auth-brand-tagline,
    .auth-brand-illustration { display: none; }
    .auth-brand {
        padding: 10px 16px 12px;
        border-radius: 12px;
    }
    .auth-brand-logo {
        width: 140px;
        height: 70px;
    }
    .auth-brand-image {
        height: 56px;
    }
    .auth-form-side {
        padding: 22px 20px 24px;
    }
    .auth-title {
        font-size: 22px;
    }
    .auth-text {
        font-size: 13.5px;
    }
    .auth-form-group {
        margin-bottom: 14px;
    }
    .auth-label {
        font-size: 13px;
    }
    .auth-input {
        font-size: 14.5px;
        padding: 10px 12px;
    }
    .auth-alert {
        font-size: 13px;
        padding: 10px 12px;
    }
    .auth-remember {
        font-size: 13px;
    }
    .auth-secondary {
        font-size: 13px;
        margin-top: 14px;
    }
    .auth-footer {
        margin-top: 18px;
        font-size: 11.5px;
    }
    body::before { width: 360px; height: 360px; top: -160px; right: -120px; }
    body::after  { width: 420px; height: 420px; bottom: -180px; left: -120px; }
}

@media (max-width: 520px) {
    .auth-shell {
        padding: 14px 10px;
        padding-top: 20px;
    }
    .auth-card {
        border-radius: 14px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    }
    /* Brand-side reste visible avec logo + tagline + illustration centres,
       meme sur tres petit ecran. Decision Rzgar : on garde le caractere
       identitaire. */
    .auth-brand-side {
        display: flex !important;
        padding: 18px 16px 14px !important;
    }
    .auth-brand-illustration {
        max-width: 160px !important;
    }
    .auth-form-side {
        padding: 22px 18px 20px;
    }
    .auth-title {
        font-size: 20px;
    }
    .auth-text {
        font-size: 13px;
        margin-bottom: 14px;
    }
    .auth-form-group {
        margin-bottom: 12px;
    }
    .auth-input {
        font-size: 14px;
        padding: 10px 11px;
    }
    .auth-password-toggle {
        width: 30px;
        height: 30px;
        right: 6px;
    }
    .auth-strength-label { font-size: 11px; }
    .auth-capslock {
        font-size: 11px;
        padding: 4px 7px;
    }
    .btn-primary-block {
        padding: 11px 16px;
        font-size: 14.5px;
    }
    .auth-link-back {
        font-size: 13px;
        margin-top: 14px;
    }
    .auth-footer {
        margin-top: 14px;
        font-size: 11px;
        padding: 0 8px;
    }
    body::before { width: 280px; height: 280px; }
    body::after  { width: 320px; height: 320px; }
}