/**
 * com_medicaments - styles frontend (mobile first)
 *
 * Palette neutre s'appuyant sur les variables du template lorsqu'elles
 * existent, avec des valeurs de repli sobres.
 */

.com-medicaments {
    --med-border: rgba(0, 0, 0, 0.12);
    --med-border-soft: rgba(0, 0, 0, 0.07);
    --med-muted: #5f6b76;
    --med-surface: #f7f8fa;
    --med-accent: var(--cassiopeia-color-primary, #205b80);
    --med-radius: 0.625rem;

    max-width: 100%;
    line-height: 1.65;
}

/* Listes sans puces : la classe Bootstrap « list-unstyled » des gabarits n'existe pas dans tous les
   gabarits (Équilibre, par exemple) ; sans cette règle, des puces « • » apparaissaient à gauche des
   cartes (page Thèmes, grilles, badges). */
.com-medicaments .list-unstyled,
.mod-medicaments.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.com-medicaments .list-unstyled > li,
.mod-medicaments.list-unstyled > li {
    list-style: none;
}

/* Boutons propres à l'outil : ils ne dépendent plus de Bootstrap ni du gabarit (« btn btn-primary »,
   « labo-btn ») et prennent la couleur choisie dans ifs-Styles (--med-accent). */
.com-medicaments .btn,
.com-medicaments .labo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1.2rem;
    border: 1.5px solid var(--med-border);
    border-radius: var(--med-radius);
    background: #fff;
    color: inherit;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.com-medicaments .btn-primary,
.com-medicaments .labo-btn {
    border-color: var(--med-accent);
    background: var(--med-accent);
    color: #fff;
    font-weight: 700;
}

.com-medicaments .btn-primary:hover,
.com-medicaments .btn-primary:focus-visible,
.com-medicaments .labo-btn:hover,
.com-medicaments .labo-btn:focus-visible {
    border-color: color-mix(in srgb, var(--med-accent) 82%, #000);
    background: color-mix(in srgb, var(--med-accent) 82%, #000);
    color: #fff;
}

.com-medicaments .btn-outline-secondary {
    border-color: var(--med-border);
    background: transparent;
    color: var(--med-muted);
}

.com-medicaments .btn-outline-secondary:hover,
.com-medicaments .btn-outline-secondary:focus-visible {
    border-color: var(--med-accent);
    background: var(--med-surface);
    color: var(--med-accent);
}

.com-medicaments .btn:focus-visible,
.com-medicaments .labo-btn:focus-visible {
    outline: 2px solid var(--med-accent);
    outline-offset: 2px;
}

.com-medicaments .btn-sm { padding: .35rem .8rem; font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
    .com-medicaments .btn,
    .com-medicaments .labo-btn { transition: none; }
}

.com-medicaments h1 {
    font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.25rem);
    line-height: 1.25;
    margin-block-end: 0.5rem;
}

/* ============================================================= */
/* Recherche                                                     */
/* ============================================================= */

.medicaments-search {
    display: flex;
    gap: 0.5rem;
    margin-block: 1.25rem 1.75rem;
    max-width: 34rem;
}

.medicaments-search input[type="search"] {
    flex: 1;
    min-width: 0;
}

/* ============================================================= */
/* Grille de fiches (listes, thème, maladie, ingrédient)         */
/* ============================================================= */

.medicaments-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0;
    margin: 1.25rem 0 0;
}

@media (min-width: 576px) {
    .medicaments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .medicaments-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .medicaments-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.medicaments-card {
    border: 1px solid var(--med-border-soft);
    border-radius: var(--med-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 35, 50, 0.05);
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.medicaments-card:hover,
.medicaments-card:focus-within {
    box-shadow: 0 0.5rem 1.25rem rgba(16, 35, 50, 0.12);
    transform: translateY(-2px);
}

.medicaments-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.medicaments-card-image,
.medicaments-card-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    padding: .6rem;
    box-sizing: border-box;
    background: #fff;
}

.medicaments-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #c3ccd4;
}

.medicaments-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.15rem 1.15rem;
}

.medicaments-card-title {
    font-weight: 650;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--med-accent);
}

.medicaments-card-link:hover .medicaments-card-title {
    color: var(--med-primary, #0F61B4);
}

.medicaments-card-code {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--med-muted);
}

.medicaments-card-indication {
    font-size: 0.88rem;
    color: var(--med-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.medicaments-card-badge {
    align-self: flex-start;
    font-weight: 500;
}

/* ============================================================= */
/* Fiche : disposition deux colonnes                             */
/* ============================================================= */

/* Navigation précédent / suivant dans la gamme */
.medicaments-fiche-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.25rem;
}

.medicaments-fiche-nav-link {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    max-width: 46%;
    padding: .6rem 1rem;
    background: #fff;
    border: 1px solid var(--labo-line, #dfe7ee);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.medicaments-fiche-nav-link:hover {
    border-color: var(--labo-green, #8fbe22);
    box-shadow: 0 10px 24px -14px rgba(8, 46, 88, .35);
    transform: translateY(-2px);
}

.medicaments-fiche-nav--next { margin-inline-start: auto; align-items: flex-end; text-align: end; }

.medicaments-fiche-nav-dir {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--labo-muted, #5f6b76);
}

.medicaments-fiche-nav-title {
    font-weight: 600;
    color: var(--labo-blue-deep, #0a4a8c);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575px) {
    .medicaments-fiche-nav-title { display: none; }
    .medicaments-fiche-nav-link { flex-direction: row; }
}

/* En-tête héro : visuel produit + titre + indication + notice */
.medicaments-hero {
    display: flex;
    gap: 2.25rem;
    align-items: center;
    background:
        radial-gradient(560px 300px at 90% -25%, rgba(143, 190, 34, .16), transparent 60%),
        linear-gradient(135deg, var(--labo-blue-light, #eaf2fb), #f6fbf1);
    border: 1px solid rgba(106, 168, 79, .28);
    border-radius: 18px;
    padding: 2.1rem 2.4rem;
    margin-block-end: 2.25rem;
}

.medicaments-hero-visual {
    flex: 0 0 auto;
    margin: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 45px -20px rgba(18, 58, 92, .32);
    padding: .6rem;
}

.medicaments-hero-visual img {
    height: 300px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    display: block;
    border-radius: 9px;
}

/* Déclencheur de zoom (bouton autour du visuel) */
.medicaments-zoom-trigger {
    border: 0;
    padding: 0;
    background: none;
    display: block;
    cursor: zoom-in;
    position: relative;
    font: inherit;
}

.medicaments-zoom-hint {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(15, 97, 180, .88);
    color: #fff;
    box-shadow: 0 4px 12px rgba(8, 46, 88, .3);
    transition: transform .15s ease, background .15s ease;
}

.medicaments-zoom-trigger:hover .medicaments-zoom-hint {
    background: var(--labo-green, #8fbe22);
    transform: scale(1.08);
}

/* Popup d'agrandissement — ouverture/fermeture en douceur */
.medicaments-zoom-dialog {
    border: 0;
    border-radius: 16px;
    padding: .75rem;
    max-width: min(92vw, 620px);
    box-shadow: 0 40px 90px -30px rgba(8, 30, 55, .55);
    opacity: 0;
    transform: scale(.9) translateY(10px);
    transition:
        opacity .28s ease,
        transform .28s cubic-bezier(.2, .9, .3, 1.15),
        overlay .28s ease allow-discrete,
        display .28s ease allow-discrete;
}

.medicaments-zoom-dialog[open] {
    opacity: 1;
    transform: scale(1) translateY(0);
}

@starting-style {
    .medicaments-zoom-dialog[open] {
        opacity: 0;
        transform: scale(.9) translateY(10px);
    }
}

.medicaments-zoom-dialog::backdrop {
    background: rgba(8, 30, 55, 0);
    backdrop-filter: blur(0);
    transition:
        background .28s ease,
        backdrop-filter .28s ease,
        overlay .28s ease allow-discrete,
        display .28s ease allow-discrete;
}

.medicaments-zoom-dialog[open]::backdrop {
    background: rgba(8, 30, 55, .62);
    backdrop-filter: blur(3px);
}

@starting-style {
    .medicaments-zoom-dialog[open]::backdrop {
        background: rgba(8, 30, 55, 0);
        backdrop-filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .medicaments-zoom-dialog,
    .medicaments-zoom-dialog::backdrop { transition: none; }
}

.medicaments-zoom-dialog img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 10px;
}

.medicaments-zoom-close {
    position: absolute;
    top: .55rem;
    right: .55rem;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(8, 30, 55, .55);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

.medicaments-zoom-close:hover { background: var(--labo-blue-deep, #0a4a8c); }

.medicaments-hero-body { flex: 1 1 auto; min-width: 0; }

/* QR code intégré au héro (espace de droite) */
.medicaments-hero-qr {
    flex: 0 0 auto;
    align-self: center;
    text-align: center;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 45px -20px rgba(18, 58, 92, .32);
    padding: .9rem .9rem .7rem;
    max-width: 180px;
}

.medicaments-hero-qr svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.medicaments-hero-qr-hint {
    margin: .5rem 0 0;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--med-muted);
}

@media (max-width: 991px) {
    .medicaments-hero-qr { display: none; }
}

.medicaments-hero-lead {
    font-size: 1.16rem;
    line-height: 1.55;
    color: var(--labo-ink, #16324c);
    max-width: 58ch;
}
.medicaments-hero-lead p { margin: 0; }

/* Mode « notice seulement » : indication approuvée dans un encadré sous le titre */
.medicaments-hero-notice {
    max-width: 62ch;
    margin: 1.1rem auto 0;
    padding: 1rem 1.35rem 1.1rem;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(106, 168, 79, .25);
    border-radius: 14px;
    box-shadow: 0 14px 32px -24px rgba(18, 58, 92, .45);
    text-align: start;
}

.medicaments-hero-notice-label {
    margin: 0 0 .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--labo-green-deep, #4f7d1c);
}

.medicaments-hero-notice-text {
    font-size: 1.04rem;
    line-height: 1.6;
    color: var(--labo-ink, #16324c);
}

.medicaments-hero-notice-text p { margin: 0; }

.medicaments-hero-body:has(.medicaments-hero-notice) { text-align: center; }
.medicaments-hero-body:has(.medicaments-hero-notice) .medicaments-hero-actions { justify-content: center; }

.medicaments-hero-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

@media (max-width: 767px) {
    .medicaments-hero { flex-direction: column; align-items: stretch; padding: 1.4rem; gap: 1.4rem; }
    .medicaments-hero-visual { flex-basis: auto; max-width: 250px; margin-inline: auto; }
}

.medicaments-fiche-header {
    margin-block-end: 1.5rem;
    padding-block-end: 1rem;
    border-block-end: 3px solid var(--med-accent);
}

.medicaments-fiche-code {
    margin: 0;
}

.medicaments-fiche-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

@media (min-width: 992px) {
    .medicaments-fiche-layout.has-aside {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
        gap: 0 3rem;
    }
}

/* Colonne principale : occupe toute la largeur disponible (comme les autres pages) */
.medicaments-fiche-main {
    min-width: 0;
}

.medicaments-fiche-media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-block-end: 1.75rem;
}

@media (min-width: 768px) {
    .medicaments-fiche-media:has(.ifs-box3d):has(.medicaments-fiche-image) {
        grid-template-columns: 1fr 1fr;
    }
}

.medicaments-fiche-image {
    margin: 0;
}

.medicaments-fiche-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--med-radius);
    border: 1px solid var(--med-border-soft);
}

/* Sections de contenu */
.medicaments-fiche-section {
    margin-block-end: 2.25rem;
}

.medicaments-fiche-section > h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--labo-blue-deep, #0a4a8c);
    margin-block-end: 0.9rem;
    padding-inline-start: 0.8rem;
    border-inline-start: 4px solid var(--labo-green, #8fbe22);
    border-radius: 2px;
}

.medicaments-fiche-section h3 {
    font-size: 1rem;
    font-weight: 650;
    margin-block: 1.1rem 0.5rem;
    color: var(--med-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.medicaments-fiche-section ul {
    padding-inline-start: 1.25rem;
    margin-block-end: 1rem;
}

.medicaments-fiche-section li {
    margin-block-end: 0.45rem;
}

.medicaments-fiche-section li::marker {
    color: var(--med-accent);
}

.medicaments-fiche-section p:last-child {
    margin-block-end: 0;
}

/* Indication mise en avant */
.medicaments-fiche-lead {
    font-size: 1.12rem;
    line-height: 1.6;
    padding: 0.9rem 1.15rem;
    background: var(--med-surface);
    border-inline-start: 4px solid var(--med-accent);
    border-radius: 0 var(--med-radius) var(--med-radius) 0;
}

/* Notes en italique (Attention, principe posologique…) */
.medicaments-description > p > em,
.medicaments-dosage > p > em {
    display: block;
    font-size: 0.92rem;
    color: var(--med-muted);
}

/* Composition : tableau + aide sur les dilutions côte à côte */
.medicaments-composition-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.medicaments-composition-layout .table-responsive { flex: 1 1 30rem; max-width: 34rem; }

.medicaments-dilution-help {
    flex: 1 1 16rem;
    max-width: 24rem;
    background: var(--labo-blue-light, #eaf2fb);
    border: 1px solid rgba(15, 97, 180, .18);
    border-radius: var(--med-radius);
    padding: 1.1rem 1.25rem;
}

.medicaments-dilution-help h3 {
    margin: 0 0 .5rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--labo-blue-deep, #0a4a8c);
}

.medicaments-dilution-help p {
    margin: 0 0 .7rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--labo-ink, #16324c);
}

.medicaments-dilution-help p:last-child { margin-bottom: 0; }

/* Composition */
.medicaments-composition .table {
    max-width: 34rem;
    margin: 0;
    border: 1px solid var(--med-border-soft);
    border-radius: var(--med-radius);
    overflow: hidden;
}

.medicaments-composition th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--labo-green-ink, #3c520a);
    background: rgba(143, 190, 34, .12);
    border-block-end-width: 1px;
}

.medicaments-composition td,
.medicaments-composition th {
    padding: 0.55rem 0.9rem;
}

.medicaments-composition tbody tr:nth-child(even) {
    background: var(--med-surface);
}

.medicaments-composition td a {
    font-weight: 550;
    text-decoration: none;
}

.medicaments-composition td a:hover,
.medicaments-composition td a:focus {
    color: var(--med-primary-dark, #0A4A8C);
}

.medicaments-composition td:last-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--med-muted);
}

/* ============================================================= */
/* Colonne latérale                                              */
/* ============================================================= */

.medicaments-fiche-aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .medicaments-fiche-aside {
        position: sticky;
        top: 1.5rem;
    }
}

.medicaments-aside-card {
    border: 1px solid var(--med-border-soft);
    border-radius: var(--med-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 35, 50, 0.05);
    padding: 1.15rem 1.25rem;
}

.medicaments-aside-card > h2 {
    margin-block-start: 0;
    padding-block-start: 0;
    line-height: 1.3;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--med-muted);
    margin-block-end: 0.75rem;
}

.medicaments-aside-hint {
    font-size: 0.85rem;
    color: var(--med-muted);
    margin: 0.65rem 0 0;
}

.medicaments-notice {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
}

/* QR code */
.medicaments-qrcode {
    text-align: center;
}

.medicaments-qrcode svg {
    max-width: 170px;
    height: auto;
    border: 1px solid var(--med-border-soft);
    border-radius: 0.375rem;
}

/* Badges maladies / thèmes */
.medicaments-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0;
    margin: 0;
}

.medicaments-badge-link {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.3;
    border-radius: 2rem;
    text-decoration: none;
    border: 1px solid var(--med-border);
    color: inherit;
    background: var(--med-surface);
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.medicaments-badge-link:hover,
.medicaments-badge-link:focus {
    background: #fff;
    border-color: var(--med-accent);
    color: var(--med-accent);
    text-decoration: none;
}

.medicaments-badge-disease {
    border-inline-start: 3px solid #d9a406;
}

.medicaments-badge-theme {
    border-inline-start: 3px solid var(--theme-c, var(--med-accent));
}

/* Marges verticales égales : certains gabarits réduisent le padding-bottom de tous les liens (trait de survol). */
.medicaments-badges .medicaments-badge-link {
    padding-block: 0.3rem;
}

/* Références officielles */
.medicaments-references-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
}

.medicaments-references-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.medicaments-references-list dt {
    font-size: 0.82rem;
    color: var(--med-muted);
    font-weight: 500;
    margin: 0;
}

.medicaments-references-list dd {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* ============================================================= */
/* Visualiseur 3D                                                */
/* ============================================================= */

/* Lecteur 3D des étuis (bibliothèque lib_ifsbox3d, <model-viewer>) */
.medicaments-fiche-media .ifs-box3d {
    --ifs-box3d-height: auto;
    --ifs-box3d-radius: var(--med-radius);
    --ifs-box3d-bg: var(--med-surface);
    margin: 0;
}

.medicaments-fiche-media .ifs-box3d__viewer {
    max-width: none;
    aspect-ratio: 1 / 1;
    max-height: 70vh;
    border: 1px solid var(--med-border-soft);
}

/* ============================================================= */
/* Index alphabétiques (maladies, ingrédients)                   */
/* ============================================================= */

.medicaments-alphabet {
    position: sticky;
    /* --med-sticky-top : bas de l'en-tête fixe du gabarit, mesuré par alphabet.js */
    top: var(--med-sticky-top, 0px);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    margin-block: 1.25rem 1.75rem;
    padding-block: 0.6rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(4px);
    border-block-end: 1px solid var(--med-border-soft);
}

.medicaments-alphabet-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    min-height: 2.1rem;
    border: 1px solid var(--med-border-soft);
    border-radius: 0.4rem;
    font-weight: 650;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--med-accent);
    background: #fff;
    /* Le gabarit anime la couleur des liens : couleur et fond doivent
       basculer ensemble, sinon la lettre disparaît (bleu sur bleu). */
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.medicaments-alphabet .medicaments-alphabet-link:hover,
.medicaments-alphabet .medicaments-alphabet-link:focus,
.medicaments-alphabet .medicaments-alphabet-link:focus-visible,
.medicaments-alphabet .medicaments-alphabet-link:active {
    background: var(--med-accent);
    border-color: var(--med-accent);
    color: #fff;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .medicaments-alphabet-link {
        transition: none;
    }
}

.medicaments-letter-group {
    margin-block-end: 1.75rem;
    /* L'ancre #lettre-X vise la section : elle s'arrête sous l'en-tête fixe
       du gabarit ET sous la barre alphabétique collante. */
    scroll-margin-top: calc(var(--med-sticky-top, 0px) + 4.5rem);
}

.medicaments-letter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--med-accent);
    margin-block-end: 0.75rem;
}

.medicaments-letter::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--med-border-soft);
}

.medicaments-disease-list {
    columns: 1;
    margin: 0;
    padding: 0;
}

@media (min-width: 576px) {
    .medicaments-disease-list {
        columns: 2;
        column-gap: 2.5rem;
    }
}

@media (min-width: 992px) {
    .medicaments-disease-list {
        columns: 3;
    }
}

.medicaments-disease-list li {
    break-inside: avoid;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.32rem;
}

.medicaments-disease-list a {
    text-decoration: none;
    line-height: 1.4;
}

.medicaments-disease-list a:hover,
.medicaments-disease-list a:focus {
    color: var(--med-primary-dark, #0A4A8C);
}

.medicaments-disease-count {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--med-border-soft);
    background: var(--med-surface) !important;
}

/* Description en tête de page maladie / ingrédient */
.medicaments-disease-description,
.medicaments-ingredient-description,
.medicaments-theme-description {
    max-width: 46rem;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--med-muted);
    margin-block-end: 1.5rem;
    padding: 0.9rem 1.15rem;
    background: var(--med-surface);
    border-inline-start: 4px solid var(--med-accent);
    border-radius: 0 var(--med-radius) var(--med-radius) 0;
}

.medicaments-disease-description p:last-child,
.medicaments-ingredient-description p:last-child,
.medicaments-theme-description p:last-child {
    margin: 0;
}

/* Titre de section « N médicaments … » */
.medicaments-disease .h4,
.medicaments-ingredient .h4,
.medicaments-theme .h4 {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--med-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-block: 1.75rem 0.25rem;
}

/* ============================================================= */
/* Liste des thèmes                                              */
/* ============================================================= */

.medicaments-theme-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0;
    margin: 1.25rem 0 0;
}

@media (min-width: 576px) {
    .medicaments-theme-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .medicaments-theme-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.medicaments-theme-link {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1rem 1.2rem 1rem calc(1.2rem + 4px);
    border: 1px solid var(--med-border-soft);
    border-radius: var(--med-radius);
    text-decoration: none;
    color: inherit;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 35, 50, 0.05);
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

/* Bande latérale : aplat, ou dégradé si deux couleurs (--theme-c2) */
.medicaments-theme-link::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(
        to bottom,
        var(--theme-c, var(--med-accent)),
        var(--theme-c2, var(--theme-c, var(--med-accent)))
    );
}

.medicaments-theme-link:hover,
.medicaments-theme-link:focus {
    box-shadow: 0 0.5rem 1.25rem rgba(16, 35, 50, 0.12);
    transform: translateY(-2px);
    color: inherit;
}

.medicaments-theme-visual {
    flex: none;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.medicaments-theme-icon {
    width: 64px;
    height: 64px;
    display: block;
}

.medicaments-theme-initial {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 3px solid transparent;
    color: var(--theme-c, var(--labo-blue, #0f61b4));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    /* Anneau : aplat ou dégradé (deux couleurs) */
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(
            135deg,
            var(--theme-c, var(--labo-blue, #0f61b4)),
            var(--theme-c2, var(--theme-c, var(--labo-blue, #0f61b4)))
        ) border-box;
}

.medicaments-theme-body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.medicaments-theme-dot,
.mod-medicaments-group-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--theme-c, #c3ccd4);
    flex: none;
}

.medicaments-theme-title {
    font-weight: 650;
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--med-accent);
}

.medicaments-theme-count {
    font-size: 0.85rem;
    color: var(--med-muted);
}

/* ============================================================= */
/* Divers                                                        */
/* ============================================================= */

.medicaments-back {
    margin-block-start: 2rem;
}

.medicaments-pagination {
    margin-block-start: 1.75rem;
}

/* ============================================================= */
/* Impression                                                    */
/* ============================================================= */

@media print {
    .medicaments-search,
    .ifs-box3d,
    .medicaments-alphabet,
    .medicaments-back {
        display: none;
    }

    .medicaments-fiche-layout.has-aside {
        grid-template-columns: 1fr;
    }

    .medicaments-fiche-aside {
        position: static;
    }

    .medicaments-qrcode svg {
        max-width: 120px;
    }
}

/* ---------- Pagination : chevrons sans police d'icônes ---------- */

/* Joomla rend « début / précédent / suivant / fin » sous forme d'icônes de
   police : <span class="icon-angle-left" aria-hidden="true"></span>, un span
   VIDE dont le dessin dépend entièrement d'une police d'icônes. Rien ne
   garantit que le template hôte en embarque une — les quatre boutons
   apparaissent alors entièrement vides. On dessine le chevron avec un
   caractère typographique : l'extension reste lisible quel que soit le
   template qui l'accueille, sans dépendre d'aucune ressource externe.
   La règle est portée par la classe racine du composant, elle ne peut donc
   pas déborder sur le reste du site. */
.com-medicaments [class*="icon-angle"] {
    display: inline-block;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}

.com-medicaments .icon-angle-double-left::before {
    content: "\00AB";
}

.com-medicaments .icon-angle-left::before {
    content: "\2039";
}

.com-medicaments .icon-angle-right::before {
    content: "\203A";
}

.com-medicaments .icon-angle-double-right::before {
    content: "\00BB";
}

/* ============================================================= */
/* Balises {ifsmedicaments …} dans un article ou un module (1.3.0) */
/* « colonnes » est un maximum : la grille suit la place réelle.   */
/* ============================================================= */

.medicaments-balise { --med-n: 4; margin: 1.5rem 0; }
.medicaments-balise.is-cols-1 { --med-n: 1; }
.medicaments-balise.is-cols-2 { --med-n: 2; }
.medicaments-balise.is-cols-3 { --med-n: 3; }
.medicaments-balise .medicaments-grid {
    margin: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(12rem, calc((100% - (var(--med-n) - 1) * 1.25rem) / var(--med-n)))), 1fr));
}
.medicaments-balise.is-seule .medicaments-grid { max-width: 20rem; }
form.medicaments-balise { display: flex; flex-wrap: wrap; gap: .5rem; }
form.medicaments-balise .form-control { flex: 1 1 16rem; width: auto; }