:root {
    --bleu-marine: #0a2a5e;
    --bleu-clair: #1e5fb0;
    --bleu-fond: #f2f6fc;
    --blanc: #ffffff;
    --gris-texte: #333333;
    --vert-ok: #1e8449;
    --rouge-erreur: #c0392b;
    --orange-attente: #e67e22;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--bleu-fond);
    color: var(--gris-texte);
}

.conteneur {
    max-width: 480px;
    margin: 60px auto;
    background: var(--blanc);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(10, 42, 94, 0.12);
    animation: apparition 0.5s ease-out;
}

.conteneur-large {
    max-width: 900px;
}

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

h1, h2 {
    color: var(--bleu-marine);
    text-align: center;
    margin-top: 0;
}

.logo-espace {
    display: block;
    margin: 0 auto 20px;
    width: 90px;
}

label {
    display: block;
    margin-top: 16px;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--bleu-marine);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cdd8e6;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus {
    outline: none;
    border-color: var(--bleu-clair);
    box-shadow: 0 0 0 3px rgba(30, 95, 176, 0.15);
}

button, .btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    padding: 13px;
    background: var(--bleu-marine);
    color: var(--blanc);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.25s, transform 0.15s;
}

button:hover, .btn:hover {
    background: var(--bleu-clair);
    transform: translateY(-2px);
}

.lien-secondaire {
    display: block;
    text-align: center;
    margin-top: 18px;
    color: var(--bleu-clair);
    text-decoration: none;
    font-size: 14px;
}
.lien-secondaire:hover { text-decoration: underline; }

.message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 14px;
    animation: apparition 0.4s ease-out;
}
.message.succes { background: #e9f7ef; color: var(--vert-ok); border: 1px solid #c8ecd9; }
.message.erreur { background: #fdecea; color: var(--rouge-erreur); border: 1px solid #f5c6c2; }
.message.attente { background: #fef5e7; color: var(--orange-attente); border: 1px solid #fbe3bb; }

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.badge.en_attente { background: #fef5e7; color: var(--orange-attente); }
.badge.valide { background: #e9f7ef; color: var(--vert-ok); }
.badge.refuse { background: #fdecea; color: var(--rouge-erreur); }

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: var(--blanc);
}
th, td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #eef1f6;
    font-size: 14px;
}
th {
    background: var(--bleu-marine);
    color: var(--blanc);
}
tr { transition: background 0.2s; }
tr:hover td { background: #f8fafd; }

.actions form { display: inline; margin: 0; padding: 0; width: auto; }
.actions button {
    width: auto;
    margin: 0 4px 0 0;
    padding: 7px 14px;
    font-size: 13px;
}
.btn-valider { background: var(--vert-ok); }
.btn-valider:hover { background: #27ae60; }
.btn-refuser { background: var(--rouge-erreur); }
.btn-refuser:hover { background: #e74c3c; }

.entete-admin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 30px auto 0;
    padding: 0 10px;
}
.entete-admin a { color: var(--bleu-clair); text-decoration: none; font-size: 14px; }

.bienvenue {
    text-align: center;
}
.bienvenue p { font-size: 16px; line-height: 1.6; }