/* =====================================================
   Bonsaï Club d'Aquitaine
   Planning saison 2026-2027
   Feuille de style principale
===================================================== */


/* ---------- Variables ---------- */

:root {

    --bg: #f6f4ee;
    --card: #ffffff;
    --text: #263238;
    --muted: #66736c;

    --green: #657b59;
    --green-light: #e7efe2;

    --blue: #58758c;
    --blue-light: #e7f0f5;

    --orange: #b7833f;
    --orange-light: #f7eddc;

    --purple: #75628a;
    --purple-light: #eee8f5;

    --red: #9b4b4b;
    --red-light: #f8e8e8;

    --shadow:
        0 8px 25px rgba(40,50,40,0.08);

    --radius: 18px;

}



/* ---------- Base ---------- */

* {
    box-sizing:border-box;
}


body {

    margin:0;

    background:var(--bg);

    color:var(--text);

    font-family:
        "Segoe UI",
        Inter,
        Arial,
        sans-serif;

}



/* ---------- En-tête ---------- */

.hero{

    min-height:260px;

    background-image:url("images/logo-bca.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:black;

    position:relative;

}



.overlay {

    padding:40px;

}



.logo {

    width:110px;

    height:auto;

    margin-bottom:15px;

}



.hero h1 {

    margin:0;

    font-size:42px;

    font-weight:600;

}



.hero h2 {

    margin:10px 0;

    font-size:26px;

    font-weight:400;

}



.hero p {

    opacity:.9;

}



/* ---------- Zone principale ---------- */


main {

    max-width:1200px;

    margin:auto;

    padding:35px 20px;

}



/* ---------- Boutons filtres ---------- */


.controls {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    justify-content:center;

    margin-bottom:25px;

}



button {

    border:none;

    cursor:pointer;

    padding:11px 18px;

    border-radius:30px;

    background:white;

    color:var(--text);

    box-shadow:var(--shadow);

    font-size:14px;

    transition:.2s;

}



button:hover {

    transform:translateY(-2px);

}



button.active {

    background:var(--green);

    color:white;

}



.print {

    background:#333;

    color:white;

}



/* ---------- Recherche ---------- */


.search {

    text-align:center;

    margin-bottom:30px;

}


.search input {

    width:100%;

    max-width:500px;

    padding:14px 20px;

    border-radius:30px;

    border:1px solid #ddd;

    font-size:15px;

}



/* ---------- Mois ---------- */


.month {

    margin-bottom:35px;

}



.month-title {

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

}



.month-title h2 {

    margin:0;

    color:var(--green);

    font-size:26px;

}



.month-line {

    flex:1;

    height:2px;

    background:#d9ddcf;

}



/* ---------- Cartes événements ---------- */


.events {

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:18px;

}



.event {

    background:var(--card);

    border-radius:var(--radius);

    padding:22px;

    box-shadow:var(--shadow);

    transition:.25s;

    border-left:6px solid var(--green);

}



.event:hover {

    transform:translateY(-4px);

}



.event h3 {

    margin:8px 0;

    font-size:18px;

}



.event-date {

    font-weight:bold;

    color:var(--green);

}



.event-place {

    color:var(--muted);

    margin-top:12px;

}



/* ---------- Catégories ---------- */


.badge {

    display:inline-block;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

}



.club {

    border-color:var(--green);

}



.club .badge {

    background:var(--green-light);

    color:var(--green);

}



.exposition {

    border-color:var(--blue);

}



.exposition .badge {

    background:var(--blue-light);

    color:var(--blue);

}



.ffb {

    border-color:var(--orange);

}



.ffb .badge {

    background:var(--orange-light);

    color:var(--orange);

}



.congres {

    border-color:var(--purple);

}



.congres .badge {

    background:var(--purple-light);

    color:var(--purple);

}



.ag {

    border-color:var(--red);

}



.ag .badge {

    background:var(--red-light);

    color:var(--red);

}



/* ---------- Footer ---------- */


footer {

    text-align:center;

    color:var(--muted);

    padding:30px;

    font-size:14px;

}



/* ---------- Mobile ---------- */


@media(max-width:700px){


.hero {

    min-height:260px;

}


.hero h1 {

    font-size:30px;

}


.hero h2 {

    font-size:22px;

}


main {

    padding:20px 12px;

}


.events {

    grid-template-columns:1fr;

}


.controls button {

    width:100%;

}


}



/* ---------- Impression ---------- */


@media print {


.controls,
.search {

    display:none;

}


body {

    background:white;

}


.event {

    box-shadow:none;

    break-inside:avoid;

}


.hero {

    min-height:180px;

}


}