:root {
  --bg: #f5f3ee;
  --carte: #ffffff;
  --encre: #1d1c1a;
  --encre-2: #6b675f;
  --trait: #e4e0d6;
  --accent: #0f766e;
  --accent-encre: #ffffff;
  --alerte-bg: #fff1d6;
  --alerte: #8a5300;
  --danger: #b42318;

  /* Couleurs des moments de prise */
  --matin-bg: #ffeeb0;   --matin: #6b4e00;
  --midi-bg: #ffd9c2;    --midi: #8a3205;
  --soir-bg: #d3e2ff;    --soir: #1d4690;
  --coucher-bg: #e4d9ff; --coucher: #4a2795;

  --rayon: 14px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141413;
    --carte: #1f1e1c;
    --encre: #f2efe8;
    --encre-2: #a39e94;
    --trait: #34322e;
    --accent: #2bb3a3;
    --accent-encre: #062b27;
    --alerte-bg: #3a2a0c;
    --alerte: #ffc56b;
    --danger: #ff7a6b;
    --matin-bg: #4a3b06;   --matin: #ffe17a;
    --midi-bg: #4d2510;    --midi: #ffb88f;
    --soir-bg: #142b55;    --soir: #a9c6ff;
    --coucher-bg: #2e1f57; --coucher: #cdb9ff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--encre);
  font: 17px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#app {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 6px) 12px calc(env(safe-area-inset-bottom) + 28px);
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
svg { flex: none; }

/* ---------- Barre du haut, titres ---------- */
.haut {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 46px;
}
.haut strong { font-size: 17px; }
.lien { color: var(--accent); font-weight: 600; padding: 10px 2px; display: inline-flex; align-items: center; gap: 2px; }
.lien svg { width: 20px; height: 20px; }
h1 { font-size: 30px; letter-spacing: -0.02em; line-height: 1.15; margin: 6px 0 4px; }
h2.section { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); margin: 22px 4px 8px; }
.sous-titre { color: var(--encre-2); margin: 0 0 16px; font-size: 15px; }

/* ---------- Boutons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; padding: 0 16px;
  border-radius: var(--rayon); border: 1px solid var(--trait);
  background: var(--carte); font-weight: 650;
}
.btn svg { width: 22px; height: 22px; }
.btn.primaire { background: var(--accent); color: var(--accent-encre); border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn + .btn { margin-top: 10px; }
.btn:active, .liste button:active, .ligne:active { filter: brightness(.96); }
.rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.btn.petit { min-height: 46px; font-size: 15px; }

/* ---------- Accueil ---------- */
.recherche {
  width: 100%; min-height: 46px; margin: 14px 0 10px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--trait); background: var(--carte); font-size: 16px;
}
.liste {
  list-style: none; margin: 0; padding: 0;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden;
}
.liste li + li { border-top: 1px solid var(--trait); }
.liste button {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
  width: 100%; min-height: 62px; padding: 10px 14px; text-align: left;
}
.p-nom { display: block; font-weight: 600; }
.p-meta { display: block; color: var(--encre-2); font-size: 14px; }
.p-meta .attention { color: var(--alerte); font-weight: 600; }
.chevron { color: var(--encre-2); width: 18px; height: 18px; }
.vide-etat { text-align: center; color: var(--encre-2); padding: 36px 20px; }
.pied { display: flex; justify-content: center; gap: 20px; margin-top: 28px; }
.pied button { color: var(--encre-2); font-size: 15px; padding: 8px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tableau de préparation ---------- */
.grille { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.ligne {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) repeat(4, 40px);
  gap: 5px; align-items: center; padding: 8px 10px; width: 100%; text-align: left;
}
.ligne + .ligne { border-top: 1px solid var(--trait); }
.ligne.simple { grid-template-columns: 44px minmax(0, 1fr); }
.entete { padding-block: 9px 7px; font-size: 12px; font-weight: 700; color: var(--encre-2); }
.entete span { text-align: center; white-space: nowrap; letter-spacing: -0.01em; }
.entete span:nth-child(2) { text-align: left; }
.entete .matin { color: var(--matin); }
.entete .midi { color: var(--midi); }
.entete .soir { color: var(--soir); }
.entete .coucher { color: var(--coucher); }

.photo {
  width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--bg); color: var(--encre-2); border: 1.5px dashed var(--trait);
}
.photo.remplie { border: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo svg { width: 20px; height: 20px; }

.nom { min-width: 0; }
.nom strong { display: block; font-size: 15.5px; line-height: 1.2; overflow-wrap: anywhere; }
.nom small { display: block; font-size: 13.5px; color: var(--encre-2); }
.nom small.poso { color: var(--encre); font-size: 14.5px; margin-top: 2px; }
.etiquette {
  display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; background: var(--alerte-bg); color: var(--alerte);
}

.dose {
  height: 40px; border-radius: 10px; display: grid; place-items: center;
  font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.dose.matin { background: var(--matin-bg); color: var(--matin); }
.dose.midi { background: var(--midi-bg); color: var(--midi); }
.dose.soir { background: var(--soir-bg); color: var(--soir); }
.dose.coucher { background: var(--coucher-bg); color: var(--coucher); }
.dose.rien { background: none; color: var(--trait); font-weight: 400; }

.ligne.fait { opacity: .35; }
.ligne.fait .nom strong { text-decoration: line-through; }
.coche { color: var(--accent); }

.total { background: var(--bg); padding-block: 6px; }
.total .nom { font-size: 13px; font-weight: 700; color: var(--encre-2); text-transform: uppercase; letter-spacing: .03em; }
.total .dose { height: 28px; font-size: 16px; background: none; }

.astuce { color: var(--encre-2); font-size: 13.5px; text-align: center; margin: 8px 0 0; }

/* ---------- Vérification / modification ---------- */
.ordo {
  position: sticky; top: 0; z-index: 3;
  height: 30vh; overflow: auto; margin: 0 -12px 12px;
  background: #000; -webkit-overflow-scrolling: touch;
}
.ordo img { display: block; width: 100%; }
.ordo .agrandir {
  position: sticky; float: right; top: 8px; margin: 8px 8px -44px 0;
  padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; font-weight: 600;
}

.encadre { border-radius: var(--rayon); padding: 10px 14px; margin-bottom: 12px; font-size: 15px; }
.encadre.alerte { background: var(--alerte-bg); color: var(--alerte); }
.encadre.changements { background: var(--carte); border: 1.5px solid var(--accent); }
.encadre h2 { font-size: 15px; margin: 0 0 6px; color: var(--accent); }
.encadre ul { margin: 0; padding-left: 18px; }
.encadre li + li { margin-top: 3px; }

.champs-patient { display: grid; gap: 8px; margin-bottom: 14px; }
.champs-patient .duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.etiq { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--encre-2); }
.champ {
  width: 100%; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); font-size: 16px;
}
.carte .champ { background: var(--bg); }

.carte {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 12px; margin-bottom: 10px;
}
.carte.doute { border: 2px solid var(--alerte); }
.doute-msg {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; padding: 8px 10px; border-radius: 10px;
  background: var(--alerte-bg); color: var(--alerte); font-size: 14.5px;
}
.doute-msg button {
  white-space: nowrap; padding: 6px 10px; border-radius: 8px;
  background: var(--carte); color: var(--encre); font-size: 14px; font-weight: 700;
}
.carte-haut { display: grid; grid-template-columns: 44px 1fr 36px; gap: 10px; align-items: center; }
.carte-haut .champ { font-weight: 600; }
.carte .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.supprimer { width: 36px; height: 36px; border-radius: 10px; color: var(--encre-2); display: grid; place-items: center; }
.supprimer svg { width: 20px; height: 20px; }
.carte select.champ {
  -webkit-appearance: none; appearance: none; padding-right: 30px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a857b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 16px;
}

.lu { margin: 10px 0 0; font-size: 14.5px; color: var(--encre-2); font-style: italic; }
.doses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 8px; }
.choix-dose { position: relative; display: grid; gap: 3px; text-align: center; font-size: 12px; font-weight: 700; }
.choix-dose .valeur {
  height: 46px; border-radius: 10px; display: grid; place-items: center;
  font-size: 21px; font-weight: 750;
}
.choix-dose select { position: absolute; inset: 0; opacity: 0; width: 100%; font-size: 16px; }
.choix-dose.matin { color: var(--matin); }       .choix-dose.matin .valeur { background: var(--matin-bg); }
.choix-dose.midi { color: var(--midi); }         .choix-dose.midi .valeur { background: var(--midi-bg); }
.choix-dose.soir { color: var(--soir); }         .choix-dose.soir .valeur { background: var(--soir-bg); }
.choix-dose.coucher { color: var(--coucher); }   .choix-dose.coucher .valeur { background: var(--coucher-bg); }
.choix-dose.rien .valeur { background: var(--bg); color: var(--encre-2); font-weight: 400; }

.barre-bas {
  position: sticky; bottom: 0; z-index: 2;
  margin: 16px -12px 0; padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px);
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
}

/* ---------- Lecture en cours ---------- */
.lecture { text-align: center; padding-top: 40px; }
.lecture img { width: 55%; max-width: 240px; border-radius: 12px; opacity: .55; }
.lecture p { margin: 4px 0; }
.lecture .sous-titre { margin-top: 6px; }
.roue {
  width: 38px; height: 38px; margin: 26px auto 14px;
  border: 4px solid var(--trait); border-top-color: var(--accent); border-radius: 50%;
  animation: tourne .9s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation-duration: 3s; } }

/* ---------- Image plein écran ---------- */
.plein-ecran {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; background: rgba(0,0,0,.94);
}
.plein-ecran .barre {
  display: flex; justify-content: space-between; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 6px) 8px 6px;
}
.plein-ecran .barre button { color: #fff; font-weight: 600; padding: 10px; }
.plein-ecran .zone { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.plein-ecran .zone img { display: block; width: 100%; }
.plein-ecran .zone.zoom img { width: 250%; }