/**
 * THÈME — habillage visuel de l'encyclopédie.
 *
 * Même principe que « CreateurDeCartes/CSS/theme.css » : ce fichier est chargé
 * après « style.css » et ne fait que surcharger l'apparence. Le supprimer (ou
 * retirer sa balise <link> dans index.php) suffit à retrouver exactement
 * l'aspect précédent — aucun HTML ni JavaScript n'en dépend.
 *
 * Parti pris : la même palette que l'atelier de création — parchemin, encre
 * brune et or, reprise du gabarit des cartes — pour que les trois outils du
 * site se lisent comme une seule famille.
 */

/* ===============================================================
   1. Jetons de style
   =============================================================== */

:root {
    /* Le texte d'une carte est rgb(50,40,32) sur un fond rgb(233,219,199). */
    --odv-encre: #2f261e;
    --odv-encre-douce: #6b5f51;
    --odv-encre-pale: #9a8d7c;
    --odv-parchemin: #f4f0e7;
    --odv-parchemin-creux: #ebe5d8;
    --odv-panneau: #fffdf9;
    --odv-bordure: #ddd4c4;
    --odv-bordure-forte: #c4b8a2;
    --odv-or: #a67c3d;
    --odv-or-clair: #c39a54;
    --odv-or-voile: rgba(166, 124, 61, .16);
    --odv-nuit: #1a1613;

    /* Couleurs de gemmes, reprises des cartes. */
    --odv-rouge: #a8332c;
    --odv-bleu: #2f6ea8;
    --odv-vert: #2f7d44;
    --odv-jaune: #c8a22b;
    --odv-violet: #6f3f96;

    --odv-rayon: 3px;
    --odv-rayon-large: 6px;
    --odv-ombre: 0 1px 2px rgba(47, 38, 30, .06), 0 4px 16px rgba(47, 38, 30, .06);
    --odv-ombre-forte: 0 2px 4px rgba(47, 38, 30, .08), 0 12px 32px rgba(47, 38, 30, .12);
    --odv-transition: 140ms ease;

    --odv-largeur: 1400px;
}

/* ===============================================================
   2. Fond et rythme général
   Le blanc-gris #f4f4f4 sous des bandeaux noirs pleine largeur
   donnait une page en tranches. On pose un fond parchemin, et les
   surfaces réellement claires deviennent les cartes elles-mêmes.
   =============================================================== */

/* Ces quelques règles de base sont volontairement répétées ici : les pages
   d'outils (SelecteurHeros.php) chargent ce fichier sans style.css, et
   doivent donc y trouver la remise à zéro et la mise en page de la coque. */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--odv-parchemin) !important;
    color: var(--odv-encre);
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}

/* ===============================================================
   3. Bandeau de titre
   =============================================================== */

/* Le bandeau porte le logo seul — « L'Ordre de Veiel », sans sous-titre — et
   c'est la page qui écrit en dessous le nom de l'outil. Une seule image sert
   ainsi les trois outils du site ; changer le logo ne demande plus de
   refabriquer trois bandeaux. */
h1 {
    background-color: var(--odv-nuit) !important;
    /* Un filet doré très fin sépare le bandeau du contenu, comme la
       tranche dorée d'un livre. */
    border-bottom: 1px solid rgba(166, 124, 61, .45);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
    padding: 1.5em 1.5em 1.4em !important;
    margin: 0;
    text-align: center;
    line-height: normal;
    font-weight: 400;
}

#banner,
.entete-logo {
    display: block;
    width: min(430px, 78%);
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0 auto !important;
}

.entete-sous-titre {
    display: block;
    margin-top: .95em;
    font-family: Georgia, "Iowan Old Style", serif;
    font-size: clamp(.66rem, 1.5vw, .85rem);
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(233, 219, 199, .72);
    /* L'interlettrage ajoute une espace après la dernière lettre : sans ce
       rattrapage, la ligne paraît décalée d'un cran vers la gauche. */
    text-indent: .3em;
}

/* ===============================================================
   4. Titres de section
   Chaque filtre était précédé d'une barre noire pleine largeur : six
   barres empilées écrasaient la page. Elles deviennent des intertitres
   à filets, discrets mais parfaitement repérables.
   =============================================================== */

h2 {
    background: none !important;
    color: var(--odv-encre) !important;
    font-family: Georgia, "Iowan Old Style", serif;
    font-size: 1.05em;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 1.2em;
    max-width: var(--odv-largeur);
    margin: 3em auto 1.2em !important;
    padding: 0 1.5em !important;
}

h2::before,
h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--odv-bordure-forte));
}

h2::after {
    background: linear-gradient(to left, transparent, var(--odv-bordure-forte));
}

/* Les trois bandeaux d'information ne sont pas des titres de section :
   ils redeviennent des encarts, centrés et de largeur naturelle. */
#noFilterBanner,
#noResultBanner,
#numberOfResultsBanner {
    /* Surtout pas de « !important » ici : le JavaScript affiche et masque
       ces bandeaux avec un style en ligne, qu'un !important rendrait
       inopérant — ils resteraient visibles en permanence. Le sélecteur
       d'identifiant l'emporte déjà sur la règle « h2 ». */
    display: block;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 1em;
    width: fit-content;
    max-width: min(90%, 46em);
    margin: 2em auto !important;
    padding: .85em 1.6em !important;
    border-radius: var(--odv-rayon-large);
    text-align: center;
    border: 1px solid var(--odv-bordure);
    background-color: var(--odv-panneau) !important;
    box-shadow: var(--odv-ombre);
}

#noFilterBanner::before,
#noFilterBanner::after,
#noResultBanner::before,
#noResultBanner::after,
#numberOfResultsBanner::before,
#numberOfResultsBanner::after {
    display: none;
}

/* Le rouge vif et le jaune moutarde d'origine hurlaient pour dire
   « commencez à filtrer ». Un liseré suffit. */
h2.error {
    background-color: var(--odv-panneau) !important;
    border-left: 3px solid var(--odv-or) !important;
    color: var(--odv-encre-douce) !important;
    font-style: italic;
}

h2.warning {
    background-color: #fdf6e6 !important;
    border-left: 3px solid #c29d0c !important;
    color: #7a6410 !important;
}

#numberOfResultsBanner u {
    text-decoration: none;
    font-weight: 700;
    color: var(--odv-or);
}

/* ===============================================================
   4 bis. Réinitialisation des filtres
   Les filtres sont mémorisés d'une visite à l'autre : il faut donc un
   moyen visible de tout effacer, sans avoir à remonter la page.
   =============================================================== */

.barre-filtres {
    display: flex;
    justify-content: center;
    padding: 0 1.5em;
    margin: 1.2em auto;
}

/* Le bouton du haut sert d'introduction à la première section : inutile d'y
   ajouter les 3 em que porte d'ordinaire un intertitre, sinon le bouton
   flotte tout seul au milieu d'un grand vide. */
.barre-filtres+h2 {
    margin-top: 1.2em !important;
}

/* Même chose en bas, avant le pied de page. */
.barre-filtres+.contact-links {
    margin-top: 1.6em;
}

/* Tant qu'aucune carte n'est affichée, la galerie garde son rembourrage et
   creuse 40 px entre le bandeau d'information et le bouton. */
#gallery:empty {
    padding: 0 !important;
}

.btn-reinitialiser {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-family: Georgia, "Iowan Old Style", serif;
    font-size: .88em;
    padding: .45em 1.1em;
    color: var(--odv-encre-douce);
    background-color: transparent;
    border: 1px solid var(--odv-bordure-forte);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--odv-transition), border-color var(--odv-transition),
        color var(--odv-transition);
}

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

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

/* ===============================================================
   5. Extensions
   =============================================================== */

.extensions {
    max-width: var(--odv-largeur);
    margin: 0 auto;
    gap: 1.5em !important;
    padding: 0 1.5em 1em !important;
}

.top-row,
.bottom-row {
    gap: 1em !important;
}

/* La rangée du bas était une grille à nombre de colonnes fixe, réglée par
   quatre paliers de media queries : sur un grand écran, huit vignettes de
   130 px flottaient au milieu de colonnes de 300 px, et l'ensemble occupait
   plus d'un écran de haut. Une simple rangée qui se replie fait le même
   travail à toutes les largeurs, sans palier à maintenir. Toutes les
   vignettes ont par ailleurs été réduites d'un bon quart. */
.bottom-row {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}

.ext-card {
    display: flex;
    flex-direction: column;
    width: 130px;
    padding: 7px !important;
    border: 1px solid transparent;
    border-radius: var(--odv-rayon-large) !important;
    transition: transform var(--odv-transition), box-shadow var(--odv-transition),
        border-color var(--odv-transition), background-color var(--odv-transition);
}

/* Deux visuels sont en format paysage (le jeu de base et les Archives
   oubliées, 736 × 525), les huit autres en portrait (525 × 736). C'est la
   raison d'être des deux rangées du HTML. La rangée du haut reçoit les
   dimensions transposées — 182 × 130 contre 130 × 182 — pour que les dix
   vignettes occupent la même surface apparente sans qu'aucune image ne
   soit rognée. */
.top-row .ext-card {
    width: 182px;
}

.ext-card img {
    /* Le format exact des visuels : le cadrage ne rogne donc rien, il ne
       sert qu'à garantir des rangées parfaitement alignées. */
    aspect-ratio: 525 / 736;
    object-fit: cover;
    border-radius: var(--odv-rayon) !important;
    box-shadow: none !important;
    /* 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);
}

.top-row .ext-card img {
    aspect-ratio: 736 / 525;
}

.ext-card span {
    display: block;
    font-family: Georgia, serif;
    font-size: .8em;
    line-height: 1.3;
    color: var(--odv-encre-douce);
    margin: .5em 0 0 !important;
    transition: color var(--odv-transition);
}

.ext-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--odv-ombre-forte) !important;
    border-color: var(--odv-bordure);
    background-color: var(--odv-panneau);
}

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

.ext-card.selected {
    background-color: var(--odv-panneau) !important;
    border-color: var(--odv-or) !important;
    box-shadow: 0 0 0 1px var(--odv-or), var(--odv-ombre) !important;
}

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

.ext-card.selected span {
    color: var(--odv-encre);
    font-weight: 700;
}

/* ===============================================================
   6. Filtres textuels (catégories, sous-catégories)
   Les pastilles gris anthracite sur fond clair faisaient une masse
   compacte. On passe à des étiquettes à filet, dans l'esprit des
   onglets d'un classeur.
   =============================================================== */

.filters,
.subfilters {
    max-width: var(--odv-largeur);
    margin: 0 auto 1em !important;
    padding: 0 1.5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5em;
}

/* On vise les deux classes plutôt que « .filters button ».
   Les filtres de portée et de type portent eux aussi la classe « filters »
   sur leur conteneur : le rayon de 999 px destiné aux pastilles s'appliquait
   donc à leurs boutons, qui se retrouvaient en ovales, et le rembourrage
   écrasait les pictogrammes. */
.category,
.subCategory {
    background: var(--odv-panneau) !important;
    color: var(--odv-encre-douce) !important;
    border: 1px solid var(--odv-bordure) !important;
    border-radius: 999px !important;
    padding: .42em 1.05em !important;
    margin: 0 !important;
    font-family: Georgia, serif;
    font-size: .92em !important;
    letter-spacing: .01em;
    transition: color var(--odv-transition), border-color var(--odv-transition),
        background-color var(--odv-transition), box-shadow var(--odv-transition);
}

/* « :not(.selected) » est indispensable : le sélecteur de survol est plus
   spécifique que celui de l'état retenu, si bien qu'il lui reprenait sa
   couleur de texte — de l'encre sur un fond d'encre. Survoler une pastille
   déjà cochée la rendait illisible. */
.category:hover:not(.locked):not(.selected),
.subCategory:hover:not(.locked):not(.selected) {
    color: var(--odv-encre) !important;
    border-color: var(--odv-bordure-forte) !important;
    box-shadow: var(--odv-ombre);
}

/* Une pastille retenue garde ses couleurs au survol ; elle s'éclaircit
   simplement, ce qui marche aussi bien sur l'encre que sur les gemmes. */
.category.selected:hover,
.subCategory.selected:hover {
    filter: brightness(1.3);
}

.category.selected,
.subCategory.selected {
    background-color: var(--odv-encre) !important;
    border-color: var(--odv-encre) !important;
    color: var(--odv-parchemin) !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

.category.locked,
.subCategory.locked {
    background-color: transparent !important;
    border-color: var(--odv-bordure) !important;
    border-style: dashed !important;
    color: var(--odv-encre-pale) !important;
    opacity: .7;
}

/* Les sous-filtres de couleur portent enfin leur couleur.
   Attention : style.css visait « [data-sub] », un attribut que le
   JavaScript n'écrit nulle part (Encyclopedia.js pose « data-filter »).
   Ces règles étaient donc mortes depuis longtemps ; on vise le bon
   attribut, et on teinte en gemme plutôt qu'en aplat saturé. */
.subfilters button[data-filter="Rouge"] {
    color: var(--odv-rouge) !important;
    border-color: rgba(168, 51, 44, .35) !important;
    background-color: rgba(168, 51, 44, .05) !important;
}

.subfilters button[data-filter="Bleu"] {
    color: var(--odv-bleu) !important;
    border-color: rgba(47, 110, 168, .35) !important;
    background-color: rgba(47, 110, 168, .05) !important;
}

.subfilters button[data-filter="Vert"] {
    color: var(--odv-vert) !important;
    border-color: rgba(47, 125, 68, .35) !important;
    background-color: rgba(47, 125, 68, .05) !important;
}

.subfilters button[data-filter="Violet"] {
    color: var(--odv-violet) !important;
    border-color: rgba(111, 63, 150, .35) !important;
    background-color: rgba(111, 63, 150, .05) !important;
}

.subfilters button[data-filter="Jaune"] {
    color: #8a6f10 !important;
    border-color: rgba(200, 162, 43, .45) !important;
    background-color: rgba(200, 162, 43, .07) !important;
}

.subfilters button[data-filter="Incolore"] {
    color: var(--odv-encre-douce) !important;
    border-color: var(--odv-bordure-forte) !important;
    background-color: var(--odv-parchemin-creux) !important;
}

.subfilters button[data-filter="Rouge"]:hover:not(.locked):not(.selected) {
    background-color: rgba(168, 51, 44, .12) !important;
}

.subfilters button[data-filter="Bleu"]:hover:not(.locked):not(.selected) {
    background-color: rgba(47, 110, 168, .12) !important;
}

.subfilters button[data-filter="Vert"]:hover:not(.locked):not(.selected) {
    background-color: rgba(47, 125, 68, .12) !important;
}

.subfilters button[data-filter="Violet"]:hover:not(.locked):not(.selected) {
    background-color: rgba(111, 63, 150, .12) !important;
}

.subfilters button[data-filter="Jaune"]:hover:not(.locked):not(.selected) {
    background-color: rgba(200, 162, 43, .18) !important;
}

.subfilters button[data-filter="Incolore"]:hover:not(.locked):not(.selected) {
    background-color: var(--odv-bordure) !important;
}

/* Une fois retenu, un sous-filtre de couleur passe en aplat plein :
   c'est le seul moyen de distinguer « bleu disponible » de
   « bleu sélectionné » sans lire le contour. */
.subfilters button[data-filter="Rouge"].selected {
    background-color: var(--odv-rouge) !important;
    border-color: var(--odv-rouge) !important;
    color: #fff !important;
}

.subfilters button[data-filter="Bleu"].selected {
    background-color: var(--odv-bleu) !important;
    border-color: var(--odv-bleu) !important;
    color: #fff !important;
}

.subfilters button[data-filter="Vert"].selected {
    background-color: var(--odv-vert) !important;
    border-color: var(--odv-vert) !important;
    color: #fff !important;
}

.subfilters button[data-filter="Violet"].selected {
    background-color: var(--odv-violet) !important;
    border-color: var(--odv-violet) !important;
    color: #fff !important;
}

.subfilters button[data-filter="Jaune"].selected {
    background-color: var(--odv-jaune) !important;
    border-color: var(--odv-jaune) !important;
    color: #3a2f08 !important;
}

.subfilters button[data-filter="Incolore"].selected {
    background-color: var(--odv-encre-douce) !important;
    border-color: var(--odv-encre-douce) !important;
    color: var(--odv-parchemin) !important;
}

/* « Boss » n'est pas une sous-catégorie comme les autres : c'est celle
   que l'on cherche le plus souvent. */
.subfilters button[data-filter="Boss"] {
    font-variant: small-caps;
    letter-spacing: .06em;
    border-color: var(--odv-or) !important;
    color: var(--odv-or) !important;
}

.subfilters button[data-filter="Boss"].selected {
    background-color: var(--odv-or) !important;
    border-color: var(--odv-or) !important;
    color: #fff !important;
}

.subfilters button[data-filter="Boss"].locked {
    border-color: var(--odv-bordure) !important;
    color: var(--odv-encre-pale) !important;
}

/* Le trait noir plein qui séparait catégories et sous-catégories coupait
   la page en deux. Il s'estompe vers les bords, comme une réglure. */
.divider>div {
    height: 1px !important;
    width: min(420px, 60%) !important;
    margin: .4em auto 1.4em !important;
    background: linear-gradient(to right, transparent, var(--odv-bordure-forte), transparent) !important;
}

/* ===============================================================
   7. Filtres à icône (portée, type)
   =============================================================== */

.rangeFilters,
.typeFilters {
    gap: .5em !important;
}

.range,
.type {
    background-color: var(--odv-panneau) !important;
    border: 1px solid var(--odv-bordure) !important;
    border-radius: var(--odv-rayon-large) !important;
    box-shadow: none !important;
    /* style.css pose « margin: .2em » sur tout bouton de filtre. Cette marge
       s'ajoutait à la gouttière de la rangée, qui se retrouvait à 13 px au
       lieu de 8 — assez pour rejeter la treizième portée à la ligne. */
    margin: 0 !important;
}

/* Les pictogrammes de portée sont des diagrammes de grille : une case y
   mesure 29 px, et toutes les images font 107 px de haut. Réduits à 40 px
   dans un bouton carré de 58, « Soi-même » se résumait à un carré de onze
   pixels — parfaitement illisible.
   Le bouton adopte donc le format des images (146 × 107) et l'icône est
   contrainte par sa HAUTEUR, pas ajustée à la boîte : c'est la seule façon
   d'obtenir la même taille de case d'une icône à l'autre. Sans cela,
   « Soi-même » et « Infini », dont l'image est moins large, s'afficheraient
   un tiers plus gros que leurs voisines. */
/* 86 px : les quatorze portées tiennent alors sur une seule ligne jusqu'à
   1 320 px de large, sans qu'une case se retrouve seule en dessous. */
.range {
    width: 86px !important;
    height: 72px !important;
}

.range img {
    width: auto !important;
    height: 56px !important;
    max-width: 100%;
}

/* Les icônes de type sont carrées et remplissent bien leur cadre : elles
   n'ont besoin que d'un peu plus de place. */
.type {
    width: 72px !important;
    height: 72px !important;
}

.type img {
    width: auto !important;
    height: 54px !important;
    max-width: 100%;
}

/* Les pictogrammes sont dessinés en crème : ils sont découpés pour le fond
   sombre des cartes. Posés tels quels sur un bouton clair, ils étaient tout
   simplement invisibles — c'était déjà le cas sur fond blanc. On les teinte
   donc en encre par défaut, et on ne les laisse en crème que sur le bouton
   sélectionné, qui est sombre. */
.range img,
.type img {
    filter: brightness(42%) sepia(38%) saturate(120%) hue-rotate(340deg) contrast(95%);
    transition: filter var(--odv-transition), opacity var(--odv-transition);
}

.range:hover:not(.locked),
.type:hover:not(.locked) {
    transform: translateY(-2px) !important;
    border-color: var(--odv-bordure-forte) !important;
    box-shadow: var(--odv-ombre) !important;
}

.range.selected,
.type.selected {
    background-color: var(--odv-encre) !important;
    border-color: var(--odv-encre) !important;
    box-shadow: none !important;
}

.range.selected>img,
.type.selected>img {
    filter: none !important;
}

.range.selected .no-icon-glyph,
.type.selected .no-icon-glyph {
    color: var(--odv-parchemin);
    filter: none !important;
}

.range.locked,
.type.locked {
    background-color: transparent !important;
    border-style: dashed !important;
    border-color: var(--odv-bordure) !important;
}

.range.locked img,
.type.locked img {
    opacity: .22 !important;
    filter: grayscale(1) brightness(40%) !important;
}

.no-icon-glyph {
    color: var(--odv-encre-douce);
    font-size: 38px;
}

.range.locked .no-icon-glyph,
.type.locked .no-icon-glyph {
    color: var(--odv-bordure-forte);
}

/* ===============================================================
   8. Recherche
   =============================================================== */

.input-wrapper {
    margin: 0 auto 1.2em !important;
    padding: 0 1.5em;
}

.sexy-input {
    width: min(640px, 100%);
    padding: .8em 1.1em !important;
    font-family: Georgia, serif;
    font-size: 1em !important;
    color: var(--odv-encre);
    border: 1px solid var(--odv-bordure-forte) !important;
    border-radius: var(--odv-rayon) !important;
    background-color: var(--odv-panneau) !important;
    box-shadow: none !important;
    transition: border-color var(--odv-transition), box-shadow var(--odv-transition) !important;
}

.sexy-input::placeholder {
    color: var(--odv-encre-pale);
    font-style: italic;
}

.sexy-input:focus {
    border-color: var(--odv-or) !important;
    box-shadow: 0 0 0 3px var(--odv-or-voile) !important;
}

/* Les deux cases à cocher portaient une phrase entière chacune, alignée
   au ras de la case. On les met en colonne, à largeur de lecture. */
/* Chaque case se centrait pour son propre compte : les deux lignes ne
   partageaient donc aucun alignement. Elles sont désormais calées à
   gauche d'un même bloc, lui-même centré. */
.checkbox-wrapper-37 {
    justify-content: flex-start !important;
    max-width: 780px;
    margin: 0 auto .7em !important;
    padding: 0 1.5em;
}

.checkbox-wrapper-37 .terms-label {
    align-items: flex-start !important;
    gap: .2em;
}

/* Tant qu'elle n'est pas cochée, la case est entièrement dessinée par une
   animation de tracé : elle était donc invisible, et rien n'indiquait
   qu'il y avait quelque chose à cocher. Un filet permanent règle le cas
   sans toucher à l'animation. */
.checkbox-wrapper-37 .checkbox-svg {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px;
    margin-top: .15em;
    border: 1px solid var(--odv-bordure-forte);
    border-radius: 2px;
    background-color: #fff;
    transition: border-color var(--odv-transition);
}

.checkbox-wrapper-37 .terms-label:hover .checkbox-svg {
    border-color: var(--odv-or);
}

.checkbox-wrapper-37 input[type="checkbox"]:checked+.terms-label .checkbox-svg {
    border-color: var(--odv-or);
}

.checkbox-wrapper-37 .checkbox-box {
    fill: var(--odv-panneau) !important;
    stroke: var(--odv-or) !important;
}

.checkbox-wrapper-37 .checkbox-tick {
    stroke: var(--odv-or) !important;
}

.checkbox-wrapper-37 .label-text {
    font-size: .9em;
    line-height: 1.45;
    color: var(--odv-encre-douce);
    margin-left: .75em !important;
}

.checkbox-wrapper-37 input[type="checkbox"]:checked+.terms-label .label-text {
    color: var(--odv-encre);
}

/* Un peu d'air avant la première case. */
#exactSearch+.terms-label {
    margin-top: .4em;
}

/* ===============================================================
   9. Galerie de cartes
   =============================================================== */

.gallery {
    max-width: var(--odv-largeur);
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.4em !important;
    padding: .5em 1.5em 2em !important;
}

.card {
    background: transparent !important;
    border-radius: var(--odv-rayon-large) !important;
    box-shadow: var(--odv-ombre) !important;
    transition: transform var(--odv-transition), box-shadow var(--odv-transition) !important;
}

.card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--odv-ombre-forte) !important;
}

/* ===============================================================
   10. Pagination
   =============================================================== */

.pagination {
    gap: .15em;
    margin: 1.2em auto !important;
    flex-wrap: wrap;
    padding: 0 1.5em;
}

.pagination div,
.pagination a {
    color: var(--odv-encre-douce);
    font-family: Georgia, serif;
    min-width: 2.4em;
    padding: .45em .7em !important;
    text-align: center;
    border-radius: var(--odv-rayon);
    border: 1px solid transparent;
    transition: color var(--odv-transition), border-color var(--odv-transition),
        background-color var(--odv-transition) !important;
}

.pagination a:hover:not(.active),
.perPageArrow:hover:not(.locked) {
    background-color: transparent !important;
    border-color: var(--odv-bordure-forte);
    color: var(--odv-encre);
}

.pagination a.active {
    background-color: var(--odv-encre) !important;
    border-color: var(--odv-encre) !important;
    color: var(--odv-parchemin) !important;
    box-shadow: none !important;
    font-weight: 700;
}

.perPageArrow {
    font-size: 1.2em;
    line-height: 1;
}

/* ===============================================================
   11. Fenêtre d'agrandissement
   =============================================================== */

/* LOUPE — dispositif partagé avec le tirage aléatoire et le recommandeur.
   Les mêmes valeurs se retrouvent dans TirageAleatoire/CSS/tirage.css : les
   deux projets sont indépendants, mais la loupe doit se comporter et se lire
   exactement pareil d'un outil à l'autre. */
.modal,
.loupe {
    background-color: rgba(26, 22, 19, .85) !important;
    backdrop-filter: blur(3px);
    gap: clamp(.8em, 2.5vw, 1.2em) !important;
    /* Une marge franche, même sur téléphone : sans elle la carte touchait
       les bords de l'écran et les flèches sortaient par le bas. */
    padding: clamp(1em, 4vw, 2.5em);
    cursor: zoom-out;
    overscroll-behavior: contain;
}

/* L'image prend la hauteur qui reste une fois la légende et les flèches
   posées — jamais davantage. « min-height: 0 » est ce qui autorise un
   élément de flexbox à devenir plus petit que son contenu. */
.loupe-cadre {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loupe-cadre img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    /* Sans quoi un balayage attrape l'image et déclenche le glisser-déposer
       du navigateur au lieu de faire défiler les cartes. */
    -webkit-user-drag: none;
}

.loupe-legende {
    flex: 0 0 auto;
    color: var(--odv-parchemin);
    font-size: clamp(.85rem, 2vw, .95rem);
    letter-spacing: .02em;
    text-align: center;
    max-width: 40em;
}

.popupArrowHolder,
.loupe-fleches {
    flex: 0 0 auto;
    display: flex;
    gap: 1.5em !important;
    margin-bottom: 0 !important;
}

.popupArrow,
.loupe-fleche {
    background-color: rgba(255, 253, 249, .92) !important;
    color: var(--odv-encre);
    border: none;
    border-radius: 50% !important;
    width: 2.6em;
    height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em !important;
    line-height: 1;
    padding: 0 !important;
    cursor: pointer;
    transition: background-color var(--odv-transition), transform var(--odv-transition);
}

.popupArrow:hover:not(.locked),
.loupe-fleche:hover:not(:disabled) {
    background-color: var(--odv-or) !important;
    color: #fff;
    transform: scale(1.08);
}

.popupArrow.locked,
.loupe-fleche:disabled {
    opacity: .35;
    cursor: default;
}

/* Sur écran tactile, les flèches restent — mais le balayage marche aussi. */
.loupe-aide {
    flex: 0 0 auto;
    display: none;
    font-size: .78rem;
    letter-spacing: .04em;
    color: rgba(233, 219, 199, .5);
}

@media (hover: none) {
    .loupe-aide {
        display: block;
    }
}

/* ===============================================================
   12. Pied de page
   =============================================================== */

.contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: var(--odv-parchemin-creux) !important;
    border-top: 1px solid var(--odv-bordure) !important;
    /* Un filet doré rappelle celui du bandeau, en écho de fin de page. */
    box-shadow: inset 0 1px 0 var(--odv-or-voile);
    padding: 2.5em 1.5em 3em !important;
    gap: .6em !important;
    margin-top: 3em;
}

.contact-links .btn {
    display: flex;
    align-items: center;
    gap: .5em;
    text-decoration: none;
    background-color: transparent !important;
    color: var(--odv-encre-douce) !important;
    border: 1px solid var(--odv-bordure-forte);
    border-radius: var(--odv-rayon) !important;
    font-family: Georgia, serif;
    font-weight: 400 !important;
    font-size: .88rem !important;
    padding: .5em 1em !important;
    box-shadow: none !important;
    transition: background-color var(--odv-transition), color var(--odv-transition),
        border-color var(--odv-transition), transform var(--odv-transition) !important;
}

.contact-links .btn:hover {
    background-color: var(--odv-encre) !important;
    border-color: var(--odv-encre) !important;
    color: var(--odv-parchemin) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--odv-ombre) !important;
}

/* Les liens vers les deux autres outils du site ne sont pas des liens de
   contact : ils passent en premier plan, en or. */
.contact-links .btn.tool-link {
    background-color: var(--odv-or) !important;
    border-color: var(--odv-or) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.contact-links .btn.tool-link:hover {
    background-color: var(--odv-encre) !important;
    border-color: var(--odv-encre) !important;
    color: var(--odv-parchemin) !important;
}

/* ===============================================================
   13. Écrans étroits
   =============================================================== */

@media (max-width: 900px) {
    h2 {
        margin: 2.2em auto .9em !important;
        font-size: .95em;
        gap: .8em;
    }

    .ext-card {
        width: 100%;
        max-width: 130px;
    }

    .top-row .ext-card {
        max-width: 182px;
    }

    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1em !important;
        padding: .5em 1em 2em !important;
    }

    .range {
        width: 80px !important;
        height: 64px !important;
    }

    .range img {
        height: 50px !important;
    }

    .type {
        width: 64px !important;
        height: 64px !important;
    }

    .type img {
        height: 46px !important;
    }

    .checkbox-wrapper-37 .label-text {
        font-size: .85em;
    }
}

@media (max-width: 560px) {
    h1 {
        padding: 1.2em .8em 1.1em !important;
    }

    #banner,
    .entete-logo {
        width: 88%;
    }

    .entete-sous-titre {
        letter-spacing: .2em;
        text-indent: .2em;
        margin-top: .8em;
    }

    .filters,
    .subfilters {
        gap: .35em;
        padding: 0 1em;
    }

    .filters button,
    .subfilters button {
        font-size: .82em !important;
        padding: .35em .8em !important;
    }
}