:root{
  --accent:#2bb3a6;
  --accent2:#4fc3f7;
  --danger:#ff5d5d;

  --bg1:#eefaf8;
  --bg2:#e6f3ff;

  --card:#ffffff;
  --soft:#f7f7f9;
  --border:#e5e5ea;
  --text:#1c1c1e;
  --muted:rgba(0,0,0,.62);

  --shadow:0 12px 30px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
}

img{ display:block; max-width:100%; height:auto; }

main{
  max-width:1100px;
  margin:auto;
  padding:22px;
}

/* HEADER */
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;
  align-items:center;
  justify-content:center;
}
.topbar-inner{
  width:100%;
  max-width:1100px;
  padding:12px 22px;
  display:flex;
  align-items:center;
}
.topbar .left{
  display:flex;
  align-items:center;
  gap:16px;
}
.topbar .logo{
  height:110px;
  width:auto;
  object-fit:contain;
}
.title{ color:#fff; line-height:1.1; }
.appname{ font-size:35px; font-weight:650; }
.subtitle{ font-size:14px; opacity:.92; }

/* CARDS / LAYOUT */
.card{
  background:var(--card);
  border-radius:20px;
  padding:20px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.02);
}
.card h2{
  margin:0 0 12px 0;
  font-size:16px;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
}
@media(max-width:900px){
  main{ padding:14px; }
  .grid2{ grid-template-columns:1fr; gap:14px; }
}

.profiles-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media(max-width:900px){
  .profiles-grid{ grid-template-columns:1fr; }
}

.muted{ opacity:.75; color:var(--muted); }
.small{ font-size:12px; }

/* INPUTS */
input, select, button{ font:inherit; }

input, select{
  width:100%;
  padding:10px 14px;
  margin-bottom:12px;
  border-radius:14px;
  border:1px solid var(--border);
  font-size:14px;
  background:#f9f9fb;
}
input:focus, select:focus{
  outline:none;
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 3px rgba(43,179,166,.15);
}

/* INLINE FIELDS */
.inline-field{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.inline-label{
  min-width:110px;
  font-weight:520;
  white-space:nowrap;
}
.inline-field input,
.inline-field select{
  margin-bottom:0;
}

/* ===== DURÉE MOBILE ALIGNEMENT PRO ===== */

#nombreBlock{
  display:flex;
}

@media(max-width:600px){

  .inline-field{
    flex-direction:column;
    align-items:stretch;
  }

  .inline-label{
    min-width:unset;
    margin-bottom:6px;
  }

}

/* BUTTONS */
button{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(43,179,166,.88);
  color:#062520;
  font-weight:600; /* soft */
  cursor:pointer;
}
button:hover{ filter:brightness(1.04); }
button:active{ transform:translateY(.5px); }

.btn-white{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  font-weight:600;
}
.btn-white:hover{ background:#f4f4f6; }

.btn-danger{
  background:rgba(255,93,93,.95);
  color:white;
  border:1px solid rgba(0,0,0,.06);
  font-weight:600;
}

/* PROFILE */
.profile-active-content{
  display:flex;
  align-items:center;
  gap:12px;
}
#profilSelect{
  height:42px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#f9f9fb;
  font-size:14px;
  text-align:center;
  min-width:200px;
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  background:#e53935;
  color:white;
  font-weight:700;
  font-size:.85rem;
}

/* PROFILE BUTTONS */
.profile-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.profile-buttons button{
  min-width:170px;
  flex:1;
}

/* NOTICE */
.notice{
  position:fixed;
  top:92px;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  padding:12px 14px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  display:flex;
  gap:10px;
  align-items:center;
  z-index:2000;
  max-width:92vw;
}
.notice-close{
  width:auto;
  padding:6px 10px;
  border-radius:12px;
  background: rgba(0,0,0,0.08);
  color:var(--text);
  border:1px solid rgba(0,0,0,.06);
}

/* JOURS PILLS */
.jours-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 14px;
}
.jour-pill{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#f4f4f6;
  cursor:pointer;
  font-size:13px;
  transition:.18s;
  user-select:none;
}
.jour-pill.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* ==============================
   BOUTONS LISTE MEDICAMENTS – ULTRA PREMIUM
============================== */
/* ==============================
   MEDICAMENT ROW – STRUCTURE ALIGNÉE
============================== */

.medRow{
  padding:16px 18px;
  border-radius:18px;
  margin-bottom:16px;
  background:#ffffff;
  border:1px solid var(--border);
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  transition:all .15s ease;
}

.medRow:hover{
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

/* Ligne haute */
.medRow .top-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Nom médicament */
.medRow .med-name{
  font-size:15px;
  font-weight:700;   /* 🔥 bien gras */
}
.medRow .actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

.medRow .actions button{
  width:auto;
  padding:4px 10px;
  font-size:11px;
  font-weight:600;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:transparent;
  line-height:1.2;
  transition:all .15s ease;
}

/* Modifier */
.medRow .actions .btn-white{
  background:#f4f6f8;
  border:1px solid rgba(0,0,0,.06);
  color:var(--text);
}

.medRow .actions .btn-white:hover{
  background:#e9ecef;
  transform:translateY(-1px);
}

/* Supprimer */
.medRow .actions .btn-danger{
  background:transparent;
  color:#e53935;
  border:1px solid rgba(229,57,53,.4);
}

.medRow .actions .btn-danger:hover{
  background:#e53935;
  color:white;
  border-color:#e53935;
  transform:translateY(-1px);
}

/* Ligne basse : détails */
.medRow .details{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}
/* PRISES GRID */
.prise-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media(max-width:900px){
  .prise-grid{ grid-template-columns:1fr; }
}
.prise-card{
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
}
.prise-title{
  font-weight:700;
  font-size:14px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

/* AVENIR GRID */
.avenir-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media(max-width:900px){
  .avenir-grid{ grid-template-columns:1fr; }
}
.avenir-card{
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
}
.avenir-title{
  font-weight:700;
  font-size:14px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

/* MODAL (IMPORTANT: display:none par défaut) */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:none;              /* <<< crucial */
  justify-content:center;
  align-items:center;
  z-index:9999;
  padding:18px;
}
.modal{
  background:white;
  width:min(520px, 100%);
  padding:18px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.22);
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.modal h3{ margin:0; }
.modal input, .modal select{ margin-bottom:12px; }
.modal-actions{
  display:flex;
  gap:10px;
  margin-top:6px;
}
.modal-actions button{ width:50%; }
.modal-close{ width:auto; }
/* =====================================
   UI MODAL PREMIUM
===================================== */

.ui-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  backdrop-filter:blur(4px);
}

.ui-modal{
  width:min(420px, 90%);
  background:white;
  border-radius:18px;
  padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation:modalPop .18s ease;
}

@keyframes modalPop{
  from{ transform:scale(.95); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

.ui-modal-title{
  font-weight:700;
  font-size:16px;
  margin-bottom:12px;
}

.ui-modal-content{
  font-size:14px;
  margin-bottom:20px;
}

.ui-modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.ui-modal-actions button{
  width:auto;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}
/* =========================================
   TOAST CENTER PREMIUM
========================================= */

.toast-center{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:10000;
}

.toast-message{
  background:rgba(28,28,30,.95);
  color:white;
  padding:14px 22px;
  border-radius:18px;
  font-size:14px;
  font-weight:600;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
  animation:toastIn .25s ease forwards;
}

@keyframes toastIn{
  from{ opacity:0; transform:scale(.92); }
  to{ opacity:1; transform:scale(1); }
}

@keyframes toastOut{
  from{ opacity:1; transform:scale(1); }
  to{ opacity:0; transform:scale(.92); }
}
/* ===============================
   OBSERVANCE COLORS
=============================== */

.medRow.apprendre{
  border-left:4px solid #ff9800;
  background:rgba(255,152,0,.05);
}

.medRow.retard{
  border-left:4px solid #e53935;
  background:rgba(229,57,53,.05);
}

.medRow.pris{
  border-left:4px solid #2e7d32;
  background:rgba(46,125,50,.05);
}

/* Bouton Pris premium */
.btn-pris{
  background:#2e7d32;
  color:white;
  border:1px solid #2e7d32;
}

.btn-pris:hover{
  background:#1b5e20;
}