* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background: white;
    padding: 7px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: static;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    flex-direction: column;   /* slogan placé sous le logo */
    align-items: flex-start;
    gap: 6px;
}

.logo-slogan {
    font-size: 14px;
    font-style: italic;
    font-weight: 600;
    color: #1473e7;
    letter-spacing: .2px;
}

.logo-icon {
    width: auto;
    height: 90px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
}

.logo-subtitle {
    font-size: 14px;
    color: #7f8c8d;
    font-weight: 400;
}

nav {
    display: flex;
    flex-wrap: wrap;          /* autorise le passage sur plusieurs lignes */
    justify-content: center;  /* lignes centrées -> cadre équilibré */
    align-content: center;
    column-gap: 5px;          /* espace horizontal entre liens */
    row-gap: 3px;             /* faible espace entre les 2 lignes */
    position: relative;
    padding: 4px 14px;        /* cadre fin autour des liens */
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(20, 115, 231, 0.22);
    max-width: 72%;           /* garde le menu sur ~2 lignes */
    margin-left: auto;        /* garde le bloc à droite du logo */
}

nav a {
    text-decoration: none;
    color: #058aea;
    font-weight: 600;
    font-size: 14px;
    padding: 4px 11px;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

nav a:hover, nav a.active {
    background: #058aea;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: white;
    min-width: 220px;
    box-shadow: 0 12px 30px rgba(0, 150, 57, 0.2);
    z-index: 1000;
    border-radius: 12px;
    overflow: hidden;
    top: 100%;
    left: 0;
    margin-top: 0px;
    border: 2px solid #009639;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-content::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #009639;
}

.dropdown-content a {
    color: #1473e7;
    padding: 15px 20px;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
    border-radius: 0;
    background: white;
    border: none;
    position: relative;
    overflow: hidden;
}

.dropdown-content a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 150, 57, 0.1), transparent);
    transition: left 0.5s ease;
}

.dropdown-content a:hover {
    background: #058aea;
    color: white;
    transform: translateX(5px);
    padding-left: 25px;
}

.dropdown-content a:hover::before {
    left: 100%;
}

.dropdown-content a:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
    color: rgba(255, 255, 255, 0.8);
}

.dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
    color: #ff8500;
}

.dropdown:hover > a {
    background: white;
    color: #009639;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
}

.dropdown:hover > a .dropdown-arrow {
    color: #ff8500;
}

.hero-section {
    color: white;
    padding: 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide.active {
    opacity: 1;
}

.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.hero-content {
    position: relative;
    z-index: 10;
    background: rgba(0, 0, 0, 0.4);
    padding: 40px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.hero-section::before {
    display: none;
}

.slider-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 15;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.slider-dot.active {
    background: white;
    border-color: #ff8500;
    transform: scale(1.2);
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 15;
    backdrop-filter: blur(10px);
}

.slider-nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.slider-prev {
    left: 30px;
}

.slider-next {
    right: 30px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
    font-size: 1.4rem;
    margin-bottom: 40px;
    opacity: 0.95;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.stat-card {
    background: rgba(255,255,255,0.1);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 1rem;
    opacity: 0.9;
}

.main-content {
    padding: 60px 0;
}

.filters {
    background: white;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.filter-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-label {
    font-weight: 600;
    color: #2c3e50;
    margin-right: 10px;
}

.category-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.category-tag {
    padding: 8px 16px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.category-tag:hover, .category-tag.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
    transform: translateY(-2px);
}

.search-box {
    padding: 12px 20px;
    border: 2px solid #e9ecef;
    border-radius: 25px;
    font-size: 14px;
    width: 300px;
    transition: border-color 0.3s ease;
}

.search-box:focus {
    outline: none;
    border-color: #667eea;
}

.ranking-table {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.table-header {
    background: linear-gradient(135deg, #058aea 0%, #058aea 100%);
    color: white;
    padding: 20px 30px;
    font-weight: 600;
    font-size: 18px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: #f8f9fa;
    padding: 20px 15px;
    text-align: left;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #e9ecef;
}

td {
    padding: 20px 15px;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: middle;
}

tr:hover {
    background: #f8f9fa;
    transform: scale(1.01);
    transition: all 0.3s ease;
}

.rank-number {
    font-weight: 700;
    font-size: 18px;
    color: #667eea;
    width: 60px;
}

.site-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.site-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.site-name {
    font-weight: 600;
    color: #2c3e50;
}

.site-url {
    color: #7f8c8d;
    font-size: 12px;
}

.category-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.badge-institutions { background: #e3f2fd; color: #1976d2; }
.badge-gouvernement { background: #f3e5f5; color: #7b1fa2; }
.badge-districts { background: #e8f5e8; color: #388e3c; }
.badge-regions { background: #fff3e0; color: #f57c00; }
.badge-communes { background: #fce4ec; color: #c2185b; }
.badge-ambassades { background: #e0f2f1; color: #00796b; }

.change-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.change-up { color: #4caf50; }
.change-down { color: #f44336; }
.change-neutral { color: #9e9e9e; }

.metric-value {
    font-weight: 600;
    text-align: center;
}

.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

.page-btn {
    padding: 10px 15px;
    border: 1px solid #e9ecef;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-btn:hover, .page-btn.active {
    background: #058aea;
    color: white;
    border-color: #058aea;
}

@media (max-width: 768px) {
    .footer-content { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .footer-about { max-width: 100%; }
    .footer-social { justify-content: center; }
    .newsletter-input-group { flex-direction: column; }
    .newsletter-submit { border-radius: 0 0 8px 8px; }
    /* Empêche le champ e-mail (largeur intrinsèque ~20 car.) de déborder
       et de provoquer un scroll horizontal sur mobile. */
    .footer-section { min-width: 0; }
    .footer-newsletter { max-width: 100%; }
    .newsletter-input { width: 100%; min-width: 0; }
    .links-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .link-content { padding: 25px 20px; }
    .link-title { font-size: 1.1rem; }
    .news-grid { grid-template-columns: 1fr; gap: 20px; }
    .news-content { padding: 20px; }
    .news-title { font-size: 1.1rem; }
    .hero-title { font-size: 2.5rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .filter-group { flex-direction: column; align-items: flex-start; }
    .search-box { width: 100%; }
    table { font-size: 14px; }
    th, td { padding: 15px 10px; }

    nav {
        flex-direction: column;
        gap: 8px;
        padding: 15px;
    }

    nav a {
        padding: 15px 20px;
        text-align: center;
    }

    .dropdown-content {
        position: static;
        display: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.95);
        margin: 8px 0;
        border: 2px solid rgba(0, 150, 57, 0.3);
    }

    .dropdown-content::before {
        display: none;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown-content a:hover {
        transform: none;
        padding-left: 20px;
    }

    .slider-nav {
        padding: 10px;
    }

    .slider-prev {
        left: 15px;
    }

    .slider-next {
        right: 15px;
    }

    .slider-controls {
        bottom: 20px;
    }
}

.impact-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 80px 0;
    position: relative;
}

.impact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23009639" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.section-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #ff8500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    position: relative;
}

.section-subtitle::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #ff8500;
    border-radius: 2px;
}

.section-title {
    font-size: 3rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    line-height: 1.2;
}

.impact-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    position: relative;
    z-index: 2;
}

.impact-stat-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 150, 57, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.impact-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #009639 0%, #ff8500 100%);
}

.impact-stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 150, 57, 0.2);
}

.stat-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #009639 0%, #ff8500 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: white;
    transition: all 0.3s ease;
}

.impact-stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(5deg);
}

.stat-content .stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 10px;
    line-height: 1;
}

.stat-content .stat-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #009639;
    margin-bottom: 5px;
}

.stat-content .stat-sublabel {
    font-size: 0.9rem;
    color: #7f8c8d;
    font-weight: 500;
}

.agenda-section {
    background: #f8f9fa;
    padding: 80px 0;
    position: relative;
}

.agenda-carousel-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.agenda-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.agenda-slide {
    display: none;
    width: 100%;
}

.agenda-slide.active {
    display: block;
}

.agenda-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    min-height: 400px;
}

.agenda-content {
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #e9ecef;
}

.agenda-format {
    font-size: 4rem;
    font-weight: 900;
    color: #2c3e50;
    margin-bottom: 20px;
    letter-spacing: -2px;
}

.agenda-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 30px;
    line-height: 1.3;
}

.agenda-progress {
    margin-bottom: 30px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.progress-label {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

.progress-percentage {
    font-size: 0.9rem;
    color: #2c3e50;
    font-weight: 600;
}

.progress-bar {
    height: 8px;
    background: #dee2e6;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #009639 0%, #ff8500 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.agenda-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #009639;
    color: white;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    width: fit-content;
}

.agenda-image {
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
}

.placeholder-image {
    width: 120px;
    height: 120px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    margin-bottom: 30px;
}

.agenda-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #009639;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.agenda-progress-bottom {
    width: 100%;
}

.agenda-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.agenda-nav-btn {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #009639;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    color: #009639;
    transition: all 0.3s ease;
    pointer-events: all;
    backdrop-filter: blur(10px);
}

.agenda-nav-btn:hover {
    background: #009639;
    color: white;
    transform: scale(1.1);
}

.agenda-prev {
    margin-left: -25px;
}

.agenda-next {
    margin-right: -25px;
}

.agenda-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.agenda-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dee2e6;
    cursor: pointer;
    transition: all 0.3s ease;
}

.agenda-dot.active {
    background: #009639;
    transform: scale(1.3);
}

.agenda-dot:hover {
    background: #ff8500;
}
.news-section {
    background: #f8f9fa;
    padding: 80px 0;
    position: relative;
}

.news-section {
    background: #f8f9fa;
    padding: 80px 0;
    position: relative;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

.news-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.news-image {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background: #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #6c757d;
    position: relative;
}

.news-date {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: #ff8500;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-content {
    padding: 25px;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 0.85rem;
    color: #009639;
}

.news-author,
.news-comments {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.news-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
    margin: 0;
    transition: color 0.3s ease;
}

.news-card:hover .news-title {
    color: #009639;
}

.news-excerpt {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.5;
    margin: 15px 0 20px 0;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #009639;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    position: relative;
}

.news-read-more:hover {
    color: #ff8500;
    transform: translateX(5px);
}

.news-read-more svg {
    transition: transform 0.3s ease;
}

.news-read-more:hover svg {
    transform: translateX(3px);
}
.useful-links-section {
    background: #f8f9fa;
    padding: 80px 0;
    position: relative;
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 2;
}

.link-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.link-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.link-content {
    padding: 30px 25px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.link-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    transition: color 0.3s ease;
}

.link-card:hover .link-title {
    color: #058aea;
}

.link-visit {
    background: #058aea;
    padding: 15px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.link-card:hover .link-visit {
    transform: translateY(0);
}

.visit-btn {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: all 0.3s ease;
}

.visit-btn:hover {
    color: #ff8500;
}

.visit-btn svg {
    transition: transform 0.3s ease;
}

.visit-btn:hover svg {
    transform: translateX(3px);
}
.footer {
    background: #797e83;
    color: #ffffff;
    position: relative;
}

.footer-main {
    padding: 60px 0 40px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 60px;
    align-items: flex-start;
}

.footer-section {
    display: flex;
    flex-direction: column;
}

.footer-about {
    max-width: 300px;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo-img {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.footer-address {
    color: #adb5bd;
    margin-bottom: 25px;
    font-size: 1rem;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-weight: 500;
}

.contact-item svg {
    color: #ff8500;
    flex-shrink: 0;
}

.footer-social {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 45px;
    height: 45px;
    background: #495057;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    background: #009639;
    color: white;
    transform: translateY(-3px);
}

.footer-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    margin-bottom: 25px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    padding-left: 0;
}

.footer-links a:hover {
    color: #d58118;
    padding-left: 10px;
}

.footer-newsletter {
    background: #495057;
    padding: 30px 25px;
    border-radius: 15px;
}

.newsletter-description {
    color: #adb5bd;
    margin-bottom: 25px;
    line-height: 1.6;
}

.newsletter-form {
    width: 100%;
}

.newsletter-input-group {
    display: flex;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.newsletter-input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    outline: none;
    font-size: 1rem;
    color: #495057;
}

.newsletter-input::placeholder {
    color: #adb5bd;
}

.newsletter-submit {
    background: #009639;
    border: none;
    padding: 15px 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletter-submit:hover {
    background: #007429;
    transform: scale(1.05);
}

.footer-bottom {
    background: #343a40;
    padding: 20px 0;
    border-top: 1px solid #495057;
}

.footer-bottom-content {
    text-align: center;
    color: #adb5bd;
    font-size: 0.9rem;
}
/* New Filter Section */
.filters-section {
    background: white;
    padding: 5px;
    border-radius: 15px;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.filters-container {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-dropdown {
    position: relative;
    min-width: 150px;
}

.filter-select {
    width: 100%;
    padding: 12px 45px 12px 20px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: #f8f9fa;
    color: #495057;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    position: relative;
}

.filter-select:hover {
    border-color: #009639;
    background: white;
}

.filter-select:focus {
    outline: none;
    border-color: #009639;
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 150, 57, 0.1);
}

.filter-dropdown::after {
    content: '▼';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 12px;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.filter-dropdown:hover::after {
    color: #009639;
    transform: translateY(-50%) rotate(180deg);
}

.filter-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}
.filters-section form {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}
.action-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary {
    background: #ff8500;
    color: white;
    box-shadow: 0 2px 10px rgba(255, 133, 0, 0.3);
}

.btn-primary:hover {
    background: #e67300;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 133, 0, 0.4);
}

.btn-secondary {
    background: transparent;
    color: #009639;
    border: 2px solid #009639;
}

.btn-secondary:hover {
    background: #009639;
    color: white;
    transform: translateY(-2px);
}

/* Ranking Table Container */
.ranking-table {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Header with Title */
.table-header {
    background: linear-gradient(135deg, #058aea 0%, #058aea 100%);
    color: white;
    padding: 20px 30px 15px;
    font-weight: 600;
    font-size: 18px;
}

/* Tabs Container */
.tabs-container {
    background: linear-gradient(135deg, #058aea 0%, #058aea 100%);
    padding: 0 30px 20px;
    position: relative;
}

.tabs-wrapper {
    display: flex;
    gap: 0;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    backdrop-filter: blur(10px);
}

.tab-button {
    flex: 1;
    padding: 12px 24px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tab-button:hover {
    color: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.tab-button.active {
    color: #2c3e50;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
}

.tab-icon {
    width: 16px;
    height: 16px;
}

/* Tab Content */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
    display: block;
}

/* Modern Ranking Table */
.ranking-table {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.table-header {
    background: linear-gradient(135deg, #058aea 0%, #058aea 100%);
    color: white;
    padding: 24px 32px;
    font-weight: 600;
    font-size: 18px;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

/* Header Styles */
thead {
    background: #f8fafc;
}

th {
    padding: 16px 24px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

th:hover {
    background-color: #f1f5f9;
}

th::after {
    content: '↕';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #cbd5e1;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

th:hover::after {
    opacity: 1;
}

/* Row Styles */
tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

tbody tr:hover {
    background-color: #f8fafc;
}

tbody tr:last-child {
    border-bottom: none;
}

td {
    padding: 20px 24px;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.4;
}

/* Rank Column */
.rank-cell {
    width: 80px;
}

.rank-number {
    font-weight: 700;
    font-size: 16px;
    color: #6366f1;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Site Info Column */
.site-cell {
    min-width: 320px;
}

.site-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
    text-transform: uppercase;
}

.site-avatar.avatar-1 { background: linear-gradient(135deg, #ef4444, #dc2626); }
.site-avatar.avatar-2 { background: linear-gradient(135deg, #f97316, #ea580c); }
.site-avatar.avatar-3 { background: linear-gradient(135deg, #eab308, #ca8a04); }
.site-avatar.avatar-4 { background: linear-gradient(135deg, #22c55e, #16a34a); }
.site-avatar.avatar-5 { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.site-avatar.avatar-6 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.site-avatar.avatar-7 { background: linear-gradient(135deg, #ec4899, #db2777); }
.site-avatar.avatar-8 { background: linear-gradient(135deg, #84cc16, #65a30d); }

.site-details {
    flex: 1;
    min-width: 0;
}

.site-name {
    font-weight: 600;
    font-size: 15px;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.3;
}

.site-url {
    font-size: 13px;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Category Badge */
.category-cell {
    width: 140px;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    border: 1px solid transparent;
}

.badge-institutions {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.badge-gouvernements {
    background: #fce7f3;
    color: #be185d;
    border-color: #f9a8d4;
}
.badge-districts {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}
.badge-regions {
    background: #fed7aa;
    color: #9a3412;
    border-color: #fdba74;
}
.badge-communes {
    background: #fecaca;
    color: #991b1b;
    border-color: #fca5a5;
}
.badge-ambassades {
    background: #a7f3d0;
    color: #065f46;
    border-color: #6ee7b7;
}

/* Evolution Column */
.evolution-cell {
    width: 120px;
    text-align: center;
}

.change-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 8px;
}

.change-up {
    color: #059669;
    background: #d1fae5;
}
.change-down {
    color: #dc2626;
    background: #fee2e2;
}
.change-neutral {
    color: #6b7280;
    background: #f3f4f6;
}

/* Metric Columns */
.metric-cell {
    width: 130px;
    text-align: center;
}

.metric-value {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.metric-duration {
    color: #0f172a;
}

.metric-pages {
    color: #1e40af;
}

.metric-bounce {
    color: #be123c;
}

/* Responsive */
@media (max-width: 1024px) {
    .site-cell {
        min-width: 280px;
    }

    th, td {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .ranking-table {
        border-radius: 12px;
    }

    .table-header {
        padding: 20px 24px;
        font-size: 16px;
    }

    th, td {
        padding: 12px 16px;
    }

    .site-info {
        gap: 12px;
    }

    .site-avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .site-name {
        font-size: 14px;
    }

    .site-url {
        font-size: 12px;
    }

    .metric-cell {
        width: 100px;
    }

    .evolution-cell {
        width: 100px;
    }

    .category-cell {
        width: 120px;
    }
}

/* Loading and Empty States */
.loading-row td {
    padding: 40px;
    text-align: center;
    color: #64748b;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #6366f1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.empty-state {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
}

.empty-state h3 {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    line-height: 1.5;
}
.ocd-classement-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 320px;
    gap: 20px;
    align-items: start;
    margin-top: 18px;
}

/* Colonnes de classement */
.ocd-rank-col {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.ocd-rank-col__head {
    background: linear-gradient(135deg, #058aea 0%, #0066b3 100%);
    color: #fff;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
}
.ocd-rank-list { list-style: none; margin: 0; padding: 0; }
.ocd-rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f3f7;
    transition: background .15s;
    height: 52px;          /* hauteur fixe : toutes les lignes identiques */
    box-sizing: border-box;
}
.ocd-rank-item:last-child { border-bottom: none; }
.ocd-rank-item:hover { background: #f7fafd; }
.ocd-rank-num {
    flex: 0 0 32px;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4fb;
    color: #0066b3;
    font-weight: 700;
    border-radius: 50%;
    font-size: 14px;
}

/* Rang « NC » (non classé) : site sans points pour l'instant */
.ocd-rank-num--nc {
    background: #f2f4f7;
    color: #9aa3b0;
    font-size: 12px;
    font-weight: 600;
}
/* Médailles pour le top 3 */
.ocd-rank-item:nth-child(1) .ocd-rank-num { background: #ffd700; color: #7a5c00; }
.ocd-rank-item:nth-child(2) .ocd-rank-num { background: #d4d7dd; color: #444; }
.ocd-rank-item:nth-child(3) .ocd-rank-num { background: #e8a87c; color: #6b3410; }
.ocd-rank-name {
    flex: 1;
    min-width: 0;          /* indispensable pour que l'ellipsis marche en flex */
    overflow: hidden;
    white-space: nowrap;   /* force la ligne unique au niveau du conteneur */
}
.ocd-rank-name a {
    color: #1a2b3c;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: block;
    white-space: nowrap;   /* le nom reste sur une seule ligne */
    overflow: hidden;
    text-overflow: ellipsis; /* ... si le nom est trop long */
}
.ocd-rank-name a:hover { color: #058aea; text-decoration: underline; }
.ocd-rank-name > span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 14px;
    color: #1a2b3c;
}
/* Le sigle imbriqué ne doit pas casser la troncature : il reste sur la ligne */
.ocd-rank-name .ocd-sigle {
    color: #8a94a6;
    font-weight: 400;
    font-size: 12px;
    white-space: nowrap;
}
.ocd-rank-empty { padding: 30px 16px; text-align: center; color: #8a94a6; font-size: 14px; }

/* Infobulle personnalisée pour les noms tronqués */
.ocd-tooltip {
    position: fixed;
    z-index: 9999;
    background: #1a2b3c;
    color: #fff;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    max-width: 320px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
    white-space: normal;
    line-height: 1.4;
}
.ocd-tooltip.show { opacity: 1; }
.ocd-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 18px;
    border: 6px solid transparent;
    border-top-color: #1a2b3c;
}

/* Colonne publicité */
.ocd-ad-col {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    position: sticky;
    top: 20px;
}
.ocd-ad-col__head {
    background: #f3f5f8;
    color: #8a94a6;
    padding: 8px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    border-bottom: 1px solid #e3e8ef;
}
.ocd-ad-col__body { padding: 14px; }

/* Pagination du classement (bloc top-sites) */
.ocd-rank-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; margin-top: 18px;
}
.ocd-rank-page {
    border: 1px solid #d8e2ee; background: #fff; color: #0e57c2; font-weight: 700;
    min-width: 38px; height: 38px; padding: 0 10px; border-radius: 9px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ocd-rank-page:hover:not(:disabled):not(.active) { background: #058aea; color: #fff; border-color: #058aea; }
.ocd-rank-page.active { background: #0e57c2; color: #fff; border-color: #0e57c2; cursor: default; }
.ocd-rank-page:disabled { color: #c2ccd9; background: #f4f7fb; cursor: not-allowed; }
.ocd-rank-pagination__info { color: #8a93a2; font-size: .85rem; margin-left: 6px; }

/* ============================================================
   Pagination des SITES NON PARVENUS
   Réutilise la structure de .ocd-rank-page (taille, forme, espacement)
   mais la recolore aux teintes de la section (bordeaux/rouge) au lieu
   du bleu. Ciblé sur .no-sites-section -> n'affecte PAS le classement.
   ============================================================ */
.no-sites-section .ocd-rank-page {
    border-color: #f0d2d2;
    color: #a82020;
}
.no-sites-section .ocd-rank-page:hover:not(:disabled):not(.active) {
    background: #dc3545; color: #fff; border-color: #dc3545;
}
.no-sites-section .ocd-rank-page.active {
    background: #a82020; color: #fff; border-color: #a82020;
}
.no-sites-section .ocd-rank-page:disabled {
    color: #d8b3b3; background: #fbf4f4; border-color: #f0e0e0;
}
.no-sites-section .ocd-rank-pagination__info { color: #9c8585; }
.ocd-ad-video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    background: #000;
}
.ocd-ad-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 480px;
    background:
        repeating-linear-gradient(45deg, #f7f9fc, #f7f9fc 12px, #eef2f7 12px, #eef2f7 24px);
    border: 2px dashed #cdd6e2;
    border-radius: 8px;
    color: #9aa6b6;
    text-align: center;
    padding: 20px;
}
.ocd-ad-placeholder svg { width: 46px; height: 46px; opacity: .5; }
.ocd-ad-placeholder span { font-size: 13px; font-weight: 600; }
.ocd-ad-placeholder small { font-size: 11px; color: #b3bccb; }

/* Pied : lien voir la suite */
.ocd-classement-footer {
    margin-top: 16px;
    text-align: center;
}
.ocd-voir-suite {
    display: inline-block;
    background: #ff8500;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: background .15s;
}
.ocd-voir-suite:hover { background: #e67700; }

/* Responsive : sur tablette/mobile, les colonnes passent l'une sous l'autre */
@media (max-width: 900px) {
    .ocd-classement-3col { grid-template-columns: 1fr; }
    .ocd-ad-col { position: static; }
    .ocd-ad-placeholder { height: 200px; }
}
/* ===== Section "Sites non parvenus" : 3 colonnes (liste + 2 pubs) ===== */
.ocd-np-3col {
    display: grid;
    grid-template-columns: 1fr 320px 320px;
    gap: 20px;
    align-items: start;
    margin-top: 18px;
}
.ocd-np-col {
    background: #fff;
    border: 1px solid #f0d9d9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.ocd-np-col__head {
    background: linear-gradient(135deg, #a52121 0%, #7a1818 100%);
    color: #fff;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
}
.ocd-np-list { list-style: none; margin: 0; padding: 0; }
.ocd-np-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f7f0f0;
    height: 48px;
    box-sizing: border-box;
}
.ocd-np-item:last-child { border-bottom: none; }
.ocd-np-item:hover { background: #fdf7f7; }
.ocd-np-num {
    flex: 0 0 30px;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbeaea;
    color: #a52121;
    font-weight: 700;
    border-radius: 50%;
    font-size: 13px;
}
.ocd-np-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 14px;
    color: #1a2b3c;
}
.ocd-np-name .ocd-sigle { color: #8a94a6; font-weight: 400; font-size: 12px; }
.ocd-np-empty { padding: 30px 16px; text-align: center; color: #b08a8a; font-size: 14px; }
.ocd-np-footer { padding: 14px; text-align: center; border-top: 1px solid #f7f0f0; }
.ocd-np-more {
    background: #ff8500;
    color: #fff;
    border: none;
    padding: 9px 22px;
    border-radius: 7px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    transition: background .15s;
}
.ocd-np-more:hover { background: #e67700; }
.ocd-np-more:disabled { opacity: .6; cursor: default; }

@media (max-width: 900px) {
    .ocd-np-3col { grid-template-columns: 1fr; }
}

/* Modern Pagination Styles */
.pagination {
    background: white;
    border-radius: 16px;
    padding: 24px 32px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

.pagination-stats {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-stats svg {
    width: 16px;
    height: 16px;
    color: #94a3b8;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Navigation Buttons */
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    min-width: 44px;
    height: 44px;
    position: relative;
    overflow: hidden;
}

.page-btn:hover:not(.disabled):not(.active) {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

.page-btn.active {
    background: linear-gradient(135deg, #058aea 0%, #058aea 100%);
    border-color: #6366f1;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px 0 rgba(99, 102, 241, 0.3);
}

.page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f8fafc;
    color: #94a3b8;
    border-color: #f1f5f9;
}

.page-btn.disabled:hover {
    transform: none;
    box-shadow: none;
    background: #f8fafc;
}

/* Navigation Arrow Buttons */
.page-btn.nav-btn {
    min-width: auto;
    padding: 10px 14px;
    font-weight: 600;
}

.page-btn.nav-btn:hover:not(.disabled) {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: #6366f1;
    color: white;
}

.page-btn.nav-btn svg {
    width: 16px;
    height: 16px;
}

/* Ellipsis */
.page-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #94a3b8;
    font-weight: 600;
}

/* Per Page Selector */
.per-page-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.per-page-label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.per-page-select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.per-page-select:hover {
    border-color: #cbd5e1;
}

.per-page-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .pagination {
        padding: 20px 24px;
        flex-direction: column;
        gap: 20px;
    }

    .pagination-info {
        order: 1;
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .pagination-controls {
        order: 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    .per-page-selector {
        order: 2;
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .page-btn {
        min-width: 40px;
        height: 40px;
        padding: 8px 12px;
        font-size: 13px;
    }

    .page-btn.nav-btn {
        padding: 8px 10px;
    }

    .page-numbers {
        gap: 2px;
    }

    .pagination-stats {
        flex-direction: column;
        text-align: center;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .pagination {
        padding: 16px 20px;
    }

    .page-numbers {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-btn {
        min-width: 36px;
        height: 36px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .page-btn.nav-btn {
        padding: 6px 8px;
    }

    .page-btn.nav-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* Loading State */
.pagination.loading {
    opacity: 0.6;
    pointer-events: none;
}

.pagination.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #6366f1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Smooth transitions for page changes */
.pagination-fade-enter {
    opacity: 0;
    transform: translateY(10px);
}

.pagination-fade-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

/* Results info styling */
.results-count {
    font-weight: 600;
    color: #1e293b;
}

.total-count {
    color: #6366f1;
    font-weight: 600;
}
/* Bannière compacte */
.hero-banner {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    color: white;
    height: 100px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="banner-pattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23banner-pattern)"/></svg>');
    opacity: 0.3;
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.8s ease-out;
}

.banner-main {
    display: flex;
    align-items: center;
    gap: 30px;
}

.banner-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.banner-title {
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    line-height: 1.2;
}

.banner-subtitle {
    font-size: 0.95rem;
    opacity: 0.9;
    font-weight: 500;
}

.banner-highlight {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.banner-stats {
    display: flex;
    gap: 40px;
    align-items: center;
}

.stat-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.stat-number {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.75rem;
    opacity: 0.9;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.banner-badge {
    position: absolute;
    top: 15px;
    right: 20px;
    background: rgba(255, 133, 0, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(255, 133, 0, 0.3);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive bannière */
@media (max-width: 768px) {
    .banner-content {
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        padding: 15px 0;
    }

    .banner-main {
        gap: 20px;
        text-align: center;
    }

    .banner-title {
        font-size: 1.4rem;
    }

    .banner-subtitle {
        font-size: 0.85rem;
    }

    .banner-stats {
        gap: 20px;
    }

    .stat-item {
        padding: 8px 12px;
    }

    .stat-number {
        font-size: 1.1rem;
    }

    .banner-badge {
        position: static;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .hero-banner {
        height: auto;
        min-height: 100px;
        padding: 15px 0;
    }

    .banner-main {
        flex-direction: column;
        gap: 15px;
    }

    .banner-stats {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Style du bouton hamburger */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}
.menu-toggle span {
    display: block;
    height: 3px;
    background: #333;
    border-radius: 2px;
}

/* Navigation mobile cachée par défaut */
#main-nav {
    display: flex;
    gap: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    #main-nav {
        display: none;
        flex-direction: column;
        background: #fff;
        position: absolute;
        z-index: 1000;
        top: 60px; /* ou la hauteur de ton header */
        right: 0;
        left: 0;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    #main-nav.active {
        display: flex;
    }
}

/* HERO SECTION AVEC ACTUALITÉS */
.hero-news-section {
    color: white;
    padding: 10px 0;
    position: relative;
    overflow: hidden;
}

.hero-news-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="hero-pattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23hero-pattern)"/></svg>');
    opacity: 0.3;
    z-index: 1;
}

.hero-content {
    background: #eeeeee;
    position: relative;
    z-index: 10;
    padding: 20px;
}

.hero-header {
    text-align: center;
    margin-bottom: 40px;
    animation: fadeInUp 0.8s ease-out;
}

/* Titre "Échos des sites" : mot centré, trait bleu qui traverse de chaque côté */
.echos-title {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 680px;
    margin: 0 auto;
    color: #1473e7;
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.echos-title::before,
.echos-title::after {
    content: '';
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: #1473e7;
}
.echos-title span { white-space: nowrap; }

/* GRILLE DES ACTUALITÉS - Version desktop */
.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 40px;
    animation: fadeInUp 0.8s ease-out 0.3s backwards;
}

/* CONTAINER SLIDER MOBILE */
.news-mobile-slider {
    display: none;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    margin-top: 40px;
}

.news-slider-wrapper {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
}

.news-slide {
    flex: 0 0 100%;
    width: 100%;
}

/* NAVIGATION DU SLIDER */
.news-slider-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
    padding: 0 15px;
}

.news-nav-btn {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #009639;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #009639;
    transition: all 0.3s ease;
    pointer-events: all;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 150, 57, 0.2);
}

.news-nav-btn:hover {
    background: #009639;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 150, 57, 0.4);
}

.news-nav-btn:active {
    transform: scale(0.95);
}

/* INDICATEURS DU SLIDER */
.news-slider-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
    padding: 20px 0;
}

.news-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.news-indicator.active {
    background: #009639;
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(0, 150, 57, 0.2);
}

.news-indicator:hover:not(.active) {
    background: #94a3b8;
    transform: scale(1.1);
}

/* CARTE D'ACTUALITÉ */
.news-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.news-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

/* IMAGE DE L'ACTUALITÉ */
.news-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
}

.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
}

.news-card:hover .news-img {
    transform: scale(1.1);
}

.news-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
}

/* BADGE DE DATE */
.news-date-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 133, 0, 0.95);
    color: white;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(255, 133, 0, 0.3);
    z-index: 5;
}

/* CONTENU DE L'ACTUALITÉ */
.news-content {
    padding: 25px;
    color: #2c3e50;
}

.news-category {
    display: inline-block;
    background: linear-gradient(135deg, #009639, #007429);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.news-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.4;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 4.2em;
}

.news-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-link:hover {
    color: #009639;
}

.news-excerpt {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
}

/* FOOTER DE LA CARTE */
.news-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.8rem;
    color: #6c757d;
}

.news-author,
.news-views {
    display: flex;
    align-items: center;
    gap: 5px;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #009639;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 6px 12px;
    border-radius: 15px;
    background: rgba(0, 150, 57, 0.1);
}

.news-read-more:hover {
    background: #009639;
    color: white;
    transform: translateX(3px);
}

/* BOUTON VOIR PLUS */
.news-see-more-container {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.news-see-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #058aea 0%, #058aea 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    border: 2px solid transparent;
}

.news-see-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
    background: linear-gradient(135deg, #058aea 0%, #058aea 100%);
    border-color: rgba(255, 255, 255, 0.2);
}

.news-see-more-btn:hover .btn-arrow {
    transform: translateX(4px);
}

.news-see-more-btn:hover .btn-icon {
    transform: rotate(360deg);
    opacity: 0.8;
}

.btn-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.025em;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.btn-arrow {
    transition: transform 0.3s ease;
    opacity: 0.9;
}

/* ANIMATIONS */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation décalée pour les cartes desktop */
.news-card:nth-child(1) { animation: slideIn 0.6s ease-out 0.1s backwards; }
.news-card:nth-child(2) { animation: slideIn 0.6s ease-out 0.2s backwards; }
.news-card:nth-child(3) { animation: slideIn 0.6s ease-out 0.3s backwards; }
.news-card:nth-child(4) { animation: slideIn 0.6s ease-out 0.4s backwards; }

/* RESPONSIVE DESIGN */

/* Tablettes larges - 3 colonnes */
@media (max-width: 1200px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .news-grid .news-card:nth-child(4) {
        grid-column: 1 / -1;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Tablettes - 2 colonnes */
@media (max-width: 968px) {
    .hero-news-section {
        padding: 40px 0;
    }

    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 30px;
    }

    .news-image {
        height: 180px;
    }

    .news-content {
        padding: 20px;
    }

    .news-title {
        font-size: 1rem;
    }
}

/* RESPONSIVE MOBILE - ACTIVATION DU SLIDER */
@media (max-width: 768px) {
    /* Masquer la grille normale */
    .news-grid {
        display: none;
    }

    /* Afficher le slider mobile */
    .news-mobile-slider {
        display: block;
        margin-top: 25px;
    }

    .hero-news-section {
        padding: 30px 0;
    }

    .hero-header {
        margin-bottom: 30px;
    }

    .news-card {
        border-radius: 15px;
        margin: 0 5px;
    }

    .news-image {
        height: 160px;
    }

    .news-content {
        padding: 18px;
    }

    .news-title {
        font-size: 0.95rem;
        -webkit-line-clamp: 2;
        min-height: 2.8em;
    }

    .news-footer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .news-meta {
        gap: 10px;
    }

    .news-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .news-slider-indicators {
        margin-top: 20px;
        padding: 15px 0;
    }

    .news-indicator {
        width: 10px;
        height: 10px;
    }

    /* Bouton voir plus responsive */
    .news-see-more-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
        gap: 0.5rem;
    }

    .news-see-more-container {
        margin-top: 2rem;
    }
}

/* Petits mobiles */
@media (max-width: 480px) {
    .hero-news-section {
        padding: 25px 0;
    }

    .news-image {
        height: 140px;
    }

    .news-content {
        padding: 15px;
    }

    .news-title {
        font-size: 0.9rem;
    }

    .news-date-badge {
        top: 10px;
        right: 10px;
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    .news-category {
        padding: 4px 8px;
        font-size: 0.7rem;
        margin-bottom: 10px;
    }

    .news-excerpt {
        font-size: 0.85rem;
        margin-bottom: 15px;
    }

    .news-read-more {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .news-nav-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .news-slider-navigation {
        padding: 0 10px;
    }

    .btn-text {
        display: none;
    }

    .news-see-more-btn::after {
        content: "Voir plus";
        font-weight: 600;
    }
}

/* États de chargement */
.news-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    color: white;
    font-weight: 600;
    text-align: center;
    gap: 15px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Gestes tactiles pour mobile */
@media (max-width: 768px) {
    .news-mobile-slider {
        touch-action: pan-y;
        user-select: none;
    }

    .news-slider-wrapper {
        cursor: grab;
    }

    .news-slider-wrapper:active {
        cursor: grabbing;
    }

    /* Zone de clic suffisamment grande pour les liens mobiles */
    .news-read-more {
        padding: 10px 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .news-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }
}
.news-carousel {
    position: relative;
    margin-top: 40px;
    animation: fadeInUp 0.8s ease-out 0.3s backwards;
}
.news-carousel__viewport {
    overflow: hidden;
    border-radius: 15px;
}
.news-carousel__track {
    display: flex;
    gap: 30px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.news-carousel__track > .news-card {
    flex: 0 0 calc((100% - 90px) / 4); /* 4 cartes visibles, 3 gaps de 30px */
    margin: 0; /* on neutralise le margin éventuel hérité */
}
/* Flèches */
.news-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: #ffffff;
    color: #009639;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 150, 57, 0.25);
    transition: all 0.25s ease;
    z-index: 5;
}
.news-carousel__btn:hover:not(:disabled) {
    background: #009639;
    color: #ffffff;
    transform: translateY(-50%) scale(1.08);
}
.news-carousel__btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.news-carousel__btn--prev { left: 8px; }
.news-carousel__btn--next { right: 8px; }
.news-carousel__btn svg { width: 22px; height: 22px; }

/* Tablette : 2 cartes visibles */
@media (max-width: 1024px) and (min-width: 769px) {
    .news-carousel__track > .news-card {
        flex: 0 0 calc((100% - 30px) / 2);
    }
}
/* Mobile : on cache le slider desktop, le slider mobile existant prend le relais */
@media (max-width: 768px) {
    .news-carousel { display: none; }
}
.top-sites-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 80px 0;
    position: relative;
}

.top-sites-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid2" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23058aea" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid2)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.top-sites-section .container {
    position: relative;
    z-index: 2;
}

/* ---- Wrapper d'une ligne complète : bandeau coloré qui couvre toute la largeur ---- */
.top-sites__row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.top-sites__row[hidden] { display: none; }

/* Niveau 1 : bandeau bleu foncé */
.top-sites__row--main {
    background-color: #054a82;
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 6px 20px rgba(5, 74, 130, 0.25);
}

/* Niveau 2 : bandeau bleu logo */
.top-sites__row--sub {
    background-color: #058aea;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(5, 138, 234, 0.22);
}

/* Niveau 3 : bandeau bleu clair */
.top-sites__row--dom {
    background-color: #bcdefa;
    border: 1px solid #bcdefa;
    padding: 10px 14px;
    border-radius: 10px;
}

/* ---- Onglets niveau 1 (Tous / Public / Privé) — conteneur flex transparent ---- */
.top-sites__tabs {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.top-sites__tab-btn {
    background: transparent;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 12px 32px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all .25s ease;
    font-family: inherit;
}

.top-sites__tab-btn:hover {
    background: rgba(255,255,255,.12);
}

.top-sites__tab-btn.active {
    background-color: #058aea;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* ---- Bouton "Voir le classement" (à droite, dans le bandeau coloré) ---- */
.top-sites__valider {
    background: #ff8500;
    color: #ffffff;
    border: 0;
    border-radius: 6px;
    padding: 7px 14px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
    box-shadow: 0 3px 8px rgba(255, 133, 0, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
}
.top-sites__valider:hover {
    background: #e67400;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(255, 133, 0, 0.45);
}
.top-sites__valider:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(255, 133, 0, 0.4);
}

.top-sites__panel {
    display: none;
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(5, 138, 234, 0.10);
}

.top-sites__panel.active {
    display: block;
    animation: fadeInUp 0.4s ease;
}

/* ---- Sous-secteurs niveau 2 — conteneur flex transparent ---- */
.top-sites__subtabs {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.top-sites__subtab-btn {
    background: transparent;
    color: #ffffff;
    border: 0;
    border-radius: 6px;
    padding: 8px 18px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}
.top-sites__subtab-btn:hover { background: rgba(255,255,255,.18); }
.top-sites__subtab-btn.active {
    background: #ffffff;
    color: #054a82;
    font-weight: 600;
}

/* ---- Domaines niveau 3 — conteneur flex transparent ---- */
.top-sites__domains {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.top-sites__domain-btn {
    background: #ffffff;
    color: #054a82;
    border: 1px solid #bcdefa;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}
.top-sites__domain-btn:hover {
    background: #058aea;
    color: #ffffff;
    border-color: #058aea;
}
.top-sites__domain-btn.active {
    background: #058aea;
    color: #ffffff;
    border-color: #058aea;
    font-weight: 600;
}

/* Responsive : sur mobile, le row passe en colonne et le bouton en pleine largeur */
@media (max-width: 600px) {
    .top-sites__row { flex-direction: column; align-items: stretch; }
    .top-sites__valider { width: 100%; text-align: center; }
}

/* ---- Badges de statut (couleurs sémantiques conservées) ---- */
.site-statut {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.site-statut--green  { background: #e6f7ec; color: #1a8a4a; }
.site-statut--red    { background: #fdecec; color: #c92929; }
.site-statut--gray   { background: #eef0f2; color: #6b7780; }
.site-statut--yellow { background: #fff5d6; color: #a86b00; }

.site-sigle  { color: #888; font-size: 12px; margin-left: 6px; }
.site-no-url { color: #6b7780; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

.top-sites__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.top-sites__length label,
.top-sites__search label {
    font-size: 14px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.top-sites__length select,
.top-sites__search input {
    padding: 8px 12px;
    border: 1px solid #d4dbe0;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s ease;
}

.top-sites__length select:focus,
.top-sites__search input:focus {
    border-color: #058aea;
    box-shadow: 0 0 0 3px rgba(5, 138, 234, 0.15);
}

.top-sites__table-wrapper {
    overflow-x: auto;
    border: 1px solid #058aea;
    border-radius: 10px;
}

.top-sites__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #ffffff;
}

.top-sites__table thead th {
    background: #f0f7fe;
    color: #2c3e50;
    font-weight: 700;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 2px solid #058aea;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.top-sites__table thead th .sort-icon {
    opacity: .4;
    margin-left: 6px;
    font-size: 11px;
}

.top-sites__table thead th.sorted-asc .sort-icon::before  { content: '▲'; opacity: 1; color: #058aea; }
.top-sites__table thead th.sorted-desc .sort-icon::before { content: '▼'; opacity: 1; color: #058aea; }
.top-sites__table thead th .sort-icon::before              { content: '⇅'; }

.top-sites__table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef1f3;
    color: #333;
}

.top-sites__table tbody tr:nth-child(even) { background: #f8fbff; }
.top-sites__table tbody tr:hover           { background: #e7f3fe; }
.top-sites__table tbody tr:last-child td   { border-bottom: 0; }

.top-sites__table tbody td a {
    color: #058aea;
    text-decoration: none;
    font-weight: 600;
}
.top-sites__table tbody td a:hover { text-decoration: underline; }

.rank-up   { color: #1a8a4a; font-weight: 600; }
.rank-down { color: #d9534f; font-weight: 600; }
.rank-same { color: #999; }

.top-sites__empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-style: italic;
}

.top-sites__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.top-sites__info { font-size: 14px; color: #666; }

.top-sites__pagination {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.top-sites__pagination button {
    min-width: 36px;
    height: 36px;
    border: 1px solid #d4dbe0;
    background: #ffffff;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: #444;
    transition: all .2s ease;
}

.top-sites__pagination button:hover:not(:disabled):not(.active) {
    border-color: #058aea;
    color: #058aea;
}

.top-sites__pagination button.active {
    background: #058aea;
    color: #ffffff;
    border-color: #058aea;
    font-weight: 600;
}

.top-sites__pagination button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .top-sites-section { padding: 50px 0; }
    .top-sites__tab-btn { padding: 10px 18px; font-size: 14px; }
    .top-sites__panel { padding: 15px; }
    .top-sites__table thead th,
    .top-sites__table tbody td { padding: 10px 12px; font-size: 13px; }
}
.section-divider {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.section-divider__line {
    height: 2px;
    background: linear-gradient(90deg,
    transparent 0%,
    #d0d6db 30%,
    #d0d6db 70%,
    transparent 100%
    );
    position: relative;
}
.section-divider__line::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #d0d6db;
    border-radius: 50%;
    box-shadow: -16px 0 0 #d0d6db, 16px 0 0 #d0d6db;
}
.no-sites-section {
    background: linear-gradient(135deg, #fff8f8 0%, #ffefee 100%);
    padding: 80px 0;
    position: relative;
}

.no-sites-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="gridR" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23dc3545" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23gridR)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.no-sites-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.no-sites-section .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.no-sites-section .section-subtitle {
    color: #dc3545;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.no-sites-section .section-title {
    color: #a82020;
    font-size: 36px;
    font-weight: 700;
    margin: 0;
}

/* ---- Wrapper d'une ligne complète ---- */
.no-sites__row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.no-sites__row[hidden] { display: none; }

/* Niveau 1 : bandeau rouge foncé */
.no-sites__row--main {
    background-color: #a82020;
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 6px 20px rgba(168, 32, 32, 0.25);
}

/* Niveau 2 : bandeau rouge alerte */
.no-sites__row--sub {
    background-color: #dc3545;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(220, 53, 69, 0.22);
}

/* Niveau 3 : bandeau rose pâle */
.no-sites__row--dom {
    background-color: #fdd5d5;
    border: 1px solid #fdd5d5;
    padding: 10px 14px;
    border-radius: 10px;
}

/* ---- Onglets niveau 1 ---- */
.no-sites__tabs {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.no-sites__tab-btn {
    background: transparent;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 12px 32px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all .25s ease;
    font-family: inherit;
}
.no-sites__tab-btn:hover { background: rgba(255,255,255,.12); }
.no-sites__tab-btn.active {
    background-color: #dc3545;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* ---- Bouton "Voir la liste" ---- */
.no-sites__valider {
    background: #ff8500;
    color: #ffffff;
    border: 0;
    border-radius: 6px;
    padding: 7px 14px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
    box-shadow: 0 3px 8px rgba(255, 133, 0, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
}
.no-sites__valider:hover {
    background: #e67400;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(255, 133, 0, 0.45);
}
.no-sites__valider:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(255, 133, 0, 0.4);
}

/* ---- Sous-secteurs niveau 2 ---- */
.no-sites__subtabs {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.no-sites__subtab-btn {
    background: transparent;
    color: #ffffff;
    border: 0;
    border-radius: 6px;
    padding: 8px 18px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}
.no-sites__subtab-btn:hover { background: rgba(255,255,255,.18); }
.no-sites__subtab-btn.active {
    background: #ffffff;
    color: #a82020;
    font-weight: 600;
}

/* ---- Domaines niveau 3 ---- */
.no-sites__domains {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.no-sites__domain-btn {
    background: #ffffff;
    color: #a82020;
    border: 1px solid #f9bbbb;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}
.no-sites__domain-btn:hover {
    background: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
}
.no-sites__domain-btn.active {
    background: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
    font-weight: 600;
}

/* ---- Panel ---- */
.no-sites__panel {
    display: none;
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(168, 32, 32, 0.10);
}
.no-sites__panel.active {
    display: block;
    animation: fadeInUp 0.4s ease;
}

/* ---- Contrôles tableau (longueur + recherche) ---- */
.no-sites__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.no-sites__length select,
.no-sites__search input {
    padding: 6px 10px;
    border: 1px solid #f9bbbb;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
}
.no-sites__length select:focus,
.no-sites__search input:focus {
    outline: none;
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}
.no-sites__search input { min-width: 220px; }

/* ---- Tableau ---- */
.no-sites__table-wrapper {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #fdd5d5;
}
.no-sites__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.no-sites__table thead th {
    background: #fff5f5;
    color: #a82020;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 2px solid #dc3545;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    position: relative;
    white-space: nowrap;
}
.no-sites__table thead th:hover { background: #fce8e8; }
.no-sites__table thead th .sort-icon {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #d0a0a0;
    opacity: 0.5;
}
.no-sites__table thead th.sorted-asc  .sort-icon { border-bottom: 6px solid #dc3545; opacity: 1; }
.no-sites__table thead th.sorted-desc .sort-icon {
    border-bottom: 0;
    border-top: 6px solid #dc3545;
    opacity: 1;
}
.no-sites__table tbody tr {
    transition: background .15s ease;
}
.no-sites__table tbody tr:nth-child(even) { background: #fffafa; }
.no-sites__table tbody tr:hover { background: #fdd5d5; }
.no-sites__table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #fce4e4;
    color: #333;
}
.no-sites__name {
    font-weight: 600;
    color: #a82020;
}
.no-sites__empty {
    text-align: center;
    color: #a87070;
    font-style: italic;
    padding: 30px 0 !important;
}

/* ---- Footer (info + pagination) ---- */
.no-sites__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.no-sites__info { color: #666; font-size: 13px; }
.no-sites__pagination {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.no-sites__pagination button {
    background: #ffffff;
    color: #a82020;
    border: 1px solid #fdd5d5;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: all .15s ease;
}
.no-sites__pagination button:hover:not(:disabled):not(.active) {
    background: #fdd5d5;
}
.no-sites__pagination button.active {
    background: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
}
.no-sites__pagination button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Statut "Sans site" en rouge */
.site-statut.site-statut--red {
    background: #fdd5d5;
    color: #a82020;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 600px) {
    .no-sites__row { flex-direction: column; align-items: stretch; }
    .no-sites__valider { width: 100%; text-align: center; }
    .no-sites-section { padding: 50px 0; }
}

/* ============================================================
       BOUTON "INSCRIRE VOTRE ENTREPRISE"
       ============================================================ */
.no-sites__cta-wrapper {
    text-align: center;
    margin-bottom: 35px;
}

.no-sites__inscrire-btn {
    background: linear-gradient(135deg, #ff8500 0%, #e67400 100%);
    color: #ffffff;
    border: 0;
    border-radius: 50px;
    padding: 14px 36px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .3s ease;
    font-family: inherit;
    box-shadow: 0 6px 18px rgba(255, 133, 0, 0.4);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.no-sites__inscrire-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 133, 0, 0.55);
}
.no-sites__inscrire-btn:active { transform: translateY(-1px); }
.no-sites__inscrire-btn::before {
    content: "+";
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
}

/* ============================================================
       MODAL D'INSCRIPTION ENTREPRISE
       ============================================================ */
.ocd-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.ocd-modal.active {
    display: flex;
    animation: fadeInModal 0.3s ease;
}
@keyframes fadeInModal { from { opacity: 0 } to { opacity: 1 } }

.ocd-modal__dialog {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    animation: slideUpModal 0.4s ease;
}
@keyframes slideUpModal {
    from { transform: translateY(40px); opacity: 0 }
    to   { transform: translateY(0);    opacity: 1 }
}

.ocd-modal__header {
    background: linear-gradient(135deg, #a82020 0%, #dc3545 100%);
    color: #fff;
    padding: 22px 28px;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 5;
}
.ocd-modal__header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}
.ocd-modal__close {
    background: rgba(255,255,255,0.2);
    border: 0;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    transition: all .2s ease;
}
.ocd-modal__close:hover { background: rgba(255,255,255,0.35); transform: rotate(90deg); }

.ocd-modal__body { padding: 28px; }

.ocd-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}
.ocd-form__group { display: flex; flex-direction: column; }
.ocd-form__group--full { grid-column: 1 / -1; }

.ocd-form__label {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
}
.ocd-form__label .required { color: #dc3545; }

.ocd-form__input,
.ocd-form__select {
    padding: 11px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    transition: all .2s ease;
    background: #fff;
    width: 100%;
}
.ocd-form__input:focus,
.ocd-form__select:focus {
    outline: none;
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}
.ocd-form__input.is-invalid,
.ocd-form__select.is-invalid {
    border-color: #dc3545;
    background: #fff8f8;
}
.ocd-form__error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    display: none;
}
.ocd-form__error.show { display: block; }

.ocd-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.ocd-form__btn {
    padding: 11px 26px;
    border-radius: 8px;
    border: 0;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}
.ocd-form__btn--cancel { background: #f0f0f0; color: #555; }
.ocd-form__btn--cancel:hover { background: #e0e0e0; }
.ocd-form__btn--submit {
    background: linear-gradient(135deg, #009639 0%, #00b347 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 150, 57, 0.35);
}
.ocd-form__btn--submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 150, 57, 0.45);
}
.ocd-form__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.ocd-form__feedback {
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    display: none;
}
.ocd-form__feedback.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; display: block; }
.ocd-form__feedback.error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; display: block; }

/* ============================================================
       ÉCRAN DE CONFIRMATION DE SUCCÈS
       ============================================================ */
.ocd-success {
    display: none;
    text-align: center;
    padding: 30px 20px 10px;
    animation: fadeInSuccess 0.5s ease;
}
.ocd-success.show { display: block; }
@keyframes fadeInSuccess {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

.ocd-success__icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #009639 0%, #00b347 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 150, 57, 0.35);
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popIn {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.ocd-success__icon svg {
    width: 50px;
    height: 50px;
    stroke: #fff;
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: drawCheck 0.5s ease 0.3s forwards;
}
@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}

.ocd-success__title {
    font-size: 22px;
    font-weight: 700;
    color: #155724;
    margin: 0 0 12px;
}

.ocd-success__message {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 8px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.ocd-success__hint {
    font-size: 13px;
    color: #888;
    margin: 16px 0 28px;
    font-style: italic;
}

.ocd-success__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    margin-top: 10px;
}

.ocd-success__btn {
    background: linear-gradient(135deg, #009639 0%, #00b347 100%);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 12px 36px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(0, 150, 57, 0.35);
}
.ocd-success__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 150, 57, 0.45);
}

@media (max-width: 600px) {
    .ocd-form__grid { grid-template-columns: 1fr; }
    .ocd-modal__header h3 { font-size: 17px; }
    .ocd-modal__body { padding: 20px; }
}
/* Styles pour les logos dans les liens utiles */
.link-content {
    padding: 30px 25px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 20px;
}

.link-logo {
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 150, 57, 0.1);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.link-logo img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo-fallback {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #009639;
    font-size: 24px;
}

.link-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    transition: color 0.3s ease;
    flex: 1;
}

.link-card:hover .link-logo {
    transform: scale(1.05);
}

.link-card:hover .link-logo img {
    transform: scale(1.1);
}

.link-card:hover .link-title {
    color: #058aea;
}

.link-card:hover .logo-fallback {
    color: #058aea;
}

/* Animation pour le logo au hover de la carte */
.link-card:hover .link-logo {
    animation: logoFloat 0.6s ease-in-out;
}

@keyframes logoFloat {
    0%, 100% { transform: scale(1.05) translateY(0); }
    50% { transform: scale(1.05) translateY(-5px); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .link-content {
        padding: 25px 20px;
        gap: 15px;
        flex-direction: column;
        text-align: center;
    }

    .link-logo {
        width: 70px;
        height: 70px;
    }

    .link-logo img {
        width: 50px;
        height: 50px;
    }

    .logo-fallback {
        width: 50px;
        height: 50px;
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .link-content {
        gap: 12px;
    }

    .link-logo {
        width: 60px;
        height: 60px;
    }

    .link-logo img {
        width: 40px;
        height: 40px;
    }

    .logo-fallback {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    .link-title {
        font-size: 1.1rem;
    }
}

/* Style pour les cartes en mode grille */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 2;
}

/* Amélioration de l'effet hover sur toute la carte */
.link-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.link-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ===================================================================
   Menu fixe pendant le defilement (ajoute lors du decoupage)
   =================================================================== */
header {
    position: sticky;   /* avant: static */
    top: 0;
    z-index: 1000;
    transition: box-shadow .25s ease;
}
header.is-stuck {
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
}

/* ===================================================================
   Bannière publicitaire animée (3 slides défilantes, h<=100) — version illustrée
   =================================================================== */
.ocd-adbanner { padding: 14px 0; }

.ocd-adbanner__slot {
    position: relative;
    width: 100%;
    max-width: 1092px;
    height: 100px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e3e6ea;
    box-shadow: 0 6px 20px rgba(20,115,231,.12);
}

.ocd-adbanner__tag {
    position: absolute;
    top: 6px; left: 8px;
    z-index: 5;
    font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
    color: #fff; background: rgba(0,0,0,.40);
    padding: 2px 8px; border-radius: 4px;
    pointer-events: none;
}

.ocd-adslide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 18px;
    background: var(--bg, #1473e7);
    color: #fff;
    text-decoration: none;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .6s ease;
}
.ocd-adslide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

/* texture diagonale pour casser l'aplat */
.ocd-adslide::after {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 9px);
    pointer-events: none;
}

/* zone visuelle gauche (illustration SVG OU photo) */
.ocd-adslide__art {
    position: relative;
    z-index: 1;
    width: 190px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.14);
}
.ocd-adslide__art svg { width: 100%; height: 100%; display: block; }

/* option photo : <img class="ocd-adslide__img"> a la place du SVG */
.ocd-adslide__img {
    width: 190px; height: 100px;
    object-fit: cover; flex-shrink: 0; display: block;
    position: relative; z-index: 1;
}

.ocd-adslide__text {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: 3px;
    flex: 1; min-width: 0;
}
.ocd-adslide__eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    opacity: .85;
}
.ocd-adslide__title {
    font-size: clamp(15px, 1.9vw, 21px); font-weight: 800; line-height: 1.1;
    text-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.ocd-adslide__desc { font-size: 13px; opacity: .92; }

.ocd-adslide__cta {
    position: relative; z-index: 2;
    flex-shrink: 0;
    background: #fff; color: #0e57c2; font-weight: 700; font-size: 13px;
    padding: 8px 16px; border-radius: 8px; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.ocd-adbanner__dots {
    position: absolute; bottom: 6px; right: 10px; z-index: 5;
    display: flex; gap: 5px;
}
.ocd-addot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,.45); transition: background .3s ease;
}
.ocd-addot.is-active { background: #fff; }

@media (max-width: 600px) {
    .ocd-adslide__art, .ocd-adslide__img { width: 96px; }
    .ocd-adslide__cta, .ocd-adslide__desc { display: none; }
}

/* ===================================================================
   Vidéo dans les cartes d'actualité (occupe la même zone que l'image)
   =================================================================== */
.news-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
}
.news-video iframe,
.news-video__player {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.news-video__player {
    object-fit: cover;   /* la vidéo remplit le cadre */
    background: #000;
}

/* Façade YouTube/Vimeo : miniature + bouton lecture */
.news-video--embed {
    cursor: pointer;
    background: linear-gradient(135deg, #1473e7, #0b3f9c);  /* fond si miniature absente */
}
.news-video__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 50px;
    border-radius: 12px;
    background: #ff0000;                       /* rouge YouTube, toujours visible */
    box-shadow: 0 3px 12px rgba(0, 0, 0, .45);
    transition: transform .2s ease, background .2s ease;
    z-index: 2;
}
.news-video__play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent #fff;
}
.news-video--embed:hover .news-video__play {
    background: #cc0000;
    transform: translate(-50%, -50%) scale(1.08);
}
.news-video.is-playing .news-video__play,
.news-video.is-playing .news-video__thumb { display: none; }

/* ===================================================================
   Champ de recherche de rang dans la barre bleue (top-sites)
   =================================================================== */
.top-sites__search {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    background: #fff;
    border-radius: 8px;
    flex-shrink: 0;
}
.top-sites__search input {
    border: 0;
    outline: none;
    background: transparent;
    height: 100%;
    width: 220px;
    padding: 0 12px;
    font-size: 14px;
    color: #222;
    border-radius: 8px 0 0 8px;
    font-family: inherit;
}
.top-sites__search input::placeholder { color: #9aa1a9; }
.top-sites__search button {
    flex-shrink: 0;
    border: 0;
    cursor: pointer;
    width: 44px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #058aea;
    color: #fff;
    border-radius: 0 8px 8px 0;
    transition: background .2s ease;
}
.top-sites__search button:hover { background: #0e57c2; }
.top-sites__search button svg { width: 18px; height: 18px; }

/* Dans la barre rouge "Sites non parvenus" : bouton accordé au rouge de la section */
.no-sites__row .top-sites__search button { background: #dc3545; }
.no-sites__row .top-sites__search button:hover { background: #b02a37; }

/* Croix pour effacer le mot-clé saisi dans la zone de recherche */
.top-sites__search button.top-sites__search-clear {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-right: 4px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: #9aa1a9;
    font-size: 20px;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.top-sites__search button.top-sites__search-clear:hover {
    background: #eef0f3;
    color: #444;
}
.top-sites__search button.top-sites__search-clear[hidden] { display: none; }

/* liste déroulante des résultats */
.top-sites__search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 360px;
    max-width: 86vw;
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0,0,0,.20);
    padding: 6px;
    z-index: 60;
    text-align: left;
}
.top-sites__search-results[hidden] { display: none; }

.ts-rs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #222;
    cursor: pointer;
}
.ts-rs-item:hover { background: #f1f6ff; }
.ts-rs-rank {
    flex-shrink: 0;
    min-width: 44px;
    height: 32px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1473e7;
    color: #fff;
    font-weight: 800;
    border-radius: 7px;
    font-size: 14px;
}
.ts-rs-rank--nc { background: #aab2bd; font-size: 11px; }
.ts-rs-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ts-rs-name {
    font-weight: 600; font-size: 14px; color: #222;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-rs-meta { font-size: 12px; color: #6b7280; }
.ts-rs-hint, .ts-rs-empty { padding: 10px; color: #6b7280; font-size: 13px; text-align: center; }

/* Modal des rangs d'une structure (général / secteur / domaine) */
.rang-modal { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rang-modal[hidden] { display: none; }
.rang-modal__overlay { position: absolute; inset: 0; background: rgba(8, 26, 54, .55); }
.rang-modal__box {
    position: relative; z-index: 1; width: 100%; max-width: 460px;
    background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); padding: 26px;
    animation: rangModalIn .18s ease;
}
@keyframes rangModalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.rang-modal__close {
    position: absolute; top: 10px; right: 14px; border: none; background: none;
    font-size: 28px; line-height: 1; color: #9aa3b0; cursor: pointer;
}
.rang-modal__close:hover { color: #2b3442; }
.rang-modal__head { margin-bottom: 18px; padding-right: 24px; }
.rang-modal__title { font-size: 1.25rem; color: #0e57c2; font-weight: 700; margin: 0 0 4px; }
.rang-modal__sigle { color: #8a93a2; font-weight: 400; }
.rang-modal__meta { color: #009639; font-weight: 600; font-size: .9rem; }
.rang-modal__rows { display: flex; flex-direction: column; gap: 12px; }
.rang-modal__row {
    display: flex; align-items: center; gap: 14px;
    background: #f7fafe; border: 1px solid #e9f0f8; border-radius: 12px; padding: 14px 16px;
}
.rang-modal__rk {
    flex: 0 0 auto; min-width: 56px; height: 48px; padding: 0 8px;
    display: flex; align-items: center; justify-content: center;
    background: #1473e7; color: #fff; border-radius: 10px; font-weight: 800; font-size: 20px;
}
.rang-modal__rk small { font-size: 11px; font-weight: 700; margin-left: 1px; }
.rang-modal__lbl { display: flex; flex-direction: column; min-width: 0; }
.rang-modal__lbl b { color: #2b3442; font-size: .98rem; }
.rang-modal__lbl span { color: #8a93a2; font-size: .85rem; }
.rang-modal__loading { text-align: center; color: #8a93a2; padding: 30px; }
.rang-modal__visit {
    display: block; text-align: center; margin-top: 18px;
    background: #058aea; color: #fff; text-decoration: none; font-weight: 700;
    padding: 12px; border-radius: 10px; transition: background .15s;
}
.rang-modal__visit:hover { background: #0e57c2; }

/* Modal « détails » des structures non parvenues (réutilise les styles .rang-modal__*) */
.np-modal { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.np-modal[hidden] { display: none; }
.np-modal .rang-modal__title { color: #a82020; }
.np-modal .rang-modal__meta { color: #a82020; }

/* Structure non parvenue cliquable (ouvre le modal détails) */
.ocd-np-item--link { cursor: pointer; transition: background .15s ease; }
.ocd-np-item--link:hover,
.ocd-np-item--link:focus { background: #fdeced; outline: none; border-radius: 6px; }

@media (max-width: 768px) {
    .top-sites__search { width: 100%; }
    .top-sites__search input { width: 100%; }
    .top-sites__search-results { width: 100%; }
}

/* =========================================================================
   FOOTER MOBILE — empilement en une seule colonne.
   Placé en fin de fichier À DESSEIN : les styles de base du footer
   (3 colonnes) sont définis plus haut mais APRÈS la 1re media query, donc
   ils l'écrasaient. En mettant l'override ici (dernier dans le fichier),
   il l'emporte. La newsletter passe ainsi tout en bas, sur toute la largeur.
   ========================================================================= */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;   /* une colonne : logo, nav, newsletter empilés */
        gap: 40px;
        text-align: center;
    }

    /* Autorise chaque bloc à rétrécir sous la largeur de son contenu
       (sinon le champ e-mail force un débordement horizontal). */
    .footer-section { min-width: 0; }
    .footer-about   { max-width: 100%; }

    .footer-social { justify-content: center; }

    /* Newsletter : pleine largeur, champ + bouton empilés verticalement. */
    .footer-newsletter      { max-width: 100%; }
    .newsletter-input-group { flex-direction: column; }
    .newsletter-input       { width: 100%; min-width: 0; }
    .newsletter-submit      { width: 100%; border-radius: 0 0 8px 8px; }
}

/* =========================================================================
   MENU MOBILE — TIROIR LATÉRAL (drawer)
   -------------------------------------------------------------------------
   Style volontairement différent du menu PC : un panneau qui glisse depuis
   la droite, avec fond assombri (backdrop), croix de fermeture, liens pleine
   largeur et sous-menu « Top Info » en accordéon. Tout défile si besoin.
   Le backdrop et la croix sont injectés par le JS (voir partials/scripts).
   Placé en fin de fichier pour l'emporter sur les règles définies plus haut.
   ========================================================================= */
@media (max-width: 768px) {

    /* Le tiroir caché est translaté hors écran à droite ; on empêche ce
       débordement de créer un scroll horizontal sur la page. */
    html, body { overflow-x: hidden; }

    /* IMPORTANT : ne pas donner de contexte d'empilement au header sur mobile
       (z-index:100 + position positionnée), sinon le tiroir — qui est un
       enfant du header — passerait DERRIÈRE le fond assombri. Le header reste
       donc en flux normal ; le tiroir est en position:fixed (ancré au viewport). */
    header { z-index: auto; }

    /* ---- Fond assombri derrière le tiroir ---- */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        z-index: 99998;
    }
    .nav-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    /* Bloque le défilement de la page quand le tiroir est ouvert. */
    body.nav-open {
        overflow: hidden;
    }

    /* ---- Le tiroir lui-même ---- */
    #main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(82vw, 320px);
        max-width: none;                 /* annule le max-width:72% du nav PC */
        height: 100%;
        max-height: none;
        margin: 0;
        padding: 64px 0 24px;            /* place pour la croix en haut */
        gap: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        background: #ffffff;
        border-radius: 0;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
        /* Toujours présent (display:flex) pour que le glissement s'anime ;
           masqué via visibility + translation hors écran. */
        display: flex;
        visibility: hidden;
        transform: translateX(100%);     /* caché à droite par défaut */
        transition: transform 0.3s ease, visibility 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 99999;                  /* au-dessus de tout (modals à 9999 inclus) */
    }
    #main-nav.active {
        visibility: visible;
        transform: translateX(0);        /* glisse à l'écran */
        /* Le 2e box-shadow (étalé sur 100vw) assombrit TOUT autour du tiroir.
           Comme c'est l'ombre du tiroir lui-même, ce voile ne peut jamais
           passer devant le panneau (fini le conflit de backdrop séparé). */
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18),
                    0 0 0 100vw rgba(0, 0, 0, 0.5);
    }

    /* ---- Croix de fermeture (injectée par le JS) ---- */
    .nav-close {
        position: absolute;
        top: 12px;
        right: 14px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        font-size: 30px;
        line-height: 1;
        color: #333;
        cursor: pointer;
        z-index: 2;
    }

    /* ---- Liens & bouton du sous-menu : pleine largeur, gros tap targets ---- */
    #main-nav > a,
    #main-nav .dropbtn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 22px;
        margin: 0;
        border: none;
        border-bottom: 1px solid #eef2f6;
        border-radius: 0;
        color: #0b3f9c;
        font-size: 16px;
        text-align: left;
        backdrop-filter: none;
        box-shadow: none;
    }
    #main-nav > a:hover,
    #main-nav > a.active {
        background: #058aea;
        color: #ffffff;
        transform: none;
        box-shadow: none;
    }

    /* ---- Sous-menu « Top Info » en accordéon ---- */
    .dropdown {
        display: block;
        width: 100%;
    }
    .dropdown-content {
        position: static;
        display: none;
        min-width: 0;
        margin: 0;
        background: #f4f8fc;            /* léger fond pour distinguer le sous-niveau */
        border: none;
        border-radius: 0;
        box-shadow: none;
        animation: none;
        overflow: hidden;
    }
    .dropdown-content::before { display: none; }   /* retire la petite flèche */
    .dropdown:hover .dropdown-content { display: none; }  /* neutralise le survol */
    .dropdown.open  .dropdown-content { display: block; }
    .dropdown-content a {
        padding: 13px 22px 13px 40px;   /* indentation = niveau enfant */
        border-bottom: 1px solid #e7eef5;
        color: #1473e7;
    }
    .dropdown-content a:hover {
        background: #058aea;
        color: #ffffff;
        transform: none;
        padding-left: 40px;
    }
    .dropdown-arrow {
        transition: transform 0.3s ease;
        color: #0b3f9c;
    }
    .dropdown.open .dropdown-arrow { transform: rotate(180deg); }
}

/* =========================================================================
   HEADER MOBILE FIXE — le logo et le bouton hamburger restent collés en haut
   pendant le défilement.
   -------------------------------------------------------------------------
   Sur mobile, `position: sticky` (défini plus haut) est neutralisé par
   `html, body { overflow-x: hidden }` du tiroir : on force donc un vrai
   `position: fixed`. Le tiroir #main-nav étant déplacé en enfant de <body>
   par le JS, fixer le header ne l'emprisonne plus (z-index sans conflit).
   Le décalage du contenu (padding-top sur <body>) est appliqué par le JS du
   layout, qui mesure la hauteur réelle du header (logo de taille variable).
   ========================================================================= */
@media (max-width: 768px) {
    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;   /* sous le tiroir (99999) et son voile, au-dessus du contenu */
    }
}