/**
 * ArgenTous — Aide : bandeau de questions et page des réponses
 *
 * Mobile-first, conformément à la règle du projet : les règles nues visent le
 * téléphone, les media queries élargissent ensuite pour le bureau.
 *
 * Le bandeau tient sur UNE ligne quoi qu'il arrive. C'est la contrainte
 * structurante : `min-width:0` sur la piste flexible est ce qui autorise
 * l'ellipse — sans lui, un élément flex refuse de descendre sous la largeur de
 * son contenu et la question déborde au lieu d'être tronquée.
 */

/* ══ Bandeau de questions ═════════════════════════════════════════════════ */

.agt-helpbar {
    display: flex;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    max-width: 680px;
    margin: 0 auto var(--agt-space-4, 16px);
    padding: 2px;
    background: var(--Agtcla-primary-light, #EEF2FF);
    border: 1px solid rgba(79, 70, 229, .18);
    border-radius: var(--agt-radius-full, 9999px);
    overflow: hidden;
}

.agt-helpbar__viewport {
    flex: 1 1 auto;
    /* Sans cette ligne, la question ne se tronque jamais et casse la barre. */
    min-width: 0;
    display: flex;
    align-items: center;
}

.agt-helpbar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
}

.agt-helpbar__item {
    margin: 0;
    min-width: 0;
}

.agt-helpbar__item[hidden] {
    display: none;
}

.agt-helpbar__link {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 7px 10px;
    color: var(--Agtcla-primary-dark, #4338CA);
    font-size: .8125rem;
    line-height: 1.3;
    text-decoration: none;
    border-radius: var(--agt-radius-full, 9999px);
    transition: background-color .15s ease;
}

.agt-helpbar__link:hover,
.agt-helpbar__link:focus-visible {
    background: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.agt-helpbar__mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    font-size: .6875rem;
    font-weight: 700;
    color: #fff;
    background: var(--Agtcla-primary, #4F46E5);
    border-radius: 50%;
}

.agt-helpbar__text {
    /* Le cœur de la consigne : une seule ligne, jamais deux. */
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.agt-helpbar__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    opacity: .55;
}

.agt-helpbar__arrow {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    padding: 0;
    color: var(--Agtcla-primary, #4F46E5);
    background: transparent;
    border: 0;
    border-radius: var(--agt-radius-full, 9999px);
    cursor: pointer;
    transition: background-color .15s ease;
}

.agt-helpbar__arrow:hover,
.agt-helpbar__arrow:focus-visible {
    background: rgba(255, 255, 255, .8);
}

.agt-helpbar__counter {
    display: none;
    flex: 0 0 auto;
    align-self: center;
    padding-right: 10px;
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--Agtcla-primary-dark, #4338CA);
    opacity: .6;
}

/*
 * Flèches et compteur n'apparaissent qu'une fois le script en place. Sans
 * JavaScript ils ne feraient rien : mieux vaut ne pas les montrer que de
 * proposer des commandes mortes.
 */
.agt-helpbar--ready .agt-helpbar__arrow,
.agt-helpbar--ready .agt-helpbar__counter {
    display: flex;
}

.agt-helpbar--single .agt-helpbar__arrow,
.agt-helpbar--single .agt-helpbar__counter {
    display: none;
}

@media (min-width: 600px) {
    .agt-helpbar__link {
        font-size: .875rem;
        padding: 8px 12px;
    }

    .agt-helpbar__arrow {
        width: 32px;
    }
}

/* ══ Page d'aide ══════════════════════════════════════════════════════════ */

.agt-help {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--agt-space-4, 16px) var(--agt-space-10, 40px);
    /*
     * Réserve la place du bouton de retour flottant : sans elle, le bouton
     * recouvre le dernier paragraphe de la page, qui devient illisible.
     */
    padding-bottom: 84px;
}

.agt-help__hero {
    padding: var(--agt-space-8, 32px) 0 var(--agt-space-4, 16px);
    text-align: center;
}

.agt-help__title {
    margin: 0 0 var(--agt-space-3, 12px);
    font-size: clamp(1.5rem, 4.5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--agt-gray-900, #111827);
}

.agt-help__lead {
    margin: 0 auto;
    max-width: 620px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--agt-gray-600, #4B5563);
}

.agt-help__block {
    margin-top: var(--agt-space-8, 32px);
}

.agt-help__block-title,
.agt-help__section-title {
    margin: 0 0 var(--agt-space-2, 8px);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--agt-gray-900, #111827);
}

.agt-help__block-intro,
.agt-help__section-intro {
    margin: 0 0 var(--agt-space-5, 20px);
    color: var(--agt-gray-600, #4B5563);
    line-height: 1.6;
}

.agt-help__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--agt-space-4, 16px);
}

.agt-help__step {
    display: flex;
    gap: var(--agt-space-3, 12px);
    align-items: flex-start;
    padding: var(--agt-space-4, 16px);
    background: var(--agt-gray-50, #F9FAFB);
    border: 1px solid var(--agt-gray-200, #E5E7EB);
    border-radius: var(--agt-radius-md, 10px);
}

.agt-help__step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: .8125rem;
    font-weight: 700;
    color: #fff;
    background: var(--Agtcla-primary, #4F46E5);
    border-radius: 50%;
}

.agt-help__step-title {
    margin: 0 0 4px;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--agt-gray-900, #111827);
}

.agt-help__step p,
.agt-help__perk p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--agt-gray-600, #4B5563);
}

.agt-help__grid {
    display: grid;
    gap: var(--agt-space-4, 16px);
}

.agt-help__perk {
    padding: var(--agt-space-4, 16px);
    background: var(--agt-white, #FFFFFF);
    border: 1px solid var(--agt-gray-200, #E5E7EB);
    border-radius: var(--agt-radius-md, 10px);
    box-shadow: var(--agt-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08));
}

.agt-help__perk-title {
    margin: 0 0 6px;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--Agtcla-primary-dark, #4338CA);
}

.agt-help__cta {
    margin-top: var(--agt-space-8, 32px);
    padding: var(--agt-space-6, 24px);
    text-align: center;
    background: var(--Agtcla-primary-light, #EEF2FF);
    border-radius: var(--agt-radius-lg, 16px);
}

.agt-help__cta-title {
    margin: 0 0 var(--agt-space-2, 8px);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--agt-gray-900, #111827);
}

.agt-help__cta p {
    margin: 0 0 var(--agt-space-4, 16px);
    color: var(--agt-gray-700, #374151);
    line-height: 1.6;
}

.agt-help__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--agt-space-3, 12px);
    justify-content: center;
    margin: 0;
}

.agt-help__toc {
    margin-top: var(--agt-space-8, 32px);
    padding: var(--agt-space-5, 20px);
    background: var(--agt-gray-50, #F9FAFB);
    border: 1px solid var(--agt-gray-200, #E5E7EB);
    border-radius: var(--agt-radius-md, 10px);
}

.agt-help__toc-title {
    margin: 0 0 var(--agt-space-3, 12px);
    font-size: 1rem;
    font-weight: 700;
    color: var(--agt-gray-900, #111827);
}

.agt-help__toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.agt-help__toc-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--agt-space-3, 12px);
    padding: 9px 12px;
    font-size: .9375rem;
    color: var(--Agtcla-primary-dark, #4338CA);
    text-decoration: none;
    border-radius: var(--agt-radius-sm, 6px);
}

.agt-help__toc-list a:hover,
.agt-help__toc-list a:focus-visible {
    background: var(--agt-white, #FFFFFF);
}

.agt-help__toc-count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 7px;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    color: var(--Agtcla-primary-dark, #4338CA);
    background: var(--Agtcla-primary-light, #EEF2FF);
    border-radius: var(--agt-radius-full, 9999px);
}

.agt-help__section {
    margin-top: var(--agt-space-10, 40px);
    padding-top: var(--agt-space-6, 24px);
    border-top: 2px solid var(--agt-gray-200, #E5E7EB);
}

.agt-help__qa {
    padding: var(--agt-space-4, 16px) 0;
    border-bottom: 1px solid var(--agt-gray-100, #F3F4F6);
    /*
     * Décale la cible d'une ancre pour qu'un titre visé ne se colle pas au bord
     * haut de la fenêtre — ni sous une éventuelle barre fixe du thème.
     */
    scroll-margin-top: 80px;
}

.agt-help__qa:last-child {
    border-bottom: 0;
}

/*
 * La réponse atteinte par un lien du bandeau se signale d'elle-même : sans ce
 * repère, l'utilisateur arrive au milieu d'un mur de texte sans savoir laquelle
 * des réponses est la sienne.
 */
.agt-help__qa:target {
    background: var(--agt-warning-light, #FFFBEB);
    border-left: 3px solid var(--agt-warning, #F59E0B);
    border-radius: var(--agt-radius-sm, 6px);
    padding-left: var(--agt-space-4, 16px);
    outline: none;
}

.agt-help__q {
    margin: 0 0 var(--agt-space-2, 8px);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--agt-gray-900, #111827);
}

.agt-help__a p {
    margin: 0 0 var(--agt-space-2, 8px);
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--agt-gray-700, #374151);
}

.agt-help__a p:last-child {
    margin-bottom: 0;
}

.agt-help__a-steps {
    margin: var(--agt-space-2, 8px) 0 0;
    padding-left: 20px;
}

.agt-help__a-steps li {
    margin-bottom: 6px;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--agt-gray-700, #374151);
}

.agt-help__footer {
    margin-top: var(--agt-space-8, 32px);
    padding-top: var(--agt-space-5, 20px);
    border-top: 1px solid var(--agt-gray-200, #E5E7EB);
    font-size: .875rem;
    color: var(--agt-gray-500, #6B7280);
}

/* ══ Bouton de retour, toujours visible ═══════════════════════════════════ */

/*
 * Fixe, et non collant : la consigne est que l'utilisateur n'ait jamais à
 * remonter la page pour retrouver son chemin. Une réponse peut se trouver très
 * bas, et `position:sticky` disparaîtrait avec son conteneur.
 */
.agt-help__back {
    position: fixed;
    left: var(--agt-space-4, 16px);
    bottom: calc(var(--agt-space-4, 16px) + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--Agtcla-primary, #4F46E5);
    border-radius: var(--agt-radius-full, 9999px);
    box-shadow: var(--agt-shadow-lg, 0 10px 24px rgba(0, 0, 0, .12));
    transition: background-color .15s ease, transform .15s ease;
}

.agt-help__back:hover,
.agt-help__back:focus-visible {
    color: #fff;
    text-decoration: none;
    background: var(--Agtcla-primary-dark, #4338CA);
    transform: translateY(-1px);
}

.agt-help__back-icon {
    flex: 0 0 auto;
}

.agt-help__back-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (min-width: 782px) {
    .agt-help__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agt-help__toc-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .agt-help__q {
        font-size: 1.0625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .agt-help__back,
    .agt-helpbar__link,
    .agt-helpbar__arrow {
        transition: none;
    }

    .agt-help__back:hover {
        transform: none;
    }
}