/* ===================== BASE ===================== */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:linear-gradient(180deg,#F3E8FF 0%,#D8B4FE 100%) fixed;min-height:100vh;display:flex;justify-content:center;align-items:center}

/* ===================== LOGIN ===================== */
.login-card{background:#fff;padding:40px;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.2);width:100%;max-width:380px;text-align:center;align-self:center;display:flex;flex-direction:column;align-items:center}
.login-card h1{color:#7C3AED;font-size:24px;margin-bottom:8px}
.login-card p{color:#888;font-size:14px;margin-bottom:28px}
input{width:100%;padding:14px;margin-bottom:16px;border:2px solid #e5e7eb;border-radius:10px;font-size:15px;outline:none;transition:border-color .2s}
input:focus{border-color:#7C3AED}
.btn{width:100%;padding:14px;background:#7C3AED;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer}
.btn:hover{background:#6D28D9}
#error-msg{color:#ef4444;margin-top:14px;font-size:14px;min-height:20px}

/* ===================== PASSWORD TOGGLE ===================== */
.pwd-wrapper{position:relative;width:100%;margin-bottom:16px}
.pwd-wrapper input{width:100%;margin-bottom:0;padding-right:44px}
.pwd-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;color:#9ca3af;padding:4px;line-height:1;-webkit-tap-highlight-color:transparent}
.pwd-toggle:hover{color:#7C3AED}

/* ===================== APP LAYOUT ===================== */
#app{display:none;flex-direction:column;width:100vw;min-height:100vh;background:#f3f4f6;overflow-x:hidden}
.topbar{background:#7C3AED;color:#fff;padding:0 24px;height:60px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;position:sticky;top:0;z-index:200}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-left h2{font-size:18px;font-weight:700;cursor:pointer;user-select:none}
.topbar-left h2:hover{opacity:.85}
.date-badge{background:rgba(255,255,255,.15);padding:6px 14px;border-radius:20px;font-size:13px}
.topbar-right{display:flex;align-items:center;gap:10px}
.icon-btn{background:rgba(255,255,255,.2);border:none;color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .2s;overflow:hidden;padding:0}
.icon-btn:hover{background:rgba(255,255,255,.35)}
.icon-btn img{width:38px;height:38px;object-fit:cover;border-radius:50%}

/* ===================== TAB PANES ===================== */
.tab-content-wrap{flex:1;overflow:hidden;position:relative}
.tab-pane{display:none;height:100%;overflow-y:auto}
.tab-pane.active{display:flex;flex-direction:column}

/* ===================== ACCUEIL ===================== */
.meteo-accueil-card{padding:14px 20px;cursor:pointer;transition:background .15s;max-width:600px;margin:0 auto}
.meteo-accueil-card:hover{background:#f8f5ff;border-radius:12px}

/* ===================== BOTTOM NAV ===================== */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:60px;background:#fff;border-top:1px solid #e5e7eb;display:flex;align-items:stretch;z-index:300;box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;cursor:pointer;padding:6px 4px;transition:color .15s;color:#9ca3af;-webkit-tap-highlight-color:transparent;position:relative}
.bn-item.active{color:#7C3AED}
.bn-item.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:3px;background:#7C3AED;border-radius:3px 3px 0 0}
.bn-icon{font-size:20px;line-height:1}
.bn-label{font-size:10px;font-weight:600;line-height:1}

/* ===================== GRID & WIDGETS ===================== */
.grid{flex:1;overflow-y:auto;padding:20px;padding-bottom:80px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-content:start}
@media(max-width:700px){
  .grid{grid-template-columns:1fr !important;padding:12px;padding-bottom:80px;gap:12px}
  .date-badge{display:none}
  .widget{min-width:0}
}
.widget{background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.07);cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s;position:relative;user-select:none;display:flex;flex-direction:column}
.widget:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.widget.dragging{opacity:.35;transform:scale(.96);box-shadow:0 2px 8px rgba(0,0,0,.1);cursor:grabbing}
.widget.drag-over{outline:3px dashed #7C3AED;outline-offset:3px;background:#f5f3ff;transform:translateY(-2px)}
.drag-handle{position:absolute;top:12px;right:44px;color:#d1d5db;font-size:15px;cursor:grab;padding:4px 6px;border-radius:4px;line-height:1;opacity:0;transition:opacity .15s}
.widget:hover .drag-handle{opacity:1}
.drag-handle:hover{color:#6b7280;background:#f3f4f6}
.wh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.whl{display:flex;align-items:center;gap:10px}
.wi{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;flex-shrink:0}
.wi img{width:40px;height:40px;object-fit:cover;border-radius:50%}
.wt{font-weight:700;font-size:15px;color:#333}
.wc{color:#666;font-size:14px;line-height:1.5;flex:1}
.wf{margin-top:12px;font-size:12px;color:#9ca3af;text-align:right;white-space:normal;word-break:break-word}
.rbtn{background:none;border:none;cursor:pointer;font-size:15px;padding:4px;border-radius:4px}
.rbtn:hover{background:#f3f4f6}

/* Widget couleurs */
.w-meteo .wi{background:#e0f2fe}
.w-priere .wi{background:#fef3c7}
.w-taches .wi{background:#d1fae5}
.w-rdv .wi,.w-rendezvous .wi{background:#ede9fe}
.w-planning .wi{background:#fee2e2}
.w-anniversaires .wi{background:#fce7f3}
.w-profil .wi{background:#f3f4f6}
.w-admin .wi{background:#fef3c7}
.w-islam .wi{background:#d1fae5}
.w-profil .wc{width:100%}
.w-profil .wi img,.icon-btn img{width:40px;height:40px;object-fit:cover;border-radius:50%}
.widget.w-rdv,.widget.w-rendezvous{background:linear-gradient(135deg,#f0f8ff 0%,#ffffff 100%)}
.widget.w-anniversaires{background:linear-gradient(135deg,#fff5f9 0%,#ffffff 100%)}
.widget.w-profil{background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%)}
.widget.w-islam{background:linear-gradient(135deg,#f0fdf4 0%,#ffffff 100%)}

/* ===================== OVERLAY & MODAL ===================== */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;justify-content:center;align-items:center}
.overlay.on{display:flex}
.modal{background:#fff;border-radius:20px;padding:30px;width:90%;max-width:560px;max-height:88vh;overflow-y:auto;position:relative}
.modal h3{font-size:20px;color:#333;margin-bottom:16px}
.modal p{color:#666;font-size:15px;line-height:1.6}
.mclos{position:absolute;top:16px;right:16px;background:#f3f4f6;border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:16px}
.mclos:hover{background:#e5e7eb}
.modal-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}

/* ===================== BOUTONS GÉNÉRIQUES ===================== */
.btn-save,.save-btn,.add-btn{padding:10px 14px;background:#7C3AED;color:#fff;border:none;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer}
.btn-save,.save-btn{flex:1}
.add-btn{width:100%;margin-bottom:16px}
.btn-save:hover,.save-btn:hover,.add-btn:hover{background:#6D28D9}
.btn-delete,.danger-btn{padding:10px 14px;background:#fee2e2;color:#ef4444;border:none;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer}
.btn-delete:hover,.danger-btn:hover{background:#ef4444;color:#fff}
.btn-cancel{padding:10px 14px;background:#f3f4f6;color:#666;border:none;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer}
.btn-cancel:hover{background:#e5e7eb}
.btn-edit-small{background:none;border:none;cursor:pointer;font-size:16px;padding:4px 6px;border-radius:4px;flex-shrink:0}
.btn-edit-small:hover{background:#f3f4f6}

/* ===================== FORMULAIRES GÉNÉRIQUES ===================== */
.form-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.form-row input,.form-row select{flex:1;min-width:100px;padding:10px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;outline:none;margin:0;background:#fff}
.form-row input:focus,.form-row select:focus{border-color:#7C3AED}
.section-title{font-size:13px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px}
.separateur{border:none;border-top:2px solid #f3f4f6;margin:20px 0}
.photo-circle{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #7C3AED;cursor:pointer;display:block;margin:0 auto 8px}
.initiales{width:96px;height:96px;border-radius:50%;background:#7C3AED;color:#fff;font-size:32px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;cursor:pointer}

/* ===================== LISTE ITEMS GÉNÉRIQUES ===================== */
.liste-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:8px}
.liste-item.faite{opacity:.5}
.liste-item.faite .item-titre{text-decoration:line-through}
.item-check{width:20px;height:20px;border-radius:50%;border:2px solid #7C3AED;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff}
.item-check.checked{background:#7C3AED;border-color:#7C3AED;color:#fff}
.item-info{flex:1;min-width:0}
.item-titre{font-weight:600;font-size:14px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-meta{font-size:12px;color:#9ca3af;margin-top:2px}
.item-del{background:none;border:none;cursor:pointer;color:#d1d5db;font-size:16px;padding:4px;flex-shrink:0}
.item-del:hover{color:#ef4444}
.badge-today{display:inline-block;background:#fef3c7;color:#d97706;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700;margin-left:6px}
.badge-recur{display:inline-block;background:#d1fae5;color:#059669;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700;margin-left:4px}

/* ===================== CROP PHOTO ===================== */
.crop-container{width:100%;max-height:300px;overflow:hidden;border-radius:10px;margin-bottom:12px;background:#000}
.crop-container img{max-width:100%;display:block}
.crop-actions{display:flex;gap:8px;margin-bottom:12px}
.crop-actions button{flex:1;padding:10px;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600}
.btn-crop-ok{background:#7C3AED;color:#fff}
.btn-crop-ok:hover{background:#6D28D9}
.btn-crop-cancel{background:#f3f4f6;color:#666}
.btn-crop-cancel:hover{background:#e5e7eb}

/* ===================== WIDGET PROFIL ===================== */
.profil-widget{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:100%}
.profil-widget-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #7C3AED;flex-shrink:0}
.profil-widget-initiales{width:64px;height:64px;border-radius:50%;background:#7C3AED;color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.profil-widget-nom{font-size:14px;font-weight:700;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.profil-widget-info{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.profil-widget-bio{font-size:12px;color:#9ca3af;line-height:1.4;max-height:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.profil-widget-btn{padding:7px 18px;background:#7C3AED;color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s;margin-top:4px}
.profil-widget-btn:hover{background:#6D28D9}

/* ===================== WIDGET TÂCHES ===================== */
.tache-widget-liste{display:flex;flex-direction:column;gap:4px}
.tache-widget-section{font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px;margin:6px 0 2px}
.tache-widget-item{display:flex;align-items:center;gap:8px;padding:3px 0}
.tache-widget-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tache-dot-today{background:#059669}
.tache-dot-futur{background:#6b7280}
.tache-dot-flott{background:#d1d5db}
.tache-widget-titre{font-size:13px;color:#333;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tache-widget-date{font-size:11px;color:#9ca3af;white-space:nowrap;flex-shrink:0}

/* ===================== WIDGET MÉTÉO ===================== */
.meteo-badge{background:#e0f2fe;color:#0369a1;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}
.ville-form{display:flex;gap:8px;margin-top:16px}
.ville-form input{flex:1;padding:10px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;margin:0}
.ville-form button{padding:10px 16px;background:#7C3AED;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;width:auto}
.geo-btn{width:100%;margin-top:8px;padding:10px;background:#10b981;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px}

/* ===================== WIDGET PRIÈRE ===================== */
.priere-txt{color:#444;font-size:16px;line-height:1.8;font-style:italic}
.priere-ref{color:#7C3AED;font-size:14px;font-weight:700;font-style:normal;margin-top:14px;display:block}
.priere-modal{display:flex;flex-direction:column;gap:12px}
.priere-titre-jour{font-size:15px;font-weight:700;color:#92400e;background:#fef3c7;padding:10px 14px;border-radius:10px;border-left:4px solid #d97706}
.priere-section-label{font-size:11px;font-weight:700;color:#7C3AED;text-transform:uppercase;letter-spacing:.5px}
.priere-texte-complet{font-size:13px;color:#444;line-height:1.7;font-style:italic;max-height:220px;overflow-y:auto;padding-right:4px}
.priere-texte-complet::-webkit-scrollbar{width:3px}
.priere-texte-complet::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:2px}
.priere-lecture1{border:1px solid #e5e7eb;border-radius:10px;padding:10px 14px;background:#f9fafb}
.priere-lecture1 summary{font-weight:600;color:#555;cursor:pointer;font-size:13px}
.priere-lecture1 .priere-texte-complet{max-height:150px}
.priere-source{font-size:11px;color:#9ca3af;text-align:right;margin-top:4px}

/* ===================== WIDGET ISLAM ===================== */
.islam-prochaine{display:flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,#059669,#10b981);border-radius:12px;padding:12px 16px;color:#fff;text-align:center}
.islam-prochaine-label{font-size:11px;opacity:.85;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.islam-prochaine-nom{font-size:18px;font-weight:800;margin:2px 0}
.islam-prochaine-heure{font-size:28px;font-weight:900;line-height:1}
.islam-prieres-row{display:flex;gap:4px;justify-content:space-between}
.islam-mini-priere{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:8px;background:#f0fdf4;flex:1;transition:background .2s}
.islam-mini-actif{background:#d1fae5;outline:2px solid #10b981}
.islam-mini-nom{font-size:9px;font-weight:700;color:#059669;text-transform:uppercase;letter-spacing:.3px}
.islam-mini-heure{font-size:11px;font-weight:700;color:#1e3a2f}
.islam-hadith-apercu{font-size:12px;color:#6b7280;font-style:italic;border-left:3px solid #10b981;padding-left:8px;line-height:1.5}
.islam-modal{display:flex;flex-direction:column;gap:16px}
.islam-modal-header{text-align:center}
.islam-modal-date{font-size:13px;color:#9ca3af;font-weight:600}
.islam-modal-titre-section{font-size:11px;font-weight:700;color:#059669;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.islam-modal-prieres{background:#f0fdf4;border-radius:12px;padding:14px}
.islam-modal-priere-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #d1fae5}
.islam-modal-priere-row:last-child{border-bottom:none}
.islam-modal-priere-actif{background:#d1fae5;border-radius:8px;padding:10px 8px;margin:0 -8px}
.islam-modal-priere-nom{flex:1;font-size:14px;font-weight:600;color:#1e3a2f}
.islam-modal-priere-heure{font-size:15px;font-weight:800;color:#059669}
.islam-modal-priere-badge{font-size:10px;background:#059669;color:#fff;padding:2px 8px;border-radius:12px;font-weight:700;margin-left:6px}
.islam-modal-hadith{background:#fefce8;border-radius:12px;padding:14px;border-left:4px solid #ca8a04}
.islam-modal-hadith-arabe{font-size:16px;color:#1e3a2f;text-align:right;line-height:2;margin-bottom:8px;font-family:serif}
.islam-modal-hadith-fr{font-size:13px;color:#555;font-style:italic;line-height:1.6}
.islam-modal-hadith-ref{font-size:11px;color:#9ca3af;margin-top:6px;text-align:right}
.islam-modal-doua{background:#f5f3ff;border-radius:12px;padding:14px;border-left:4px solid #7c3aed}
.islam-modal-doua-arabe{font-size:15px;color:#1e3a2f;text-align:right;line-height:2;margin-bottom:8px;font-family:serif}
.islam-modal-doua-fr{font-size:13px;color:#555;font-style:italic;line-height:1.6}

/* ===================== WIDGET CHOIX (opt-out) ===================== */
.widget-choix-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f3f4f6}
.widget-choix-item:last-child{border-bottom:none}
.widget-choix-label{flex:1;display:flex;align-items:center;gap:8px;font-size:14px;color:#333;font-weight:500;cursor:pointer}
.widget-choix-item input[type="checkbox"]{width:18px;height:18px;accent-color:#7C3AED;flex-shrink:0;margin:0;cursor:pointer}