/* ============================================================================
   MC27-SECRET — Styles spécifiques (au-dessus de foundation.css)
   Utilise les tokens CSS MCServices var(--mc-*)
   Molderez-Consult SRL — 2026
   ============================================================================ */

/* --- Formulaire de création --- */

.mc27s-form-container {
    max-width: 100%;
}

.mc27s-form-container .mc-form__textarea {
    font-family: var(--mc-font-mono, 'Source Code Pro', monospace);
    font-size: var(--mc-font-sm, 0.875rem);
    resize: vertical;
    min-height: 10rem;
}

/* --- Sidebar sécurité --- */

.mc27s-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-4, 1rem);
}

.mc27s-sidebar .mc-card {
    padding: var(--mc-space-4, 1rem) var(--mc-space-5, 1.25rem);
}

.mc27s-sidebar .mc-card h3 {
    font-size: var(--mc-font-sm, 0.875rem);
    margin-bottom: var(--mc-space-2, 0.5rem);
}

.mc27s-sidebar .mc-card p {
    font-size: var(--mc-font-xs, 0.75rem);
    line-height: 1.5;
}

/* --- Résultat --- */

.mc27s-result {
    padding: var(--mc-space-6, 1.5rem);
    background: var(--mc-surface, #fff);
    border: 1px solid var(--mc-border, #e2e8f0);
    border-radius: var(--mc-radius-lg, 0.5rem);
}

.mc27s-result h2 {
    margin-bottom: var(--mc-space-4, 1rem);
}

.mc27s-result__warning {
    padding: var(--mc-space-3, 0.75rem) var(--mc-space-4, 1rem);
    background: var(--mc-warning-bg, #fffbeb);
    border: 1px solid var(--mc-warning-border, #fcd34d);
    border-radius: var(--mc-radius, 0.375rem);
    color: var(--mc-warning-text, #92400e);
    font-size: var(--mc-font-sm, 0.875rem);
    margin-bottom: var(--mc-space-5, 1.25rem);
}

[data-theme="dark"] .mc27s-result__warning {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.mc27s-result__link-group {
    margin-bottom: var(--mc-space-4, 1rem);
}

.mc27s-copy-group {
    display: flex;
    gap: var(--mc-space-2, 0.5rem);
}

.mc27s-copy-group .mc-form__input {
    flex: 1;
    font-family: var(--mc-font-mono, 'Source Code Pro', monospace);
    font-size: var(--mc-font-sm, 0.875rem);
}

.mc27s-result__meta {
    margin-bottom: var(--mc-space-4, 1rem);
}

/* --- Erreurs --- */

.mc27s-error {
    margin-top: var(--mc-space-4, 1rem);
    padding: var(--mc-space-3, 0.75rem) var(--mc-space-4, 1rem);
    background: var(--mc-danger-bg, #fef2f2);
    border: 1px solid var(--mc-danger-border, #fca5a5);
    border-radius: var(--mc-radius, 0.375rem);
    color: var(--mc-danger-text, #991b1b);
    font-size: var(--mc-font-sm, 0.875rem);
}

[data-theme="dark"] .mc27s-error {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.3);
    color: #f87171;
}

/* --- Steps (Comment ça fonctionne) --- */

.mc27s-step {
    text-align: center;
    padding: var(--mc-space-6, 1.5rem);
}

.mc27s-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--mc-primary, #1e293b);
    color: #fff;
    font-weight: 700;
    font-size: var(--mc-font-base, 1rem);
    margin-bottom: var(--mc-space-4, 1rem);
}

[data-theme="dark"] .mc27s-step__number {
    background: var(--mc-primary-dark, #94a3b8);
    color: var(--mc-bg-dark, #0f172a);
}

/* --- Grille 3 colonnes --- */

.mc-grid--3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mc-space-6, 1.5rem);
}

@media (max-width: 768px) {
    .mc-grid--3col {
        grid-template-columns: 1fr;
    }
}

/* --- Pricing --- */

.mc27s-pricing {
    max-width: 40rem;
    margin: 0 auto;
}

.mc27s-pricing__cta {
    text-align: center;
    margin-top: var(--mc-space-6, 1.5rem);
}

/* --- Vue secret --- */

.mc27s-view-container {
    max-width: 36rem;
    margin: 0 auto;
    padding: var(--mc-space-8, 2rem) 0;
}

.mc27s-view-card {
    text-align: center;
    padding: var(--mc-space-8, 2rem) var(--mc-space-6, 1.5rem);
}

.mc27s-view-card h1 {
    font-size: var(--mc-font-xl, 1.5rem);
    margin-bottom: var(--mc-space-4, 1rem);
}

.mc27s-view-card__icon {
    font-size: 3rem;
    margin-bottom: var(--mc-space-4, 1rem);
    color: var(--mc-text-muted, #64748b);
}

.mc27s-view-card__icon--success {
    color: var(--mc-success, #16a34a);
}

.mc27s-view-card__icon--warning {
    color: var(--mc-warning, #d97706);
}

.mc27s-view-card__icon--danger {
    color: var(--mc-danger, #dc2626);
}

.mc27s-view-card__info {
    margin-bottom: var(--mc-space-6, 1.5rem);
}

/* --- Countdown --- */

.mc27s-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--mc-space-6, 1.5rem);
    position: relative;
}

.mc27s-countdown__svg {
    transform: scaleX(-1);
}

.mc27s-countdown__bg {
    stroke: var(--mc-border, #e2e8f0);
}

.mc27s-countdown__progress {
    transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}

.mc27s-countdown--safe {
    stroke: var(--mc-success, #16a34a);
}

.mc27s-countdown--warning {
    stroke: var(--mc-warning, #d97706);
}

.mc27s-countdown--danger {
    stroke: var(--mc-danger, #dc2626);
}

.mc27s-countdown__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mc-text, #1e293b);
}

[data-theme="dark"] .mc27s-countdown__text {
    color: var(--mc-text-dark, #e2e8f0);
}

.mc27s-countdown__unit {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.6;
}

/* --- Secret box --- */

.mc27s-secret-box {
    position: relative;
    background: var(--mc-surface-alt, #f8fafc);
    border: 1px solid var(--mc-border, #e2e8f0);
    border-radius: var(--mc-radius, 0.375rem);
    padding: var(--mc-space-4, 1rem);
    margin-bottom: var(--mc-space-4, 1rem);
    text-align: left;
}

[data-theme="dark"] .mc27s-secret-box {
    background: var(--mc-surface-dark, #1e293b);
    border-color: var(--mc-border-dark, #334155);
}

.mc27s-secret-text {
    font-family: var(--mc-font-mono, 'Source Code Pro', monospace);
    font-size: var(--mc-font-sm, 0.875rem);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    color: var(--mc-text, #1e293b);
}

[data-theme="dark"] .mc27s-secret-text {
    color: var(--mc-text-dark, #e2e8f0);
}

.mc27s-secret-box .mc-btn--sm {
    position: absolute;
    top: var(--mc-space-2, 0.5rem);
    right: var(--mc-space-2, 0.5rem);
}

/* --- Transitions --- */

.mc27s-revealed-card,
.mc27s-destroyed-card {
    transition: opacity 0.4s ease;
}