/* ============================================
   Guide Béjaïa — Kit de composants "Style Visiter"
   Héros de page, filtres, cartes, carte interactive, reveals
   Chargé globalement (layout main.php)
   ============================================ */

/* ---------- Aliases tokens legacy -> design system ----------
   (pages blog/business qui utilisent encore --sea, --dark, ...) */
:root {
    --white: #ffffff;
    --dark: #0F172A;
    --gray: #64748B;
    --black: #030712;
    --sea-dark: #0066B3;
    --sea: #00AEEF;
    --sea-light: #E6F7FE;
    --turquoise: #FFF200;
    --turquoise-soft: rgba(255, 242, 0, 0.1);
    --off-white: #f9fafb;
    --light: #f7f7f9;
    --shadow-soft: 0 10px 30px -5px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 20px 50px -10px rgba(0, 0, 0, 0.14);
}

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .js .reveal { transition: none; opacity: 1; transform: none; }
}

/* ---------- Hero (pleine largeur, style Visiter) ----------
   Les classes "visit-*" sont celles de la page /visiter-bejaia ; les
   "brand-*" sont conservées comme alias pour les anciennes vues. */
.visit-hero, .brand-hero { position: relative; height: 52vh; min-height: 380px; display: flex; align-items: flex-end; overflow: hidden; }
.visit-hero--compact, .brand-hero--compact { height: 46vh; min-height: 340px; }
.visit-hero-bg, .visit-hero-bg img, .brand-hero-bg, .brand-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.visit-hero-bg img, .brand-hero-bg img { object-fit: cover; transform: scale(1.02); }
.visit-hero-overlay, .brand-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,16,34,0.82), rgba(2,16,34,0.25) 60%, rgba(2,16,34,0.35)); }
.visit-hero::after, .brand-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; background: linear-gradient(to top, rgba(2,16,34,0.55), transparent); pointer-events: none; }
.visit-hero-watermark, .brand-hero-watermark { position: absolute; right: 3%; bottom: -12%; width: clamp(140px, 18vw, 250px); opacity: 0.14; z-index: 0; pointer-events: none; filter: drop-shadow(0 0 30px rgba(0,174,239,0.6)); }
.visit-hero-content, .brand-hero-content { position: relative; z-index: 1; max-width: 1300px; width: 100%; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) 4%; }
.visit-title, .brand-hero-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); color: #fff; line-height: 1.05; margin: 0; position: relative; display: inline-block; }
.visit-title::after, .brand-hero-title::after { content: ''; display: block; margin-top: 0.3rem; width: 74px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #00AEEF, #FFF200); }
.visit-title em, .brand-hero-title em { font-style: italic; }
.visit-subtitle, .brand-hero-subtitle { color: rgba(255,255,255,0.88); font-size: 1.05rem; margin-top: 0.9rem; max-width: 56ch; line-height: 1.6; }
.visit-breadcrumb, .brand-hero-breadcrumb { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); margin-bottom: 0.6rem; }
.visit-breadcrumb a, .brand-hero-breadcrumb a { color: #fff; text-decoration: none; }
.visit-kicker, .brand-kicker { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #FFF200; background: rgba(0,174,239,0.18); border: 1px solid rgba(0,174,239,0.5); padding: 0.3rem 0.9rem; border-radius: 999px; backdrop-filter: blur(6px); }
.visit-kicker-logo, .visit-kicker img, .brand-kicker img { width: 18px; height: 18px; }
.visit-hero-btn, .brand-hero-btn { display: inline-block; margin-top: 1.5rem; padding: 0.75rem 1.6rem; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.45); color: #fff; font-weight: 600; font-size: 0.9rem; text-decoration: none; backdrop-filter: blur(8px); transition: all 0.25s var(--ease); }
.visit-hero-btn:hover, .brand-hero-btn:hover { background: #FFF200; border-color: #FFF200; color: #12294a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,174,239,0.35); }

/* ---------- Boutons & pills ---------- */
.brand-cta { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #00AEEF, #0066B3); color: #fff; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.07em; padding: 0.72rem 1.4rem; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,174,239,0.35); transition: all 0.25s var(--ease); }
.brand-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,174,239,0.45); color: #fff; }
.brand-cta svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.brand-cta:hover svg { transform: translateX(5px); }

.brand-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.05rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--text-light); background: var(--bg-alt); border: 1px solid var(--border); text-decoration: none; transition: all 0.2s var(--ease); white-space: nowrap; }
.brand-pill:hover { border-color: #00AEEF; color: #0089BC; transform: translateY(-1px); }
.brand-pill.is-active, .brand-pill.active { background: linear-gradient(135deg, #00AEEF, #0066B3); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(0,174,239,0.35); }
.brand-pill-count { font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; background: rgba(0,0,0,0.07); }
.brand-pill.is-active .brand-pill-count, .brand-pill.active .brand-pill-count { background: rgba(255,255,255,0.28); }

/* ---------- Titres de section ---------- */
.brand-section { padding: 4.5rem 0; }
.brand-section--alt { background: var(--bg-alt); }
.brand-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--text); margin: 0 0 1rem; position: relative; display: inline-block; }
.brand-title::after { content: ''; display: block; margin-top: 0.35rem; width: 64px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #00AEEF, #FFF200); }
.brand-title em { font-style: italic; }
.brand-section-lead { max-width: 620px; color: var(--text-light); line-height: 1.7; }

/* ---------- Carte générique "brand" ---------- */
.brand-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.brand-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #00AEEF, #0066B3); opacity: 0; transition: opacity 0.3s var(--ease); z-index: 1; }
.brand-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.brand-card:hover::before { opacity: 1; }

/* ---------- Bloc carte interactive (pleine largeur) ---------- */
.visit-map-panel, .brand-map-panel { position: relative; width: 100%; height: auto; }
.visit-map-block, .brand-map-block { position: relative; width: 100%; height: 62vh; min-height: 440px; }
.visit-map-header, .brand-map-header { position: absolute; top: 1.4rem; left: 1.4rem; z-index: 1000; background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); padding: 1rem 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); max-width: 320px; pointer-events: none; }
.visit-map-label, .brand-map-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #0089BC; }
.visit-map-header h2, .brand-map-header h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); margin: 0.2rem 0 0.3rem; line-height: 1.1; padding-left: 0.7rem; border-left: 4px solid #FFF200; }
.visit-map-header p, .brand-map-header p { font-size: 0.85rem; color: var(--text-light); margin: 0; line-height: 1.5; }
.brand-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; justify-content: center; margin-top: 1.6rem; font-size: 0.82rem; color: var(--text-light); }
.brand-legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.brand-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); background: #00AEEF; }

/* ---------- Épingles de marqueurs (Leaflet) ---------- */
.brand-marker-pin { width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(20,50,80,0.4); border: 3px solid #fff; font-size: 15px; }
.brand-marker-pin::after { content: ''; position: absolute; top: 8px; left: 8px; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.55); }
.brand-marker-pin span { transform: rotate(45deg); }

/* ---------- Listing éditorial (alterné) — accents marque ---------- */
.listing-number { font-family: var(--font-display); font-size: 5rem; font-weight: 800; line-height: 1; background: linear-gradient(180deg, #00AEEF, #0066B3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #00AEEF; opacity: 0.55; }
.listing-cta { position: relative; }
.listing-cta:hover { color: #00AEEF !important; }
.listing-item .listing-title { color: var(--text); }

/* ---------- Legacy (listes éditoriales) ---------- */
.results-count.pill { background: #E6F7FE !important; color: #0089BC !important; }
.btn-view-details { background: #E6F7FE !important; color: #0089BC !important; }
.btn-view-details:hover { background: linear-gradient(135deg, #00AEEF, #0066B3) !important; color: #fff !important; }

/* ============================================
   KIT UNIFIÉ — Filtres (pills) & Recherche
   Composants : visit-filter-pill, filter-pill,
   cat-pill, map-search-*
   ============================================ */

/* ---------- Pills unifiées ---------- */
.visit-filter-pill,
.filter-pill,
.cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.05rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-light);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.visit-filter-pill:hover,
.filter-pill:hover,
.cat-pill:hover {
    border-color: #00AEEF;
    color: #0089BC;
    transform: translateY(-1px);
}
.visit-filter-pill.is-active,
.filter-pill.active,
.cat-pill.active {
    background: linear-gradient(135deg, #00AEEF, #0066B3);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 174, 239, 0.35);
}
.visit-filter-count {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.07);
    color: inherit;
}
.visit-filter-pill.is-active .visit-filter-count { background: rgba(255, 255, 255, 0.28); }

.visit-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.6rem; }

/* ---------- Recherche en liste (pills) ---------- */
.map-search-box { position: relative; margin-left: auto; min-width: 220px; flex: 1 1 240px; }
.map-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-light); pointer-events: none;
}
.map-search-input {
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 2.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.87rem;
    background: var(--bg-alt);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.map-search-input::placeholder { color: var(--text-light); }
.map-search-input:focus {
    border-color: #00AEEF;
    box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.12);
    background: #fff;
}
@media (max-width: 992px) { .map-search-box { margin-left: 0; flex-basis: 100%; } }

/* ---------- Barre de recherche (page résultat) ---------- */
.search-page-wrap { padding: 4rem 0; }
.search-bar-brand { max-width: 640px; margin: 0 auto 3rem; }
.search-form-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.4rem 0.4rem 0.4rem 1.25rem;
    box-shadow: var(--shadow);
    transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.search-form-brand:focus-within { border-color: #00AEEF; box-shadow: 0 12px 30px -8px rgba(0, 174, 239, 0.35); }
.search-form-brand svg { color: #64748B; flex-shrink: 0; }
.search-input-brand { flex: 1; border: none; outline: none; font: 1rem var(--font-body); color: var(--text); background: transparent; padding: 0.6rem 0; }
.search-input-brand::placeholder { color: #94A3B8; }
.search-submit-brand {
    background: linear-gradient(135deg, #00AEEF, #0066B3);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.search-submit-brand:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 174, 239, 0.35); }

/* ---------- Carte post / fiche ---------- */
.post-category { color: #0089BC !important; }
.featured-badge, .blog-card-tag { background: linear-gradient(135deg, #00AEEF, #0066B3) !important; color: #fff !important; }
.featured-badge { border-radius: 999px !important; }

/* ============================================
   VISIT KIT — Grille & cartes (style Visiter Béjaïa)
   Composants réutilisables : filtres, cartes, légende, marqueurs
   ============================================ */

.visit-listing { padding-top: 2.6rem; }

/* ---------- Grille & cartes ---------- */
.visit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.visit-card {
    position: relative; border-radius: var(--radius); overflow: hidden; background: #fff;
    border: 1px solid var(--border); box-shadow: var(--shadow);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), opacity 0.6s var(--ease);
}
.js .reveal.visit-card {
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), box-shadow 0.3s var(--ease);
}
.visit-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent; transition: background 0.3s var(--ease); z-index: 1; }
.visit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.visit-card:hover::after { background: var(--card-accent, #00AEEF); }
.visit-card-link { display: block; text-decoration: none; color: inherit; }
.visit-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); }
.visit-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), filter 0.6s var(--ease); }
.visit-card:hover .visit-card-img img { transform: scale(1.07); filter: saturate(1.08) brightness(1.03); }
.visit-card-body { padding: 1.15rem 1.3rem 1.4rem; }
.visit-card-badge {
    display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 0.7rem;
}
.visit-card-title { font-size: 1.22rem; color: var(--text); margin-bottom: 0.45rem; line-height: 1.3; transition: color 0.2s var(--ease); }
.visit-card:hover .visit-card-title { color: #0066B3; }
.visit-card-desc { font-size: 0.9rem; color: var(--gray); line-height: 1.6; margin-bottom: 0.95rem; }
.visit-card-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin-bottom: 1.1rem; }
.visit-card-meta li { font-size: 0.76rem; font-weight: 600; color: var(--text-light); background: var(--bg-alt); border: 1px solid var(--border); padding: 0.26rem 0.65rem; border-radius: 999px; }
.visit-card-cta { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: #0066B3; }
.visit-card-arrow { transition: transform 0.25s var(--ease); }
.visit-card:hover .visit-card-arrow { transform: translateX(6px); }

/* ---------- Accents (business / blog) ---------- */
.visit-card--cyan   { --card-accent: #00AEEF; }
.visit-card--blue   { --card-accent: #0066B3; }
.visit-card--teal   { --card-accent: #0E9384; }
.visit-card--violet { --card-accent: #5B7BD5; }
.visit-card--ocean  { --card-accent: #2E9BD8; }

.visit-card--cyan .visit-card-badge   { color: #0089BC; background: #E6F7FE; }
.visit-card--blue .visit-card-badge   { color: #00538C; background: #E3EEFA; }
.visit-card--teal .visit-card-badge   { color: #0B7366; background: #E2F5F2; }
.visit-card--violet .visit-card-badge { color: #4158A0; background: #EAEEFB; }
.visit-card--ocean .visit-card-badge  { color: #1F78AE; background: #E8F3FB; }

/* ---------- Alias catégories (Visiter Béjaïa) ---------- */
.visit-cat-places    { --card-accent: #00AEEF; }
.visit-cat-monuments { --card-accent: #0066B3; }
.visit-cat-forets    { --card-accent: #0E9384; }
.visit-cat-musees    { --card-accent: #5B7BD5; }
.visit-cat-plages    { --card-accent: #2E9BD8; }

.visit-cat-places .visit-card-badge    { color: #0089BC; background: #E6F7FE; }
.visit-cat-monuments .visit-card-badge { color: #00538C; background: #E3EEFA; }
.visit-cat-forets .visit-card-badge    { color: #0B7366; background: #E2F5F2; }
.visit-cat-musees .visit-card-badge    { color: #4158A0; background: #EAEEFB; }
.visit-cat-plages .visit-card-badge    { color: #1F78AE; background: #E8F3FB; }

.visit-empty { text-align: center; padding: 5rem 0; color: var(--gray); }
.visit-empty-icon { font-size: 2.6rem; display: block; margin-bottom: 0.8rem; }

/* ---------- Légende & marqueurs (carte Leaflet) ---------- */
.visit-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; justify-content: center; margin-top: 1.6rem; font-size: 0.82rem; color: var(--gray); }
.visit-legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.visit-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.visit-legend-dot.visit-cat-places,    .visit-legend-dot.visit-card--cyan   { background: #00AEEF; }
.visit-legend-dot.visit-cat-monuments, .visit-legend-dot.visit-card--blue   { background: #0066B3; }
.visit-legend-dot.visit-cat-forets,    .visit-legend-dot.visit-card--teal   { background: #0E9384; }
.visit-legend-dot.visit-cat-musees,    .visit-legend-dot.visit-card--violet { background: #5B7BD5; }
.visit-legend-dot.visit-cat-plages,    .visit-legend-dot.visit-card--ocean  { background: #2E9BD8; }

.visit-marker {
    width: 36px; height: 36px; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(20,50,80,0.4);
    border: 3px solid #fff; font-size: 15px;
}
.visit-marker::after {
    content: ''; position: absolute; top: 8px; left: 8px; width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,0.55);
}
.visit-marker span { transform: rotate(45deg); }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 10px 30px rgba(20,50,80,0.25); }
.leaflet-popup-content { margin: 0; }

/* ---------- Stagger des reveals ---------- */
.visit-card:nth-child(1) { transition-delay: 0.05s; }
.visit-card:nth-child(2) { transition-delay: 0.12s; }
.visit-card:nth-child(3) { transition-delay: 0.19s; }
.visit-card:nth-child(4) { transition-delay: 0.26s; }
.visit-card:nth-child(5) { transition-delay: 0.33s; }
.visit-card:nth-child(6) { transition-delay: 0.4s; }
.visit-card:nth-child(7) { transition-delay: 0.47s; }
.visit-card:nth-child(8) { transition-delay: 0.54s; }
.visit-card:nth-child(9) { transition-delay: 0.61s; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) { .visit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    .visit-grid { grid-template-columns: 1fr; }
    .visit-filter { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .visit-hero, .brand-hero { height: 60vh; }
    .visit-hero-watermark, .brand-hero-watermark { right: -10%; bottom: -4%; }
    .visit-map-block, .brand-map-block { height: 380px; min-height: 0; }
    .visit-map-header, .brand-map-header { max-width: 240px; padding: 0.85rem 1.1rem; }
}