/**
 * RECOMMANDEUR DE HÉROS — habillage de SelecteurHeros.php.
 *
 * Chargé après « theme.css », dont il reprend les jetons (--odv-*).
 *
 * L'ancienne version peignait des panneaux gris anthracite sur un fond
 * gris clair, avec du texte blanc, des pastilles blanches et un bleu vif
 * en survol : trois univers de couleur sur une même page, dont aucun ne
 * correspondait aux cartes du jeu. Tout passe ici en parchemin et encre.
 */

/* Le bandeau — logo puis nom de l'outil — est entièrement décrit dans
   theme.css : cette page le partage tel quel avec l'encyclopédie.

   La page suit le même enchaînement que le tirage aléatoire : les
   extensions d'abord dans leur propre cadre, puis les critères, puis les
   résultats. Les valeurs de mise en page sont volontairement identiques à
   celles de TirageAleatoire/CSS/tirage.css — les deux outils sont des
   projets distincts, mais ils doivent se parcourir de la même façon. */

.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5em 3em;
}

/* Le conteneur porte déjà la marge latérale : l'intertitre ne doit pas en
   ajouter une seconde. */
.page .section-title {
    margin: 2.6em 0 1.2em;
    padding: 0;
}

/* ---------------------------------------------------------------
   Panneaux
   --------------------------------------------------------------- */

.panel {
    background-color: var(--odv-panneau);
    border: 1px solid var(--odv-bordure);
    border-radius: var(--odv-rayon-large);
    box-shadow: var(--odv-ombre);
    padding: 1.6em 1.8em 1.8em;
    margin-bottom: 1.6em;
}

.panel-title {
    margin: 0 0 1.2em;
    padding-bottom: .5em;
    border-bottom: 1px solid var(--odv-bordure);
    font-size: 1.15em;
    font-weight: 600;
    letter-spacing: .01em;
}

/* ---------------------------------------------------------------
   Extensions
   Deux rangées : les visuels en paysage, puis ceux en portrait. Les
   deux formats ont des tailles transposées — 182 × 130 contre
   130 × 182 — de sorte que les vignettes occupent la même surface
   d'une rangée à l'autre, sans qu'aucune image ne soit rognée.
   --------------------------------------------------------------- */

.extensions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    margin-top: 1.5em;
}

.ext-rangee {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
}

.ext-card {
    display: flex;
    flex-direction: column;
    width: 130px;
    text-align: center;
    cursor: pointer;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: var(--odv-rayon-large);
    background: none;
    font: inherit;
    color: inherit;
    transition: transform var(--odv-transition), box-shadow var(--odv-transition),
        border-color var(--odv-transition), background-color var(--odv-transition);
}

.ext-rangee--paysage .ext-card {
    width: 182px;
}

.ext-card img {
    width: 100%;
    display: block;
    /* Le format exact des visuels : le cadrage ne rogne donc rien. */
    aspect-ratio: 525 / 736;
    object-fit: cover;
    border-radius: var(--odv-rayon);
    box-shadow: 0 1px 3px rgba(47, 38, 30, .2);
    /* Les boîtes non retenues restent lisibles mais s'effacent derrière
       celles que le joueur a choisies. */
    filter: saturate(.75) brightness(.98);
    transition: filter var(--odv-transition);
}

.ext-rangee--paysage .ext-card img {
    aspect-ratio: 736 / 525;
}

.ext-card .ext-nom {
    display: block;
    flex: 1;
    margin-top: .5em;
    font-size: .8em;
    line-height: 1.3;
    color: var(--odv-encre-douce);
}

.ext-card .ext-compte {
    display: block;
    margin-top: .25em;
    font-size: .72em;
    color: var(--odv-encre-pale);
    font-variant-numeric: tabular-nums;
}

/* « :not([aria-pressed="true"]) » : le sélecteur de survol est plus
   spécifique que celui de l'état retenu et lui reprendrait son filet doré. */
.ext-card:hover:not([aria-pressed="true"]) {
    transform: translateY(-3px);
    box-shadow: var(--odv-ombre-forte);
    border-color: var(--odv-bordure);
    background-color: var(--odv-panneau);
}

.ext-card:hover img {
    filter: none;
}

.ext-card[aria-pressed="true"] {
    border-color: var(--odv-or);
    box-shadow: 0 0 0 1px var(--odv-or), var(--odv-ombre);
    background-color: var(--odv-panneau);
}

.ext-card[aria-pressed="true"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px var(--odv-or), var(--odv-ombre-forte);
}

.ext-card[aria-pressed="true"] img {
    filter: none;
}

.ext-card[aria-pressed="true"] .ext-nom {
    color: var(--odv-encre);
    font-weight: 700;
}

.ext-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--odv-or-voile);
}

/* ---------------------------------------------------------------
   Décompte de la sélection
   Même cadre dans tous les cas ; seule la couleur change quand il n'y
   a plus rien à proposer.
   --------------------------------------------------------------- */

.disponibilite {
    max-width: 46em;
    margin: 1.6em auto 0;
    padding: .8em 1.3em;
    border-radius: var(--odv-rayon);
    background-color: var(--odv-parchemin);
    border: 1px solid var(--odv-bordure);
    border-left: 4px solid var(--odv-bordure-forte);
    color: var(--odv-encre-douce);
    font-size: .92em;
    font-variant-numeric: tabular-nums;
}

.disponibilite--alerte {
    background-color: #f7e7bd;
    border-color: #c8a22b;
    color: #574408;
}

/* ---------------------------------------------------------------
   Critères
   --------------------------------------------------------------- */

.reglages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8em;
    align-items: start;
}

/* « .field + .field » ajoute une marge haute aux champs qui se suivent —
   utile quand ils sont empilés, désastreux entre colonnes voisines. */
.reglages>.field+.field {
    margin-top: 0;
}

.field--couleurs {
    margin-top: 1.8em;
}

/* ---------------------------------------------------------------
   Champs
   --------------------------------------------------------------- */

.field {
    margin: 0 0 1.6em;
}

.field:last-child {
    margin-bottom: 0;
}

.label {
    display: block;
    font-weight: 600;
    font-size: .95em;
    color: var(--odv-encre);
    margin-bottom: .5em;
    letter-spacing: .01em;
}

/* L'aide était en gris pâle sur fond sombre, à la limite du lisible ;
   elle est maintenant posée sur un léger creux de parchemin, à largeur
   de lecture. */
.hint {
    font-size: .88em;
    line-height: 1.55;
    color: var(--odv-encre-douce);
    margin-top: .6em;
    padding-left: .9em;
    border-left: 2px solid var(--odv-bordure);
    max-width: 62em;
}

/* Le rappel des spécialités de couleur tenait cinq lignes en permanence
   sous les pastilles. Il est replié : on le déroule quand on en a besoin. */
.legende-couleurs {
    margin-top: .8em;
}

.legende-couleurs summary {
    cursor: pointer;
    font-size: .85em;
    color: var(--odv-or);
    list-style: none;
    padding: .2em 0;
}

.legende-couleurs summary::-webkit-details-marker {
    display: none;
}

.legende-couleurs summary::before {
    content: "▸ ";
}

.legende-couleurs[open] summary::before {
    content: "▾ ";
}

.legende-couleurs summary:hover {
    text-decoration: underline;
}

.couleurs-legende {
    list-style: none;
    margin: .6em 0 0;
    padding-left: .9em;
    border-left: 2px solid var(--odv-bordure);
    font-size: .88em;
    line-height: 1.55;
    color: var(--odv-encre-douce);
    max-width: 62em;
}

.couleurs-legende li {
    margin-bottom: .25em;
}

.couleurs-legende b {
    color: var(--odv-encre);
}

p.hint {
    margin-top: 0;
    margin-bottom: 0;
}

/* Sous un champ, l'aide vient après la commande : c'est là qu'elle a une
   marge haute, pas une marge basse. */
.field p.hint {
    margin-top: .6em;
}

select {
    width: 100%;
    padding: .55em .9em;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.35;
    color: var(--odv-encre);
    background-color: #fff;
    border: 1px solid var(--odv-bordure);
    border-radius: var(--odv-rayon);
    cursor: pointer;
    transition: border-color var(--odv-transition), box-shadow var(--odv-transition);
}

select:focus {
    outline: none;
    border-color: var(--odv-or);
    box-shadow: 0 0 0 3px var(--odv-or-voile);
}

/* ---------------------------------------------------------------
   Pastilles de filtre
   --------------------------------------------------------------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

.chip {
    padding: .4em 1em;
    font-size: .9em;
    color: var(--odv-encre-douce);
    background-color: var(--odv-parchemin);
    border: 1px solid var(--odv-bordure);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: color var(--odv-transition), border-color var(--odv-transition),
        background-color var(--odv-transition), box-shadow var(--odv-transition);
}

.chip:hover {
    color: var(--odv-encre);
    border-color: var(--odv-bordure-forte);
    box-shadow: var(--odv-ombre);
}

.chip[data-on="1"] {
    background-color: var(--odv-encre);
    border-color: var(--odv-encre);
    color: var(--odv-parchemin);
    box-shadow: none;
}

/* Une pastille de couleur montre la couleur dont elle parle. La teinte
   passe par une variable pour n'être écrite qu'une fois par couleur. */
.chip.chip-couleur {
    --chip-teinte: var(--odv-encre-douce);
    color: var(--chip-teinte);
    border-color: var(--chip-teinte);
}

.chip.chip-couleur::before {
    content: "";
    display: inline-block;
    width: .65em;
    height: .65em;
    border-radius: 50%;
    margin-right: .5em;
    background-color: var(--chip-teinte);
    box-shadow: 0 0 0 1px rgba(47, 38, 30, .25);
}

.chip.chip-rouge {
    --chip-teinte: var(--odv-rouge);
}

.chip.chip-bleu {
    --chip-teinte: var(--odv-bleu);
}

.chip.chip-vert {
    --chip-teinte: var(--odv-vert);
}

.chip.chip-violet {
    --chip-teinte: var(--odv-violet);
}

.chip.chip-jaune {
    --chip-teinte: var(--odv-jaune);
}

.chip.chip-couleur[data-on="1"] {
    background-color: var(--chip-teinte);
    border-color: var(--chip-teinte);
    color: #fff;
}

.chip.chip-couleur[data-on="1"]::before {
    background-color: #fff;
    box-shadow: none;
}

/* Le jaune est trop clair pour porter du blanc. */
.chip.chip-jaune[data-on="1"] {
    color: #3a2f08;
}

.chip.chip-jaune[data-on="1"]::before {
    background-color: #3a2f08;
}

/* ---------------------------------------------------------------
   Boutons
   --------------------------------------------------------------- */

/* Barre d'action identique à celle du tirage : « stretch » et non
   « center », pour que l'émoji du bouton principal ne lui donne pas deux
   pixels de plus qu'à son voisin. */
.barre-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75em;
    align-items: stretch;
    margin-top: 1.6em;
    padding-top: 1.4em;
    border-top: 1px solid var(--odv-bordure);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    font-family: inherit;
    font-size: 1em;
    padding: .6em 1.4em;
    border-radius: var(--odv-rayon);
    border: 1px solid var(--odv-bordure-forte);
    background-color: transparent;
    color: var(--odv-encre-douce);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--odv-transition), border-color var(--odv-transition),
        color var(--odv-transition), transform var(--odv-transition);
}

.btn:hover {
    background-color: var(--odv-parchemin-creux);
    color: var(--odv-encre);
}

/* L'action principale se distingue par sa couleur, pas par sa taille. */
.btn-principal {
    background-color: var(--odv-encre);
    border-color: var(--odv-encre);
    color: var(--odv-parchemin);
    font-weight: 700;
    letter-spacing: .02em;
}

.btn-principal:hover {
    background-color: var(--odv-or);
    border-color: var(--odv-or);
    color: #fff;
    transform: translateY(-1px);
}

.btn:focus-visible,
select:focus-visible,
.chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--odv-or-voile);
}

/* ---------------------------------------------------------------
   Résultats
   --------------------------------------------------------------- */

.results {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.hero-card {
    border: 1px solid var(--odv-bordure);
    border-left: 3px solid var(--odv-or);
    border-radius: var(--odv-rayon-large);
    background-color: var(--odv-parchemin);
    padding: 1.2em 1.4em 1.4em;
}

.hero-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
}

.hero-head h3 {
    margin: 0;
    font-size: 1.35em;
    color: var(--odv-encre);
    letter-spacing: .01em;
}

/* Le score : une jauge lisible d'un coup d'œil plutôt qu'une étiquette
   parmi les autres. */
.score {
    display: inline-flex;
    align-items: baseline;
    gap: .3em;
    font-weight: 700;
    color: var(--odv-or);
    white-space: nowrap;
}

.score small {
    font-weight: 400;
    color: var(--odv-encre-pale);
    font-size: .8em;
}

.hero-pitch {
    margin: .5em 0 0;
    font-size: 1em;
    line-height: 1.5;
    color: var(--odv-encre-douce);
    font-style: italic;
    max-width: 70em;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: .45em;
    margin-top: .9em;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-size: .82em;
    padding: .28em .8em;
    border-radius: 999px;
    background-color: var(--odv-panneau);
    border: 1px solid var(--odv-bordure);
    color: var(--odv-encre-douce);
}

.colorDot {
    width: .7em;
    height: .7em;
    border-radius: 50%;
    margin: 0;
    border: 1px solid rgba(47, 38, 30, .3);
}

.Jaune {
    background-color: var(--odv-jaune);
}

.Vert {
    background-color: var(--odv-vert);
}

.Bleu {
    background-color: var(--odv-bleu);
}

.Rouge {
    background-color: var(--odv-rouge);
}

.Violet {
    background-color: var(--odv-violet);
}

/* La planche de cartes : la fiche du héros d'abord, ses capacités
   ensuite, toutes à la même taille. */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .8em;
    margin-top: 1.2em;
}

.gallery .thumb {
    width: 100%;
    aspect-ratio: 63 / 88;
    object-fit: cover;
    border-radius: var(--odv-rayon);
    box-shadow: var(--odv-ombre);
    cursor: zoom-in;
    transition: transform var(--odv-transition), box-shadow var(--odv-transition);
    background-color: var(--odv-parchemin-creux);
}

.gallery .thumb:hover {
    transform: translateY(-3px);
    box-shadow: var(--odv-ombre-forte);
}

.gallery .thumb.heroimg {
    box-shadow: 0 0 0 2px var(--odv-or), var(--odv-ombre);
}

.empty {
    text-align: center;
    padding: 2.5em 1em;
    color: var(--odv-encre-douce);
    font-style: italic;
    border: 1px dashed var(--odv-bordure-forte);
    border-radius: var(--odv-rayon-large);
}

/* ---------------------------------------------------------------
   Loupe
   Tout est décrit dans theme.css, que cette page partage avec
   l'encyclopédie. Il ne reste ici que la mise en place : le fond,
   la disposition en colonne et l'ouverture.
   --------------------------------------------------------------- */

.loupe {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loupe.ouverte {
    display: flex;
}

/* ---------------------------------------------------------------
   Écrans étroits
   --------------------------------------------------------------- */

@media (max-width: 700px) {
    .selecteur-page {
        padding: 0 1em 2em;
    }

    .panel {
        padding: 1.3em 1.1em 1.5em;
    }

    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    .toolbar button {
        flex: 1 1 100%;
    }
}