:root {
    --cuivre: #b75c24;
    --cuivre-fonce: #7a3b1b;
    --ardoise: #2a5984;
    --gris: #6c757d;
    --gris-clair: #f4f6f8;
    --bordure: #d0d6dc;
    --vert: #2f6f4e;
    --rouge: #b03434;
    --ambre: #c08a25;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #222;
    background: #fff;
    line-height: 1.5;
}

.conteneur { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

/* Bandeau */
.bandeau { background: var(--ardoise); color: #fff; padding: 0.75rem 0; }
.bandeau .conteneur { display: flex; align-items: center; gap: 1.5rem; }
.bandeau .logo { color: #fff; text-decoration: none; font-weight: 700;
                 font-size: 1.25rem; }
.bandeau nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.bandeau a { color: #fff; text-decoration: none; }
.bandeau a:hover { text-decoration: underline; }
.utilisateur { opacity: 0.85; font-size: 0.9rem; }
.inline { display: inline; }
.lien-bouton { background: none; border: none; color: #fff; cursor: pointer;
               text-decoration: underline; padding: 0; font: inherit; }

/* Hero & cartes */
.hero { padding: 2.5rem 0; text-align: center; background: var(--gris-clair);
        border-radius: 8px; margin: 1.5rem 0; }
.hero h1 { margin-top: 0; }
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem; margin: 2rem 0; }
.trio article { padding: 1.5rem; background: #fff; border: 1px solid var(--bordure);
                border-radius: 8px; }
.trio h3 { color: var(--cuivre); margin-top: 0; }

/* Boutons */
.bouton, button.bouton {
    display: inline-block; padding: 0.5rem 1rem;
    background: #fff; border: 1px solid var(--bordure); border-radius: 4px;
    text-decoration: none; color: #222; cursor: pointer; font-size: 1rem;
}
.bouton:hover { background: var(--gris-clair); }
.bouton.primaire {
    background: var(--cuivre); color: #fff; border-color: var(--cuivre-fonce);
}
.bouton.primaire:hover { background: var(--cuivre-fonce); }
.bouton.dangereux { background: #fff; color: var(--rouge);
                    border-color: var(--rouge); }
.bouton.dangereux:hover { background: var(--rouge); color: #fff; }
.bouton.grand { font-size: 1.1rem; padding: 0.75rem 1.5rem; }

/* Formulaires */
.formulaire { max-width: 600px; }
.formulaire p { margin: 1rem 0; }
.formulaire input[type="text"], .formulaire input[type="email"],
.formulaire input[type="password"], .formulaire input[type="url"],
.formulaire input[type="datetime-local"], .formulaire textarea,
.formulaire select {
    width: 100%; padding: 0.5rem; border: 1px solid var(--bordure);
    border-radius: 4px; font: inherit;
}
.formulaire label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.helptext { display: block; color: var(--gris); font-size: 0.85rem; }
.errorlist { list-style: none; padding: 0; color: var(--rouge); }

/* Tables */
.table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.table th, .table td { padding: 0.75rem; border-bottom: 1px solid var(--bordure);
                      text-align: left; vertical-align: top; }
.table th { background: var(--gris-clair); }
.miniature { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }

/* Statuts */
.statut { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 12px;
          font-size: 0.85rem; font-weight: 600; }
.statut-en_attente { background: #fff3cd; color: var(--ambre); }
.statut-approuvee { background: #d4edda; color: var(--vert); }
.statut-refusee { background: #f8d7da; color: var(--rouge); }

/* Messages */
.messages { list-style: none; padding: 0; }
.messages li { padding: 0.75rem 1rem; border-radius: 4px; margin: 0.5rem 0; }
.messages .success { background: #d4edda; color: var(--vert); }
.messages .warning { background: #fff3cd; color: var(--ambre); }
.messages .error { background: #f8d7da; color: var(--rouge); }
.messages .info { background: #d1ecf1; color: var(--ardoise); }

.erreur { color: var(--rouge); }
.dangereux { color: var(--rouge); margin-left: 0.5rem; }
.image-pub { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }
.info { background: #d1ecf1; padding: 0.75rem 1rem; border-left: 4px solid var(--ardoise);
        border-radius: 4px; }

/* Pied */
.pied { background: var(--gris-clair); padding: 1rem 0; margin-top: 3rem;
        color: var(--gris); text-align: center; }