===========================
   AMBIOS.org - main.css
   Style global inspiré du logo AMBIOSMABB
   =========================== 

 ---------- Variables globales ---------- 
root {
     Couleurs AMBIOS 
    --color-primary #2ecc71;       Vert Mali 
    --color-secondary #f4d03f;     Jaune AMBIOS 
    --color-accent #c0392b;        Rouge biohazard 
    --color-dark #222222;          Noir institutionnel 
    --color-muted #777777;         Texte secondaire 

    --color-bg #f5f7fa;            Fond général 
    --color-bg-alt #ffffff;        Fond cartes 
    --color-border #e1e5eb;        Bordures 

     Typographie 
    --font-main Roboto, sans-serif;
    --font-size-base 16px;
    --line-height-base 1.5;

     Layout 
    --max-width 1200px;
    --header-height 70px;

     Ombres & radius 
    --shadow-soft 0 2px 6px rgba(0, 0, 0, 0.06);
    --radius-sm 4px;
    --radius-md 8px;
}

 ---------- Reset ---------- 
,
before,
after {
    margin 0;
    padding 0;
    box-sizing border-box;
}

body {
    font-family var(--font-main);
    font-size var(--font-size-base);
    line-height var(--line-height-base);
    background-color var(--color-bg);
    color var(--color-dark);
}

 ---------- Liens ---------- 
a {
    color var(--color-primary);
    text-decoration none;
}

ahover {
    color var(--color-secondary);
}

 ---------- Titres ---------- 
h1, h2, h3, h4, h5, h6 {
    color var(--color-dark);
    font-weight 600;
    margin-bottom 0.5rem;
}

 ---------- Layout ---------- 
.wrapper {
    max-width var(--max-width);
    margin 0 auto;
    padding 1.5rem;
}

 Header 
.site-header {
    height var(--header-height);
    background-color var(--color-bg-alt);
    border-bottom 3px solid var(--color-primary);
    box-shadow var(--shadow-soft);
    display flex;
    align-items center;
    justify-content space-between;
    padding 0 1.5rem;
}

 Footer 
.site-footer {
    background-color var(--color-bg-alt);
    border-top 3px solid var(--color-secondary);
    padding 1.5rem;
    color var(--color-muted);
    margin-top 2rem;
}

 ---------- Cartes ---------- 
.card {
    background-color var(--color-bg-alt);
    border 1px solid var(--color-border);
    border-radius var(--radius-md);
    box-shadow var(--shadow-soft);
    padding 1.25rem;
    margin-bottom 1rem;
}

 ---------- Boutons ---------- 
.btn {
    padding 0.5rem 1rem;
    border-radius var(--radius-sm);
    border 1px solid transparent;
    cursor pointer;
    transition 0.2s ease;
}

.btn-primary {
    background-color var(--color-primary);
    color #fff;
}

.btn-primaryhover {
    background-color #27ae60;
}

.btn-warning {
    background-color var(--color-secondary);
    color var(--color-dark);
}

.btn-danger {
    background-color var(--color-accent);
    color #fff;
}

 ---------- Formulaires ---------- 
input, select, textarea {
    width 100%;
    padding 0.45rem 0.6rem;
    border-radius var(--radius-sm);
    border 1px solid var(--color-border);
    background-color #fff;
}

inputfocus, selectfocus, textareafocus {
    border-color var(--color-primary);
    box-shadow 0 0 0 2px rgba(46, 204, 113, 0.2);
}

 ---------- Alertes ---------- 
.alert {
    padding 0.6rem 0.9rem;
    border-radius var(--radius-sm);
    margin-bottom 0.75rem;
}

.alert-success {
    background-color rgba(46, 204, 113, 0.15);
    border-left 4px solid var(--color-primary);
}

.alert-warning {
    background-color rgba(244, 208, 63, 0.15);
    border-left 4px solid var(--color-secondary);
}

.alert-danger {
    background-color rgba(192, 57, 43, 0.15);
    border-left 4px solid var(--color-accent);
}