@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap");

:root{
  --bg:#eef3fb;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#6b778c;

  --shadow: 0 10px 30px rgba(15,23,42,.10);
  --shadow-soft: 0 8px 22px rgba(15,23,42,.08);

  --radius:24px;

  --blue:#3b82f6;
  --blueSoft:#eaf3ff;

  --green:#16a34a;
  --greenSoft:#eaf7ee;

  --dark:#334155;

  --shock:#eab308;
  --adrStrong:#22c55e;
  --adrSoft:#dcfce7;
  --amio:#f97316;

  --noflow:#1e3a8a;
  --pink:#ec4899;

  --stroke:#dde6f5;
  --stroke2:#e6edf8;
}

*{box-sizing:border-box}
html,body{height:100%}

/* Empêche le “shift” horizontal entre pages avec/sans scrollbar */
html{
  overflow-y: scroll;          /* fallback simple */
  scrollbar-gutter: stable;    /* moderne: réserve la gouttière */
  -webkit-text-size-adjust: 100%; /* ✅ iOS: évite les zooms auto de texte */
}
body{
  margin:0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app{min-height:100vh; display:flex; flex-direction:column;}
.app-main{
  flex:1;
  padding:18px 16px 110px;
  max-width: 620px;
  margin:0 auto;
  width:100%;
}

.page { padding: 0; padding-bottom: 90px; }

.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  margin:0 0 16px;
}

/* Typo globale: plus “fine” */
h1,h2{margin:0 0 10px}
h1{font-size:30px; font-weight:800; letter-spacing:-.35px}
h2{font-size:20px; font-weight:800; letter-spacing:-.2px}
.muted{color:var(--muted); font-weight:600;}
.small{font-size:12px}
.center{text-align:center}

.row{display:flex; align-items:center}
.gap{gap:10px}
.wrap{flex-wrap:wrap}
.rowhead{display:flex; justify-content:space-between; align-items:center;}

/* ===== Bottom nav ===== */
.bottom-nav{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  width:min(620px, calc(100% - 32px));
  background:#ffffffcc;
  backdrop-filter: blur(10px);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
  pointer-events:auto;
}
.bottom-nav-inner{
  display:grid;
  grid-template-columns: repeat(4,1fr);
}
.bottom-nav{
  padding-bottom: env(safe-area-inset-bottom);
}
.page{
  padding-bottom: calc(80px + env(safe-area-inset-bottom)); /* si ta nav fait ~80px */
}
.bottom-tab{
  border:0;
  background:transparent;
  padding:12px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:#60718d;
  cursor:pointer;
  text-decoration:none;
}
.bottom-tab .ico{
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
}
.bottom-tab .ico svg{width:22px; height:22px; display:block;}
.bottom-tab.active{background:#e7f0ff; color:var(--blue);}

/* ===== Generic buttons ===== */
.btn{
  border:0;
  border-radius:18px;
  padding:12px 14px;
  background:#eef2ff;
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}
.btn.primary{background:var(--blue); color:white;}
.btn.big{padding:18px 18px; border-radius:22px; font-size:18px;}
.btn.disabled, .btn:disabled{opacity:.55; cursor:not-allowed;}
.w100{ width:100%; }
.right{margin-left:auto; font-weight:800; opacity:.85;}

.pill{
  border:1px solid rgba(15,23,42,.18);
  background:#fff;
  border-radius:999px;
  padding:9px 12px;
  font-weight:700;
  cursor:pointer;
}
.pill.pillIcon{
  display:flex;
  align-items:center;
  gap:8px;
}
.pillIco{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
}
.pillIco svg{ width:18px; height:18px; display:block; }

/* Outline danger (supprimer) */
.btn.dangerOutline{
  background:#fff;
  border:1px solid rgba(239,68,68,.35);
  color:#b91c1c;
  font-weight:800;
}

/* ===== Temps cas (En cours) ===== */
.timer-card{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;}
.timer-left{display:flex; flex-direction:column; gap:6px;}
.timer-right{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.timer-big{font-size:56px; font-weight:800; letter-spacing:-1px;}
/* ✅ Nouvelle disposition demandée (Infos à gauche / Param à droite) */
.timerBar{
  display:grid;
  grid-template-columns: 92px 1fr 92px;
  gap:12px;
  align-items:stretch;
}
.timerSideBtn{
  width:100%;
  height:100%;
  border:1px solid rgba(148,163,184,.55);
  background:#fff;
  border-radius:14px;
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  color:#334155;
}
.timerSideBtn .pillIco{ color:#94a3b8; }
.timerCenter{
  border-radius: 18px;
  background:#fff;
  border:1px solid rgba(148,163,184,.45);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
  padding:14px;
  text-align:center;
}
.timerCenterTop{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:#334155;
  font-weight:700;
}
.timerCenterTop .pillIco{ color:#94a3b8; }
.timerCenterBig{
  margin-top: 6px;
  font-size:56px;
  font-weight:800;
  letter-spacing:-1px;
  color:#0b1220;
}
.timerCenterSub{
  margin-top: 6px;
  color: var(--muted);
  font-weight:600;
}

/* ===== ARCA slider (En cours) ===== */
.arcaSlider { margin-top: 6px; }
.arcaTrack{
  position: relative;
  height: 74px;
  border-radius: 18px;

  /* ✅ fondu plus clair à gauche vers rouge foncé à droite */
  background: linear-gradient(90deg, #fb7185 0%, #991b1b 100%);

  /* ✅ bord latéral gauche rose homogène (plus “rose” que rouge foncé) */
  border: 1px solid #f2b0b7;

  overflow: hidden;
}
.arcaLabel{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: .1px;
  padding: 0 22px;
  pointer-events:none;
}
.arcaKnob{
  position:absolute;
  top:8px;
  left:8px;
  height:58px;
  width:58px;
  border-radius:14px;
  background:#ffffff;
  border:none;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  touch-action:none;
}

/* ===== ARCA actif (En cours) ===== */
.arcaHeader{
  display:grid;
  grid-template-columns: 70px 1fr 70px;
  gap:12px;
  align-items:stretch;
}
.sideTile{
  border:1px solid rgba(0,0,0,0.10);
  background:rgba(255,255,255,0.95);
  border-radius:16px;
  font-weight:800;
  cursor:pointer;
}
.arcaTimerCard{
  width:100%;
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:18px;
  padding:14px;
  text-align:center;
  box-shadow: var(--shadow-soft);
}
.arcaTimerTitle{ font-weight:800; opacity:.85; display:flex; gap:8px; justify-content:center; align-items:center; }
.arcaTimerRed{ font-size:52px; font-weight:800; color:#dc2626; letter-spacing:1px; margin-top:6px; }
.arcaTimerSub{ margin-top:8px; font-weight:800; opacity:.75; }
.arcaTimerBlack{ font-size:36px; font-weight:800; color:#111827; margin-top:2px; } /* ✅ un peu plus grand (check rythme) */
.icoClock{ display:inline-flex; }

.btn.noflow{
  width:100%;
  margin-top:0;            /* ✅ IMPORTANT : ne doit JAMAIS être là dans une grille */
  background:var(--noflow);
  color:#fff;
  font-size:20px;
  padding:16px 14px;
  border-radius:20px;
}
/* ✅ ARCA — 4 boutons du haut : même hauteur (No-flow / Temp / ROSC / Décès) */
.arcaTopBtn{
  min-height: 56px;          /* = hauteur “No-flow” visuelle */
  padding: 16px 14px;
  border-radius: 20px;
  font-size: 20px;
  line-height: 1.05;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  width:100%;
}

/* ✅ Température : garde le style “tile blanche” */
.arcaTopBtn.tempTile{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  color: var(--text);
}
.arcaRow2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.btn.rosc{background:var(--green); color:white; font-size:20px; padding:18px; border-radius:20px;}
.btn.death{background:var(--dark); color:white; font-size:20px; padding:18px; border-radius:20px;}
.btn.shock{
  width:100%;
  margin-top:12px;
  background: var(--shock);
  color:#0b1220;
  font-size:20px;
  padding:18px;
  border-radius:20px;
}
.btn.adr{
  width:100%;
  margin-top:12px;
  background: var(--adrStrong);
  color:white;
  font-size:20px;
  padding:18px;
  border-radius:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.btn.adr.disabled, .btn.adr:disabled{
  background: var(--adrSoft);
  color:#065f46;
  opacity:1;
}
.btn.amio{
  width:100%;
  margin-top:12px;
  background: var(--amio);
  color:white;
  font-size:20px;
  padding:18px;
  border-radius:20px;
}
.rhythmGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.rhythmBtn{
  border:1px solid rgba(148,163,184,.35); /* ✅ garde un bord visible */
  padding:0;
  background:#fff;
  border-radius:12px; /* ✅ moins arrondi -> ne tronque plus le bord gris */
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
.rhythmBtn img{width:100%; display:block;}
.rhythmBtn.selected{ outline:none; }
.rhythmBtn.disabled{
  opacity:.45;
  filter:grayscale(0.6);
}

/* ECMO */
.ecmoWrap{ margin-top:14px; border-radius:18px; overflow:hidden; border:1px solid rgba(127,29,29,0.18); box-shadow:0 10px 24px rgba(15,23,42,.08); }
.ecmoHead{
  width:100%;
  border:0;
  background:#7f1d1d;
  color:#fff;
  padding:14px 14px;
  border-radius:18px; /* ✅ angle propre */
  font-weight:800;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ecmoBody{
  display:none;
  background:rgba(127,29,29,0.08);
  border-top:1px solid rgba(255,255,255,0.18);
  border-radius:0 0 18px 18px;
  padding:12px;
}
.ecmoBody.open{ display:block; }
.chk{display:flex; gap:10px; align-items:center; padding:10px 6px; font-weight:800;}
.chk input{ transform:scale(1.15); }

/* AB / C */
.abcGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:12px;
}
.abcCard{
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  padding:12px;
}
.abcTitle{ font-weight:800; text-align:center; margin-bottom:10px; }
.btn.ab{
  width:100%;
  background:#3b82f6;
  color:#fff;
  border-radius:12px;
  margin-bottom:10px;
  padding:12px;
  font-weight:800;
}
.btn.c{
  width:100%;
  background:var(--pink);
  color:#fff;
  border-radius:12px;
  margin-bottom:10px;
  padding:12px;
  font-weight:800;
}

/* 4H-4T */
.btn.four{
  width:100%;
  background:#000;
  color:#fff;
  border-radius:12px;
  padding:14px;
  font-weight:800;
  margin-top:10px;
}

/* ===== Search (En cours) ===== */
.searchWrap{ position:relative; }

.searchbox{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:10px 12px;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.searchbox input{
  border:0;
  outline:none;
  width:100%;
  font-size:16px;
  font-weight:600;
  color:var(--text);
}
.sico{
  opacity:.6;
  color:#94a3b8;
  display:inline-flex;
  align-items:center;
}
.sico svg{ width:18px; height:18px; display:block; }
/* Dropdown suggestions */
.suggest{
  display:none;
  position:absolute;
  left:0; right:0;
  top:54px;
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 14px 40px rgba(15,23,42,0.14);
  z-index:20;
  max-height: 320px;
  overflow:auto;
}
.suggest.open{ display:block; }

.suggestEmpty{
  padding:12px 12px;
  font-weight:700;
  color:var(--muted);
}

/* Ligne de suggestion (liste) */
.suggestRow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  border-bottom:1px solid rgba(15,23,42,0.06);
}
.suggestRow:last-child{ border-bottom:0; }
.suggestRow:hover{ background:#f6f9ff; }

.suggestLabel{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.1px;
  color:var(--text);
}

/* Pilule “molécule / marque” DANS LES SUGGESTIONS : vert clair pour les deux */
.suggest .tagPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background: var(--greenSoft);
  color: #166534;
  border: 1px solid rgba(34,197,94,.30);
  white-space:nowrap;
}
.suggest .tagDci{}
.suggest .tagBrand{}

/* Suggestions actes (ancienne classe) */
.suggestItem{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:10px 12px;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  font-size:16px;
  font-weight:700;
  border-bottom:1px solid rgba(15,23,42,0.06);
}
.suggestItem:last-child{ border-bottom:0; }
.suggestItem:hover{ background:#f6f9ff; }

/* ===== mini meta chips (dose/route) ===== */
.miniDose{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:700;
  color:#64748b; /* ✅ gris */
}
.miniPill{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:700;

  /* ✅ demandé : pas de fond gris, affichage comme texte */
  padding:0;
  border-radius:0;
  background:transparent;

  color:#64748b;
}

/* ===== Recents list (En cours) — aligné avec Chronologie détaillée ===== */
.recentList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.recentItem{
  width:100%;
  display:flex;
  align-items:center; /* ✅ centrage vertical */
  justify-content:space-between;

  padding:12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:#fff;

  cursor:pointer;
  text-align:left;

  /* même “touch” que les cards de Chronologie */
  box-shadow: 0 6px 14px rgba(15,23,42,.05);
}

.recentItem.med{
  background: var(--greenSoft);
  border-color: rgba(34,197,94,.35);
}

.recentItem.act{
  background:#fff;
}

.recentLeft{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.recentLabel{
  font-weight:750;
  font-size:16px; /* ✅ plus grand */
  letter-spacing:-.1px;
  line-height:1.15;
  color: var(--text);
}

.recentSub{
  font-size:13px; /* ✅ plus grand */
  font-weight:600;
  color:#64748b;
  line-height:1.2;
}

.recentRight{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:12px;
  flex-shrink:0;
}

.recentMeta{
  font-size:12px;
  font-weight:600;
  color:#64748b;
}
.recentEdit{
  width:30px;
  height:30px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  color:#64748b;
  font-weight:700;
}

/* ===== Modals ===== */
.input{
  width: 100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  outline: none;
  font-size: 16px;
  font-weight:600;
}
.select{
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background:#fff;
  font-weight:700;
}
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.35);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:18px;
  z-index:9999;
}
.modalCard{
  width:min(560px, 96vw);
  background:rgba(255,255,255,0.98);
  border-radius:18px;
  padding:16px;
  position:relative;
  box-shadow:0 18px 60px rgba(0,0,0,0.20);
}
.modalClose{
  position:absolute;
  right:12px;
  top:10px;
  border:0;
  background:rgba(0,0,0,0.06);
  width:36px;
  height:36px;
  border-radius:12px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
}
.modalTitle{ font-weight:800; font-size:18px; margin-bottom:12px; }
.modalBody{ padding-top:6px; }
.modalField{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}
.modalBody { -webkit-overflow-scrolling: touch; }
.unit{ font-weight:700; opacity:.7; padding:0 8px; }

/* Confirm modal */
.confirmBox{ padding: 4px 0 0; }
.confirmMsg{
  font-weight:700;
  color:#475569;
  margin: 4px 0 14px;
}
.confirmRow{
  display:flex;
  gap:10px;
}

/* Edit sheet */
.editSheet{ padding-top: 2px; }
.editTitle{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.2px;
  margin: 0 0 10px;
}
.fieldLabel{
  font-size:12px;
  font-weight:700;
  color:#64748b;
  margin: 10px 0 6px;
}
.fieldRow{ display:flex; gap:10px; align-items:center; }
.doseRow .input{ flex:1; }
.doseRow .select{ width:110px; }

.routeGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr); /* ✅ 2 lignes pour 8 voies */
  gap:10px;
  margin-top: 6px;
}
.routeBtn{
  border:1px solid var(--stroke);
  background:#fff;
  padding:12px 10px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 6px 14px rgba(15,23,42,.05);
}
.routeBtn.on{
  border-color: rgba(59,130,246,.35);
  background: #eaf3ff;
  color:#1d4ed8;
}

.editActions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top: 16px;
}

/* 4H-4T modal */
.fourModal{ padding-top: 4px; }
.glyRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; }
.glyLabel{ font-weight:800; }
.glyInput{ display:flex; gap:10px; align-items:center; flex:1; }
.glyInput .input{ flex:1; }

.h4tGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin: 10px 0 14px;
}
.h4t{
  border:1px solid var(--stroke);
  background:#fff;
  padding:12px 10px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  box-shadow: 0 6px 14px rgba(15,23,42,.05);
}
.h4t.done{
  background: var(--greenSoft);
  border-color: rgba(34,197,94,.25);
  color:#166534;
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:110px;
  background:#111827;
  color:#fff;
  padding:12px 14px;
  border-radius:14px;
  font-weight:700;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
  z-index:99999;
}

/* =========================================================
   ===============   RÉSUMÉ — SCOPÉ   =======================
   Important: TOUT sous .summaryPage pour ne pas casser En cours
   ========================================================= */

.summaryPage{
  padding-top: 6px;
}

/* En-tête centré */
.summaryPage .summaryHead{
  text-align:center;
  margin-bottom: 10px;
}
.summaryPage .summaryTitle{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin: 0;
}
.summaryPage .summaryDur{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
}
.summaryPage .summaryDur span{
  font-weight: 700;
  color:#0b1220;
}

/* Barre Transférer */
.summaryPage .transferBtn{
  width: min(520px, calc(100% - 80px)); /* ✅ moins large */
  margin: 0 auto;

  background:#0f766e;                 /* ✅ cyan foncé */
  color:#ffffff;                      /* ✅ texte blanc */
  border: 1px solid rgba(15,118,110,.45);

  border-radius: 18px;
  padding: 22px 18px;                 /* ✅ ~2x plus haut */
  min-height: 74px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
  cursor:pointer;
}
.summaryPage .transferIco{
  opacity: 1;
  color:#ffffff;                      /* ✅ icône blanche */
  display:inline-flex;
}

/* Grille 2 cartes */
.summaryPage .infoGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top: 12px;

  /* ✅ espacement demandé (même “respiration” avant ARCA) */
  margin-bottom: 16px;
}
.summaryPage .infoCard{
  background:#fff;
  border-radius: 16px;
  border:1px solid #dde6f5;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  padding: 14px;
}
.summaryPage .infoCardTop{
  display:flex;
  gap:10px;
  align-items:center;
}
.summaryPage .infoIco{
  width:28px; height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background:#f3f6ff;
  color:#94a3b8;
}
.summaryPage .infoIco svg{ width:18px; height:18px; display:block; }
.summaryPage .infoTitle{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.1px;
}
.summaryPage .infoSub{
  margin-top: 2px;
  font-size: 12px;
  color:#64748b;
  font-weight: 600;
}
.summaryPage .infoTiny{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color:#475569;
}

/* Bloc résumé générique */
.summaryPage .summaryBlock{
  padding: 16px;
}
.summaryPage .blockHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 10px;
}
.summaryPage .blockTitle{
  font-weight: 800;
  font-size: 15px;
  display:flex;
  gap:8px;
  align-items:center;
  letter-spacing: -.1px;
}
.summaryPage .blockTitle .icoLine{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;  /* ✅ évite le coeur tronqué */
  height:24px; /* ✅ évite le coeur tronqué */
  color:#94a3b8;
}
.summaryPage .blockTitle .icoLine svg{ width:24px; height:24px; display:block; }
.summaryPage .blockRight{
  font-size: 12px;
  font-weight: 600;
  color:#64748b;
}
.summaryPage .heartIco{ color:#ef4444; }

/* ARCA grid */
.summaryPage .arcaGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.summaryPage .arcaTile{
  background:#fbfdff;
  border:1px solid #dde6f5;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: none;
}
.summaryPage .arcaK{
  font-size: 11px;
  font-weight: 600;
  color:#64748b;
  margin-bottom: 3px;
  letter-spacing: .1px;
}
.summaryPage .arcaV{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.15px;
  color:#0b1220;
}
.summaryPage .tinyIco{ margin-left: 6px; opacity: .9; }

/* Résumé des Médicaments */
.summaryPage .sumMedGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.summaryPage .sumMedCard{
  background: #eaf3ff;
  border: 1px solid #d7e6ff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}
.summaryPage .sumMedTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.summaryPage .sumMedName{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.1px;
}
.summaryPage .sumMedDose{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
  color:#1d4ed8;
}
.summaryPage .sumMedLast{
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color:#475569;
}

/* Timeline */
.summaryPage .timelineList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.summaryPage .timelineCard{
  border:1px solid #dde6f5;
  border-radius: 12px;
  padding: 12px;
  background:#fff;
  box-shadow: 0 6px 14px rgba(15,23,42,.05);
}
.summaryPage .timelineCard.med{
  background:#eaf7ee;
  border-color: rgba(34,197,94,.35);
}
.summaryPage .timelineTitleRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.summaryPage .timelineTitle{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.1px;
}
.summaryPage .timelineMetaRight{
  display:flex;
  gap:8px;
  align-items:center;
}
.summaryPage .timelineMetaRight .miniDose,
.summaryPage .timelineMetaRight .miniPill{
  color:#64748b; /* ✅ gris */
}
.summaryPage .timelineMeta{
  margin-top: 6px;
  display:flex;
  gap:12px;
  align-items:center;
  color:#64748b;
  font-size: 12px;
  font-weight: 600;
}
.summaryPage .tmeta{ display:inline-flex; gap:6px; align-items:center; }

@media (max-width: 420px){
  .summaryPage .sumMedGrid{ grid-template-columns: 1fr; }
  .routeGrid{ grid-template-columns: repeat(2, 1fr); }
  .h4tGrid{ grid-template-columns: 1fr; }
}
.summaryPage .arcaVRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.summaryPage .shockIco{
  color:#eab308; /* jaune */
}

.summaryPage .adrIco{
  color:#16a34a; /* vert */
}

.summaryPage .infoIco{
  color:#64748b; /* gris simple pour les deux cartes */
}
.tileIco{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8; /* gris clair */
  margin-right:8px;
  vertical-align:middle;
}
.sideTile .tileIco{ margin-right:6px; }
.pill .tileIco{ margin-right:6px; }

/* ===== Paramètres modal ===== */
.paramGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-bottom: 14px;
}
.paramField{ min-width:0; }
@media (max-width: 420px){
  .paramGrid{ grid-template-columns: 1fr; }
}

/* ✅ Bouton "Clôturer et archiver le cas" (Résumé) */
.summaryPage .closeArchiveBtn{
  width:100%;
  margin-top: 16px;
  background:#0f172a;
  color:#fff;
  border-radius:18px;
  padding:18px 16px;
  font-size:16px;
  font-weight:700;
  box-shadow: 0 12px 26px rgba(15,23,42,.12);
}

/* ===== Chips (Infos patient modal) ===== */
.infoModalSection{ margin-bottom: 14px; }
.chipsWrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 8px;
}
.chip{
  border:1px solid rgba(148,163,184,.55);
  background:#fff;
  border-radius:999px;
  padding:8px 10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  box-shadow: 0 6px 14px rgba(15,23,42,.05);
}
.chipTxt{
  font-weight:700;
  font-size:13px;
  color:#0b1220;
}
.chipX{
  color:#94a3b8;
  font-weight:800;
  line-height:1;
}
.infoCardBtn{
  border:0;
  text-align:left;
  cursor:pointer;
}

/* =========================================================
   ===============   INFOS — SCOPÉ   ========================
   ========================================================= */
.infosPage .grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top: 18px; /* ✅ un peu plus bas sous le titre */
  margin-bottom: 10px;
}
.infosPage .bigLink{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  text-decoration:none;
}
.infosPage .bigLink:visited{ text-decoration:none; }
.infosPage .bigIcon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.infosPage .bigLabel{
  font-size:16px;
  font-weight:800;
  color:#60a5fa; /* ✅ bleu clair constant */
}
.infosPage .bigLink:visited .bigLabel{ color:#60a5fa; } /* ✅ pas de violet */
.infosPage .bigLink.disabled{
  opacity:.55;
  pointer-events:none;
}
.infosPage .infoSeparator{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(148,163,184,.35);
}

/* =========================================================
   ===============   ARCHIVES — SCOPÉ   =====================
   ========================================================= */
.archivesPage h1{ text-align:center; }
.caseRow{ position:relative; overflow:hidden; }
.caseRow::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:10px;                 /* ✅ 2x plus épais */
  background:#16a34a;         /* ✅ vert plus foncé */
}
.caseRow .card{ position:relative; }
.caseRow > .row{ position:relative; }

@media (max-width: 420px){
  .infosPage .grid2{ grid-template-columns: 1fr; }
}
/* ===== Start tweaks ===== */
.btn.success{ background: var(--green); color:#fff; }
.btn.success:disabled{ opacity:.55; }

.startPage .card{ margin-bottom: 18px; }
.startPage .startMain h1{ margin-bottom: 18px; }
.startPage .startMain .btn{ margin-top: 14px; }
.startPage .importCard{ margin-top: 20px; }
/* Sticky ARCA bar (global) */
.stickyArcaBar {
  position: fixed;
  left: 12px;
  right: 12px;
  top: 10px;
  z-index: 9999;
  transform: translateY(-140%);
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 0;
  pointer-events: none;
}

.stickyArcaBar.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.stickyArcaInner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(8px);
}

.stickyLbl {
  font-weight: 800;
  font-size: 12px;
  color: #64748b;
  margin-right: 6px;
}

.stickyVal {
  font-weight: 900;
  font-size: 14px;
  color: #0b1220;
}

.stickyArcaSep {
  font-weight: 900;
  color: #94a3b8;
}
.arcaTopBtn.tempTile{
  background:#fff !important;
}
/* ✅ Uniformise la taille des icônes IMG dans les wrappers d'icônes */
.pillIco img{
  width:18px !important;
  height:18px !important;
  display:block;
  object-fit:contain;
}

.summaryPage .infoIco img{
  width:18px !important;
  height:18px !important;
  display:block;
  object-fit:contain;
}

/* =========================================================
   ✅ RESPONSIVE “SAFE” (petits téléphones)
   - évite timers qui débordent
   - évite colonnes 92px trop serrées
   - réduit légèrement padding + font-size
   ========================================================= */

@media (max-width: 380px){
  h1{ font-size:26px; }
  h2{ font-size:18px; }

  .card{ padding:14px; }

  /* Timer bar: colonnes plus petites */
  .timerBar{
    grid-template-columns: 78px 1fr 78px;
    gap:10px;
  }
  .timerSideBtn{
    border-radius:12px;
    font-weight:800;
    gap:6px;
  }
  .timerCenter{
    padding:12px;
    border-radius:16px;
  }
  .timerCenterBig{
    font-size:44px;          /* ✅ évite débordements */
    letter-spacing:-.6px;
  }

  /* ARCA slider label un peu plus petit */
  .arcaLabel{
    font-size:18px;
    padding: 0 16px;
  }

  /* Gros boutons ARCA: un chouïa plus compacts */
  .arcaTopBtn{
    min-height: 52px;
    padding:14px 12px;
    font-size:18px;
  }
  .btn.noflow{ font-size:18px; padding:14px 12px; }
  .btn.shock, .btn.adr, .btn.amio{ font-size:18px; padding:16px 14px; }

  /* Bottom nav: compacter un peu */
  .bottom-tab{
    padding:10px 6px;
    gap:5px;
    font-weight:800;
    font-size:12px;
  }
}

@media (max-width: 340px){
  /* Ultra petits écrans: réduire encore le timer */
  .timerCenterBig{ font-size:40px; }
  .timerBar{ grid-template-columns: 72px 1fr 72px; }
  .arcaLabel{ font-size:17px; }
}