@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?rxucf6');
    src:  url('fonts/icomoon.eot?rxucf6#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?rxucf6') format('truetype'),
    url('fonts/icomoon.woff?rxucf6') format('woff'),
    url('fonts/icomoon.svg?rxucf6#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-sge:before {
    content: "\e900";
}
.icon-home:before {
    content: "\e901";
}
.icon-music:before {
    content: "\e911";
}
.icon-bullhorn:before {
    content: "\e91a";
}
.icon-location:before {
    content: "\e947";
}
.icon-compass:before {
    content: "\e949";
}
.icon-map:before {
    content: "\e94b";
}
.icon-heart:before {
    content: "\e9da";
}
.icon-facebook:before {
    content: "\ea90";
}
.icon-instagram:before {
    content: "\ea92";
}
.icon-whatsapp:before {
    content: "\ea93";
}
.icon-linkedin2:before {
    content: "\eaca";
}

.card{
    border-right:5px solid #66a3ff
}

.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: url('../img/concert.jpg');
}

.header-img.visite{
    background-image: url('../img/visite.jpg');
}

.header-img.loisir{
    background-image: url('../img/loisir.jpg');
}
/* 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;
}

offcanvas-body a{
    color: #fff;
}

:root{
    --pwa-bg:#0b1220; /* fond */
    --pwa-ink:#ffffff; /* texte */
    --pwa-accent:#4ade80; /* 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; }
}

/* 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);color: #eaeef6;}
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{white-space: nowrap;overflow-x: auto;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;}
.app-tabbar .nav-link{border: 0;border-radius: 0;padding: .35rem 0 0;font-size: .78rem;color: #fff;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){.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);}}
.nav-justified .nav-item{min-width: 20%;}
.drawer-handle{width: 48px;height: 5px;background: currentColor;opacity: .15;border-radius: 999px;margin: 8px auto 6px;}