/* ============================================================
   ORDONNANCE.NET — Composants spécifiques au multi-pays
   Complète assets/css/style.css (design system repris d'ordonnance.ma).
   N'y toucher que pour ce qui est propre à ordonnance.net : sélecteur de
   pays, cartes pays, illustration de l'adaptation, sources officielles.
   Mode sombre : les variables de style.css sont redéfinies sous
   html[data-theme="dark"], donc tout ce qui utilise var(--x) suit.
============================================================ */

/* ============================================================
   0. COULEUR DE MARQUE — ordonnance.net = PÉTROLE (ordonnance.ma = bleu)
   ------------------------------------------------------------
   Même charte, même structure, seule la teinte change : on garde
   le neutre froid, les rayons, les ombres et la typographie.
   • primaire : sarcelle profond / pétrole (remplace le bleu)
   • accent   : ambre                      (complémentaire, il réchauffe
                                            un ensemble sinon très froid)
   Le dégradé du héro reste dans UNE SEULE famille de teintes
   (pétrole très sombre → sarcelle → turquoise) : la variation porte sur
   la luminosité, pas sur la teinte. Des arrêts trop éloignés en teinte
   donnent un rendu terne — c'est ce qui plombait un premier essai en vert.
   Ces règles ARRIVENT APRÈS style.css : elles gagnent à spécificité
   égale. Rien n'est modifié dans le fichier copié d'ordonnance.ma.
   Comparateur des variantes essayées : palettes.html (à supprimer en prod).
============================================================ */
:root {
  --primary:        #0f766e;   /* sarcelle 700 — texte ET fond de bouton (blanc 5,5:1) */
  --primary-dk:     #115e59;   /* sarcelle 800 — survol */
  --primary-lt:     #ccfbf1;   /* sarcelle 100 — puces, fonds actifs */
  --secondary:      #14b8a6;   /* turquoise — 3ᵉ arrêt du dégradé */
  --accent:         #b45309;   /* ambre 700 — accent secondaire */
  --accent-lt:      #fff7ed;   /* ambre très clair (contraste 4,8:1) */
  --shadow-primary: 0 4px 20px rgba(15,118,110,.25);

  /* Fond des boutons d'action secondaires portant du texte BLANC.
     Variable distincte de --accent : en mode sombre --accent devient une
     couleur de TEXTE (ambre clair) et ne peut plus servir de fond —
     le bouton tomberait sous 2:1. */
  --cta:            #b45309;
  --cta-dk:         #92400e;
}

/* Dégradés et teintes codés en dur dans style.css → version pétrole */
.hero { background: linear-gradient(135deg, #042f2e 0%, #0f766e 50%, #14b8a6 100%); }
.hero h1 span            { color: #99f6e4; }
.alert--info             { color: #115e59; }
.audience-card--primary  { background: linear-gradient(135deg, #134e4a, #115e59); }
.audience-card--green    { background: linear-gradient(135deg, #92400e, #b45309); }
.patho-item:hover        { border-color: #99f6e4; }
/* style.css conserve le bleu d'ordonnance.ma pour la carte « molécule » en
   mode sombre (#6ea2f2, en dur). On la repasse en pétrole. */
html[data-theme="dark"] .mol-modal-card--blue { background: rgba(45,212,191,.10); }
html[data-theme="dark"] .mol-modal-card--blue .mol-modal-card__title { color: var(--primary); }
.hero__search-btn        { background: var(--cta); }
.hero__search-btn:hover  { background: var(--cta-dk); }
.med-table thead tr,
.med-row__head           { background: linear-gradient(135deg, var(--primary) 0%, #0d9488 100%); }

/* ---------- Mode sombre : mêmes neutres, teinte pétrole ---------- */
html[data-theme="dark"] {
  --primary:        #2dd4bf;   /* sarcelle 400 — lisible sur --surface (9,2:1) */
  --primary-dk:     #0f766e;   /* fond de bouton : blanc 5,5:1, contour 3,0:1 */
  --primary-lt:     #0d3b37;   /* fond de puce sombre */
  --secondary:      #5eead4;
  --accent:         #fbbf24;   /* ambre 400 — TEXTE uniquement en sombre */
  --accent-lt:      #3a2a08;
  --shadow-primary: 0 6px 20px rgba(15,118,110,.35);
  --cta:            #b45309;   /* reste sombre : blanc dessus à 5,0:1 */
  --cta-dk:         #92400e;
}
html[data-theme="dark"] .site-header__brand { color: #5eead4; }
html[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #08211f 0%, #0d4a45 50%, #0f6b62 100%);
}
/* Fond à #0f766e : c'est la seule valeur qui tienne les DEUX seuils du
   texte blanc (5,5:1). Son contour ne fait en revanche que 2,98:1 sur la
   carte, sous le 3:1 de WCAG 1.4.11 — éclaircir le fond corrigerait le
   contour mais ferait chuter le texte. On fait donc porter le contour par
   la bordure (déjà 2px dans style.css). */
html[data-theme="dark"] .btn--primary,
html[data-theme="dark"] .mobile-nav__btn--primary {
  background: #0f766e; border-color: #14b8a6; color: #fff;
}
html[data-theme="dark"] .btn--primary:hover,
html[data-theme="dark"] .mobile-nav__btn--primary:hover {
  background: #115e59; border-color: #2dd4bf;
}
/* Le carré du logo prend var(--primary), qui s'éclaircit en sombre : la
   croix blanche y tomberait à 2:1. On le fige sur la teinte foncée pour
   garder la même identité dans les deux thèmes. */
html[data-theme="dark"] .site-header__logo-icon,
html[data-theme="dark"] .site-footer__logo-icon { background: #0f766e; }

/* ---------- SÉLECTEUR DE PAYS (dans le héro) ---------- */
.pays-picker {
  max-width: 620px;
  margin: 32px auto 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-lg);
  padding: 20px;
  backdrop-filter: blur(6px);
  text-align: left;
}
.pays-picker__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .9rem;
  color: #fff;
  margin-bottom: 10px;
}
.pays-picker__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pays-picker__select {
  flex: 1 1 260px;
  min-width: 0;
  padding: 14px 16px;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.pays-picker__select:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.pays-picker__btn {
  flex: 0 0 auto;
  padding: 14px 24px;
  background: var(--cta);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .95rem;
  transition: background .15s, transform .15s;
}
.pays-picker__btn:hover { background: var(--cta-dk); transform: translateY(-1px); }
.pays-picker__note {
  margin-top: 12px;
  font-size: .82rem;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}
.pays-picker__note strong { color: #99f6e4; font-weight: 600; }

/* ---------- LES 3 PRINCIPES ---------- */
.principe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.principe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
}
.principe-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--primary-lt);
  color: var(--primary);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 14px;
}
.principe-card__title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
  margin-bottom: 8px;
}
.principe-card__desc {
  font-size: .9rem;
  color: var(--text-md);
  line-height: 1.65;
}
.principe-card__tag {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--font-ui);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.principe-card__tag--partage { background: var(--primary-lt); color: var(--primary); }
.principe-card__tag--local   { background: var(--accent-lt);  color: var(--accent); }
html[data-theme="dark"] .principe-card__tag--local { color: var(--accent); }

/* ---------- EXEMPLE D'ADAPTATION (molécule → nom local) ---------- */
.adapt {
  margin-top: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.adapt__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.adapt__title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.adapt__sub { font-size: .86rem; color: var(--text-muted); margin-top: 4px; }
.adapt__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.adapt__col { padding: 20px 22px; border-right: 1px solid var(--border); }
.adapt__col:last-child { border-right: none; }
.adapt__country {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .92rem;
  color: var(--text);
  margin-bottom: 12px;
}
.adapt__line { font-size: .87rem; color: var(--text-md); line-height: 1.7; }
.adapt__line b { color: var(--text); font-weight: 600; }
.adapt__brand {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .95rem;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 3px 10px;
  border-radius: 6px;
}
.adapt__warn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .85rem;
  color: #b45309;
  background: #fef3c7;
  padding: 3px 10px;
  border-radius: 6px;
}
html[data-theme="dark"] .adapt__warn { color: var(--warning); background: #3a2d13; }
.adapt__foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  line-height: 1.6;
}

/* ---------- GRILLE DES PAYS ---------- */
.pays-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.pays-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.pays-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.pays-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pays-card__flag { font-size: 1.5rem; line-height: 1; }
.pays-card__name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
}
.pays-card__meta { font-size: .78rem; color: var(--text-muted); }

.pays-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.pays-badge--actif    { background: var(--accent-lt); color: var(--accent); }
.pays-badge--prepa    { background: var(--primary-lt); color: var(--primary); }
.pays-badge--avenir   { background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border); }
.pays-badge--redirige { background: #fef3c7; color: #b45309; }
html[data-theme="dark"] .pays-badge--actif    { color: var(--accent); }
html[data-theme="dark"] .pays-badge--redirige { background: #3a2d13; color: var(--warning); }

/* ---------- SOURCES OFFICIELLES ---------- */
.sources-table-wrap { overflow-x: auto; margin-top: 24px; }
.sources-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .88rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sources-table th {
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.sources-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-md);
  vertical-align: top;
}
.sources-table tr:last-child td { border-bottom: none; }
.sources-table a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.sources-table__todo { color: var(--text-light); font-style: italic; }

/* ---------- ENCART AVERTISSEMENT ---------- */
.disclaimer {
  border: 1px solid var(--border);
  border-left: 4px solid var(--warning);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 24px;
}
.disclaimer h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 8px;
}
.disclaimer p { font-size: .89rem; color: var(--text-md); line-height: 1.7; }
.disclaimer p + p { margin-top: 10px; }

/* ---------- PAGE PAYS ---------- */
.pays-head {
  background: linear-gradient(135deg, #042f2e 0%, #0f766e 50%, #14b8a6 100%);
  color: #fff;
  padding: 56px 20px 48px;
  text-align: center;
}
html[data-theme="dark"] .pays-head {
  background: linear-gradient(135deg, #08211f 0%, #0d4a45 50%, #0f6b62 100%);
}
.pays-head__flag { font-size: 3rem; line-height: 1; margin-bottom: 10px; }
.pays-head h1 {
  font-family: var(--font-ui);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.pays-head__sub {
  color: rgba(255,255,255,.85);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
  font-size: .98rem;
}
.pays-head .pays-badge { margin-top: 14px; }

.waitlist {
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.waitlist__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .waitlist__row { grid-template-columns: 1fr; } }

/* ---------- BANDEAU DE NIVEAU DE RELECTURE ----------
   Il n'est pas décoratif : publier une adaptation avant relecture médicale
   n'est acceptable que si le lecteur voit d'où elle vient. D'où un bandeau
   pleine largeur, en tête d'ordonnance, pas une mention en pied de page. */
/* Format compact : une ligne repliée. L'information reste accessible,
   elle cesse d'occuper le haut de chaque page. */
.valid-note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-dk);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  margin-bottom: 18px;
  font-size: .84rem;
}
.valid-note > summary {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  color: var(--text-md);
}
.valid-note > summary::-webkit-details-marker { display: none; }
.valid-note > summary::after {
  content: '›'; margin-left: auto; color: var(--text-light);
  transform: rotate(90deg); transition: transform .15s;
}
.valid-note[open] > summary::after { transform: rotate(-90deg); }
.valid-note__pill {
  font-family: var(--font-ui); font-weight: 600; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.valid-note__court strong { color: var(--text); }
.valid-note__detail {
  padding: 0 12px 12px 12px;
  color: var(--text-md); line-height: 1.65;
}
.valid-note__meta { margin-top: 6px; font-size: .78rem; color: var(--text-muted); }

.valid-note--transpose { border-left-color: var(--warning); }
.valid-note--transpose .valid-note__pill { background: #fef3c7; color: #b45309; }
html[data-theme="dark"] .valid-note--transpose .valid-note__pill { background: #3a2d13; color: var(--warning); }
.valid-note--brut { border-left-color: var(--warning); }
.valid-note--brut .valid-note__pill { background: #fef3c7; color: #b45309; }
html[data-theme="dark"] .valid-note--brut .valid-note__pill { background: #3a2d13; color: var(--warning); }
.valid-note--redac { border-left-color: var(--primary); }
.valid-note--redac .valid-note__pill { background: var(--primary-lt); color: var(--primary); }
.valid-note--pro { border-left-color: var(--accent); }
.valid-note--pro .valid-note__pill { background: var(--accent-lt); color: var(--accent); }

.valid-badge {
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--surface);
}
.valid-badge__titre {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 6px;
}
.valid-badge__texte { font-size: .88rem; color: var(--text-md); line-height: 1.65; }
.valid-badge__meta  { font-size: .8rem; color: var(--text-muted); margin-top: 8px; }
/* « Transposé » est le niveau le plus faible : rouge, pas ambre — le
   lecteur doit voir qu'aucune vérification clinique n'a eu lieu. */
.valid-badge--transpose { border-left-color: var(--danger); }
.valid-badge--transpose .valid-badge__titre { color: #b91c1c; }
html[data-theme="dark"] .valid-badge--transpose .valid-badge__titre { color: var(--danger); }
.valid-pill--transpose { background: #fee2e2; color: #b91c1c; }
html[data-theme="dark"] .valid-pill--transpose { background: #3d1414; color: var(--danger); }
.valid-badge--brut  { border-left-color: var(--warning); }
.valid-badge--brut  .valid-badge__titre { color: #b45309; }
html[data-theme="dark"] .valid-badge--brut .valid-badge__titre { color: var(--warning); }
.valid-badge--redac { border-left-color: var(--primary); }
.valid-badge--redac .valid-badge__titre { color: var(--primary); }
.valid-badge--pro   { border-left-color: var(--accent); }
.valid-badge--pro   .valid-badge__titre { color: var(--accent); }

.valid-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}
.valid-pill--brut  { background: #fef3c7; color: #b45309; }
.valid-pill--redac { background: var(--primary-lt); color: var(--primary); }
.valid-pill--pro   { background: var(--accent-lt); color: var(--accent); }
html[data-theme="dark"] .valid-pill--brut { background: #3a2d13; color: var(--warning); }

/* ---------- LISTE DES ORDONNANCES ---------- */
.ordo-liste { display: flex; flex-direction: column; gap: 10px; }
.ordo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ordo-item:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ordo-item__nom { font-family: var(--font-ui); font-weight: 600; font-size: .96rem; color: var(--text); }
.ordo-item__spec { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.ordo-item__meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ordo-item__lignes { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 560px) {
  .ordo-item { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- LIGNE PRESCRITE EN DCI ----------
   Dans les pays où la prescription se rédige en DCI (France), la molécule
   EST le libellé de prescription : elle doit être la ligne la plus lisible,
   et la spécialité passe visuellement au second rang. */
.med-name--dci { font-weight: 700; color: var(--text); }
/* Affichage brand-first (Maroc, Algérie) : le nom commercial national est le
   libellé visible et lisible ; il n'est plus cliquable (cf. « Afficher »). */
.med-name--brand { font-weight: 700; color: var(--text); }
.med-specialite {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 7px 11px;
  background: var(--bg-alt);
  border: 1px dashed var(--border-dk);
  border-radius: var(--radius-sm);
  font-size: .8rem;
}
.med-specialite__label {
  font-family: var(--font-ui); font-weight: 600;
  color: var(--text-muted); text-transform: uppercase;
  font-size: .68rem; letter-spacing: .04em;
}
/* Aucun nom de marque n'est rendu ici : seulement le bouton qui les révèle. */
.med-specialite__voir {
  font-family: var(--font-ui); font-weight: 600; font-size: .78rem;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 100px;
  padding: 3px 12px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.med-specialite__voir:hover { background: var(--primary); color: #fff; }
html[data-theme="dark"] .med-specialite__voir:hover { background: var(--primary); color: #0e1422; }
.med-specialite__mol  { color: var(--primary); margin-left: auto; white-space: nowrap; }
@media (max-width: 520px) { .med-specialite__mol { margin-left: 0; } }

/* ---------- SECTION NON DÉNATIONALISÉE ----------
   Affichée à la place d'un texte du socle qui cite encore un contexte
   national étranger. Masquer vaut mieux que publier « le choix de
   l'antibiotique au Maroc » sur une ordonnance française. */
.section-non-adaptee {
  border: 1px dashed var(--warning);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 14px 16px;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--text-md);
}
.section-non-adaptee strong { color: var(--text); }
.section-non-adaptee code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .84em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---------- BASE MÉDICAMENTS : passage au pétrole ----------
   meds.css est une copie fidèle des styles d'ordonnance.ma : il garde donc
   ses bleus en dur, pour rester resynchronisable. On les neutralise ici. */
.meds-hero,
.fiche-hero        { background: linear-gradient(135deg,#042f2e 0%,#0f766e 50%,#14b8a6 100%); }
html[data-theme="dark"] .meds-hero,
html[data-theme="dark"] .fiche-hero { background: linear-gradient(135deg,#08211f 0%,#0d4a45 50%,#0f6b62 100%); }
.fiche-back        { color: var(--primary); }
.fiche-row__val--blue,
.equiv-item__ppv   { color: var(--primary); }
.med-sim__chip     { background: var(--primary-lt); border-color: var(--primary-lt); color: var(--primary); }
.med-sim__chip:hover { background: var(--primary); color: #fff; }
.med-sim__all      { background: var(--primary); }
.med-sim__all:hover{ background: var(--primary-dk); }
.equiv-item:hover  { background: var(--primary-lt); }
.badge-pg--P       { background: var(--primary-lt); color: var(--primary); }
.mol-card--blue    { background: var(--primary-lt); }
.mol-card--blue .mol-card__title,
.mol-card--blue .mol-list__num { color: var(--primary); }
.mol-card--blue .mol-list__num { background: var(--primary); color: #fff; }
.fr-toc a:hover    { background: var(--primary-lt); color: var(--primary); }
.fr-adapt th       { background: var(--primary-lt); color: var(--primary); border-color: var(--border); }

/* `1fr` vaut `minmax(auto, 1fr)` : la largeur MINIMALE du tableau impose
   alors la colonne, et `overflow-x` du conteneur ne sert plus à rien. Les
   présentations françaises (« plaquette(s) PVC PVDC aluminium de 30
   comprimé(s) ») sont bien plus longues que les marocaines, d'où un
   débordement de toute la page. `minmax(0, …)` rend la colonne compressible. */
.meds-layout { grid-template-columns: 260px minmax(0, 1fr); }
@media (max-width: 900px) { .meds-layout { grid-template-columns: minmax(0, 1fr); } }

/* meds.css passe les filtres en plein écran sous 900 px mais ne définit
   PAS l'état ouvert : il vit dans le JS d'ordonnance.ma, que je n'ai pas
   repris. Sans cette règle, le bouton « Filtres » ne fait rien. */
@media (max-width: 900px) {
  .meds-filters.is-open {
    display: block; overflow-y: auto;
    background: var(--surface); padding: 20px; z-index: 200;
  }
}

/* Le bouton de recherche débordait de 25 px sur mobile : la barre est en
   flex sans autoriser le rétrécissement de l'input. */
@media (max-width: 560px) {
  .meds-search-bar { flex-wrap: wrap; }
  .meds-search-bar__input { min-width: 0; flex: 1 1 100%; }
  .meds-search-bar__btn { flex: 1 1 100%; margin-top: 8px; }
}

/* La colonne présentation reste la plus verbeuse : on la borne. */
.meds-table__pres {
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 900px) { .meds-table__pres { max-width: none; white-space: normal; } }

/* Mode sombre : meds.css suppose un fond clair et code ses gris en dur
   (#6b7280, #111827). Sur fond sombre, `.fiche-row__lbl` tombait à 3,4:1.
   On repasse par les variables de thème, qui suivent le mode. */
.fiche-card__title,
.fiche-row__lbl      { color: var(--text-muted); }
.fiche-section__title{ color: var(--text); }
.fiche-row__val      { color: var(--text); }

/* Mode sombre : meds.css suppose un fond clair. */
html[data-theme="dark"] .meds-table,
html[data-theme="dark"] .meds-filters,
html[data-theme="dark"] .fiche-card,
html[data-theme="dark"] .meds-table-wrap { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .meds-table th   { background: var(--bg-alt); color: var(--text-md); }
html[data-theme="dark"] .meds-table td,
html[data-theme="dark"] .meds-table th,
html[data-theme="dark"] .fiche-row       { border-color: var(--border); }
html[data-theme="dark"] .meds-table__row:hover { background: var(--bg-alt); }

/* ---------- DEUX ENTRÉES D'UN PAYS ----------
   Médicaments (libre) et ordonnances (compte requis). La distinction doit
   être lisible AVANT le clic : c'est la promesse du site. */
.entree-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.entree {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.entree:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.entree__pill {
  display: inline-block; font-family: var(--font-ui); font-weight: 600;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 10px; border-radius: 100px; margin-bottom: 12px;
}
.entree__pill--libre  { background: var(--accent-lt); color: var(--accent); }
.entree__pill--compte { background: var(--primary-lt); color: var(--primary); }
.entree__titre {
  font-family: var(--font-ui); font-weight: 700; font-size: 1.2rem;
  color: var(--text); margin-bottom: 10px;
}
.entree__desc { font-size: .9rem; color: var(--text-md); line-height: 1.7; }
.entree__source { font-size: .8rem; color: var(--text-muted); }
.entree__cta {
  display: inline-block; margin-top: 16px;
  font-family: var(--font-ui); font-weight: 600; font-size: .88rem; color: var(--primary);
}

/* ---------- PAGINATION ---------- */
.pagination {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  justify-content: center; margin-top: 28px;
}
.pagination a, .pagination__cur {
  font-family: var(--font-ui); font-weight: 600; font-size: .86rem;
  padding: 7px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--text-md);
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination__cur { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination__gap { color: var(--text-light); padding: 0 4px; }

/* ---------- BLOCS CLINIQUES ---------- */
.ordo-bloc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 20px;
}
.ordo-bloc__titre {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.ordo-bloc__corps { font-size: .92rem; color: var(--text-md); line-height: 1.75; }
.ordo-bloc__corps p + p { margin-top: 10px; }
.ordo-bloc__corps strong { color: var(--text); }
.ordo-bloc__corps a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.clinique-liste { margin: 8px 0 0; padding: 0; }
.clinique-liste li {
  position: relative; padding-left: 18px; margin-bottom: 6px;
}
.clinique-liste li::before {
  content: '•'; position: absolute; left: 4px; color: var(--primary); font-weight: 700;
}

/* ---------- LIGNES DE PRESCRIPTION ---------- */
.presc { display: flex; flex-direction: column; gap: 14px; }
.presc-ligne {
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--bg-alt);
}
.presc-ligne--conseil { border-left-color: var(--text-light); }
.presc-ligne__tete { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.presc-ligne__nom {
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem; color: var(--text);
}
.presc-ligne__nom--libre { color: var(--text-muted); font-style: italic; }
.presc-ligne__dci { font-size: .82rem; color: var(--text-muted); margin-top: 2px; }
.presc-ligne__labo { color: var(--text-light); }
.presc-ligne__prix {
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem;
  color: var(--primary); text-align: right; white-space: nowrap;
}
.presc-ligne__remb { display: block; font-size: .74rem; font-weight: 500; color: var(--text-muted); }
.presc-ligne__posologie {
  margin-top: 12px; font-size: .9rem; color: var(--text); line-height: 1.7;
}
.presc-ligne__posologie p + p { margin-top: 6px; }
.presc-ligne__pied {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-muted);
}
.presc-ligne__pied a { color: var(--primary); text-decoration: underline; }
.presc-ligne__date { color: var(--text-light); }
.presc-ligne__remarque {
  margin-top: 10px; padding: 10px 12px;
  background: var(--surface); border-radius: var(--radius-sm);
  font-size: .84rem; color: var(--text-md);
}

/* ---------- DIVERS ---------- */
.lede {
  font-size: 1.02rem;
  color: var(--text-md);
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
}
.lede + .lede { margin-top: 14px; }

@media (max-width: 640px) {
  .pays-picker { padding: 16px; }
  .pays-picker__btn { flex: 1 1 100%; }
  .adapt__col { border-right: none; border-bottom: 1px solid var(--border); }
  .adapt__col:last-child { border-bottom: none; }
}

/* ============================================================
   ÉVALUATION HAS ET CONDITIONS DE DÉLIVRANCE (fiche médicament)
   Ces sections n'existent pas sur ordonnance.ma : la BDPM publie les avis
   de la Commission de la transparence, le catalogue marocain non. Elles
   vivent donc ici et non dans meds.css, qui reste une copie fidèle.
============================================================ */
.has-bloc {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.has-bloc + .has-bloc { margin-top: 12px; }
.has-bloc__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.has-bloc__nom  { font-weight: 600; font-size: .92rem; color: var(--text-dk); }
.has-bloc__ech  { font-size: .82rem; color: var(--text-md); font-style: italic; }
.has-bloc__date { font-size: .78rem; color: var(--text-light); margin-left: auto; }
.has-bloc__txt  {
  font-size: .88rem; line-height: 1.7; color: var(--text-md); margin: 0;
}

/* Le SMR conditionne le taux de remboursement : « insuffisant » doit se
   distinguer d'« important » au premier coup d'œil, pas seulement au texte. */
.has-val {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  background: var(--primary-lt); color: var(--primary);
}
.has-val--vert   { background: #dcfce7; color: #166534; }
.has-val--ambre  { background: #fef3c7; color: #92400e; }
.has-val--orange { background: #ffedd5; color: #9a3412; }
.has-val--rouge  { background: #fee2e2; color: #991b1b; }

html[data-theme="dark"] .has-val--vert   { background: rgba(34,197,94,.16);  color: #86efac; }
html[data-theme="dark"] .has-val--ambre  { background: rgba(245,158,11,.16); color: #fcd34d; }
html[data-theme="dark"] .has-val--orange { background: rgba(249,115,22,.16); color: #fdba74; }
html[data-theme="dark"] .has-val--rouge  { background: rgba(239,68,68,.16);  color: #fca5a5; }

.has-lien {
  display: inline-block; margin-top: 12px;
  font-size: .85rem; color: var(--primary); text-decoration: underline;
}

.cpd-liste { margin: 0; padding-left: 20px; }
.cpd-liste li {
  font-size: .89rem; line-height: 1.7; color: var(--text-md); margin-bottom: 6px;
}
.cpd-liste li:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .has-bloc__date { margin-left: 0; width: 100%; }
}
.fiche-note {
  font-size: .89rem; line-height: 1.7; color: var(--text-md);
  margin: 0 0 4px; max-width: 68ch;
}

/* ============================================================
   L'ESSENTIEL DU RCP (fiche médicament)
   Volets repliables : le RCP fait 57 000 caractères en moyenne, l'extrait
   en fait quelques milliers — assez pour rester illisible d'un bloc. Les
   quatre volets qui portent la décision de prescrire (indications,
   posologie, contre-indications, grossesse) sont ouverts ; le reste se
   déplie. Le texte est celui de l'ANSM, jamais reformulé.
============================================================ */
.rcp-volet {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-top: 10px;
}
.rcp-volet__tete {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer;
  font-weight: 600; font-size: .92rem; color: var(--text-dk);
  list-style: none;
}
.rcp-volet__tete::-webkit-details-marker { display: none; }
.rcp-volet__tete::after {
  content: '▾'; margin-left: 4px; color: var(--text-light);
  transition: transform .18s ease;
}
.rcp-volet[open] > .rcp-volet__tete::after { transform: rotate(180deg); }
.rcp-volet__tete:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rcp-volet__ico   { font-size: 1rem; }
.rcp-volet__titre { flex: 1 1 auto; }
.rcp-volet__num {
  font-size: .72rem; font-weight: 500; letter-spacing: .02em;
  color: var(--primary); background: var(--primary-lt);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.rcp-volet__corps {
  padding: 2px 16px 14px;
  border-top: 1px solid var(--border);
}
.rcp-p {
  font-size: .89rem; line-height: 1.75; color: var(--text-md);
  margin: 10px 0 0; max-width: 78ch;
}
.rcp-p--puce { padding-left: 16px; position: relative; margin-top: 5px; }
.rcp-p--puce::before {
  content: '•'; position: absolute; left: 2px; color: var(--primary);
}
/* Cette ligne prévient que le texte est coupé : elle doit se lire.
   En --text-light elle tombait à 2,56:1, sous le seuil WCAG. */
.rcp-coupe {
  margin: 12px 0 0; padding-left: 10px;
  border-left: 3px solid var(--accent);
  font-size: .8rem; font-style: italic; color: var(--text-md);
}

/* ============================================================
   BANDEAU DE SPÉCIALITÉS (liste des ordonnances)
   Remplace une grille de 18 cartes qui occupait tout l'écran avant le
   premier résultat. Défilement horizontal sur mobile, comme ordonnance.ma.
============================================================ */
.spec-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 24px;
}
.spec-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface);
  font-size: .85rem; font-weight: 500; color: var(--text-md);
  text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.spec-chip:hover { border-color: var(--primary); color: var(--primary); }
.spec-chip__n {
  font-size: .74rem; font-weight: 600;
  color: var(--text-light);
}
.spec-chip--on {
  border-color: var(--primary);
  background: var(--primary-lt);
  color: var(--primary);
}
.spec-chip--on .spec-chip__n { color: var(--primary); }

@media (max-width: 700px) {
  /* En pastilles empilées, 19 spécialités repoussent encore les résultats
     hors de l'écran : une seule ligne qui défile. */
  .spec-bar {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   SOMMAIRE DE LA FICHE MÉDICAMENT
   Reprend le principe d'ordonnance.ma : colonne collante en desktop,
   menu déroulant collant en mobile. La fiche fait maintenant 6 000 px —
   sans sommaire, les équivalents et la FAQ sont hors de portée.
============================================================ */
.fiche-layout { display: flex; gap: 26px; align-items: flex-start; }
.fiche-layout__corps { flex: 1 1 auto; min-width: 0; }

/* meds.css ne fait retomber la grille sur une colonne qu'en dessous de 640px
   de FENÊTRE. Or ce qui compte ici est la largeur du CONTENEUR : le sommaire
   lui prend 244px, et entre 900 et 1140px de fenêtre les deux cartes
   tombaient à ~300px — « AMOXICILLINE + CLAVULANATE DE POTASSIUM équivalant
   à… » s'y empilait mot par mot. La grille suit donc la place disponible. */
.fiche-layout .fiche-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.fiche-toc {
  position: sticky; top: 84px;
  flex: 0 0 218px;
  max-height: calc(100vh - 110px); overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 10px 14px 14px;
}
.fiche-toc__h {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-light); margin: 0 0 8px;
}
.fiche-toc ul { list-style: none; margin: 0; padding: 0; }
.fiche-toc a {
  display: block; padding: 6px 8px; border-radius: 7px;
  font-size: .82rem; line-height: 1.35; color: var(--text-md);
  text-decoration: none; border-left: 2px solid transparent;
}
.fiche-toc a:hover,
.fiche-toc a:focus-visible {
  background: var(--primary-lt); color: var(--primary);
  border-left-color: var(--primary);
}

/* Menu déroulant mobile */
.fiche-jump { display: none; margin-bottom: 14px; }
.fiche-jump select {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--primary);
  font-size: .92rem; font-weight: 600;
}

/* Sous-entrées du sommaire (sections du RCP) */
.fiche-toc__sous { margin: 2px 0 6px 10px !important; border-left: 1px solid var(--border); }
/* --text-light tombe à 2,56:1 sur le fond de la carte : c'est un lien, il
   doit se lire. La hiérarchie est portée par la taille et le retrait. */
.fiche-toc__sous a {
  font-size: .77rem; padding: 4px 8px; color: var(--text-md);
}
.fiche-toc__sous a:hover, .fiche-toc__sous a:focus-visible { color: var(--primary); }

html { scroll-behavior: smooth; }
/* Sans cette marge, l'en-tête collant recouvre le titre visé. */
.fiche-section[id], .fiche-grid[id], .rcp-volet[id] { scroll-margin-top: 84px; }

@media (max-width: 900px) {
  .fiche-layout { display: block; }
  .fiche-toc { display: none; }
  /* Le menu collait à `top: 0` avec un z-index de 20, sous un en-tête lui
     aussi collant à 0, haut de 64px et à z-index 100 : dès le premier
     défilement il passait DERRIÈRE l'en-tête et devenait invisible.
     Il se pose donc sous lui, et passe au-dessus de ce qui défile. */
  .fiche-jump {
    display: block; position: sticky; top: var(--header-h); z-index: 90;
    background: var(--bg); padding: 8px 0; margin-bottom: 12px;
  }
  /* La cible doit dégager l'en-tête ET le menu, sinon on arrive sur une
     section dont le titre est déjà masqué. */
  .fiche-section[id], .fiche-grid[id], .rcp-volet[id] {
    scroll-margin-top: calc(var(--header-h) + 64px);
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* La mise en page d'origine — libellé à gauche, valeur alignée à droite sur
   la même ligne — est conservée. La valeur qui débordait n'était pas un
   problème de mise en page mais de DONNÉE : `groupe_generique` contenait le
   bloc complet de la source (404 caractères, nom du groupe SUIVI de toutes
   les spécialités qui le composent). Corrigé à la source, dans
   `db/enrichir_medicaments_france.php`.
   Reste ici le strict nécessaire pour qu'un mot très long ne déborde pas. */
.fiche-row__val { min-width: 0; overflow-wrap: anywhere; }

/* ============================================================
   EN-TÊTE : SEUIL DE BASCULE
   Défaut hérité : la navigation complète est servie jusqu'à 768px. Mais
   ordonnance.net a cinq liens plus deux boutons — entre 769 et ~1000px
   l'ensemble déborde de la page (constaté à 920px, sur TOUTES les pages,
   pas seulement la fiche). Le menu compact prend donc la main plus tôt.
============================================================ */
@media (max-width: 1000px) {
  .site-nav,
  .site-header__actions .btn { display: none; }
  .hamburger { display: flex; margin-left: 4px; }
}

/* ============================================================
   FICHE ENRICHIE (contenu repris d'ordonnance.ma, rendu par
   inc/fiche_render.php). Styles déportés ici — l'original les émettait
   en <style> inline avec du bleu en dur ; on les repasse en pétrole et
   au vrai mode sombre du site (data-theme), pas prefers-color-scheme.
   Les sections .fr-sec vivent DANS une .fiche-section d'ordonnance.net,
   donc pas de carte ni de bordure propre : juste la numérotation et les
   sous-libellés qui font la mise en page d'ordonnance.ma.
============================================================ */
.fr-sec { margin-bottom: 18px; scroll-margin-top: 84px; }
.fr-sec:last-child { margin-bottom: 0; }
.fr-sec__t {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.02rem; font-weight: 700; color: var(--text-dk); margin: 0 0 12px;
}
.fr-sec__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; border-radius: 8px;
  background: var(--primary); color: #fff; font-size: .82rem; font-weight: 700; flex-shrink: 0;
}
.fr-sec__body { font-size: .92rem; line-height: 1.65; color: var(--text-md); }
.fr-sec__body p { margin: 0 0 8px; }
.fr-ul { margin: 4px 0 10px; padding-left: 0; list-style: none; }
.fr-ul li { margin: 6px 0; padding-left: 22px; position: relative; }
.fr-ul li::before { content: "\2192"; position: absolute; left: 2px; top: 0; color: var(--primary); font-weight: 700; }
.fr-sub { margin: 0 0 10px; }
.fr-sub__lbl {
  font-weight: 700; color: var(--primary); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px;
}
.fr-na { color: var(--text-light); font-style: italic; }

.fr-faq {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 2px 14px; margin-bottom: 8px; background: var(--surface);
}
.fr-faq summary { cursor: pointer; font-weight: 600; color: var(--text-dk); padding: 10px 0; font-size: .9rem; }
.fr-faq__a { padding: 0 0 12px; color: var(--text-md); font-size: .9rem; line-height: 1.6; }

.fr-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fr-table th {
  text-align: left; padding: 9px 12px; background: var(--surface);
  color: var(--text-md); font-weight: 600; width: 42%; border-bottom: 1px solid var(--border);
}
.fr-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-dk); font-weight: 500; }

.fr-src { margin: 0; padding-left: 18px; }
.fr-src li { margin: 4px 0; font-size: .88rem; }
.fr-src a { color: var(--primary); }

.fr-adapt { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 2px 0; }
.fr-adapt th {
  text-align: left; background: var(--primary-lt); color: var(--primary);
  font-weight: 600; padding: 9px 12px; border: 1px solid var(--border);
}
.fr-adapt td { padding: 9px 12px; border: 1px solid var(--border); vertical-align: top; color: var(--text-md); }
.fr-adapt td:first-child { font-weight: 600; color: var(--primary); width: 42%; }
@media (max-width: 560px) {
  .fr-adapt thead { display: none; }
  .fr-adapt tbody, .fr-adapt tr, .fr-adapt td { display: block; width: auto; }
  .fr-adapt tr { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; background: var(--surface); }
  .fr-adapt td { border: none; padding: 4px 0; }
  .fr-adapt td:first-child { width: auto; color: var(--primary); }
  .fr-adapt td::before { content: attr(data-label); display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-light); margin-bottom: 1px; }
}

/* Phrase d'introduction de la fiche médicament : contexte pays + molécule,
   pour le lecteur et pour le référencement local. */
.fiche-lead {
  margin: 14px 0 0; max-width: 70ch;
  font-size: .95rem; line-height: 1.6; color: var(--text-md);
}
.fiche-lead strong { color: var(--text-dk); }

/* ── Ligne « alternative » d'une ordonnance ────────────────────────────────
   Une alternative se prescrit À LA PLACE de la ligne précédente, jamais en
   plus. Numérotée dans la même séquence, elle se lisait comme un deuxième
   médicament à délivrer : sur la cystite belge, cela donnait deux
   antibiotiques (nitrofurantoïne + fosfomycine) pour un même épisode.
   On la retire donc de la numérotation et on l'annonce en clair. */
/* Le numéro vient d'un COMPTEUR CSS (`counter-increment: med` sur .med-item,
   rendu par ::before), pas d'une puce de liste : il faut donc suspendre
   l'incrément, sinon la ligne suivante sauterait de 2 à 3. */
.med-item--alt { counter-increment: none; }
.med-item--alt::before {
  content: "⇄";
  background: var(--surface);
  color: var(--text-md);
  border: 1px dashed var(--border);
  font-size: .8rem;
}
.med-alt-flag {
  display: inline-block; margin-bottom: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-md);
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: 999px; padding: 3px 10px;
}
.med-alt-flag strong { color: var(--primary); }

/* ============================================================
   Sélecteur de pays de l'en-tête
   Un seul point de commande : il suit le visiteur sur toutes les
   pages et le renvoie dans la MÊME rubrique du pays choisi.
   Bâti sur <details> pour rester utilisable sans JavaScript.
   ============================================================ */
.pays-pick{position:relative}
.pays-pick__btn{
  display:flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;
  padding:.34rem .6rem;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);font-size:.86rem;font-weight:600;
  color:var(--text);white-space:nowrap;user-select:none;
}
.pays-pick__btn::-webkit-details-marker{display:none}
.pays-pick__btn:hover{border-color:var(--primary);color:var(--primary)}
.pays-pick[open] .pays-pick__btn{border-color:var(--primary);color:var(--primary)}
.pays-pick[open] .pays-pick__btn svg{transform:rotate(180deg)}
.pays-pick__btn svg{transition:transform .15s;flex:none;opacity:.6}
.pays-pick__flag{font-size:1.05rem;line-height:1}

.pays-pick__menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  min-width:250px;max-height:min(70vh,420px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);
  border-radius:11px;box-shadow:var(--shadow-lg);padding:.35rem;
}
.pays-pick__titre{
  margin:.3rem .6rem .35rem;font-size:.73rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-muted);
}
.pays-pick__item{
  display:flex;align-items:center;gap:.55rem;padding:.44rem .6rem;border-radius:7px;
  text-decoration:none;color:var(--text);font-size:.9rem;
}
.pays-pick__item:hover{background:var(--bg-alt)}
.pays-pick__item.is-on{background:var(--primary-lt);color:var(--primary);font-weight:650}
.pays-pick__item em{margin-left:auto;font-size:.72rem;font-style:normal;opacity:.7}
.pays-pick__tous{
  display:block;margin-top:.3rem;padding:.5rem .6rem;border-top:1px solid var(--border);
  font-size:.84rem;font-weight:600;color:var(--primary);text-decoration:none;
}
.pays-pick__tous:hover{background:var(--bg-alt)}

/* Le nom complet mange la barre sur petit écran : on garde le drapeau. */
@media (max-width:900px){
  .pays-pick__nom{display:none}
  .pays-pick__menu{min-width:210px}
}

/* `details[open] > summary` (accordéons FAQ, hérité de style.css) est plus
   spécifique que `.pays-pick__btn` et repeignait le bouton en dégradé.
   On remonte la spécificité au lieu de toucher à la règle des FAQ. */
.pays-pick[open] > .pays-pick__btn{
  background:var(--surface);
  border-color:var(--primary);color:var(--primary);
}

/* Sur mobile l'en-tête ne garde que logo + thème + hamburger : le sélecteur
   y poussait le hamburger hors de l'écran. Il passe dans le menu mobile,
   comme les boutons de compte. */
@media (max-width:768px){
  .site-header__actions .pays-pick{display:none}
}
.pays-pick--mobile{margin:.2rem 0 .1rem}
.pays-pick--mobile .pays-pick__btn{width:100%;justify-content:flex-start;padding:.6rem .75rem}
.pays-pick--mobile .pays-pick__nom{display:inline}
.pays-pick--mobile .pays-pick__btn svg{margin-left:auto}
.pays-pick--mobile .pays-pick__menu{
  position:static;min-width:0;width:100%;max-height:46vh;margin-top:.35rem;box-shadow:none;
}