/* =====================================================================
   MediLearn — Charte visuelle v1 (novembre 2026)
   Règles :
   1. Icônes : on garde les emojis de l'appli (choix de Thomas, 09/11/2026).
   2. Une seule couleur d'action, le teal. Un seul bouton plein par écran.
   3. Indigo et ambre servent au repérage (familles, indicateurs), jamais en aplat.
      Familles : préfixe = teal · suffixe = ambre · racine = indigo.
   4. Titres en Outfit 600, texte en Source Sans 3, chiffres tabulaires.
   5. Pas d'ombre par défaut : une bordure fine suffit. Arrondis 7 / 12 px.
   6. Ton : « tu » pour les élèves, « vous » sur les pages formateurs et B2B.
   Chargée APRÈS les styles de chaque page : la partie 2 harmonise l'existant.
   ===================================================================== */

/* ── 1. Variables de la charte ─────────────────────────────────────── */
:root {
  --ml-ink: #13201E;  --ml-muted: #5B6B68;  --ml-line: #E3E8E7;
  --ml-bg: #F6F8F7;   --ml-paper: #FFFFFF;
  --ml-teal: #0B7A6E; --ml-teal-dark: #095F56; --ml-teal-pale: #EAF5F2; --ml-teal-line: #CFE6E1;
  --ml-indigo: #4F5BD5; --ml-indigo-pale: #EEF0FC;
  --ml-amber: #B7791F;  --ml-amber-pale: #FBF4E6;
  --ml-ok: #15803D; --ml-ok-pale: #E7F5EC; --ml-error: #B42318; --ml-error-pale: #FCEBE9;
  --ml-font-title: "Outfit", system-ui, sans-serif;
  --ml-font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ml-radius-sm: 7px; --ml-radius: 12px;

  /* Variables historiques des pages, réalignées sur la charte */
  --teal: var(--ml-teal); --teal-d: var(--ml-teal-dark);
  --teal-pale: var(--ml-teal-pale); --teal-mid: var(--ml-teal-line);
  --dark: var(--ml-ink); --gray: var(--ml-muted); --gray-light: #8A9996;
  --border: var(--ml-line); --bg: var(--ml-bg);
  --pre: var(--ml-teal);   --pre-bg: var(--ml-teal-pale);    /* préfixes */
  --suf: var(--ml-amber);  --suf-bg: var(--ml-amber-pale);   /* suffixes */
  --rac: var(--ml-indigo); --rac-bg: var(--ml-indigo-pale);  /* racines  */
}

/* ── Base ───────────────────────────────────────────────────────────── */
body { font-family: var(--ml-font-text) !important; color: var(--ml-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .logo, .nav-logo, .sec-t, .ccard .nm {
  font-family: var(--ml-font-title) !important; letter-spacing: -.01em; text-wrap: balance;
}
h1 { font-weight: 700 !important; letter-spacing: -.02em; }
h2, h3, h4 { font-weight: 600 !important; }
input, button, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--ml-teal); outline-offset: 2px; }
.ml-num, .pct, .badge, .stat-num, .score { font-variant-numeric: tabular-nums; }

/* ── Icônes au trait (réservé : classe .ml-i si un SVG est utilisé) ──── */
.ml-i { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.16em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ml-k { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em;
  border-radius: 6px; background: var(--ml-teal-pale); color: var(--ml-teal-dark);
  font: 700 .8em/1 var(--ml-font-text); font-variant-numeric: tabular-nums; }
h2 > .ml-i:first-child, h3 > .ml-i:first-child { color: var(--ml-teal); margin-right: .35em; }

/* ── Composants de la charte (nouvelles pages) ───────────────────────── */
.ml-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: var(--ml-radius-sm); font: 600 .9375rem var(--ml-font-text);
  border: 1px solid var(--ml-line); background: var(--ml-paper); color: var(--ml-ink); text-decoration: none; cursor: pointer; }
.ml-btn:hover { border-color: var(--ml-teal); }
.ml-btn.primary { background: var(--ml-teal); border-color: var(--ml-teal); color: #fff; }
.ml-btn.primary:hover { background: var(--ml-teal-dark); }
.ml-card { background: var(--ml-paper); border: 1px solid var(--ml-line); border-radius: var(--ml-radius); padding: 24px; }
.ml-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-teal); }

/* =====================================================================
   2. Harmonisation de l'existant
   ===================================================================== */

/* ── Pages du site (ressources, fiches, sigles, kits) ────────────────── */
.nav-logo-box { background: var(--ml-ink) !important; border-radius: 8px !important; font-family: var(--ml-font-title); }
.nav-cta, .cta-block a, .cta-profiles a { border-radius: var(--ml-radius-sm) !important; font-weight: 600 !important; }
.category-badge { background: none !important; padding: 0 !important; border-radius: 0 !important;
  font-size: .75rem !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-teal) !important; }
.hero h1 { line-height: 1.12; }
.hero-sub { color: #3A4947 !important; font-size: 1.0625rem !important; line-height: 1.6; }
.hero-stats { gap: 6px 18px !important; padding: 12px 0; border-top: 1px solid var(--ml-line); border-bottom: 1px solid var(--ml-line); }
.hero-stat { background: none !important; border: 0 !important; padding: 0 !important; color: var(--ml-muted); font-size: .875rem !important; }
.hero-stat strong { color: var(--ml-ink) !important; font-weight: 600 !important; }
.intro { background: none !important; border-left: 0 !important; border-radius: 0 !important; padding: 0 !important; }
.intro p { color: #2F3D3B !important; font-size: 1rem !important; line-height: 1.7 !important; }
.en-bref { background: var(--ml-teal-pale) !important; border: 0 !important; border-left: 3px solid var(--ml-teal) !important;
  border-radius: 0 10px 10px 0 !important; color: var(--ml-ink) !important; }
.en-bref b { color: var(--ml-ink) !important; font-family: var(--ml-font-title); font-weight: 600; }
table.prefix-table, table.term-table, table.abbrev-table { border-collapse: collapse; }
.prefix-table th, .term-table th, .abbrev-table th { background: var(--ml-bg) !important; color: var(--ml-muted) !important;
  font-size: .75rem !important; font-weight: 600 !important; letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid var(--ml-ink) !important; border-radius: 0 !important; }
.prefix-table td, .term-table td, .abbrev-table td { border-bottom: 1px solid var(--ml-line) !important; }
.prefix-table tr:hover td, .term-table tr:hover td { background: var(--ml-bg) !important; }
.prefix-table .prefix, .term-table .term, .abbrev-table .abbrev { color: var(--ml-ink) !important; font-weight: 600 !important; }
.term-card { background: var(--ml-paper) !important; border: 1px solid var(--ml-line) !important; border-radius: var(--ml-radius) !important; box-shadow: none !important; }
.term-word { color: var(--ml-ink) !important; font-family: var(--ml-font-title); font-weight: 600 !important; }
.cta-block { background: var(--ml-ink) !important; border-radius: var(--ml-radius) !important; }
.cta-block h3 { font-weight: 600 !important; }
.related-card, .pillar { background: var(--ml-paper) !important; border-radius: var(--ml-radius) !important; }
.related-card:hover { transform: none !important; }
.faq-lead, .ans-lead { color: #2F3D3B; }
.breadcrumb a { color: var(--ml-muted) !important; }
.breadcrumb li[aria-current] { color: var(--ml-ink); font-weight: 600; }

/* ── Appli (index.html) ──────────────────────────────────────────────── */
.logo { font-weight: 700 !important; }
.lead { font-style: normal !important; font-weight: 400 !important; color: var(--ml-muted) !important; }
.grp { color: var(--ml-muted) !important; font-weight: 700 !important; }
.nav { font-weight: 400 !important; color: #2A3836 !important; border-radius: var(--ml-radius-sm) !important; }
.nav .i { color: #7A8A87; display: inline-grid; place-items: center; width: 20px; font-size: 18px; }
.nav.on { background: var(--ml-teal-pale) !important; color: var(--ml-teal-dark) !important; font-weight: 600 !important; }
.nav.on .i { color: var(--ml-teal); }
.sec-t { font-weight: 600 !important; }

/* Cartes d'accueil : fond blanc, bordure fine, pas d'ombre ni de dégradé */
.ccard { border-radius: var(--ml-radius) !important; box-shadow: none !important; }
.ccard .nm { font-weight: 600 !important; font-size: 1.1rem !important; }
.ccard .em { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 9px;
  background: var(--ml-teal-pale); color: var(--ml-teal); font-size: 19px !important; }
#decode-card, #ordo-card, #relecture-card, #doses-card {
  background: var(--ml-paper) !important; border: 1px solid var(--ml-line) !important; }
#decode-card:hover, #ordo-card:hover, #relecture-card:hover, #doses-card:hover, .ccard:hover { border-color: var(--ml-teal) !important; }
#ordo-card .em      { background: var(--ml-indigo-pale); color: var(--ml-indigo); }
#relecture-card .em { background: var(--ml-amber-pale);  color: var(--ml-amber); }
#doses-card .em     { background: var(--ml-amber-pale);  color: var(--ml-amber); }
#ordo-card .barw i      { background: var(--ml-indigo) !important; }
#relecture-card .barw i { background: var(--ml-amber) !important; }
/* « Démarrer une révision » : la seule carte pleine de l'écran, sans dégradé ni ombre */
#revision-card { background: var(--ml-teal) !important; border: 1px solid var(--ml-teal) !important; box-shadow: none !important; }
#revision-card .em { background: rgba(255,255,255,.16); color: #fff; }
.tag { font-weight: 700 !important; letter-spacing: .05em; border-radius: 6px !important; background: var(--ml-bg) !important; color: var(--ml-muted) !important; }
#revision-card .tag { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.tag.blue   { background: var(--ml-teal-pale) !important;   color: var(--ml-teal-dark) !important; }  /* PRÉFIXES */
.tag.purple { background: var(--ml-amber-pale) !important;  color: #8A5A12 !important; }           /* SUFFIXES */
.barw { height: 6px !important; background: #EDF1F0 !important; }
.biblio-c { background: var(--ml-paper) !important; }
.biblio-c .ico { background: var(--ml-teal-pale) !important; color: var(--ml-teal); font-size: 19px !important; }
.obprof .e { color: var(--ml-teal); font-size: 30px; }
.sp-btn.on, .obprof:hover { border-color: var(--ml-teal) !important; }
.qi-em { color: var(--ml-teal); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Accroche sous le titre de l'appli : texte simple, sans pastille */
.m-sub { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--ml-ink) !important; font-weight: 600 !important; padding: 0 !important; }
/* Bouton « Régler » de la carte révision */
.rc-cfg { border-radius: var(--ml-radius-sm) !important; font-weight: 600 !important; display: inline-flex; align-items: center; gap: 6px; }
/* Onglets de profil */
.seg > span { display: inline-flex; align-items: center; gap: 6px; }
.sp-btn { font-weight: 600 !important; }

/* =====================================================================
   3. Étape 2 : tout l'écran de l'appli au nouveau design
   Uniquement de l'apparence : mêmes écrans, mêmes parcours, mêmes clics.
   ===================================================================== */

/* ── Accueil : rubriques et pavés ───────────────────────────────────── */
.biblio-h::after { content: ""; flex: 1; height: 1px; background: var(--ml-line); }
.ccard { border-color: var(--ml-line) !important; }
.ccard .desc { color: var(--ml-ink); }
.ccard .barw { border-radius: 99px; overflow: hidden; }
.ccard .barw i { background: var(--ml-teal) !important; border-radius: 99px; }
.ccard .foot .ar { border-radius: var(--ml-radius-sm); }
/* Module commencé : bouton → plein, on voit où reprendre */
.ccard:has(.barw i:not([style*="width:0%"])) .foot { color: var(--ml-teal-dark); }
.ccard:has(.barw i:not([style*="width:0%"])) .foot .ar { background: var(--ml-teal); color: #fff; }
#revision-card .foot .ar { background: rgba(255,255,255,.18); color: #fff; }

/* ── Liste d'un module (cardi(o)-, angi(o)-…) ───────────────────────── */
.row { border: 1px solid var(--ml-line) !important; border-radius: var(--ml-radius) !important; }
.row.done { background: var(--ml-teal-pale) !important; border-color: var(--ml-teal-line) !important; }
.row.cur { border-color: var(--ml-teal) !important; box-shadow: none !important; }
.row .st { border-radius: var(--ml-radius-sm) !important; }
/* Termes Premium : plus d'aplat jaune, un cadenas ambre discret */
.row.prem { background: var(--ml-paper) !important; border-color: var(--ml-line) !important; }
.row.prem .st { background: var(--ml-amber-pale) !important; color: var(--ml-amber) !important; }
.row.prem .nm .t { color: var(--ml-ink) !important; }
.row.prem .lab { color: var(--ml-amber) !important; }
.row.prem.clk:hover { background: var(--ml-amber-pale) !important; border-color: var(--ml-amber) !important; }
.fwarn { background: var(--ml-amber-pale) !important; color: #7A4E10 !important; border-left-color: var(--ml-amber) !important; }
.fwarn b { color: #7A4E10 !important; }

/* ── Quiz (révision express et parcours) ────────────────────────────── */
.scard { border-color: var(--ml-line) !important; border-radius: var(--ml-radius) !important; box-shadow: none !important; padding: 26px 28px !important; }
.gq { font-family: var(--ml-font-title); font-weight: 600 !important; letter-spacing: -.01em; font-size: 1.4rem !important; }
.qinstr { color: var(--ml-muted) !important; font-weight: 600 !important; }
.opt { border: 1px solid var(--ml-line) !important; border-radius: var(--ml-radius-sm) !important; font-weight: 600 !important; padding: 13px 16px !important; }
.opt:hover { border-color: var(--ml-teal) !important; background: var(--ml-paper) !important; }
.opt .l { border-radius: 6px !important; background: var(--ml-bg) !important; color: var(--ml-muted) !important; }
.opt.correct, .opt.correct:hover, .b.correct, .in.correct { border-color: var(--ml-ok) !important; background: var(--ml-ok-pale) !important; color: #0F5A2B !important; }
.opt.correct .l { background: var(--ml-ok) !important; color: #fff !important; }
.opt.wrong, .opt.wrong:hover, .b.wrong, .in.wrong { border-color: var(--ml-error) !important; background: var(--ml-error-pale) !important; color: var(--ml-error) !important; }
.opt.wrong .l { background: var(--ml-error) !important; color: #fff !important; }
/* Correction mise en évidence : bandeau vert ou rouge, texte lisible */
.fb.show { padding: 14px 16px !important; border-radius: 0 var(--ml-radius) var(--ml-radius) 0 !important; font-size: .95rem !important; line-height: 1.55; border: 0 !important; }
.fb.ok { background: var(--ml-ok-pale) !important; color: #0F5A2B !important; border-left: 4px solid var(--ml-ok) !important; }
.fb.no { background: var(--ml-error-pale) !important; color: #8A1A12 !important; border-left: 4px solid var(--ml-error) !important; }
.scard .cta, #main .cta { border-radius: var(--ml-radius-sm) !important; font-weight: 600 !important; }
.ghost { border-radius: var(--ml-radius-sm) !important; }
.sbar .prog { border-radius: 99px; }
.sbar .prog i { background: var(--ml-teal) !important; }
.ramp .p { border-radius: var(--ml-radius-sm) !important; letter-spacing: .06em; font-weight: 700 !important; background: var(--ml-paper) !important; border-color: var(--ml-line) !important; }
.ramp .p.on { background: var(--ml-teal-pale) !important; border-color: var(--ml-teal-line) !important; color: var(--ml-teal-dark) !important; }
.bd { border-radius: 6px !important; font-weight: 700 !important; letter-spacing: .05em; }
.bd.fmt { background: var(--ml-bg) !important; border-color: var(--ml-line) !important; color: var(--ml-muted) !important; }
.chip, .vfb .b, .in { border-radius: var(--ml-radius-sm) !important; }

/* ── Fenêtre Premium : même contenu, sans dégradé ni aplat jaune ────── */
.pwm2 .pwhead { background: var(--ml-teal) !important; }
.pwm2 .pwcta, .pwbtn { background: var(--ml-teal) !important; border-radius: var(--ml-radius-sm) !important; font-weight: 700 !important; box-shadow: none !important; }
.pwm2 .pwcta:hover, .pwbtn:hover { background: var(--ml-teal-dark) !important; }
.pwm2 .pwlm { background: var(--ml-bg) !important; border: 1px solid var(--ml-line) !important; border-radius: var(--ml-radius) !important; }
.pwm2 .pwlm-free, .lm-free { background: var(--ml-teal-pale) !important; color: var(--ml-teal-dark) !important; }
.pwm2 .pwlm-b, .lm-cap-b { border-radius: var(--ml-radius-sm) !important; background: var(--ml-ink) !important; }
.pwm2 .pwlm-i, .lm-cap-i { border: 1px solid var(--ml-line) !important; border-radius: var(--ml-radius-sm) !important; }
.pwmodal { border-radius: 16px !important; }

/* ── Pied de page : l'encre de la charte au lieu du bleu nuit ───────── */
.site-footer { background: var(--ml-ink) !important; }

/* ==============================================================   4. Design v2 de l'accueil (prototype validé), actif seulement avec la
   classe .ml-v2 : ?design=2 pour soi, ou ML_DESIGN_V2_POUR_TOUS dans index.html.
   ===================================================================== */
.ml-v2 #main > .h1 { text-align: left; font-size: 1.9rem; max-width: 1100px; margin-left: auto; margin-right: auto; width: 100%; }
.ml-v2 #main > .lead { text-align: left; font-style: normal !important; font-weight: 400 !important; color: var(--ml-muted) !important; margin: 4px auto 10px; max-width: 1100px; width: 100%; white-space: normal; }
.ml-v2 #main > .method { text-align: left; margin: 0 auto 16px; max-width: 1100px; }
/* Les 3 outils sur une ligne, la révision au-dessus sur toute la largeur */
.ml-v2 .home-tools { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ml-v2 .home-tools #revision-card { grid-column: 1 / -1; }
@media (max-width: 760px) { .ml-v2 .home-tools { grid-template-columns: minmax(0, 1fr) !important; } }
/* Chiffres du jour */
.v2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; margin: 0 auto 18px; background: var(--ml-paper); border: 1px solid var(--ml-line); border-radius: var(--ml-radius); overflow: hidden; }
.v2-stat { padding: 14px 18px; border-top: 3px solid var(--ml-teal); display: flex; flex-direction: column; gap: 2px; }
.v2-stat + .v2-stat { border-left: 1px solid var(--ml-line); }
.v2-stat:nth-child(2) { border-top-color: var(--ml-amber); }
.v2-stat:nth-child(3) { border-top-color: var(--ml-indigo); }
.v2-stat b { font: 600 1.6rem var(--ml-font-title); color: var(--ml-ink); font-variant-numeric: tabular-nums; }
.v2-stat span { font-size: .85rem; color: var(--ml-muted); }
/* Rappel mis en valeur dans « Régler ma révision » */
.v2-hint { margin-top: 12px; background: var(--ml-teal-pale); border-left: 4px solid var(--ml-teal); border-radius: 0 10px 10px 0; padding: 10px 12px; font-size: .9rem; line-height: 1.5; color: var(--ml-ink); }
.v2-hint b { color: var(--ml-teal-dark); }
.ml-v2 .home-tools .v2-stats { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .v2-stat { padding: 12px 12px; } .v2-stat b { font-size: 1.35rem; } }
=======
/* ── Calculs de doses (profil Infirmier) : même calculs, style de la charte ──
   Cartes blanches, la couleur de la famille reste sur le badge et le point du filtre. */
#cd-root .chead { border: 1px solid var(--ml-line) !important; border-radius: var(--ml-radius) !important; }
#cd-root .nm { font-family: var(--ml-font-title); font-weight: 600 !important; }
#cd-root .tg { background: var(--ml-teal-pale) !important; color: var(--ml-teal-dark) !important; font-weight: 700 !important; }
#cd-root .fbtn { border: 1px solid var(--ml-line) !important; border-radius: var(--ml-radius-sm) !important; font-weight: 600 !important; }
#cd-root .fbtn.on { background: var(--ml-teal) !important; border-color: var(--ml-teal) !important; color: #fff !important; }
#cd-root .legend button { border: 1px solid var(--ml-line) !important; font-weight: 600 !important; }
#cd-root .legend button:hover { border-color: var(--ml-teal) !important; }
#cd-root .legend button[aria-pressed="true"] { background: var(--ml-teal) !important; border-color: var(--ml-teal) !important; color: #fff !important; }
#cd-root .cd-front, #cd-root .cd-back { border: 1px solid var(--ml-line) !important; border-radius: var(--ml-radius) !important; box-shadow: none !important; }
#cd-root .cd-front { background: var(--ml-paper) !important; }
#cd-root .cd-card:hover .cd-front { border-color: var(--ml-teal) !important; }
#cd-root .fam { font-weight: 700 !important; }
#cd-root .v { color: var(--ml-ink) !important; }
#cd-root .rxl .k { color: var(--ml-muted) !important; }
#cd-root .q { font-weight: 700 !important; }
#cd-root .field { border: 1px solid var(--ml-line) !important; border-radius: var(--ml-radius-sm) !important; }
#cd-root .field:focus-within { border-color: var(--ml-teal) !important; }
#cd-root .ok-btn, #cd-root .retry, #cd-root .result button { background: var(--ml-teal) !important; border-radius: var(--ml-radius-sm) !important; font-weight: 700 !important; }
#cd-root .unlock { background: var(--ml-ink) !important; border-radius: var(--ml-radius-sm) !important; }
#cd-root .opt { border: 1px solid var(--ml-line) !important; border-radius: var(--ml-radius-sm) !important; font-weight: 700 !important; }
#cd-root .opt:hover { border-color: var(--ml-teal) !important; background: var(--ml-paper) !important; }
#cd-root .opt.good { border-color: var(--ml-ok) !important; background: var(--ml-ok-pale) !important; color: #0F5A2B !important; }
#cd-root .opt.bad { border-color: var(--ml-error) !important; background: var(--ml-error-pale) !important; color: var(--ml-error) !important; }
#cd-root .cd-back.good { background: var(--ml-ok-pale) !important; border-color: var(--ml-ok) !important; }
#cd-root .cd-back.bad { background: var(--ml-paper) !important; border-color: var(--ml-error) !important; border-left-width: 4px !important; }
#cd-root .cmp-you { background: var(--ml-error-pale) !important; }
#cd-root .cmp-ok { background: var(--ml-ok-pale) !important; }
#cd-root .why { background: var(--ml-amber-pale) !important; color: #7A4E10 !important; }
#cd-root .result { border: 1px solid var(--ml-teal) !important; border-radius: var(--ml-radius) !important; }

/* ── Modes de jeu de l'accueil : léger fond de couleur par outil ─────
   Teinte très claire = repère visuel ; la carte « Démarrer une révision » reste la seule pleine. */
#decode-card    { background: #F1F9F7 !important; border-color: #D3EAE4 !important; }   /* teal  */
#ordo-card      { background: #F4F5FD !important; border-color: #DDE0F7 !important; }   /* indigo */
#relecture-card { background: #FDF8EE !important; border-color: #F1E2C2 !important; }   /* ambre */
#doses-card     { background: #FDF6F1 !important; border-color: #F2DCCB !important; }   /* orangé */
#decode-card .em, #ordo-card .em, #relecture-card .em, #doses-card .em { background: #fff !important; }
#decode-card .foot .ar, #ordo-card .foot .ar, #relecture-card .foot .ar, #doses-card .foot .ar { background: #fff; }
#decode-card:hover    { border-color: var(--ml-teal) !important; }
#ordo-card:hover      { border-color: var(--ml-indigo) !important; }
#relecture-card:hover { border-color: var(--ml-amber) !important; }
#doses-card:hover     { border-color: #C2611A !important; }