/* ═══════════════════════════════════════════════════════════════
   COOPÉRATIVE MANKO — STYLE HARMONISÉ
   Direction artistique : 70% crème / 25% terre / 5% vert accent
   ═══════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

:root {
    --vert-foret: #2C5F2D;
    --vert-fonce: #1F4520;
    --vert-pale: #E8EFE7;
    --terracotta: #B85042;
    --terracotta-fonce: #973A2D;
    --terracotta-pale: #F5E6E2;
    --sable: #D9A074;
    --sable-pale: #F4E5D3;
    --creme: #FAF6F0;
    --creme-fonce: #F0E9DC;
    --texte-titre: #1F3A1F;
    --texte-fonce: #3A2E20;
    --texte-clair: #7A6F5F;
    --gris-clair: #E5DED2;
    --rouge-erreur: #C0392B;
    --vert-succes: #2D8B47;
    --orange-warning: #C97A2B;
    --ombre-douce: 0 2px 8px rgba(58, 46, 32, 0.06);
    --ombre-moyenne: 0 4px 16px rgba(58, 46, 32, 0.08);
    --ombre-forte: 0 8px 30px rgba(58, 46, 32, 0.12);
}

html, body {
    margin: 0; padding: 0;
    font-family: 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
    background-color: var(--creme);
    color: var(--texte-fonce);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--terracotta); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--terracotta-fonce); }

/* HEADER */
.header {
    background: var(--creme);
    border-bottom: 1px solid var(--gris-clair);
    padding: 18px 0;
    position: relative;
}
.header::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--vert-foret) 0%, var(--terracotta) 50%, var(--sable) 100%);
}
.header .container {
    max-width: 1100px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
}
.header .logo-img {
    height: 56px; width: auto; display: block;
    border-radius: 50%; transition: transform 0.2s;
}
.header .logo-img:hover { transform: scale(1.03); }
.header .devise {
    font-style: italic; color: var(--terracotta);
    font-size: 13px; margin: 4px 0 0 0; letter-spacing: 0.5px;
}
.header nav a {
    color: var(--vert-foret); margin-left: 24px;
    font-weight: 600; font-size: 15px;
    padding: 8px 16px; border: 1.5px solid var(--vert-foret);
    border-radius: 4px; transition: all 0.2s;
}
.header nav a:hover {
    background: var(--vert-foret); color: white; text-decoration: none;
}

/* HERO — fond crème lumineux */
.hero {
    background: var(--creme);
    color: var(--texte-titre);
    padding: 80px 24px 100px;
    text-align: center;
    position: relative; overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--sable-pale) 0%, transparent 70%);
    opacity: 0.5; pointer-events: none;
}
.hero::after {
    content: ''; position: absolute; bottom: -150px; left: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--vert-pale) 0%, transparent 70%);
    opacity: 0.6; pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.logo-hero {
    display: block; margin: 0 auto 30px;
    max-width: 180px; width: 50vw; max-height: 180px;
    background: white; border-radius: 50%; padding: 8px;
    box-shadow: var(--ombre-forte);
}

.hero h1 {
    font-size: 48px; margin: 0 0 16px 0;
    font-weight: 700; color: var(--vert-foret);
    letter-spacing: -0.5px;
}
.hero .devise-accueil {
    font-size: 18px; color: var(--terracotta);
    font-style: italic; margin: 0 0 32px 0;
    letter-spacing: 1px; font-weight: 500;
}
.hero .devise-accueil::before, .hero .devise-accueil::after {
    content: '✦'; margin: 0 12px; color: var(--sable); font-style: normal;
}
.hero p.intro {
    font-size: 17px; max-width: 680px; margin: 0 auto 36px;
    line-height: 1.75; color: var(--texte-fonce);
}
.hero p.intro strong { color: var(--vert-foret); }

/* BOUTONS */
.btn {
    display: inline-block; padding: 14px 36px;
    border-radius: 4px; font-size: 15px; font-weight: 600;
    letter-spacing: 0.3px; text-decoration: none;
    border: none; cursor: pointer; transition: all 0.25s;
    font-family: inherit;
}
.btn-primary { background: var(--terracotta); color: white; }
.btn-primary:hover {
    background: var(--terracotta-fonce); color: white;
    text-decoration: none; transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(184, 80, 66, 0.25);
}
.btn-secondary {
    background: transparent; color: var(--vert-foret);
    border: 2px solid var(--vert-foret);
}
.btn-secondary:hover {
    background: var(--vert-foret); color: white;
    text-decoration: none;
}
.btn-block { display: block; width: 100%; text-align: center; }

/* CONTAINER & SECTIONS */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 24px; }
.section h2 {
    color: var(--vert-foret); text-align: center;
    margin: 0 0 56px 0; font-size: 34px; font-weight: 700;
    letter-spacing: -0.3px; position: relative;
}
.section h2::after {
    content: ''; display: block; width: 60px; height: 3px;
    background: var(--terracotta); margin: 16px auto 0;
}
.cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px; max-width: 1100px; margin: 0 auto;
}
.card {
    background: white; padding: 36px 32px; border-radius: 8px;
    box-shadow: var(--ombre-douce);
    border-top: 3px solid var(--terracotta);
    transition: transform 0.25s, box-shadow 0.25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ombre-moyenne); }
.card h3 {
    color: var(--vert-foret); margin: 0 0 16px 0;
    font-size: 20px; font-weight: 700;
}
.card p { margin: 0; color: var(--texte-fonce); line-height: 1.7; }
.section-blanc { background: white; }

/* FORMULAIRES */
.form-card {
    background: white; max-width: 460px; margin: 60px auto;
    padding: 48px 44px; border-radius: 8px;
    box-shadow: var(--ombre-moyenne);
    border-top: 4px solid var(--vert-foret);
}
.form-card h1 {
    color: var(--vert-foret); margin: 0 0 8px 0;
    font-size: 26px; font-weight: 700;
}
.form-card .sous-titre {
    color: var(--texte-clair); margin-bottom: 32px;
    font-size: 14.5px; line-height: 1.6;
}
.form-group { margin-bottom: 22px; }
.form-group label {
    display: block; margin-bottom: 8px; font-weight: 600;
    color: var(--texte-titre); font-size: 13.5px; letter-spacing: 0.2px;
}
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] {
    width: 100%; padding: 13px 16px;
    border: 1.5px solid var(--gris-clair); border-radius: 5px;
    font-size: 15px; font-family: inherit;
    background: var(--creme);
    transition: border-color 0.2s, background 0.2s;
}
.form-group input:focus {
    outline: none; border-color: var(--vert-foret);
    background: white;
    box-shadow: 0 0 0 3px var(--vert-pale);
}
.form-group .aide {
    font-size: 13px; color: var(--texte-clair);
    margin-top: 8px; line-height: 1.5;
}
.form-actions { margin-top: 28px; }
.form-links {
    margin-top: 24px; padding-top: 24px;
    border-top: 1px solid var(--gris-clair);
    text-align: center; font-size: 14px;
}

/* MESSAGES FLASH */
.flash {
    padding: 14px 18px; margin-bottom: 22px;
    border-radius: 5px; border-left: 3px solid;
    font-size: 14.5px; line-height: 1.55;
}
.flash-success { background: #EFF7F1; color: #1F5C2E; border-left-color: var(--vert-succes); }
.flash-error   { background: #FAEAE7; color: #8B2820; border-left-color: var(--rouge-erreur); }
.flash-warning { background: #FBF1E5; color: #7A4818; border-left-color: var(--orange-warning); }
.flash-info    { background: var(--vert-pale); color: var(--vert-fonce); border-left-color: var(--vert-foret); }

/* FOOTER */
.footer {
    background: var(--vert-foret); color: var(--sable-pale);
    padding: 50px 24px 30px; text-align: center;
    margin-top: 80px; position: relative;
}
.footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--sable) 0%, var(--terracotta) 50%, var(--sable) 100%);
}
.footer p { margin: 6px 0; font-size: 14.5px; }
.footer p strong { color: white; font-size: 16px; letter-spacing: 0.5px; }
.footer a { color: var(--sable); border-bottom: 1px dotted var(--sable); }
.footer a:hover { color: white; border-bottom-color: white; }
.footer .copyright {
    margin-top: 28px; padding-top: 24px;
    border-top: 1px solid rgba(217, 160, 116, 0.25);
    font-size: 12.5px; color: rgba(217, 160, 116, 0.7);
    letter-spacing: 0.3px;
}

/* DASHBOARD */
.dashboard-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px; margin-top: 36px;
}
.dashboard-card {
    background: white; padding: 28px; border-radius: 8px;
    box-shadow: var(--ombre-douce);
    border-left: 3px solid var(--sable);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dashboard-card:hover {
    border-left-color: var(--terracotta);
    box-shadow: var(--ombre-moyenne);
}
.dashboard-card h3 {
    color: var(--vert-foret); margin: 0 0 16px 0;
    font-size: 18px; font-weight: 700;
}
.dashboard-card p {
    margin: 8px 0; color: var(--texte-fonce); font-size: 14.5px;
}
.dashboard-card p em {
    color: var(--terracotta); font-style: normal;
    font-weight: 500; font-size: 13px;
}

/* ADMIN-TEST */
.admin-warning {
    background: var(--sable-pale); border: 1.5px solid var(--sable);
    padding: 18px 22px; margin-bottom: 30px; border-radius: 6px;
    font-size: 14px; line-height: 1.6; color: var(--texte-fonce);
}
.admin-warning strong {
    color: var(--terracotta-fonce);
    display: inline-block; margin-bottom: 4px;
}
.admin-warning code {
    background: white; padding: 2px 8px; border-radius: 3px;
    font-size: 13px; color: var(--vert-foret);
    border: 1px solid var(--gris-clair);
}

table.membres-list {
    width: 100%; background: white; border-collapse: collapse;
    border-radius: 6px; overflow: hidden;
    box-shadow: var(--ombre-douce);
}
table.membres-list th {
    background: var(--vert-foret); color: white;
    padding: 14px 12px; text-align: left;
    font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.6px; font-weight: 600;
}
table.membres-list td {
    padding: 14px 12px; border-bottom: 1px solid var(--creme-fonce);
    font-size: 14px; vertical-align: top;
}
table.membres-list tr:last-child td { border-bottom: none; }
table.membres-list tr:hover { background: var(--creme); }

.statut-badge {
    display: inline-block; padding: 4px 12px; border-radius: 12px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px;
    text-transform: uppercase;
}
.statut-IMPORTE         { background: #ECEFF1; color: #455A64; }
.statut-A_REGULARISER   { background: var(--sable-pale); color: var(--orange-warning); }
.statut-DOCS_RECUS      { background: #E1F5FE; color: #01579B; }
.statut-DOCS_VALIDES    { background: var(--vert-pale); color: var(--vert-fonce); }
.statut-PRET_A_ACTIVER  { background: #F3E5F5; color: #6A1B9A; }
.statut-ACTIVE          { background: var(--vert-pale); color: var(--vert-fonce); font-weight: 700; }
.statut-SUSPENDU        { background: var(--terracotta-pale); color: var(--terracotta-fonce); }

.btn-mini {
    padding: 7px 14px; font-size: 12.5px; border-radius: 4px;
    text-decoration: none; display: inline-block; margin: 3px;
    border: none; cursor: pointer; font-family: inherit;
    font-weight: 600; transition: all 0.2s;
}
.btn-mini-primary { background: var(--vert-foret); color: white; }
.btn-mini-primary:hover { background: var(--vert-fonce); color: white; text-decoration: none; }
.btn-mini-secondary { background: var(--creme-fonce); color: var(--texte-titre); }
.btn-mini-secondary:hover { background: var(--sable-pale); color: var(--texte-titre); text-decoration: none; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero { padding: 50px 20px 70px; }
    .hero h1 { font-size: 34px; }
    .hero .devise-accueil { font-size: 16px; }
    .hero p.intro { font-size: 16px; }
    .logo-hero { max-width: 140px; }
    
    .header .container { flex-direction: column; gap: 12px; text-align: center; }
    .header .logo-img { height: 50px; }
    .header nav { margin-top: 4px; }
    .header nav a { 
        margin-left: 0; margin-right: 8px;
        font-size: 14px; padding: 6px 14px;
    }
    
    .section { padding: 50px 20px; }
    .section h2 { font-size: 26px; margin-bottom: 36px; }
    
    .form-card { margin: 30px 16px; padding: 32px 26px; }
    .form-card h1 { font-size: 22px; }
    
    .cards { gap: 20px; }
    .card { padding: 28px 24px; }
    
    .dashboard-grid { grid-template-columns: 1fr; gap: 18px; }
    
    table.membres-list { font-size: 13px; }
    table.membres-list th, table.membres-list td { padding: 10px 8px; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 28px; }
    .hero .devise-accueil { font-size: 14px; letter-spacing: 0.5px; }
    .hero .devise-accueil::before, .hero .devise-accueil::after { margin: 0 6px; }
    .btn { padding: 12px 24px; font-size: 14px; }
    .footer { padding: 40px 20px 24px; margin-top: 50px; }
}