/* ============================================================
   PARCOURS D'AUTHENTIFICATION — SDIS 66 / mySIS
   Partagé par /connexion/ et /reinitialiser-mot-de-passe/

   Mobile first : une seule colonne tenant dans un écran,
   puis split-screen plein écran à partir de 1000px.
   ============================================================ */

.sdis66-auth {
    --brand: #AB0209;
    --brand-dark: #8B0007;
    --ink: #18181b;
    --ink-soft: #52525b;
    --ink-mute: #8e8e97;
    --line: #e7e7ea;
    --surface: #ffffff;
    --radius: 12px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface);
    box-sizing: border-box;
}

.sdis66-auth *,
.sdis66-auth *::before,
.sdis66-auth *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   Panneau visuel
   ------------------------------------------------------------ */
.sdis66-auth__visual {
    position: relative;
    flex: 0 0 auto;
    height: clamp(200px, 32vh, 300px);
    padding-top: var(--safe-top);
    overflow: hidden;
    background: var(--brand-dark);
    isolation: isolate;
}

.sdis66-auth__photo,
.sdis66-auth__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.sdis66-auth__photo {
    object-fit: cover;
    object-position: center 35%;
}

.sdis66-auth__fallback {
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .18) 0%, transparent 55%),
        radial-gradient(circle at 82% 78%, rgba(255, 255, 255, .10) 0%, transparent 50%),
        linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}

/* Voile dégradé : garde la photo lisible sans la noyer de rouge */
.sdis66-auth__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(26, 4, 6, .30) 0%,
        rgba(26, 4, 6, .22) 35%,
        rgba(105, 2, 7, .80) 100%
    );
}

.sdis66-auth__brand {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 0 22px 22px;
    color: #fff;
    text-align: center;
    pointer-events: none;
}

.sdis66-auth__logo {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.sdis66-auth__logo svg {
    width: 100%;
    height: 100%;
}

.sdis66-auth__title {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.sdis66-auth__tagline {
    margin: 5px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

/* En mobile le bandeau est court : le crédit passe en haut à droite
   pour ne pas venir buter contre le bloc identité, centré en bas. */
.sdis66-auth__credit {
    position: absolute;
    top: calc(var(--safe-top) + 10px);
    right: 12px;
    z-index: 3;
    max-width: 45%;
    margin: 0;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    text-align: right;
    color: rgba(255, 255, 255, .72);
    text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------
   Panneau formulaire
   ------------------------------------------------------------ */
.sdis66-auth__panel {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 20px calc(32px + var(--safe-bottom));
    background: var(--surface);

    /* Variables lues par les feuilles inline du plugin mysis66-security */
    --mysis-bg: transparent;
    --mysis-b: var(--line);
    --mysis-field-bg: #ffffff;
    --mysis-text: var(--ink-mute);
    --mysis-primary: var(--brand);
}

.sdis66-auth__box {
    width: 100%;
    max-width: 380px;
    animation: sdis66FadeUp .45s ease-out both;
}

@keyframes sdis66FadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Chapeau propre au gabarit (masqué en mobile : le visuel porte déjà le message) */
.sdis66-auth__intro {
    display: none;
    margin-bottom: 26px;
}

.sdis66-auth__intro h2 {
    margin: 0;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ink);
}

.sdis66-auth__intro p {
    margin: 7px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-mute);
}

/* ------------------------------------------------------------
   Habillage des formulaires du plugin
   ([mysis_login] et [mysis_reset_password])
   ------------------------------------------------------------ */
.sdis66-auth__box .mysis66-login,
.sdis66-auth__box .mysis66-reset-page {
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

/* Les titres du shortcode de réinitialisation portent des styles en ligne */
.sdis66-auth__box .mysis66-reset-page h2 {
    margin: 0 0 8px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em;
    color: var(--ink) !important;
}

.sdis66-auth__box .mysis66-reset-page > div > p {
    margin: 0 0 24px !important;
    font-size: 15px !important;
    line-height: 1.5;
    color: var(--ink-mute) !important;
}

.sdis66-auth__box .mysis66-reset-page > div > p strong {
    color: var(--ink-soft);
    font-weight: 600;
}

/* Boutons fournisseurs (Google / Microsoft / Apple) */
.sdis66-auth__box .mysis66-oauth {
    margin-bottom: 0;
}

.sdis66-auth__box .mysis66-btn-oauth {
    gap: 10px;
    min-height: 48px;
    margin-bottom: 8px;
    padding: 12px 16px;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    background: var(--surface) !important;
    box-shadow: none;
    color: var(--ink) !important;
    font-size: 15px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}

.sdis66-auth__box .mysis66-btn-oauth:hover {
    border-color: #d4d4d8 !important;
    background: #fafafa !important;
    box-shadow: none;
}

.sdis66-auth__box .mysis66-btn-oauth.apple,
.sdis66-auth__box .mysis66-btn-oauth.apple:hover {
    border-color: #000 !important;
    background: #000 !important;
    color: #fff !important;
}

/* Clé d'accès : action secondaire, volontairement plus discrète */
.sdis66-auth__box .mysis66-passkey-wrap {
    margin-bottom: 0;
}

.sdis66-auth__box .mysis66-btn-passkey {
    margin-bottom: 0;
    border-color: transparent !important;
    background: #f4f4f5 !important;
    color: var(--ink-soft) !important;
    font-weight: 500;
}

.sdis66-auth__box .mysis66-btn-passkey:hover {
    border-color: transparent !important;
    background: #ececee !important;
}

.sdis66-auth__box .mysis66-btn-passkey svg {
    stroke: currentColor;
}

.sdis66-auth__box .mysis66-passkey-hint {
    margin: 7px 0 0;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink-mute);
}

/* Séparateur « ou » */
.sdis66-auth__box .mysis66-sep {
    margin: 22px 0;
}

.sdis66-auth__box .mysis66-sep:before {
    background: var(--line);
}

.sdis66-auth__box .mysis66-sep span {
    padding: 0 12px;
    background: var(--surface);
    color: var(--ink-mute);
    font-size: 13px;
    text-transform: lowercase;
}

/* Champs */
.sdis66-auth__box .mysis66-field {
    margin-bottom: 14px;
}

.sdis66-auth__box .mysis66-field label {
    margin-bottom: 7px;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
}

.sdis66-auth__box .row {
    margin-bottom: 7px;
    align-items: center;
}

.sdis66-auth__box .row label {
    margin-bottom: 0;
}

.sdis66-auth__box .mysis66-login input,
.sdis66-auth__box .mysis66-reset-page input {
    min-height: 48px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-size: 16px; /* ≥16px : évite le zoom automatique iOS */
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sdis66-auth__box .mysis66-login input:focus,
.sdis66-auth__box .mysis66-reset-page input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(171, 2, 9, .12);
}

.sdis66-auth__box .mysis66-login input::placeholder,
.sdis66-auth__box .mysis66-reset-page input::placeholder {
    color: #b4b4bb;
    opacity: 1;
}

/* Œil afficher/masquer */
.sdis66-auth__box .passwrap input {
    padding-right: 48px;
}

.sdis66-auth__box .passwrap .eye {
    right: 6px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-mute);
    transition: background-color .15s ease, color .15s ease;
}

.sdis66-auth__box .passwrap .eye:hover {
    background: #f4f4f5;
    color: var(--ink-soft);
}

.sdis66-auth__box .passwrap .eye .material-icons {
    font-size: 20px;
    line-height: 1;
}

/* La police « Material Icons » ne se charge pas sur le front : le libellé
   « visibility » s'affichait en toutes lettres dans les champs mot de passe.
   On dessine l'œil en SVG, l'état étant lu sur le type de l'input — les
   scripts du plugin ne sont pas modifiés. */
@supports selector(:has(*)) {
    .sdis66-auth__box .passwrap .eye .material-icons {
        display: none;
    }

    .sdis66-auth__box .passwrap .eye::after {
        content: "";
        width: 20px;
        height: 20px;
        background-color: currentColor;
        -webkit-mask: var(--sdis66-eye) center / 20px 20px no-repeat;
        mask: var(--sdis66-eye) center / 20px 20px no-repeat;
    }

    .sdis66-auth__box .passwrap:has(input[type="password"]) .eye {
        --sdis66-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    }

    .sdis66-auth__box .passwrap:has(input[type="text"]) .eye {
        --sdis66-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
    }
}

/* Bouton principal */
.sdis66-auth__box .mysis66-btn {
    min-height: 50px;
    margin-top: 6px;
    padding: 14px 20px;
    border-radius: var(--radius);
    box-shadow: none;
    font-size: 16px;
    font-weight: 600;
    transition: background-color .15s ease, opacity .15s ease;
}

.sdis66-auth__box .mysis66-btn:hover {
    background: var(--brand-dark);
    box-shadow: none;
}

.sdis66-auth__box .mysis66-btn:disabled {
    opacity: .6;
    cursor: default;
}

.sdis66-auth__box .mysis66-btn-large {
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
}

.sdis66-auth__box .mysis66-btn.outline {
    border-width: 1px;
    background: var(--surface);
}

.sdis66-auth__box .mysis66-btn.outline:hover {
    background: rgba(171, 2, 9, .05);
}

/* Liens de bascule / retour */
.sdis66-auth__box .switch {
    margin-top: 20px;
    color: var(--ink-mute);
    font-size: 14px;
    font-weight: 400;
}

.sdis66-auth__box .switch .link,
.sdis66-auth__box .row .link {
    color: var(--brand);
    font-weight: 600;
}

.sdis66-auth__box .row .link {
    font-size: 13px;
}

.sdis66-auth__box .switch a#mysis66-go-register::before {
    content: "Pas encore dans la boucle ? ";
    margin-right: 3px;
    color: var(--ink-mute);
    font-weight: 400;
}

/* Encart « Êtes-vous un agent du SDIS 66 ? » */
.sdis66-auth__box .mysis66-check-sdis {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fafafa;
}

.sdis66-auth__box .mysis66-check-sdis .ask {
    margin-bottom: 12px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

/* Messages d'état */
.sdis66-auth__box .mysis66-msg {
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.sdis66-auth__box .mysis66-resend {
    margin-top: 14px;
    font-size: 14px;
}

/* ------------------------------------------------------------
   Confirmation « lien envoyé » (mot de passe oublié)
   Injectée par auth.js à la place du formulaire.
   ------------------------------------------------------------ */
.sdis66-auth__sent {
    animation: sdis66FadeUp .4s ease-out both;
}

.sdis66-auth__sent-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 16px;
    background: rgba(171, 2, 9, .08);
    color: var(--brand);
}

.sdis66-auth__sent-icon svg {
    width: 26px;
    height: 26px;
}

.sdis66-auth__sent h2 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ink);
}

.sdis66-auth__sent p {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-mute);
}

.sdis66-auth__sent p strong {
    color: var(--ink-soft);
    font-weight: 600;
}

.sdis66-auth__sent-note {
    margin-top: 18px !important;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 13px !important;
}

.sdis66-auth__sent-note a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

/* ------------------------------------------------------------
   Écran de confirmation plein écran (connexion / mot de passe changé)
   ------------------------------------------------------------ */
.sdis66-success {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #fff;
    text-align: center;
    font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.sdis66-success.is-on {
    display: flex;
}

/* Voile de marque qui se déploie en cercle depuis le centre */
.sdis66-success__veil {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 50% 42%, #B8030B 0%, #8B0007 55%, #6A0005 100%);
    clip-path: circle(0% at 50% 50%);
    animation: sdis66Reveal .55s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes sdis66Reveal {
    to { clip-path: circle(140% at 50% 50%); }
}

.sdis66-success__stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
}

/* Ondes qui s'échappent du médaillon */
.sdis66-success__ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    opacity: 0;
    animation: sdis66Ripple 1.6s cubic-bezier(.2, .6, .3, 1) .45s infinite;
}

.sdis66-success__ring--late {
    animation-delay: 1.05s;
}

@keyframes sdis66Ripple {
    0%   { transform: scale(.72); opacity: .7; }
    70%  { opacity: 0; }
    100% { transform: scale(1.85); opacity: 0; }
}

/* Médaillon blanc */
.sdis66-success__badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #fff;
    color: #AB0209;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
    transform: scale(.3);
    opacity: 0;
    animation: sdis66Pop .5s cubic-bezier(.2, 1.35, .4, 1) .22s forwards;
}

.sdis66-success__badge svg {
    width: 46px;
    height: 46px;
}

@keyframes sdis66Pop {
    from { transform: scale(.3); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

/* Le trait de la coche se dessine */
.sdis66-success__check {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: sdis66Draw .42s cubic-bezier(.65, 0, .35, 1) .5s forwards;
}

@keyframes sdis66Draw {
    to { stroke-dashoffset: 0; }
}

.sdis66-success__title,
.sdis66-success__sub {
    position: relative;
    z-index: 1;
    margin: 0;
    opacity: 0;
    animation: sdis66RiseIn .5s cubic-bezier(.2, .8, .3, 1) forwards;
}

.sdis66-success__title {
    margin-top: 26px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.01em;
    animation-delay: .62s;
}

.sdis66-success__sub {
    margin-top: 7px;
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    animation-delay: .74s;
}

@keyframes sdis66RiseIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   ≥ 1000px : split-screen plein écran
   ------------------------------------------------------------ */
@media (min-width: 1000px) {
    .sdis66-auth {
        flex-direction: row;
    }

    .sdis66-auth__visual {
        flex: 1 1 50%;
        height: auto;
        padding-top: 0;
    }

    .sdis66-auth__brand {
        padding: 0 56px 52px;
        text-align: left;
    }

    .sdis66-auth__logo {
        width: 64px;
        height: 64px;
        margin: 0 0 20px;
        border-radius: 16px;
    }

    .sdis66-auth__title {
        max-width: 14ch;
        font-size: clamp(34px, 2.9vw, 44px);
    }

    .sdis66-auth__tagline {
        margin-top: 10px;
        font-size: 17px;
    }

    .sdis66-auth__credit {
        top: auto;
        right: 20px;
        bottom: 16px;
        max-width: 40%;
        font-size: 11px;
    }

    .sdis66-auth__panel {
        flex: 1 1 50%;
        align-items: center;
        padding: 48px 40px;
        overflow-y: auto;
    }

    .sdis66-auth__intro {
        display: block;
    }

    .sdis66-auth__box .mysis66-reset-page h2 {
        font-size: 27px !important;
    }

    .sdis66-success__title {
        font-size: 26px;
    }
}

/* ------------------------------------------------------------
   Confort de lecture / accessibilité
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .sdis66-auth *,
    .sdis66-auth *::before,
    .sdis66-auth *::after,
    .sdis66-success * {
        animation: none !important;
        transition: none !important;
    }

    /* Sans animation, l'écran de confirmation s'affiche d'emblée à l'état final */
    .sdis66-success__veil  { clip-path: none; }
    .sdis66-success__badge { transform: none; opacity: 1; }
    .sdis66-success__check { stroke-dashoffset: 0; }
    .sdis66-success__ring  { display: none; }
    .sdis66-success__title,
    .sdis66-success__sub   { opacity: 1; }
}

/* Écrans courts en paysage : on rend la hauteur au formulaire */
@media (max-width: 999px) and (max-height: 520px) {
    .sdis66-auth__visual {
        height: 150px;
    }

    .sdis66-auth__logo {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;
    }

    .sdis66-auth__title {
        font-size: 21px;
    }
}

/* ------------------------------------------------------------
   Neutralisation des résidus WordPress sur ces gabarits
   ------------------------------------------------------------ */
body.sdis66-auth-page .site-main,
body.sdis66-auth-page .site-content,
body.sdis66-auth-page #page,
body.sdis66-auth-page .entry-content,
body.sdis66-auth-page article {
    margin: 0;
    padding: 0;
    background: transparent;
}

body.sdis66-auth-page .entry-header,
body.sdis66-auth-page .entry-footer,
body.sdis66-auth-page .site-header,
body.sdis66-auth-page .site-footer,
body.sdis66-auth-page .post-navigation,
body.sdis66-auth-page .comments-area {
    display: none;
}

body.sdis66-auth-page .site-content > .entry-content > *:not(.sdis66-auth):not(.sdis66-success),
.sdis66-auth ~ .wp-block-group,
.sdis66-auth ~ .elementor {
    display: none;
}