:root {
    /* Couleurs légèrement plus foncées et chaleureuses */
    --primary: #756054;       
    --primary-hover: #5A483E; 
    --secondary: #8A9D8D;     
    --bg-app: #EFE9E2;        /* Fond un peu plus dense */
    --surface: #FCFBF9;       
    --text-main: #2C2522;     
    --text-cool: #635851;     
    --green-status: #586B52;  
    --orange-status: #BA5010; 
    --radius-lg: 16px;
    --radius-md: 10px;
    --shadow-soft: 0 4px 15px rgba(44, 37, 34, 0.08); 
}

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

body, h1, h2, h3, p, ul, li { margin: 0; padding: 0; }
/* Maintien de votre structure 90% */
body { background-color: var(--bg-app); color: var(--text-main); padding: 15px; max-width: 90%; margin: 0 auto; padding-bottom: 60px; }

/* ---- BANNIÈRE ---- */
.cartoon-banner { background: linear-gradient(135deg, var(--surface), #E5DDD5); border: 1px solid #DCD3CB; border-radius: var(--radius-lg); padding: 25px 20px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-soft); }
.banner-title h1 { margin: 0; font-size: 1.4rem; color: var(--primary); font-weight: 800; }
.banner-title p { margin: 4px 0 0 0; font-size: 0.85rem; color: var(--text-cool); font-weight: 500; }
.banner-decor-right { font-size: 2.2rem; opacity: 0.8; }

/* ---- EN-TÊTE & INPUTS ---- */
.main-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; gap: 15px; flex-wrap: wrap; }
.header-left { display: flex; gap: 10px; flex: 1; align-items: center; flex-wrap: wrap; }

input[type="month"], input[type="date"], input[type="text"], input[type="number"], input[type="password"], select, textarea {
    padding: 12px 16px; border: 1px solid #DCD3CB; border-radius: var(--radius-md);
    font-size: 0.95rem; color: var(--text-main); background-color: var(--surface);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); outline: none; transition: border-color 0.2s; width: 100%;
}
textarea { resize: vertical; min-height: 80px; font-family: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
.header-left input[type="text"] { width: 100%; max-width: 250px; cursor: pointer; font-weight: 600; }

.btn-logout { background-color: var(--surface); color: var(--text-cool); border: 1px solid #DCD3CB; text-decoration: none; font-weight: 600; padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.85rem; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.2s; }
.btn-logout:hover { color: var(--primary); border-color: var(--primary); }

/* ---- TABLEAU DE BORD ---- */
.dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px; }
.card { background: var(--surface); padding: 20px 10px; border-radius: var(--radius-lg); text-align: center; border: 1px solid #DCD3CB; box-shadow: var(--shadow-soft); }
.bubble-card-blue { border-top: 4px solid var(--primary); }
.bubble-card-green { border-top: 4px solid var(--green-status); }
.bubble-card-orange { border-top: 4px solid var(--orange-status); }
.card strong { font-size: 1.3rem; display: block; margin-top: 8px; font-weight: 800; }
.bubble-card-blue strong { color: var(--primary); }
.bubble-card-green strong { color: var(--green-status); }
.bubble-card-orange strong { color: var(--orange-status); }
.label { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--text-cool); letter-spacing: 0.5px; }

/* ---- BOUTONS & OUTILS ---- */
.actions { display: flex; gap: 12px; margin-bottom: 15px; }
.btn { padding: 14px; border: none; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-soft); transition: all 0.2s; }
.btn:active { transform: scale(0.98); }
.btn-primary { background-color: var(--primary); color: white; flex: 2; }
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-secondary { background-color: var(--surface); color: var(--primary); border: 1px solid var(--primary); flex: 1.5; }
.btn-config { background-color: var(--surface); color: var(--text-cool); border: 1px solid #DCD3CB; flex: 1; }
.btn-full { width: 100%; margin-top: 15px; }

.action-tools { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.btn-tool { background: var(--bg-app); border: 1px solid #DCD3CB; border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; color: var(--text-main); text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.btn-tool:hover { background: #E5DDD5; }
.btn-whatsapp { background: #EAF4EA; color: #4B6E4B; border-color: #C3DFC3; }
.btn-whatsapp:hover { background: #DDF0DD; }

/* ---- ONGLETS ---- */
.tabs { display: flex; gap: 8px; margin-bottom: 25px; background: #E5DDD5; padding: 5px; border-radius: var(--radius-md); overflow-x: auto; }
.tab-btn { background: transparent; border: none; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-cool); cursor: pointer; padding: 10px; flex: 1; min-width: max-content; transition: all 0.2s; }
.tab-btn.active { background-color: var(--surface); color: var(--primary); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

/* ---- CARTES ---- */
.list-container { display: flex; flex-direction: column; gap: 15px; }
.date-group-header { font-weight: 800; color: var(--primary); margin: 15px 0 5px 0; border-bottom: 2px solid #DCD3CB; padding-bottom: 5px; font-size: 1.1rem; text-transform: capitalize; }
.item-card { background: var(--surface); padding: 20px; border-radius: var(--radius-lg); display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-soft); border: 1px solid #DCD3CB; gap: 15px; }
.item-info { flex: 1; }
.item-info h3 { margin: 0 0 5px 0; font-size: 1.1rem; font-weight: 700; color: var(--text-main); }
.item-info p { margin: 0; font-size: 0.9rem; color: var(--text-cool); line-height: 1.4; }
.card-right-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.intervention-actions { display: flex; gap: 8px; }
.btn-icon { background: var(--bg-app); border: 1px solid #DCD3CB; border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: background 0.15s; color: var(--text-cool); }
.btn-icon:hover { background: #E5DDD5; color: var(--primary); }
.btn-icon-delete { color: var(--orange-status); }

.status-toggle { display: flex; align-items: center; gap: 10px; background: var(--bg-app); padding: 8px 15px; border-radius: 30px; border: 1px solid #DCD3CB; }
.status-toggle span { font-weight: 600; font-size: 0.8rem; color: var(--text-cool); }
.checkbox-wrapper { position: relative; width: 20px; height: 20px; }
.checkbox-wrapper input { position: absolute; opacity: 0; cursor: pointer; width: 0; height: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: var(--surface); border: 2px solid #C4B9B1; border-radius: 5px; transition: all 0.2s; }
.checkbox-wrapper input:checked ~ .checkmark { background-color: var(--green-status); border-color: var(--green-status); }
.checkmark:after { content: ""; position: absolute; display: none; }
.checkbox-wrapper input:checked ~ .checkmark:after { display: block; }
.checkbox-wrapper .checkmark:after { left: 6px; top: 2px; width: 4px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.note-text { font-size: 0.85rem; color: var(--text-cool); margin-top: 10px; display: inline-block; background: var(--bg-app); padding: 8px 15px; border-radius: 8px; width: 100%; border-left: 3px solid var(--primary); }

/* ---- CALENDRIER GRID ---- */
.calendar-container { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 20px; border: 1px solid #DCD3CB; }
.calendar-grid-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 700; font-size: 0.8rem; color: var(--text-cool); margin-bottom: 15px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.calendar-day { aspect-ratio: 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; font-weight: 600; font-size: 0.95rem; background: var(--bg-app); position: relative; cursor: pointer; border: 1px solid transparent; transition: all 0.2s; }
.calendar-day:hover { background: #E5DDD5; }
.calendar-day.today { border-color: var(--primary); color: var(--primary); font-weight: 800; background: var(--bg-app); }
.calendar-day.empty { background: transparent; pointer-events: none; }
.day-dots { display: flex; gap: 3px; position: absolute; bottom: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; }
.dot-pending { background: var(--orange-status); }
.dot-paid { background: var(--green-status); }

/* ---- ADMIN & LOGS ---- */
.admin-section { background: var(--surface); padding: 20px; border-radius: var(--radius-lg); border: 1px solid #DCD3CB; margin-bottom: 20px; box-shadow: var(--shadow-soft);}
.admin-section h3 { color: var(--primary); margin-bottom: 15px; font-size: 1.1rem;}
.log-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.log-table th, .log-table td { text-align: left; padding: 10px; border-bottom: 1px solid #E5DDD5; }
.log-table th { color: var(--text-cool); text-transform: uppercase; font-size: 0.75rem; }
.badge-role { background: var(--primary); color: white; padding: 3px 8px; border-radius: 10px; font-size: 0.7rem; }
.badge-role.member { background: var(--secondary); }

/* ---- MODALES & TOAST ---- */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44, 37, 34, 0.7); align-items: flex-end; z-index: 1000; overflow-y: auto;}
.modal-content { background: var(--surface); width: 100%; padding: 30px 25px; border-radius: 24px 24px 0 0; position: relative; box-shadow: 0 -10px 40px rgba(0,0,0,0.2); animation: slideUp 0.3s ease-out; max-width: 800px; margin: 0 auto; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.close { position: absolute; top: 20px; right: 25px; font-size: 1.8rem; color: var(--text-cool); cursor: pointer; }
h2 { margin-top: 0; color: var(--text-main); font-size: 1.3rem; font-weight: 800; margin-bottom: 20px; }
label { display: block; font-weight: 600; margin-bottom: 8px; margin-top: 15px; font-size: 0.9rem; color: var(--text-main); }
.toast { visibility: hidden; min-width: 250px; background-color: var(--primary); color: #fff; text-align: center; border-radius: 30px; padding: 15px 25px; position: fixed; z-index: 1100; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 0.95rem; font-weight: 600; box-shadow: 0 5px 15px rgba(117, 96, 84, 0.4); opacity: 0; transition: opacity 0.3s, bottom 0.3s; }
.toast.show { visibility: visible; opacity: 1; bottom: 50px; }

/* ---- VERROUILLAGE ---- */
.login-body { background: var(--bg-app); display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }
.login-container { width: 100%; max-width: 380px; padding: 20px; }
.login-card { background: var(--surface); border-radius: var(--radius-lg); padding: 40px 30px; text-align: center; box-shadow: var(--shadow-soft); border: 1px solid #DCD3CB; }
.cartoon-avatar { font-size: 2.5rem; background: var(--bg-app); width: 80px; height: 80px; line-height: 80px; margin: 0 auto 25px auto; border-radius: 50%; color: var(--primary); }
.login-card h2 { font-size: 1.5rem; color: var(--primary); margin-bottom: 10px; }
.login-card p { color: var(--text-cool); font-size: 0.95rem; margin-bottom: 25px; }
.login-error { color: var(--orange-status); font-weight: 600; font-size: 0.9rem; margin-bottom: 15px; }

/* ---- CALENDRIER FLATPICKR ---- */
.flatpickr-calendar { font-family: inherit !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-soft) !important; border: 1px solid #DCD3CB !important; background: var(--surface) !important; z-index: 10005 !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--primary) !important; border-color: var(--primary) !important; color: white !important; }
.flatpickr-day:hover { background: #E5DDD5 !important; border-color: transparent !important; }
.flatpickr-input[readonly] { cursor: pointer; background-color: var(--surface) !important; }

/* =======================================================
   📲 ADAPTATION MOBILE AVANCÉE (SMARTPHONES) 
======================================================= */
@media (max-width: 650px) {
    body { max-width: 100%; padding: 10px; }
    .dashboard { grid-template-columns: 1fr; gap: 10px; }
    .actions { flex-direction: column; gap: 8px; }
    .btn { width: 100%; margin: 0; }
    .header-left { flex-direction: column; align-items: stretch; }
    .header-left input[type="text"] { max-width: 100%; }
    .btn-logout { text-align: center; margin-top: 10px; }
    .item-card { flex-direction: column; align-items: stretch; padding: 15px; gap: 15px; }
    .card-right-actions { align-items: flex-start; }
    .status-toggle { width: 100%; justify-content: space-between; margin-bottom: 10px; }
    .intervention-actions { width: 100%; justify-content: flex-end; }
    .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 5px;}
    .tab-btn { flex: 0 0 auto; padding: 10px 15px; }
    
    /* MODIFICATION CALENDRIER MOBILE : Marqueur unique au lieu des ronds multiples */
    .day-dots .dot { display: none; } /* Cache les points individuels */
    .day-dots:has(.dot) {
        /* Affiche une petite barre générique sous le jour s'il y a des interventions */
        width: 12px; height: 3px; background-color: var(--primary); border-radius: 2px;
    }
}