:root{
    --pwa-bg:#0b1220; /* fond */
    --pwa-ink:#ffffff; /* texte */
    --pwa-accent:#0d6efd; /* bouton */
    --pwa-accent-ink:#0b1220; /* texte bouton */
    --pwa-muted:#94a3b8; /* secondaire */
    --pwa-shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:16px;
}

@media (prefers-color-scheme: light){
    :root{ --pwa-bg:#ffffff; --pwa-ink:#0b1220; --pwa-accent:#2563eb; --pwa-accent-ink:#ffffff; --pwa-muted:#475569; }
}

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?xn3pph');
    src:  url('../fonts/icomoon.eot?xn3pph#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?xn3pph') format('truetype'),
    url('../fonts/icomoon.woff?xn3pph') format('woff'),
    url('../fonts/icomoon.svg?xn3pph#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-logo:before {
    content: "\e900";
}
.icon-home:before {
    content: "\e901";
}
.icon-music:before {
    content: "\e911";
}
.icon-bullhorn:before {
    content: "\e91a";
}
.icon-compass:before {
    content: "\e949";
}
.icon-map:before {
    content: "\e94b";
}

.card a, footer a{
    color:#00BFFF;
    text-decoration: dashed;
}

.navbar {
    background-color: #000;
}
.banner {
    background: url('https://source.unsplash.com/1600x600/?bretagne,festival') center/cover no-repeat;
    height: 60vh;
    display: flex;
    align-items: flex-end;
    padding: 2rem;
}
.banner h1 {
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
}

.card-title, .card-title a{
    white-space: break-spaces;
    color: #fff;
}

.navbar-brand{
    font-size:55px;
}
#suggestions {
    position: absolute;
    background-color: black;
    width: 100%;
}

#suggestions li:hover{
    cursor: pointer;
}

#btnGeo{
    position: absolute;
    top: 0;
    right: 0;
}

/* Image de fond pour le header */
.header-img {
    background-size: cover;
    height: 40vh; /* Hauteur plein écran */
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
}

.header-img.event{
    background-image: image-set(
            url("../img/concert.webp") type("image/webp"),
            url("../img/concert.jpg") type("image/jpeg")
    );
}

.header-img.visite{
    background-image: image-set(
            url("../img/visite.webp") type("image/webp"),
            url("../img/visite.jpg") type("image/jpeg")
    );
}

.header-img.loisir{
    background-image: image-set(
            url("../img/loisir.webp") type("image/webp"),
            url("../img/loisir.jpg") type("image/jpeg")
    );
}
/* Navbar transparente par défaut */
.navbar {
    transition: background-color 0.4s ease;
}

.navbar.transparent {
    background-color: transparent;
    color: #212529
}

.navbar.transparent a.nav-link, .navbar.transparent a.navbar-brand {
    color: #212529;
}
.navbar.solid {
    background-color: rgba(0, 0, 0, 0.8); /* Couleur au scroll */
    color:#fff;
}

/* Bandeau sticky */
.pwa-banner{ position:fixed; left:0; right:0; bottom:12px; z-index:9999; display:none; }
.pwa-card{ max-width: 920px; margin: 0 auto; background: var(--pwa-bg); color: var(--pwa-ink); border-radius: var(--radius); box-shadow: var(--pwa-shadow); display:flex; gap:14px; align-items:center; padding: 14px 14px; }
.pwa-icon{ width:44px; height:44px; border-radius:10px; overflow:hidden; flex:0 0 auto; box-shadow:0 2px 10px rgba(0,0,0,.2); background:#111; display:grid; place-items:center; }
.pwa-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.pwa-body{ flex:1 1 auto; font: 500 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
.pwa-title{ font-weight:700; font-size:15px; margin-bottom:4px; }
.pwa-note{ color: var(--pwa-muted); font-weight:500; }
.pwa-actions{ display:flex; gap:10px; align-items:center; }
.pwa-btn{ appearance:none; cursor:pointer; border-radius: 999px; padding: 10px 14px; border:1px solid transparent; font-weight:700; }
.pwa-btn.primary{ background: var(--pwa-accent); color: var(--pwa-accent-ink); }
.pwa-btn.ghost{ background: transparent; color: var(--pwa-ink); border-color: rgba(148,163,184,.35); }

/* Petit modal iOS (astuces d’installation) */
.pwa-modal{ position: fixed; inset: 0; display:none; place-items:center; background: rgba(0,0,0,.5); z-index: 10000; }
.pwa-modal .box{ width:min(520px, 92vw); background: var(--pwa-bg); color: var(--pwa-ink); border-radius: 16px; padding: 16px; box-shadow: var(--pwa-shadow); }
.pwa-modal header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.pwa-modal h3{ margin:0; font-size:18px; }
.pwa-modal ol{ margin:.5rem 0 0; padding-left: 1.2rem; }
.pwa-modal .close{ border:none; background:transparent; font-size:22px; cursor:pointer; color: var(--pwa-muted); }

/* Safe-area sur iOS */
@supports (padding: max(0px)){
    .pwa-card{ padding-right: max(14px, env(safe-area-inset-right)); padding-left: max(14px, env(safe-area-inset-left)); }
}

:root{ --tabbar-h: 72px; }
main{ padding-bottom: 0; }
main.drawer{position: fixed;left: 0;right: 0;bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));height: 70vh;max-height: calc(100vh - var(--tabbar-h) - env(safe-area-inset-top) - 8px);background: var(--bs-body-bg);border-top-left-radius: 16px;border-top-right-radius: 16px;box-shadow: 0 -10px 30px rgba(0,0,0,.15);transform: translateY(100%);transition: transform .3s ease;z-index: 1039;overflow: hidden;border-top: 1px solid rgba(0,0,0,.06);}
main.drawer.open{transform: translateY(0);}
.drawer-scroll{height: 100%;overflow: auto;-webkit-overflow-scrolling: touch;}
.app-backdrop{position: fixed;inset: 0;background: rgba(0,0,0,.4);backdrop-filter: saturate(120%) blur(2px);display: none;z-index: 1038;}
.app-backdrop.show{display: block;}
.app-tabbar{height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom: env(safe-area-inset-bottom);border-top: 1px solid rgba(0,0,0,.08);background: #fff;z-index: 1050;white-space: nowrap;overflow-x: auto;}
.app-tabbar .nav{flex-wrap: nowrap;}
.app-tabbar .nav-link{flex: 0 0 auto;min-width: 20%;border: 0;border-radius: 0;padding: .35rem 0 0;font-size: .78rem;color: #5b6471;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: .15rem;height: calc(var(--tabbar-h) - 4px);}
.app-tabbar .nav-link .bi{font-size: 1.25rem;line-height: 1;}
.app-tabbar .nav-link.active{color: #0d6efd;background: transparent;}
.app-tabbar .nav-link.active .bi{transform: translateY(-1px);}
@media (prefers-color-scheme: dark){body{background: #0b1220;color: #eaeef6;}.card{background: #111a2d;border-color: rgba(255,255,255,.08);}.text-muted{color: #a9b2c3 !important;}.app-tabbar{background: #0f172a;border-top-color: rgba(255,255,255,.08);}.app-tabbar .nav-link{color: #a9b2c3;}.app-tabbar .nav-link.active{color: #66a3ff;}main.drawer{background: #0f172a;border-top-color: rgba(255,255,255,.08);box-shadow: 0 -10px 30px rgba(0,0,0,.5);}}
.drawer-handle{width: 48px;height: 5px;background: currentColor;opacity: .15;border-radius: 999px;margin: 8px auto 6px;}
/* — Force Dark Tabbar (toujours sombre, quels que soient les prefs système) — */
.app-tabbar{ background:#0f172a !important; border-top-color: rgba(255,255,255,.08) !important; }
.app-tabbar .nav-link{ color:#a9b2c3 !important; }
.app-tabbar .nav-link.active{ color:#66a3ff !important; }
.app-tabbar .nav-link .bi{ opacity: .95; }
/* — Force Dark Tabbar & Drawer (toujours sombre) — */
.app-tabbar{ background:#0f172a !important; border-top-color: rgba(255,255,255,.08) !important; }
.app-tabbar .nav-link{ color:#a9b2c3 !important; }
.app-tabbar .nav-link.active{ color:#66a3ff !important; }
.app-tabbar .nav-link .bi{ opacity: .95; }
main.drawer{ background:#0f172a !important; color:#eaeef6 !important; border-top-color: rgba(255,255,255,.08) !important; box-shadow:0 -10px 30px rgba(0,0,0,.5) !important; }
.card{ background:#111a2d !important; border-color: rgba(255,255,255,.08) !important; }
.text-muted{ color:#a9b2c3 !important; }
/* — Force Dark Tabbar & Drawer avec palette PWA — */
.app-tabbar{ background:var(--pwa-bg) !important; border-top-color: rgba(255,255,255,.08) !important; }
.app-tabbar .nav-link{ color:var(--pwa-muted) !important; }
.app-tabbar .nav-link.active{ color:var(--pwa-accent) !important; }
.app-tabbar .nav-link .bi{ opacity: .95; }


main.drawer{ background:var(--pwa-bg) !important; color:var(--pwa-ink) !important; border-top-color: rgba(255,255,255,.08) !important; box-shadow: var(--pwa-shadow) !important; }
.card{ background:#111a2d !important; border-color: rgba(255,255,255,.08) !important; color: var(--pwa-ink) !important; }
.text-muted{ color:var(--pwa-muted) !important; }


/* Badges */
.badge{ border-radius: var(--radius); font-weight:600; }
.badge.text-bg-primary{ background: var(--pwa-accent) !important; color: var(--pwa-accent-ink) !important; }
.badge.text-bg-warning{ background: #facc15 !important; color:#000 !important; }
.badge.text-bg-light{ background: rgba(255,255,255,.1) !important; color: var(--pwa-ink) !important; }


/* Boutons */
.btn-primary{ background: var(--pwa-accent) !important; color: var(--pwa-accent-ink) !important; border:none !important; }
.btn-outline-primary{ border-color: var(--pwa-accent) !important; color: var(--pwa-accent) !important; }
.btn-outline-primary:hover{ background: var(--pwa-accent) !important; color: var(--pwa-accent-ink) !important; }


/* Liens */
.card a, footer a{ color: var(--bs-dark-text-emphasis) !important; text-decoration: none; }
a:hover{ color: var(--pwa-accent) !important; opacity:.85; }

/* Style pour le conteneur du slider */
.row[data-carousel] {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur iOS */
    scrollbar-width: none; /* Cache la scrollbar sur Firefox */
}

/* Cache la scrollbar sur Chrome, Safari, etc. */
.row[data-carousel]::-webkit-scrollbar {
    display: none;
}

/* On cible TOUS les éléments dont la classe contient "col-"
  et qui sont des enfants directs de notre slider.
*/
.row[data-carousel] > [class*="col-"] {
    flex-shrink: 0; /* Empêche les slides de se rétrécir */
    margin-right: 15px; /* Optionnel: ajoute de l'espace */
}

.row[data-carousel] > [class*="col-"]:last-child {
    margin-right: 0;
}

/* Pour les tablettes et mobiles (écrans de moins de 992px)
*/
@media (max-width: 991.98px) {
    .row[data-carousel] > [class*="col-"] {
        width: 85%; /* On force la largeur à 85% */
    }
}

/* === Correction des cards en mode clair === */
@media (prefers-color-scheme: light) {
    .card {
        background: #ffffff !important;
        color: var(--pwa-ink) !important;
        border-color: rgba(0,0,0,.08) !important;
    }

    .card-title,
    .card-text,
    .card a {
        color: var(--pwa-ink) !important;
    }

    .text-muted {
        color: var(--pwa-muted) !important;
    }
}
.category-icon-box {
    transition: transform 0.2s;
    cursor: pointer;
}
.category-icon-box:hover {
    transform: translateY(-5px);
}
.card-img-top {
    height: 200px;
    object-fit: cover;
}
.section-title {
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 15px;
}
.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 5px;
    background-color: #0d6efd; /* Couleur primaire Bootstrap */
    border-radius: 3px;
}

.seb-chatbot-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1050;
}

/* Bulle flottante */
.seb-chatbot-toggle {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Panel (desktop par défaut) */
.seb-chatbot-panel {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 340px;
    max-height: 480px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.25s ease;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.seb-chatbot-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.seb-chatbot-messages {
    overflow-y: auto;
    max-height: 340px;
    padding-right: .25rem;
}

/* Messages */
.seb-chatbot-message {
    margin-bottom: .5rem;
    display: flex;
}

.seb-chatbot-message-user {
    justify-content: flex-end;
}

.seb-chatbot-message-user .seb-chatbot-bubble {
    background-color: #0d6efd;
    color: #fff;
    border-radius: 1rem 0.5rem 0.5rem 1rem;
}

.seb-chatbot-message-bot .seb-chatbot-bubble {
    background-color: #f1f3f5;
    border-radius: 0.5rem 1rem 1rem 0.5rem;
}

.seb-chatbot-bubble {
    padding: .5rem .75rem;
    max-width: 85%;
    font-size: .9rem;
}

/* Cartes */
.seb-chatbot-events {
    margin-top: .5rem;
}

.seb-chatbot-event-card {
    font-size: .85rem;
    border-radius: .5rem;
    border: 1px solid rgba(0,0,0,.06);
    padding: .5rem .6rem;
    margin-bottom: .35rem;
    background-color: #fff;
}

.seb-chatbot-event-title {
    font-weight: 600;
}

.seb-chatbot-event-meta {
    font-size: .78rem;
    color: #6c757d;
}

/* Loader */
.seb-chatbot-typing {
    font-size: .75rem;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.seb-chatbot-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #6c757d;
    animation: sebChatbotDot 1s infinite ease-in-out;
}
.seb-chatbot-dot:nth-child(2) { animation-delay: 0.15s; }
.seb-chatbot-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes sebChatbotDot {
    0%, 80%, 100% { transform: translateY(0); opacity: .4; }
    40% { transform: translateY(-3px); opacity: 1; }
}

/* =========================== */
/* 📱 VERSION MOBILE 100% WIDTH */
/* =========================== */

@media (max-width: 575.98px) {

    .seb-chatbot-container {
        bottom: 5rem;
        right: 1rem;
        left: 1rem;
    }

    .seb-chatbot-panel {
        position: fixed !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 100vw !important;
        height: 85vh !important;
        max-height: none !important;

        border-radius: 0 !important;
        transform: translateY(100%);
    }

    .seb-chatbot-panel.open {
        transform: translateY(0);
    }

    .seb-chatbot-messages {
        max-height: calc(85vh - 120px) !important;
    }
}