/* -------------------------------------------------
   STYLE "Bleu-clinique" — Ordonnances.ma
   Police Poppins · Design minimal & clair
--------------------------------------------------*/

/* ----- Google Font ----- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* ---------- PALETTE ---------- */
:root{
  --bg:#f6f8fc;          /* fond gris bleu très clair  */
  --fg:#1c1c1e;          /* texte principal            */

  --primary:#4257ff;     /* bleu d’accent principal    */
  --primary-dk:#3344d1;  /* bleu foncé (hover, titres) */

  --accent:#00b894;      /* vert malachite (médicaments) */

  --card:#ffffff;        /* cartes / cadres            */
  --radius:18px;
  --shadow:0 4px 14px rgb(0 0 0 /.05);
}

/* ---------- RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.55;
}

/* ---------- STRUCTURE ---------- */
header,footer{
  background:var(--card);
  padding:1rem 2rem;
  box-shadow:var(--shadow);
}
header h1{
  font-size:1.6rem;
  font-weight:600;
  color:var(--primary-dk);
}
header a{
  color:var(--primary-dk);
  text-decoration:none;
  margin-right:1rem;
  font-weight:500;
}
main{
  max-width:920px;
  margin:auto;
  padding:2rem;
}

/* ---------- FORMULAIRES ---------- */
input,button{
  font:inherit;
  padding:.6rem 1rem;
  border:1px solid #ccd6d4;
  border-radius:var(--radius);
}
input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgb(66 87 255 /.28);
}
button{
  background:var(--primary);
  color:#fff;
  border:none;
  cursor:pointer;
  transition:.2s;
}
button:hover{
  background:var(--primary-dk);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

/* ---------- LISTE PATHOLOGIES ---------- */
ul{list-style:none;margin-top:1.6rem;}
li{
  background:var(--card);
  padding:1.1rem 1.3rem;
  margin-bottom:1rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:.2s;
}
li:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 18px rgb(0 0 0 /.08);
}
li a{
  color:var(--primary-dk);
  text-decoration:none;
  font-weight:500;
}

/* ---------- TITRE ORDONNANCE (hors cadre) ---------- */
.ord-title{
  font-size:1.25rem;
  font-weight:600;
  color:var(--primary-dk);
  margin-bottom:1rem;
}

/* ---------- CADRE ORDONNANCE ---------- */
.ord-card{
  background:var(--card);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.8rem;
  margin-bottom:2.2rem;
}

/* Liste de médicaments */
.med-list{list-style:decimal;margin:0;padding-left:1.4rem;}
.med-item{margin-bottom:1rem;}
.med-name{
  font-weight:600;
  color:var(--primary-dk);
}
.mol{
  font-size:.85rem;
  font-style:italic;
  color:var(--accent);
  margin-left:.35rem;
}
.poso{
  margin-top:.18rem;
  font-size:.95rem;
  color:#3d3d48;
}

/* ---------- ACCORDÉONS ---------- */
details{
  background:var(--card);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow);
  margin-top:1.2rem;
  transition:.2s;
}
summary{
  cursor:pointer;
  font-weight:500;
  color:var(--primary-dk);
}
details[open]{border-left:4px solid var(--primary);}

/* ---------- MODALES ---------- */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.55);
  padding:3vw;
}
.modal-content{
  background:var(--card);
  border-radius:var(--radius);
  max-width:720px;
  margin:auto;
  padding:2rem;
  box-shadow:var(--shadow);
  max-height:90vh;
  overflow:auto;
}
.close{
  float:right;
  font-size:1.5rem;
  color:#888;
  cursor:pointer;
}
pre{white-space:pre-wrap;font-size:.9rem}

/* ---------- MODE MOBILE (<600 px) ---------- */
@media (max-width:600px){
  body{font-size:15px;}

  header h1{font-size:1.35rem;}
  .ord-title{font-size:1.1rem;}

  .med-name{font-size:.95rem;}
  .mol{font-size:.78rem;}
  .poso{font-size:.85rem;}

  main{padding:1.4rem;}
  .ord-card{padding:1.4rem;}
  .med-item{margin-bottom:.8rem;}
  details{margin-top:1rem;padding:.8rem;}
}

/* ---------- Fix PRE dans les modales ---------- */
.modal-content pre{
  white-space: pre;      /* évite la casse "12 / comprimés" */
  overflow: auto;        /* scroll horizontal si besoin */
}

/* ---------- Tableau responsive pour les équivalents ---------- */
.rx-table-wrap{overflow-x:auto;}
.rx-table{width:100%;border-collapse:collapse;table-layout:auto;}
.rx-table th,.rx-table td{padding:.6rem .8rem;border-bottom:1px solid #e5e7eb;vertical-align:top;}
.rx-table th{text-align:left;font-weight:600;}
.ta-right{text-align:right;}
.nowrap{white-space:nowrap;}
.ppv{font-variant-numeric:tabular-nums;}

@media (max-width:520px){
  .rx-table thead{display:none;}
  .rx-table,.rx-table tbody,.rx-table tr,.rx-table td{display:block;width:100%;}
  .rx-table tr{
    margin:0 0 .75rem 0;padding:.6rem .8rem;border:1px solid #e5e7eb;border-radius:.75rem;background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .rx-table td{border:0;padding:.3rem 0;display:flex;justify-content:space-between;gap:1rem;}
  .rx-table td::before{content:attr(data-label);font-weight:600;color:#374151;flex:1 0 46%;}
  .ta-right{text-align:left;} /* en “carte”, on aligne tout à gauche */
}

/* ====== MOBILE (un peu plus petit) — overrides ====== */
@media (max-width:600px){
  /* base générale */
  body{ font-size:14px; line-height:1.5; }

  /* titres */
  header h1{ font-size:1.2rem; }
  .ord-title{ font-size:1rem; }

  /* ordonnance */
  .med-name{ font-size:.9rem; }
  .mol{ font-size:.74rem; }
  .poso{ font-size:.82rem; }

  /* accordéons + modales */
  summary{ font-size:.95rem; }
  .modal-content pre{ font-size:.85rem; }
}

/* écrans très étroits (≤360px) : un chouïa de plus */
@media (max-width:360px){
  body{ font-size:13px; }
  .med-name{ font-size:.86rem; }
  .poso{ font-size:.8rem; }
} /* ← accolade fermante ajoutée ici */