/* =====================================================================================
   Aide en ligne — bouton, modale et mise en forme des fragments

   D'OÙ CELA VIENT, ET POURQUOI C'EST PORTÉ ICI

   Le dispositif est repris de l'application de facturation, où il rend un service qu'aucun écran
   du TMS n'avait : une explication de l'écran courant, écrite une fois, atteignable sans quitter
   la page. Il arrive avec le premier écran qui en dispose — la qualité de service — et les
   suivants n'auront qu'à déposer leur fragment sous WEB-INF/aide.

   LE BOUTON EST PORTÉ PAR LE GABARIT, PAS PAR LES ÉCRANS

   Un bouton par écran serait à ajouter autant de fois qu'il y a d'écrans, et surtout à ne pas
   oublier au suivant. AideController reconnaît l'écran courant et choisit le fragment ; un écran
   sans fragment n'affiche simplement pas de bouton — plutôt qu'une modale vide, qui use la
   confiance plus qu'elle ne rend service.

   LES VARIABLES SONT REDÉFINIES ICI

   style.css d'eKanConnect ne porte aucune variable de thème. Même dispositif et même sort que
   .elo-carbone dans carbone.css : le jour où le TMS se dote de son propre thème, ces blocs
   disparaissent au profit du sien — les noms sont déjà les bons.

   RÉSERVÉ AUX ÉCRANS SANS MENU LATÉRAL

   Avec le menu latéral (body.elo-shell), elo-layout.css porte déjà le bouton et la modale, et
   elo-theme.css les variables, mode sombre compris. Chargé en dernier, ce fichier imposait ses
   couleurs claires à la modale d'aide de l'espace e-commerçant : texte sombre sur fond sombre.
   ===================================================================================== */

body:not(.elo-shell) .elo-aide-bar,
body:not(.elo-shell) .elo-aide {
    --elo-brand: #F2A05A;
    --elo-brand-mid: #E3863A;
    --elo-brand-dark: #9A4F12;
    --elo-ink: #1A1C1E;
    --elo-slate: #4A5568;
    --elo-muted: #8A95A3;
    --elo-white: #FFFFFF;
    --elo-surface: #EEF1F5;
    --elo-border: rgba(0, 0, 0, 0.09);
}

/* ---- Le bouton ----
   Fixé en haut à droite du contenu : la plupart des écrans du TMS portent déjà des boutons
   d'action près de leur titre, que celui-ci ne doit pas recouvrir. */
body:not(.elo-shell) .elo-aide-bar {
    position: fixed;
    top: 74px;
    right: 22px;
    z-index: 900;
}

/* Écrans d'adhérent : la hauteur du menu du TMS n'est pas fixe (il passe sur deux lignes selon les droits
   et la largeur), un bouton fixé à 74 px finissait sur « Requêtes ». Le bouton reprend donc sa place dans
   le flux, à droite, sur la ligne du titre de l'écran ; la marge négative évite de pousser le contenu.
   L'espace e-commerçant garde sa propre règle (.layout-main .elo-aide-bar, elo-layout.css). */
body:not(.elo-shell) .elo-aide-bar {
    position: relative;
    top: auto;
    right: auto;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    height: 0;
    padding-right: 22px;
    overflow: visible;
}

body:not(.elo-shell) .elo-aide-bar .elo-aide-btn {
    margin-top: 14px;
}

body:not(.elo-shell) .elo-aide-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--elo-border);
    border-radius: 999px;
    background: var(--elo-white);
    color: var(--elo-slate);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

body:not(.elo-shell) .elo-aide-btn i {
    color: var(--elo-brand-mid);
}

body:not(.elo-shell) .elo-aide-btn:hover,
body:not(.elo-shell) .elo-aide-btn:focus-visible {
    background: var(--elo-surface);
    color: var(--elo-ink);
}

@media (max-width: 640px) {
    body:not(.elo-shell) .elo-aide-btn__label {
        display: none;
    }

    body:not(.elo-shell) .elo-aide-btn {
        padding: 6px 8px;
    }
}

/* ---- Contenu de la modale ----
   Une aide se lit, elle ne se parcourt pas : mesure limitée, interlignage large, et une
   hiérarchie qui tient en deux niveaux. */
body:not(.elo-shell) .elo-aide {
    max-height: 68vh;
    overflow-y: auto;
    padding: 4px 6px 2px;
    color: var(--elo-ink);
    font-size: .88rem;
    line-height: 1.6;
}

body:not(.elo-shell) .elo-aide > section + section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--elo-border);
}

body:not(.elo-shell) .elo-aide h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--elo-ink);
}

body:not(.elo-shell) .elo-aide h4 i {
    color: var(--elo-brand-mid);
}

body:not(.elo-shell) .elo-aide p {
    margin: 0 0 10px;
}

body:not(.elo-shell) .elo-aide ul,
body:not(.elo-shell) .elo-aide ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

body:not(.elo-shell) .elo-aide li {
    margin-bottom: 6px;
}

body:not(.elo-shell) .elo-aide strong {
    font-weight: 600;
    color: var(--elo-ink);
}

/* ---- Glossaire ----
   Le terme et sa définition sur deux colonnes, ramenées à une seule sur écran étroit. Le terme
   reste lisible seul : c'est ainsi qu'on lit un glossaire, en balayant la colonne de gauche
   jusqu'au mot cherché. */
body:not(.elo-shell) .elo-aide-glossaire {
    display: grid;
    grid-template-columns: minmax(120px, 32%) 1fr;
    gap: 8px 16px;
    margin: 0;
}

body:not(.elo-shell) .elo-aide-glossaire dt {
    font-weight: 600;
    color: var(--elo-brand-dark);
}

body:not(.elo-shell) .elo-aide-glossaire dd {
    margin: 0;
    color: var(--elo-slate);
}

@media (max-width: 720px) {
    body:not(.elo-shell) .elo-aide-glossaire {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    body:not(.elo-shell) .elo-aide-glossaire dd {
        margin-bottom: 8px;
    }
}