/* Candidature OP — interface premium (Attrition) */

@import 'tokens-campaign.css';

/* ─── Hero compact ─── */
.candidature-hero {
    position: relative;
    padding: calc(var(--space-16) + 80px) 0 var(--space-10);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--hud-cyan-rgb), 0.14), transparent 55%),
        linear-gradient(180deg, var(--color-anthracite-900) 0%, var(--color-black) 100%);
}

.candidature-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.candidature-hero .container {
    position: relative;
    z-index: 1;
    max-width: 48rem;
}

.candidature-hero-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-black);
    background: var(--campaign-gold);
    border-radius: var(--radius-sm);
}

.candidature-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--space-4);
    text-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
}

.candidature-hero-lead {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: 1.6;
    max-width: 38rem;
    margin: 0 auto;
}

/* Thème faction — EU cyan / US rouge (hero + formulaire) */
body[data-candidature-faction="us"] .candidature-hero,
body[data-candidature-faction="us"] .candidature-page {
    --campaign-gold: var(--campaign-us);
    --campaign-gold-light: var(--campaign-us-light);
    --campaign-gold-dark: var(--campaign-us-dark);
    --campaign-glow: var(--campaign-us-glow);
    --campaign-gold-soft: var(--campaign-us-soft);
    --campaign-glass-border: var(--campaign-us-border);
    --hud-cyan: var(--campaign-us);
    --hud-cyan-light: var(--campaign-us-light);
    --hud-cyan-dark: var(--campaign-us-dark);
    --hud-cyan-rgb: var(--campaign-us-rgb);
    --hud-glow: var(--campaign-us-glow);
    --hud-line: var(--campaign-us-border);
    --hud-soft: var(--campaign-us-soft);
    --hud-medium: rgba(var(--campaign-us-rgb), 0.22);
    --hud-strong: rgba(var(--campaign-us-rgb), 0.45);
}

body[data-candidature-faction="us"] .candidature-hero {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--campaign-us-rgb), 0.16), transparent 55%),
        linear-gradient(180deg, var(--color-anthracite-900) 0%, var(--color-black) 100%);
}

body[data-candidature-faction="eu"] .candidature-hero,
body[data-candidature-faction="neutral"] .candidature-hero {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--hud-cyan-rgb), 0.14), transparent 55%),
        linear-gradient(180deg, var(--color-anthracite-900) 0%, var(--color-black) 100%);
}

/* ─── Layout ─── */
.candidature-page {
    padding: var(--space-8) 0 var(--space-16);
}

.candidature-form {
    max-width: 760px;
    margin: 0 auto;
}

/* ─── Stepper ─── */
.candidature-steps {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    padding: var(--space-4);
    background: var(--campaign-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--campaign-glass-border);
    border-radius: var(--radius-md);
}

.candidature-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    text-align: center;
    position: relative;
    opacity: 0.45;
    transition: opacity 0.3s var(--campaign-ease-out);
}

.candidature-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1.35rem;
    right: calc(-1 * var(--space-2));
    width: var(--space-2);
    height: 1px;
    background: var(--color-border);
}

.candidature-step.is-active,
.candidature-step.is-complete {
    opacity: 1;
}

.candidature-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-secondary);
    background: var(--color-anthracite-900);
    transition: border-color 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;
}

.candidature-step.is-active .candidature-step-num {
    border-color: var(--campaign-gold);
    background: rgba(var(--hud-cyan-rgb), 0.15);
    color: var(--campaign-gold-light);
    box-shadow: 0 0 16px var(--campaign-glow);
}

.candidature-step.is-complete .candidature-step-num {
    border-color: var(--campaign-gold-dark);
    background: var(--campaign-gold);
    color: var(--color-black);
}

.candidature-step-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

.candidature-step.is-active .candidature-step-label {
    color: var(--campaign-gold-light);
}

@media (max-width: 520px) {
    .candidature-steps {
        flex-direction: column;
        gap: var(--space-3);
    }

    .candidature-step:not(:last-child)::after {
        display: none;
    }

    .candidature-step {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: var(--space-2) var(--space-3);
    }
}

/* ─── Faction step ─── */
.candidature-faction-step {
    margin-bottom: var(--space-8);
}

.faction-picker-theater {
    position: relative;
    padding: var(--space-6);
    border: 1px solid var(--campaign-glass-border);
    border-radius: var(--radius-lg);
    background: var(--campaign-glass);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: border-color 0.4s var(--campaign-ease-out);
}

.faction-picker-theater::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s var(--campaign-ease-out);
    z-index: 0;
}

#factionStep[data-faction-theme="neutral"]::before {
    opacity: 1;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--hud-cyan-rgb), 0.08), transparent 70%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(var(--hud-cyan-rgb), 0.04), transparent 60%);
}

#factionStep[data-faction-theme="eu"]::before {
    opacity: 1;
    background:
        radial-gradient(ellipse 85% 65% at 20% 0%, rgba(var(--hud-cyan-rgb), 0.18), transparent 70%),
        radial-gradient(ellipse 55% 45% at 90% 100%, rgba(var(--hud-cyan-rgb), 0.08), transparent 60%);
}

#factionStep[data-faction-theme="eu"] {
    border-color: rgba(var(--hud-cyan-rgb), 0.35);
}

#factionStep[data-faction-theme="us"]::before {
    opacity: 1;
    background:
        radial-gradient(ellipse 85% 65% at 80% 0%, rgba(var(--campaign-us-rgb), 0.2), transparent 70%),
        radial-gradient(ellipse 55% 45% at 10% 100%, rgba(var(--campaign-us-rgb), 0.08), transparent 60%);
}

#factionStep[data-faction-theme="us"] {
    border-color: var(--campaign-us-border);
}

.faction-step-header,
.faction-cards,
.dress-code-recap-wrap,
.faction-error {
    position: relative;
    z-index: 1;
}

.faction-step-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.faction-step-heading {
    flex: 1;
    min-width: 0;
}

.faction-step-heading .candidature-hint {
    margin-bottom: 0;
}

.faction-step-flags {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}

.faction-step-flag-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.35);
    opacity: 0.55;
    transition:
        opacity 0.3s var(--campaign-ease-out),
        border-color 0.3s var(--campaign-ease-out),
        box-shadow 0.3s var(--campaign-ease-out);
}

.faction-step-flag-badge.is-selected {
    opacity: 1;
    border-color: var(--campaign-gold);
    box-shadow: 0 0 0 1px rgba(var(--hud-cyan-rgb), 0.35);
}

.faction-step-flag-badge--eu.is-selected {
    border-color: rgba(var(--hud-cyan-rgb), 0.65);
    box-shadow: 0 0 0 1px rgba(var(--hud-cyan-rgb), 0.35);
}

.faction-step-flag-badge--us.is-selected {
    border-color: rgba(var(--campaign-us-rgb), 0.75);
    box-shadow: 0 0 0 1px rgba(var(--campaign-us-rgb), 0.35);
}

.faction-step-flag-img {
    width: 2.5rem;
    height: 1.65rem;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

.faction-step-flag-initials {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.faction-step-flag-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .faction-step-header {
        flex-direction: column;
    }

    .faction-step-flags {
        align-self: flex-start;
    }

    .faction-picker-theater {
        padding: var(--space-4);
    }
}

.candidature-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--space-2);
}

.candidature-hint {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
    line-height: 1.5;
}

.faction-cards {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
    .faction-cards {
        grid-template-columns: 1fr;
    }
}

.faction-cards--needs-selection {
    outline: 2px solid rgba(248, 113, 113, 0.55);
    outline-offset: 6px;
    border-radius: var(--radius-sm);
}

.faction-error {
    margin-top: var(--space-3);
    margin-bottom: 0;
}

.faction-card {
    cursor: pointer;
    display: block;
    position: relative;
    transition: opacity 0.35s var(--campaign-ease-out);
}

.faction-card.is-dimmed {
    opacity: 0.82;
}

.faction-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.faction-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-4);
    border: 1px solid var(--campaign-glass-border);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    transition:
        border-color 0.3s var(--campaign-ease-out),
        box-shadow 0.3s var(--campaign-ease-out),
        transform 0.3s var(--campaign-ease-out);
    overflow: hidden;
}

.faction-card:hover .faction-card-inner {
    transform: translateY(-3px);
}

.faction-card--eu:hover .faction-card-inner,
.faction-card--eu.is-selected .faction-card-inner,
.faction-card--eu input:checked + .faction-card-inner {
    border-color: rgba(var(--hud-cyan-rgb), 0.55);
    box-shadow: 0 8px 32px rgba(var(--hud-cyan-rgb), 0.12), 0 0 0 1px rgba(var(--hud-cyan-rgb), 0.25);
}

.faction-card--us:hover .faction-card-inner,
.faction-card--us.is-selected .faction-card-inner,
.faction-card--us input:checked + .faction-card-inner {
    border-color: rgba(var(--campaign-us-rgb), 0.65);
    box-shadow: 0 8px 32px rgba(var(--campaign-us-rgb), 0.16), 0 0 0 1px rgba(var(--campaign-us-rgb), 0.35);
}

.faction-card--eu.is-selected .faction-card-inner,
.faction-card--eu input:checked + .faction-card-inner {
    border-color: var(--campaign-eu);
    box-shadow: 0 8px 36px rgba(var(--hud-cyan-rgb), 0.18), 0 0 0 1px rgba(var(--hud-cyan-rgb), 0.4);
}

.faction-card--us.is-selected .faction-card-inner,
.faction-card--us input:checked + .faction-card-inner {
    border-color: var(--campaign-us);
    box-shadow: 0 8px 36px rgba(var(--campaign-us-rgb), 0.2), 0 0 0 1px rgba(var(--campaign-us-rgb), 0.45);
}

/* Encadré trailer faction */
.faction-trailer-frame {
    position: relative;
    margin-bottom: var(--space-4);
    padding: 3px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.faction-trailer-frame::before,
.faction-trailer-frame::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: var(--campaign-gold);
    border-style: solid;
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
}

.faction-trailer-frame::before {
    top: 6px;
    left: 6px;
    border-width: 2px 0 0 2px;
}

.faction-trailer-frame::after {
    bottom: 6px;
    right: 6px;
    border-width: 0 2px 2px 0;
}

.faction-trailer-frame--eu {
    box-shadow:
        inset 0 0 0 1px rgba(var(--hud-cyan-rgb), 0.2),
        0 4px 24px rgba(var(--hud-cyan-rgb), 0.1);
}

.faction-trailer-frame--eu::before,
.faction-trailer-frame--eu::after {
    border-color: rgba(var(--hud-cyan-rgb), 0.75);
}

.faction-trailer-frame--us {
    box-shadow:
        inset 0 0 0 1px rgba(var(--campaign-us-rgb), 0.22),
        0 4px 24px rgba(var(--campaign-us-rgb), 0.12);
}

.faction-trailer-frame--us::before,
.faction-trailer-frame--us::after {
    border-color: rgba(var(--campaign-us-rgb), 0.75);
}

.faction-trailer-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: var(--color-anthracite-900);
    border-radius: calc(var(--radius-sm) - 2px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.faction-trailer-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.faction-trailer-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-anthracite-900), var(--color-black));
    background-size: cover;
    background-position: center;
}

.faction-trailer-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    padding: var(--space-3);
}

.faction-trailer-embed .video-lazy-trigger {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-3);
    cursor: pointer;
    border: none;
    width: 100%;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: opacity 0.3s;
}

.faction-trailer-embed .video-lazy-trigger:hover .play-icon {
    transform: scale(1.08);
    background: var(--campaign-gold);
    color: var(--color-black);
}

.faction-trailer-embed .video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.play-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    font-size: 1.25rem;
    transition: transform 0.25s, background 0.25s;
}

.play-icon--muted {
    opacity: 0.45;
    border-color: rgba(255, 255, 255, 0.2);
}

.faction-flag-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-display);
    font-size: 2.5rem;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    background: linear-gradient(135deg, var(--color-anthracite-900), var(--color-black));
}

.faction-card-title {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

.faction-card-desc {
    display: block;
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-bottom: var(--space-4);
}

.faction-card-cta {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--campaign-gold);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s, transform 0.25s;
}

.faction-card.is-selected .faction-card-cta,
.faction-card input:checked + .faction-card-inner .faction-card-cta,
.faction-card:hover .faction-card-cta {
    opacity: 1;
    transform: translateY(0);
}

.faction-error {
    margin-top: var(--space-3);
}

/* ─── Onglets premium ─── */
.candidature-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding: var(--space-2);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.candidature-tab-btn {
    flex: 1;
    min-width: 10rem;
    padding: var(--space-3) var(--space-5);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.candidature-tab-btn:hover:not(:disabled) {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.candidature-tab-btn.active {
    color: var(--campaign-gold-light);
    background: linear-gradient(135deg, rgba(var(--hud-cyan-rgb), 0.18), rgba(10, 10, 10, 0.6));
    border-color: var(--campaign-gold);
    box-shadow: 0 0 20px rgba(var(--hud-cyan-rgb), 0.12);
}

.candidature-tab-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.candidature-tab-panel[hidden] {
    display: none;
}

/* ─── Panels formulaire ─── */
.candidature-panel {
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    background: var(--campaign-glass);
    backdrop-filter: blur(8px);
    border: 1px solid var(--campaign-glass-border);
    border-radius: var(--radius-md);
}

.candidature-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.candidature-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--campaign-gold);
    background: rgba(var(--hud-cyan-rgb), 0.1);
    border: 1px solid rgba(var(--hud-cyan-rgb), 0.3);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.candidature-panel-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.candidature-panel-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0.15rem 0 0;
}

/* ─── Champs formulaire premium ─── */
.candidature-form .form-row {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
    .candidature-form .form-row {
        grid-template-columns: 1fr;
    }
}

.candidature-form .form-group label:not(.question-option) {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.candidature-form input[type="text"],
.candidature-form input[type="email"],
.candidature-form input[type="tel"],
.candidature-form input[type="date"],
.candidature-form input[type="number"],
.candidature-form input[type="file"],
.candidature-form select,
.candidature-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--text-base);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.candidature-form input:focus,
.candidature-form select:focus,
.candidature-form textarea:focus {
    outline: none;
    border-color: var(--campaign-gold);
    box-shadow: 0 0 0 3px rgba(var(--hud-cyan-rgb), 0.15);
}

/* Les <option> ignorent souvent la transparence et retombent sur le fond
   blanc système du navigateur : on force un fond opaque + texte clair pour
   que la liste déroulante reste lisible sur le thème sombre du site. */
.candidature-form select option {
    background-color: var(--color-surface-elevated);
    color: var(--color-text-primary);
}

.candidature-form input[readonly] {
    opacity: 0.7;
    cursor: default;
}

.question-block {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.question-block > label {
    display: block;
    margin-bottom: var(--space-3);
    font-weight: var(--font-medium);
    line-height: 1.5;
}

.question-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    cursor: pointer;
    line-height: 1.5;
}

/* Le texte (avec <strong> imbriqué) doit rester un seul bloc qui wrap
   normalement, pas être éclaté en plusieurs items flex côte à côte
   (même correctif que .team-opt-in span ci-dessous). */
.question-option > span {
    flex: 1 1 auto;
}

.candidature-optional {
    font-size: var(--text-sm);
    font-weight: normal;
    color: var(--color-text-secondary);
    font-family: var(--font-body, inherit);
    letter-spacing: normal;
    text-transform: none;
}

.team-hint {
    margin-bottom: var(--space-4);
}

.team-opt-in {
    padding: var(--space-3);
    background: rgba(var(--hud-cyan-rgb), 0.06);
    border: 1px solid rgba(var(--hud-cyan-rgb), 0.2);
    border-radius: var(--radius-sm);
}

/* Le texte (avec <strong>/<a> imbriqués) doit rester un seul bloc qui wrap
   normalement, pas être éclaté en plusieurs items flex côte à côte. */
.team-opt-in span {
    flex: 1 1 auto;
    min-width: 0;
}

/* ─── Callout FS ─── */
.sf-callout {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
    background: rgba(var(--hud-cyan-rgb), 0.08);
    border: 1px solid rgba(var(--hud-cyan-rgb), 0.35);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.sf-callout strong {
    color: var(--campaign-gold);
}

.sf-callout--highlight {
    border-color: var(--campaign-gold);
    background: rgba(var(--hud-cyan-rgb), 0.14);
    box-shadow: 0 0 0 1px rgba(var(--hud-cyan-rgb), 0.2);
}

.sf-callout__step-note {
    margin: 0 0 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.95rem;
}

.sf-callout__warning {
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid var(--campaign-slate, #94a3b8);
    background: var(--campaign-slate-soft, rgba(148, 163, 184, 0.1));
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.sf-callout__lead {
    margin: 0;
    line-height: 1.6;
}

.sf-callout__equipment {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid rgba(var(--hud-cyan-rgb), 0.55);
    background: rgba(var(--hud-cyan-rgb), 0.08);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.sf-callout__equipment strong {
    color: var(--hud-cyan-light);
}

/* ─── Encart tarif OP ─── */
.op-pricing-callout {
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: rgba(var(--hud-cyan-rgb), 0.08);
    border: 1px solid rgba(var(--hud-cyan-rgb), 0.4);
    border-radius: var(--radius-md);
}

.op-pricing-callout__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    color: var(--campaign-gold);
    text-transform: uppercase;
}

.op-pricing-callout__body {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.65;
}

.op-pricing-callout__promo {
    margin: 0 0 var(--space-3);
    color: var(--color-text-primary);
}

.op-pricing-callout__promo strong {
    color: var(--campaign-gold);
}

.op-pricing-callout__list {
    margin: 0;
    padding-left: 1.15rem;
}

.op-pricing-callout__list li {
    margin-bottom: 0.45rem;
}

.op-pricing-callout__list li:last-child {
    margin-bottom: 0;
}

.op-pricing-recap-note,
.op-pricing-success-note {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    background: rgba(var(--hud-cyan-rgb), 0.06);
    border-left: 3px solid rgba(var(--hud-cyan-rgb), 0.55);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.op-pricing-success-note {
    background: rgba(80, 140, 80, 0.08);
    border-left-color: rgba(120, 180, 120, 0.55);
}

.officer-callout {
    background: rgba(107, 155, 209, 0.08);
    border-color: var(--campaign-slate-border);
}

.officer-callout strong {
    color: var(--hud-cyan-light);
}

.officer-callout__disclaimer {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid rgba(107, 155, 209, 0.55);
    background: rgba(107, 155, 209, 0.1);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.officer-callout__disclaimer strong {
    color: var(--hud-cyan-light);
}

.sf-faction-label {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-weight: var(--font-medium);
}

/* ─── Dress code récap candidature ─── */
.dress-code-gallery {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.dress-code-gallery--eu .dress-code-gallery-item {
    border-color: rgba(var(--hud-cyan-rgb), 0.35);
}

.dress-code-gallery--us .dress-code-gallery-item {
    border-color: rgba(var(--campaign-us-rgb), 0.4);
}

.dress-code-gallery-item {
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
}

.dress-code-gallery-img,
.dress-code-gallery .dress-code-example-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
}

.dress-code-gallery-caption {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dress-code-example-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    background: var(--color-anthracite-900);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dress-code-recap-wrap {
    margin: var(--space-6) 0 var(--space-4);
}

.dress-code-recap {
    padding: var(--space-5);
    background: var(--campaign-glass);
    backdrop-filter: blur(8px);
    border: 1px solid var(--campaign-glass-border);
    border-radius: var(--radius-md);
}

.dress-code-recap--eu {
    border-color: rgba(var(--hud-cyan-rgb), 0.35);
}

.dress-code-recap--us {
    border-color: rgba(var(--campaign-us-rgb), 0.4);
}

.dress-code-recap-header {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(140px, 240px) 1fr;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dress-code-recap-visual {
    min-width: 0;
}

.dress-code-recap-visual .dress-code-gallery {
    margin-bottom: 0;
}

.dress-code-recap-visual .dress-code-gallery-img,
.dress-code-recap-visual .dress-code-example-img {
    aspect-ratio: 4 / 3;
}

.dress-code-recap-visual .dress-code-gallery-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.dress-code-recap-visual .dress-code-gallery-caption {
    font-size: 0.6rem;
    padding: var(--space-1) var(--space-2);
}

@media (max-width: 560px) {
    .dress-code-recap-header {
        grid-template-columns: 1fr;
    }
}

.dress-code-recap-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dress-code-recap-intro h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--space-2);
}

.dress-code-recap-id,
.dress-code-recap-multicam {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin: 0 0 var(--space-2);
}

.dress-code-recap-body {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.dress-code-pattern-list,
.dress-code-recap-patterns {
    margin: var(--space-2) 0 var(--space-4);
    padding-left: 1.2rem;
}

.dress-code-recap-group {
    margin: var(--space-3) 0 var(--space-2);
    color: var(--color-text-primary);
}

.dress-code-recap-more {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.dress-code-recap-more a,
.dress-code-recap-link a {
    color: var(--campaign-gold-light);
}

.dress-code-recap-civilian {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: rgba(var(--hud-cyan-rgb), 0.06);
    border: 1px solid rgba(var(--hud-cyan-rgb), 0.32);
    border-radius: var(--radius-sm);
}

.dress-code-recap-civilian-kicker {
    margin: 0 0 var(--space-1);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--hud-cyan-rgb));
    opacity: 0.9;
}

.dress-code-recap-civilian-title {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.dress-code-recap-civilian p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.dress-code-recap-forbidden {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: rgba(196, 163, 90, 0.07);
    border: 1px solid rgba(196, 163, 90, 0.32);
    border-radius: var(--radius-sm);
}

.dress-code-recap-forbidden-kicker {
    margin: 0 0 var(--space-1);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--campaign-gold-light);
    opacity: 0.9;
}

.dress-code-recap-forbidden-title {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.dress-code-recap-forbidden ul {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.dress-code-recap-forbidden-note {
    color: var(--color-text-secondary);
}

.dress-code-merc-note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--color-text-secondary);
    opacity: 0.85;
}

.dress-code-recap-sf {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dress-code-recap-link {
    margin: var(--space-4) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
}

/* ─── Panel PAK candidature ─── */
.pak-panel {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid rgba(var(--hud-cyan-rgb), 0.28);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.35);
}

.pak-panel-lead {
    margin-top: 0;
    margin-bottom: var(--space-4);
}

.pak-waiver-block .pak-decharge-open-btn {
    margin: var(--space-3) 0 var(--space-2);
    text-decoration: none;
}

.pak-waiver-text {
    margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-4);
    border: 1px solid rgba(var(--hud-cyan-rgb), 0.22);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.25);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.pak-waiver-text p {
    margin: 0 0 var(--space-3);
}

.pak-waiver-text p:last-child {
    margin-bottom: 0;
}

.pak-waiver-opt-in {
    margin-top: var(--space-3);
}

.gear-declaration-group .question-option {
    display: flex;
    margin-top: var(--space-3);
}

.gear-declaration-group .question-option + .question-option {
    margin-top: var(--space-2);
}

#decharge-form {
    scroll-margin-top: 6rem;
}

/* ─── Page décharge PAK ─── */
.pak-decharge-page {
    padding-bottom: var(--space-16);
}

.pak-decharge-container {
    max-width: 52rem;
}

.pak-decharge-card {
    margin-top: var(--space-8);
    padding: var(--space-6);
    border: 1px solid rgba(var(--hud-cyan-rgb), 0.28);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.35);
}

.pak-decharge-prose {
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--color-text-secondary);
}

.pak-decharge-prose p {
    margin: 0 0 var(--space-4);
}

.pak-decharge-prose p:last-child {
    margin-bottom: 0;
}

.pak-decharge-form {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pak-signature-wrap {
    border: 1px dashed rgba(var(--hud-cyan-rgb), 0.45);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
}

.pak-signature-canvas {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    cursor: crosshair;
}

.pak-signature-clear {
    margin-top: var(--space-3);
}

.pak-decharge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.pak-decharge-actions .btn-campaign--secondary {
    text-decoration: none;
}

@media (max-width: 640px) {
    .pak-decharge-card {
        padding: var(--space-4);
    }

    .pak-decharge-actions {
        flex-direction: column;
    }

    .pak-decharge-actions .btn-campaign,
    .pak-decharge-actions .btn-campaign--secondary {
        width: 100%;
        text-align: center;
    }
}

/* ─── Boutons & erreurs ─── */
.btn-campaign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-black);
    background: var(--campaign-gold);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-campaign:hover:not(:disabled) {
    background: var(--campaign-gold-light);
    box-shadow: 0 4px 20px var(--campaign-glow);
}

.btn-campaign:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-campaign--secondary {
    background: transparent;
    color: var(--campaign-gold);
    border: 1px solid rgba(var(--hud-cyan-rgb), 0.45);
}

.btn-campaign--secondary:hover:not(:disabled) {
    background: rgba(var(--hud-cyan-rgb), 0.1);
    box-shadow: none;
}

.qcm-status {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border-radius: 4px;
    font-size: 0.95rem;
}

.qcm-status--passed {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.qcm-locked-notice[hidden] {
    display: none !important;
}

.qcm-locked-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-left-width: 4px;
    border-radius: var(--radius-md, 6px);
    background: rgba(34, 197, 94, 0.08);
}

.qcm-locked-notice__text {
    margin: 0;
    flex: 1 1 220px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.qcm-locked-notice__unlock {
    flex-shrink: 0;
    font-size: 0.8rem;
    padding: 0.45rem 0.9rem;
}

.question-option input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.question-option:has(input:disabled) {
    cursor: not-allowed;
    color: var(--color-text-secondary);
}

#validateQcmBtn,
#validateSfQcmBtn,
#validateOfficerQcmBtn {
    margin-top: var(--space-4);
}

.form-error {
    color: #f87171;
    margin: 1rem 0;
    font-size: var(--text-sm);
}

.form-error__action-link {
    display: inline-block;
    margin-left: 0.35rem;
    color: var(--campaign-accent, #22d3ee);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-error__action-link:hover {
    color: #67e8f9;
}

.candidature-success {
    text-align: center;
    padding: var(--space-10) var(--space-6);
    background: var(--campaign-glass);
    border: 1px solid var(--campaign-glass-border);
    border-radius: var(--radius-md);
}

.candidature-success h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.candidature-success__tagline {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--hud-cyan-rgb));
}

.candidature-success__subtitle {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.candidature-success .aquila-link-box {
    margin-top: var(--space-8);
    padding: var(--space-6);
    border: 1px solid var(--campaign-glass-border);
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--radius-md);
}

.aquila-link-box__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-5) 0;
    text-align: center;
}

.aquila-link-box__qr img {
    background: #fff;
    padding: 8px;
    border-radius: var(--radius-sm);
    width: 160px;
    height: 160px;
}

.aquila-link-box__qr-hint {
    margin: 0;
    max-width: 320px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.aquila-link-box__reminder {
    margin: var(--space-4) 0 0;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    opacity: 0.85;
}

/* ─── Reveal motion ─── */
.reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--campaign-ease-out), transform 0.7s var(--campaign-ease-out);
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Formulaire candidature : pas de contenu masqué en attendant le scroll */
.candidature-page .candidature-form,
.candidature-page .candidature-faction-step,
.candidature-page .candidature-tabs,
.candidature-page .candidature-tab-panel,
.candidature-page #dressCodeRecap,
.candidature-page .pak-decharge-container {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-up {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .faction-card:hover .faction-card-inner {
        transform: none;
    }
}

/* ─── Autocomplétion nom d'équipe ─── */
.team-name-autocomplete-wrap {
    position: relative;
}

.team-name-suggestions {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% - 0.25rem);
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    background: rgba(12, 14, 18, 0.98);
    border: 1px solid var(--campaign-glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    max-height: 220px;
    overflow-y: auto;
}

.team-name-suggestions li {
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--campaign-text-primary);
}

.team-name-suggestions li:hover,
.team-name-suggestions li:focus {
    background: rgba(255, 255, 255, 0.06);
}

.team-suggestion-meta {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.candidature-team-logo-notice {
    margin: 0.6rem 0 1rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--campaign-text-primary);
    background: rgba(196, 163, 90, 0.12);
    border: 1px solid rgba(196, 163, 90, 0.45);
    border-radius: var(--radius-md);
}

.candidature-team-logo-notice a {
    color: var(--campaign-gold, #e8c877);
    text-decoration: underline;
}

/* Bloc logo + opt-in grisé quand le logo d'escouade est déjà transmis/publié */
.team-logo-public-block.is-locked {
    opacity: 0.45;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.85rem 0.25rem;
    background: rgba(255, 255, 255, 0.02);
}

.team-logo-public-block.is-locked label,
.team-logo-public-block.is-locked input[type="file"] {
    cursor: not-allowed;
}

.team-logo-public-block.is-locked input {
    pointer-events: none;
}

/* ─── Wizard progression ─── */
.candidature-wizard-progress-wrap {
    margin-bottom: var(--space-6);
}

.candidature-wizard-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.candidature-wizard-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--campaign-gold-dark), var(--campaign-gold));
    transition: width 0.35s var(--campaign-ease-out);
}

.candidature-wizard-meta {
    margin: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.wizard-step[hidden] {
    display: none !important;
}

.wizard-nav [hidden] {
    display: none !important;
}

.wizard-form-error {
    margin-bottom: var(--space-4);
}

.candidature-draft-banner[hidden] {
    display: none !important;
}

.candidature-draft-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(var(--hud-cyan-rgb), 0.45);
    border-radius: var(--radius-md, 6px);
    background: rgba(var(--hud-cyan-rgb), 0.08);
}

.candidature-draft-banner__text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--campaign-text-muted, rgba(255, 255, 255, 0.75));
}

.candidature-draft-banner__discard {
    flex-shrink: 0;
    font-size: 0.8rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(220, 70, 70, 0.75);
    color: #ffc9c9;
    background: rgba(150, 35, 35, 0.35);
}

.candidature-draft-banner__discard:hover:not(:disabled) {
    background: rgba(190, 45, 45, 0.55);
    border-color: rgba(240, 90, 90, 0.9);
    color: #fff;
}

.candidature-file-restored-hint {
    margin: var(--space-2) 0 0;
    font-size: 0.85rem;
    color: rgba(140, 200, 140, 0.95);
}

.candidature-draft-banner--saved {
    border-color: rgba(120, 180, 120, 0.35);
    background: rgba(80, 140, 80, 0.08);
}

.candidature-inapp-banner[hidden] {
    display: none !important;
}

.candidature-inapp-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(196, 163, 90, 0.5);
    border-left-width: 4px;
    border-radius: var(--radius-md, 6px);
    background: rgba(196, 163, 90, 0.1);
}

.candidature-inapp-banner__text {
    margin: 0;
    flex: 1 1 260px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--campaign-text-muted, rgba(255, 255, 255, 0.85));
}

.candidature-inapp-banner__dismiss {
    flex-shrink: 0;
    font-size: 0.8rem;
    padding: 0.45rem 0.9rem;
}

.candidature-edit-banner[hidden] {
    display: none !important;
}

.candidature-edit-banner {
    margin: var(--space-4) 0 0;
    padding: var(--space-4);
    border: 1px solid rgba(196, 163, 90, 0.5);
    border-left-width: 4px;
    border-radius: var(--radius-md, 6px);
    background: rgba(196, 163, 90, 0.08);
}

.candidature-edit-banner__title {
    margin: 0 0 var(--space-2);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #e8c877;
}

.candidature-edit-banner__text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--campaign-text-muted, #b8b8b8);
}

.candidature-edit-banner__items {
    margin: var(--space-3) 0 0;
    padding-left: 1.25rem;
    color: #f0f0f0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.candidature-edit-banner__items li {
    margin: 0 0 0.35rem;
}

.wizard-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--campaign-glass-border);
}

.wizard-nav--faction {
    justify-content: flex-end;
    border-top: none;
    padding-top: 0;
    margin-top: var(--space-4);
}

.btn-campaign--ghost {
    background: transparent;
    border: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
}

.btn-campaign--ghost:hover {
    border-color: var(--campaign-gold-dark);
    color: var(--campaign-gold-light);
}

/* ─── Aperçu fichiers ─── */
.file-preview {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--campaign-glass-border);
    border-radius: var(--radius-sm);
    max-width: 20rem;
}

.file-preview img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.file-preview--logo {
    max-width: 8rem;
}

.file-preview--logo img {
    object-fit: contain;
}

/* ─── Compteurs caractères ─── */
.char-counter {
    margin: var(--space-1) 0 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.char-counter--warn {
    color: #fbbf24;
}

.char-counter--ok {
    color: #86efac;
}

/* ─── QCM pagination ─── */
.qcm-progress-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--campaign-gold-light);
    margin-bottom: var(--space-4);
}

.qcm-page-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.qcm-page-indicator {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ─── Récapitulatif ─── */
.candidature-recap-list {
    margin: 0 0 var(--space-6);
    display: grid;
    gap: var(--space-3);
}

.candidature-recap-list > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.candidature-recap-list dt {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
}

.candidature-recap-list dd {
    margin: 0;
    color: var(--color-text-primary);
}

/* ─── Choix parcours (infanterie / FS / commandement) ─── */
.candidature-path-picker {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--campaign-glass-border);
}

.candidature-path-picker__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 var(--space-2);
    color: var(--campaign-gold);
}

.candidature-path-picker__hint {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    max-width: 52rem;
}

.candidature-path-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .candidature-path-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.candidature-path-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--space-4);
    border: 1px solid var(--campaign-glass-border);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    text-align: left;
}

.candidature-path-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.candidature-path-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(var(--hud-cyan-rgb), 0.15);
    color: var(--campaign-gold);
    margin-bottom: 0.25rem;
}

.candidature-path-card__badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.candidature-path-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.candidature-path-card__desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.candidature-path-card:hover {
    border-color: rgba(var(--hud-cyan-rgb), 0.45);
    background: rgba(var(--hud-cyan-rgb), 0.06);
}

.candidature-path-card.is-selected {
    border-color: var(--campaign-gold);
    background: rgba(var(--hud-cyan-rgb), 0.1);
    box-shadow: 0 0 0 1px rgba(var(--hud-cyan-rgb), 0.25);
}

.candidature-path-card.is-selected .candidature-path-card__icon {
    background: var(--campaign-gold);
    color: #111;
}

.candidature-submit-cta {
    width: 100%;
    margin-top: var(--space-5);
    font-size: 1rem;
    padding: 0.9rem 1.5rem;
}

.candidature-path-picker--success {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--campaign-glass-border);
    text-align: left;
}

.candidature-path-picker--success .candidature-path-picker__title,
.candidature-path-picker--success .candidature-path-picker__hint {
    text-align: center;
}

.candidature-path-cards--success .candidature-path-card--action {
    font: inherit;
    color: inherit;
    width: 100%;
    text-decoration: none;
}

.candidature-path-card--finish:hover {
    border-color: rgba(120, 180, 120, 0.5);
    background: rgba(80, 140, 80, 0.08);
}

@media (max-width: 767px) {
    .candidature-submit-cta {
        position: sticky;
        bottom: 0.75rem;
        z-index: 5;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }
}

@media (max-width: 520px) {
    .candidature-recap-list > div {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .wizard-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .wizard-nav .btn-campaign {
        width: 100%;
    }
}
