/* ═══════════════════════════════════════════════════════════════════
   To do / Rappels — TABLEAU COMPACT (look validé par Bibi : police Inter,
   fond sable doux, pastilles pastel, badges d'échéance).
   Partie 1 : commun + SITE. Partie 2 : ajustements APP (html.app-mode).
   Auto-contenu : ne modifie ni index.min.css ni app-theme.css.
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Panneau sable qui contient tout (puces + tableau + ajout) ──── */
#todo-grid, #todo-grid *, #td-modal, #td-modal * { font-family: 'Inter', system-ui, sans-serif; }
#todo-grid {
  background: #F1EFE8; border-radius: 16px; padding: 12px;
  max-width: 760px; color: #444441;
}

/* ── Puces de filtre par liste ──────────────────────────────────── */
.td-filterbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.td-fchip {
  border: none; cursor: pointer; border-radius: 999px; padding: 6px 13px;
  font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  background: #fff; color: #5F5E5A;
}
.td-fchip.sel { box-shadow: inset 0 0 0 2px currentColor; }
.td-fchip-all.sel { background: #444441; color: #fff; box-shadow: none; }
.td-fchip-new, .td-fchip-edit {
  background: #fff; color: #888780; font-size: 14px; padding: 5px 11px;
}
.td-fchip-new:hover, .td-fchip-edit:hover { color: #444441; }
/* bascule afficher / masquer les tâches terminées (état « on » = terminées visibles) */
.td-fchip-done { background: #fff; color: #888780; font-weight: 500; }
.td-fchip-done.on { background: #EAE8E0; color: #5F5E5A; }
.td-fchip-done:hover { color: #444441; }

/* ── Tableau : une rangée fine = une tâche ──────────────────────── */
.td-table { background: #fff; border-radius: 12px; padding: 2px 10px; }
.td-empty { padding: 18px 10px; text-align: center; color: #888780; font-size: 13.5px; }
.td-row {
  display: grid; grid-template-columns: 18px calc(60% - 38px) minmax(0, 1fr) auto;
  align-items: center; gap: 0 10px; padding: 8px 2px; border-bottom: 1px solid #F1EFE8;
}
.td-row:last-child { border-bottom: none; }
/* colonnes alignées : case · texte · NOM DE LISTE (démarre ~60%) · badge d'échéance (à droite) */
.td-check   { grid-column: 1; }
.td-text    { grid-column: 2; }
.td-listcol { grid-column: 3; min-width: 0; }
.td-due     { grid-column: 4; justify-self: end; }
/* vue filtrée sur une liste : pas de colonne « liste » → texte large, badge à droite */
.td-table.td-nolist .td-row { grid-template-columns: 18px minmax(0, 1fr) auto; }
.td-table.td-nolist .td-due { grid-column: 3; }
/* case NOIRE comme la maquette ; faite = simple ✓ sans cadre */
.td-check {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px; cursor: pointer;
  border: 1.5px solid #2C2C2A; background: #fff; color: transparent;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0;
}
.td-row.done .td-check { border-color: transparent; background: transparent; color: #2C2C2A; }
.td-text { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 400; color: #2C2C2A; cursor: pointer; overflow-wrap: anywhere; }
.td-listcol { flex: 0 0 auto; min-width: 92px; font-size: 13.5px; font-weight: 500; }
.td-row.done .td-text { text-decoration: line-through; color: #B4B2A9; }
.td-row.done .td-listcol { opacity: .55; }
.td-due {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 600; border-radius: 8px;
  padding: 3px 8px; white-space: nowrap; line-height: 1;
}
.td-due.late  { background: #FCEBEB; color: #A32D2D; }
.td-due.today { background: #FAEEDA; color: #854F0B; }
.td-due.soon  { background: #FFF3CD; color: #8a6d1a; }
.td-due.norm  { background: #F1EFE8; color: #5F5E5A; }

/* ── Ajout rapide ───────────────────────────────────────────────── */
.td-add-row { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.td-add-input {
  flex: 1; min-width: 0; border: none; border-radius: 10px;
  padding: 0 12px; height: 34px; box-sizing: border-box; font-size: 13px; color: #444441; background: #fff;
}
.td-add-input::placeholder { color: #B4B2A9; }
.td-add-input:focus { outline: 2px solid #D3D1C7; }
.td-add-list {
  flex: 0 0 auto; max-width: 130px; border: none; border-radius: 10px;
  padding: 0 6px; height: 34px; box-sizing: border-box; font-size: 12px; color: #5F5E5A; background: #fff;
}
/* pastille date : 📅 (puis la date choisie), l'input natif invisible par-dessus ouvre le sélecteur */
.td-add-cal {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 10px; padding: 0; font-size: 13px; color: #888780;
  cursor: pointer; width: 68px; min-width: 68px; height: 34px; box-sizing: border-box; line-height: 1;
}
.td-add-date-real { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.td-add-btn {
  flex: 0 0 auto; width: 34px; height: 34px; box-sizing: border-box; border: none; border-radius: 10px; cursor: pointer;
  background: #444441; color: #fff; font-size: 18px; font-weight: 600; line-height: 1;
}

/* ── Widget « Rappels » ─────────────────────────────────────────────
   MASQUÉ sur le SITE (la colonne de droite est exactement pleine — leçon
   du 10 juin). Il ne s'affiche qu'en mode APP, où todo.js le déplace
   dans le fil de l'Accueil. */
#todo-widget { display: none; }
.tw-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.tw-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.tw-text { flex: 1; min-width: 0; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-more { font-size: .72rem; opacity: .6; padding: 3px 2px 0; }

/* ── Modale ─────────────────────────────────────────────────────── */
.td-modal-overlay {
  position: fixed; inset: 0; z-index: 9600; display: none;
  align-items: center; justify-content: center;
  background: rgba(68, 68, 65, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.td-modal-overlay.open { display: flex; }
.td-modal-box {
  background: #fff; border-radius: 18px; width: 92%; max-width: 400px;
  max-height: 82vh; overflow-y: auto; padding: 20px 18px 16px;
  box-shadow: 0 18px 50px rgba(44, 44, 42, .3); color: #444441;
}
.td-m-title { font-size: 16px; font-weight: 700; color: #2C2C2A; margin-bottom: 12px; }
.td-m-msg { font-size: 13.5px; color: #5F5E5A; line-height: 1.45; margin-bottom: 14px; }
.td-m-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #888780; margin: 12px 0 5px; }
.td-m-input {
  width: 100%; box-sizing: border-box; border: 1.5px solid #D3D1C7; border-radius: 10px;
  padding: 9px 11px; font-size: 14px; color: #2C2C2A; background: #FBFAF7;
}
.td-m-input:focus { outline: none; border-color: #888780; }
.td-emoji-row, .td-color-row, .td-chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.td-emoji-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 2px solid transparent; cursor: pointer;
  background: #F1EFE8; font-size: 17px; line-height: 1; padding: 0;
}
.td-emoji-btn.sel { border-color: #444441; background: #fff; }
.td-color-dot { width: 28px; height: 28px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; }
.td-color-dot.sel { border-color: #2C2C2A; }
/* rond « couleur personnalisée » = input type=color déguisé en pastille ronde,
   affiché en PALETTE multicolore (le dégradé arc-en-ciel signale « choisis ta couleur ») */
.td-color-custom {
  -webkit-appearance: none; appearance: none; padding: 0;
  background: conic-gradient(from 90deg, #ff5f6d, #ffc371, #f9f586, #7afcb4, #4facfe, #b06ab3, #ff5f6d);
}
.td-color-custom::-webkit-color-swatch-wrapper { padding: 0; }
.td-color-custom::-webkit-color-swatch {
  border: none; border-radius: 50%;
  background: conic-gradient(from 90deg, #ff5f6d, #ffc371, #f9f586, #7afcb4, #4facfe, #b06ab3, #ff5f6d) !important;
}
.td-color-custom::-moz-color-swatch {
  border: none; border-radius: 50%;
  background: conic-gradient(from 90deg, #ff5f6d, #ffc371, #f9f586, #7afcb4, #4facfe, #b06ab3, #ff5f6d) !important;
}
/* champ icône perso : input + aperçu */
.td-icon-row { display: flex; gap: 8px; align-items: center; }
.td-icon-prev { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; background: #F1EFE8; flex: 0 0 auto; }
/* petite icône d'une liste (image perso) sur les puces / chips */
.td-list-ico { width: 15px; height: 15px; border-radius: 4px; object-fit: cover; vertical-align: -3px; margin-right: 5px; display: inline-block; }
.td-list-chip {
  border: 2px solid transparent; cursor: pointer; border-radius: 999px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
}
.td-list-chip.sel { border-color: currentColor; }
.td-m-btns { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
.td-btn-no, .td-btn-yes, .td-btn-danger {
  border: none; cursor: pointer; border-radius: 999px; padding: 9px 18px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.td-btn-no { background: #F1EFE8; color: #5F5E5A; }
.td-btn-yes { background: #444441; color: #fff; }
.td-btn-danger { background: #FCEBEB; color: #A32D2D; }

/* ═══════════════════════════════════════════════════════════════════
   Partie 2 — APP (html.app-mode) : même look, ajusté à l'écran iPhone
═══════════════════════════════════════════════════════════════════ */
html.app-mode #todo-grid, html.app-mode #todo-grid *,
html.app-mode #td-modal, html.app-mode #td-modal * { font-family: 'Inter', system-ui, sans-serif !important; }

/* FOND DE PAGE sable doux (le titre « To do » et sa mise en page ne bougent pas) */
html.app-mode body.todo-active { background: #F1EFE8 !important; }
html.app-mode body.todo-active::before { background: #F1EFE8 !important; }
/* le panneau devient transparent : puces + table + ajout posés directement sur le sable */
html.app-mode #todo-grid { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }

/* puce « Toutes » sélectionnée = blanche cerclée de noir (comme la maquette) */
html.app-mode .td-fchip-all.sel { background: #fff !important; color: #2C2C2A !important; box-shadow: inset 0 0 0 1.5px #2C2C2A !important; }
html.app-mode .td-fchip { padding: 5px 11px !important; font-size: 12px !important; font-weight: 500 !important; }
html.app-mode .td-filterbar { gap: 5px !important; margin-bottom: 8px !important; }

/* rangées en GRILLE — MESURES DE LA MAQUETTE : rangée ~26px, texte 12px/400 noir,
   case 14px, interlignes fins. Colonnes liste/badge FIXES → alignement net. */
html.app-mode .td-table { border-radius: 12px !important; padding: 2px 10px !important; }
html.app-mode .td-row {
  display: grid !important; grid-template-columns: 18px minmax(0, 1fr) 74px 64px !important;
  gap: 4px 7px !important; align-items: center !important; padding: 5px 2px !important;
}
html.app-mode .td-check { grid-column: 1; width: 14px !important; height: 14px !important; font-size: 11px !important; border-width: 1.3px !important; border-radius: 3.5px !important; }
html.app-mode .td-text { grid-column: 2; font-size: 12px !important; font-weight: 400 !important; color: #18181a !important; line-height: 1.35 !important; }
html.app-mode .td-row.done .td-text { color: #B4B2A9 !important; }
html.app-mode .td-listcol { grid-column: 3; min-width: 0 !important; font-size: 12px !important; font-weight: 500 !important; overflow-wrap: anywhere; }
html.app-mode .td-due { grid-column: 4; justify-self: end; font-size: 11px !important; font-weight: 500 !important; padding: 3px 7px !important; border-radius: 8px !important; }
/* vue filtrée sur une liste : pas de colonne « liste » → le badge prend la 3e colonne */
html.app-mode .td-table.td-nolist .td-row { grid-template-columns: 18px minmax(0, 1fr) 64px !important; }
html.app-mode .td-table.td-nolist .td-due { grid-column: 3; }

/* ajout : tous les champs à HAUTEUR FIXE 32px + box-sizing border-box ; le champ texte garde
   sa taille au focus (le viewport PWA bloque déjà le zoom iOS → plus besoin de l'agrandir). */
html.app-mode .td-add-row { gap: 5px !important; margin-top: 8px !important; align-items: center !important; }
html.app-mode .td-add-input,
html.app-mode .td-add-list,
html.app-mode .td-add-cal,
html.app-mode .td-add-btn { height: 32px !important; box-sizing: border-box !important; border-radius: 9px !important; }
html.app-mode .td-add-input { font-size: 12.5px !important; padding: 0 10px !important; }
html.app-mode .td-m-input { font-size: 16px !important; }
html.app-mode .td-add-btn { width: 32px !important; font-size: 15px !important; padding: 0 !important; }
html.app-mode .td-add-list { font-size: 11.5px !important; padding: 0 6px !important; max-width: 104px !important; }
/* pastille date : largeur FIXE, assez large pour bien lire « 10/02/25 » en entier */
html.app-mode .td-add-cal { width: 70px !important; min-width: 70px !important; padding: 0 !important; font-size: 12px !important; }
html.app-mode .td-modal-box { border-radius: 20px !important; }

/* widget déplacé sur l'Accueil app par todo.js : carte blanche comme les autres blocs
   (display:block = ré-affiché ici, car masqué côté site) */
html.app-mode #todo-widget {
  display: block !important; cursor: pointer !important;
  background: #fff !important; border-radius: 18px !important; padding: 14px 16px !important;
  box-shadow: 0 10px 26px rgba(150, 130, 170, .16) !important; margin: 0 0 14px !important;
  border: none !important;
}
html.app-mode #todo-widget .agenda-day-label {
  font-size: 17px !important; font-weight: 700 !important; color: var(--ink, #5d5566) !important;
  letter-spacing: -.3px !important; text-transform: none !important; margin-bottom: 8px !important;
}
/* pastille icône (carré arrondi peach) à la place de l'emoji ✅ — MÊME style que les autres blocs.
   Le carré générique (34×34, radius 11px) vient d'app-theme.css ; todo.js injecte le SVG checklist
   dans .app-block-ico, on ne fait ici que teinter le fond en peach (accent du widget). */
html.app-mode #todo-widget .app-block-ico { background: var(--peach-bg, #FFE7D2) !important; }
html.app-mode .tw-row { padding: 3.6px 2px !important; }   /* écart entre lignes réduit de 40% (6→3.6) */
html.app-mode .tw-text { font-size: 15px !important; font-weight: 600 !important; color: var(--ink, #5d5566) !important; }