/* Rappels et tâches (lot 3 de la phase UX Mac, aussi sur iPhone) : section Rappels d'Aujourd'hui sur iPhone, rappels
   liés dans la fiche d'une vente. Le rond se coche comme dans l'app Rappels ; rouge quand le rappel est en retard. */
.rappels .rp { display: flex; align-items: center; padding: 0 0 0 var(--s-4); }
.rappels li + li { border-top: 1px solid var(--line); }
.rp-chk { flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--text-3); background: transparent; color: transparent; display: grid; place-items: center; cursor: pointer; }
.rp-chk.late { border-color: var(--red); }
.rp-chk:active { background: var(--green); border-color: var(--green); color: #fff; }
/* Marges dans le bouton (et non sur la ligne) : la copie soulevée par l'appui long garde son air */
.rp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; min-height: 56px; justify-content: center; padding: 8px var(--s-4) 8px 12px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rp-main .row-title, .rp-main .row-sub { white-space: normal; overflow-wrap: anywhere; }
.rp-more { display: block; margin: var(--s-2) auto 0; }
.rp-empty { margin: 0 4px; }
.tk-link { gap: 12px; }
.tk-ring { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--text-3); }

/* ---- Rappels comme l'app Rappels d'Apple (schéma 17, 28/09/2026) ---- */
/* Couleurs des listes et des tuiles : --c porte la couleur de la liste */
.c-blue, .bg-blue { --c: var(--blue); } .c-pink, .bg-pink { --c: var(--pink); } .c-slate, .bg-slate { --c: var(--slate); }
.c-orange, .bg-orange { --c: var(--orange); } .c-red, .bg-red { --c: var(--red); } .c-teal, .bg-teal { --c: var(--teal); }
.rpd-h > *, .rpm-head > * { color: var(--c, var(--text)); }

/* Lignes : icône choisie, priorité, notes, tags, drapeau, rappel coché */
.tk-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; }
.tk-prio { color: var(--accent); font-weight: 800; }
.tk-tag { color: var(--accent); }
.tk-flag { flex: none; color: var(--orange); display: grid; place-items: center; padding: 0 4px; }
.tk-note { font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.rp-chk.done { background: var(--accent-bg); border-color: var(--accent-bg); color: #fff; }
.rp-chk.sm { width: 20px; height: 20px; border-width: 1.5px; }
.rp-chk.ghost { border-style: dashed; color: var(--text-3); }
.rappels .rp .tk-ic { margin-left: 10px; }
.rappels .rp .tk-flag { padding-right: var(--s-4); }
.rp-auto { padding-left: var(--s-4); }
.rp-auto .rp-main { padding-left: 12px; }
.row-sub .icon { display: inline-block; vertical-align: -1px; }
/* Titres et détails des rappels sur plusieurs lignes plutôt que coupés (comme l'app Rappels) */
.drow.task .row-title, .drow.task .row-sub, .rappels .rp-main .row-title, .rappels .rp-main .row-sub { white-space: normal; overflow-wrap: anywhere; }

/* Éditeur d'un rappel (panneau du Mac, feuille de l'iPhone), rangé comme la fenêtre « i » de l'app Rappels */
.te { display: grid; gap: 6px; }
.te-err { margin: 0 0 8px; }
.te-g { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.te-g > * + * { border-top: 1px solid var(--line); }
.te-h { margin: 12px 4px 2px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.te-cap { margin: 0 4px 4px; font-size: 12px; color: var(--text-3); line-height: 1.4; }
.te-main .input { width: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 10px 12px; min-height: 0; }
.te-main .input:focus { background: var(--fill); box-shadow: none; }
.te-main .te-title { font-size: 17px; font-weight: 650; }
.te-main .te-notes { resize: vertical; min-height: 44px; font-size: 14px; }
.te-main .te-url { font-size: 13px; color: var(--accent); }
.te-row { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px; }
.te-ic { flex: none; width: 28px; height: 28px; border-radius: 7px; }
.te-l { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; }
.te-l small { font-size: 12.5px; color: var(--accent); }
.te-l small.txt-red { color: var(--red); } .te-l small.txt-amber { color: var(--amber); }
.te-row .select { flex: none; max-width: 60%; }
.te-sub { padding: 8px 12px 12px 50px; }
.te-sub > .input { width: 100%; }
.te-sub.flush { padding-left: 12px; }
.te-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.te-chips .chip, .te-tags .chip { min-height: 28px; padding: 0 10px; font-size: 13px; }
.te-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.te-tags .te-tag-in { width: 150px; min-height: 30px; height: 30px; padding: 0 10px; font-size: 13px; }
.te-subt { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 14px; }
.te-subt .input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 6px 0; min-height: 34px; }
.te-x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; }
.te-x:hover { background: var(--fill); color: var(--text); }

/* Répétition personnalisée */
.rpe { display: grid; gap: 10px; }
.rpe-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rpe-l { min-width: 76px; font-size: 14px; color: var(--text-2); }
.rpe-n { width: 64px; text-align: center; }
.rpe-chk { font-size: 14px; }
.rpe-grid { display: grid; gap: 4px; }
.rpe-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rpe-31 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rpe-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rpe-b { min-height: 32px; padding: 0 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.rpe-b.on { background: var(--accent-bg); border-color: transparent; color: var(--on-accent, #fff); font-weight: 650; }
.rpe-sum { margin: 0; }

/* Icône et couleur */
.ipk { display: grid; gap: 10px; }
.ipk-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.ipk-c { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; }
.ipk-c.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c); }
.ipk-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; }
.ipk-i { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: var(--fill); color: var(--text-2); cursor: pointer; }
.ipk-i.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }

/* Tuiles des listes (Mac et iPhone), comme l'app Rappels */
.rpt { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 6px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rpt-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.rpt b { justify-self: end; font-size: 21px; font-weight: 750; }
.rpt-l { grid-column: 1 / -1; font-size: 13.5px; font-weight: 650; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt.on { background: var(--c); border-color: transparent; color: #fff; }
.rpt.on .rpt-l { color: #fff; }
.rpt.on .rpt-ic { background: rgba(255, 255, 255, 0.25); }

/* iPhone : page Rappels */
.rpm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--s-4); }
.rpm-tiles .rpt { min-height: 78px; }
.rpm-g { margin: var(--s-4) 4px var(--s-2); }
.rpm-row { width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; }
.rpm-auto { display: flex; align-items: center; padding-right: var(--s-4); }
.rpm-auto .rpm-row { flex: 1; min-width: 0; }
.screen-head.rpm-head { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.rpm-n { font-size: 30px; font-weight: 750; }

/* Mac : écran Rappels (listes à gauche, liste choisie à droite) */
@media (min-width: 900px) {
  .rpd { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; align-items: start; }
  .rpt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rpd-g { margin: 18px 6px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
  .rpd-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: default; }
  .rpd-i .row-icon { width: 28px; height: 28px; border-radius: 8px; }
  .rpd-i .n { margin-left: auto; color: var(--text-3); font-size: 13px; }
  .rpd-i:hover { background: var(--fill); }
  .rpd-i.on { background: var(--accent-soft); color: var(--accent); }
  .rpd-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
  .rpd-tags .chip { min-height: 28px; padding: 0 10px; font-size: 13px; cursor: default; }
  .rpd-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 4px 8px; }
  .rpd-h h2 { margin: 0; font-size: 28px; font-weight: 750; letter-spacing: -0.02em; }
  .rpd-h span { font-size: 28px; font-weight: 700; }
  .rpd-sec { margin: 14px 6px 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
  .rpd-main .dlist { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
  .rpd-empty { margin: 8px 6px; }
  .rpd-addl { margin-top: 12px; }
  .rpd-add { border-bottom: 0; margin: 0; }
  .drow.task.done .row-title { color: var(--text-3); }
  .tck.on { background: var(--accent-bg); border-color: var(--accent-bg); color: #fff; }
  .drow .tk-ic { width: 28px; height: 28px; }
  .addt .addt-sale .select-trigger { max-width: 150px; }
  .task-panel .te { margin-bottom: 14px; }
  @container (max-width: 640px) { .rpd { grid-template-columns: minmax(0, 1fr); } }
}

/* Réglages, Notifications : heure des rappels sans heure */
.notif-hour { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 4px; font-size: 14px; color: var(--text-2); }
.notif-hour .input { width: 120px; flex: none; }
.notif-help { background: var(--blue-soft); color: var(--text); }