/******** Compteur de fiches, badge "Filtrer", carte "zéro résultat" ********
   Comportement : scripts/mapCounter.js. Version ordinateur uniquement. */

:root {
    --mc-accent: #E8622F;
    --mc-accent-dark: #D9531F;
    --mc-ink: #3B2A22;
    --mc-muted: #8C756A;
    /* Hauteur d'une ligne de chiffres (= une "case" du compteur), en pixels ENTIERS : le
       chiffre d est décalé de d x cette hauteur. En em (1,3em = 23,4 px) le décalage
       tombait sur des demi-pixels (-23,4 / -46,8...) que le navigateur arrondit
       différemment d'un chiffre à l'autre : le dernier chiffre de « 12 » paraissait 1 px
       plus haut. Doit rester un nombre entier de px. */
    --mc-digit-h: 24px;
}

/* ─── Compteur (barre de navigation, à droite de « Filtrer ») ─── */
#nbFiches {
    margin-left: 10px;
    margin-right: 10px;
    cursor: default;
}
.map-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    height: var(--mc-pill-h, 40px);
    padding: 0 18px;
    border-radius: 999px;
    background: #fff;
    color: var(--mc-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;           /* la largeur est animée par mapCounter.js quand le texte change */
    box-shadow: 0 1px 4px rgba(60, 30, 10, .16);
    transition: box-shadow .25s ease;
}
.map-counter[hidden] { display: none; }

/* Un peu plus marquée quand au moins un filtre est actif : halo clair + ombre */
.map-counter.is-filtered {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 2px 10px rgba(120, 40, 10, .3);
}

/* Chiffres : chaque colonne est une fenêtre d'une ligne sur une bande 0-9 qui "roule" */
.mc-num {
    display: inline-flex;
    color: var(--mc-accent);
    font-size: 18px;            /* 15px x 1,2 ; hauteur de case entière : cf. --mc-digit-h */
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.map-counter.is-zero .mc-num { display: none; }
.mc-col {
    display: block;
    width: 12px;                /* largeur entière : pas de demi-pixel horizontal non plus */
    height: var(--mc-digit-h);
    overflow: hidden;
    text-align: center;
}
/* Bande de chiffres : au repos elle ne contient que le chiffre affiché ; pendant le
   roulement, mapCounter.js y insère les chiffres intermédiaires et anime margin-top
   (cf. commentaire de la section "Chiffres mécaniques" dans mapCounter.js : un chiffre
   décalé de d x 24 px dans une bande 0-9 n'était pas arrondi à l'écran comme son voisin). */
.mc-reel {
    display: block;
    margin-top: 0;
}
.mc-reel > span {
    display: block;
    height: var(--mc-digit-h);
    line-height: var(--mc-digit-h);
}
.mc-label { transition: color .25s ease; }
/* À zéro : « Aucune fiche », sans chiffre, un ton plus discret */
.map-counter.is-zero { color: var(--mc-muted); }

/* Lecteurs d'écran : le texte réel (chiffres/libellé visuels sont aria-hidden) */
.mc-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Changement instantané (prefers-reduced-motion, géré aussi côté JS) */
@media (prefers-reduced-motion: reduce) {
    .mc-reel { transition: none; }
    .map-counter { transition: none; }
}

/* ─── Badge du bouton « Filtrer » : pastille blanche, chiffre orange, à droite de l'icône ─── */
.filter-badge {
    display: inline-block;
    min-width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #fff;
    color: var(--mc-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
}
.filter-badge[hidden] { display: none; }
.filter-badge.is-pop { animation: filterBadgePop .28s ease; }
@keyframes filterBadgePop {
    0%   { transform: scale(.6); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .filter-badge.is-pop { animation: none; }
}

/* ─── Carte "Aucune fiche ne correspond à ces filtres" ───
   Posée sur la carte, non bloquante : seule la carte elle-même capte la souris ;
   elle se ferme au moindre clic, sur Échap ou dès qu'un filtre change. */
.map-zero-card {
    position: fixed;
    top: 76px;
    left: 50%;
    z-index: 1040;
    width: 340px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 18px 20px 20px;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    box-shadow: 0 14px 40px rgba(60, 30, 10, .22), 0 2px 6px rgba(60, 30, 10, .08);
    opacity: 0;
    transform: translate(-50%, -8px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}
.map-zero-card.is-open {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.map-zero-card[hidden] { display: none; }
.map-zero-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #FFF3EC;
    color: var(--mc-accent);
    font-size: 18px;
}
.map-zero-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--mc-ink);
}
.map-zero-text {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--mc-muted);
}
.map-zero-btn {
    border: 0;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    /* Dégradé orange de la charte (même que la barre de navigation) */
    background: linear-gradient(to right, #ff5f6d, #ffc371);
    text-shadow: 0 1px 2px rgba(160, 50, 20, .35);
    box-shadow: 0 3px 10px rgba(255, 95, 109, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.map-zero-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(255, 95, 109, .45); }
.map-zero-btn:focus-visible { outline: 3px solid rgba(232, 98, 47, .45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .map-zero-card, .map-zero-btn { transition: none; }
}