/*
 * Onglets de la page « Mon héros »
 * ============================================================================
 * Reprise du composant d'onglets de la page campagne
 * (features/campagne-onglets/assets/onglets.css) : mêmes classes, mêmes
 * variables du cœur (--hr-primary, --hr-dark, --hr-grey, --hr-gap-*), même
 * apparence — rangée centrée sur fond blanc, filet or sous l'onglet ouvert,
 * libellé qui s'épaissit au survol. Rien à tenir synchronisé : si la charte
 * bouge dans haeros-core, les deux rangées d'onglets suivent ensemble grâce
 * aux mêmes variables.
 *
 * Deux ajouts propres à cette page :
 *   - les sous-onglets (.hr-onglets--sous) : le même composant, imbriqué une
 *     fois, en un peu plus compact ;
 *   - l'infobulle sur « Mes parchemins » (data-infobulle), en CSS pur.
 */

/* Le blanc reste sur la barre d'onglets elle-même (.hr-onglets__liste), pas
   sur .hr-onglets dans son ensemble : celui-ci enveloppe aussi les panneaux
   en dessous, et un fond posé ici s'étendrait visuellement sur tout leur
   contenu. */
.hr-onglets {
    border: none;
}

.hr-onglets__liste {
    background-color: var(--hr-white, #ffffff);
    display: flex;
    justify-content: center;
    gap: var(--hr-gap-xxl, 64px);
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 16px 14px;
    border-radius: 8px;
}

/* ⚠️ Les !important reprennent ceux de campagne-onglets : le thème habille
   largement les éléments cliquables (fond plein, coins arrondis, ombre) et
   l'a fait avec assez de poids pour écraser une règle ordinaire. */
.hr-onglets__onglet {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-block;
    position: relative;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 0 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--hr-grey, #666);
    text-decoration: none !important;
    cursor: pointer;
    transition: all .3s;
}

.hr-onglets__libelle {
    display: block;
}

/* Réserve, en gras, la place que le mot occupera au survol — sans elle, le
   passage de 500 à 700 élargit le bouton et fait tressauter la rangée. */
.hr-onglets__libelle::before {
    content: attr(data-libelle);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 700;
    pointer-events: none;
}

.hr-onglets__onglet:hover,
.hr-onglets__onglet:focus,
.hr-onglets__onglet:active {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.hr-onglets__onglet:hover {
    color: var(--hr-dark, #1c1c1c);
    font-weight: 700;
}

.hr-onglets__onglet[aria-selected="true"] {
    color: var(--hr-primary, #dca54a);
    border-bottom-color: var(--hr-primary, #dca54a) !important;
}

.hr-onglets__onglet:focus-visible {
    outline: 2px solid var(--hr-primary, #dca54a);
    outline-offset: 4px;
    border-radius: 3px;
}

.hr-onglets__panneau {
    outline: none;
    padding: var(--hr-section-pad-y-lg, 60px) 0;
}

.hr-onglets__panneau[hidden] {
    display: none !important;
}

/* Un panneau qui ne contient que des sous-onglets n'a pas besoin de cette
   respiration : la barre de sous-onglets la donne déjà. */
.hr-onglets__panneau--groupe {
    padding: 0;
}


/* Panneau dont le contenu doit être centré (ex. le formulaire « Écrire un
   parchemin »), plutôt que collé à gauche comme un panneau ordinaire. */
.hr-onglets__panneau-centre {
    display: flex;
    justify-content: center;
}

/* ==================================================
   Sous-onglets
   ================================================== */

.hr-onglets--sous {
    padding: 0 0 8px;
}

.hr-onglets--sous .hr-onglets__liste {
    gap: var(--hr-gap-lg, 32px);
    padding: 16px 16px 0;
}

.hr-onglets--sous .hr-onglets__onglet {
    font-size: 15px;
}

.hr-onglets--sous .hr-onglets__panneau {
    padding: var(--hr-section-pad-y-md, 40px) 0;
}


/* ==================================================
   Infobulle (onglet « Mes parchemins »)
   ================================================== */

.hr-onglets__onglet[data-infobulle]::after {
    content: attr(data-infobulle);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    white-space: nowrap;
    background-color: var(--hr-dark, #1c1c1c);
    color: var(--hr-white, #fff);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 2;
}

.hr-onglets__onglet[data-infobulle]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    border: 5px solid transparent;
    border-top-color: var(--hr-dark, #1c1c1c);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 2;
}

.hr-onglets__onglet[data-infobulle]:hover::after,
.hr-onglets__onglet[data-infobulle]:hover::before,
.hr-onglets__onglet[data-infobulle]:focus-visible::after,
.hr-onglets__onglet[data-infobulle]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px);
}


/* ==================================================
   Petits écrans
   ================================================== */

@media (max-width: 782px) {

    .hr-onglets__liste {
        gap: 16px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-bottom: 0;
        padding: 14px 16px 12px;
    }

    .hr-onglets__liste::-webkit-scrollbar { display: none; }

    .hr-onglets__onglet {
        flex: 0 0 auto;
    }

    .hr-onglets--sous .hr-onglets__liste {
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hr-onglets__onglet {
        transition: none;
    }
    .hr-onglets__onglet[data-infobulle]::after,
    .hr-onglets__onglet[data-infobulle]::before {
        transition: none;
    }
}