/* ─────────────────────────────────────────────────────────────────────
   around-radius.css
   Curseur "rayon de recherche" de la section « Autour de {ville} ».
   Markup : rk_around_render_control() (libs/utilities.lib.php)
   Comportement : js/around-radius.js

   Palette alignée sur les cartes .rkf-* (carrousel-restaurants.css),
   mais autonome : la feuille est chargée par la section elle-même, quel
   que soit le gabarit appelant.
   ───────────────────────────────────────────────────────────────────── */
.rk-around{ position:relative; }

.rk-around-ctl{
    --rka-ink:#0e0e0c;
    --rka-ink-3:#7a7a73;
    --rka-line:rgba(14,14,12,.12);
    --rka-surf:#f7f6f2;
    --rka-rose:#c9114f;
    --rka-sans:'Inter Tight',system-ui,-apple-system,sans-serif;

    /* Affiché uniquement quand le JS a pris la main : sans lui le curseur
       ne pourrait rien recharger. */
    display:none;
    position:relative;
    margin:28px 0 6px;
    padding:16px 20px 34px;
    border:1px solid var(--rka-line);
    border-radius:14px;
    background:var(--rka-surf);
    font-family:var(--rka-sans);
    color:var(--rka-ink);
    box-sizing:border-box;
}
.rk-around-ctl.is-on{ display:block; }
.rk-around-ctl *,
.rk-around-ctl *::before,
.rk-around-ctl *::after{ box-sizing:border-box; }

.rk-around-ctl__top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin:0 0 14px;
}
.rk-around-ctl__lbl{
    font:500 11px/1 var(--rka-sans);
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--rka-rose);
}
.rk-around-ctl__val{
    font:400 14px/1.3 var(--rka-sans);
    color:var(--rka-ink-3);
}
.rk-around-ctl__km{
    font-weight:700;
    font-size:17px;
    color:var(--rka-ink);
}

.rk-around-ctl__track{ position:relative; }

/* ─── Piste ─── */
.rk-around-ctl__range{
    -webkit-appearance:none;
    appearance:none;
    display:block;
    width:100%;
    height:22px;
    margin:0;
    padding:0;
    background:transparent;
    cursor:pointer;
    touch-action:pan-y;
}
.rk-around-ctl__range:focus{ outline:none; }
.rk-around-ctl__range:focus-visible{ outline:2px solid var(--rka-rose); outline-offset:4px; border-radius:8px; }

.rk-around-ctl__range::-webkit-slider-runnable-track{
    height:6px;
    border-radius:99px;
    background:linear-gradient(90deg,var(--rka-rose) 0,var(--rka-rose) var(--rk-around-p,0%),rgba(14,14,12,.13) var(--rk-around-p,0%),rgba(14,14,12,.13) 100%);
}
.rk-around-ctl__range::-moz-range-track{
    height:6px;
    border-radius:99px;
    background:rgba(14,14,12,.13);
}
.rk-around-ctl__range::-moz-range-progress{
    height:6px;
    border-radius:99px;
    background:var(--rka-rose);
}
.rk-around-ctl__range::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:22px;
    height:22px;
    margin-top:-8px;
    border:3px solid #fff;
    border-radius:50%;
    background:var(--rka-rose);
    box-shadow:0 2px 6px rgba(14,14,12,.28);
    transition:transform .12s ease;
}
.rk-around-ctl__range::-moz-range-thumb{
    width:22px;
    height:22px;
    border:3px solid #fff;
    border-radius:50%;
    background:var(--rka-rose);
    box-shadow:0 2px 6px rgba(14,14,12,.28);
}
.rk-around-ctl__range:active::-webkit-slider-thumb{ transform:scale(1.12); }

/* ─── Repères sous la piste (échelle non linéaire au-delà de 50 km) ─── */
.rk-around-ctl__scale{
    position:absolute;
    top:26px;
    left:0;
    right:0;
    height:14px;
    pointer-events:none;
}
.rk-around-ctl__scale span{
    position:absolute;
    transform:translateX(-50%);
    font:500 11px/1 var(--rka-sans);
    color:var(--rka-ink-3);
    white-space:nowrap;
}
.rk-around-ctl__scale span:first-child{ transform:none; }
.rk-around-ctl__scale span:last-child{ transform:translateX(-100%); }

/* ─── Chargement ─── */
.rk-around-ctl__spin{
    position:absolute;
    top:16px;
    right:20px;
    width:16px;
    height:16px;
    border:2px solid rgba(14,14,12,.18);
    border-top-color:var(--rka-rose);
    border-radius:50%;
    opacity:0;
    transition:opacity .15s ease;
}
.rk-around.is-loading .rk-around-ctl__spin{
    opacity:1;
    animation:rk-around-spin .7s linear infinite;
}
.rk-around.is-loading .rk-around__body{
    opacity:.45;
    transition:opacity .15s ease;
    pointer-events:none;
}
@keyframes rk-around-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
    .rk-around.is-loading .rk-around-ctl__spin{ animation:none; }
}

.rk-around-empty{
    margin:24px 0;
    padding:18px 20px;
    border:1px dashed rgba(14,14,12,.18);
    border-radius:12px;
    font:400 15px/1.5 'Inter Tight',system-ui,sans-serif;
    color:#7a7a73;
}

/* ─── Loge dans l'en-tete du carrousel, a droite du titre ───
   Le JS (js/around-radius.js) deplace le bloc dans .rkf-top-head, qui est un
   flex align-items:flex-end / justify-content:space-between avec flex-wrap :
   le curseur s'y insere entre le titre et les fleches, et passe tout seul
   sous le titre quand la place manque. */
.rk-around-ctl.is-inline{
    flex:0 1 320px;
    margin:0;
    padding:12px 16px 30px;
}
/* Le bloc de titre est dimensionne par son contenu (max-width:760px) : sans
   base plus souple, l'en-tete renverrait les fleches a la ligne des qu'on y
   glisse le curseur. */
.rkf-top-head--with-ctl .rkf-top-head-txt{
    flex:1 1 320px;
    min-width:0;
    max-width:none;
}
.rk-around-ctl.is-inline .rk-around-ctl__top{ margin-bottom:12px; }
/* "autour de {ville}" fait doublon avec le titre juste a cote. */
.rk-around-ctl.is-inline .rk-around-ctl__where{ display:none; }
.rk-around-ctl.is-inline .rk-around-ctl__spin{ top:12px; right:14px; }

/* Sous 782px les fleches du carrousel disparaissent (carrousel-restaurants.css) :
   le curseur prend toute la largeur, sous le titre. */
@media (max-width:782px){
    .rk-around-ctl.is-inline{
        flex-basis:100%;
        max-width:none;
        order:3;
    }
    .rk-around-ctl.is-inline .rk-around-ctl__where{ display:inline; }
}

@media (max-width:640px){
    .rk-around-ctl{ padding:14px 16px 32px; }
    .rk-around-ctl__val{ font-size:13px; }
}