/* =====================================================
   🍂 THEME AUTOMNE – FUN / CARTOON COMPLET
   ===================================================== */

/* ===== Variables ===== */
:root {
    --brown: #8d5524;
    --brown-dark: #6f3f1d;
    --orange: #f39c12;
    --orange-dark: #d35400;
    --red: #c0392b;
    --gold: #f1c40f;
    --beige: #fff3dc;
    --white: #ffffff;
    --text: #3a2f28;
    --shadow: rgba(0,0,0,.18);
}

/* ===== Page ===== */
.page {
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    position: relative;
    overflow-x: hidden;
}

/* ===== Feuilles flottantes ===== */
@keyframes leaves {
    from { background-position: 0 0; }
    to   { background-position: 0 300px; }
}

.page::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(#d35400 2px, transparent 3px),
        radial-gradient(#f1c40f 1px, transparent 2px);
    background-size: 70px 70px, 40px 40px;
    opacity: .3;
    animation: leaves 20s linear infinite;
}

/* ===== Carte ===== */
.card {
    width: 100%;
    max-width: 900px;
    background: var(--beige);
    border-radius: 30px;
    padding: 32px;
    border: 5px solid var(--white);
    box-shadow:
        0 14px 0 rgba(0,0,0,.18),
        0 30px 0 rgba(0,0,0,.08);
    position: relative;
}

/* Feuille décorative */
.card::before {
    content: "🍁";
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%) rotate(-10deg);
    font-size: 52px;
    z-index: 2;
}

/* ===== Titre ===== */
.card h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 28px;
    color: var(--orange-dark);
    text-shadow: 2px 2px 0 var(--white);
}

/* ===== Tableau ===== */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 24px;
    overflow: hidden;
    border: 4px solid var(--brown);
    background: #fff;
}

tr {
    border-bottom: 4px solid var(--brown);
}

tr:last-child {
    border-bottom: none;
}

th,
td {
    padding: 14px 16px;
    border: 3px solid var(--brown);
    vertical-align: middle;
}

th {
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .05em;
}

td {
    background: #fff;
    color: var(--text);
}

/* ===== Inputs ===== */
table input[type="text"] {
    width: 100%;
    padding: 8px 14px;
    border-radius: 999px;
    border: 3px solid var(--brown);
    font-size: 14px;
}

table input[type="text"]:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(243,156,18,.35);
}

/* ===== Select ===== */
select {
    margin-bottom: 20px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 3px solid var(--brown);
    font-weight: 700;
}

/* ===== Actions ===== */
.actions {
    display: flex;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
}

/* ===== Boutons ===== */
button {
    padding: 12px 28px;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 800;
    border: 4px solid var(--white);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* Icônes */
button::before {
    margin-right: 8px;
}

/* Sauvegarder */
button[name="save"] {
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff;
    box-shadow: 0 6px 0 #a84300;
}
button[name="save"]::before { content: "🍂"; }

/* Secondaire */
button[type="button"] {
    background: linear-gradient(135deg, var(--brown), var(--brown-dark));
    color: #fff;
    box-shadow: 0 6px 0 #4e2a12;
}
button[type="button"]::before { content: "🌰"; }

/* Danger */
button.delete {
    background: linear-gradient(135deg, #ffd6d6, #ffb3b3);
    color: #7a1f1f;
    box-shadow: 0 6px 0 #c45a5a;
}
button.delete::before { content: "🗑️"; }

/* ===== Animation rebond ===== */
@keyframes bounce {
    0% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
    60% { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

button:hover {
    animation: bounce .4s ease;
}

/* ===== Toasts ===== */
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-8px);
    transition: all .3s ease;
}

.toast.success {
    background: #fff6e5;
    color: #8d5524;
    border: 3px solid var(--orange);
}

.toast.danger {
    background: #fff0f0;
    color: #c0392b;
    border: 3px solid var(--red);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Confirmation ===== */
.confirm-box {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    z-index: 9998;
}

.confirm-box > div {
    background: var(--beige);
    padding: 24px 28px;
    border-radius: 26px;
    border: 4px solid var(--white);
    box-shadow: 0 10px 0 rgba(0,0,0,.25);
    animation: pop .25s ease;
}

@keyframes pop {
    from { transform: scale(.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .card {
        padding: 22px;
        border-radius: 24px;
    }

    table,
    tr,
    th,
    td {
        display: block;
    }

    th {
        background: none;
        color: var(--brown-dark);
        border: none;
        padding-bottom: 6px;
    }
}