/**
 * login-recovery-code.css — Panneau « code de secours » integre a login.phtml
 * (mission validation d'appareil, 2026-07-31).
 *
 * Ajout localise et 100% autonome : ne modifie JAMAIS login-redesign.css
 * (fichier partage, deja derive en production). Reutilise .form-control /
 * .form-label (login-redesign.css) pour l'input ; ne redefinit que les
 * elements propres a ce panneau (lien de bascule, conteneur replie, saisie
 * du code). 100% tokens design system phi.
 *
 * Accessibilite (brief Pro Max 2026-07-31) : focus visible explicite, cible
 * tactile >= 44px sur le lien de bascule, cursor:pointer explicite,
 * transitions 150-300ms sur transform/opacity uniquement.
 */

.recovery-toggle-row {
    text-align: center;
    margin-block-end: var(--space-3);
}

.recovery-toggle-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 44px;
    padding-inline: var(--space-2);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--duration-normal) var(--ease-golden);
}

.recovery-toggle-link:hover,
.recovery-toggle-link:focus-visible {
    color: var(--accent-cyan, var(--tenant-accent, #E63946));
}

.recovery-toggle-link:focus-visible {
    outline: 2px solid var(--focus-ring, #1677C8));
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.recovery-panel {
    margin-block-end: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    animation: recoveryPanelIn var(--duration-medium) var(--ease-out) both;
}

body.light-theme .recovery-panel {
    background: rgba(15, 23, 42, 0.03);
}

@keyframes recoveryPanelIn {
    from { opacity: 0; transform: translateY(calc(-1 * var(--space-2))); }
    to   { opacity: 1; transform: translateY(0); }
}

.recovery-code-input {
    text-align: center;
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.recovery-code-hint {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted, var(--text-secondary));
}

/* Accessibilite additive : login-redesign.css ne definit pas d'etat focus-visible
   dedie pour .theme-toggle — ajout ici (fichier propre, ne touche pas le CSS
   partage) pour garantir un focus clavier visible sur cette page aussi. */
.theme-toggle:focus-visible {
    outline: 2px solid var(--focus-ring, #1677C8));
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .recovery-panel { animation: none !important; }
}