/* --- VARIABLES ET CONFIGURATION DU SYSTEME DE DESIGN --- */
:root {
    /* Couleurs du DESIGN.md */
    --color-background: #f7f9fc;
    --color-surface: #f7f9fc;
    --color-surface-container-lowest: #ffffff;
    --color-on-surface: #191c1e;
    --color-on-surface-variant: #454652;
    
    --color-primary: #000666; /* Deep Security Blue */
    --color-on-primary: #ffffff;
    --color-surface-tint: #4c56af;
    
    --color-secondary: #006e1c; /* Success Green */
    --color-error: #ba1a1a; /* Error Red */
    --color-outline-variant: #c6c5d4;

    /* Spacing & Touch targets */
    --spacing-unit: 4px;
    --spacing-lg: 24px;
    --spacing-container-margin: 20px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-background);
    color: var(--color-on-surface);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* --- MISE EN PAGE MOBILE-FIRST --- */
.app-container {
    width: 100%;
    max-width: 412px; /* Largeur type smartphone */
    height: 100vh;
    max-height: 892px;
    background-color: var(--color-surface-container-lowest);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-container-margin);
    position: relative;
    overflow: hidden;
}

/* --- TYPOGRAPHIE --- */
.typography-display-lg {
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.02em;
}
.typography-headline-md {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.01em;
}
.typography-headline-sm {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: var(--color-primary);
}
.typography-body-lg {
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}
.typography-body-md {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.typography-label-md {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.label-secondary {
    color: var(--color-on-surface-variant);
    text-align: center;
}

/* --- COMPOSANTS INTERFACE --- */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    color: var(--color-primary);
    margin-bottom: auto;
}

.view-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    animation: fadeIn 0.3s ease-in-out;
}

.hidden {
    display: none !important;
}

/* Écran d'accueil - Cercles Concentriques (screen.png) */
.unlock-trigger-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: auto;
    margin-top: auto;
}

.ripple-outer {
    width: 320px;
    height: 320px;
    border: 1px solid rgba(76, 86, 175, 0.08);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ripple-inner {
    width: 260px;
    height: 260px;
    border: 1px solid rgba(76, 86, 175, 0.15);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-circle-button {
    width: 200px;
    height: 200px;
    background-color: #7985cb; /* Couleur adoucie visible sur screen.png */
    border: none;
    border-radius: 50%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0px 4px 12px rgba(0, 6, 102, 0.15);
    transition: transform 0.1s ease, background-color 0.2s ease;
    padding: 20px;
    text-align: center;
}

.action-circle-button:active {
    transform: scale(0.96);
    background-color: var(--color-primary);
}

.action-circle-button .typography-headline-sm {
    color: white;
    font-size: 18px;
    margin-top: 12px;
}

.state-footer {
    margin-top: auto;
    padding-bottom: var(--spacing-lg);
}

/* Écran de chargement / Compte à rebours (compte-a-rebours.png) */
.loading-instruction {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.loading-instruction h2 {
    color: #191c1e;
    margin-bottom: 12px;
}

.countdown-container {
    margin-top: 40px;
}

.countdown-circle {
    width: 240px;
    height: 240px;
    border: 14px solid #eceef1; /* surface-container */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-primary);
}

.countdown-label {
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    margin-top: 4px;
}

/* Écran de résultat */
.result-status-card {
    background-color: var(--color-background);
    padding: 32px var(--spacing-lg);
    border-radius: 1rem; /* lg */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
}

.result-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    color: white;
}

.result-icon-circle.success { background-color: var(--color-secondary); }
.result-icon-circle.error { background-color: var(--color-error); }

.btn-secondary {
    margin-top: var(--spacing-lg);
    padding: 12px var(--spacing-lg);
    background-color: transparent;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    width: 100%;
}

.error-banner {
    background-color: #ffdad6;
    color: #93000a;
    padding: 16px;
    border-radius: 0.5rem;
    width: 100%;
    text-align: center;
}

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