/* ---------- Stabilité de l'affichage (Android, iPhone, ordinateur) ---------- */
/* Polices de secours aux mêmes dimensions que Plus Jakarta Sans : le texte ne se réorganise plus
   quand la vraie police arrive (Arial sur iPhone / ordinateur, Roboto sur Android). */
@font-face { font-family: 'Plus Jakarta Sans Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 102%; ascent-override: 102%; descent-override: 21.5%; line-gap-override: 0%; }
@font-face { font-family: 'Plus Jakarta Sans Roboto'; src: local('Roboto'), local('Roboto-Regular'); size-adjust: 105%; ascent-override: 99%; descent-override: 21%; line-gap-override: 0%; }

html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* iPhone : pas de grossissement du texte en paysage */
    scrollbar-gutter: stable; /* ordinateur : la page ne se décale pas quand la barre de défilement apparaît */
    -webkit-tap-highlight-color: rgba(29, 78, 216, 0.12);
}
body { overflow-x: clip; }
/* Anciens iPhone (iOS < 16) sans overflow: clip : la page ne doit pas glisser de côté */
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
/* Pas de double-tap zoom ni de délai sur les boutons et liens */
a, button, label, summary, select, input, textarea, [role="button"] { touch-action: manipulation; }
/* Téléphones : un champ en dessous de 16 px fait zoomer l'iPhone (la page « bouge ») */
@media (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl),
    select:not(.text-lg):not(.text-xl), textarea:not(.text-lg):not(.text-xl) { font-size: 16px; }
}
/* Fenêtres ouvertes : la page derrière ne défile plus */
[role="dialog"], [role="dialog"] .overflow-y-auto, .kms-drawer { overscroll-behavior: contain; }
html:has([aria-modal="true"]:not(.hidden)), html:has(#vehicle-viewer:not(.hidden)), html:has(#doc-viewer:not(.hidden)) { overflow: hidden; }
/* Encoche et barre d'accueil de l'iPhone */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.kms-safe-bottom { padding-bottom: max(.75rem, env(safe-area-inset-bottom, 0px)); }
.pb-10.kms-safe-bottom { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
/* Hauteurs d'écran stables : 100vh change quand la barre d'adresse du téléphone apparaît ou disparaît */
@supports (height: 1svh) {
    .min-h-screen { min-height: 100svh; }
    .h-screen { height: 100svh; }
    .max-h-\[70vh\] { max-height: 70dvh; }
    .max-h-\[75vh\] { max-height: 75dvh; }
    .max-h-\[80vh\] { max-height: 80dvh; }
    .max-h-\[85vh\] { max-height: 85dvh; }
    .max-h-\[90vh\] { max-height: 90dvh; }
    .max-h-\[92vh\] { max-height: 92dvh; }
    .max-h-\[94vh\] { max-height: 94dvh; }
    .max-h-\[95vh\] { max-height: 95dvh; }
}

body {
    font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Roboto', sans-serif;
    background-color: #F8FAFC;
    color: #0F172A;
}
.font-mono { font-family: 'JetBrains Mono', monospace; }

.kms-card-white {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 20px -2px rgba(29, 78, 216, 0.06);
}
.kms-card-white:hover {
    border-color: #93C5FD;
    box-shadow: 0 10px 25px -3px rgba(29, 78, 216, 0.12);
}

.kms-gradient-text {
    background: linear-gradient(135deg, #0B193C 0%, #1D4ED8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kms-btn-primary {
    background: linear-gradient(135deg, #1D4ED8 0%, #0284C7 100%);
    box-shadow: 0 8px 20px -4px rgba(29, 78, 216, 0.35);
}
.kms-btn-primary:hover {
    background: linear-gradient(135deg, #0284C7 0%, #1D4ED8 100%);
    box-shadow: 0 12px 25px -4px rgba(29, 78, 216, 0.5);
}

section[id] { scroll-margin-top: 120px; }

.kms-hero-bg {
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(56, 189, 248, 0.18), transparent 60%),
        radial-gradient(900px 500px at -10% 20%, rgba(29, 78, 216, 0.12), transparent 60%),
        linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 60%, #F8FAFC 100%);
}
.kms-grid-pattern {
    background-image: linear-gradient(rgba(11, 25, 60, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 25, 60, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.kms-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #1D4ED8;
}
.kms-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }

@keyframes kms-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.kms-float { animation: kms-float 6s ease-in-out infinite; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .kms-float, .animate-ping { animation: none; }
}

.nav-link.active { color: #1D4ED8; }

details.kms-faq summary { list-style: none; cursor: pointer; }
details.kms-faq summary::-webkit-details-marker { display: none; }
details.kms-faq[open] .kms-faq-icon { transform: rotate(45deg); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #93C5FD; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #1D4ED8; }

/* ---------- Composants partagés (espace client & administration) ---------- */
.kms-input {
    width: 100%; padding: .8rem .95rem; background: #F8FAFC; color: #0B193C;
    border: 1px solid #CBD5E1; border-radius: .9rem; font-size: .875rem; font-weight: 600;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.kms-input::placeholder { color: #94A3B8; font-weight: 500; }
.kms-input:focus { outline: none; background: #FFFFFF; border-color: #1D4ED8; box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); }
.kms-input[aria-invalid="true"] { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.kms-label { display: block; font-size: 13px; font-weight: 700; color: #334155; margin-bottom: .35rem; }

.kms-tab { position: relative; color: #64748B; }
.kms-tab[aria-selected="true"] { color: #FFFFFF !important; background: linear-gradient(135deg, #1D4ED8 0%, #0284C7 100%) !important; border-color: #1D4ED8 !important; box-shadow: 0 8px 20px -6px rgba(29, 78, 216, .45); }
.kms-tab[aria-selected="true"] span { background: rgba(255, 255, 255, .2) !important; color: #FFFFFF !important; }

.kms-auth-bg {
    background:
        radial-gradient(900px 420px at 100% 0%, rgba(56, 189, 248, 0.22), transparent 60%),
        radial-gradient(700px 420px at 0% 100%, rgba(29, 78, 216, 0.28), transparent 60%),
        linear-gradient(160deg, #0B193C 0%, #102A6B 55%, #1D4ED8 100%);
}

.kms-skeleton { background: linear-gradient(90deg, #EEF2F7 25%, #F8FAFC 50%, #EEF2F7 75%); background-size: 200% 100%; animation: kms-shimmer 1.4s infinite; border-radius: .75rem; }
@keyframes kms-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Gabarits PDF : rendus hors écran (html2pdf a besoin d'un élément affiché) */
:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; }


/* ---------- Panoramas fret aérien (accueil) ---------- */
.kms-pano {
    position: relative; overflow: hidden; border-radius: 2rem; background: #0B193C;
    box-shadow: 0 25px 50px -12px rgba(11, 25, 60, 0.25);
}
.kms-pano > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s ease;
}
.kms-pano:hover > img { transform: scale(1.04); }
.kms-fret-chip {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem;
    background: #EFF6FF; color: #0B193C; border: 1px solid #BFDBFE; border-radius: 9999px;
}
.kms-fret-chip i { color: #1D4ED8; }
.kms-fret-step {
    display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: 9999px;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
    background: rgba(11, 25, 60, 0.7); color: #BAE6FD; border: 1px solid rgba(125, 211, 252, 0.45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: reduce) { .kms-pano > img { transition: none; } .kms-pano:hover > img { transform: none; } }

/* ---------- Page de suivi : arrière-plan panoramique ---------- */
.kms-track-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #0B193C; }
/* Hauteur de la grande fenêtre : l'image de fond ne se redimensionne pas quand la barre d'adresse se replie */
@supports (height: 1lvh) { .kms-track-bg { bottom: auto; height: 100lvh; } }
.kms-track-bg > img {
    position: absolute; top: 0; left: 0; height: 100%; width: 100%;
    object-fit: cover; object-position: center;
    animation: kms-pan 60s ease-in-out infinite alternate;
}
.kms-track-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 25, 60, 0.55) 0%, rgba(11, 25, 60, 0.35) 35%, rgba(11, 25, 60, 0.85) 100%),
        radial-gradient(900px 400px at 15% 0%, rgba(56, 189, 248, 0.25), transparent 60%);
}
/* Lent travelling horizontal : le panorama défile entièrement, même sur un écran de téléphone en portrait */
@keyframes kms-pan { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }
.kms-glass {
    background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.kms-step-line { position: absolute; left: 1.25rem; top: 2.75rem; bottom: -1.5rem; width: 3px; border-radius: 3px; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .kms-track-bg > img { animation: none; } }

/* ---------- En-tête flottant (accueil) ---------- */
/* Hauteur constante : la barre d'infos sort de l'écran avec la page (top négatif) au lieu de se replier,
   sinon l'en-tête collant change de taille au défilement et la page « saute ». */
.kms-header { top: -2.25rem; }
.kms-topbar { height: 2.25rem; overflow: hidden; }
.kms-header-wrap { padding-top: .5rem; }
.kms-header-bar {
    background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(203, 213, 225, 0.7);
    backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 10px 30px -14px rgba(11, 25, 60, 0.25);
    transition: background .35s ease, box-shadow .35s ease;
}
.kms-header.is-scrolled .kms-header-bar { background: rgba(255, 255, 255, 0.96); box-shadow: 0 18px 40px -16px rgba(11, 25, 60, 0.35); }
/* Services mis en avant dans la navigation */
.kms-navservice {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .75rem; border-radius: .8rem;
    color: #0B193C; font-weight: 700; background: #F1F5FF; border: 1px solid #DBEAFE; transition: color .2s, background .2s, border-color .2s;
}
.kms-navservice i { color: #1D4ED8; }
.kms-navservice:hover { background: #1D4ED8; color: #FFFFFF; border-color: #1D4ED8; }
.kms-navservice:hover i { color: #FFFFFF; }
.kms-navpill { position: relative; padding: .5rem .8rem; border-radius: .8rem; transition: color .2s, background .2s; }
.kms-navpill:hover { color: #1D4ED8; background: #EFF6FF; }
.kms-navpill.active { color: #1D4ED8; background: #EFF6FF; }
.kms-navpill.active::after {
    content: ""; position: absolute; left: 50%; bottom: .2rem; width: 5px; height: 5px; border-radius: 9999px;
    background: #1D4ED8; transform: translateX(-50%);
}
.kms-icon-btn {
    width: 2.5rem; height: 2.5rem; border-radius: .8rem; display: inline-flex; align-items: center; justify-content: center;
    color: #1D4ED8; background: #EFF6FF; border: 1px solid #DBEAFE; transition: background .2s, color .2s;
}
.kms-icon-btn:hover { background: #1D4ED8; color: #FFFFFF; }
.kms-menu-tile {
    display: flex; flex-direction: column; gap: .45rem; padding: .85rem; border-radius: 1rem;
    font-size: .875rem; font-weight: 700; color: #0B193C; background: #F8FAFC; border: 1px solid #E2E8F0;
    transition: border-color .2s, background .2s;
}
.kms-menu-tile i { color: #1D4ED8; font-size: 1.05rem; }
.kms-menu-tile:hover { background: #EFF6FF; border-color: #BFDBFE; }
@media (prefers-reduced-motion: reduce) {
    .kms-header-bar { transition: none; }
}

/* ---------- Avis clients ---------- */
.kms-stars { color: #F59E0B; letter-spacing: .08em; }
.kms-stars .off { color: #CBD5E1; }
.kms-star-input { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.kms-star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kms-star-input label { cursor: pointer; font-size: 1.9rem; color: #CBD5E1; transition: color .15s, transform .15s; }
.kms-star-input label:hover, .kms-star-input label:hover ~ label,
.kms-star-input input:checked ~ label { color: #F59E0B; }
.kms-star-input label:hover { transform: scale(1.1); }
.kms-star-input input:focus-visible + label { outline: 2px solid #1D4ED8; outline-offset: 2px; border-radius: .3rem; }

/* ---------- Administration : panoramas et tableau de bord ---------- */
.kms-admin-hero { position: relative; overflow: hidden; background: #0B193C; isolation: isolate; }
.kms-admin-hero > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
    animation: kms-pan 70s ease-in-out infinite alternate;
}
.kms-admin-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(11, 25, 60, 0.92) 0%, rgba(11, 25, 60, 0.7) 45%, rgba(11, 25, 60, 0.35) 100%),
        linear-gradient(180deg, transparent 55%, rgba(11, 25, 60, 0.9) 100%);
}
.kms-banner { position: relative; overflow: hidden; isolation: isolate; background: #0B193C; }
.kms-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s ease; }
.kms-banner:hover > img { transform: scale(1.03); }
.kms-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 25, 60, 0.9) 0%, rgba(11, 25, 60, 0.55) 60%, rgba(11, 25, 60, 0.2) 100%); }
.kms-stat {
    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 1.25rem; padding: 1.1rem 1.2rem;
    box-shadow: 0 12px 30px -18px rgba(11, 25, 60, 0.35); transition: transform .2s, box-shadow .2s;
}
.kms-stat:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(11, 25, 60, 0.45); }
.kms-admin-tabs { background: rgba(241, 245, 249, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.kms-chip { padding: .45rem .8rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; border: 1px solid #CBD5E1; background: #FFFFFF; color: #334155; transition: all .15s; }
.kms-chip[aria-pressed="true"] { background: #0B193C; border-color: #0B193C; color: #FFFFFF; }
.kms-bar-track { background: #EEF2F7; border-radius: 9999px; overflow: hidden; }
.kms-drawer { transition: transform .3s ease; }
@media (prefers-reduced-motion: reduce) {
    .kms-admin-hero > img { animation: none; }
    .kms-banner > img, .kms-stat, .kms-drawer { transition: none; }
}

/* ---------- Espace client / équipe : écran de connexion sur panorama ---------- */
/* :not(.hidden) : sinon ce display:flex (chargé après Tailwind) l'emporte sur .hidden et l'écran de connexion reste affiché au-dessus du tableau de bord */
.kms-login:not(.hidden) { display: flex; align-items: center; }
.kms-login { isolation: isolate; overflow: hidden; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); }
.kms-login > .relative { width: 100%; }
.kms-login-bg { position: absolute; inset: 0; z-index: -1; background: #0B193C; }
.kms-login-bg > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    animation: kms-pan 60s ease-in-out infinite alternate;
}
.kms-login-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 25, 60, 0.55) 0%, rgba(11, 25, 60, 0.4) 40%, rgba(11, 25, 60, 0.88) 100%),
        radial-gradient(900px 420px at 10% 0%, rgba(56, 189, 248, 0.25), transparent 60%);
}
.kms-login-panel {
    background: linear-gradient(160deg, rgba(11, 25, 60, 0.72) 0%, rgba(16, 42, 107, 0.6) 55%, rgba(29, 78, 216, 0.45) 100%);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
@media (prefers-reduced-motion: reduce) { .kms-login-bg > img { animation: none; } }

/* Boutons « Installer l'application » : affichés par pwa.js seulement si l'installation est possible
   (certains utilisent .kms-menu-tile, qui fixe display et l'emporterait sur .hidden) */
[data-install-app].hidden { display: none !important; }

/* ---------- Envois Europe : panorama de l'Europe (page équipe /admin-envois et suivi de /envoi) ---------- */
.kms-track-bg.kms-eu-dense::after {
    background:
        linear-gradient(180deg, rgba(11, 25, 60, 0.45) 0%, rgba(11, 25, 60, 0.7) 45%, rgba(11, 25, 60, 0.94) 100%),
        radial-gradient(900px 400px at 15% 0%, rgba(56, 189, 248, 0.22), transparent 60%);
}
.kms-eu-section { position: relative; overflow: hidden; isolation: isolate; background: #0B193C; }
.kms-eu-section > img.kms-eu-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
    animation: kms-pan 70s ease-in-out infinite alternate;
}
.kms-eu-section::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(11, 25, 60, 0.6) 0%, rgba(11, 25, 60, 0.55) 40%, rgba(11, 25, 60, 0.92) 100%),
        radial-gradient(800px 380px at 85% 0%, rgba(56, 189, 248, 0.2), transparent 60%);
}
.kms-eu-stat {
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 1.25rem;
    padding: 1rem 1.1rem; text-align: left; color: #FFFFFF; transition: background .15s, border-color .15s;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.kms-eu-stat:hover, .kms-eu-stat[aria-pressed="true"] { background: rgba(255, 255, 255, 0.2); border-color: rgba(125, 211, 252, 0.7); }
.kms-eu-chip { padding: .5rem .85rem; border-radius: 9999px; font-size: .8rem; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1); color: #E0F2FE; transition: all .15s; }
.kms-eu-chip[aria-pressed="true"] { background: #FFFFFF; border-color: #FFFFFF; color: #0B193C; }
.kms-eu-toolbar { background: rgba(11, 25, 60, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.kms-eu-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.kms-eu-progress > span { height: 6px; border-radius: 9999px; background: #E2E8F0; }
.kms-eu-progress > span.is-done { background: #1D4ED8; }
.kms-eu-progress > span.is-current { background: #38BDF8; }
.kms-eu-line { position: absolute; left: 1rem; top: 2.25rem; bottom: -0.25rem; width: 3px; border-radius: 3px; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .kms-eu-section > img.kms-eu-img { animation: none; } }

/* ---------- Location de voitures (/location) ---------- */
.kms-track-bg.kms-loc-bg::after {
    background:
        linear-gradient(180deg, rgba(11, 25, 60, 0.35) 0%, rgba(11, 25, 60, 0.6) 40%, rgba(11, 25, 60, 0.9) 100%),
        radial-gradient(900px 420px at 80% 0%, rgba(251, 191, 36, 0.18), transparent 60%);
}
.kms-loc-choice {
    cursor: pointer; border: 2px solid #E2E8F0; border-radius: 1rem; padding: .9rem 1rem; background: #FFFFFF;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.kms-loc-choice:hover { border-color: #93C5FD; }
.kms-loc-choice:has(input:checked) { border-color: #1D4ED8; background: #EFF6FF; box-shadow: 0 0 0 3px rgba(29, 78, 216, .12); }
.kms-loc-choice:has(input:focus-visible) { outline: 2px solid #1D4ED8; outline-offset: 2px; }

/* ---------- Services en tête du menu mobile ---------- */
.kms-menu-service {
    display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 1rem;
    color: #FFFFFF; background: linear-gradient(135deg, #0B193C, #1D4ED8); transition: filter .2s;
}
.kms-menu-service > i { width: 2.4rem; height: 2.4rem; border-radius: .75rem; background: rgba(255, 255, 255, .14); color: #7DD3FC; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
.kms-menu-service strong { display: block; font-size: .875rem; font-weight: 800; }
.kms-menu-service small { display: block; font-size: .75rem; color: #BFDBFE; margin-top: .1rem; }
.kms-menu-service:hover { filter: brightness(1.12); }

/* ---------- Panorama des véhicules disponibles (car-panorama.js) ---------- */
.kms-pano {
    position: relative; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.kms-pano-track { display: flex; gap: 1rem; width: max-content; padding: .25rem 0; animation: kms-pano var(--pano-duration, 60s) linear infinite; }
.kms-pano:hover .kms-pano-track, .kms-pano:focus-within .kms-pano-track { animation-play-state: paused; }
@keyframes kms-pano { to { transform: translateX(calc(-50% - .5rem)); } }
.kms-pano-card {
    position: relative; flex: 0 0 auto; width: 17rem; aspect-ratio: 16 / 10; border-radius: 1.25rem; overflow: hidden;
    background: #0B193C; box-shadow: 0 14px 30px -18px rgba(11, 25, 60, .6);
}
.kms-pano-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.kms-pano-card:hover img { transform: scale(1.05); }
.kms-pano-info {
    position: absolute; inset: auto 0 0 0; padding: 2rem .9rem .75rem; color: #FFFFFF;
    display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem;
    background: linear-gradient(transparent, rgba(11, 25, 60, .92));
}
.kms-pano-name { font-size: .875rem; font-weight: 800; line-height: 1.2; }
.kms-pano-price { font-size: .875rem; font-weight: 800; color: #7DD3FC; white-space: nowrap; }
.kms-pano-price small { font-size: .75rem; font-weight: 600; color: #BFDBFE; }
@media (min-width: 640px) { .kms-pano-card { width: 20rem; } }
/* Place réservée pendant le chargement du parc : la section ne grandit pas d'un coup */
[data-car-panorama]:empty { min-height: 11.125rem; }
@media (min-width: 640px) { [data-car-panorama]:empty { min-height: 13rem; } }
@media (prefers-reduced-motion: reduce) {
    .kms-pano { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .kms-pano-track { animation: none; }
}