/*
 * N2D SMS Password — UI "Soft Premium" (Linear/Stripe vibe)
 * -----------------------------------------------------------------------------
 * - Tous les composants sont préfixés .n2dsms-* pour ne jamais collisionner.
 * - Les éléments critiques (input, button, card, OTP cells) sont protégés
 *   par "html body" + !important contre les thèmes PrestaShop 1.5 intrusifs.
 * - font-size: 16px forcé sur les wrappers .n2dsms-page / .n2dsms-alt /
 *   .n2dsms-otp pour absorber les thèmes qui ont un html { font-size: 14px }
 *   (corppro et autres). Les enfants utilisent em pour scaler proprement.
 *   Les dimensions critiques (OTP cells, stepper dots, SVG) sont en px absolus.
 * - Palette pilotée par --n2dsms-accent : un thème peut surcharger la variable
 *   pour reprendre sa couleur primaire sans patcher le CSS.
 * - Toutes les animations respectent prefers-reduced-motion.
 */

/* ============================================================================
   1. Variables — palette pilotable par le thème
   ============================================================================ */
:root {
    --n2dsms-accent:        #6366f1;
    --n2dsms-accent-2:      #8b5cf6;
    --n2dsms-accent-soft:   rgba(99, 102, 241, 0.10);
    --n2dsms-accent-ring:   rgba(99, 102, 241, 0.22);
    --n2dsms-accent-shadow: rgba(99, 102, 241, 0.32);

    --n2dsms-bg:            #f7f7fb;
    --n2dsms-surface:       #ffffff;
    --n2dsms-surface-2:     #fafafa;
    --n2dsms-border:        #e4e4e7;
    --n2dsms-border-strong: #d4d4d8;
    --n2dsms-text:          #0a0a0f;
    --n2dsms-text-soft:     #52525b;
    --n2dsms-text-muted:    #71717a;

    --n2dsms-success:       #16a34a;
    --n2dsms-success-bg:    #f0fdf4;
    --n2dsms-success-border:#bbf7d0;
    --n2dsms-error:         #dc2626;
    --n2dsms-error-bg:      #fef2f2;
    --n2dsms-error-border:  #fecaca;

    --n2dsms-radius-card:   16px;
    --n2dsms-radius-input:  10px;
    --n2dsms-radius-cell:   12px;

    --n2dsms-shadow-card:   0 1px 2px rgba(15, 17, 21, 0.04),
                            0 8px 24px -10px rgba(15, 17, 21, 0.10);
    --n2dsms-shadow-card-hover:
                            0 1px 2px rgba(15, 17, 21, 0.05),
                            0 16px 36px -12px rgba(15, 17, 21, 0.14);
    --n2dsms-shadow-btn:    0 4px 14px var(--n2dsms-accent-shadow);

    --n2dsms-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================================
   2. Protection SVG — certains thèmes ont svg { width: 100% } ou similaire,
      ce qui fait apparaître nos icônes en 300×150 par défaut. On contraint
      toutes les images vectorielles du module à respecter leurs attributs.
   ============================================================================ */
html body .n2dsms-page svg,
html body .n2dsms-alt svg {
    display: inline-block !important;
    max-width: 100% !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle !important;
    box-sizing: content-box !important;
}

/* ============================================================================
   3. Page wrapper + Card
   ============================================================================ */
.n2dsms-page,
html body .n2dsms-page {
    box-sizing: border-box;
    max-width: 540px;
    margin: 40px auto !important;
    padding: 0 16px;
    color: var(--n2dsms-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, system-ui, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.n2dsms-page *,
.n2dsms-page *::before,
.n2dsms-page *::after {
    box-sizing: border-box;
}

.n2dsms-card,
html body .n2dsms-card {
    position: relative !important;
    background: var(--n2dsms-surface) !important;
    border: 1px solid var(--n2dsms-border) !important;
    border-radius: var(--n2dsms-radius-card) !important;
    padding: 2em 1.875em !important;
    box-shadow: var(--n2dsms-shadow-card) !important;
    overflow: hidden;
    transition: box-shadow 240ms var(--n2dsms-ease);
    color: var(--n2dsms-text);
}
.n2dsms-card:hover {
    box-shadow: var(--n2dsms-shadow-card-hover) !important;
}

/* Accent line — la "signature" en haut de la carte */
.n2dsms-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--n2dsms-accent), var(--n2dsms-accent-2));
    border-radius: var(--n2dsms-radius-card) var(--n2dsms-radius-card) 0 0;
    pointer-events: none;
}

.n2dsms-card__title,
html body .n2dsms-card__title {
    margin: 0 0 0.4em !important;
    min-height: 42px !important;
    font-size: 1.5em !important;
    font-weight: 700 !important;
    color: var(--n2dsms-text) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    text-align: left;
    text-transform: none;
}
.n2dsms-card__intro,
html body .n2dsms-card__intro {
    margin: 0 0 1.5em !important;
    color: var(--n2dsms-text-soft) !important;
    font-size: 1em !important;
    line-height: 1.55 !important;
    text-align: left;
}
.n2dsms-card__intro strong {
    color: var(--n2dsms-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Reveal au mount — désactivé si reduce-motion */
@keyframes n2dsms-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.n2dsms-card[data-n2dsms-reveal] {
    animation: n2dsms-reveal 480ms var(--n2dsms-ease) both;
}

/* ============================================================================
   4. Stepper — 3 étapes connectées
   ============================================================================ */
.n2dsms-steps {
    list-style: none !important;
    margin: 0 0 1.75em !important;
    padding: 0 !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
}
.n2dsms-steps__item {
    position: relative;
    flex: 1 1 0;
    text-align: center;
    color: var(--n2dsms-text-muted);
    font-size: 0.8em;
    font-weight: 500;
    list-style: none !important;
}
.n2dsms-steps__item::marker { content: none; }
.n2dsms-steps__item + .n2dsms-steps__item::before {
    content: "";
    position: absolute;
    top: 13px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--n2dsms-border);
    z-index: 0;
    transition: background 360ms var(--n2dsms-ease);
}
.n2dsms-steps__item.is-done + .n2dsms-steps__item::before,
.n2dsms-steps__item.is-current::before {
    background: var(--n2dsms-accent);
}
.n2dsms-steps__dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--n2dsms-surface);
    border: 2px solid var(--n2dsms-border);
    color: var(--n2dsms-text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: all 240ms var(--n2dsms-ease);
}
.n2dsms-steps__item.is-current .n2dsms-steps__dot {
    background: var(--n2dsms-accent);
    border-color: var(--n2dsms-accent);
    color: #ffffff;
    box-shadow: 0 0 0 4px var(--n2dsms-accent-ring);
    transform: scale(1.08);
}
.n2dsms-steps__item.is-done .n2dsms-steps__dot {
    background: var(--n2dsms-accent);
    border-color: var(--n2dsms-accent);
    color: #ffffff;
}
html body .n2dsms-steps__item.is-done .n2dsms-steps__dot svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #ffffff !important;
    stroke-width: 3 !important;
    fill: none !important;
}
.n2dsms-steps__label {
    display: block;
    margin-top: 7px;
    color: var(--n2dsms-text-muted);
    font-size: inherit;
    transition: color 240ms var(--n2dsms-ease);
}
.n2dsms-steps__item.is-current .n2dsms-steps__label {
    color: var(--n2dsms-text);
    font-weight: 600;
}
.n2dsms-steps__item.is-done .n2dsms-steps__label {
    color: var(--n2dsms-text-soft);
}

/* ============================================================================
   5. Form fields — floating label
   ============================================================================ */
.n2dsms-form,
html body .n2dsms-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1em !important;
    margin: 0 !important;
    padding: 0 !important;
}

.n2dsms-field {
    position: relative;
}
html body .n2dsms-field__input,
html body input.n2dsms-field__input {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1.5em 1em 0.6em !important;
    font-size: 1em !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
    color: var(--n2dsms-text) !important;
    background: var(--n2dsms-surface) !important;
    background-image: none !important;
    border: 1.5px solid var(--n2dsms-border) !important;
    border-radius: var(--n2dsms-radius-input) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    height: auto !important;
    text-transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: border-color 180ms var(--n2dsms-ease),
                box-shadow 180ms var(--n2dsms-ease),
                background 180ms var(--n2dsms-ease);
}
html body .n2dsms-field__input::placeholder {
    color: transparent !important;
    opacity: 1 !important;
}
html body .n2dsms-field__input:hover { border-color: var(--n2dsms-border-strong) !important; }
html body .n2dsms-field__input:focus {
    outline: none !important;
    border-color: var(--n2dsms-accent) !important;
    box-shadow: 0 0 0 4px var(--n2dsms-accent-ring) !important;
}
html body .n2dsms-field__input--locked,
html body input.n2dsms-field__input--locked {
    background: var(--n2dsms-surface-2) !important;
    cursor: wait !important;
    color: var(--n2dsms-text-muted) !important;
}
/* Champ en lecture seule (ex. email du compte affiché avant de saisir le pwd).
   Pour signaler que ce n'est pas un input à modifier sans toutefois le cacher. */
html body .n2dsms-field--readonly .n2dsms-field__input,
html body .n2dsms-field--readonly input.n2dsms-field__input {
    background: var(--n2dsms-surface-2) !important;
    cursor: default !important;
    color: var(--n2dsms-text-soft) !important;
    border-color: var(--n2dsms-border) !important;
}
html body .n2dsms-field--readonly .n2dsms-field__input:focus {
    border-color: var(--n2dsms-border) !important;
    box-shadow: none !important;
}

.n2dsms-field__label,
html body .n2dsms-field__label {
    position: absolute !important;
    top: 1em !important;
    left: 1em !important;
    margin: 0 !important;
    padding: 0 0.25em !important;
    font-size: 1em !important;
    font-weight: 500 !important;
    color: var(--n2dsms-text-muted) !important;
    background: transparent !important;
    pointer-events: none !important;
    transform-origin: 0 50% !important;
    transition: transform 180ms var(--n2dsms-ease),
                color 180ms var(--n2dsms-ease) !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}
.n2dsms-field__input:focus + .n2dsms-field__label,
.n2dsms-field__input:not(:placeholder-shown) + .n2dsms-field__label {
    transform: translateY(-0.7em) scale(0.78) !important;
    color: var(--n2dsms-accent) !important;
    font-weight: 600 !important;
}

.n2dsms-field__hint {
    margin: 0.45em 0 0 0.15em !important;
    color: var(--n2dsms-text-muted);
    font-size: 0.82em;
    line-height: 1.4;
}

/* Champ password : place pour l'icône œil */
.n2dsms-field--password .n2dsms-field__input,
html body .n2dsms-field--password .n2dsms-field__input,
html body .n2dsms-field--password input.n2dsms-field__input {
    padding-right: 3em !important;
}
.n2dsms-field__reveal,
html body .n2dsms-field__reveal,
html body button.n2dsms-field__reveal {
    position: absolute !important;
    top: 50% !important;
    right: 0.5em !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: var(--n2dsms-text-muted) !important;
    transition: background 160ms var(--n2dsms-ease), color 160ms var(--n2dsms-ease) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}
.n2dsms-field__reveal:hover {
    background: var(--n2dsms-accent-soft) !important;
    color: var(--n2dsms-accent) !important;
}
.n2dsms-field__reveal:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--n2dsms-accent-ring) !important;
}
html body .n2dsms-field__reveal svg {
    width: 18px !important;
    height: 18px !important;
}
/* Toggle œil / œil barré : piloté par aria-pressed du button parent.
   Spécificité plus haute que la règle globale "display:inline-block !important",
   pour que le display:none de l'icône inactive l'emporte. */
html body .n2dsms-field__reveal[aria-pressed="false"] svg[data-icon="eye-off"],
html body .n2dsms-field__reveal[aria-pressed="true"]  svg[data-icon="eye"] {
    display: none !important;
}

/* État erreur */
.n2dsms-field--error .n2dsms-field__input,
html body .n2dsms-field--error .n2dsms-field__input {
    border-color: var(--n2dsms-error) !important;
    background: var(--n2dsms-error-bg) !important;
}
.n2dsms-field--error .n2dsms-field__label {
    color: var(--n2dsms-error) !important;
}

/* ============================================================================
   6. Boutons
   ============================================================================ */
html body .n2dsms-btn,
html body button.n2dsms-btn,
html body a.n2dsms-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5em !important;
    width: 100% !important;
    margin: 1.25em 0 0 !important;
    padding: 1em 1.4em !important;
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--n2dsms-accent), var(--n2dsms-accent-2)) !important;
    background-image: linear-gradient(135deg, var(--n2dsms-accent), var(--n2dsms-accent-2)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: var(--n2dsms-shadow-btn) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    text-align: center !important;
    letter-spacing: 0.005em !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: transform 180ms var(--n2dsms-ease),
                box-shadow 200ms var(--n2dsms-ease),
                filter 180ms var(--n2dsms-ease) !important;
}
html body .n2dsms-btn:hover,
html body button.n2dsms-btn:hover,
html body a.n2dsms-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px var(--n2dsms-accent-shadow) !important;
    color: #ffffff !important;
    filter: brightness(1.04) !important;
}
html body .n2dsms-btn:active,
html body button.n2dsms-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px var(--n2dsms-accent-shadow) !important;
}
html body .n2dsms-btn:focus-visible,
html body button.n2dsms-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 4px var(--n2dsms-accent-ring),
                var(--n2dsms-shadow-btn) !important;
}
html body .n2dsms-btn[disabled],
html body button.n2dsms-btn[disabled],
html body .n2dsms-btn--loading {
    cursor: progress !important;
    filter: saturate(0.85) brightness(0.95) !important;
    transform: none !important;
}

html body .n2dsms-btn__arrow {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
    flex: 0 0 auto !important;
    transition: transform 200ms var(--n2dsms-ease);
}
.n2dsms-btn:hover .n2dsms-btn__arrow { transform: translateX(2px); }

/* Spinner inline pour l'état loading */
.n2dsms-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 7px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: n2dsms-spin 0.7s linear infinite;
    box-sizing: border-box;
}
@keyframes n2dsms-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   7. OTP — 6 cases (dimensions en px absolus pour éviter la cascade em)
   ============================================================================ */
.n2dsms-otp,
html body .n2dsms-otp {
    display: flex !important;
    gap: 9px !important;
    justify-content: center !important;
    margin: 28px 0 8px !important;
    padding: 0 !important;
    font-size: 16px !important;
}
html body .n2dsms-otp__input,
html body input.n2dsms-otp__input {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 48px !important;
    height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 2px solid var(--n2dsms-border) !important;
    border-radius: var(--n2dsms-radius-cell) !important;
    background: var(--n2dsms-surface) !important;
    color: var(--n2dsms-text) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 system-ui, sans-serif !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02) !important;
    caret-color: var(--n2dsms-accent);
    box-sizing: border-box !important;
    text-transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 180ms var(--n2dsms-ease),
                border-color 180ms var(--n2dsms-ease),
                box-shadow 180ms var(--n2dsms-ease),
                background 180ms var(--n2dsms-ease) !important;
}
html body .n2dsms-otp__input::placeholder { color: transparent !important; }
html body .n2dsms-otp__input:hover {
    border-color: var(--n2dsms-border-strong) !important;
}
html body .n2dsms-otp__input:focus {
    outline: none !important;
    border-color: var(--n2dsms-accent) !important;
    box-shadow: 0 0 0 4px var(--n2dsms-accent-ring),
                0 8px 18px -8px var(--n2dsms-accent-shadow) !important;
    transform: translateY(-2px) scale(1.04) !important;
}
/* cellule "remplie" : background subtil + bordure accent */
html body .n2dsms-otp__input:not(:placeholder-shown) {
    background: var(--n2dsms-accent-soft) !important;
    border-color: var(--n2dsms-accent) !important;
}

.n2dsms-otp__error {
    margin-top: 14px !important;
    text-align: center;
    color: var(--n2dsms-error);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}
.n2dsms-otp--error .n2dsms-otp__input,
html body .n2dsms-otp--error .n2dsms-otp__input {
    border-color: var(--n2dsms-error) !important;
    background: var(--n2dsms-error-bg) !important;
    animation: n2dsms-shake 0.42s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes n2dsms-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

/* ============================================================================
   8. Resend (countdown)
   ============================================================================ */
.n2dsms-resend {
    margin: 1em 0 0 !important;
    text-align: center;
    font-size: 0.9em;
    color: var(--n2dsms-text-muted);
    line-height: 1.5;
}
.n2dsms-resend__action,
html body .n2dsms-resend__action {
    color: var(--n2dsms-accent) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: border-color 160ms var(--n2dsms-ease) !important;
}
.n2dsms-resend__action:hover {
    border-bottom-color: var(--n2dsms-accent) !important;
    color: var(--n2dsms-accent) !important;
}
.n2dsms-resend__timer {
    font-variant-numeric: tabular-nums;
    color: var(--n2dsms-text-soft);
}

/* ============================================================================
   9. Password strength meter
   ============================================================================ */
.n2dsms-strength {
    margin-top: 0.6em;
}
.n2dsms-strength__bar {
    display: flex;
    gap: 4px;
    height: 6px;
    margin-bottom: 0.4em;
}
.n2dsms-strength__segment {
    flex: 1 1 0;
    background: var(--n2dsms-border);
    border-radius: 99px;
    transition: background 220ms var(--n2dsms-ease);
}
.n2dsms-strength[data-score="1"] .n2dsms-strength__segment:nth-child(-n+1) { background: #ef4444; }
.n2dsms-strength[data-score="2"] .n2dsms-strength__segment:nth-child(-n+2) { background: #f59e0b; }
.n2dsms-strength[data-score="3"] .n2dsms-strength__segment:nth-child(-n+3) { background: #22c55e; }
.n2dsms-strength[data-score="4"] .n2dsms-strength__segment:nth-child(-n+4) { background: #16a34a; }
.n2dsms-strength__label {
    display: flex;
    justify-content: space-between;
    font-size: 0.78em;
    color: var(--n2dsms-text-muted);
    line-height: 1.4;
}
.n2dsms-strength__label strong {
    font-weight: 600;
    color: var(--n2dsms-text-soft);
}
.n2dsms-strength[data-score="1"] .n2dsms-strength__label strong { color: #ef4444; }
.n2dsms-strength[data-score="2"] .n2dsms-strength__label strong { color: #d97706; }
.n2dsms-strength[data-score="3"] .n2dsms-strength__label strong { color: #16a34a; }
.n2dsms-strength[data-score="4"] .n2dsms-strength__label strong { color: #15803d; }

/* ============================================================================
   10. Banners (success / error / info)
   ============================================================================ */
.n2dsms-banner {
    margin: 0 0 1em !important;
    padding: 0.85em 1em !important;
    border-radius: 12px;
    border: 1px solid var(--n2dsms-border);
    background: var(--n2dsms-surface-2);
    color: var(--n2dsms-text);
    font-size: 0.94em;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.65em;
}
html body .n2dsms-banner svg {
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    margin-top: 1px !important;
    stroke: currentColor !important;
    fill: none !important;
}
.n2dsms-banner--success {
    border-color: var(--n2dsms-success-border) !important;
    background: var(--n2dsms-success-bg) !important;
    color: #166534 !important;
}
.n2dsms-banner--error {
    border-color: var(--n2dsms-error-border) !important;
    background: var(--n2dsms-error-bg) !important;
    color: #991b1b !important;
}
.n2dsms-banner p { margin: 0 !important; }
.n2dsms-banner p + p { margin-top: 0.4em !important; }

/* ============================================================================
   11. Success state (étape "done")
   ============================================================================ */
.n2dsms-success {
    text-align: center;
    padding: 0.5em 0 0.25em;
}
html body .n2dsms-success__icon {
    width: 84px !important;
    height: 84px !important;
    margin: 0 auto 20px !important;
    display: block !important;
    stroke: var(--n2dsms-accent) !important;
}
.n2dsms-success__icon circle {
    fill: none !important;
    stroke: var(--n2dsms-accent) !important;
    stroke-width: 3 !important;
    stroke-dasharray: 226;
    stroke-dashoffset: 226;
    animation: n2dsms-draw-circle 700ms var(--n2dsms-ease) 0.1s forwards;
}
.n2dsms-success__icon path {
    fill: none !important;
    stroke: var(--n2dsms-accent) !important;
    stroke-width: 4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: n2dsms-draw-check 460ms var(--n2dsms-ease) 0.7s forwards;
}
@keyframes n2dsms-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes n2dsms-draw-check  { to { stroke-dashoffset: 0; } }

/* ============================================================================
   12. Back link
   ============================================================================ */
.n2dsms-back {
    margin: 1.5em 0 0 !important;
    text-align: center;
    font-size: 0.9em;
}
.n2dsms-back a,
html body .n2dsms-back a {
    color: var(--n2dsms-text-muted) !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: color 160ms var(--n2dsms-ease),
                border-color 160ms var(--n2dsms-ease) !important;
}
.n2dsms-back a:hover {
    color: var(--n2dsms-text) !important;
    border-bottom-color: currentColor !important;
}

/* ============================================================================
   13. Recovery link — inséré dans password.tpl du thème
   ============================================================================ */
.n2dsms-alt,
html body .n2dsms-alt {
    position: relative;
    margin: 24px 0 !important;
    padding: 18px 20px !important;
    border: 1px solid var(--n2dsms-border) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(135deg, var(--n2dsms-accent-soft), transparent 60%),
        var(--n2dsms-surface) !important;
    color: var(--n2dsms-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, system-ui, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,17,21,0.03);
}
.n2dsms-alt *,
.n2dsms-alt *::before,
.n2dsms-alt *::after {
    box-sizing: border-box;
}
.n2dsms-alt::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--n2dsms-accent), var(--n2dsms-accent-2));
}
.n2dsms-alt__body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left;
}
.n2dsms-alt__title,
html body .n2dsms-alt__title {
    margin: 0 0 2px !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    color: var(--n2dsms-text) !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}
.n2dsms-alt__text,
html body .n2dsms-alt__text {
    margin: 0 !important;
    font-size: 0.85em !important;
    color: var(--n2dsms-text-soft) !important;
    line-height: 1.45 !important;
}
.n2dsms-alt__link,
html body .n2dsms-alt__link,
html body a.n2dsms-alt__link {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    font-size: 0.88em !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--n2dsms-accent), var(--n2dsms-accent-2)) !important;
    background-image: linear-gradient(135deg, var(--n2dsms-accent), var(--n2dsms-accent-2)) !important;
    border: 0 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    box-shadow: 0 4px 10px -2px var(--n2dsms-accent-shadow) !important;
    white-space: nowrap !important;
    transition: transform 180ms var(--n2dsms-ease),
                box-shadow 200ms var(--n2dsms-ease) !important;
}
html body .n2dsms-alt__link:hover {
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px -2px var(--n2dsms-accent-shadow) !important;
}
html body .n2dsms-alt__link svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* ============================================================================
   14. Responsive
   ============================================================================ */
@media (max-width: 600px) {
    .n2dsms-page,
    html body .n2dsms-page {
        margin: 24px auto !important;
        padding: 0 12px !important;
    }
    .n2dsms-card,
    html body .n2dsms-card {
        padding: 1.5em 1.25em !important;
    }
    .n2dsms-card__title,
    html body .n2dsms-card__title { font-size: 1.35em !important; }
    .n2dsms-otp { gap: 7px !important; }
    html body .n2dsms-otp__input {
        width: 42px !important;
        height: 54px !important;
        font-size: 22px !important;
    }
    .n2dsms-steps__label { font-size: 0.75em; }
    .n2dsms-alt { flex-wrap: wrap !important; }
    .n2dsms-alt__link { width: 100% !important; justify-content: center !important; }
}

@media (max-width: 380px) {
    .n2dsms-otp { gap: 5px !important; }
    html body .n2dsms-otp__input {
        width: 36px !important;
        height: 48px !important;
        font-size: 19px !important;
    }
}

/* ============================================================================
   15. Reduced motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .n2dsms-card[data-n2dsms-reveal],
    .n2dsms-success__icon circle,
    .n2dsms-success__icon path,
    .n2dsms-spinner,
    .n2dsms-otp--error .n2dsms-otp__input,
    html body .n2dsms-otp--error .n2dsms-otp__input {
        animation: none !important;
    }
    .n2dsms-success__icon circle,
    .n2dsms-success__icon path {
        stroke-dashoffset: 0 !important;
    }
    *,
    .n2dsms-btn,
    .n2dsms-otp__input,
    .n2dsms-steps__dot,
    .n2dsms-field__input,
    .n2dsms-field__label {
        transition-duration: 0ms !important;
    }
    html body .n2dsms-btn:hover,
    html body .n2dsms-otp__input:focus,
    html body .n2dsms-alt__link:hover {
        transform: none !important;
    }
}