/* === BOUSSOLE SOIR === */
.kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.kpi-tile {
  background: var(--card);
  padding: 16px;
  border-radius: 18px;
}
.kpi-tile .label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.kpi-tile .value {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 24px;
  margin-top: 4px;
}
.kpi-tile .sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}
.kpi-tile .delta {
  font-family: 'Caveat', cursive; font-size-adjust: 0.52;
  font-weight: 700;
  font-size: 14px;
  margin-top: 4px;
}
.delta.up { color: var(--success); }
.delta.flat { color: var(--text-2); }
.delta.down { color: var(--warning); }

.sparkline-card {
  background: var(--card);
  padding: 16px;
  border-radius: 18px;
  margin-bottom: 14px;
}
.sparkline-card .title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}
.sparkline-card .sub {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.sparkline-card svg { display: block; width: 100%; height: 60px; }

/* === DÉTAIL ÉVÉNEMENT === */
.event-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px 0 8px;
}
.event-detail-header .emoji-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.event-detail-header .emoji-circle.bib { background: var(--c-biberon); }
.event-detail-header .emoji-circle.change { background: var(--c-change); }
.event-detail-header .emoji-circle.sieste { background: var(--c-sieste); color: #FBF3E4; }
.event-detail-header .emoji-circle.repas { background: var(--c-repas); }
.event-detail-header .emoji-circle.medic { background: var(--c-medic); }
.event-detail-header h2 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
}
.event-detail-header .time {
  font-family: 'Caveat', cursive; font-size-adjust: 0.52;
  font-weight: 700;
  font-size: 16px;
  color: var(--caveat);
}

.detail-section {
  background: var(--card);
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 14px;
}
.detail-section .section-label {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}
.detail-row:last-child { border-bottom: 0; }
.detail-row .lbl {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.detail-row .val {
  font-size: 14px;
  font-weight: 700;
}
.detail-row .val.warn { color: var(--warning); }
.detail-row .val.success { color: var(--success); }

/* === CALENDRIER === */
.cal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.cal-header h2 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  flex: 1;
}
.cal-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--stroke);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  cursor: pointer;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.cal-day-name {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 0;
}
.cal-cell {
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--bg-tint, #F1ECE0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text-1, #2D3436);
  position: relative; cursor: pointer; gap: 3px;
  border: 1.5px solid transparent;
}
.cal-cell.out { background: transparent; cursor: default; }
.cal-cell.future { opacity: .42; cursor: default; }
.cal-cell .cal-num { line-height: 1; }
/* fond = humeur dominante du jour (jour avec données mais sans humeur = neutre) */
.cal-cell.cbg-calme, .cal-sw.cbg-calme { background: #9BCFB2; }
.cal-cell.cbg-normal, .cal-sw.cbg-normal { background: #CFE3D6; }
.cal-cell.cbg-mitige, .cal-sw.cbg-mitige { background: #FFD166; }
.cal-cell.cbg-difficile, .cal-sw.cbg-difficile { background: #F4B6CB; }
.cal-cell.cbg-none { background: var(--bg-tint, #F1ECE0); }
.cal-cell.sel { border-color: var(--c-repas, #D85C8E); box-shadow: 0 2px 8px rgba(216,92,142,.25); }
.cal-cell.today .cal-num { color: var(--c-repas, #D85C8E); font-weight: 800; }
/* pastilles de catégories (bas de cellule) */
.cal-dots { display: flex; gap: 3px; height: 6px; align-items: center; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.cal-dot.dot-bib { background: var(--c-biberon); }
.cal-dot.dot-change { background: var(--c-change); }
.cal-dot.dot-sieste { background: var(--c-sieste); }
.cal-dot.dot-repas { background: var(--c-repas); }
/* légende : pastille de catégorie (dot) + carré d'humeur (swatch) */
.cal-sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
.cal-legend-dots { margin-top: -8px; }
/* panneau résumé du jour */
.cal-day-resume { margin-top: 10px; font-size: 14px; line-height: 1.55; color: #4a4a4a; }
.cal-day-journee { margin-top: 12px; width: 100%; background: var(--accent, #6B9E8F); color: #fff; border: 0; border-radius: 14px; padding: 11px; font-weight: 700; font-size: 14px; cursor: pointer; -webkit-appearance: none; }

.cal-legend {
  display: flex;
  gap: 12px;
  font-size: 12px;
  padding: 4px 0 16px;
}
.cal-legend-item { display: flex; align-items: center; gap: 4px; color: var(--text-2); }
.cal-legend-dot { width: 12px; height: 12px; border-radius: 4px; }
.cal-legend-dot.calme { background: rgba(168,201,187,.7); }
.cal-legend-dot.normal { background: var(--success); }
.cal-legend-dot.anomalie { background: var(--c-anomalie); }

.cal-day-card {
  background: var(--card);
  border-radius: 18px;
  padding: 16px 20px;
}
.cal-day-card .day-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}
.cal-day-card .day-summary {
  font-size: 14px;
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cal-day-card .day-summary span { display: inline-flex; align-items: center; gap: 4px; }

/* === TENDANCES === */
.period-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.period-chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--stroke);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.period-chip.active { background: var(--accent); color: #FBF3E4; border-color: var(--accent); }

.trend-card {
  background: var(--card);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
}
.trend-card .title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}
.trend-card .title .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.trend-card .bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
  margin-bottom: 6px;
}
.trend-card .bar {
  flex: 1;
  background: var(--c-biberon);
  border-radius: 6px 6px 4px 4px;
  min-height: 6px;
}
.trend-card .bar.sieste { background: var(--c-sieste); }
.trend-card .x-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  padding: 0 2px;
}
.trend-card .footer-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-2);
}
.trend-card .footer-line .moy {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.mood-grid {
  display: grid;
  grid-template-columns: 24px repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.mood-grid .row-label {
  font-size: 18px;
  text-align: center;
}
.mood-grid .smiley-cell {
  text-align: center;
  font-size: 18px;
  padding: 4px 0;
  border-radius: 6px;
  background: var(--bg-tint);
}
.mood-grid .x-row {
  display: contents;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}

.anomalies-list {
  background: var(--card);
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 14px;
}
.anomalies-list .title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.anomalies-list .anom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
}
.anomalies-list .anom .day {
  font-weight: 700;
  width: 60px;
  flex-shrink: 0;
}
.anomalies-list .anom .text { color: var(--text-2); }
.anomalies-list .anom .icon { color: var(--warning); }

/* === PROFIL === */
.profil-hero {
  background: var(--card);
  border-radius: 22px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.profil-hero .av {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--c-repas);
  color: #FBF3E4;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  overflow: visible;
  flex-shrink: 0;
}
.profil-hero .av img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.profil-hero .av .av-edit {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--stroke);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.profil-hero .info { flex: 1; }
.profil-hero .name {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 20px;
}
.profil-hero .email { font-size: 13px; color: var(--text-2); }
.profil-hero .edit {
  font-family: 'Caveat', cursive; font-size-adjust: 0.52;
  font-weight: 700;
  font-size: 16px;
  color: var(--caveat);
}

.profil-section-label {
  font-family: 'Caveat', cursive; font-size-adjust: 0.52;
  font-weight: 700;
  font-size: 18px;
  color: var(--caveat);
  margin: 18px 0 6px;
}
.profil-list {
  background: var(--card);
  border-radius: 18px;
  overflow: hidden;
}
.profil-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
}
.profil-row:last-child { border-bottom: 0; }
.profil-row .ic { font-size: 18px; }
.profil-row .lbl {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
}
.profil-row .val {
  font-size: 13px;
  color: var(--text-2);
}
.profil-row .chev { color: var(--muted); font-weight: 700; }
.profil-row.danger .lbl { color: var(--critical); }

/* === EVENT clickable in journal === */
.journal-event { cursor: pointer; transition: background .15s; padding-left: 4px; padding-right: 4px; border-radius: 10px; }
.journal-event:hover { background: var(--bg-tint); }

/* === P11 — Treatment banner + detail === */
.tx-banner {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: #F4D8DE;
  border: 0;
  border-radius: 18px;
  padding: 14px 16px;
  margin: 12px 0 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.tx-pill { font-size: 22px; }
.tx-pill-big {
  width: 44px; height: 44px;
  background: #F4D8DE;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.tx-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tx-name { font-size: 14px; }
.tx-meta { font-family: 'Caveat', cursive; font-size-adjust: 0.52; font-size: 14px; color: var(--text-2); }
.tx-chev { font-size: 22px; color: var(--text-2); }

.tx-card {
  background: var(--card);
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.tx-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.tx-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 19px; }
.tx-sub { font-family: 'Caveat', cursive; font-size-adjust: 0.52; font-size: 14px; color: var(--c-medic); margin-top: 2px; }
.tx-progress-lbl { font-size: 13px; margin-bottom: 8px; }
.tx-progress { height: 8px; background: #F0E6DC; border-radius: 999px; overflow: hidden; }
.tx-progress-bar { height: 100%; background: linear-gradient(90deg, var(--c-repas), var(--c-medic)); border-radius: 999px; transition: width .3s; }

.tx-card-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 15px; margin: 0 0 10px; }
.tx-plan-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.tx-plan-dot {
  width: 22px; height: 22px;
  border: 1.5px solid rgba(0,0,0,.15);
  border-radius: 50%;
  background: transparent;
  display: inline-block;
  flex-shrink: 0;
}
.tx-plan-dot.on { background: var(--accent); border-color: var(--accent); }
.tx-plan-dot.next { background: transparent; border-color: var(--c-repas); }
.tx-plan-time { font-weight: 700; min-width: 54px; }
.tx-plan-lbl { font-size: 14px; color: var(--c-repas); }
.tx-plan-row:has(.tx-plan-dot.on) .tx-plan-lbl { color: var(--text); font-family: inherit; }
.tx-plan-row:has(.tx-plan-dot:not(.on):not(.next)) .tx-plan-lbl { color: var(--text-2); font-family: 'Caveat', cursive; font-size-adjust: 0.52; }

.tx-ord { display: flex; gap: 12px; align-items: center; background: var(--bg-tint); padding: 10px; border-radius: 14px; }
.tx-ord-thumb {
  width: 42px; height: 42px;
  background: var(--card);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.tx-ord-file { font-weight: 600; font-size: 14px; }
.tx-ord-meta { color: var(--c-repas); font-size: 14px; }

.tx-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card);
  border-radius: 18px;
  padding: 14px 18px;
  margin-bottom: 18px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.tx-toggle-title { font-weight: 700; font-size: 14px; }
.tx-toggle-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.tx-switch {
  width: 42px; height: 24px;
  background: #D9D2C7;
  border-radius: 999px;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.tx-switch.on { background: var(--accent); }
.tx-knob {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tx-switch.on .tx-knob { transform: translateX(18px); }

.tx-stop {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--c-repas);
  border-radius: 999px;
  padding: 16px;
  color: var(--c-repas);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 90px;
}
.tx-stop:hover { background: rgba(216,92,142,.05); }

/* === P16 — Jalons === */
.jalons-header {
  display: flex; align-items: center; gap: 10px; margin: -4px 0 14px;
}
.jalons-baby-chip {
  background: var(--c-biberon);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 12px;
}
.jalons-cat {
  font-family: 'Caveat', cursive; font-size-adjust: 0.52;
  color: var(--c-repas);
  font-size: 18px;
  margin: 18px 0 8px;
}
.jalons-card {
  background: #FFF6E5;
  border-radius: 22px;
  padding: 6px 16px;
  margin-bottom: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.jalons-card-done   { background: #FFF6E5; }
.jalons-card-future { background: var(--bg-tint); }
.jalon-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.jalons-card .jalon-row:last-child { border-bottom: 0; }
.jalon-emoji { font-size: 26px; flex-shrink: 0; }
.jalon-emoji-circle {
  width: 38px; height: 38px;
  background: var(--card);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.jalon-emoji-circle.muted { opacity: 0.6; }
.jalon-info { flex: 1; }
.jalon-lbl { font-family: 'Fraunces', serif; font-weight: 700; font-size: 15px; }
.jalon-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.jalon-row .caveat.jalon-sub { color: var(--c-repas); font-size: 13px; }
.jalon-noter {
  background: var(--c-biberon);
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.jalon-check { color: var(--accent); font-size: 22px; font-weight: 700; }
.jalon-row .chev { color: var(--text-2); font-size: 22px; }

/* === P17 — Gallery === */
.gal-add {
  background: var(--c-repas);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.gal-sub {
  font-family: 'Caveat', cursive; font-size-adjust: 0.52;
  color: var(--c-repas);
  font-size: 15px;
  margin: 4px 0 14px;
}
.gal-day {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 700;
  margin: 18px 0 8px;
}
.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gal-tile {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  cursor: pointer;
  transition: transform .12s;
}
.gal-tile:hover { transform: scale(0.97); }

/* === P18 — Chat === */
.chat-header {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
  margin: -4px 0 14px;
}
.chat-av {
  width: 38px; height: 38px;
  background: var(--c-repas);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-family: 'Fraunces', serif;
}
.chat-h-info { flex: 1; }
.chat-h-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 17px; }
.chat-h-status { font-family: 'Caveat', cursive; font-size-adjust: 0.52; color: var(--c-repas); font-size: 13px; }
.chat-stream {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 120px;
}
.chat-day-chip {
  align-self: center;
  background: var(--bg-tint);
  color: var(--text-2);
  font-family: 'Caveat', cursive; font-size-adjust: 0.52;
  font-size: 14px;
  border-radius: 999px;
  padding: 4px 14px;
  margin: 4px 0 8px;
}
.chat-msg {
  display: flex; flex-direction: column;
  max-width: 78%;
}
.chat-msg.me   { align-self: flex-end; align-items: flex-end; }
.chat-msg.them { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.35;
}
.chat-msg.them .chat-bubble {
  background: var(--card);
  border-top-left-radius: 4px;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.chat-msg.me .chat-bubble {
  background: var(--accent);
  color: #FBF3E4;
  border-top-right-radius: 4px;
}
.chat-meta {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
  display: flex; gap: 4px; align-items: center;
}
/* Actions de message (✏️ 🗑️ ↪ 🤍) : vraies cibles tactiles (≥40px) — avant 11px/2px,
   trop petites à toucher (signalé). */
.chat-act {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
  font-size: 19px; line-height: 1;
  background: none; border: 0; color: var(--text-2);
  border-radius: 12px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-act:active { background: var(--divider); }
.chat-tick { color: #4D9CFF; font-size: 12px; }
.chat-react {
  background: var(--card);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  margin-top: -6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  align-self: flex-start;
}
.chat-msg.me .chat-react { align-self: flex-end; }
.chat-recap-card {
  align-self: center;
  background: #FFEED2;
  border-radius: 18px;
  padding: 14px 18px;
  margin: 12px 0 8px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.chat-recap-eyebrow {
  display: block;
  color: var(--c-biberon);
  font-size: 16px;
  margin-bottom: 4px;
}
.chat-recap-link {
  background: transparent;
  border: 0;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
}
.chat-footer {
  position: fixed;
  bottom: 70px;
  left: 0; right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--divider);
  z-index: 10;
}
.chat-cam, .chat-mic {
  background: transparent;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  padding: 6px;
}
.chat-input {
  flex: 1;
  background: var(--card);
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* === P01 — Onboarding === */
.ob-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 30px;
  background: var(--bg-tint);
}
.ob-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px;
  min-height: 28px;
}
.ob-back {
  background: none; border: 0;
  font-size: 22px; color: var(--text);
  cursor: pointer; padding: 0;
}
.ob-brand {
  font-family: 'Caveat', cursive; font-size-adjust: 0.52;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-repas);
}
.ob-dots { display: flex; gap: 6px; }
.ob-dot {
  width: 8px; height: 8px;
  background: #D9D2C7;
  border-radius: 50%;
  transition: background .2s, width .2s;
}
.ob-dot.on { background: var(--accent); width: 22px; border-radius: 999px; }
.ob-hero {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 30px 0;
}
.ob-emoji-circle {
  width: 130px; height: 130px;
  background: var(--c-biberon);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 70px;
  margin-bottom: 8px;
}
.ob-emoji-circle.ob-sparkles { background: #F4D8DE; font-size: 56px; }
.ob-eyebrow {
  color: var(--c-repas);
  font-size: 22px;
}
.ob-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  margin: 0;
}
.ob-sub {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
  max-width: 280px;
  margin: 8px auto 0;
}
.ob-cta {
  width: 100%;
  background: var(--accent);
  color: #FBF3E4;
  border: 0;
  border-radius: 999px;
  padding: 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 18px;
}
.ob-link {
  display: block;
  text-align: center;
  margin-top: 14px;
  color: var(--c-repas);
  text-decoration: none;
  font-size: 16px;
}
.ob-field {
  margin-bottom: 16px;
}
.ob-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.ob-field input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}
.ob-field input:focus { border-color: var(--accent); }
.ob-pills { display: flex; gap: 8px; }
.ob-pill {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 12px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.ob-pill.on {
  background: var(--accent);
  color: #FBF3E4;
  border-color: var(--accent);
}
.ob-mode-toggle {
  margin-top: 18px;
  display: inline-flex;
}
.ob-tip {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 15px;
}

/* === P23 — Accessibilité === */
body[data-a11y='large'] {
  font-size: 17px;
}
body[data-a11y='large'] .ob-title,
body[data-a11y='large'] .greeting,
body[data-a11y='large'] .question {
  font-size: 1.35em;
}
body[data-a11y='large'] .btn-big-primary,
body[data-a11y='large'] .btn-big-secondary {
  font-size: 18px;
  padding: 20px;
}
body[data-a11y='contrast'] {
  --bg: #FFFFFF;
  --bg-tint: #FFFFFF;
  --card: #FFFFFF;
  --text: #000000;
  --text-2: #000000;
  --accent: #003C8F;
  --stroke: #000000;
  --divider: #000000;
}
body[data-a11y='contrast'] .caveat {
  font-family: inherit;
  color: #B11B5A;
  font-weight: 800;
}
body[data-a11y='contrast'] .btn-big-primary,
body[data-a11y='contrast'] .ob-cta,
body[data-a11y='contrast'] .md-save {
  background: #003C8F;
  color: #FFFFFF;
}
body[data-a11y='contrast'] .btn-big-secondary {
  background: #FFFFFF;
  border: 2px solid #000000;
}

/* === P24 — Vue 30 jours === */
.period-chips-time { display: flex; gap: 6px; flex-wrap: wrap; }
.period-chip-sm {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.period-chip-sm.active {
  background: var(--accent);
  color: #FBF3E4;
  border-color: var(--accent);
}
.t30-range {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.t30-range-chip {
  background: var(--bg-tint);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}
.t30-trend {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
  float: right;
}
.t30-trend-mute { color: var(--text-2); font-weight: 600; }
.trend-bars {
  display: flex; align-items: flex-end; gap: 3px;
  height: 70px;
  margin: 8px 0 14px;
}
.trend-bar {
  flex: 1;
  border-radius: 4px;
  min-height: 6px;
}
.trend-bar.bar-bib { background: var(--c-biberon); }
.trend-bar.bar-sleep { background: #5F6D7A; }
.t30-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.t30-val {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
}
.t30-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.t30-week {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
  flex-wrap: wrap;
}
.t30-week:last-child { border-bottom: 0; }
.t30-week-lbl { flex: 1; font-weight: 600; }
.t30-warn { color: var(--c-repas); font-weight: 700; }
.mh-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.mh-tile {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  display: inline-block;
}
.mh-tile.mh-calme     { background: #9BCFB2; }
.mh-tile.mh-normal    { background: #CFE3D6; }
.mh-tile.mh-mitige    { background: #FFE2A8; }
.mh-tile.mh-difficile { background: #F4B6CB; }
.mh-tile.mh-empty     { background: var(--stroke, #E8E2D5); opacity: .5; }
.mh-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-2);
}
.mh-legend i {
  width: 12px; height: 12px;
  display: inline-block;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}
.t30-anom {
  display: flex; gap: 10px;
  padding: 8px 0;
  font-size: 13px;
}
.t30-anom-day { font-weight: 700; min-width: 56px; }

/* === P26 — Centre d'aide & Légal === */
.help-eyebrow {
  color: var(--c-repas);
  font-size: 16px;
  margin: 4px 0 14px;
}
.help-search {
  display: flex; align-items: center; gap: 8px;
  background: #FFEED2;
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.help-search input {
  flex: 1;
  background: transparent;
  border: 0;
  font: inherit;
  outline: none;
  color: var(--text);
}
.help-cat {
  color: var(--c-repas);
  font-size: 16px;
  margin: 18px 0 8px;
}
.help-card {
  background: var(--card);
  border-radius: 18px;
  padding: 4px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.faq-q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  background: transparent;
  border: 0;
  padding: 14px 0;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--divider);
}
.help-card .faq-q:last-of-type { border-bottom: 0; }
.faq-q.open { border-bottom: 0; }
.faq-plus { font-size: 18px; color: var(--c-repas); flex-shrink: 0; margin-left: 12px; transition: transform .2s; }
.faq-q.open .faq-plus { transform: rotate(45deg); }
.faq-a {
  display: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  padding: 0 0 14px;
  border-bottom: 1px solid var(--divider);
}
.faq-a.open { display: block; }
.help-card .faq-a:last-of-type { border-bottom: 0; }
.help-contact {
  background: #F4D8DE;
  border-radius: 18px;
  padding: 14px 18px;
  margin: 18px 0 90px;
  font-size: 13px;
  text-align: center;
}
.help-contact p { margin: 4px 0; }

.lbl-stack .lbl { font-weight: 700; font-size: 14px; }
.lbl-stack .val { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.legal-foot {
  text-align: center;
  margin: 18px 0 4px;
  color: var(--text-2);
}
.legal-foot.caveat { color: var(--c-repas); font-size: 18px; }

/* === Preferences sheets === */
.pref-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 8px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.pref-row.on { border-color: var(--accent); background: var(--bg-tint); }
.pref-check { color: var(--accent); font-weight: 700; font-size: 18px; }
.pref-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 8px;
}

/* === P25 — Admin === */
.admin-badge {
  background: #2C3E50;
  color: #FBF3E4;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 14px;
}
.admin-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.admin-val {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
}
.admin-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.admin-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
}
.admin-row:last-child { border-bottom: 0; }
.admin-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}
.admin-dot.ok { background: var(--accent); }
.admin-lbl-row { flex: 1; font-weight: 600; }
.admin-val-row { color: var(--text-2); font-weight: 600; }
.admin-log {
  display: flex; gap: 12px; align-items: center;
  padding: 8px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--divider);
}
.admin-log:last-child { border-bottom: 0; }
.admin-log-time { color: var(--text-2); min-width: 50px; font-weight: 600; }
.admin-log-ep { flex: 1; font-family: 'Fraunces', serif; font-weight: 700; }
.admin-log-user { color: var(--c-repas); font-size: 14px; }

/* === P20 — Empty / Loading / Error states === */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 40px 24px;
  gap: 8px;
}
.empty-emoji-circle {
  width: 130px; height: 130px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  margin-bottom: 12px;
}
.empty-emoji-green { background: #DCEEE2; }
.empty-emoji-pink  { background: #F4D8DE; }
.empty-emoji-yellow { background: var(--c-biberon); }
.empty-eyebrow {
  color: var(--c-repas);
  font-size: 17px;
  margin: 0;
}
.empty-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
}
.empty-sub {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.4;
  max-width: 280px;
  margin: 4px auto 0;
}
.skeleton-line {
  background: linear-gradient(90deg, #E8DECE 25%, #F0E6D6 50%, #E8DECE 75%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-line.skeleton-soft {
  background: linear-gradient(90deg, #CFE3D6 25%, #E0EAE2 50%, #CFE3D6 75%);
  background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.loading-dots {
  display: flex; gap: 6px; justify-content: center;
  margin: 18px 0 8px;
}
.loading-dots span {
  width: 8px; height: 8px;
  background: var(--text-2);
  border-radius: 50%;
  opacity: 0.4;
  animation: loading-pulse 1.2s infinite ease-in-out both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes loading-pulse {
  0%, 80%, 100% { opacity: 0.4; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}
.offline-banner {
  background: #2C3E50;
  color: #FBF3E4;
  padding: 10px 14px;
  margin: -12px -16px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.save-err-banner {
  display: flex; align-items: center; gap: 10px;
  background: #FFEBE8;
  border: 1px solid var(--critical);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.save-err-retry {
  background: var(--critical);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.preview-mode-banner {
  display: flex; align-items: center; gap: 10px;
  background: #FFF3D6;
  border: 1px solid #E6B450;
  color: #6B4E16;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* ============================================================
   Écrans complémentaires V2 : mot de passe oublié, nounou, passation
   ============================================================ */

/* Mot de passe oublié — message de confirmation */
.login-ok {
  background: rgba(107,158,143,.12);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.4;
}

/* Nounou — carte "passation du matin" reçue du parent */
.handover-card {
  border-left: 4px solid var(--accent);
  text-align: left;
}
.handover-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.handover-pill {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(107,158,143,.15);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  flex-shrink: 0;
}
.handover-title { font-weight: 700; color: var(--text); }
.handover-sub { font-size: 15px; color: var(--accent); }
.handover-line {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--text-2); margin: 6px 0;
}
.handover-ico { flex-shrink: 0; }
.handover-note {
  margin-top: 12px; padding: 12px 14px;
  background: var(--bg-tint); border-radius: 14px;
  font-size: 14px; color: var(--text); line-height: 1.45;
}

/* Nounou — saisie du code d'invitation (état vide) */
.invite-box { width: 100%; max-width: 320px; margin: 8px auto 0; }
.invite-input {
  width: 100%; text-align: center;
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 30px; letter-spacing: 8px;
  padding: 16px; border-radius: 16px;
  border: 2px solid var(--stroke); background: var(--card); color: var(--text);
  text-transform: uppercase;
}
.invite-input:focus { outline: none; border-color: var(--accent); }

/* Passation parent → nounou */
.pass-route {
  display: inline-block;
  background: rgba(216,92,142,.10); color: var(--c-repas);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700;
}
.pass-composer { position: relative; margin-bottom: 18px; }
.pass-textarea {
  width: 100%; box-sizing: border-box;
  border: 2px solid var(--stroke); border-radius: 18px;
  background: var(--card); color: var(--text);
  padding: 14px 52px 14px 16px;
  font-family: 'Nunito', sans-serif; font-size: 15px; line-height: 1.5;
  resize: vertical;
}
.pass-textarea:focus { outline: none; border-color: var(--accent); }
.pass-mic {
  position: absolute; right: 10px; bottom: 10px;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; font-size: 17px; cursor: pointer;
}
.pass-ai {
  background: var(--bg-tint); border: 1px dashed var(--accent);
  border-radius: 18px; padding: 14px 16px; margin-bottom: 18px; text-align: left;
}
.pass-ai-head { margin-bottom: 10px; }
.pass-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pass-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--stroke);
  border-radius: 999px; padding: 7px 13px; font-size: 13px; color: var(--text);
}
.pass-chip-x {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-2); font-size: 16px; line-height: 1;
  padding: 0 0 0 2px; margin-left: 2px;
}
.pass-chip-x:hover { color: var(--critical, #c0584f); }
.pass-ai-note { margin: 10px 0 0; font-size: 16px; color: var(--text-2); }

/* Banner humeur périodique (Lot 1 v2) */
.pm-banner {
  background: var(--card); border: 1px solid var(--stroke);
  border-radius: 18px; padding: 14px 16px; margin: 6px 0 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.pm-q { font-weight: 700; color: var(--text); font-size: 15px; }
.pm-moods { display: flex; gap: 8px; }
.pm-mood {
  flex: 1; border: 1px solid var(--stroke); background: var(--bg-tint);
  border-radius: 14px; padding: 10px 0; font-size: 26px; cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.pm-mood:hover { transform: scale(1.08); border-color: var(--accent); }