/* ============================================================
   App Travaux Maison — styles mobile-first
   ============================================================ */

:root {
    --couleur-fond: #f5f3ee;
    --couleur-carte: #ffffff;
    --couleur-texte: #26302a;
    --couleur-texte-clair: #6b756e;
    --couleur-primaire: #2f5d3a;
    --couleur-primaire-clair: #4a7c59;
    --couleur-danger: #a54a4a;
    --couleur-attention: #c98a2b;
    --couleur-bordure: #e1ddd2;
    --rayon: 10px;
    --ombre: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-size: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    line-height: 1.5;
}

a { color: var(--couleur-primaire); }

h1 { font-size: 1.5rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 0; }

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 1rem 4rem;
}

/* --- Barre de navigation ---------------------------------- */
.topbar {
    background: var(--couleur-primaire);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar__brand {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
}
.topbar__toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}
.topbar__nav {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.topbar__nav a {
    color: #fff;
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.92rem;
}
.topbar__nav a:hover { background: rgba(255,255,255,0.15); }
.topbar__logout { opacity: 0.85; }

@media (max-width: 720px) {
    .topbar__toggle { display: block; }
    .topbar__nav {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0;
        margin-top: 0.5rem;
    }
    .topbar__nav.topbar__nav--ouvert { display: flex; }
    .topbar__nav a { padding: 0.65rem 0.5rem; border-top: 1px solid rgba(255,255,255,0.15); }
}

/* --- Messages flash ----------------------------------------- */
.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--rayon);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.flash--succes { background: #e3f0e5; color: #2f5d3a; }
.flash--erreur { background: #f6e2e2; color: var(--couleur-danger); }

/* --- Boutons -------------------------------------------------- */
.btn {
    display: inline-block;
    border: none;
    border-radius: var(--rayon);
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    line-height: 1.2;
}
.btn--primaire, .btn--primary { background: var(--couleur-primaire); color: #fff; }
.btn--primaire:hover, .btn--primary:hover { background: #244a2e; }
.btn--secondaire { background: #eceae3; color: var(--couleur-texte); }
.btn--secondaire:hover { background: #ddd9cd; }
.btn--danger { background: #f6e2e2; color: var(--couleur-danger); }
.btn--danger:hover { background: #f0caca; }
.btn--petit { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.btn--block { display: block; width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Page de connexion ---------------------------------------- */
.page-login {
    background: linear-gradient(160deg, var(--couleur-primaire), #1c3d24);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.login-box {
    background: var(--couleur-carte);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.login-box h1 { text-align: center; margin-bottom: 0.25rem; }
.login-box__subtitle {
    text-align: center;
    color: var(--couleur-texte-clair);
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}
.login-box form { display: flex; flex-direction: column; gap: 0.9rem; }
.login-box label { font-size: 0.85rem; font-weight: 600; display: flex; flex-direction: column; gap: 0.3rem; }

/* --- Formulaires génériques ------------------------------------ */
form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}
input[type="text"], input[type="password"], input[type="date"],
input[type="search"], input[type="number"], input[type="file"],
input[type="color"], select, textarea {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 8px;
    background: #fff;
    color: var(--couleur-texte);
    width: 100%;
}
input[type="color"] { padding: 0.2rem; height: 2.6rem; width: 3.5rem; flex: none; }
textarea { resize: vertical; }

.form-tache, .form-inline { max-width: 640px; }
.form-tache__grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}
@media (max-width: 560px) {
    .form-tache__grille { grid-template-columns: 1fr; }
}
.form-tache__statut { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); padding: 0.75rem 1rem; margin-bottom: 0.9rem; }
.form-tache__statut legend { font-weight: 700; padding: 0 0.4rem; }
.radio-inline, .checkbox-inline { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; margin-right: 1rem; }
.radio-inline input, .checkbox-inline input { width: auto; }
.radio-group { margin-bottom: 0.75rem; }
.form-tache__recurrence { border: 1px dashed var(--couleur-primaire-clair); border-radius: var(--rayon); padding: 0.9rem 1rem; margin: 1rem 0; }
.form-tache__recurrence legend { font-weight: 700; padding: 0 0.4rem; }
.form-tache__recurrence-options { margin-top: 0.75rem; }
.form-tache__recurrence-options[hidden] { display: none; }
.mois-checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.form-tache__aide { font-size: 0.82rem; color: var(--couleur-texte-clair); margin: 0.25rem 0 0.5rem; }
.form-tache__photo-actuelle { max-width: 160px; border-radius: var(--rayon); display: block; margin: 0.4rem 0; }
.form-tache__actions { display: flex; gap: 0.6rem; margin-top: 1rem; }

.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.form-inline--ajout { margin-top: 0.6rem; }
.form-inline input[type="text"] { width: auto; flex: 1 1 160px; }

/* --- Sections tableau de bord ------------------------------- */
.section { margin-bottom: 2rem; }
.section__titre {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid var(--couleur-bordure);
    padding-bottom: 0.4rem;
    margin-bottom: 0.9rem;
}
.section__titre--retard { color: var(--couleur-danger); }
.section__titre--prevoir { color: var(--couleur-attention); }
.compteur {
    background: var(--couleur-bordure);
    color: var(--couleur-texte);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 700;
}
.etat-vide { color: var(--couleur-texte-clair); font-style: italic; }

.grille-taches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.9rem;
}

.carte-tache {
    background: var(--couleur-carte);
    border-radius: var(--rayon);
    padding: 1rem;
    box-shadow: var(--ombre);
    border-left: 4px solid var(--couleur-primaire-clair);
}
.carte-tache__entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.carte-tache__date { font-size: 0.82rem; color: var(--couleur-texte-clair); font-weight: 600; }
.carte-tache__titre { margin: 0 0 0.35rem; font-size: 1.05rem; }
.carte-tache__description { font-size: 0.88rem; color: var(--couleur-texte-clair); margin: 0 0 0.4rem; }
.carte-tache__meta { font-size: 0.82rem; color: var(--couleur-texte-clair); margin: 0 0 0.6rem; }
.carte-tache__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }

.badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--badge-couleur, var(--couleur-primaire-clair)) 18%, white);
    color: var(--badge-couleur, var(--couleur-primaire));
    border: 1px solid var(--badge-couleur, var(--couleur-primaire-clair));
}

.marquer-fait summary { list-style: none; cursor: pointer; }
.marquer-fait summary::-webkit-details-marker { display: none; }
.marquer-fait__form {
    margin-top: 0.6rem;
    padding: 0.75rem;
    background: #f7f5ef;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.marquer-fait__form label { margin-bottom: 0; }

/* --- Filtres / historique ------------------------------------ */
.filtres { background: var(--couleur-carte); padding: 1rem; border-radius: var(--rayon); box-shadow: var(--ombre); margin-bottom: 1rem; }
.filtres__ligne { margin-bottom: 0.6rem; }
.filtres__ligne--grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.6rem; }
.filtres__ligne--grille label { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.filtres__ligne--grille input { width: auto; flex: 1; }
.resultats-compteur { color: var(--couleur-texte-clair); font-size: 0.9rem; }

.liste-historique { display: flex; flex-direction: column; gap: 0.6rem; }
.ligne-tache {
    background: var(--couleur-carte);
    border-radius: var(--rayon);
    padding: 0.85rem 1rem;
    box-shadow: var(--ombre);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    justify-content: space-between;
}
.ligne-tache--fait { opacity: 0.85; }
.ligne-tache__principal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1 1 320px; }
.ligne-tache__utilisateur { font-size: 0.82rem; color: var(--couleur-texte-clair); }
.ligne-tache__photo { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.ligne-tache__actions { display: flex; gap: 0.4rem; }

.tag { display: inline-block; font-size: 0.78rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--couleur-bordure); }
.tag--fait { background: #e3f0e5; color: var(--couleur-primaire); }
.tag--a-faire { background: #fbeee0; color: var(--couleur-attention); }
.tag--budget { background: #fdf3d9; color: #8a6d1a; }

/* --- Catégories ------------------------------------------------ */
.page-intro { color: var(--couleur-texte-clair); font-size: 0.9rem; margin-top: -0.5rem; }
.categories-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.categorie-carte {
    background: var(--couleur-carte);
    border-radius: var(--rayon);
    padding: 1rem;
    box-shadow: var(--ombre);
    border-top: 4px solid var(--categorie-couleur, var(--couleur-primaire-clair));
}
.categorie-carte__entete { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; }
.categorie-carte__nom { font-weight: 700; flex: 1 1 120px; }
.categorie-carte--nouvelle { margin-top: 1.25rem; max-width: 480px; }
.sous-categories { list-style: none; padding: 0; margin: 0 0 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.sous-categories li { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.sous-categories form { display: flex; gap: 0.3rem; align-items: center; }
.sous-categories input[type="text"] { width: auto; flex: 1 1 100px; padding: 0.3rem 0.5rem; font-size: 0.9rem; }

/* --- Utilisateurs ------------------------------------------------ */
.liste-utilisateurs { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.5rem; }
.carte-utilisateur { background: var(--couleur-carte); border-radius: var(--rayon); padding: 0.85rem 1rem; box-shadow: var(--ombre); }
.carte-utilisateur--inactif { opacity: 0.6; }
.carte-utilisateur__entete { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.carte-utilisateur__login { color: var(--couleur-texte-clair); font-size: 0.85rem; }
.carte-utilisateur details { margin: 0.4rem 0; }
.carte-utilisateur details form { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.carte-utilisateur details input { width: auto; flex: 1; }