/* ─────────────────────────────────────────────────────────────────────
   carrousel-restaurants.css
   Carrousel de cartes restaurants — markup : template_parts/carrousel-restaurants.php
   Comportement (flèches + rail) : js/carrousel-restaurants.js

   Reprend la direction visuelle du "Top 10 des restaurants en France"
   de la home v2 (.car / .rk-c2), scopée .rkf-top et autonome : toutes
   les couleurs sont en dur, aucune dépendance à accueil-v2.css — la
   feuille peut donc être chargée par n'importe quel gabarit.
   ───────────────────────────────────────────────────────────────────── */
.rkf-top{
    --rkf-ink:#0e0e0c;
    --rkf-ink-2:#3a3a36;
    --rkf-ink-3:#7a7a73;
    --rkf-ink-label:#6b6a63;
    --rkf-cream:#fafaf7;
    --rkf-paper:#fff;
    --rkf-surf2:#f0efe9;
    --rkf-line:rgba(14,14,12,.1);
    --rkf-line-2:rgba(14,14,12,.18);
    --rkf-rose-d:#c9114f;
    --rkf-blue:#49c8f6;
    --rkf-yellow:#f2e73e;
    --rkf-serif:'Source Serif 4',Georgia,serif;
    --rkf-sans:'Inter Tight',system-ui,sans-serif;
    display:block;
    clear:both;
    padding:34px 0 8px;
    font-family:var(--rkf-sans);
    font-size:15px;
    line-height:1.5;
    color:var(--rkf-ink);
    -webkit-font-smoothing:antialiased;
}
.rkf-top *,
.rkf-top *::before,
.rkf-top *::after{ box-sizing:border-box; }
.rkf-top img{ display:block; max-width:100%; }
.rkf-top a{ color:inherit; text-decoration:none; }
.rkf-top button{ font:inherit; cursor:pointer; margin:0; }

/* ─── En-tête de section ─── */
.rkf-top .rkf-top-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    flex-wrap:wrap;
    margin:0 0 26px;
}
.rkf-top .rkf-top-head-txt{ max-width:760px; }
.rkf-top .rkf-eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    font:500 11px/1 var(--rkf-sans);
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--rkf-rose-d);
}
.rkf-top .rkf-eyebrow::after{
    content:"";
    height:1px;
    flex:1;
    min-width:40px;
    background:var(--rkf-line);
}
.rkf-top .rkf-h2{
    margin:14px 0 0;
    padding:0;
    font-family:var(--rkf-serif);
    font-size:clamp(24px,2.8vw,34px);
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.08;
    color:var(--rkf-ink);
    text-align:left;
    text-wrap:pretty;
}
.rkf-top .rkf-sub{
    margin:12px 0 0;
    font-size:15.5px;
    line-height:1.6;
    color:var(--rkf-ink-2);
    max-width:640px;
}

/* ─── Flèches + rail ─── */
.rkf-top .rkf-car-nav{ display:flex; gap:8px; }
.rkf-top .rkf-car-b{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:999px;
    background:var(--rkf-paper);
    border:1px solid var(--rkf-line-2);
    color:var(--rkf-ink);
    transition:background .2s,color .2s,border-color .2s;
}
.rkf-top .rkf-car-b:hover{ background:var(--rkf-ink); color:var(--rkf-cream); border-color:var(--rkf-ink); }
.rkf-top .rkf-car-b[disabled]{ opacity:.34; pointer-events:none; }
.rkf-top .rkf-car-b svg{ transform:rotate(-90deg); }
.rkf-top .rkf-car-b--prev svg{ transform:rotate(90deg); }

.rkf-top .rkf-car{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:4px 4px 20px;
    margin:0 -4px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.rkf-top .rkf-car::-webkit-scrollbar{ display:none; }

.rkf-top .rkf-car-rail{
    margin-top:2px;
    height:3px;
    max-width:300px;
    border-radius:999px;
    background:var(--rkf-line);
    overflow:hidden;
}
.rkf-top .rkf-car-rail i{
    display:block;
    height:100%;
    width:34%;
    border-radius:999px;
    background:var(--rkf-ink);
    transition:margin-left .25s,width .25s;
}

/* ─── Carte restaurant ─── */
.rkf-top .rkf-c{
    position:relative;
    display:flex;
    flex-direction:column;
    width:270px;
    flex-shrink:0;
    scroll-snap-align:start;
    border-radius:16px;
    background:var(--rkf-paper);
    border:1px solid var(--rkf-line);
    overflow:hidden;
    transition:transform .3s,box-shadow .3s;
}
.rkf-top .rkf-c:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 24px -8px rgba(20,15,10,.14),0 2px 6px rgba(20,15,10,.05);
}
/* Fiche en cours de consultation (classement sur une page restaurant). */
.rkf-top .rkf-c--current{
    border-color:var(--rkf-rose-d);
    box-shadow:0 0 0 1px var(--rkf-rose-d);
}
.rkf-top .rkf-c-here{
    display:inline-flex;
    align-items:center;
    height:22px;
    padding:0 9px;
    border-radius:999px;
    background:var(--rkf-rose-d);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.04em;
    color:#fff;
    white-space:nowrap;
}
.rkf-top .rkf-c-hd{
    position:relative;
    aspect-ratio:16/10;
    background:var(--rkf-ink);
    overflow:hidden;
}
.rkf-top .rkf-c-hd>img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.rkf-top .rkf-c:hover .rkf-c-hd>img{ transform:scale(1.05); }
.rkf-top .rkf-c-hd::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(10,8,6,.88),rgba(10,8,6,.18) 58%,rgba(10,8,6,.34));
}
.rkf-top .rkf-c-hd-in{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:12px;
    z-index:1;
}
.rkf-top .rkf-c-hd-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
}
.rkf-top .rkf-c-hd-top-r{ display:flex; align-items:center; gap:7px; flex-shrink:0; }
.rkf-top .rkf-c-hd-bot{ min-width:0; }
.rkf-top .rkf-c-hd-bot h3{
    margin:0;
    padding:0;
    font-family:var(--rkf-serif);
    font-size:18px;
    font-weight:600;
    letter-spacing:-.015em;
    line-height:1.16;
    color:#fff;
    text-align:left;
    text-wrap:pretty;
}
.rkf-top .rkf-c-hd-bot h3 a{ color:#fff; }
.rkf-top .rkf-c-hd-bot h3 a:hover{ text-decoration:underline; }
.rkf-top .rkf-c-city{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:5px;
    font-size:12.5px;
    color:rgba(255,255,255,.86);
}
.rkf-top .rkf-c-city svg{ color:rgba(255,255,255,.7); flex-shrink:0; }
.rkf-top .rkf-c-dist{
    margin-left:auto;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    font-size:11.5px;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
}

.rkf-top .rkf-c-r{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    font-size:14px;
    font-weight:600;
    color:var(--rkf-ink);
    flex-shrink:0;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
.rkf-top .rkf-c-r.m1{ background:var(--rkf-yellow); color:#3a3400; }
.rkf-top .rkf-c-r.m2{ background:#e2e0d8; color:#3a3a36; }
.rkf-top .rkf-c-r.m3{ background:#e8d6c2; color:#4a3a28; }

.rkf-top .rkf-c-illu{
    display:inline-flex;
    align-items:center;
    height:22px;
    padding:0 8px;
    border-radius:999px;
    background:rgba(14,14,12,.5);
    font-size:8.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,.92);
    white-space:nowrap;
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
}
.rkf-top .rkf-c-g{
    display:inline-flex;
    align-items:center;
    gap:5px;
    height:28px;
    padding:0 11px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    font-size:12.5px;
    font-weight:500;
    color:#0d5f7d;
    white-space:nowrap;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
.rkf-top .rkf-c-g svg{ color:#1a86ad; flex-shrink:0; }

.rkf-top .rkf-c-body{
    padding:14px 20px 20px;
    flex:1;
    display:flex;
    flex-direction:column;
}

/* Type de cuisine servi — l'info mise en avant sur cette page. */
.rkf-top .rkf-c-cuis{
    display:flex;
    flex-direction:column;
    gap:7px;
    padding-bottom:14px;
    margin-bottom:14px;
    border-bottom:1px solid var(--rkf-line);
}
.rkf-top .rkf-c-cuis-lbl{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--rkf-ink-label);
}
.rkf-top .rkf-c-cuis-lbl svg{ color:var(--rkf-ink-3); flex-shrink:0; }
.rkf-top .rkf-c-cuis-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.rkf-top .rkf-c-cuis-tags b{
    display:inline-flex;
    align-items:center;
    height:26px;
    padding:0 10px;
    border-radius:999px;
    background:var(--rkf-surf2);
    border:1px solid var(--rkf-line);
    font-size:12.5px;
    font-weight:600;
    color:var(--rkf-ink-2);
    white-space:nowrap;
}
.rkf-top .rkf-c-cuis-tags b.rkf-c-cuis-na{
    background:transparent;
    font-weight:500;
    color:var(--rkf-ink-3);
}

.rkf-top .rkf-c-bars{ display:grid; gap:12px; }
.rkf-top .rkf-c-bar{ display:grid; gap:6px; }
.rkf-top .rkf-c-bar-t{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    font-size:11.5px;
    color:var(--rkf-ink-label);
}
.rkf-top .rkf-c-bar-t b{ font-size:12.5px; font-weight:600; color:var(--rkf-ink); }
.rkf-top .rkf-c-bar-t b em{
    font-style:normal;
    font-weight:500;
    color:var(--rkf-ink-3);
}
.rkf-top .rkf-c-bar-l{
    height:4px;
    border-radius:999px;
    background:var(--rkf-surf2);
    overflow:hidden;
}
.rkf-top .rkf-c-bar-l i{
    display:block;
    height:100%;
    border-radius:999px;
    background:var(--rkf-blue);
}
.rkf-top .rkf-go{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:auto;
    padding-top:18px;
    font-size:13.5px;
    font-weight:600;
    color:var(--rkf-rose-d);
    white-space:nowrap;
}
.rkf-top .rkf-go svg{ transition:transform .2s; flex-shrink:0; }
.rkf-top .rkf-go:hover svg{ transform:translateX(3px); }

/* ─── Pied de section ─── */
.rkf-top .rkf-foot{ margin-top:26px; display:flex; justify-content:center; }
.rkf-top .rkf-bline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:10px 22px;
    border-radius:999px;
    border:1px solid var(--rkf-line-2);
    background:transparent;
    color:var(--rkf-ink);
    font-size:14px;
    font-weight:600;
    text-align:center;
    transition:background .2s,color .2s,border-color .2s;
}
.rkf-top .rkf-bline:hover{ background:var(--rkf-ink); color:var(--rkf-cream); border-color:var(--rkf-ink); }
.rkf-top .rkf-bline svg{ flex-shrink:0; }

@media (max-width:782px){
    .rkf-top{ padding-top:26px; }
    .rkf-top .rkf-top-head{ gap:18px; margin-bottom:20px; }
    .rkf-top .rkf-car-nav{ display:none; }
    .rkf-top .rkf-car-rail{ max-width:none; }
    .rkf-top .rkf-c{ width:250px; }
    .rkf-top .rkf-bline{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
    .rkf-top .rkf-car{ scroll-behavior:auto; }
    .rkf-top .rkf-c,
    .rkf-top .rkf-c-hd>img,
    .rkf-top .rkf-go svg{ transition:none; }
    .rkf-top .rkf-c:hover{ transform:none; }
    .rkf-top .rkf-c:hover .rkf-c-hd>img{ transform:none; }
}