/**
 * ==========================================================================
 * EasyHomeo - Template CSS principal
 * ==========================================================================
 *
 * Template Joomla 6 pour EasyHomeo.swiss
 * Medicaments homeopathiques Dr. Reckeweg
 *
 * @package     tpl_easyhomeo
 * @version     1.2.0
 * @author      EasyHomeo
 * @copyright   (C) 2026 EasyHomeo
 * @license     GNU General Public License version 2 ou ulterieure
 *
 * Architecture mobile-first, aucune dependance de framework.
 * Breakpoints : 576px | 768px | 992px | 1200px
 *
 * Table des matieres :
 *  1.  Variables CSS
 *  2.  Reset et typographie de base
 *  3.  Mise en page (Layout)
 *  4.  Lien d'evitement (Skip Link)
 *  5.  En-tete (Header)
 *  6.  Recherche (Search)
 *  7.  Hero
 *  8.  Bodymap SVG
 *  9.  Wizard
 * 10.  Grille de themes (Themes Grid)
 * 11.  Cartes (Cards)
 * 12.  Detail medicament (Medication Detail)
 * 13.  Index A-Z
 * 14.  D-Tox
 * 15.  Pied de page (Footer)
 * 16.  Composants UI (Boutons, Badges, Onglets, Alertes)
 * 17.  Utilitaires
 * 18.  Impression (Print)
 * ==========================================================================
 */


/* ==========================================================================
   1. VARIABLES CSS
   --------------------------------------------------------------------------
   Toutes les couleurs, espacements, ombres et polices sont centralises ici.
   Les variables --eh-primary, --eh-secondary et --eh-cta peuvent etre
   surchargees dynamiquement depuis les parametres du template Joomla.
   ========================================================================== */

:root {
    /* --- Couleurs principales --- */
    --eh-primary:       #91C952;
    --eh-primary-light: #A8D673;
    --eh-primary-dark:  #6BA033;
    --eh-primary-bg:    #F0F8E8;

    --eh-secondary:       #00B5BF;
    --eh-secondary-light: #33C9D1;
    --eh-secondary-dark:  #008A92;
    --eh-secondary-bg:    #E0F7F8;

    --eh-cta:       #E10020;
    --eh-cta-light: #FF1A3D;
    --eh-cta-dark:  #B8001A;
    --eh-cta-bg:    #FDE8EC;

    /* --- Couleurs neutres --- */
    --eh-text:       #212121;
    --eh-text-light: #616161;
    --eh-text-muted: #9E9E9E;
    --eh-bg:         #FFFFFF;
    --eh-bg-alt:     #F5F5F5;
    --eh-surface:    #FFFFFF;
    --eh-border:     #E0E0E0;
    --eh-border-light: #F0F0F0;

    /* --- Couleurs fonctionnelles --- */
    --eh-success: #2E7D32;
    --eh-warning: #F9A825;
    --eh-danger:  #C62828;
    --eh-info:    #1565C0;

    /* --- Typographie --- */
    --eh-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --eh-font-mono: 'Fira Code', 'Consolas', monospace;
    --eh-line-height: 1.6;

    /* --- Arrondis --- */
    --eh-radius:    12px;
    --eh-radius-sm: 6px;
    --eh-radius-lg: 16px;
    --eh-radius-xl: 24px;
    --eh-radius-full: 9999px;

    /* --- Ombres --- */
    --eh-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
    --eh-shadow:     0 2px 8px rgba(0, 0, 0, 0.1);
    --eh-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.12);
    --eh-shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.15);
    --eh-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.18);

    /* --- Echelle d'espacement (base 4px) --- */
    --eh-space-1:  0.25rem;  /*  4px */
    --eh-space-2:  0.5rem;   /*  8px */
    --eh-space-3:  0.75rem;  /* 12px */
    --eh-space-4:  1rem;     /* 16px */
    --eh-space-5:  1.25rem;  /* 20px */
    --eh-space-6:  1.5rem;   /* 24px */
    --eh-space-8:  2rem;     /* 32px */
    --eh-space-10: 2.5rem;   /* 40px */
    --eh-space-12: 3rem;     /* 48px */
    --eh-space-16: 4rem;     /* 64px */
    --eh-space-20: 5rem;     /* 80px */

    /* --- Largeur du conteneur --- */
    --eh-container: 1200px;

    /* --- Transitions --- */
    --eh-transition: 200ms ease;
    --eh-transition-slow: 350ms ease;

    /* --- Z-index --- */
    --eh-z-dropdown: 100;
    --eh-z-sticky:   200;
    --eh-z-overlay:  300;
    --eh-z-modal:    400;
    --eh-z-toast:    500;

    /* --- En-tete --- */
    --eh-header-height: 72px;
    --eh-topbar-height: 36px;

    /* --- Glassmorphisme --- */
    --eh-glass-bg:     rgba(255, 255, 255, 0.88);
    --eh-glass-border: rgba(255, 255, 255, 0.55);
    --eh-glass-blur:   blur(14px) saturate(1.6);

    /* --- Gradients de marque --- */
    --eh-gradient-brand:     linear-gradient(135deg, var(--eh-primary-dark) 0%, var(--eh-secondary-dark) 100%);
    --eh-gradient-hero:      linear-gradient(-45deg, #1B5E20, #2E7D32, #0D47A1, #1565C0);
    --eh-gradient-primary:   linear-gradient(135deg, var(--eh-primary)   0%, var(--eh-primary-dark)   100%);
    --eh-gradient-secondary: linear-gradient(135deg, var(--eh-secondary) 0%, var(--eh-secondary-dark) 100%);
    --eh-gradient-cta:       linear-gradient(135deg, var(--eh-cta-light)  0%, var(--eh-cta-dark)       100%);

    /* --- Timing d'animation --- */
    --eh-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --eh-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --eh-ease-out:    cubic-bezier(0, 0, 0.2, 1);
}

/* --- Mode sombre (attribut data-theme) --- */
[data-theme="dark"] {
    --eh-text:         #F1F5F9;
    --eh-text-light:   #CBD5E1;
    --eh-text-muted:   #94A3B8;
    --eh-bg:           #0F1419;
    --eh-bg-alt:       #1A202C;
    --eh-surface:      #1E293B;
    --eh-border:       #334155;
    --eh-border-light: #2D3748;

    --eh-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
    --eh-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.5);
    --eh-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.6);
    --eh-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.7);

    --eh-glass-bg:     rgba(15, 20, 25, 0.85);
    --eh-glass-border: rgba(51, 65, 85, 0.5);

    --eh-primary-bg:   rgba(145, 201, 82, 0.1);
    --eh-secondary-bg: rgba(0, 181, 191, 0.1);
    --eh-cta-bg:       rgba(225, 0, 32, 0.1);

    --eh-success: #4CAF50;
    --eh-warning: #FFB74D;
    --eh-danger:  #EF5350;
}

/* --- Overrides dark mode pour elements a couleurs hardcodees --- */
[data-theme="dark"] .eh-search-bar__suggestions,
[data-theme="dark"] .eh-search-overlay__content {
    background: var(--eh-surface);
    color: var(--eh-text);
}

[data-theme="dark"] .eh-search-bar__input,
[data-theme="dark"] .eh-search-bar {
    background: var(--eh-surface);
    color: var(--eh-text);
    border-color: var(--eh-border);
}

[data-theme="dark"] .eh-badge--warning,
[data-theme="dark"] .eh-alert--warning,
[data-theme="dark"] .eh-safety-block--warning {
    background-color: rgba(255, 183, 77, 0.15);
    color: #FFB74D;
}

[data-theme="dark"] .eh-badge--danger,
[data-theme="dark"] .eh-alert--danger,
[data-theme="dark"] .eh-safety-block--danger,
[data-theme="dark"] .alert-message.alert-error {
    background-color: rgba(239, 83, 80, 0.15);
    color: #EF5350;
}

[data-theme="dark"] .eh-profile-badge--sm[title="Femme"] {
    background-color: rgba(233, 30, 99, 0.15);
}
[data-theme="dark"] .eh-profile-badge--sm[title="Homme"] {
    background-color: rgba(26, 35, 126, 0.15);
}
[data-theme="dark"] .eh-profile-badge--sm[title="Enfant"] {
    background-color: rgba(145, 201, 82, 0.15);
}
[data-theme="dark"] .eh-profile-badge--sm[title="Grossesse"] {
    background-color: rgba(225, 0, 32, 0.15);
}

[data-theme="dark"] .eh-wizard__step-item--done {
    background: color-mix(in srgb, var(--eh-primary) 15%, var(--eh-surface));
}
[data-theme="dark"] .eh-wizard__choice:hover {
    background: color-mix(in srgb, var(--eh-primary) 10%, var(--eh-surface));
}
[data-theme="dark"] .eh-wizard__choice.is-selected {
    background: color-mix(in srgb, var(--eh-primary) 15%, var(--eh-surface));
}
[data-theme="dark"] .eh-wizard__choice-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--eh-primary) 20%, var(--eh-surface)), color-mix(in srgb, var(--eh-primary) 10%, var(--eh-surface)));
}
[data-theme="dark"] .eh-wizard__result-label {
    background: color-mix(in srgb, var(--eh-primary) 10%, var(--eh-surface));
}
[data-theme="dark"] .eh-badge--comp {
    background: color-mix(in srgb, var(--eh-secondary) 20%, var(--eh-surface));
}

[data-theme="dark"] .eh-header.is-sticky {
    border-bottom-color: var(--eh-glass-border);
}

/* Bodymap tabs + zone buttons */
[data-theme="dark"] .eh-bodymap__tab {
    background: var(--eh-surface);
    border-color: var(--eh-border);
    color: var(--eh-text);
}
[data-theme="dark"] .eh-bodymap__tab.is-active {
    background: color-mix(in srgb, var(--tab-color) 15%, var(--eh-surface));
}
[data-theme="dark"] .eh-bodymap__card-back {
    background: var(--eh-surface);
}
[data-theme="dark"] .eh-bodymap__ailment-item {
    border-bottom-color: var(--eh-border-light);
}
[data-theme="dark"] .eh-bodymap__zone-btn {
    background: var(--eh-surface);
    border-color: var(--eh-border);
}
[data-theme="dark"] .eh-bodymap__zone-icon {
    background: color-mix(in srgb, var(--zone-color, #2E7D32) 20%, var(--eh-surface));
}
[data-theme="dark"] .eh-bodymap__zone-name {
    color: var(--eh-text);
}

/* Wizard */
[data-theme="dark"] .eh-wizard__progress-bar {
    background: var(--eh-border);
}
[data-theme="dark"] .eh-wizard__step-number {
    background: var(--eh-border);
    color: var(--eh-text-muted);
}
[data-theme="dark"] .eh-wizard__choice {
    background: var(--eh-surface);
    border-color: var(--eh-border);
}
[data-theme="dark"] .eh-wizard__choice.is-selected {
    background: color-mix(in srgb, var(--choice-color, var(--eh-primary)) 15%, var(--eh-surface));
}
[data-theme="dark"] .eh-wizard__result-card {
    background: var(--eh-surface);
    border-color: var(--eh-border);
}
[data-theme="dark"] .eh-wizard__nav {
    border-top-color: var(--eh-border);
}
[data-theme="dark"] .eh-wizard__panel-desc,
[data-theme="dark"] .eh-wizard__result-subtitle,
[data-theme="dark"] .eh-wizard__result-indication,
[data-theme="dark"] .eh-wizard__loading,
[data-theme="dark"] .eh-bodymap__ailment-count,
[data-theme="dark"] .eh-bodymap__loading {
    color: var(--eh-text-muted);
}

/* Mode sombre automatique (preference systeme, sans choix explicite) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --eh-text:         #F1F5F9;
        --eh-text-light:   #CBD5E1;
        --eh-text-muted:   #94A3B8;
        --eh-bg:           #0F1419;
        --eh-bg-alt:       #1A202C;
        --eh-surface:      #1E293B;
        --eh-border:       #334155;
        --eh-border-light: #2D3748;

        --eh-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
        --eh-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.5);
        --eh-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.6);
        --eh-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.7);

        --eh-glass-bg:     rgba(15, 20, 25, 0.85);
        --eh-glass-border: rgba(51, 65, 85, 0.5);

        --eh-primary-bg:   rgba(145, 201, 82, 0.1);
        --eh-secondary-bg: rgba(0, 181, 191, 0.1);
        --eh-cta-bg:       rgba(225, 0, 32, 0.1);

        --eh-success: #4CAF50;
        --eh-warning: #FFB74D;
        --eh-danger:  #EF5350;
    }

    :root:not([data-theme="light"]) .eh-search-bar__suggestions,
    :root:not([data-theme="light"]) .eh-search-overlay__content {
        background: var(--eh-surface);
        color: var(--eh-text);
    }

    :root:not([data-theme="light"]) .eh-search-bar__input,
    :root:not([data-theme="light"]) .eh-search-bar {
        background: var(--eh-surface);
        color: var(--eh-text);
        border-color: var(--eh-border);
    }

    :root:not([data-theme="light"]) .eh-badge--warning,
    :root:not([data-theme="light"]) .eh-alert--warning,
    :root:not([data-theme="light"]) .eh-safety-block--warning {
        background-color: rgba(255, 183, 77, 0.15);
        color: #FFB74D;
    }

    :root:not([data-theme="light"]) .eh-badge--danger,
    :root:not([data-theme="light"]) .eh-alert--danger,
    :root:not([data-theme="light"]) .eh-safety-block--danger,
    :root:not([data-theme="light"]) .alert-message.alert-error {
        background-color: rgba(239, 83, 80, 0.15);
        color: #EF5350;
    }

    :root:not([data-theme="light"]) .eh-header.is-sticky {
        border-bottom-color: rgba(51, 65, 85, 0.5);
    }
}


/* ==========================================================================
   2. RESET ET TYPOGRAPHIE DE BASE
   --------------------------------------------------------------------------
   Reset minimal, styles typographiques globaux, mobile-first.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%; /* 16px */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    font-family: var(--eh-font);
    font-size: 1rem;
    line-height: var(--eh-line-height);
    color: var(--eh-text);
    background-color: var(--eh-bg);
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

/* --- Titres --- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--eh-text);
    margin-bottom: var(--eh-space-4);
}

h1 {
    font-size: 1.75rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 1.5rem;
    letter-spacing: -0.015em;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.125rem;
    font-weight: 600;
}

h5 {
    font-size: 1rem;
    font-weight: 600;
}

h6 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
}

@media (min-width: 1200px) {
    h1 { font-size: 2.75rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.625rem; }
}

/* --- Paragraphes et texte --- */
p {
    margin-bottom: var(--eh-space-4);
}

p:last-child {
    margin-bottom: 0;
}

strong, b {
    font-weight: 700;
}

em, i {
    font-style: italic;
}

small {
    font-size: 0.875rem;
}

/* --- Liens --- */
a {
    color: var(--eh-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--eh-transition), text-decoration-color var(--eh-transition);
}

a:hover,
a:focus-visible {
    color: var(--eh-primary-dark);
    text-decoration-color: var(--eh-primary-dark);
}

a:focus-visible {
    outline: 2px solid var(--eh-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Listes --- */
ul, ol {
    margin-bottom: var(--eh-space-4);
    padding-left: var(--eh-space-6);
}

ul ul, ol ol, ul ol, ol ul {
    margin-bottom: 0;
}

li {
    margin-bottom: var(--eh-space-1);
}

/* --- Images --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

figure {
    margin: 0 0 var(--eh-space-4);
}

figcaption {
    font-size: 0.875rem;
    color: var(--eh-text-light);
    margin-top: var(--eh-space-2);
}

/* --- Tableaux --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--eh-space-6);
}

th, td {
    padding: var(--eh-space-3) var(--eh-space-4);
    text-align: left;
    border-bottom: 1px solid var(--eh-border);
}

th {
    font-weight: 600;
    color: var(--eh-text);
    background-color: var(--eh-bg-alt);
}

/* --- Code --- */
code {
    font-family: var(--eh-font-mono);
    font-size: 0.875em;
    background-color: var(--eh-bg-alt);
    padding: 0.15em 0.4em;
    border-radius: var(--eh-radius-sm);
}

pre {
    font-family: var(--eh-font-mono);
    font-size: 0.875rem;
    background-color: var(--eh-bg-alt);
    padding: var(--eh-space-4);
    border-radius: var(--eh-radius);
    overflow-x: auto;
    margin-bottom: var(--eh-space-6);
}

pre code {
    background: none;
    padding: 0;
}

/* --- Separateur --- */
hr {
    border: none;
    border-top: 1px solid var(--eh-border);
    margin: var(--eh-space-8) 0;
}

/* --- Selection --- */
::selection {
    background-color: var(--eh-primary-bg);
    color: var(--eh-primary-dark);
}


/* ==========================================================================
   3. MISE EN PAGE (LAYOUT)
   --------------------------------------------------------------------------
   Conteneur principal, grille contenu + barre laterale, sections.
   ========================================================================== */

.eh-container {
    width: 100%;
    max-width: var(--eh-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--eh-space-4);
    padding-right: var(--eh-space-4);
}

@media (min-width: 768px) {
    .eh-container {
        padding-left: var(--eh-space-6);
        padding-right: var(--eh-space-6);
    }
}

/* --- Contenu principal --- */
.eh-main {
    padding-top: var(--eh-space-8);
    padding-bottom: var(--eh-space-8);
}

.eh-content {
    width: 100%;
}

.eh-content__main {
    min-width: 0; /* Evite le debordement dans flex */
}

/* --- Mise en page avec barre laterale --- */
.eh-content--with-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--eh-space-8);
}

.eh-content--with-sidebar .eh-content__main {
    flex: 1;
    min-width: 0;
}

.eh-content__sidebar {
    width: 100%;
}

@media (min-width: 992px) {
    .eh-content--with-sidebar {
        flex-direction: row;
    }

    .eh-content__sidebar {
        width: 300px;
        flex-shrink: 0;
    }
}

/* --- Sections --- */
.eh-section {
    padding-top: var(--eh-space-16);
    padding-bottom: var(--eh-space-16);
}

@media (min-width: 768px) {
    .eh-section {
        padding-top: var(--eh-space-20);
        padding-bottom: var(--eh-space-20);
    }
}

.eh-section--alt {
    background-color: var(--eh-bg-alt);
}

.eh-section__title {
    text-align: center;
    margin-bottom: var(--eh-space-3);
    color: var(--eh-text);
    letter-spacing: -0.02em;
}

/* Trait decoratif gradient sous le titre */
.eh-section__title::after {
    content: '';
    display: block;
    width: 52px;
    height: 4px;
    background: var(--eh-gradient-brand);
    border-radius: 2px;
    margin: 0.625rem auto 0;
}

.eh-section__subtitle {
    text-align: center;
    color: var(--eh-text-light);
    font-size: 1.0625rem;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--eh-space-10);
    line-height: 1.65;
}


/* ==========================================================================
   4. LIEN D'EVITEMENT (SKIP LINK)
   --------------------------------------------------------------------------
   Masque visuellement, accessible au clavier. Apparait au focus.
   ========================================================================== */

.eh-skip-link {
    position: absolute;
    top: -100%;
    left: var(--eh-space-4);
    z-index: var(--eh-z-toast);
    padding: var(--eh-space-3) var(--eh-space-6);
    background-color: var(--eh-primary);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 0 0 var(--eh-radius) var(--eh-radius);
    transition: top var(--eh-transition);
}

.eh-skip-link:focus {
    top: 0;
    outline: 2px solid var(--eh-cta);
    outline-offset: 2px;
}


/* ==========================================================================
   5. EN-TETE (HEADER)
   --------------------------------------------------------------------------
   Barre superieure (topbar), en-tete principal sticky, logo, navigation
   avec menu hamburger responsive, et gestion de l'etat ouvert/ferme.
   ========================================================================== */

/* --- Topbar --- */
.eh-topbar {
    background-color: var(--eh-primary-dark);
    color: #FFFFFF;
    font-size: 0.8125rem;
    padding: var(--eh-space-2) 0;
}

.eh-topbar a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.eh-topbar a:hover {
    color: #FFFFFF;
}

/* --- En-tete principal --- */
.eh-header {
    position: sticky;
    top: 0;
    z-index: var(--eh-z-sticky);
    background-color: var(--eh-bg);
    border-bottom: 1px solid var(--eh-border);
    transition: box-shadow var(--eh-transition),
                transform 320ms var(--eh-ease-smooth),
                background-color 320ms var(--eh-ease-smooth),
                backdrop-filter 320ms var(--eh-ease-smooth),
                border-color 320ms var(--eh-ease-smooth);
}

/* Ancienne classe conservee pour compatibilite */
.eh-header--scrolled {
    box-shadow: var(--eh-shadow-md);
}

/* Glassmorphisme quand sticky (scroll > 80px) */
.eh-header.is-sticky {
    background-color: var(--eh-glass-bg);
    backdrop-filter: var(--eh-glass-blur);
    -webkit-backdrop-filter: var(--eh-glass-blur);
    border-bottom-color: rgba(224, 224, 224, 0.6);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Masquage fluide au scroll descendant */
.eh-header.is-hidden {
    transform: translateY(-100%);
}

.eh-header__main {
    height: var(--eh-header-height);
}

.eh-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--eh-space-3);
    max-width: 100%;
}

/* --- Logo --- */
.eh-header__logo {
    flex-shrink: 0;
}

.eh-header__logo a {
    display: flex;
    align-items: center;
    gap: var(--eh-space-3);
    text-decoration: none;
    color: var(--eh-text);
}

.eh-logo {
    height: 44px;
    width: auto;
}

.eh-logo-text {
    font-size: 1.375rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--eh-primary);
}

.eh-logo-text strong {
    color: var(--eh-primary-dark);
}

.eh-header__desc {
    display: none;
    font-size: 0.75rem;
    color: var(--eh-text-muted);
    margin-bottom: 0;
    line-height: 1.3;
}

@media (min-width: 992px) {
    .eh-header__desc {
        display: block;
    }
}

/* --- Navigation --- */
.eh-header__nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Hamburger */
.eh-header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: var(--eh-space-2);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--eh-radius-sm);
    transition: background-color var(--eh-transition);
}

.eh-header__toggle:hover {
    background-color: var(--eh-bg-alt);
}

.eh-header__toggle:focus-visible {
    outline: 2px solid var(--eh-primary);
    outline-offset: 2px;
}

.eh-header__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--eh-text);
    border-radius: 2px;
    transition: transform var(--eh-transition), opacity var(--eh-transition);
}

/* Etat ouvert du hamburger */
.eh-header__toggle[aria-expanded="true"] .eh-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.eh-header__toggle[aria-expanded="true"] .eh-header__toggle-bar:nth-child(2) {
    opacity: 0;
}

.eh-header__toggle[aria-expanded="true"] .eh-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile (masque par defaut) */
.eh-header__menu {
    display: none;
    position: absolute;
    top: var(--eh-header-height);
    left: 0;
    right: 0;
    background-color: var(--eh-bg);
    border-bottom: 1px solid var(--eh-border);
    box-shadow: var(--eh-shadow-md);
    padding: var(--eh-space-4) 0;
    max-height: calc(100vh - var(--eh-header-height));
    overflow-y: auto;
}

.eh-header__menu.is-open {
    display: block;
}

/* Liens de navigation */
.eh-header__menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.eh-header__menu li {
    margin: 0;
}

.eh-header__menu a,
.eh-header__menu .nav-header {
    display: block;
    padding: var(--eh-space-3) var(--eh-space-6);
    color: var(--eh-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: background-color var(--eh-transition), color var(--eh-transition);
}

.eh-header__menu a:hover,
.eh-header__menu a:focus-visible {
    background-color: var(--eh-primary-bg);
    color: var(--eh-primary);
}

.eh-header__menu .active > a {
    color: var(--eh-primary);
    font-weight: 600;
}

/* Sous-menu mobile */
.eh-header__menu ul ul {
    padding-left: var(--eh-space-6);
}

.eh-header__menu ul ul a {
    font-size: 0.875rem;
    font-weight: 400;
    padding-top: var(--eh-space-2);
    padding-bottom: var(--eh-space-2);
}

/* --- Navigation bureau (min-width: 992px) --- */
@media (min-width: 992px) {
    .eh-header__toggle {
        display: none;
    }

    .eh-header__menu {
        display: flex;
        position: static;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        max-height: none;
        overflow: visible;
        align-items: center;
    }

    .eh-header__menu > ul,
    .eh-header__menu > nav > ul {
        display: flex;
        align-items: center;
        gap: var(--eh-space-1);
    }

    .eh-header__menu a,
    .eh-header__menu .nav-header {
        padding: var(--eh-space-1) var(--eh-space-2);
        border-radius: var(--eh-radius-sm);
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .eh-header__menu a:hover,
    .eh-header__menu a:focus-visible {
        background-color: var(--eh-primary-bg);
    }

    /* Sous-menu bureau (dropdown) */
    .eh-header__menu li {
        position: relative;
    }

    .eh-header__menu ul ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        padding: var(--eh-space-2) 0;
        background-color: var(--eh-bg);
        border: 1px solid var(--eh-border);
        border-radius: var(--eh-radius);
        box-shadow: var(--eh-shadow-md);
        z-index: var(--eh-z-dropdown);
    }

    .eh-header__menu li:hover > ul,
    .eh-header__menu li:focus-within > ul {
        display: block;
    }

    .eh-header__menu ul ul a {
        padding: var(--eh-space-2) var(--eh-space-4);
        font-size: 0.875rem;
        border-radius: 0;
    }

    .eh-header__menu ul ul ul {
        top: 0;
        left: 100%;
    }
}

/* --- Icone maison (remplace "Accueil") --- */
@media (min-width: 992px) {
    .eh-header__menu .item-101 > a {
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--eh-space-2);
    }

    .eh-header__menu .item-101 > a::before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") no-repeat center / contain;
    }
}

/* --- Bouton recherche (loupe) dans le header --- */
.eh-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background-color: var(--eh-bg-alt);
    border-radius: 50%;
    color: var(--eh-text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.eh-search-toggle:hover {
    background-color: var(--eh-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
}

/* --- Overlay recherche modale --- */
.eh-search-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--eh-z-sticky) + 100);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(20vh, 160px);
}

.eh-search-overlay[hidden] {
    display: none;
}

.eh-search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.eh-search-overlay__content {
    position: relative;
    width: 90%;
    max-width: 620px;
    background: var(--eh-surface, #fff);
    border-radius: var(--eh-radius, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: eh-search-slide-in 0.25s ease-out;
}

@keyframes eh-search-slide-in {
    from { opacity: 0; transform: translateY(-20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.eh-search-overlay__form {
    display: flex;
    align-items: center;
    gap: var(--eh-space-3);
    padding: var(--eh-space-4) var(--eh-space-5);
    border-bottom: 1px solid var(--eh-border, #e0e0e0);
}

.eh-search-overlay__icon {
    flex-shrink: 0;
    color: var(--eh-text-muted, #999);
}

.eh-search-overlay__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: var(--eh-font);
    font-size: 1.125rem;
    color: var(--eh-text);
    outline: none;
    padding: var(--eh-space-2) 0;
}

.eh-search-overlay__input::placeholder {
    color: var(--eh-text-muted, #999);
}

.eh-search-overlay__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: var(--eh-bg-alt, #f5f5f5);
    border-radius: 50%;
    color: var(--eh-text-muted, #999);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.eh-search-overlay__close:hover {
    background: var(--eh-border, #e0e0e0);
    color: var(--eh-text);
}

/* Resultats dans la modale */
.eh-search-overlay .eh-search__results {
    position: relative;
    top: auto;
    border: none;
    border-radius: 0 0 var(--eh-radius, 12px) var(--eh-radius, 12px);
    box-shadow: none;
    max-height: 50vh;
    overflow-y: auto;
}


/* ==========================================================================
   6. RECHERCHE (SEARCH)
   --------------------------------------------------------------------------
   Resultats autocomplete et styles partages.
   ========================================================================== */

/* --- Resultats autocomplete --- */
.eh-search__results {
    position: absolute;
    top: calc(100% + var(--eh-space-2));
    left: 0;
    right: 0;
    min-width: 280px;
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--eh-bg);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius);
    box-shadow: var(--eh-shadow-lg);
    z-index: var(--eh-z-dropdown);
}

.eh-search__results[hidden] {
    display: none;
}

.eh-search__results-item {
    display: flex;
    align-items: center;
    gap: var(--eh-space-3);
    padding: var(--eh-space-3) var(--eh-space-4);
    text-decoration: none;
    color: var(--eh-text);
    transition: background-color var(--eh-transition);
    border-bottom: 1px solid var(--eh-border-light);
}

.eh-search__results-item:last-child {
    border-bottom: none;
}

.eh-search__results-item:hover,
.eh-search__results-item.is-active {
    background-color: var(--eh-primary-bg);
    color: var(--eh-primary-dark);
}

.eh-search__results-item mark {
    background-color: var(--eh-cta-bg);
    color: var(--eh-cta-dark);
    padding: 0 2px;
    border-radius: 2px;
}

.eh-search__results-name {
    font-weight: 600;
    font-size: 0.9375rem;
}

.eh-search__results-code {
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
    font-family: var(--eh-font-mono);
}

.eh-search__results-empty {
    padding: var(--eh-space-6) var(--eh-space-4);
    text-align: center;
    color: var(--eh-text-muted);
    font-size: 0.875rem;
}

.eh-search__results-footer {
    padding: var(--eh-space-3) var(--eh-space-4);
    text-align: center;
    border-top: 1px solid var(--eh-border);
    font-size: 0.8125rem;
}


/* ==========================================================================
   7. HERO
   --------------------------------------------------------------------------
   Section hero pleine largeur avec arriere-plan en degrade,
   texte accrocheur et barre de recherche sur la page d'accueil.
   ========================================================================== */

@keyframes eh-gradient-shift {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

@keyframes eh-float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%       { transform: translateY(-20px) scale(1.04); }
}

.eh-hero {
    background: var(--eh-gradient-hero);
    background-size: 400% 400%;
    animation: eh-gradient-shift 14s ease infinite;
    color: #FFFFFF;
    padding: var(--eh-space-12) 0 calc(var(--eh-space-16) + 40px);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Motif decoratif haut-droit */
.eh-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -8%;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.09) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: eh-float 8s ease-in-out infinite;
}

/* Motif decoratif bas-gauche */
.eh-hero::after {
    content: '';
    position: absolute;
    bottom: 12%;
    left: -8%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: eh-float 10s ease-in-out infinite reverse;
}

@media (min-width: 768px) {
    .eh-hero {
        padding: var(--eh-space-16) 0 var(--eh-space-20);
    }
}

.eh-hero__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: var(--eh-space-4);
    line-height: 1.15;
    letter-spacing: -0.025em;
    position: relative;
    z-index: 1;
    animation: eh-hero-in 0.7s var(--eh-ease-out) both;
}

@keyframes eh-hero-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
    .eh-hero__title {
        font-size: 2.75rem;
    }
}

@media (min-width: 1200px) {
    .eh-hero__title {
        font-size: 3.25rem;
    }
}

.eh-hero__text {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.88);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--eh-space-8);
    position: relative;
    z-index: 1;
    animation: eh-hero-in 0.7s 0.15s var(--eh-ease-out) both;
}

@media (min-width: 768px) {
    .eh-hero__text {
        font-size: 1.1875rem;
    }
}

/* Barre de recherche dans le hero */
.eh-hero__search {
    position: relative;
    z-index: 1;
    max-width: 540px;
    margin: 0 auto;
}

.eh-hero__search .eh-search__form {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: transparent;
    box-shadow: var(--eh-shadow-lg);
}

.eh-hero__search .eh-search__input {
    font-size: 1rem;
    padding: var(--eh-space-3) var(--eh-space-6);
    color: var(--eh-text);
    width: 100%;
}

.eh-hero__search .eh-search__btn {
    width: 44px;
    height: 44px;
    margin: 3px;
}

/* Stats ou metadonnees dans le hero */
.eh-hero__stats {
    display: flex;
    justify-content: center;
    gap: var(--eh-space-8);
    margin-top: var(--eh-space-8);
    position: relative;
    z-index: 1;
}

.eh-hero__stat {
    text-align: center;
}

.eh-hero__stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFFFFF;
}

.eh-hero__stat-label {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ==========================================================================
   8. BODYMAP SVG (SECTION WRAPPER)
   --------------------------------------------------------------------------
   Le rendu SVG interactif est gere par le module mod_easyhomeo_bodymap.
   Ici on definit uniquement le conteneur de la section.
   ========================================================================== */

.eh-section--bodymap {
    background: linear-gradient(180deg, var(--eh-bg-alt) 0%, var(--eh-bg) 100%);
    position: relative;
}

.eh-section--bodymap .eh-section__title {
    color: var(--eh-primary-dark);
}

/* Trait decoratif de section bodymap (override couleur primaire) */
.eh-section--bodymap .eh-section__title::after {
    background: var(--eh-gradient-primary);
}

.eh-bodymap-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--eh-space-6);
}

@media (min-width: 768px) {
    .eh-bodymap-wrapper {
        flex-direction: row;
        justify-content: center;
        gap: var(--eh-space-10);
    }
}


/* ==========================================================================
   9. WIZARD (SECTION WRAPPER)
   --------------------------------------------------------------------------
   L'assistant guide est gere par son propre module CSS.
   On definit ici le conteneur de section et l'arriere-plan.
   ========================================================================== */

.eh-section--wizard {
    background: linear-gradient(160deg, var(--eh-secondary-bg) 0%, var(--eh-bg) 40%, var(--eh-primary-bg) 100%);
    position: relative;
}

.eh-section--wizard .eh-section__title {
    color: var(--eh-secondary-dark);
}


/* ==========================================================================
   10. GRILLE DE THEMES (THEMES GRID)
   --------------------------------------------------------------------------
   Grille de cartes thematiques (3 colonnes sur bureau) avec bordure
   coloree, icone, titre et compteur de medicaments.
   ========================================================================== */

.eh-section--themes {
    background-color: var(--eh-bg);
}

.eh-themes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--eh-space-5);
}

@media (min-width: 768px) {
    .eh-themes-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--eh-space-6);
    }
}

@media (min-width: 1200px) {
    .eh-themes-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--eh-space-6);
    }
}

.eh-theme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--eh-space-3);
    padding: var(--eh-space-6) var(--eh-space-5);
    background-color: var(--eh-surface);
    border: 1px solid var(--eh-border-light);
    border-radius: var(--eh-radius-lg);
    text-decoration: none;
    color: var(--eh-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 280ms var(--eh-ease-smooth),
                box-shadow 280ms var(--eh-ease-smooth),
                border-color 280ms var(--eh-ease-smooth);
}

.eh-theme-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--eh-theme-color, var(--eh-primary)) 22%, transparent);
    border-color: color-mix(in srgb, var(--eh-theme-color, var(--eh-primary)) 30%, transparent);
    text-decoration: none;
    color: var(--eh-text);
}

.eh-theme-card:focus-visible {
    outline: 2px solid var(--eh-theme-color, var(--eh-primary));
    outline-offset: 2px;
}

.eh-theme-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--eh-theme-color, var(--eh-primary)), color-mix(in srgb, var(--eh-theme-color, var(--eh-primary)) 75%, #000));
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 1.5rem;
    transition: transform 280ms var(--eh-ease-smooth),
                box-shadow 280ms var(--eh-ease-smooth);
}

.eh-theme-card:hover .eh-theme-card__icon {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--eh-theme-color, var(--eh-primary)) 35%, transparent);
}

.eh-theme-card__icon svg {
    display: block;
}

.eh-theme-card__body {
    flex: 1;
    min-width: 0;
}

.eh-theme-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: var(--eh-space-1);
    line-height: 1.3;
    color: var(--eh-text);
}

.eh-theme-card__count {
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
}


/* ==========================================================================
   11. CARTES (CARDS)
   --------------------------------------------------------------------------
   Composant de carte generique avec image, corps, titre, texte et badges.
   Utilise pour les listes de medicaments, articles, etc.
   ========================================================================== */

.eh-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--eh-space-6);
}

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

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

.eh-card {
    display: flex;
    flex-direction: column;
    background-color: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-lg);
    overflow: hidden;
    transition: transform 260ms var(--eh-ease-smooth),
                box-shadow 260ms var(--eh-ease-smooth),
                border-color 260ms var(--eh-ease-smooth);
}

.eh-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(46, 125, 50, 0.12), var(--eh-shadow-md);
    border-color: color-mix(in srgb, var(--eh-primary) 30%, var(--eh-border));
}

/* Image de la carte */
.eh-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--eh-bg-alt);
}

.eh-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--eh-transition-slow);
}

.eh-card:hover .eh-card__image img {
    transform: scale(1.04);
}

/* Badges superposes sur l'image */
.eh-card__badges {
    position: absolute;
    top: var(--eh-space-3);
    left: var(--eh-space-3);
    display: flex;
    gap: var(--eh-space-2);
    flex-wrap: wrap;
}

/* Corps de la carte */
.eh-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--eh-space-5);
}

.eh-card__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--eh-space-2);
    line-height: 1.35;
}

.eh-card__title a {
    color: var(--eh-text);
    text-decoration: none;
}

.eh-card__title a:hover {
    color: var(--eh-primary);
}

.eh-card__text {
    font-size: 0.875rem;
    color: var(--eh-text-light);
    line-height: 1.5;
    margin-bottom: var(--eh-space-4);
    flex: 1;
    /* Limiter a 3 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eh-card__meta {
    display: flex;
    align-items: center;
    gap: var(--eh-space-3);
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
    margin-top: auto;
    padding-top: var(--eh-space-3);
    border-top: 1px solid var(--eh-border-light);
}

/* Carte horizontale (pour les listes) */
.eh-card--horizontal {
    flex-direction: row;
}

.eh-card--horizontal .eh-card__image {
    width: 120px;
    flex-shrink: 0;
    aspect-ratio: auto;
}

@media (min-width: 576px) {
    .eh-card--horizontal .eh-card__image {
        width: 160px;
    }
}


/* ==========================================================================
   12. DETAIL MEDICAMENT (MEDICATION DETAIL)
   --------------------------------------------------------------------------
   Mise en page de la fiche individuelle d'un medicament : image en sidebar,
   onglets (posologie, composition, etc.), liste des codes et indications.
   ========================================================================== */

.eh-med-detail {
    display: flex;
    flex-direction: column;
    gap: var(--eh-space-8);
}

@media (min-width: 768px) {
    .eh-med-detail {
        flex-direction: row;
        gap: var(--eh-space-10);
    }
}

/* --- Image du medicament --- */
.eh-med-detail__image {
    flex-shrink: 0;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .eh-med-detail__image {
        width: 240px;
        margin: 0;
    }
}

.eh-med-detail__image img {
    width: 100%;
    border-radius: var(--eh-radius);
    border: 1px solid var(--eh-border);
    background-color: var(--eh-bg-alt);
}

/* --- Contenu principal --- */
.eh-med-detail__content {
    flex: 1;
    min-width: 0;
}

.eh-med-detail__title {
    font-size: 1.5rem;
    margin-bottom: var(--eh-space-2);
}

@media (min-width: 768px) {
    .eh-med-detail__title {
        font-size: 2rem;
    }
}

.eh-med-detail__subtitle {
    font-size: 1rem;
    color: var(--eh-text-light);
    margin-bottom: var(--eh-space-6);
}

.eh-med-detail__code {
    display: inline-block;
    font-family: var(--eh-font-mono);
    font-size: 0.875rem;
    background-color: var(--eh-primary-bg);
    color: var(--eh-primary-dark);
    padding: var(--eh-space-1) var(--eh-space-3);
    border-radius: var(--eh-radius-sm);
    margin-bottom: var(--eh-space-6);
}

/* --- Onglets du medicament --- */
.eh-med-tabs {
    margin-bottom: var(--eh-space-8);
}

.eh-med-tabs__nav {
    display: flex;
    border-bottom: 2px solid var(--eh-border);
    gap: var(--eh-space-1);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.eh-med-tabs__nav::-webkit-scrollbar {
    display: none;
}

.eh-med-tabs__btn {
    flex-shrink: 0;
    padding: var(--eh-space-3) var(--eh-space-5);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: var(--eh-font);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--eh-text-light);
    cursor: pointer;
    transition: color var(--eh-transition), border-color var(--eh-transition);
    white-space: nowrap;
}

.eh-med-tabs__btn:hover {
    color: var(--eh-primary);
}

.eh-med-tabs__btn.is-active,
.eh-med-tabs__btn[aria-selected="true"] {
    color: var(--eh-primary);
    border-bottom-color: var(--eh-primary);
    font-weight: 600;
}

.eh-med-tabs__btn:focus-visible {
    outline: 2px solid var(--eh-primary);
    outline-offset: -2px;
    border-radius: var(--eh-radius-sm) var(--eh-radius-sm) 0 0;
}

.eh-med-tabs__panel {
    padding: var(--eh-space-6) 0;
}

.eh-med-tabs__panel[hidden] {
    display: none;
}

/* --- Posologie --- */
.eh-med-posology {
    background-color: var(--eh-bg-alt);
    padding: var(--eh-space-5);
    border-radius: var(--eh-radius);
    margin-bottom: var(--eh-space-4);
}

.eh-med-posology__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: var(--eh-space-3);
    color: var(--eh-primary-dark);
}

.eh-med-posology p {
    font-size: 0.9375rem;
    color: var(--eh-text-light);
}

/* --- Composition --- */
.eh-med-composition {
    list-style: none;
    padding: 0;
    margin: 0;
}

.eh-med-composition li {
    padding: var(--eh-space-3) 0;
    border-bottom: 1px solid var(--eh-border-light);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--eh-space-3);
}

.eh-med-composition li:last-child {
    border-bottom: none;
}

.eh-med-composition__name {
    font-weight: 500;
}

.eh-med-composition__amount {
    font-size: 0.875rem;
    color: var(--eh-text-muted);
    font-family: var(--eh-font-mono);
}

/* --- Codes et references --- */
.eh-med-codes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eh-space-2);
}


/* ==========================================================================
   13. INDEX A-Z
   --------------------------------------------------------------------------
   Navigation alphabetique avec boutons pour chaque lettre,
   et liste filtrable de medicaments/termes.
   ========================================================================== */

.eh-az {
    margin-bottom: var(--eh-space-8);
}

/* Navigation des lettres */
.eh-az-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eh-space-1);
    justify-content: center;
    margin-bottom: var(--eh-space-8);
    padding: var(--eh-space-4);
    background-color: var(--eh-bg-alt);
    border-radius: var(--eh-radius);
}

.eh-az-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--eh-border);
    background-color: var(--eh-surface);
    color: var(--eh-text);
    font-family: var(--eh-font);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--eh-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--eh-transition), color var(--eh-transition), border-color var(--eh-transition);
}

.eh-az-nav__btn:hover {
    background-color: var(--eh-primary-bg);
    border-color: var(--eh-primary);
    color: var(--eh-primary);
}

.eh-az-nav__btn.is-active,
.eh-az-nav__btn[aria-current="true"] {
    background-color: var(--eh-primary);
    border-color: var(--eh-primary);
    color: #FFFFFF;
}

.eh-az-nav__btn:disabled,
.eh-az-nav__btn--empty {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.eh-az-nav__btn:focus-visible {
    outline: 2px solid var(--eh-primary);
    outline-offset: 2px;
}

@media (min-width: 576px) {
    .eh-az-nav__btn {
        width: 40px;
        height: 40px;
        font-size: 0.9375rem;
    }
}

/* Liste des elements filtrables */
.eh-az-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.eh-az-list__group {
    margin-bottom: var(--eh-space-6);
}

.eh-az-list__letter {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--eh-primary);
    padding-bottom: var(--eh-space-2);
    border-bottom: 2px solid var(--eh-primary);
    margin-bottom: var(--eh-space-3);
}

.eh-az-list__item {
    margin: 0;
}

.eh-az-list__item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--eh-space-3) var(--eh-space-4);
    text-decoration: none;
    color: var(--eh-text);
    border-radius: var(--eh-radius-sm);
    transition: background-color var(--eh-transition);
}

.eh-az-list__item a:hover {
    background-color: var(--eh-primary-bg);
    color: var(--eh-primary-dark);
}

.eh-az-list__item-code {
    font-family: var(--eh-font-mono);
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
}


/* ==========================================================================
   14. D-TOX
   --------------------------------------------------------------------------
   Page complete de la cure D-Tox : hero, stepper, bienfaits, introduction,
   dosage, timeline 4 phases animees, CTA, FAQ et disclaimer.
   Design ludique et anime avec scroll-reveal et transitions fluides.
   ========================================================================== */

/* --- Animations keyframes --- */
@keyframes eh-dtox-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.05); }
}

@keyframes eh-dtox-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.8); opacity: 0; }
}

@keyframes eh-dtox-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes eh-dtox-shimmer {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
}

/* --- Hero --- */
.eh-dtox__hero {
    position: relative;
    text-align: center;
    padding: var(--eh-space-10) var(--eh-space-6) var(--eh-space-8);
    background: linear-gradient(160deg, #91C952 0%, #00B5BF 50%, #9C27B0 100%);
    background-size: 300% 300%;
    animation: eh-dtox-gradient 12s ease infinite;
    border-radius: var(--eh-radius-lg);
    margin-bottom: var(--eh-space-8);
    overflow: hidden;
    color: #fff;
}

.eh-dtox__hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.eh-dtox__hero-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.eh-dtox__hero-circle--1 {
    width: 200px;
    height: 200px;
    top: -40px;
    right: -40px;
    animation: eh-dtox-float 6s ease-in-out infinite;
}

.eh-dtox__hero-circle--2 {
    width: 120px;
    height: 120px;
    bottom: -20px;
    left: 10%;
    animation: eh-dtox-float 8s ease-in-out infinite 1s;
}

.eh-dtox__hero-circle--3 {
    width: 80px;
    height: 80px;
    top: 30%;
    left: -20px;
    animation: eh-dtox-float 7s ease-in-out infinite 2s;
}

.eh-dtox__hero-content {
    position: relative;
    z-index: 1;
}

.eh-dtox__hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--eh-space-2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 16px;
    border-radius: var(--eh-radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: var(--eh-space-4);
    color: #fff;
}

.eh-dtox__title {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: var(--eh-space-3);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: #fff;
}

.eh-dtox__subtitle {
    font-size: 1.125rem;
    opacity: 0.9;
    max-width: 500px;
    margin: 0 auto;
    color: #fff;
}

/* --- Mini stepper (navigation rapide) --- */
.eh-dtox__stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: var(--eh-space-4) var(--eh-space-2);
    margin-bottom: var(--eh-space-8);
    flex-wrap: wrap;
}

.eh-dtox__step {
    display: flex;
    align-items: center;
    gap: var(--eh-space-2);
    text-decoration: none;
    padding: var(--eh-space-2) var(--eh-space-3);
    border-radius: var(--eh-radius-full);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--eh-text-light);
}

.eh-dtox__step:hover {
    background: color-mix(in srgb, var(--step-color) 12%, transparent);
    color: var(--step-color);
    transform: translateY(-2px);
}

.eh-dtox__step-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--step-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.3s, box-shadow 0.3s;
}

.eh-dtox__step:hover .eh-dtox__step-num {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color) 25%, transparent);
}

.eh-dtox__step-label {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.eh-dtox__step-arrow {
    color: var(--eh-border);
    display: flex;
    align-items: center;
    margin: 0 var(--eh-space-1);
}

/* --- Bienfaits --- */
.eh-dtox__benefits {
    margin-bottom: var(--eh-space-8);
    text-align: center;
}

.eh-dtox__benefits-heading {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--eh-primary-dark);
    margin-bottom: var(--eh-space-6);
    position: relative;
    padding-bottom: var(--eh-space-3);
}

.eh-dtox__benefits-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 3px;
    background: linear-gradient(90deg, var(--eh-primary), var(--eh-secondary));
    border-radius: 2px;
}

.eh-dtox__benefits-grid {
    display: grid;
    gap: var(--eh-space-4);
}

@media (min-width: 768px) {
    .eh-dtox__benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--eh-space-6);
    }
}

.eh-dtox__benefit-card {
    position: relative;
    background: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-lg);
    padding: var(--eh-space-6) var(--eh-space-5);
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
    overflow: hidden;
}

.eh-dtox__benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(145, 201, 82, 0.15);
}

.eh-dtox__benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--eh-primary), var(--eh-secondary));
}

.eh-dtox__benefit-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--eh-primary), var(--eh-secondary));
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: var(--eh-space-3);
}

.eh-dtox__benefit-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--eh-text);
    margin: 0;
    font-weight: 500;
}

/* --- Introduction (Pourquoi / Comment) --- */
.eh-dtox__intro {
    display: grid;
    gap: var(--eh-space-6);
    margin-bottom: var(--eh-space-8);
}

@media (min-width: 768px) {
    .eh-dtox__intro {
        grid-template-columns: 1fr 1fr;
    }
}

.eh-dtox__intro-card {
    position: relative;
    background: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-lg);
    padding: var(--eh-space-6);
    padding-top: var(--eh-space-8);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
}

.eh-dtox__intro-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--eh-shadow);
}

.eh-dtox__intro-icon {
    position: absolute;
    top: calc(var(--eh-space-6) - 4px);
    right: var(--eh-space-6);
    font-size: 2.5rem;
    opacity: 0.08;
    color: var(--eh-primary);
}

.eh-dtox__intro-card--why {
    border-top: 3px solid var(--eh-primary);
}

.eh-dtox__intro-card--how {
    border-top: 3px solid var(--eh-secondary);
}

.eh-dtox__intro-card--how .eh-dtox__intro-icon {
    color: var(--eh-secondary);
}

.eh-dtox__intro-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--eh-text);
    margin-bottom: var(--eh-space-4);
}

.eh-dtox__intro-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--eh-text-light);
}

.eh-dtox__intro-text p {
    margin-bottom: var(--eh-space-3);
}

.eh-dtox__intro-text ul {
    padding-left: var(--eh-space-5);
    margin-bottom: var(--eh-space-3);
}

.eh-dtox__intro-text li {
    margin-bottom: var(--eh-space-2);
}

/* --- Dosage --- */
.eh-dtox__dosage {
    margin-bottom: var(--eh-space-8);
}

.eh-dtox__dosage-inner {
    background: linear-gradient(135deg, rgba(145, 201, 82, 0.06) 0%, rgba(0, 181, 191, 0.06) 100%);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-lg);
    padding: var(--eh-space-6);
    text-align: center;
}

.eh-dtox__dosage-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--eh-primary-dark);
    margin-bottom: var(--eh-space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--eh-space-2);
}

.eh-dtox__dosage-title i {
    color: var(--eh-primary);
}

.eh-dtox__dosage-intro {
    font-size: 0.9375rem;
    color: var(--eh-text-light);
    margin-bottom: var(--eh-space-5);
}

.eh-dtox__dosage-options {
    display: grid;
    gap: var(--eh-space-4);
    max-width: 600px;
    margin: 0 auto var(--eh-space-4);
}

@media (min-width: 576px) {
    .eh-dtox__dosage-options {
        grid-template-columns: 1fr 1fr;
    }
}

.eh-dtox__dosage-option {
    background: var(--eh-surface);
    border-radius: var(--eh-radius);
    padding: var(--eh-space-4);
    text-align: left;
    border: 1px solid var(--eh-border);
    transition: transform 0.3s, box-shadow 0.3s;
}

.eh-dtox__dosage-option:hover {
    transform: translateY(-2px);
    box-shadow: var(--eh-shadow-sm);
}

.eh-dtox__dosage-option p {
    font-size: 0.9375rem;
    color: var(--eh-text);
    margin: 0;
    line-height: 1.6;
}

.eh-dtox__dosage-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--eh-primary), var(--eh-secondary));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: var(--eh-radius-full);
    margin-bottom: var(--eh-space-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.eh-dtox__dosage-note {
    font-size: 0.875rem;
    color: var(--eh-text-muted);
    font-style: italic;
    margin: 0;
}

/* --- Titre de section --- */
.eh-dtox__section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--eh-primary-dark);
    text-align: center;
    margin-bottom: var(--eh-space-6);
    position: relative;
    padding-bottom: var(--eh-space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--eh-space-2);
}

.eh-dtox__section-title i {
    color: var(--eh-primary);
    font-size: 1.25rem;
}

.eh-dtox__section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 3px;
    background: linear-gradient(90deg, var(--eh-primary), var(--eh-secondary));
    border-radius: 2px;
}

/* --- Timeline des phases --- */
.eh-dtox__timeline {
    position: relative;
    margin-bottom: var(--eh-space-8);
}

/* Phase card */
.eh-dtox-phase {
    display: flex;
    gap: var(--eh-space-5);
    margin-bottom: var(--eh-space-6);
}

.eh-dtox-phase:last-child {
    margin-bottom: 0;
}

/* Indicateur (numero + connecteur vertical) */
.eh-dtox-phase__indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.eh-dtox-phase__number {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--eh-phase-color), var(--eh-phase-color-end, var(--eh-phase-color)));
    color: #fff;
    font-size: 1.125rem;
    font-weight: 800;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--eh-bg), 0 4px 12px color-mix(in srgb, var(--eh-phase-color) 40%, transparent);
    z-index: 1;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.eh-dtox-phase:hover .eh-dtox-phase__number {
    transform: scale(1.1);
}

.eh-dtox-phase__number-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--eh-phase-color);
    animation: eh-dtox-pulse 2.5s ease-in-out infinite;
    z-index: -1;
}

.eh-dtox-phase__connector {
    width: 3px;
    flex: 1;
    background: linear-gradient(180deg, var(--eh-phase-color), var(--eh-border));
    border-radius: 2px;
    margin-top: var(--eh-space-2);
    min-height: 40px;
}

/* Contenu de la phase */
.eh-dtox-phase__content {
    flex: 1;
    background: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-lg);
    padding: var(--eh-space-5);
    border-left: 4px solid var(--eh-phase-color, var(--eh-primary));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
}

.eh-dtox-phase__content:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--eh-phase-color) 15%, transparent);
}

.eh-dtox-phase__header {
    display: flex;
    align-items: flex-start;
    gap: var(--eh-space-4);
    margin-bottom: var(--eh-space-4);
}

.eh-dtox-phase__icon-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--eh-phase-color) 12%, transparent);
    color: var(--eh-phase-color);
    border-radius: var(--eh-radius-lg);
    flex-shrink: 0;
    transition: transform 0.3s;
}

.eh-dtox-phase__icon-wrap svg {
    width: 26px;
    height: 26px;
}

.eh-dtox-phase:hover .eh-dtox-phase__icon-wrap {
    transform: rotate(-8deg) scale(1.1);
}

.eh-dtox-phase__header-text {
    flex: 1;
}

.eh-dtox-phase__badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--eh-phase-color);
    background: color-mix(in srgb, var(--eh-phase-color) 10%, transparent);
    padding: 2px 10px;
    border-radius: var(--eh-radius-full);
    margin-bottom: var(--eh-space-1);
}

.eh-dtox-phase__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--eh-space-1);
    color: var(--eh-text);
}

.eh-dtox-phase__duration {
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
    display: flex;
    align-items: center;
    gap: var(--eh-space-1);
}

.eh-dtox-phase__duration i {
    color: var(--eh-phase-color);
    font-size: 0.75rem;
}

.eh-dtox-phase__description {
    font-size: 0.9375rem;
    color: var(--eh-text-light);
    line-height: 1.7;
    margin-bottom: var(--eh-space-4);
    padding-left: var(--eh-space-2);
    border-left: 2px solid color-mix(in srgb, var(--eh-phase-color) 20%, transparent);
}

.eh-dtox-phase__description p {
    margin-bottom: var(--eh-space-2);
}

/* --- Medication card dans phase --- */
.eh-dtox-phase__medications {
    border-top: 1px dashed color-mix(in srgb, var(--eh-phase-color) 25%, var(--eh-border));
    padding-top: var(--eh-space-4);
}

.eh-dtox-med {
    display: flex;
    align-items: center;
    gap: var(--eh-space-4);
    padding: var(--eh-space-3) var(--eh-space-4);
    background: color-mix(in srgb, var(--eh-phase-color) 4%, var(--eh-bg));
    border: 1px solid color-mix(in srgb, var(--eh-phase-color) 15%, var(--eh-border));
    border-radius: var(--eh-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: var(--eh-space-2);
}

.eh-dtox-med:last-child {
    margin-bottom: 0;
}

.eh-dtox-med:hover {
    border-color: var(--eh-phase-color);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--eh-phase-color) 20%, transparent);
    transform: translateX(4px);
}

.eh-dtox-med__visual {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--eh-radius);
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.eh-dtox-med__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.eh-dtox-med__placeholder {
    color: var(--eh-phase-color);
    font-size: 1.5rem;
}

.eh-dtox-med__info {
    flex: 1;
    min-width: 0;
}

.eh-dtox-med__r-number {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--eh-phase-color);
    background: color-mix(in srgb, var(--eh-phase-color) 10%, transparent);
    padding: 1px 8px;
    border-radius: var(--eh-radius-full);
    margin-bottom: 2px;
}

.eh-dtox-med__name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--eh-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eh-dtox-med__subtitle {
    display: block;
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eh-dtox-med__arrow {
    color: var(--eh-text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.3s, color 0.3s;
}

.eh-dtox-med:hover .eh-dtox-med__arrow {
    transform: translateX(3px);
    color: var(--eh-phase-color);
}

/* --- CTA --- */
.eh-dtox__cta {
    margin-bottom: var(--eh-space-8);
}

.eh-dtox__cta-inner {
    position: relative;
    text-align: center;
    padding: var(--eh-space-8) var(--eh-space-6);
    background: linear-gradient(135deg, var(--eh-primary) 0%, var(--eh-secondary) 100%);
    border-radius: var(--eh-radius-lg);
    overflow: hidden;
}

.eh-dtox__cta-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: eh-dtox-shimmer 4s ease-in-out infinite;
}

.eh-dtox__cta-emoji {
    display: block;
    font-size: 2.5rem;
    margin-bottom: var(--eh-space-3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.eh-dtox__cta-text {
    font-size: 1.375rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* --- FAQ --- */
.eh-dtox__faq {
    margin-bottom: var(--eh-space-8);
}

.eh-dtox__faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.eh-dtox__faq-item {
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-lg);
    margin-bottom: var(--eh-space-3);
    overflow: hidden;
    transition: box-shadow 0.3s, border-color 0.3s;
}

.eh-dtox__faq-item[open] {
    box-shadow: 0 4px 16px rgba(145, 201, 82, 0.1);
    border-color: var(--eh-primary);
}

.eh-dtox__faq-question {
    padding: var(--eh-space-4) var(--eh-space-5);
    font-size: 1rem;
    font-weight: 600;
    color: var(--eh-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eh-space-3);
    transition: background-color 0.2s, color 0.2s;
}

.eh-dtox__faq-question:hover {
    background-color: color-mix(in srgb, var(--eh-primary) 4%, transparent);
}

.eh-dtox__faq-question::-webkit-details-marker {
    display: none;
}

.eh-dtox__faq-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--eh-primary) 10%, transparent);
    flex-shrink: 0;
    position: relative;
    transition: transform 0.3s, background 0.3s;
}

.eh-dtox__faq-toggle::before,
.eh-dtox__faq-toggle::after {
    content: '';
    position: absolute;
    background: var(--eh-primary);
    border-radius: 1px;
    transition: transform 0.3s;
}

.eh-dtox__faq-toggle::before {
    width: 12px;
    height: 2px;
}

.eh-dtox__faq-toggle::after {
    width: 2px;
    height: 12px;
}

.eh-dtox__faq-item[open] .eh-dtox__faq-toggle {
    transform: rotate(45deg);
    background: var(--eh-primary);
}

.eh-dtox__faq-item[open] .eh-dtox__faq-toggle::before,
.eh-dtox__faq-item[open] .eh-dtox__faq-toggle::after {
    background: #fff;
}

.eh-dtox__faq-answer {
    padding: 0 var(--eh-space-5) var(--eh-space-4);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--eh-text-light);
}

.eh-dtox__faq-answer p {
    margin: 0;
}

/* --- Disclaimer --- */
.eh-dtox__disclaimer {
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
    text-align: center;
    font-style: italic;
    padding: var(--eh-space-4) var(--eh-space-6);
    border-top: 1px solid var(--eh-border);
    margin-top: var(--eh-space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--eh-space-2);
}

.eh-dtox__disclaimer i {
    color: var(--eh-cta);
    font-size: 0.875rem;
}

/* --- Mobile --- */
@media (max-width: 767.98px) {
    .eh-dtox__hero {
        padding: var(--eh-space-8) var(--eh-space-4) var(--eh-space-6);
    }

    .eh-dtox__title {
        font-size: 1.625rem;
    }

    .eh-dtox__stepper {
        gap: var(--eh-space-1);
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--eh-space-3);
    }

    .eh-dtox__step-label {
        font-size: 0.75rem;
    }

    .eh-dtox-phase {
        gap: var(--eh-space-3);
    }

    .eh-dtox-phase__number {
        width: 36px;
        height: 36px;
        font-size: 0.9375rem;
    }

    .eh-dtox-phase__content {
        padding: var(--eh-space-4);
    }

    .eh-dtox-phase__icon-wrap {
        width: 40px;
        height: 40px;
    }

    .eh-dtox-phase__icon-wrap svg {
        width: 22px;
        height: 22px;
    }

    .eh-dtox-phase__title {
        font-size: 1.0625rem;
    }

    .eh-dtox-med {
        gap: var(--eh-space-3);
        padding: var(--eh-space-3);
    }

    .eh-dtox-med__visual {
        width: 52px;
        height: 52px;
    }

    .eh-dtox__faq-question {
        padding: var(--eh-space-3) var(--eh-space-4);
        font-size: 0.9375rem;
    }

    .eh-dtox__faq-answer {
        padding: 0 var(--eh-space-4) var(--eh-space-3);
    }

    .eh-dtox__cta-text {
        font-size: 1.125rem;
    }
}


/* ==========================================================================
   15. PIED DE PAGE (FOOTER)
   --------------------------------------------------------------------------
   Pied de page sombre avec grille 3 colonnes, liens, reseaux sociaux
   et barre de copyright.
   ========================================================================== */

.eh-footer {
    background-color: #1A1A2E;
    color: rgba(255, 255, 255, 0.8);
    padding-top: var(--eh-space-12);
}

.eh-footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color var(--eh-transition);
}

.eh-footer a:hover,
.eh-footer a:focus-visible {
    color: #FFFFFF;
}

/* Grille du footer */
.eh-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--eh-space-8);
    padding-bottom: var(--eh-space-10);
}

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

@media (min-width: 992px) {
    .eh-footer__grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

/* Colonne du footer */
.eh-footer__col h3,
.eh-footer__col .module-title {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: var(--eh-space-4);
    padding-bottom: var(--eh-space-2);
    border-bottom: 2px solid var(--eh-primary);
    display: inline-block;
}

.eh-footer__col p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
}

/* Listes de liens */
.eh-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.eh-footer__col li {
    margin-bottom: var(--eh-space-2);
}

.eh-footer__col li a {
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: var(--eh-space-2);
    padding: var(--eh-space-1) 0;
}

.eh-footer__col li a:hover {
    padding-left: var(--eh-space-2);
}

/* Barre inferieure du footer */
.eh-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--eh-space-4) 0;
}

/* Copyright */
.eh-footer__copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--eh-space-4) 0;
    text-align: center;
}

.eh-footer__copyright p {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}


/* ==========================================================================
   16. COMPOSANTS UI (BOUTONS, BADGES, ONGLETS, ALERTES)
   --------------------------------------------------------------------------
   Bibliotheque de composants reutilisables.
   ========================================================================== */

/* --- Boutons --- */
.eh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--eh-space-2);
    padding: var(--eh-space-3) var(--eh-space-6);
    font-family: var(--eh-font);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--eh-radius);
    cursor: pointer;
    transition: background-color var(--eh-transition), color var(--eh-transition),
                border-color var(--eh-transition), box-shadow var(--eh-transition),
                transform var(--eh-transition);
    white-space: nowrap;
}

.eh-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.eh-btn:active {
    transform: translateY(0);
}

.eh-btn:focus-visible {
    outline: 2px solid var(--eh-primary);
    outline-offset: 2px;
}

/* Bouton principal (vert) */
.eh-btn--primary {
    background-color: var(--eh-primary);
    color: #FFFFFF;
    border-color: var(--eh-primary);
}

.eh-btn--primary:hover {
    background-color: var(--eh-primary-dark);
    border-color: var(--eh-primary-dark);
    color: #FFFFFF;
    box-shadow: var(--eh-shadow);
}

/* Bouton secondaire (bleu) */
.eh-btn--secondary {
    background-color: var(--eh-secondary);
    color: #FFFFFF;
    border-color: var(--eh-secondary);
}

.eh-btn--secondary:hover {
    background-color: var(--eh-secondary-dark);
    border-color: var(--eh-secondary-dark);
    color: #FFFFFF;
    box-shadow: var(--eh-shadow);
}

/* Bouton d'action (ambre) avec effet shimmer */
@keyframes eh-shimmer {
    from { background-position: -200px center; }
    to   { background-position: calc(200px + 100%) center; }
}

.eh-btn--cta {
    background-color: var(--eh-cta);
    color: #FFFFFF;
    border-color: var(--eh-cta);
    position: relative;
    overflow: hidden;
}

.eh-btn--cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%
    );
    background-size: 200px 100%;
    animation: eh-shimmer 2.8s linear infinite;
    pointer-events: none;
}

.eh-btn--cta:hover {
    background-color: var(--eh-cta-dark);
    border-color: var(--eh-cta-dark);
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(255, 143, 0, 0.35);
}

/* Bouton contour */
.eh-btn--outline {
    background-color: transparent;
    color: var(--eh-primary);
    border-color: var(--eh-primary);
}

.eh-btn--outline:hover {
    background-color: var(--eh-primary);
    color: #FFFFFF;
}

.eh-btn--outline-secondary {
    background-color: transparent;
    color: var(--eh-secondary);
    border-color: var(--eh-secondary);
}

.eh-btn--outline-secondary:hover {
    background-color: var(--eh-secondary);
    color: #FFFFFF;
}

/* Bouton texte (sans fond ni bordure) */
.eh-btn--ghost {
    background-color: transparent;
    color: var(--eh-primary);
    border-color: transparent;
    padding-left: var(--eh-space-3);
    padding-right: var(--eh-space-3);
}

.eh-btn--ghost:hover {
    background-color: var(--eh-primary-bg);
    transform: none;
}

/* Tailles de boutons */
.eh-btn--sm {
    padding: var(--eh-space-2) var(--eh-space-4);
    font-size: 0.8125rem;
    border-radius: var(--eh-radius-sm);
}

.eh-btn--lg {
    padding: var(--eh-space-4) var(--eh-space-8);
    font-size: 1.0625rem;
    border-radius: var(--eh-radius-lg);
}

.eh-btn--block {
    width: 100%;
}

.eh-btn:disabled,
.eh-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Groupe de boutons */
.eh-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eh-space-3);
}

/* --- Badges --- */
.eh-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--eh-space-1);
    padding: var(--eh-space-1) var(--eh-space-3);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--eh-radius-full);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.eh-badge--primary {
    background-color: var(--eh-primary-bg);
    color: var(--eh-primary-dark);
}

.eh-badge--secondary {
    background-color: var(--eh-secondary-bg);
    color: var(--eh-secondary-dark);
}

.eh-badge--cta {
    background-color: var(--eh-cta-bg);
    color: var(--eh-cta-dark);
}

.eh-badge--success {
    background-color: #E8F5E9;
    color: #1B5E20;
}

.eh-badge--warning {
    background-color: #FFF8E1;
    color: #E65100;
}

.eh-badge--danger {
    background-color: #FFEBEE;
    color: #B71C1C;
}

.eh-badge--neutral {
    background-color: var(--eh-bg-alt);
    color: var(--eh-text-light);
}

/* --- Tags --- */
.eh-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--eh-space-1);
    padding: var(--eh-space-1) var(--eh-space-3);
    font-size: 0.8125rem;
    font-weight: 500;
    background-color: var(--eh-bg-alt);
    color: var(--eh-text-light);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-full);
    text-decoration: none;
    transition: background-color var(--eh-transition), border-color var(--eh-transition), color var(--eh-transition);
}

a.eh-tag:hover {
    background-color: var(--eh-primary-bg);
    border-color: var(--eh-primary);
    color: var(--eh-primary);
}

.eh-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eh-space-2);
}

/* --- Alertes --- */
.eh-alert {
    position: relative;
    padding: var(--eh-space-4) var(--eh-space-5);
    border-radius: var(--eh-radius);
    font-size: 0.9375rem;
    margin-bottom: var(--eh-space-4);
    border-left: 4px solid transparent;
}

.eh-alert p:last-child {
    margin-bottom: 0;
}

.eh-alert--info {
    background-color: var(--eh-secondary-bg);
    border-left-color: var(--eh-secondary);
    color: var(--eh-secondary-dark);
}

.eh-alert--success {
    background-color: #E8F5E9;
    border-left-color: var(--eh-success);
    color: #1B5E20;
}

.eh-alert--warning {
    background-color: #FFF8E1;
    border-left-color: var(--eh-warning);
    color: #E65100;
}

.eh-alert--danger {
    background-color: #FFEBEE;
    border-left-color: var(--eh-danger);
    color: #B71C1C;
}

/* Compatibilite messages systeme Joomla */
.alert-message {
    padding: var(--eh-space-4) var(--eh-space-5);
    border-radius: var(--eh-radius);
    margin-bottom: var(--eh-space-4);
    font-size: 0.9375rem;
    border-left: 4px solid var(--eh-secondary);
    background-color: var(--eh-secondary-bg);
    color: var(--eh-secondary-dark);
}

.alert-message.alert-success,
.alert-message.success {
    border-left-color: var(--eh-success);
    background-color: #E8F5E9;
    color: #1B5E20;
}

.alert-message.alert-warning,
.alert-message.warning {
    border-left-color: var(--eh-warning);
    background-color: #FFF8E1;
    color: #E65100;
}

.alert-message.alert-error,
.alert-message.alert-danger,
.alert-message.error {
    border-left-color: var(--eh-danger);
    background-color: #FFEBEE;
    color: #B71C1C;
}

/* --- Onglets generiques --- */
.eh-tabs {
    margin-bottom: var(--eh-space-6);
}

.eh-tabs__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid var(--eh-border);
    gap: var(--eh-space-1);
    overflow-x: auto;
    scrollbar-width: none;
}

.eh-tabs__list::-webkit-scrollbar {
    display: none;
}

.eh-tabs__list li {
    margin: 0;
    flex-shrink: 0;
}

.eh-tabs__trigger {
    display: block;
    padding: var(--eh-space-3) var(--eh-space-5);
    font-family: var(--eh-font);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--eh-text-light);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--eh-transition), border-color var(--eh-transition);
    text-decoration: none;
}

.eh-tabs__trigger:hover {
    color: var(--eh-primary);
}

.eh-tabs__trigger.is-active,
.eh-tabs__trigger[aria-selected="true"] {
    color: var(--eh-primary);
    border-bottom-color: var(--eh-primary);
    font-weight: 600;
}

.eh-tabs__trigger:focus-visible {
    outline: 2px solid var(--eh-primary);
    outline-offset: -2px;
    border-radius: var(--eh-radius-sm) var(--eh-radius-sm) 0 0;
}

.eh-tabs__panel {
    padding: var(--eh-space-6) 0;
}

.eh-tabs__panel[hidden] {
    display: none;
}

/* --- Formulaires --- */
.eh-form-group {
    margin-bottom: var(--eh-space-5);
}

.eh-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--eh-text);
    margin-bottom: var(--eh-space-2);
}

.eh-form-input,
.eh-form-select,
.eh-form-textarea {
    display: block;
    width: 100%;
    padding: var(--eh-space-3) var(--eh-space-4);
    font-family: var(--eh-font);
    font-size: 0.9375rem;
    color: var(--eh-text);
    background-color: var(--eh-bg);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius);
    transition: border-color var(--eh-transition), box-shadow var(--eh-transition);
}

.eh-form-input:focus,
.eh-form-select:focus,
.eh-form-textarea:focus {
    outline: none;
    border-color: var(--eh-primary);
    box-shadow: 0 0 0 3px var(--eh-primary-bg);
}

.eh-form-input::placeholder,
.eh-form-textarea::placeholder {
    color: var(--eh-text-muted);
}

.eh-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.eh-form-help {
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
    margin-top: var(--eh-space-1);
}

/* --- Pagination --- */
.eh-pagination {
    margin: var(--eh-space-8) 0;
}

.eh-pagination .pagination__wrapper {
    display: flex;
    justify-content: center;
}

.eh-pagination ul.pagination,
.eh-pagination ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--eh-space-1);
    list-style: none;
    padding: 0;
    margin: 0;
}

.eh-pagination li,
.eh-pagination .page-item {
    list-style: none;
    margin: 0;
}

.eh-pagination .page-link,
.eh-pagination a,
.eh-pagination > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: var(--eh-space-2) var(--eh-space-3);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--eh-text);
    text-decoration: none;
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-sm);
    transition: background-color var(--eh-transition), color var(--eh-transition), border-color var(--eh-transition);
}

.eh-pagination .page-link:hover,
.eh-pagination a:hover {
    background-color: var(--eh-primary-bg);
    border-color: var(--eh-primary);
    color: var(--eh-primary);
}

.eh-pagination .active .page-link,
.eh-pagination .active a {
    background-color: var(--eh-primary);
    border-color: var(--eh-primary);
    color: #FFFFFF;
}

.eh-pagination .disabled .page-link,
.eh-pagination .disabled span {
    opacity: 0.35;
    cursor: not-allowed;
}

.eh-pagination .icon-angle-double-left::before { content: "\00AB"; }
.eh-pagination .icon-angle-left::before { content: "\2039"; }
.eh-pagination .icon-angle-right::before { content: "\203A"; }
.eh-pagination .icon-angle-double-right::before { content: "\00BB"; }


/* ==========================================================================
   17. UTILITAIRES
   --------------------------------------------------------------------------
   Classes utilitaires pour l'alignement, l'espacement, la visibilite
   et l'affichage responsive.
   ========================================================================== */

/* --- Alignement du texte --- */
.eh-text-left   { text-align: left; }
.eh-text-center { text-align: center; }
.eh-text-right  { text-align: right; }

/* --- Couleurs de texte --- */
.eh-text-primary   { color: var(--eh-primary); }
.eh-text-secondary { color: var(--eh-secondary); }
.eh-text-cta       { color: var(--eh-cta); }
.eh-text-muted     { color: var(--eh-text-muted); }
.eh-text-light     { color: var(--eh-text-light); }

/* --- Poids de police --- */
.eh-font-normal   { font-weight: 400; }
.eh-font-medium   { font-weight: 500; }
.eh-font-semibold { font-weight: 600; }
.eh-font-bold     { font-weight: 700; }

/* --- Tailles de texte --- */
.eh-text-xs { font-size: 0.75rem; }
.eh-text-sm { font-size: 0.875rem; }
.eh-text-md { font-size: 1rem; }
.eh-text-lg { font-size: 1.125rem; }
.eh-text-xl { font-size: 1.25rem; }

/* --- Espacement (marges) --- */
.eh-mt-0  { margin-top: 0; }
.eh-mt-2  { margin-top: var(--eh-space-2); }
.eh-mt-4  { margin-top: var(--eh-space-4); }
.eh-mt-6  { margin-top: var(--eh-space-6); }
.eh-mt-8  { margin-top: var(--eh-space-8); }

.eh-mb-0  { margin-bottom: 0; }
.eh-mb-2  { margin-bottom: var(--eh-space-2); }
.eh-mb-4  { margin-bottom: var(--eh-space-4); }
.eh-mb-6  { margin-bottom: var(--eh-space-6); }
.eh-mb-8  { margin-bottom: var(--eh-space-8); }

.eh-mx-auto { margin-left: auto; margin-right: auto; }

/* --- Espacement (padding) --- */
.eh-pt-0  { padding-top: 0; }
.eh-pt-4  { padding-top: var(--eh-space-4); }
.eh-pt-8  { padding-top: var(--eh-space-8); }

.eh-pb-0  { padding-bottom: 0; }
.eh-pb-4  { padding-bottom: var(--eh-space-4); }
.eh-pb-8  { padding-bottom: var(--eh-space-8); }

.eh-p-4   { padding: var(--eh-space-4); }
.eh-p-6   { padding: var(--eh-space-6); }
.eh-p-8   { padding: var(--eh-space-8); }

/* --- Fond --- */
.eh-bg-primary   { background-color: var(--eh-primary-bg); }
.eh-bg-secondary { background-color: var(--eh-secondary-bg); }
.eh-bg-cta       { background-color: var(--eh-cta-bg); }
.eh-bg-alt       { background-color: var(--eh-bg-alt); }
.eh-bg-surface   { background-color: var(--eh-surface); }

/* --- Masquage accessible --- */
.eh-visually-hidden,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Affichage conditionnel --- */
.eh-d-none  { display: none; }
.eh-d-block { display: block; }
.eh-d-flex  { display: flex; }
.eh-d-grid  { display: grid; }
.eh-d-inline { display: inline; }
.eh-d-inline-block { display: inline-block; }

@media (min-width: 576px) {
    .eh-d-sm-none  { display: none; }
    .eh-d-sm-block { display: block; }
    .eh-d-sm-flex  { display: flex; }
    .eh-d-sm-grid  { display: grid; }
}

@media (min-width: 768px) {
    .eh-d-md-none  { display: none; }
    .eh-d-md-block { display: block; }
    .eh-d-md-flex  { display: flex; }
    .eh-d-md-grid  { display: grid; }
}

@media (min-width: 992px) {
    .eh-d-lg-none  { display: none; }
    .eh-d-lg-block { display: block; }
    .eh-d-lg-flex  { display: flex; }
    .eh-d-lg-grid  { display: grid; }
}

@media (min-width: 1200px) {
    .eh-d-xl-none  { display: none; }
    .eh-d-xl-block { display: block; }
    .eh-d-xl-flex  { display: flex; }
    .eh-d-xl-grid  { display: grid; }
}

/* --- Flex utilitaires --- */
.eh-flex-wrap    { flex-wrap: wrap; }
.eh-flex-center  { align-items: center; justify-content: center; }
.eh-flex-between { justify-content: space-between; }
.eh-flex-gap-2   { gap: var(--eh-space-2); }
.eh-flex-gap-4   { gap: var(--eh-space-4); }
.eh-flex-gap-6   { gap: var(--eh-space-6); }
.eh-flex-1       { flex: 1; }

/* --- Bordures --- */
.eh-rounded     { border-radius: var(--eh-radius); }
.eh-rounded-sm  { border-radius: var(--eh-radius-sm); }
.eh-rounded-lg  { border-radius: var(--eh-radius-lg); }
.eh-rounded-full { border-radius: var(--eh-radius-full); }

/* --- Ombres --- */
.eh-shadow    { box-shadow: var(--eh-shadow); }
.eh-shadow-md { box-shadow: var(--eh-shadow-md); }
.eh-shadow-lg { box-shadow: var(--eh-shadow-lg); }
.eh-shadow-none { box-shadow: none; }

/* --- Overflow --- */
.eh-overflow-hidden { overflow: hidden; }
.eh-overflow-auto   { overflow: auto; }

/* --- Largeur --- */
.eh-w-full { width: 100%; }
.eh-max-w-prose { max-width: 65ch; }

/* --- Texte gradient --- */
.eh-text-gradient {
    background: var(--eh-gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.eh-text-gradient--primary {
    background: var(--eh-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}


/* ==========================================================================
   18. GRILLE MEDICAMENTS (MEDICATIONS GRID)
   --------------------------------------------------------------------------
   Cartes de medicaments avec bordure laterale coloree via --eh-med-color,
   image 3D, badges R-number, titre et extrait.
   ========================================================================== */

.eh-medications-view {
    margin-bottom: var(--eh-space-8);
}

.eh-medications-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--eh-space-5);
}

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

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

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

/* --- Carte medicament --- */
.eh-med-card {
    display: flex;
    flex-direction: column;
    background-color: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-left: 4px solid var(--eh-med-color, var(--eh-primary));
    border-radius: var(--eh-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--eh-text);
    transition: transform var(--eh-transition), box-shadow var(--eh-transition);
}

.eh-med-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--eh-med-color, var(--eh-primary)) 15%, transparent);
    color: var(--eh-text);
}

.eh-med-card__image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--eh-med-color, var(--eh-primary)) 6%, var(--eh-bg-alt)) 0%, var(--eh-bg-alt) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--eh-space-4);
}

.eh-med-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--eh-transition-slow);
}

.eh-med-card:hover .eh-med-card__image {
    transform: scale(1.06);
}

.eh-med-card__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--eh-text-muted);
    font-size: 2.5rem;
    opacity: 0.3;
}

.eh-med-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--eh-space-2);
    padding: var(--eh-space-4);
    flex: 1;
}

.eh-med-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--eh-text);
}

.eh-med-card__excerpt {
    font-size: 0.8125rem;
    color: var(--eh-text-light);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eh-med-card__action {
    display: flex;
    align-items: center;
    gap: var(--eh-space-2);
    padding: var(--eh-space-3) var(--eh-space-4);
    border-top: 1px solid var(--eh-border-light);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--eh-med-color, var(--eh-primary));
    margin-top: auto;
}


/* ==========================================================================
   19. DETAIL MEDICAMENT - NOUVEAU LAYOUT
   --------------------------------------------------------------------------
   Layout du template medication/default.php : header avec image + info,
   body avec contenu + sidebar, sections, badges, codes.
   ========================================================================== */

/* --- Article principal --- */
.eh-medication {
    margin: 0 auto;
}

/* --- Header du medicament --- */
.eh-medication__header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--eh-med-color, var(--eh-primary)) 5%, var(--eh-bg-alt)) 0%, var(--eh-surface) 100%);
    border-bottom: 4px solid var(--eh-med-color, var(--eh-primary));
    border-radius: var(--eh-radius-lg) var(--eh-radius-lg) 0 0;
    padding: var(--eh-space-6);
    margin-bottom: var(--eh-space-6);
}

.eh-medication__header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--eh-space-6);
    text-align: center;
}

@media (min-width: 768px) {
    .eh-medication__header-inner {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }
}

.eh-medication__image-wrapper {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .eh-medication__image-wrapper {
        width: 220px;
        height: 220px;
    }
}

.eh-medication__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--eh-radius);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

.eh-medication__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--eh-bg-alt);
    border-radius: var(--eh-radius);
    color: var(--eh-text-muted);
    font-size: 3rem;
    opacity: 0.3;
}

.eh-medication__info {
    flex: 1;
    min-width: 0;
}

.eh-medication__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eh-space-2);
    margin-bottom: var(--eh-space-3);
    justify-content: center;
}

@media (min-width: 768px) {
    .eh-medication__badges {
        justify-content: flex-start;
    }
}

.eh-medication__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--eh-space-2);
    color: var(--eh-text);
}

@media (min-width: 768px) {
    .eh-medication__title {
        font-size: 2rem;
    }
}

.eh-medication__subtitle {
    font-size: 1.0625rem;
    color: var(--eh-text-light);
    margin: 0;
    font-style: italic;
}

/* --- Body avec contenu + sidebar --- */
.eh-medication__body {
    display: flex;
    flex-direction: column;
    gap: var(--eh-space-8);
}

@media (min-width: 768px) {
    .eh-medication__body {
        flex-direction: row;
    }
}

.eh-medication__content {
    flex: 1;
    min-width: 0;
}

.eh-medication__sidebar {
    width: 100%;
}

@media (min-width: 768px) {
    .eh-medication__sidebar {
        width: 280px;
        flex-shrink: 0;
    }
}

/* --- Sections --- */
.eh-medication__section {
    margin-bottom: var(--eh-space-8);
}

.eh-medication__section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--eh-text);
    margin: 0 0 var(--eh-space-4);
    padding-bottom: var(--eh-space-3);
    border-bottom: 2px solid var(--eh-med-color, var(--eh-primary));
}

.eh-medication__indication {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--eh-text-light);
}

.eh-medication__indication p {
    margin: 0 0 var(--eh-space-3);
}

/* --- Sidebar blocs --- */
.eh-sidebar-block {
    background-color: var(--eh-bg-alt);
    border-radius: var(--eh-radius);
    padding: var(--eh-space-5);
    margin-bottom: var(--eh-space-5);
    border-left: 3px solid var(--eh-med-color, var(--eh-primary));
}

.eh-sidebar-block__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 var(--eh-space-4);
    color: var(--eh-text);
}

/* --- Tag list --- */
.eh-tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--eh-space-2);
}

.eh-tag-list li {
    margin: 0;
}

.eh-tag-list .eh-tag {
    --eh-tag-color: var(--eh-primary);
    border-left: 3px solid var(--eh-tag-color);
}

.eh-tag-list a.eh-tag:hover {
    background-color: color-mix(in srgb, var(--eh-tag-color) 10%, transparent);
    border-color: var(--eh-tag-color);
    color: var(--eh-tag-color);
}

/* --- Link list --- */
.eh-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.eh-link-list li {
    margin: 0;
}

.eh-link-list__link {
    display: block;
    padding: var(--eh-space-2) var(--eh-space-3);
    font-size: 0.875rem;
    color: var(--eh-text);
    text-decoration: none;
    border-radius: var(--eh-radius-sm);
    transition: background-color var(--eh-transition), color var(--eh-transition);
}

.eh-link-list__link:hover {
    background-color: var(--eh-primary-bg);
    color: var(--eh-primary-dark);
}

/* --- Composition list --- */
.eh-composition-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.eh-composition-list__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eh-space-3);
    padding: var(--eh-space-3) 0;
    border-bottom: 1px solid var(--eh-border-light);
}

.eh-composition-list__item:last-child {
    border-bottom: none;
}

.eh-composition-list__link {
    text-decoration: none;
    color: var(--eh-text);
    font-weight: 500;
    transition: color var(--eh-transition);
}

.eh-composition-list__link:hover {
    color: var(--eh-primary);
}

.eh-composition-list__name {
    font-size: 0.9375rem;
}

.eh-composition-list__dilution {
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
    font-family: var(--eh-font-mono);
    flex-shrink: 0;
}

/* --- Posologie contenu --- */
.eh-posology-content {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--eh-text-light);
    padding: var(--eh-space-4);
    background-color: var(--eh-bg-alt);
    border-radius: var(--eh-radius);
}

.eh-posology-content p {
    margin: 0 0 var(--eh-space-3);
}

.eh-posology-content p:last-child {
    margin-bottom: 0;
}

/* --- Securite (effets secondaires, contre-indications) --- */
.eh-medication__safety {
    display: flex;
    flex-direction: column;
    gap: var(--eh-space-4);
}

.eh-safety-block {
    padding: var(--eh-space-5);
    border-radius: var(--eh-radius);
    background-color: #FFF8E1;
    border-left: 4px solid var(--eh-warning);
}

.eh-safety-block--danger {
    background-color: #FFEBEE;
    border-left-color: var(--eh-danger);
}

.eh-safety-block__title {
    display: flex;
    align-items: center;
    gap: var(--eh-space-2);
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 var(--eh-space-3);
    color: var(--eh-text);
}

.eh-safety-block__content {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--eh-text-light);
}

.eh-safety-block__content p {
    margin: 0 0 var(--eh-space-2);
}

/* --- Codes et references --- */
.eh-codes-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--eh-space-3);
    margin: 0;
}

@media (min-width: 576px) {
    .eh-codes-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.eh-codes-list__item {
    display: flex;
    flex-direction: column;
    padding: var(--eh-space-3) var(--eh-space-4);
    background-color: var(--eh-bg-alt);
    border-radius: var(--eh-radius-sm);
}

.eh-codes-list__item dt {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--eh-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--eh-space-1);
}

.eh-codes-list__item dd {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--eh-text);
    margin: 0;
    font-family: var(--eh-font-mono);
}

/* --- Badges specifiques medicament --- */
.eh-badge--r-number {
    background-color: var(--eh-med-color, var(--eh-primary));
    color: #FFFFFF;
    font-weight: 700;
    font-family: var(--eh-font-mono);
    letter-spacing: 0.05em;
}

.eh-badge--pharmacode {
    background-color: var(--eh-secondary-bg);
    color: var(--eh-secondary-dark);
    font-family: var(--eh-font-mono);
}

.eh-badge--comp {
    background-color: var(--eh-cta-bg);
    color: var(--eh-cta-dark);
    font-weight: 700;
}

.eh-badge--sm {
    padding: 2px var(--eh-space-2);
    font-size: 0.6875rem;
}

.eh-badge--overlay {
    position: absolute;
    top: var(--eh-space-2);
    right: var(--eh-space-2);
    z-index: 1;
}

/* --- Medicaments associes / Related --- */
.eh-medication__related {
    margin-top: var(--eh-space-8);
    padding-top: var(--eh-space-8);
    border-top: 1px solid var(--eh-border);
}

/* --- Navigation retour --- */
.eh-medication__nav {
    margin-top: var(--eh-space-8);
    padding-top: var(--eh-space-6);
    border-top: 1px solid var(--eh-border-light);
}


/* ==========================================================================
   19b. DETAIL THEME
   --------------------------------------------------------------------------
   Page de detail d'un theme therapeutique : header colore avec icone,
   sections introduction/description, grille medicaments associes.
   ========================================================================== */

/* --- Article principal --- */
.eh-theme {
    margin: 0 auto;
}

/* --- Header du theme --- */
.eh-theme__header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--eh-theme-color, var(--eh-primary)) 8%, var(--eh-bg-alt)) 0%, var(--eh-surface) 100%);
    border-bottom: 4px solid var(--eh-theme-color, var(--eh-primary));
    border-radius: var(--eh-radius-lg) var(--eh-radius-lg) 0 0;
    padding: var(--eh-space-8) var(--eh-space-6);
    margin-bottom: var(--eh-space-6);
    text-align: center;
}

.eh-theme__header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--eh-space-4);
}

.eh-theme__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background-color: var(--eh-theme-color, var(--eh-primary));
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 1.75rem;
}

.eh-theme__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--eh-text);
}

@media (min-width: 768px) {
    .eh-theme__title {
        font-size: 2.25rem;
    }
}

.eh-theme__image-wrapper {
    max-width: 320px;
    margin-top: var(--eh-space-4);
}

.eh-theme__image {
    width: 100%;
    height: auto;
    border-radius: var(--eh-radius);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

/* --- Sections contenu --- */
.eh-theme__intro,
.eh-theme__description {
    margin-bottom: var(--eh-space-6);
    padding: 0 var(--eh-space-2);
}

.eh-theme__intro-content,
.eh-theme__description-content {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--eh-text-light);
}

.eh-theme__intro-content {
    font-size: 1.0625rem;
    color: var(--eh-text);
    border-left: 3px solid var(--eh-theme-color, var(--eh-primary));
    padding-left: var(--eh-space-5);
}

.eh-theme__intro-content p,
.eh-theme__description-content p {
    margin: 0 0 var(--eh-space-3);
}

.eh-theme__intro-content p:last-child,
.eh-theme__description-content p:last-child {
    margin-bottom: 0;
}

/* --- Section medicaments associes --- */
.eh-theme__medications {
    margin-bottom: var(--eh-space-8);
}

.eh-theme__medications .eh-section-title {
    border-bottom: 2px solid var(--eh-theme-color, var(--eh-primary));
    padding-bottom: var(--eh-space-3);
    margin-bottom: var(--eh-space-3);
}

/* --- Navigation retour --- */
.eh-theme__nav {
    margin-top: var(--eh-space-8);
    padding-top: var(--eh-space-6);
    border-top: 1px solid var(--eh-border-light);
}


/* ==========================================================================
   19c. DETAIL AFFECTION
   --------------------------------------------------------------------------
   Page de detail d'une affection : header centre avec badges profils,
   description, grille medicaments recommandes.
   ========================================================================== */

/* --- Article principal --- */
.eh-ailment {
    margin: 0 auto;
}

/* --- Header de l'affection --- */
.eh-ailment__header {
    background: linear-gradient(135deg, var(--eh-bg-alt) 0%, var(--eh-surface) 100%);
    border-bottom: 4px solid var(--eh-primary);
    border-radius: var(--eh-radius-lg) var(--eh-radius-lg) 0 0;
    padding: var(--eh-space-8) var(--eh-space-6);
    margin-bottom: var(--eh-space-6);
    text-align: center;
}

.eh-ailment__header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--eh-space-4);
}

.eh-ailment__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--eh-text);
}

@media (min-width: 768px) {
    .eh-ailment__title {
        font-size: 2.25rem;
    }
}

/* --- Badges profils patients --- */
.eh-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eh-space-2);
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.eh-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--eh-space-2);
    padding: var(--eh-space-2) var(--eh-space-3);
    background-color: var(--eh-bg-alt);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--eh-text-light);
    transition: background-color var(--eh-transition), border-color var(--eh-transition);
}

.eh-profile-badge__icon {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* --- Sections contenu --- */
.eh-ailment__description {
    margin-bottom: var(--eh-space-6);
    padding: 0 var(--eh-space-2);
}

.eh-ailment__description-content {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--eh-text-light);
}

.eh-ailment__description-content p {
    margin: 0 0 var(--eh-space-3);
}

.eh-ailment__description-content p:last-child {
    margin-bottom: 0;
}

/* --- Section medicaments recommandes --- */
.eh-ailment__medications {
    margin-bottom: var(--eh-space-8);
}

.eh-ailment__medications .eh-section-title {
    border-bottom: 2px solid var(--eh-primary);
    padding-bottom: var(--eh-space-3);
    margin-bottom: var(--eh-space-3);
}

/* --- Navigation retour --- */
.eh-ailment__nav {
    margin-top: var(--eh-space-8);
    padding-top: var(--eh-space-6);
    border-top: 1px solid var(--eh-border-light);
}


/* ==========================================================================
   20. PAGE HEADER + FILTRES
   --------------------------------------------------------------------------
   En-tete de page avec titre et sous-titre. Barre de filtres
   avec recherche, select et compteur de resultats.
   ========================================================================== */

.eh-page-header {
    text-align: center;
    margin-bottom: var(--eh-space-8);
    padding: var(--eh-space-8) 0 var(--eh-space-6);
    background: linear-gradient(135deg, var(--eh-bg-alt) 0%, var(--eh-surface) 100%);
    border-radius: var(--eh-radius-lg);
}

.eh-page-header--themed {
    background: linear-gradient(135deg, color-mix(in srgb, var(--eh-theme-color, var(--eh-primary)) 6%, var(--eh-bg-alt)) 0%, var(--eh-surface) 100%);
}

.eh-page-header--themed .eh-page-header__title {
    color: var(--eh-theme-color, var(--eh-text));
}

.eh-page-header__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 var(--eh-space-3);
    color: var(--eh-text);
}

@media (min-width: 768px) {
    .eh-page-header__title {
        font-size: 2.25rem;
    }
}

.eh-page-header__subtitle {
    font-size: 1.0625rem;
    color: var(--eh-text-light);
    margin: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Barre de filtres --- */
.eh-filter-form {
    margin-bottom: var(--eh-space-8);
}

.eh-filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--eh-space-4);
    padding: var(--eh-space-5);
    background-color: var(--eh-bg-alt);
    border-radius: var(--eh-radius);
    margin-bottom: var(--eh-space-4);
}

@media (min-width: 768px) {
    .eh-filter-bar {
        flex-direction: row;
        align-items: center;
    }
}

.eh-filter-bar__search {
    display: flex;
    flex: 1;
    min-width: 0;
}

.eh-filter-bar__input {
    flex: 1;
    min-width: 0;
    padding: var(--eh-space-3) var(--eh-space-4);
    border: 1px solid var(--eh-border);
    border-right: none;
    border-radius: var(--eh-radius-sm) 0 0 var(--eh-radius-sm);
    font-family: var(--eh-font);
    font-size: 0.9375rem;
    background-color: var(--eh-surface);
    color: var(--eh-text);
    transition: border-color var(--eh-transition);
}

.eh-filter-bar__input:focus {
    outline: none;
    border-color: var(--eh-primary);
}

.eh-filter-bar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--eh-space-3) var(--eh-space-4);
    background-color: var(--eh-primary);
    color: #FFFFFF;
    border: 1px solid var(--eh-primary);
    border-radius: 0 var(--eh-radius-sm) var(--eh-radius-sm) 0;
    cursor: pointer;
    transition: background-color var(--eh-transition);
}

.eh-filter-bar__btn:hover {
    background-color: var(--eh-primary-dark);
}

.eh-filter-bar__btn .icon-search {
    display: block;
    width: 20px;
    height: 20px;
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.eh-filter-bar__filters {
    display: flex;
    gap: var(--eh-space-3);
    flex-wrap: wrap;
}

.eh-filter-bar__group {
    min-width: 0;
}

.eh-filter-bar__select {
    padding: var(--eh-space-3) var(--eh-space-4);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-sm);
    font-family: var(--eh-font);
    font-size: 0.875rem;
    background-color: var(--eh-surface);
    color: var(--eh-text);
    cursor: pointer;
    transition: border-color var(--eh-transition);
}

.eh-filter-bar__select:focus {
    outline: none;
    border-color: var(--eh-primary);
}

/* --- Barre de resultats (compteur + par page) --- */
.eh-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eh-space-4);
    margin-bottom: var(--eh-space-5);
}

.eh-result-count {
    font-size: 0.875rem;
    color: var(--eh-text-muted);
    margin: 0;
}


/* ==========================================================================
   21. ETAT VIDE (EMPTY STATE)
   ========================================================================== */

.eh-empty-state {
    text-align: center;
    padding: var(--eh-space-16) var(--eh-space-6);
    color: var(--eh-text-muted);
}

.eh-empty-state__icon {
    font-size: 3rem;
    margin-bottom: var(--eh-space-4);
    opacity: 0.4;
    display: block;
}

.eh-empty-state__text {
    font-size: 1.0625rem;
    margin: 0;
}


/* ==========================================================================
   22. INDEX A-Z (CLASSES eh-alpha-nav, eh-ailments-list, eh-ailment-row)
   --------------------------------------------------------------------------
   Alternatives aux classes eh-az-* pour les templates qui utilisent
   un nommage different.
   ========================================================================== */

.eh-alpha-nav {
    margin-bottom: var(--eh-space-8);
    padding: var(--eh-space-4);
    background-color: var(--eh-bg-alt);
    border-radius: var(--eh-radius);
}

.eh-alpha-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eh-space-1);
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.eh-alpha-nav__item {
    list-style: none;
    margin: 0;
}

.eh-alpha-nav__link,
.eh-alpha-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: var(--eh-space-1) var(--eh-space-2);
    border: 1px solid var(--eh-border);
    background-color: var(--eh-surface);
    color: var(--eh-text);
    font-family: var(--eh-font);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--eh-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--eh-transition), color var(--eh-transition), border-color var(--eh-transition);
}

.eh-alpha-nav__link:hover,
.eh-alpha-nav__btn:hover,
.eh-alpha-nav__link--active,
.eh-alpha-nav__btn.is-active {
    background-color: var(--eh-primary);
    border-color: var(--eh-primary);
    color: #FFFFFF;
}

.eh-alpha-nav__link--disabled,
.eh-alpha-nav__btn--empty {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Liste d'affections --- */
.eh-ailments-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.eh-ailment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--eh-space-4) var(--eh-space-5);
    border-bottom: 1px solid var(--eh-border-light);
    transition: background-color var(--eh-transition), padding-left var(--eh-transition);
    border-radius: var(--eh-radius-sm);
}

.eh-ailment-row:hover {
    background-color: var(--eh-primary-bg);
    padding-left: var(--eh-space-6);
}

.eh-ailment-row a {
    text-decoration: none;
    color: var(--eh-text);
    font-weight: 500;
    flex: 1;
}

.eh-ailment-row a:hover {
    color: var(--eh-primary-dark);
}

.eh-ailment-row__link {
    display: flex;
    align-items: center;
    gap: var(--eh-space-3);
    text-decoration: none;
    color: var(--eh-text);
    font-weight: 500;
    flex: 1;
}

.eh-ailment-row__link:hover {
    color: var(--eh-primary-dark);
}

.eh-ailment-row__title {
    flex-shrink: 0;
}

.eh-ailment-row__profiles {
    display: inline-flex;
    gap: var(--eh-space-1);
    align-items: center;
    margin-left: auto;
}

.eh-profile-badge--sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
}

.eh-profile-badge--sm[title="Femme"] { background-color: #FCE4EC; color: #E91E63; }
.eh-profile-badge--sm[title="Homme"] { background-color: #E8EAF6; color: #5C6BC0; }
.eh-profile-badge--sm[title="Enfant"] { background-color: #E8F5E9; color: #4CAF50; }
.eh-profile-badge--sm[title="Grossesse"] { background-color: #FFF3E0; color: #FF9800; }

.eh-ailment-row__arrow {
    flex-shrink: 0;
    margin-left: var(--eh-space-2);
    color: var(--eh-text-muted);
    font-size: 0.75rem;
}

.eh-ailment-row__count {
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
    flex-shrink: 0;
}

/* --- Icones Joomla (remplacement par Unicode) --- */
.icon-user-female::before { content: "\2640"; }
.icon-user::before { content: "\2642"; }
.icon-user-child::before { content: "\263A"; }
.icon-arrow-right::before { content: "\203A"; }
.icon-user-pregnant::before { content: "\2764"; }


/* --- Sections alphabetiques multi-colonnes (affections, composants) --- */
.eh-letter-section {
    margin-bottom: var(--eh-space-6);
}

.eh-letter-section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--eh-primary-dark);
    border-bottom: 2px solid var(--eh-primary);
    padding-bottom: var(--eh-space-2);
    margin-bottom: var(--eh-space-3);
}

.eh-letter-section__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--eh-space-1) var(--eh-space-4);
}

.eh-letter-section__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eh-space-2);
    padding: var(--eh-space-2) var(--eh-space-3);
    border-radius: var(--eh-radius-sm);
    text-decoration: none;
    color: var(--eh-text);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: background-color var(--eh-transition), color var(--eh-transition);
}

.eh-letter-section__item:hover {
    background-color: var(--eh-primary-bg);
    color: var(--eh-primary-dark);
}

.eh-letter-section__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eh-letter-section__common-name {
    color: var(--eh-text-muted);
    font-style: normal;
    font-weight: 400;
    font-size: 0.8125rem;
}

.eh-letter-section__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--eh-space-1);
    flex-shrink: 0;
}

.eh-letter-section__arrow {
    color: var(--eh-text-muted);
    font-size: 0.75rem;
    transition: transform var(--eh-transition);
}

.eh-letter-section__item:hover .eh-letter-section__arrow {
    transform: translateX(3px);
    color: var(--eh-primary);
}

@media (max-width: 480px) {
    .eh-letter-section__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   22b. FICHE COMPOSANT ACTIF (INGREDIENT DETAIL)
   ========================================================================== */

.eh-ingredient {
    margin: 0 auto;
    padding: var(--eh-space-6) 0;
}

.eh-ingredient__header {
    margin-bottom: var(--eh-space-6);
}

.eh-ingredient__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--eh-text);
    margin: 0 0 var(--eh-space-1);
}

.eh-ingredient__common-name {
    font-size: 1.125rem;
    color: var(--eh-text-muted);
    margin: 0 0 var(--eh-space-4);
}

.eh-ingredient__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eh-space-4) var(--eh-space-6);
    margin: 0;
    padding: var(--eh-space-4);
    background: var(--eh-bg-alt);
    border-radius: var(--eh-radius);
    border: 1px solid var(--eh-border);
}

.eh-ingredient__meta-item {
    display: flex;
    align-items: center;
    gap: var(--eh-space-2);
}

.eh-ingredient__meta-item dt {
    font-weight: 600;
    color: var(--eh-text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.eh-ingredient__meta-item dt::after {
    content: " :";
}

.eh-ingredient__meta-item dd {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--eh-text);
}

.eh-ingredient__description {
    margin-bottom: var(--eh-space-6);
}

.eh-ingredient__description-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--eh-text);
}

.eh-ingredient__medications {
    margin-bottom: var(--eh-space-6);
}

/* Grille des medicaments du composant */
.eh-ingredient-meds-grid {
    display: flex;
    flex-direction: column;
    gap: var(--eh-space-2);
}

.eh-ingredient-med-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eh-space-4);
    padding: var(--eh-space-3) var(--eh-space-4);
    background: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-left: 4px solid var(--eh-primary);
    border-radius: var(--eh-radius);
    text-decoration: none;
    color: var(--eh-text);
    transition: transform var(--eh-transition), box-shadow var(--eh-transition), border-color var(--eh-transition);
}

.eh-ingredient-med-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-left-color: var(--eh-primary-dark);
    color: var(--eh-text);
}

.eh-ingredient-med-item__info {
    display: flex;
    flex-direction: column;
    gap: var(--eh-space-1);
    min-width: 0;
    flex: 1;
}

.eh-ingredient-med-item__title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--eh-primary-dark);
}

.eh-ingredient-med-item__indication {
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
    line-height: 1.4;
}

.eh-ingredient-med-item__right {
    display: flex;
    align-items: center;
    gap: var(--eh-space-3);
    flex-shrink: 0;
}

.eh-ingredient-med-item__dilution {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--eh-primary);
    background: color-mix(in srgb, var(--eh-primary) 8%, transparent);
    padding: var(--eh-space-1) var(--eh-space-2);
    border-radius: var(--eh-radius-sm);
}

.eh-ingredient-med-item__arrow {
    color: var(--eh-text-muted);
    font-size: 0.75rem;
    transition: transform var(--eh-transition);
}

.eh-ingredient-med-item:hover .eh-ingredient-med-item__arrow {
    transform: translateX(3px);
    color: var(--eh-primary);
}

.eh-ingredient__nav {
    margin-top: var(--eh-space-6);
}

@media (max-width: 576px) {
    .eh-ingredient__meta {
        flex-direction: column;
        gap: var(--eh-space-2);
    }

    .eh-ingredient-med-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .eh-ingredient-med-item__right {
        align-self: flex-end;
    }
}

/* ==========================================================================
   23. SECTION TITLE GENERIQUE
   ========================================================================== */

.eh-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--eh-space-6);
    color: var(--eh-text);
}

@media (min-width: 768px) {
    .eh-section-title {
        font-size: 1.75rem;
    }
}


/* ==========================================================================
   24. PROFILS PATIENTS (PROFILE BUTTONS)
   --------------------------------------------------------------------------
   Boutons de profil avec silhouettes colorees pour la navigation
   par profil patient.
   ========================================================================== */

.eh-profiles {
    padding: var(--eh-space-12) 0 var(--eh-space-10);
    background: var(--eh-bg);
}

.eh-profiles__inner {
    max-width: var(--eh-container);
    margin: 0 auto;
    padding: 0 var(--eh-space-6);
    text-align: center;
}

.eh-profiles__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--eh-space-5);
    margin-top: var(--eh-space-8);
}

@media (min-width: 768px) {
    .eh-profiles__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--eh-space-6);
    }
}

.eh-profile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--eh-space-4);
    padding: var(--eh-space-8) var(--eh-space-4) var(--eh-space-6);
    background: linear-gradient(180deg, color-mix(in srgb, var(--eh-profile-color, var(--eh-primary)) 5%, var(--eh-surface)), var(--eh-surface));
    border: 2px solid var(--eh-border-light);
    border-radius: var(--eh-radius-lg);
    text-decoration: none;
    color: var(--eh-text);
    transition: transform 280ms var(--eh-ease-smooth),
                box-shadow 280ms var(--eh-ease-smooth),
                border-color 280ms var(--eh-ease-smooth);
    cursor: pointer;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.eh-profile-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--eh-profile-color, var(--eh-primary)) 20%, transparent);
    border-color: color-mix(in srgb, var(--eh-profile-color, var(--eh-primary)) 40%, transparent);
    text-decoration: none;
    color: var(--eh-text);
}

.eh-profile-btn__icon {
    width: 96px;
    height: 96px;
    border-radius: var(--eh-radius-full);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--eh-profile-color, var(--eh-primary)) 12%, transparent),
        color-mix(in srgb, var(--eh-profile-color, var(--eh-primary)) 6%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eh-profile-color, var(--eh-primary));
    font-size: 2.5rem;
    transition: transform 280ms var(--eh-ease-smooth),
                box-shadow 280ms var(--eh-ease-smooth);
}

.eh-profile-btn:hover .eh-profile-btn__icon {
    transform: scale(1.08);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--eh-profile-color, var(--eh-primary)) 25%, transparent);
}

.eh-profile-btn__label {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.eh-profile-btn__count {
    font-size: 0.8125rem;
    color: var(--eh-text-muted);
}


/* ==========================================================================
   25. PAGE PROFIL (PROFILE PAGE)
   --------------------------------------------------------------------------
   Pages /profile/femme, /profile/homme, /profile/enfant avec
   silhouette SVG interactive et liste des zones corporelles.
   ========================================================================== */

.eh-profile-page {
    margin-bottom: var(--eh-space-8);
}

.eh-profile-page__header {
    text-align: center;
    padding: var(--eh-space-8) 0;
    margin-bottom: var(--eh-space-8);
    background: linear-gradient(135deg, color-mix(in srgb, var(--eh-profile-color) 8%, transparent) 0%, var(--eh-surface) 100%);
    border-radius: var(--eh-radius-lg);
    border-bottom: 4px solid var(--eh-profile-color);
}

.eh-profile-page__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--eh-space-3);
    color: var(--eh-profile-color);
}

.eh-profile-page__subtitle {
    font-size: 1.0625rem;
    color: var(--eh-text-light);
    margin: 0;
}

.eh-profile-page--femme {
    --eh-profile-color: #E91E63;
}

.eh-profile-page--homme {
    --eh-profile-color: #5C6BC0;
}

.eh-profile-page--enfant {
    --eh-profile-color: #4CAF50;
}

.eh-profile-page__body {
    display: flex;
    flex-direction: column;
    gap: var(--eh-space-8);
}

@media (min-width: 768px) {
    .eh-profile-page__body {
        flex-direction: row;
    }
}

.eh-profile-page__silhouette {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .eh-profile-page__silhouette {
        width: 300px;
        margin: 0;
    }
}

.eh-profile-page__silhouette svg {
    width: 100%;
    height: auto;
}

.eh-profile-page__silhouette .zone-clickable {
    cursor: pointer;
    transition: opacity var(--eh-transition);
}

.eh-profile-page__silhouette a:hover .zone-label {
    opacity: 1;
}

.eh-profile-page__silhouette .zone-clickable.is-active {
    opacity: 0.35;
    animation: eh-zone-pulse 1.5s ease-in-out 3;
}

@keyframes eh-zone-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.5; }
}

.eh-profile-page__zones {
    flex: 1;
    min-width: 0;
}

.eh-profile-zone {
    margin-bottom: var(--eh-space-5);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius);
    overflow: hidden;
}

.eh-profile-zone__title {
    display: flex;
    align-items: center;
    gap: var(--eh-space-3);
    padding: var(--eh-space-4) var(--eh-space-5);
    background-color: var(--eh-bg-alt);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    border-bottom: 1px solid var(--eh-border);
}

.eh-profile-zone__title-icon {
    width: 8px;
    height: 8px;
    border-radius: var(--eh-radius-full);
    background-color: var(--eh-profile-color);
    flex-shrink: 0;
}

.eh-profile-zone__ailments {
    list-style: none;
    padding: 0;
    margin: 0;
}

.eh-profile-zone__ailment {
    padding: var(--eh-space-3) var(--eh-space-5);
    border-bottom: 1px solid var(--eh-border-light);
}

.eh-profile-zone__ailment:last-child {
    border-bottom: none;
}

.eh-profile-zone__ailment a {
    text-decoration: none;
    color: var(--eh-text);
    font-size: 0.9375rem;
    transition: color var(--eh-transition);
}

.eh-profile-zone__ailment a:hover {
    color: var(--eh-profile-color);
}


/* ==========================================================================
   25b. STATISTIQUES (STATS SECTION)
   --------------------------------------------------------------------------
   Bandeau chiffres cles sur la page d'accueil.
   ========================================================================== */

.eh-stats {
    background: linear-gradient(135deg, var(--eh-primary-dark) 0%, var(--eh-secondary-dark) 100%);
    padding: var(--eh-space-16) 0;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

/* Motif decoratif sur la barre stats */
.eh-stats::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -5%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.eh-stats::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -5%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.eh-stats__inner {
    max-width: var(--eh-container);
    margin: 0 auto;
    padding: 0 var(--eh-space-6);
    display: flex;
    justify-content: center;
    gap: var(--eh-space-12);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.eh-stats__item {
    text-align: center;
    min-width: 140px;
}

.eh-stats__number {
    display: block;
    font-size: 2.75rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: var(--eh-space-2);
}

.eh-stats__label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .eh-stats__number { font-size: 3rem; }
    .eh-stats__inner { gap: var(--eh-space-16); }
}


/* ==========================================================================
   26. DRAPEAUX DE LANGUES
   --------------------------------------------------------------------------
   Affichage horizontal des drapeaux de selection de langue.
   ========================================================================== */

.eh-lang-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
}

.eh-lang-switcher__item {
    display: flex;
    align-items: center;
}

.eh-lang-switcher__link {
    display: flex;
    align-items: center;
    gap: var(--eh-space-1);
    padding: 3px;
    text-decoration: none;
    border-radius: 50%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.75rem;
    color: var(--eh-text-light);
}

.eh-lang-switcher__link:hover,
.eh-lang-switcher__link.is-active {
    transform: scale(1.12);
    color: var(--eh-primary-dark);
}

.eh-lang-switcher__flag {
    width: 22px;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #C9A84C;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.eh-lang-switcher__link:hover .eh-lang-switcher__flag {
    box-shadow: 0 2px 8px rgba(201, 168, 76, 0.4);
    border-color: #B8941F;
}

.eh-lang-switcher__label {
    display: none;
}

/* --- Bouton bascule theme sombre/clair --- */
.eh-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--eh-text-light);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.eh-theme-toggle:hover {
    background-color: var(--eh-bg-alt);
    color: var(--eh-cta);
    transform: scale(1.1);
}

.eh-theme-toggle:focus-visible {
    outline: 2px solid var(--eh-primary);
    outline-offset: 2px;
}

.eh-theme-toggle .fa-sun {
    color: #FFB300;
}

.eh-theme-toggle:hover .fa-sun {
    color: #FFA000;
}


/* ==========================================================================
   27. ACCORDION (DETAILS / SUMMARY)
   --------------------------------------------------------------------------
   Sections depliables pour la page detail medicament, basees sur
   les elements HTML5 <details>/<summary> pour accessibilite native.
   ========================================================================== */

.eh-accordion {
    margin-bottom: var(--eh-space-6);
}

.eh-accordion__item {
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius);
    margin-bottom: var(--eh-space-3);
    overflow: hidden;
    transition: box-shadow var(--eh-transition);
}

.eh-accordion__item[open] {
    box-shadow: var(--eh-shadow-sm);
    border-color: color-mix(in srgb, var(--eh-med-color, var(--eh-primary)) 30%, var(--eh-border));
}

.eh-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--eh-space-4) var(--eh-space-5);
    font-size: 1rem;
    font-weight: 600;
    color: var(--eh-text);
    cursor: pointer;
    background-color: var(--eh-bg-alt);
    transition: background-color var(--eh-transition), color var(--eh-transition);
    list-style: none;
    user-select: none;
}

/* Masquer le marqueur natif */
.eh-accordion__header::-webkit-details-marker {
    display: none;
}

.eh-accordion__header::marker {
    display: none;
    content: '';
}

.eh-accordion__header:hover {
    background-color: var(--eh-primary-bg);
    color: var(--eh-primary-dark);
}

/* Chevron */
.eh-accordion__header::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: var(--eh-space-4);
}

.eh-accordion__item[open] > .eh-accordion__header::after {
    transform: rotate(45deg);
}

.eh-accordion__header-icon {
    margin-right: var(--eh-space-3);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.eh-accordion__content {
    padding: var(--eh-space-5);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--eh-text-light);
    border-top: 1px solid var(--eh-border-light);
    animation: eh-accordion-open 0.25s ease;
}

@keyframes eh-accordion-open {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.eh-accordion__content p {
    margin: 0 0 var(--eh-space-3);
}

.eh-accordion__content p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   28. IMPRESSION (PRINT)
   --------------------------------------------------------------------------
   Styles optimises pour l'impression des fiches de medicaments
   et du contenu general du site.
   ========================================================================== */

@media print {
    /* Reset general pour l'impression */
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html {
        font-size: 11pt;
    }

    body {
        font-family: 'Georgia', 'Times New Roman', serif;
        line-height: 1.5;
        padding: 0;
        margin: 0;
    }

    /* Masquer les elements non pertinents */
    .eh-header,
    .eh-topbar,
    .eh-skip-link,
    .eh-hero,
    .eh-footer,
    .eh-search,
    .eh-header__toggle,
    .eh-btn,
    .eh-az-nav,
    .eh-pagination,
    .eh-tabs__list,
    .eh-bodymap-wrapper,
    .alert-message,
    [role="search"],
    nav {
        display: none !important;
    }

    /* Afficher tout le contenu des onglets */
    .eh-med-tabs__panel,
    .eh-tabs__panel {
        display: block !important;
    }

    .eh-med-tabs__panel::before,
    .eh-tabs__panel::before {
        content: attr(aria-label);
        display: block;
        font-weight: bold;
        font-size: 12pt;
        margin-top: 1em;
        margin-bottom: 0.5em;
        border-bottom: 1px solid #000;
        padding-bottom: 0.25em;
    }

    /* Conteneur pleine largeur */
    .eh-container {
        max-width: 100%;
        padding: 0;
    }

    .eh-main {
        padding: 0;
    }

    .eh-content--with-sidebar {
        display: block;
    }

    .eh-content__sidebar {
        display: none !important;
    }

    /* Typographie d'impression */
    h1 { font-size: 18pt; }
    h2 { font-size: 16pt; }
    h3 { font-size: 14pt; }
    h4 { font-size: 12pt; }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }

    /* Images */
    img {
        max-width: 250px !important;
        page-break-inside: avoid;
    }

    /* Liens : afficher l'URL */
    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        font-style: italic;
        color: #555 !important;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: '';
    }

    /* Tableaux */
    table {
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid #000 !important;
        padding: 4pt 6pt;
    }

    thead {
        display: table-header-group;
    }

    tr {
        page-break-inside: avoid;
    }

    /* Detail medicament en impression */
    .eh-med-detail {
        display: block;
    }

    .eh-med-detail__image {
        float: right;
        margin: 0 0 1em 1em;
        width: 150px;
    }

    .eh-med-detail__code {
        border: 1px solid #000 !important;
    }

    /* Composition */
    .eh-med-composition li {
        border-bottom: 1px dotted #999 !important;
    }

    /* D-Tox phases */
    .eh-dtox-phase__number {
        border: 2px solid #000 !important;
    }

    .eh-dtox-phase__connector {
        background: #000 !important;
    }

    /* Cartes */
    .eh-card,
    .eh-theme-card,
    .eh-dtox-phase__content {
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }

    /* Sauts de page */
    .eh-section {
        page-break-before: auto;
    }

    .eh-section + .eh-section {
        page-break-before: always;
    }
}


/* ==========================================================================
   21. ANIMATIONS ET EFFETS MODERNES
   --------------------------------------------------------------------------
   Scroll reveal, bouton retour en haut, effets visuels avances.
   Compatible avec tous navigateurs modernes. Respecte prefers-reduced-motion.
   ========================================================================== */


/* --- Scroll Reveal (apparition au scroll) --- */

/*
 * Utilisation :
 *   <div class="eh-reveal">...</div>            -> fade-in + translateY
 *   <div class="eh-reveal eh-reveal--left">      -> fade-in + translateX(-24px)
 *   <div class="eh-reveal eh-reveal--right">     -> fade-in + translateX(+24px)
 *   <div class="eh-reveal eh-reveal--scale">     -> fade-in + scale(0.95)
 *   <div class="eh-reveal eh-reveal--delay-2">   -> delai 200ms
 * Le JS ajoute .is-visible quand l'element entre dans le viewport.
 */

.eh-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 550ms var(--eh-ease-out),
                transform 550ms var(--eh-ease-out);
}

.eh-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variante depuis la gauche */
.eh-reveal--left {
    transform: translateX(-28px);
}
.eh-reveal--left.is-visible {
    transform: translateX(0);
}

/* Variante depuis la droite */
.eh-reveal--right {
    transform: translateX(28px);
}
.eh-reveal--right.is-visible {
    transform: translateX(0);
}

/* Variante echelle */
.eh-reveal--scale {
    transform: scale(0.94);
}
.eh-reveal--scale.is-visible {
    transform: scale(1);
}

/* Delais en cascade pour les grilles */
.eh-reveal--delay-1 { transition-delay: 80ms; }
.eh-reveal--delay-2 { transition-delay: 160ms; }
.eh-reveal--delay-3 { transition-delay: 240ms; }
.eh-reveal--delay-4 { transition-delay: 320ms; }
.eh-reveal--delay-5 { transition-delay: 400ms; }
.eh-reveal--delay-6 { transition-delay: 480ms; }

/* Accessibilite : desactiver les animations si preference systeme */
@media (prefers-reduced-motion: reduce) {
    .eh-reveal,
    .eh-reveal--left,
    .eh-reveal--right,
    .eh-reveal--scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .eh-hero {
        animation: none !important;
    }

    .eh-hero::before,
    .eh-hero::after {
        animation: none !important;
    }

    .eh-btn--cta::after {
        animation: none !important;
    }
}


/* --- Bouton "Retour en haut" --- */

.eh-back-to-top {
    position: fixed;
    bottom: var(--eh-space-6);
    right: var(--eh-space-6);
    z-index: var(--eh-z-toast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--eh-gradient-brand);
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(46, 125, 50, 0.35);
    opacity: 0;
    transform: translateY(16px) scale(0.85);
    pointer-events: none;
    transition: opacity 300ms var(--eh-ease-smooth),
                transform 300ms var(--eh-ease-smooth),
                box-shadow 200ms var(--eh-ease-smooth);
}

.eh-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.eh-back-to-top:hover {
    box-shadow: 0 6px 28px rgba(46, 125, 50, 0.45);
    transform: translateY(-3px) scale(1.05);
}

.eh-back-to-top:active {
    transform: scale(0.97);
}

.eh-back-to-top:focus-visible {
    outline: 2px solid var(--eh-primary);
    outline-offset: 3px;
}

@media print {
    .eh-back-to-top { display: none !important; }
}


/* --- Effets de survol ameliores sur les liens du footer --- */

.eh-footer__col li a {
    transition: color var(--eh-transition),
                padding-left var(--eh-transition-slow);
}

.eh-footer__col li a:hover {
    padding-left: var(--eh-space-3);
    color: var(--eh-primary-light);
}


/* --- Amelioration du footer avec gradient de fond --- */

.eh-footer {
    background: linear-gradient(180deg, #1A1A2E 0%, #0F0F1E 100%);
    position: relative;
}

/* Trait de couleur accent en haut du footer */
.eh-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--eh-gradient-brand);
}


/* --- Amelioration des cartes medicament --- */

.eh-med-card {
    transition: transform 240ms var(--eh-ease-smooth),
                box-shadow 240ms var(--eh-ease-smooth);
    border-radius: var(--eh-radius-lg);
}

.eh-med-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 32px color-mix(in srgb, var(--eh-med-color, var(--eh-primary)) 20%, transparent);
}


/* --- Amelioration barre de filtres --- */

.eh-filter-bar {
    background-color: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-lg);
    box-shadow: var(--eh-shadow-sm);
}


/* --- Separateur visuel de section avec gradient --- */

.eh-section-separator {
    display: block;
    width: 80px;
    height: 4px;
    background: var(--eh-gradient-brand);
    border-radius: 2px;
    margin: 0 auto var(--eh-space-8);
}


/* --- Carte mise en avant (featured) --- */

.eh-card--featured {
    border: 2px solid var(--eh-primary);
    box-shadow: 0 0 0 4px var(--eh-primary-bg);
}


/* --- Badge "Nouveau" avec animation pulse --- */

@keyframes eh-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(46, 125, 50, 0); }
}

.eh-badge--new {
    background-color: var(--eh-primary);
    color: #FFFFFF;
    animation: eh-pulse 2s ease-in-out infinite;
}


/* --- Indicateur de chargement skeleton --- */

@keyframes eh-skeleton-pulse {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.eh-skeleton {
    background: linear-gradient(
        90deg,
        var(--eh-bg-alt) 25%,
        var(--eh-border-light) 50%,
        var(--eh-bg-alt) 75%
    );
    background-size: 400px 100%;
    animation: eh-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--eh-radius-sm);
}


/* --- Amelioration de l'image de medicament avec effet glow --- */

.eh-medication__image {
    transition: filter 300ms var(--eh-ease-smooth),
                transform 300ms var(--eh-ease-smooth);
}

.eh-medication__header:hover .eh-medication__image {
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15));
}


/* --- Topbar avec degrade discret --- */

.eh-topbar {
    background: linear-gradient(90deg, var(--eh-primary-dark) 0%, var(--eh-secondary-dark) 100%);
}


/* --- Amelioration des formulaires --- */

.eh-form-input:focus,
.eh-form-select:focus,
.eh-form-textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eh-primary) 18%, transparent);
}


/* --- Logo texte avec animation au hover --- */

.eh-logo-text {
    transition: opacity var(--eh-transition);
}

.eh-header__logo a:hover .eh-logo-text {
    opacity: 0.85;
}


/* --- Pagination amelioree --- */

.eh-pagination .page-link:hover,
.eh-pagination a:hover {
    background: var(--eh-gradient-primary);
    border-color: transparent;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: var(--eh-shadow-sm);
}

.eh-pagination .active .page-link,
.eh-pagination .active a {
    background: var(--eh-gradient-brand);
    border-color: transparent;
}


/* --- A-Z Navigation amelioree --- */

.eh-az-nav__btn.is-active,
.eh-az-nav__btn[aria-current="true"] {
    background: var(--eh-gradient-brand);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.3);
}


/* --- Transition de page douce --- */

.eh-body {
    animation: eh-page-in 0.35s var(--eh-ease-out) both;
}

@keyframes eh-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ==========================================================================
   27. CORRECTIFS CLASSES MANQUANTES — AUDIT 2026-03-01
   --------------------------------------------------------------------------
   Classes utilisees par le composant com_easyhomeo (home view) qui n'avaient
   pas de regles CSS correspondantes. Ce correctif les definit toutes.
   ========================================================================== */

/* --- Hero : wrapper interne (eh-hero__inner) --- */
.eh-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 var(--eh-space-4);
    text-align: center;
}

/* --- Hero : sous-titre (le composant utilise eh-hero__subtitle, pas eh-hero__text) --- */
.eh-hero__subtitle {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.88);
    max-width: 640px;
    margin: 0 auto var(--eh-space-8);
    position: relative;
    z-index: 1;
    animation: eh-hero-in 0.7s 0.15s var(--eh-ease-out) both;
}

@media (min-width: 768px) {
    .eh-hero__subtitle {
        font-size: 1.1875rem;
    }
}

/* --- Barre de recherche hero (eh-search-bar) --- */
/* Le composant genere .eh-search-bar, .eh-search-bar__input, .eh-search-bar__btn
   (differents de .eh-search__form etc. du template header) */

.eh-hero__search {
    position: relative; /* contexte pour les suggestions */
}

.eh-search-bar {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 50px;
    padding: 0.35rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20), 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    transition: box-shadow 0.2s var(--eh-ease-smooth),
                border-color 0.2s var(--eh-ease-smooth);
    max-width: 100%;
}

.eh-search-bar:focus-within {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    border-color: rgba(46, 125, 50, 0.35);
}

.eh-search-bar__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    font-family: var(--eh-font);
    color: var(--eh-text);
    padding: 0.65rem 0.75rem 0.65rem 1.125rem;
}

.eh-search-bar__input::placeholder {
    color: var(--eh-text-muted);
    font-weight: 400;
}

.eh-search-bar__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--eh-gradient-brand);
    border: none;
    border-radius: 50px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform 0.15s var(--eh-ease-smooth),
                box-shadow 0.15s var(--eh-ease-smooth);
    text-decoration: none;
}

.eh-search-bar__btn:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.42);
}

/* Suggestions d'autocompletion */
.eh-search-bar__suggestions {
    position: absolute;
    top: calc(100% + 0.625rem);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 200;
    overflow: hidden;
    border: 1px solid var(--eh-border);
    animation: eh-dropdown-in 0.18s var(--eh-ease-out) both;
}

.eh-search-bar__suggestions[hidden] {
    display: none;
}

@keyframes eh-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Section subtitle generique (alias de eh-section__subtitle) --- */
.eh-section-subtitle {
    font-size: 1.0625rem;
    color: var(--eh-text-light);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--eh-space-8);
    text-align: center;
    line-height: 1.6;
}

/* --- Grille des themes therapeutiques (section) --- */
/* Le composant genere <section class="eh-themes-section"> (pas eh-section--themes) */

.eh-themes-section {
    background: linear-gradient(180deg, var(--eh-bg-alt) 0%, var(--eh-bg) 100%);
    padding: var(--eh-space-16) 0 var(--eh-space-16);
}

.eh-themes-section__inner {
    max-width: var(--eh-container);
    margin: 0 auto;
    padding: 0 var(--eh-space-6);
    text-align: center;
}

.eh-themes-section__footer {
    margin-top: var(--eh-space-10);
    text-align: center;
}

/* --- Carte corporelle interactive (section bodymap du composant) --- */
/* Le composant genere <section class="eh-bodymap"> (pas eh-section--bodymap) */

.eh-bodymap {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--eh-primary) 8%, var(--eh-bg-alt)) 0%,
        var(--eh-bg-alt) 50%,
        color-mix(in srgb, var(--eh-secondary) 6%, var(--eh-bg)) 100%);
    padding: var(--eh-space-16) 0;
    position: relative;
}

/* Trait decoratif en haut de la section bodymap */
.eh-bodymap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--eh-gradient-brand);
    opacity: 0.25;
}

.eh-bodymap__inner {
    max-width: var(--eh-container);
    margin: 0 auto;
    padding: 0 var(--eh-space-6);
    text-align: center;
}

/* Le titre dans .eh-bodymap__inner utilise .eh-section-title */
.eh-bodymap__inner .eh-section-title {
    color: var(--eh-primary-dark);
}

.eh-bodymap__container {
    position: relative;
    margin-top: var(--eh-space-8);
}

/* Limiter la taille du SVG bodymap sur desktop */
.eh-bodymap__svg-container {
    display: flex;
    justify-content: center;
    padding-top: var(--eh-space-4); /* espace pour les points SVG en haut */
}

.eh-bodymap__card {
    max-width: 440px;
    margin: 0 auto;
    overflow: visible; /* ne pas couper les points interactifs */
}

.eh-bodymap__card-front svg {
    max-width: 340px;
    margin: 0 auto;
}

.eh-bodymap__card svg {
    overflow: visible; /* les cercles animés dépassent du viewBox */
}

.eh-bodymap__back-content {
    text-align: left;
}

.eh-bodymap__back-title {
    white-space: normal;
}

@media (min-width: 992px) {
    .eh-bodymap__card {
        max-width: 380px;
    }
    .eh-bodymap__card-front svg {
        max-width: 280px;
    }
}

/* Version mobile : liste des zones corporelles sous le personnage */
.eh-bodymap__list {
    margin-top: var(--eh-space-8);
    display: none;
}

@media (max-width: 767px) {
    .eh-bodymap__svg-container {
        display: flex;
        justify-content: center;
    }
    .eh-bodymap__card {
        max-width: 300px;
    }
    .eh-bodymap__card-front svg {
        max-width: 220px;
    }
    .eh-bodymap__list {
        display: none;
    }
}

/* --- Page d'accueil : layout pleine largeur sans sidebar --- */
/* La home genere ses sections en pleine largeur via le composant.
   On annule la sidebar et le container pour un rendu edge-to-edge. */

.eh-body--home .eh-content--with-sidebar {
    display: block; /* annule le flex row + sidebar */
}

.eh-body--home .eh-content__sidebar {
    display: none; /* cache la sidebar sur la home */
}

.eh-body--home .eh-main {
    padding-top: 0;
    padding-bottom: 0;
}

.eh-body--home .eh-main > .eh-container {
    max-width: none;
    padding: 0;
}

/* Forcer les sections de la home en pleine largeur (breakout viewport) */
.eh-body--home .eh-content__main > .eh-hero,
.eh-body--home .eh-content__main > .eh-bodymap,
.eh-body--home .eh-content__main > .eh-themes-section,
.eh-body--home .eh-content__main > .eh-profiles,
.eh-body--home .eh-content__main > .eh-stats {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    max-width: none; /* override bodymap.css max-width: 900px */
    box-sizing: border-box;
}

/* --- Section title dans les sections du composant (decoration ::after) --- */
/* eh-section-title (BEM flat) recoit le meme trait decoratif que eh-section__title */
.eh-section-title::after {
    content: '';
    display: block;
    width: 52px;
    height: 4px;
    background: var(--eh-gradient-brand);
    border-radius: 2px;
    margin: var(--eh-space-3) auto 0;
}

/* Override : dans les sections a fond fonce, le trait reste visible */
.eh-bodymap .eh-section-title::after,
.eh-stats .eh-section-title::after {
    background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);
}

/* --- Ajustements theme cards dans eh-themes-section (page d'accueil) --- */
.eh-themes-section .eh-theme-card__title {
    font-size: 1rem;
    margin-bottom: var(--eh-space-1);
}

/* --- Icone de recherche dans le bouton eh-search-bar__btn --- */
/* Le composant insere <span class="icon-search" aria-hidden="true"></span> */
.eh-search-bar__btn .icon-search {
    display: block;
    width: 20px;
    height: 20px;
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* Fallback si pas de .icon-search dans le bouton */
.eh-search-bar__btn:not(:has(.icon-search))::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}


/* ==========================================================================
   27b. PAGE DE RESULTATS DE RECHERCHE
   ========================================================================== */

.eh-search-view {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--eh-space-6) 0;
}

.eh-search-form {
    margin-bottom: var(--eh-space-6);
}

/* --- Groupes de resultats --- */
.eh-search-results {
    display: flex;
    flex-direction: column;
    gap: var(--eh-space-8);
}

.eh-search-results__group-title {
    display: flex;
    align-items: center;
    gap: var(--eh-space-2);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--eh-text);
    margin-bottom: var(--eh-space-4);
    padding-bottom: var(--eh-space-2);
    border-bottom: 2px solid var(--eh-primary);
}

.eh-search-results__group-count {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--eh-text-muted);
}

.eh-search-results__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--eh-space-2);
}

/* --- Carte de resultat --- */
.eh-search-result__link {
    display: flex;
    align-items: center;
    gap: var(--eh-space-4);
    padding: var(--eh-space-4);
    background: var(--eh-surface);
    border: 1px solid var(--eh-border-light, #e8e8e8);
    border-radius: var(--eh-radius);
    text-decoration: none;
    color: var(--eh-text);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.eh-search-result__link:hover {
    border-color: var(--eh-primary);
    box-shadow: 0 2px 12px rgba(46, 125, 50, 0.10);
    transform: translateY(-1px);
}

.eh-search-result__thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eh-search-result__thumb-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: var(--eh-radius-sm, 8px);
}

.eh-search-result__color-dot {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.eh-search-result__content {
    flex: 1;
    min-width: 0;
}

.eh-search-result__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--eh-space-1) 0;
    color: var(--eh-text);
}

.eh-search-result__subtitle {
    font-weight: 400;
    color: var(--eh-text-muted);
    font-size: 0.9rem;
}

.eh-search-result__excerpt {
    font-size: 0.85rem;
    color: var(--eh-text-light);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eh-search-result__arrow {
    flex-shrink: 0;
    font-size: 0;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
}

.eh-search-result__link:hover .eh-search-result__arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* Mode sombre */
[data-theme="dark"] .eh-search-result__link {
    background: var(--eh-surface, #1E293B);
    border-color: var(--eh-border, #334155);
}

[data-theme="dark"] .eh-search-result__link:hover {
    border-color: var(--eh-primary);
    box-shadow: 0 2px 12px rgba(46, 125, 50, 0.15);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .eh-search-result__link {
        background: var(--eh-surface, #1E293B);
        border-color: var(--eh-border, #334155);
    }
}

@media (max-width: 768px) {
    .eh-search-result__link {
        padding: var(--eh-space-3);
        gap: var(--eh-space-3);
    }

    .eh-search-result__thumb {
        width: 48px;
        height: 48px;
    }

    .eh-search-result__thumb-img {
        width: 48px;
        height: 48px;
    }

    .eh-search-result__color-dot {
        width: 32px;
        height: 32px;
    }
}


/* ==========================================================================
   28. BREAKOUT PLEINE LARGEUR — SECTIONS DU COMPOSANT HOME
   --------------------------------------------------------------------------
   Le composant home rend ses sections (hero, bodymap, themes, profils, stats)
   dans le container .eh-content__main. On les fait sortir en pleine largeur.
   ========================================================================== */

/* Sur la page home (pas de container), les sections sont deja pleine largeur.
   Sur les autres pages, on utilise la technique breakout viewport-width. */
.eh-content__main > .eh-bodymap,
.eh-content__main > .eh-themes-section,
.eh-content__main > .eh-profiles,
.eh-content__main > .eh-stats {
    width: 100%;
}


/* ==========================================================================
   29. SCROLL REVEAL — ANIMATIONS D'APPARITION
   --------------------------------------------------------------------------
   Classes utilitaires pour l'animation au scroll.
   Le JS (IntersectionObserver) ajoute .is-visible quand l'element entre
   dans le viewport. Respecte prefers-reduced-motion.
   ========================================================================== */

.eh-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--eh-ease-out),
                transform 0.7s var(--eh-ease-out);
}

.eh-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.eh-reveal--left {
    transform: translateX(-24px) translateY(0);
}

.eh-reveal--left.is-visible {
    transform: translateX(0) translateY(0);
}

.eh-reveal--right {
    transform: translateX(24px) translateY(0);
}

.eh-reveal--right.is-visible {
    transform: translateX(0) translateY(0);
}

.eh-reveal--scale {
    transform: scale(0.95);
}

.eh-reveal--scale.is-visible {
    transform: scale(1);
}

/* Delais echelonnes */
.eh-reveal--delay-1 { transition-delay: 0.1s; }
.eh-reveal--delay-2 { transition-delay: 0.2s; }
.eh-reveal--delay-3 { transition-delay: 0.3s; }
.eh-reveal--delay-4 { transition-delay: 0.4s; }
.eh-reveal--delay-5 { transition-delay: 0.5s; }
.eh-reveal--delay-6 { transition-delay: 0.6s; }

/* Respect de la preference d'animation reduite */
@media (prefers-reduced-motion: reduce) {
    .eh-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==========================================================================
   30. BOUTON CTA AMELIORE
   --------------------------------------------------------------------------
   Le bouton .eh-btn--cta avec l'icone fleche.
   ========================================================================== */

.eh-btn--cta {
    display: inline-flex;
    align-items: center;
    gap: var(--eh-space-2);
}

.eh-btn--cta svg {
    transition: transform 200ms var(--eh-ease-smooth);
}

.eh-btn--cta:hover svg {
    transform: translateX(4px);
}


/* ==========================================================================
   31. STYLE AMELIORE — SECTION-TITLE DANS LE COMPOSANT HOME
   --------------------------------------------------------------------------
   Trait decoratif sous les titres de section plus visible.
   ========================================================================== */

.eh-section-title {
    text-align: center;
    margin-bottom: var(--eh-space-3);
    color: var(--eh-text);
    letter-spacing: -0.02em;
    font-weight: 700;
}


/* ==========================================================================
   32. WIZARD — ASSISTANT DE RECHERCHE
   --------------------------------------------------------------------------
   Mise en page complete de l'assistant en 4 etapes :
   Profil > Zone/Theme > Affection > Resultats
   ========================================================================== */

.eh-wizard {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--eh-space-8) var(--eh-space-4);
}

/* --- En-tete --- */
.eh-wizard__header {
    text-align: center;
    margin-bottom: var(--eh-space-8);
}

.eh-wizard__title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: var(--eh-text);
    margin-bottom: var(--eh-space-2);
}

.eh-wizard__subtitle {
    font-size: 1.1rem;
    color: var(--eh-text-muted);
    max-width: 500px;
    margin: 0 auto;
}

/* --- Indicateurs d'etapes --- */
.eh-wizard__step-list {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: var(--eh-space-2);
    padding: 0;
    margin: 0 0 var(--eh-space-4);
    flex-wrap: wrap;
}

.eh-wizard__step-item {
    display: flex;
    align-items: center;
    gap: var(--eh-space-2);
    padding: var(--eh-space-2) var(--eh-space-4);
    background: var(--eh-surface);
    border: 2px solid var(--eh-border);
    border-radius: var(--eh-radius-lg);
    font-size: 0.9rem;
    color: var(--eh-text-muted);
    transition: all 0.3s var(--eh-ease-smooth);
}

.eh-wizard__step-item--active {
    background: var(--eh-primary);
    border-color: var(--eh-primary);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--eh-primary) 30%, transparent);
}

.eh-wizard__step-item--done {
    background: color-mix(in srgb, var(--eh-primary) 10%, white);
    border-color: var(--eh-primary);
    color: var(--eh-primary);
}

.eh-wizard__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 15%, transparent);
    font-weight: 700;
    font-size: 0.85rem;
}

.eh-wizard__step-item--active .eh-wizard__step-number {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.eh-wizard__step-item--done .eh-wizard__step-number::after {
    content: '\2713';
}

.eh-wizard__step-title {
    font-weight: 500;
}

/* Barre de progression */
.eh-wizard__progress {
    height: 6px;
    background: var(--eh-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--eh-space-8);
}

.eh-wizard__progress-bar {
    height: 100%;
    background: var(--eh-gradient-brand);
    border-radius: 3px;
    transition: width 0.5s var(--eh-ease-smooth);
}

/* --- Panneaux de contenu --- */
.eh-wizard__panel {
    animation: eh-fadeIn 0.4s var(--eh-ease-out);
}

@keyframes eh-fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.eh-wizard__panel-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--eh-text);
    margin-bottom: var(--eh-space-2);
}

.eh-wizard__panel-desc {
    color: var(--eh-text-muted);
    margin-bottom: var(--eh-space-6);
    font-size: 1rem;
}

/* --- Grilles de choix --- */
.eh-wizard__grid {
    display: grid;
    gap: var(--eh-space-4);
}

.eh-wizard__grid--profiles {
    grid-template-columns: repeat(4, 1fr);
}

.eh-wizard__grid--zones,
.eh-wizard__grid--ailments {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* --- Boutons de choix (generiques) --- */
.eh-wizard__choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--eh-space-2);
    padding: var(--eh-space-6) var(--eh-space-4);
    background: var(--eh-surface);
    border: 2px solid var(--eh-border);
    border-radius: var(--eh-radius-lg);
    cursor: pointer;
    transition: all 0.25s var(--eh-ease-smooth);
    text-align: center;
    font-family: inherit;
    font-size: inherit;
    color: var(--eh-text);
}

.eh-wizard__choice:hover {
    border-color: var(--eh-primary);
    background: color-mix(in srgb, var(--eh-primary) 5%, white);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.eh-wizard__choice.is-selected {
    border-color: var(--eh-primary);
    background: color-mix(in srgb, var(--eh-primary) 10%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eh-primary) 20%, transparent);
}

/* Icone des profils */
.eh-wizard__choice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--eh-primary) 10%, white);
    color: var(--eh-primary);
    margin-bottom: var(--eh-space-2);
    transition: transform 0.3s var(--eh-ease-smooth), background 0.3s;
}

.eh-wizard__choice--profile:hover .eh-wizard__choice-icon {
    transform: scale(1.1);
    background: color-mix(in srgb, var(--eh-primary) 18%, white);
}

.eh-wizard__choice-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--eh-text);
}

.eh-wizard__choice-count {
    font-size: 0.8rem;
    color: var(--eh-text-muted);
    font-weight: 500;
}

/* Choix zone / theme : layout vertical (titre + pastille) */
.eh-wizard__choice--zone,
.eh-wizard__choice--theme,
.eh-wizard__choice--ailment {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--eh-space-3);
    padding: var(--eh-space-5) var(--eh-space-4);
    text-align: center;
}

.eh-wizard__choice--zone .eh-wizard__choice-label,
.eh-wizard__choice--theme .eh-wizard__choice-label,
.eh-wizard__choice--ailment .eh-wizard__choice-label {
    order: -1;
}

.eh-wizard__choice--zone .eh-wizard__choice-count,
.eh-wizard__choice--theme .eh-wizard__choice-count,
.eh-wizard__choice--ailment .eh-wizard__choice-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--eh-space-2);
    border-radius: var(--eh-radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
    background: linear-gradient(135deg, color-mix(in srgb, var(--eh-primary) 15%, white), color-mix(in srgb, var(--eh-primary) 8%, white));
    color: var(--eh-primary-dark);
    box-shadow: 0 1px 3px rgba(46, 125, 50, 0.12);
    transition: all 0.25s var(--eh-ease-smooth);
}

.eh-wizard__choice:hover .eh-wizard__choice-count {
    background: linear-gradient(135deg, var(--eh-primary), var(--eh-primary-light));
    color: white;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
    transform: scale(1.1);
}

/* --- Toggle mode (zones / themes) --- */
.eh-wizard__mode-toggle {
    display: flex;
    gap: var(--eh-space-2);
    margin-bottom: var(--eh-space-6);
    flex-wrap: wrap;
}

/* --- Resultats (etape 4) --- */
.eh-wizard__results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--eh-space-5);
}

.eh-wizard__result-card {
    background: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-lg);
    padding: var(--eh-space-6);
    transition: transform 0.25s var(--eh-ease-smooth), box-shadow 0.25s;
}

.eh-wizard__result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.eh-wizard__result-header {
    display: flex;
    gap: var(--eh-space-2);
    margin-bottom: var(--eh-space-3);
}

.eh-wizard__result-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--eh-text);
    margin-bottom: var(--eh-space-2);
}

.eh-wizard__result-subtitle {
    font-size: 0.95rem;
    color: var(--eh-primary-dark);
    font-weight: 500;
    margin-bottom: var(--eh-space-2);
}

.eh-wizard__result-indication {
    font-size: 0.9rem;
    color: var(--eh-text-muted);
    line-height: 1.5;
    margin-bottom: var(--eh-space-3);
}

.eh-wizard__result-ingredients {
    font-size: 0.85rem;
    color: var(--eh-text-muted);
    margin-bottom: var(--eh-space-4);
    padding: var(--eh-space-3);
    background: color-mix(in srgb, var(--eh-primary) 5%, white);
    border-radius: var(--eh-radius);
}

.eh-wizard__result-link {
    display: inline-flex;
    width: 100%;
    justify-content: center;
}

.eh-wizard__empty {
    text-align: center;
    color: var(--eh-text-muted);
    padding: var(--eh-space-8);
    font-size: 1.1rem;
}

/* --- Badges --- */
.eh-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--eh-space-1) var(--eh-space-3);
    border-radius: var(--eh-radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.eh-badge--r-number {
    background: var(--eh-primary);
    color: #fff;
}

.eh-badge--comp {
    background: color-mix(in srgb, var(--eh-secondary) 15%, white);
    color: var(--eh-secondary);
}

/* --- Footer du wizard (boutons navigation) --- */
.eh-wizard__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--eh-space-4);
    margin-top: var(--eh-space-8);
    padding-top: var(--eh-space-6);
    border-top: 1px solid var(--eh-border);
    flex-wrap: wrap;
}

.eh-wizard__footer .eh-btn {
    min-width: 140px;
}

.eh-wizard__footer .eh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading spinner */
.eh-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--eh-space-3);
    padding: var(--eh-space-8);
    color: var(--eh-text-muted);
}

.eh-loading__spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--eh-border);
    border-top-color: var(--eh-primary);
    border-radius: 50%;
    animation: eh-spin 0.8s linear infinite;
}

@keyframes eh-spin {
    to { transform: rotate(360deg); }
}

/* --- Responsive wizard --- */
@media (max-width: 767px) {
    .eh-wizard {
        padding: var(--eh-space-6) var(--eh-space-3);
    }

    .eh-wizard__step-list {
        gap: var(--eh-space-1);
    }

    .eh-wizard__step-item {
        padding: var(--eh-space-1) var(--eh-space-2);
        font-size: 0.8rem;
    }

    .eh-wizard__step-title {
        display: none;
    }

    .eh-wizard__step-number {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .eh-wizard__grid--profiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .eh-wizard__grid--zones,
    .eh-wizard__grid--ailments {
        grid-template-columns: 1fr;
    }

    .eh-wizard__results-grid {
        grid-template-columns: 1fr;
    }

    .eh-wizard__footer {
        flex-direction: row;
        justify-content: center;
    }

    .eh-wizard__footer .eh-btn {
        min-width: 110px;
        font-size: 0.9rem;
    }
}


/* ==========================================================================
   33. PAGE D'ERREUR (404 / 500)
   ========================================================================== */

.eh-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    text-align: center;
    padding: var(--eh-space-8) var(--eh-space-4);
}

.eh-error__logo {
    text-decoration: none;
    margin-bottom: var(--eh-space-8);
}

.eh-error__logo .eh-logo-text {
    font-size: 1.5rem;
}

.eh-error__code {
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 800;
    background: var(--eh-gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: var(--eh-space-2);
}

.eh-error__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--eh-text);
    margin-bottom: var(--eh-space-3);
}

.eh-error__desc {
    font-size: 1.1rem;
    color: var(--eh-text-muted);
    max-width: 480px;
    margin: 0 auto var(--eh-space-8);
    line-height: 1.6;
}

.eh-error__actions {
    display: flex;
    gap: var(--eh-space-4);
    flex-wrap: wrap;
    justify-content: center;
}