/* forms.css — composants de formulaire partagés par les deux thèmes du hub :
   puzzle à glisser, œil afficher/masquer, confirmation de mot de passe.
   Chargé par _layout.php (ancien thème) ET par _theme2_shell.php (thème de la landing).

   Les couleurs passent par des jetons locaux qui prennent la palette de la page :
   les --c-* de l'ancien thème s'ils existent, sinon ceux du thème 2 (--accent,
   --line-2…). Définis sur les composants eux-mêmes et non sur :root : le thème
   « clair » redéfinit ses couleurs sur <body>, une valeur résolue à :root
   ignorerait cette surcharge. */
.slcap, .slcap-done, .pw-field, .pw-match-msg {
    --f-accent: var(--c-accent, var(--accent, #c9a96e));
    --f-accent-soft: color-mix(in srgb, var(--f-accent) 22%, transparent);
    --f-border: var(--c-border, var(--line-2, #e7e5dc));
    --f-text: var(--c-text, var(--ink, #0f172a));
    --f-soft: var(--c-text-soft, var(--ink-2, #5a6478));
}

/* === Puzzle à glisser (inscription) — cf. lib_captcha.php ================ */
.slcap { margin: 1rem 0 .25rem; }
.slcap [hidden] { display: none !important; }
.slcap-label { font-size: 13px; font-weight: 600; color: var(--f-text); margin: 0 0 .5rem; }
.slcap-stage {
    position: relative; width: 100%; max-width: 100%; aspect-ratio: 2 / 1;
    border-radius: 12px; overflow: hidden; background: #e9e6dc;
    border: 1px solid var(--f-border);
    user-select: none; -webkit-user-select: none;
}
.slcap-bg { display: block; width: 100%; height: 100%; object-fit: cover; }
.slcap-piece {
    position: absolute; left: 0; top: 0; width: 17.35%; height: auto;
    pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}
.slcap-refresh {
    position: absolute; top: 8px; right: 8px; width: 34px; height: 34px;
    border: 0; border-radius: 50%; background: rgba(15, 23, 42, .62); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.slcap-refresh:hover { background: rgba(15, 23, 42, .82); }
.slcap-refresh:focus-visible { outline: 3px solid var(--f-accent); outline-offset: 2px; }
.slcap-refresh svg { width: 17px; height: 17px; }
.slcap-track {
    position: relative; height: 46px; margin-top: .6rem; overflow: hidden;
    border-radius: 12px; background: #f4f2ea; border: 1px solid var(--f-border);
}
.slcap-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--f-accent-soft); }
.slcap-hint {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding-left: 56px; font-size: 13px; color: var(--f-soft); pointer-events: none;
}
.slcap-handle {
    position: absolute; top: 0; left: 0; height: 100%; width: 59px; min-width: 44px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--f-accent); cursor: grab; touch-action: none;
    border-right: 1px solid var(--f-border); box-shadow: 2px 0 8px rgba(15, 23, 42, .08);
}
.slcap-handle:focus-visible { outline: 3px solid var(--f-accent); outline-offset: -3px; }
.slcap-handle svg { width: 22px; height: 22px; }
.slcap-handle .slcap-ico-check { display: none; }
.slcap.is-dragging .slcap-handle { cursor: grabbing; }
.slcap.is-busy .slcap-handle { opacity: .7; }
.slcap-status { min-height: 1.25em; margin: .45rem 0 0; font-size: 13px; color: var(--f-soft); }
.slcap-status.is-error { color: #b42318; }
.slcap.is-solved .slcap-track { border-color: #16a34a; }
.slcap.is-solved .slcap-fill { background: rgba(34, 197, 94, .2); }
.slcap.is-solved .slcap-hint { visibility: hidden; }
.slcap.is-solved .slcap-handle { color: #16a34a; cursor: default; }
.slcap.is-solved .slcap-handle .slcap-ico-arrow { display: none; }
.slcap.is-solved .slcap-handle .slcap-ico-check { display: block; }
.slcap.is-solved .slcap-status { color: #15803d; font-weight: 600; }
.slcap.is-error .slcap-track { border-color: #dc2626; animation: slcap-shake .45s ease; }
.slcap-alt { margin: .25rem 0 0; }
.slcap-switch {
    margin-top: .35rem; padding: 0; border: 0; background: none; font: inherit;
    font-size: 12.5px; color: var(--f-soft); text-decoration: underline; cursor: pointer;
}
.slcap-done { margin: 1rem 0 .25rem; font-size: 13px; font-weight: 600; color: #15803d; }
.slcap-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@keyframes slcap-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .slcap.is-error .slcap-track { animation: none; } }

/* === Œil afficher / masquer le mot de passe — assets/js/password-toggle.js === */
.pw-field { position: relative; }
.field .pw-field input,
body.theme-light .field .pw-field input,
.t2-auth .field .pw-field input { padding-right: 50px; }
.pw-toggle {
    position: absolute; top: 2px; bottom: 2px; right: 2px; width: 44px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 8px; background: transparent;
    color: var(--f-soft); cursor: pointer;
}
.pw-toggle[hidden] { display: none; }
.pw-toggle:hover { color: var(--f-text); background: rgba(15, 23, 42, .05); }
.pw-toggle:focus-visible { outline: 3px solid var(--f-accent); outline-offset: -3px; }
.pw-toggle svg { width: 20px; height: 20px; }
.pw-toggle .pw-ico-hide { display: none; }
.pw-toggle.is-shown .pw-ico-show { display: none; }
.pw-toggle.is-shown .pw-ico-hide { display: block; }
/* Edge ajoute son propre œil dans les champs password : un seul suffit. */
.pw-field input::-ms-reveal,
.pw-field input::-ms-clear { display: none; }

/* === Confirmation de mot de passe non concordante — assets/js/password-match.js === */
/* Sélecteurs doublés avec :focus : sinon le style de focus du thème clair (même
   spécificité, défini plus haut) ne l'emporterait pas, mais on veut le rouge
   justement PENDANT la saisie. */
.field input.is-mismatch,
.field input.is-mismatch:focus,
body.theme-light .field input.is-mismatch,
body.theme-light .field input.is-mismatch:focus,
.t2-auth .field input.is-mismatch,
.t2-auth .field input.is-mismatch:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18), 0 0 12px rgba(220, 38, 38, .35);
    outline: 0;
}
.pw-match-msg { margin: 6px 0 0; font-size: 12.5px; color: #b42318; }
.pw-match-msg[hidden] { display: none; }