.rappels-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--gray-100);
  font-family: var(--font-sans);
  color: var(--gray-900);
  overflow: hidden;
  container-type: inline-size;
  container-name: chiffrage;
}

.rappels-root { flex: 1; display: flex; min-height: 0; }

.rappels-root > .chiffrage-view { flex: 1; min-width: 0; }

.rappels-listfoot {
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}

.rappels-type-chips { display: none; }

@container chiffrage (max-width: 767px) {
  .rappels-app #rappels-type-filter { display: none; }
  .rappels-app .chiffrage-filterbar .cselect[data-select="rappels-type-filter"] { display: none; }
  .rappels-app .rappels-tous-btn { display: none; }
  .rappels-app .rappels-type-chips.hscroll {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 2px;
  }
  .rappels-app .rappels-type-chips .chiffrage-filter-btn { flex-shrink: 0; }
}

@media (max-width: 767px) {
  .rappels-app #rappels-type-filter { display: none; }
  .rappels-app .chiffrage-filterbar .cselect[data-select="rappels-type-filter"] { display: none; }
  .rappels-app .rappels-tous-btn { display: none; }
  .rappels-app .rappels-type-chips.hscroll {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 2px;
  }
  .rappels-app .rappels-type-chips .chiffrage-filter-btn { flex-shrink: 0; }
}

.rappels-group {
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.rappels-li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  border-bottom: 0.5px solid var(--gray-100);
}

.rappels-li:last-child { border-bottom: none; }

.rappels-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
}

.rappels-check.on { background: var(--green); border-color: var(--green); }
.rappels-check.ghost { opacity: 0.3; }

.rappels-li-main { flex: 1; min-width: 0; cursor: pointer; }

.rappels-li-titre { font-size: 16px; font-weight: 500; }

.rappels-li.done .rappels-li-titre { text-decoration: line-through; color: var(--gray-400); }
.rappels-li.done { opacity: 0.6; }

.rappels-li-subline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
  font-size: 13px;
  color: var(--gray-500);
}

.rappels-li-date.late { color: var(--red); font-weight: 600; }
.rappels-li-date.today { color: var(--orange); font-weight: 600; }
.rappels-li-prio { font-weight: 700; color: var(--orange); }
.rappels-li-prio.high { color: var(--red); }

.rappels-li-go {
  border: none;
  background: transparent;
  color: var(--gray-300);
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
}

.rappels-li-exp {
  border: none;
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.rappels-subrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 46px;
  border-bottom: 0.5px solid var(--gray-100);
  font-size: 14px;
}

.rappels-subrow:last-child { border-bottom: none; }

.rappels-subrow-t.done { text-decoration: line-through; color: var(--gray-400); }

.rappels-li.new input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: var(--gray-900);
  min-width: 0;
}

.ios-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.ios-scroll { flex: 1; overflow-y: auto; overflow-x: clip; padding: 10px 16px 16px; }

.ios-heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--gray-900);
  margin: 18px 0 6px 4px;
}

.ios-group {
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.ios-group.flat { padding: 12px; }

.ios-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  min-height: 36px;
}

.ios-back {
  border: none;
  background: transparent;
  color: var(--green);
  font-size: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 0;
}

.ios-navtitle { font-size: 16px; font-weight: 600; }

.rappels-app { position: relative; }

#rappels-root .heures-form-input {
  width: 100%;
  box-sizing: border-box;
}
#rappels-root .heures-form-input:disabled {
  opacity: 0.45;
}
#rappels-root .heures-modal-body {
  overflow-x: clip;
}
#rappels-root .heures-form-row.rd-dt {
  grid-template-columns: 1fr 1fr;
}
#rappels-root .heures-form-row.rd-dt > div {
  min-width: 0;
}
#rappels-root .heures-form-toggle-label {
  padding-top: 12px;
  padding-bottom: 12px;
}

.ios-done {
  border: none;
  background: transparent;
  color: var(--green);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.ios-check {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
}

.ios-check.on { background: var(--green); border-color: var(--green); }
.ios-check.sm { width: 20px; height: 20px; }

.ios-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 0.5px solid var(--gray-100);
  font-size: 15px;
}

.ios-sub-t.done { text-decoration: line-through; color: var(--gray-400); }

.rappels-subadd { display: flex; gap: 8px; align-items: center; }
.rappels-subadd .heures-form-input { flex: 1; min-width: 0; }

.rappels-terminate { width: 100%; justify-content: center; margin-top: 4px; }

.ios-delete {
  width: 100%;
  margin-top: 16px;
  border: none;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 12px;
  font-size: 16px;
  color: var(--red);
  cursor: pointer;
  font-family: inherit;
}

.ios-nl-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 14px 12px;
}

.ios-nl-preview input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 20px;
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-900);
  min-width: 0;
}

.ios-nl-preview .ios-tile-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ios-swatches { display: flex; flex-wrap: wrap; gap: 12px; }

.ios-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
}

.ios-swatch.on::after {
  content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px;
  border: 2px solid var(--green); border-radius: 50%;
}

.ios-glyphs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }

.ios-glyph {
  aspect-ratio: 1;
  border: none;
  border-radius: var(--radius-button);
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ios-glyph.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gray-900); }