/*
 *  css/style-bs.css
 *  Styles Bootstrap personnalisés — FranceGeo
 *  Utilisé uniquement par ville.php (et futures pages migrées)
 *
 *  Sections :
 *    1.  Variables CSS
 *    2.  Typographie
 *    3.  Navbar
 *    4.  Hero
 *    5.  Breadcrumb
 *    6.  Stat cards
 *    7.  Titres de section
 *    8.  Carte Leaflet
 *    9.  Musées / Monuments (POI)
 *    10. Avis / Étoiles
 *    11. Communes voisines
 *    12. Sidebar
 *    13. Top villes
 *    14. Pré-footer régions
 *    15. Footer
 *    16. Autocomplete
 *    17. Utilitaires
 *    18. Responsive
 */


/* ============================================================
   1. VARIABLES CSS
   ============================================================ */
:root {
    --fg-primary:      #0057A8;
    --fg-primary-dark: #003d7a;
    --fg-accent:       #E63946;
    --fg-dark:         #1a1a2e;
    --fg-muted:        #6c757d;
    --fg-border:       #dee2e6;
    --fg-bg-light:     #f8f9fa;
    --fg-card-shadow:  0 2px 12px rgba(0, 0, 0, .07);
}


/* ============================================================
   2. TYPOGRAPHIE
   ============================================================ */
body {
    font-family: 'Source Sans 3', sans-serif;
    color: #333;
}


/* ============================================================
   3. NAVBAR
   ============================================================ */
#header-bs {
    background: var(--fg-dark);
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

#header-bs .navbar-brand img {
    height: 38px;
}

#header-bs .nav-link {
    color: rgba(255, 255, 255, .85) !important;
    font-weight: 500;
    font-size: .9rem;
    padding: .5rem .85rem !important;
    transition: color .2s;
}

#header-bs .nav-link:hover {
    color: #fff !important;
}


/* ============================================================
   4. HERO
   ============================================================ */
#hero-ville {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-primary-dark) 100%);
    background-size: cover;
    background-position: center;
    padding: 3rem 0 2.2rem;
    color: #fff;
    position: relative;
    overflow: visible; /* nécessaire pour que le dropdown autocomplete ne soit pas coupé */
}

/* Overlay sombre pour lisibilité du texte sur l'image de fond */
#hero-ville::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 30, 80, .55);
    pointer-events: none;
    z-index: 0;
}

/* Tout le contenu du hero passe au-dessus de l'overlay */
#hero-ville .container {
    position: relative;
    z-index: 1;
}

#hero-ville h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .3rem;
}

#hero-ville .hero-subtitle {
    font-size: 1rem;
    opacity: .9;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-size: .78rem;
    padding: .3em .75em;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

/* Barre de recherche dans le hero */
.hero-search {
    position: relative;  /* ancre le dropdown autocomplete */
}

.hero-search .input-group {
    border-radius: 6px;
    overflow: visible;   /* permet au dropdown de déborder */
    position: relative;
}

.hero-search .form-control,
.hero-search .input-group-text {
    border-radius: 0;
    border-color: rgba(255, 255, 255, .4);
    font-size: .95rem;
}

.hero-search .input-group > :first-child {
    border-radius: 6px 0 0 6px !important;
}

.hero-search .input-group > .form-control {
    border-radius: 0 !important;
}

.hero-search .btn-accent {
    background: var(--fg-accent);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    transition: background .2s;
    flex-shrink: 0;
}

.hero-search .btn-accent:hover {
    background: #c1121f;
    color: #fff;
}


/* ============================================================
   5. BREADCRUMB
   ============================================================ */
.breadcrumb-area {
    background: #e8f1fb;
    border-bottom: 1px solid #c9daf5;
    padding: .5rem 0;
    font-size: .82rem;
}

.breadcrumb-area .breadcrumb {
    margin: 0;
}

.breadcrumb-area .breadcrumb-item + .breadcrumb-item::before {
    color: var(--fg-primary);
}

.breadcrumb-area a {
    color: var(--fg-primary);
    text-decoration: none;
}

.breadcrumb-area a:hover {
    text-decoration: underline;
}


/* ============================================================
   6. STAT CARDS
   ============================================================ */
.stat-card {
    border: none;
    border-radius: 12px;
    box-shadow: var(--fg-card-shadow);
    transition: transform .2s, box-shadow .2s;
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-label {
    font-size: .72rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}


/* ============================================================
   7. TITRES DE SECTION
   ============================================================ */
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--fg-dark);
    padding-bottom: .55rem;
    border-bottom: 3px solid var(--fg-primary);
    margin-bottom: 1.3rem;
    display: inline-block;
}


/* ============================================================
   8. CARTE LEAFLET
   ============================================================ */
#map {
    height: 360px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--fg-card-shadow);
}


/* ============================================================
   9. MUSÉES / MONUMENTS (POI)
   ============================================================ */
.poi-table {
    width: 100%;
}

.poi-table tr {
    border-bottom: 1px solid var(--fg-border);
}

.poi-table tr:last-child {
    border-bottom: none;
}

.poi-table td {
    padding: .7rem .4rem;
    vertical-align: top;
}

.poi-table .poi-icon {
    width: 36px;
    height: 36px;
    background: #e8f1fb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.poi-name {
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.poi-name:hover {
    text-decoration: underline;
    color: var(--fg-primary);
}

.btn-show-more {
    display: inline-block;
    margin-top: .6rem;
    font-size: .85rem;
    color: var(--fg-primary);
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
}

.hidebig .poi-row:nth-child(n+6) {
    display: none;
}


/* ============================================================
   10. AVIS / ÉTOILES
   ============================================================ */
.star-display {
    color: #f4a429;
    font-size: .95rem;
}

.star-display .empty {
    color: #ddd;
}

.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    gap: .2rem;
}

.star-rating-input input {
    display: none;
}

.star-rating-input label {
    font-size: 1.6rem;
    color: #ccc;
    cursor: pointer;
    transition: color .15s;
}

.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {
    color: #f4a429;
}


/* ============================================================
   11. COMMUNES VOISINES
   ============================================================ */
.nearby-link {
    color: var(--fg-primary);
    font-weight: 500;
    text-decoration: none;
}

.nearby-link:hover {
    text-decoration: underline;
}

.distance-badge {
    background: #e8f1fb;
    color: var(--fg-primary);
    font-size: .72rem;
    padding: .15em .6em;
    border-radius: 20px;
    white-space: nowrap;
}


/* ============================================================
   12. SIDEBAR
   ============================================================ */
.sidebar-card {
    border: none;
    border-radius: 12px;
    box-shadow: var(--fg-card-shadow);
    overflow: hidden;
}

.sidebar-card .card-header {
    background: var(--fg-primary);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    padding: .75rem 1rem;
}

.info-table td {
    padding: .4rem .25rem;
    border: none;
    font-size: .88rem;
}

.info-table td:first-child {
    color: var(--fg-muted);
    font-weight: 500;
    white-space: nowrap;
    width: 45%;
}

.info-table tr {
    border-bottom: 1px solid var(--fg-border);
}

.info-table tr:last-child {
    border-bottom: none;
}

.panneau-img {
    max-width: 100%;
    border-radius: 10px;
}


/* ============================================================
   13. TOP VILLES
   ============================================================ */
#section-top .card-header {
    background: var(--fg-primary);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
}


/* ============================================================
   14. PRÉ-FOOTER RÉGIONS
   ============================================================ */
#pre-footer-bs {
    background: var(--fg-bg-light);
    border-top: 1px solid var(--fg-border);
}

.region-tag {
    display: inline-block;
    padding: .25em .75em;
    border: 1px solid #c9daf5;
    border-radius: 20px;
    color: var(--fg-primary);
    font-size: .82rem;
    text-decoration: none;
    background: #fff;
    transition: background .15s, color .15s;
}

.region-tag:hover {
    background: var(--fg-primary);
    color: #fff;
}


/* ============================================================
   15. FOOTER
   ============================================================ */
#footer-bs {
    background: var(--fg-dark);
    color: rgba(255, 255, 255, .75);
    font-size: .88rem;
}

.footer-title {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    margin-bottom: .8rem;
}

.footer-links li {
    margin-bottom: .4rem;
}

.footer-links a {
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
}

.footer-links a:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: .9rem;
    margin-top: .5rem;
}


/* ============================================================
   16. AUTOCOMPLETE
   ============================================================ */

/*
 *  Le dropdown est positionné en absolu par rapport au wrapper
 *  .ac-wrapper qui englobe l'input-group.
 *  Structure HTML attendue :
 *
 *  <div class="ac-wrapper">          ← position: relative
 *    <div class="input-group">
 *      <input id="lieu" name="l">
 *    </div>
 *    <div class="ac-dropdown">       ← position: absolute, top: 100%
 *      <ul class="ac-list">...</ul>
 *    </div>
 *  </div>
 */

.ac-wrapper {
    position: relative;
    flex-grow: 1;
    max-width: 480px;
}

.ac-dropdown {
    display: none;
    position: absolute;
    top: 100%;          /* juste sous l'input */
    left: 0;
    right: 0;
    z-index: 1055;      /* au-dessus de tout, y compris la navbar sticky */
    background: #fff;
    border: 1px solid var(--fg-border);
    border-top: 2px solid var(--fg-primary);  /* liseré primary en haut */
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
    overflow: hidden;
    max-height: 360px;
    overflow-y: auto;
}

/* Sidebar — pleine largeur du conteneur */
.sidebar-card .ac-wrapper {
    max-width: 100%;
}

/* ── Liste ── */
.ac-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Item ── */
.ac-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background .1s;
    gap: .75rem;
}

.ac-item:last-child {
    border-bottom: none;
}

.ac-item:hover,
.ac-item.ac-active {
    background: #e8f1fb;
}

/* ── Partie gauche — nom + code postal ── */
.ac-left {
    min-width: 0;  /* permet le truncate */
}

.ac-nom {
    font-weight: 600;
    color: var(--fg-dark);
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.ac-cp {
    font-size: .8rem;
    color: var(--fg-muted);
}

/* ── Partie droite — département + population ── */
.ac-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: .15rem;
}

.ac-dep {
    background: #e8f1fb;
    color: var(--fg-primary);
    font-size: .7rem;
    font-weight: 600;
    padding: .15em .55em;
    border-radius: 20px;
    white-space: nowrap;
}

.ac-pop {
    font-size: .72rem;
    color: var(--fg-muted);
    white-space: nowrap;
}

/* ── Mise en évidence du terme tapé ── */
mark.ac-highlight {
    background: #fff3cd;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
    font-weight: 700;
}

/* ── États spéciaux ── */
.ac-loader,
.ac-empty,
.ac-error {
    padding: .75rem 1rem;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ac-loader { color: var(--fg-muted); }
.ac-empty  { color: var(--fg-muted); font-style: italic; }
.ac-error  { color: #dc3545; }


/* ============================================================
   17. UTILITAIRES
   ============================================================ */
.text-white-75 {
    color: rgba(255, 255, 255, .75);
}

.letter-spacing {
    letter-spacing: .06em;
}


/* ============================================================
   18. RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
    #hero-ville {
        padding: 2rem 0 1.6rem;
    }

    .stat-value {
        font-size: 1.2rem;
    }

    .ac-wrapper {
        max-width: 100%;
    }

    .ac-right {
        display: none;  /* masque département + pop sur très petit écran */
    }
}