/* ══════════════════════════════════════════════════════════════
   PUNCH — Page Accès formulaires (mot de passe)
   Layout 2 colonnes, brutaliste, sans animation de fond.
   Spécificité préfixée par body.page-template-page-acces pour
   vaincre les overrides du thème parent revalice.
   ══════════════════════════════════════════════════════════════ */

body.page-template-page-acces .punch-page-acces {
    background: var(--punch-blanc) !important;
}

/* ── Conteneur 2 colonnes ───────────────────────────────── */
body.page-template-page-acces .pwd-page {
    display              : grid !important;
    grid-template-columns: 1fr 1fr !important;
    min-height           : calc(100vh - 120px);
    margin               : 0 !important;
    padding              : 0 !important;
    max-width            : none !important;
}

@media (max-width: 991.98px) {
    body.page-template-page-acces .pwd-page {
        grid-template-columns: 1fr !important;
    }
}

/* ── Colonne gauche : intro + formulaire ─────────────────── */
body.page-template-page-acces .pwd-left {
    padding       : clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px) !important;
    background    : var(--punch-blanc) !important;
    color         : var(--punch-noir);
    display       : flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body.page-template-page-acces .pwd__eyebrow {
    font-family    : var(--punch-font-base);
    font-size      : 12px !important;
    font-weight    : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : var(--punch-rouge) !important;
    margin-bottom  : 16px;
}

body.page-template-page-acces .pwd__title {
    font-family   : var(--punch-font-display) !important;
    font-size     : clamp(2.4rem, 4.5vw + 1rem, 5rem) !important;
    line-height   : 0.95 !important;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color         : var(--punch-noir) !important;
    margin        : 0 0 24px !important;
}

body.page-template-page-acces .pwd__title .accent {
    color: var(--punch-rouge) !important;
}

body.page-template-page-acces .pwd__lead {
    font-family : var(--punch-font-base);
    font-size   : 1rem;
    line-height : 1.6;
    color       : var(--punch-noir) !important;
    max-width   : 480px;
    margin      : 0 0 32px;
}

/* ── Formulaire mdp ─────────────────────────────────────── */
body.page-template-page-acces .pwd__form {
    max-width: 480px;
    width    : 100%;
}

body.page-template-page-acces .fld {
    display       : flex !important;
    flex-direction: column !important;
    margin-bottom : 16px !important;
}

body.page-template-page-acces .fld__label {
    font-family    : var(--punch-font-base);
    font-size      : 13px;
    font-weight    : 700;
    letter-spacing : 0.08em;
    text-transform : uppercase;
    color          : var(--punch-noir) !important;
    margin-bottom  : 8px;
}

body.page-template-page-acces .fld__label .req {
    color: var(--punch-rouge) !important;
}

body.page-template-page-acces .fld input[type="password"],
body.page-template-page-acces .fld input[type="text"] {
    width        : 100% !important;
    padding      : 14px 16px !important;
    border       : 2px solid var(--punch-noir) !important;
    border-radius: 0 !important;
    background   : var(--punch-blanc) !important;
    font-family  : var(--punch-font-base) !important;
    font-size    : 16px !important;
    color        : var(--punch-noir) !important;
    box-shadow   : none;
    transition   : box-shadow 0.15s ease, transform 0.15s ease;
}

body.page-template-page-acces .fld input[type="password"]:focus,
body.page-template-page-acces .fld input[type="text"]:focus {
    outline   : none !important;
    box-shadow: 4px 4px 0 0 var(--punch-rouge) !important;
    transform : translate(-2px, -2px);
    border-color: var(--punch-noir) !important;
}

body.page-template-page-acces .fld__hint {
    font-size  : 13px;
    line-height: 1.5;
    color      : #555;
    margin-top : 8px;
}

body.page-template-page-acces .fld__hint a {
    color          : var(--punch-rouge) !important;
    text-decoration: underline;
}

/* ── Actions ────────────────────────────────────────────── */
body.page-template-page-acces .pwd__actions {
    display  : flex !important;
    gap      : 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

body.page-template-page-acces .pwd__actions .punch-btn {
    display       : inline-block !important;
    padding       : 14px 28px !important;
    background    : var(--punch-rouge) !important;
    color         : var(--punch-blanc) !important;
    border        : 2px solid var(--punch-noir) !important;
    border-radius : 0 !important;
    font-family   : var(--punch-font-base) !important;
    font-size     : 14px !important;
    font-weight   : 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor        : pointer;
    text-decoration: none !important;
    box-shadow    : 4px 4px 0 0 var(--punch-noir) !important;
    transition    : transform 0.15s ease, box-shadow 0.15s ease;
}

body.page-template-page-acces .pwd__actions .punch-btn:hover {
    transform : translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--punch-noir) !important;
}

body.page-template-page-acces .pwd__actions .punch-btn--ghost {
    background: transparent !important;
    color     : var(--punch-noir) !important;
}

/* ── Erreur mdp ─────────────────────────────────────────── */
body.page-template-page-acces .punch-form-error {
    padding      : 12px 16px !important;
    background   : var(--punch-rouge) !important;
    color        : var(--punch-blanc) !important;
    border       : 2px solid var(--punch-noir) !important;
    margin       : 0 0 16px !important;
    font-weight  : 700;
    font-size    : 14px;
}

/* ── Colonne droite : aside rouge + watermark + 4 étapes ── */
body.page-template-page-acces .pwd-right {
    position    : relative !important;
    overflow    : hidden !important;
    background  : var(--punch-rouge) !important;
    color       : var(--punch-blanc) !important;
    padding     : clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px) !important;
    display     : flex !important;
    align-items : center !important;
    border-left : 2px solid var(--punch-noir) !important;
}

@media (max-width: 991.98px) {
    body.page-template-page-acces .pwd-right {
        border-left: 0 !important;
        border-top : 2px solid var(--punch-noir) !important;
    }
}

/* Grand "P" Aldo en watermark statique */
body.page-template-page-acces .pwd-right__watermark {
    position      : absolute !important;
    top           : -8% !important;
    right         : -4% !important;
    font-family   : var(--punch-font-display) !important;
    font-size     : clamp(20rem, 35vw, 36rem) !important;
    line-height   : 0.85 !important;
    color         : rgba(255, 255, 255, 0.10) !important;
    user-select   : none;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    margin        : 0 !important;
}

/* ── 4 étapes ───────────────────────────────────────────── */
body.page-template-page-acces .pwd__info {
    position  : relative !important;
    z-index   : 1;
    max-width : 460px;
}

body.page-template-page-acces .pwd__info-title {
    font-family   : var(--punch-font-display) !important;
    font-size     : clamp(2rem, 3.2vw + 1rem, 3.6rem) !important;
    line-height   : 0.95 !important;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color         : var(--punch-blanc) !important;
    margin        : 0 0 32px !important;
}

body.page-template-page-acces .pwd__steps {
    list-style   : none !important;
    margin       : 0 !important;
    padding      : 0 !important;
    display      : flex !important;
    flex-direction: column !important;
    gap          : 20px;
}

body.page-template-page-acces .pwd__steps li {
    display      : flex !important;
    gap          : 16px;
    align-items  : flex-start;
    padding-bottom: 20px !important;
    padding-left  : 0 !important;
    border-bottom : 1px solid rgba(255, 255, 255, 0.25) !important;
    margin       : 0 !important;
    list-style   : none !important;
}

body.page-template-page-acces .pwd__steps li::before {
    content: none !important;
}

body.page-template-page-acces .pwd__steps li:last-child {
    border-bottom : 0 !important;
    padding-bottom: 0 !important;
}

body.page-template-page-acces .pwd__step-num {
    flex-shrink   : 0;
    font-family   : var(--punch-font-display) !important;
    font-size     : 1.5rem !important;
    line-height   : 1 !important;
    color         : var(--punch-blanc) !important;
    background    : transparent !important;
    border        : 2px solid var(--punch-blanc) !important;
    border-radius : 0 !important;
    width         : 44px !important;
    height        : 44px !important;
    display       : inline-flex !important;
    align-items   : center !important;
    justify-content: center !important;
}

body.page-template-page-acces .pwd__step-body {
    flex : 1;
    color: var(--punch-blanc) !important;
}

body.page-template-page-acces .pwd__step-body strong {
    display      : block;
    font-family  : var(--punch-font-base) !important;
    font-size    : 1rem !important;
    font-weight  : 700 !important;
    line-height  : 1.3;
    margin-bottom: 4px;
    color        : var(--punch-blanc) !important;
}

body.page-template-page-acces .pwd__step-body small {
    display    : block;
    font-family: var(--punch-font-base) !important;
    font-size  : 13px !important;
    line-height: 1.5;
    color      : rgba(255, 255, 255, 0.85) !important;
}