* { margin:0; padding:0; box-sizing:border-box; }
    body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; background:#F9F9F8; color:#1a1a18; line-height:1.4; }
    .container { max-width:1280px; margin:0 auto; padding:0 20px; }
    
    /* Variables */
    :root {
        --green-dark: #085041;
        --green-mid: #0F6E56;
        --green-light: #E8F5F1;
        --orange: #EF9F27;
        --bg: #F4F4F2;
        --border: #E0E0DC;
        --text: #1a1a18;
        --text-2: #44423E;
        --text-3: #888780;
    }
    
    /* Hero */
.hero {
    background: linear-gradient(135deg, #0F6E56 0%, #085041 100%);
    color: white;
    padding: 48px 0 56px;
    position: relative;
}

.hero-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.hero-tag-dot {
    width: 6px;
    height: 6px;
    background: #EF9F27;
    border-radius: 50%;
    display: inline-block;
}

.hero h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}

.hero h1 span {
    color: #EF9F27;
}

.hero p {
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 28px;
    max-width: 550px;
}

/* ── SEARCH ───────────────────────── */

.search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border-radius: 60px;
    padding: 4px;
    max-width: 600px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    margin-bottom: 24px;
}

.search-icon {
    width: 18px;
    height: 18px;
    margin-left: 16px;
    color: #888780;
    flex-shrink: 0;
}

.search-wrap input {
    flex: 1;
    min-width: 0;
    border: none;
    padding: 12px 0;
    font-size: 15px;
    outline: none;
    background: transparent;
}

.btn-search {
    background: var(--green-mid);
    color: white;
    border: none;
    border-radius: 40px;
    padding: 12px 22px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.btn-search:hover {
    background: var(--green-dark);
}

/* ── PILLS (desktop) ───────────────────────── */
.pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

/* ── SELECT (mobile) ───────────────────────── */
.metier-select-wrap {
    display: none;
    margin-top: 12px;
}

.metier-select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.metier-select option {
    background: var(--green-mid);
    color: white;
}

.pill {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(4px);
    padding: 6px 16px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
    color: white;
    text-decoration: none;
    transition: all 0.2s;
}

.pill:hover,
.pill.active {
    background: #EF9F27;
    color: #412402;
}

/* ── MOBILE ───────────────────────── */

@media (max-width: 768px) {
    .pills-wrap {
        display: none; /* Cacher les pills sur mobile */
    }
    
    .metier-select-wrap {
        display: block; /* Afficher le select sur mobile */
    }

    .hero {
        padding: 38px 0 46px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero p {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .search-wrap {
        flex-direction: column;
        align-items: stretch;
        border-radius: 18px;
        padding: 12px;
        gap: 10px;
    }

    .search-icon {
        display: none;
    }

    .search-wrap input {
        width: 100%;
        padding: 14px 16px;
        background: #F7F6F2;
        border-radius: 12px;
        font-size: 15px;
    }

    .btn-search {
        width: 100%;
        height: 48px;
        border-radius: 12px;
        font-size: 15px;
    }
}
    
    /* Ticker */
    .ticker-wrap { background: #085041; overflow: hidden; height: 44px; display: flex; align-items: center; position: relative; border-bottom:1px solid #1D9E75; }
    .ticker-label { flex-shrink: 0; background: #EF9F27; color: #412402; font-size: 11px; font-weight: 700; padding: 4px 16px; white-space: nowrap; height: 100%; display: flex; align-items: center; z-index: 2; letter-spacing:0.5px; }
    .ticker-track-outer { flex: 1; overflow: hidden; height: 100%; position: relative; }
    .ticker-track { display: flex; gap: 0; position: absolute; left: 0; top: 0; height: 100%; align-items: center; white-space: nowrap; will-change: transform; }
    .ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 32px 0 0; color: #9FE1CB; font-size: 12px; }
    .ticker-item-stars { display:inline-flex; gap:2px; }
    .ticker-item-name { color:#fff; font-weight:500; }
    
    /* Stats */
    .stats-strip { background:#F4F4F2; border-top:1px solid #E0E0DC; border-bottom:1px solid #E0E0DC; padding:16px 0; }
    .stats-strip .container { display:flex; justify-content:space-around; flex-wrap:wrap; gap:16px; }
    .stat-s { text-align:center; }
    .stat-s-val { font-size:24px; font-weight:700; color:#0F6E56; }
    .stat-s-lbl { font-size:12px; color:#66645E; margin-top:4px; }
    .stats-sep { width:1px; height:32px; background:#D3D1C7; }
    
    /* Badges */
    .badges-row { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 10px; }
    .badge-verif { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 8px; border-radius:20px; line-height:1.4; }
    .badge-tel { background:#E8F5F1; color:#0F6E56; border:1px solid #B2DDD3; }
    .badge-id  { background:#EBF3FF; color:#1A56DB; border:1px solid #BFDBFE; }
    
    /* Filters */
    .filters-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:.75rem 0 .25rem; }
    .filter-group { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
    .filter-label { font-size:11px; color:var(--text-3); font-weight:500; }
    .verif-filter-btn { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; padding:5px 12px; border-radius:20px; border:0.5px solid var(--border); background:#fff; color:var(--text-2); text-decoration:none; cursor:pointer; transition:all .15s; white-space:nowrap; }
    .verif-filter-btn:hover { border-color:#0F6E56; color:#0F6E56; }
    .verif-filter-btn.active-tel { background:#E8F5F1; border-color:#0F6E56; color:#0F6E56; }
    .verif-filter-btn.active-id  { background:#EBF3FF; border-color:#1A56DB; color:#1A56DB; }
    .select-quartier { font-size:12px; padding:5px 24px 5px 12px; border-radius:20px; border:0.5px solid var(--border); background:#fff; color:var(--text-2); cursor:pointer; outline:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
    .select-quartier.active { border-color:#0F6E56; color:#0F6E56; background-color:#E8F5F1; }
    .filters-reset { font-size:11px; color:var(--text-3); text-decoration:underline; white-space:nowrap; }
    
    /* Cards */
    .cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; margin:24px 0; }
    .card { background:#fff; border-radius:16px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.05); border:0.5px solid var(--border); transition:all 0.2s; position:relative; }
    .card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.08); border-color:#0F6E56; }
    .card.boosted { background:linear-gradient(0deg, #FFFDF5, #fff); border-left:3px solid #EF9F27; }
    .boost-tag { position:absolute; top:12px; right:16px; background:#EF9F27; color:#412402; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; display:flex; align-items:center; gap:4px; }
    .boost-dot { width:5px; height:5px; background:#412402; border-radius:50%; display:inline-block; }
    .card-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
    .av { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; color:#fff; flex-shrink:0; }
    .av-g { background:#0F6E56; }
    .av-b { background:#185FA5; }
    .av-p { background:#534AB7; }
    .av-o { background:#854F0B; }
    .c-name { font-weight:600; font-size:15px; }
    .c-metier { font-size:12px; color:red; }
    .stars-row { display:flex; align-items:center; gap:3px; margin:8px 0; }
    .st { width:14px; height:14px; }
    .rating-txt { font-size:11px; color:#66645E; margin-left:4px; }
    .c-stats { display:flex; justify-content:space-between; margin:12px 0; padding:8px 0; border-top:0.5px solid #EEE; border-bottom:0.5px solid #EEE; }
    .c-stat { text-align:center; flex:1; }
    .c-stat-v { font-weight:700; font-size:14px; }
    .c-stat-l { font-size:10px; color:#888780; margin-top:2px; }
    .c-footer { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
    .c-zone { font-size:11px; color:#888780; display:flex; align-items:center; gap:3px; }
    .btn-voir { background:#0F6E56; color:#fff; border:none; padding:8px 12px; border-radius:30px; font-size:12px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:5px; transition:background 0.2s; }
    .btn-voir:hover { background:#085041; }
    .card-actions { margin-top:10px; }
    .btn-avis { display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:11px; font-weight:500; color:var(--text-3); background:var(--bg); border:0.5px solid var(--border); border-radius:20px; padding:6px 12px; cursor:pointer; transition:all .15s; width:100%; }
    .btn-avis:hover { border-color:var(--green-mid); color:var(--green-mid); }
    
    /* Map */
    #yataf-map { width: 100%; height: 480px; border-radius: 12px; border: 0.5px solid var(--border); overflow: hidden; display: none; margin: 24px 0; }
    #yataf-map.visible { display: block; }
    
    /* Leaflet Popup Custom */
    .yataf-popup .leaflet-popup-content-wrapper { border-radius: 12px; border: 0.5px solid #E0E0DC; box-shadow: 0 4px 20px rgba(0,0,0,.12); padding: 0; overflow: hidden; }
    .yataf-popup .leaflet-popup-content { margin: 0; width: 260px !important; }
    .yataf-popup .leaflet-popup-tip-container { display: none; }
    .popup-inner { padding: 12px; }
    .popup-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .popup-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0; }
    .pop-av-g { background: #0F6E56; }
    .pop-av-b { background: #185FA5; }
    .pop-av-p { background: #534AB7; }
    .pop-av-o { background: #854F0B; }
    .popup-nom { font-size: 13px; font-weight: 500; color: #1a1a18; }
    .popup-metier { font-size: 11px; color: #888780; }
    .popup-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
    .pb-tel { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 20px; background: #E8F5F1; color: #0F6E56; border: 0.5px solid #B2DDD3; }
    .pb-id  { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 20px; background: #EBF3FF; color: #1A56DB; border: 0.5px solid #BFDBFE; }
    .popup-stars { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
    .popup-stars svg { width: 10px; height: 10px; }
    .popup-note-txt { font-size: 11px; color: #888780; margin-left: 4px; }
    .popup-zone { font-size: 11px; color: #888780; margin-bottom: 8px; }
    .popup-btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 7px; border-radius: 20px; background: #0F6E56; color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; }
    .popup-btn:hover { background: #085041; }
    
    /* Pagination */
    .pagination { display:flex; align-items:center; justify-content:center; gap:4px; padding:1.5rem 0 .5rem; }
    .page-btn { min-width:36px; height:36px; border-radius:8px; border:0.5px solid var(--border); background:#fff; color:var(--text-2); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all .15s; padding:0 8px; }
    .page-btn:hover { border-color:var(--green-mid); color:var(--green-mid); }
    .page-btn.active { background:var(--green-mid); border-color:var(--green-mid); color:#fff; }
    .page-btn.disabled { opacity:.35; pointer-events:none; }
    .page-info { font-size:12px; color:var(--text-3); padding:0 8px; }
    
    /* How section */
    .how-section { text-align:center; padding:48px 20px; background:#fff; }
    .how-title { font-size:28px; font-weight:600; margin-bottom:12px; }
    .how-sub { color:#66645E; margin-bottom:40px; }
    .how-steps { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; max-width:1000px; margin:0 auto; }
    .how-step { flex:1; min-width:220px; background:#F9F9F8; border-radius:24px; padding:28px 20px; border:0.5px solid #E0E0DC; position:relative; }
    .how-num { width:44px; height:44px; background:#0F6E56; color:#fff; font-size:24px; font-weight:700; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
    .how-step-title { font-weight:600; margin-bottom:8px; }
    .how-step-desc { font-size:13px; color:#66645E; }
    .how-price { display:inline-block; margin-top:12px; font-size:11px; font-weight:600; color:#0F6E56; background:#E8F5F1; padding:3px 12px; border-radius:20px; }
    
    /* Metiers section */
    .metiers-section { padding:32px 20px; background:var(--bg); }
    .section-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
    .section-title { font-size:22px; font-weight:600; }
    .results-count { font-size:14px; color:#888780; }
    .metiers-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:16px; }
    .metier-card { background:#fff; border-radius:16px; padding:16px; text-align:center; text-decoration:none; border:0.5px solid var(--border); transition:all 0.2s; }
    .metier-card:hover { transform:translateY(-2px); border-color:#0F6E56; }
    .metier-icon { width:48px; height:48px; background:#E8F5F1; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
    .metier-name { font-weight:600; color:#1a1a18; font-size:14px; margin-bottom:4px; }
    .metier-count { font-size:11px; color:#888780; }
    
    /* View toggle */
    .view-toggle-wrap { display: flex; background: var(--bg); border: 0.5px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; }
    .view-toggle-btn { display: flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: none; background: transparent; color: var(--text-2); transition: all .15s; }
    .view-toggle-btn.active { background: #fff; color: var(--green-mid); border: 0.5px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
    .sort-sel { font-size:12px; padding:6px 28px 6px 12px; border-radius:20px; border:0.5px solid var(--border); background:#fff; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
    
    /* Pub */
/* ── PUB ─────────────────────────────────────────── */
.pub-slide {
    position: relative;
    width: 100%;
    background: #000; /* fallback */
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 16 / 9; /* Ratio fixe pour uniformité sur desktop */
}

/* IMAGE - solution universelle desktop/mobile */
.pub-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Couvre tout l'espace sans déformation */
    object-position: center; /* Centre l'image */
    display: block;
}

/* OVERLAY */
.pub-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.40) 40%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

/* CONTENU */
.pub-inner {
    position: relative;
    z-index: 2;
    padding: 40px;
    color: #fff;
    width: 100%;
}

.pub-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pub-badge {
    background: #D4AF37;
    color: #000;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.pub-sponsor {
    font-size: 13px;
    opacity: .9;
	color:white;
}

.pub-title {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 12px;
	color:white;
}

.pub-desc {
    font-size: 15px;
    line-height: 1.6;
    opacity: .95;
    margin-bottom: 22px;
    max-width: 650px;
	color:orange;
}

.pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 14px;
    background: white;
    color: orange;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s ease;
}

.pub-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(212, 175, 55, .35);
}

/* ── SWIPER CUSTOMISATION ─────────────────────────── */
.swiper {
    border-radius: 24px;
    margin: 20px 0;
    overflow: hidden;
}

.swiper-pagination-bullet {
    background: white !important;
    opacity: 0.6;
}

.swiper-pagination-bullet-active {
    background: #D4AF37 !important;
    opacity: 1;
}

/* ── MOBILE ───────────────────────────────────────── */
@media (max-width: 768px) {
    .pub-slide {
        aspect-ratio: 4 / 5; /* Ratio plus vertical sur mobile */
        border-radius: 16px;
    }

    .pub-inner {
        padding: 24px 20px;
    }

    .pub-title {
        font-size: 22px;
    }

    .pub-desc {
        font-size: 13px;
        margin-bottom: 16px;
		color:white;
    }

    .pub-btn {
        padding: 10px 18px;
        font-size: 13px;
		color:orange;
    }

    .pub-badge {
        font-size: 10px;
        padding: 4px 10px;
    }

    .pub-sponsor {
        font-size: 11px;
    }
}

/* ── TABLETTE (769px - 1024px) ───────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    .pub-slide {
        aspect-ratio: 16 / 9;
    }

    .pub-title {
        font-size: 28px;
		color:white;
    }

    .pub-inner {
        padding: 32px;
    }
}

/* ── GRAND ÉCRAN ( > 1400px ) ────────────────────── */
@media (min-width: 1400px) {
    .pub-slide {
        aspect-ratio: 21 / 9; /* Plus large sur très grands écrans */
    }

    .pub-title {
        font-size: 42px;
		color:white;
    }

    .pub-desc {
        font-size: 17px;
        max-width: 750px;
		color:white;
    }

    .pub-inner {
        padding: 50px 60px;
    }
}
    
    /* Trust section */
    .trust-section { background:#0F6E56; color:#fff; padding:32px 0; margin-top:32px; }
    .trust-section .container { display:flex; justify-content:space-around; flex-wrap:wrap; gap:24px; text-align:center; }
    .trust-val { font-size:28px; font-weight:700; }
    .trust-lbl { font-size:12px; opacity:0.85; margin-top:4px; }
    
    /* CTA Artisan */
    .cta-artisan { background:linear-gradient(135deg, #085041, #0F6E56); border-radius:24px; padding:32px; margin:32px 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; color:#fff; }
    .cta-left { flex:1; }
    .cta-left h2 { font-size:24px; margin-bottom:12px; }
    .cta-left p { opacity:0.9; font-size:14px; margin-bottom:16px; }
    .cta-badges { display:flex; flex-wrap:wrap; gap:8px; }
    .cta-badge { background:rgba(255,255,255,0.15); padding:4px 12px; border-radius:20px; font-size:11px; }
    .cta-btn-big { background:#EF9F27; color:#412402; padding:12px 28px; border-radius:40px; text-decoration:none; font-weight:700; font-size:16px; transition:all 0.2s; white-space:nowrap; }
    .cta-btn-big:hover { background:#e0891a; transform:scale(1.02); }
    
    /* Pub2 */
    .pub2 { background:#fff; border:0.5px solid var(--border); border-radius:16px; padding:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; }
    .pub2-left { display:flex; align-items:center; gap:12px; }
    .pub2-icon { width:36px; height:36px; background:#0F6E56; border-radius:50%; display:flex; align-items:center; justify-content:center; }
    .pub2-title { font-weight:600; font-size:14px; }
    .pub2-sub { font-size:11px; color:#888780; margin-top:2px; }
    .pub2-btn { background:#0F6E56; color:#fff; padding:8px 20px; border-radius:30px; text-decoration:none; font-size:12px; font-weight:600; }
    
    /* Modal Avis */
    .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9000; align-items:center; justify-content:center; padding:16px; }
    .modal-overlay.open { display:flex; }
    .modal-box { background:#fff; border-radius:14px; width:100%; max-width:500px; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; animation:mIn .2s cubic-bezier(.34,1.3,.64,1); }
    @keyframes mIn { from{opacity:0;transform:scale(.92) translateY(12px)} to{opacity:1;transform:none} }
    .modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:0.5px solid var(--border); flex-shrink:0; }
    .modal-head-name { font-size:16px; font-weight:500; }
    .modal-head-meta { font-size:12px; color:var(--text-3); margin-top:2px; }
    .modal-close-btn { width:32px; height:32px; border-radius:50%; border:none; background:var(--bg); cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .modal-score { display:flex; align-items:center; gap:14px; padding:14px 18px; background:var(--bg); border-bottom:0.5px solid var(--border); flex-shrink:0; }
    .modal-score-big { font-size:40px; font-weight:500; color:var(--text); line-height:1; }
    .modal-stars-row { display:flex; gap:2px; }
    .modal-score-count { font-size:12px; color:var(--text-3); margin-top:3px; }
    .modal-body { overflow-y:auto; flex:1; padding:0 18px 18px; }
    .modal-avis-item { display:flex; gap:10px; padding:14px 0; border-bottom:0.5px solid var(--border); }
    .modal-avis-item:last-child { border-bottom:none; }
    .modal-av { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#fff; flex-shrink:0; }
    .modal-av-g { background:#0F6E56; }
    .modal-av-b { background:#185FA5; }
    .modal-av-p { background:#534AB7; }
    .modal-av-o { background:#854F0B; }
    .modal-avis-top { display:flex; justify-content:space-between; margin-bottom:3px; }
    .modal-avis-auteur { font-size:13px; font-weight:500; }
    .modal-avis-date   { font-size:11px; color:var(--text-3); }
    .modal-avis-comment { font-size:13px; color:var(--text-2); line-height:1.55; margin-top:4px; }
    .modal-empty, .modal-loading { text-align:center; padding:32px 0; color:var(--text-3); font-size:13px; }
    .modal-spinner { width:24px; height:24px; border:2px solid var(--border); border-top-color:var(--green-mid); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 10px; }
    @keyframes spin { to{transform:rotate(360deg)} }
    
    .empty-state { text-align:center; padding:60px 20px; color:#888780; }
    .main-content { max-width:1280px; margin:0 auto; padding:0 20px; }

    /* ── CORRECTION : scroll-margin pour compenser le header fixe éventuel ── */
    #resultats { scroll-margin-top: 80px; }