/* =============================================
   ALGÉRIE TOURISME v3.0
   ============================================= */
:root {
    --at-primary: #006233;
    --at-secondary: #D21034;
    --at-gold: #F5A623;
    --at-dark: #1a1a2e;
    --at-shadow: 0 4px 20px rgba(0,0,0,0.10);
    --at-radius: 14px;
    --at-transition: all 0.3s ease;
}

/* ---- HERO ---- */
.at-accueil { font-family: 'Segoe UI', sans-serif; }
.at-hero {
    background: linear-gradient(135deg, var(--at-primary) 0%, #004d27 100%);
    color: white; text-align: center;
    padding: 60px 20px 50px;
    border-radius: var(--at-radius);
    margin-bottom: 50px;
}
.at-hero h1 { font-size: 2.5rem; margin-bottom: 12px; font-weight: 800; }
.at-hero p  { font-size: 1.1rem; opacity: 0.9; margin-bottom: 24px; }

#at-search-wilaya, #at-search-lieux {
    width: 100%; max-width: 420px;
    padding: 14px 22px; border-radius: 50px;
    border: none; font-size: 1rem; outline: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* ---- SECTIONS ---- */
.at-section { margin-bottom: 56px; }
.at-section-title { font-size: 1.5rem; font-weight: 800; color: var(--at-dark); margin-bottom: 6px; }
.at-section-sub   { color: #888; font-size: 0.95rem; margin-bottom: 24px; }

/* ---- GRILLE WILAYAS ---- */
.at-wilayas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
.at-wilaya-card { text-decoration: none; color: inherit; display: block; transition: var(--at-transition); }
.at-wilaya-inner {
    background: white; border: 2px solid #e8e8e8;
    border-radius: var(--at-radius); padding: 22px 14px;
    text-align: center; transition: var(--at-transition);
    box-shadow: var(--at-shadow);
}
.at-wilaya-card:hover .at-wilaya-inner {
    border-color: var(--at-primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,98,51,0.15);
}
.at-wilaya-icon  { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.at-wilaya-inner h3 { font-size: 0.88rem; font-weight: 700; color: var(--at-dark); margin: 0 0 6px; }
.at-wilaya-count { font-size: 0.75rem; color: var(--at-primary); font-weight: 600; background: #e8f5ee; padding: 2px 10px; border-radius: 20px; display: inline-block; }
.at-wilaya-rating { font-size: 0.75rem; color: var(--at-gold); font-weight: 600; display: block; margin-top: 5px; }

/* ---- PAGE WILAYA ---- */
.at-wilaya-page { font-family: 'Segoe UI', sans-serif; }
.at-wilaya-hero {
    background: linear-gradient(135deg, var(--at-primary) 0%, #004d27 100%);
    color: white; padding: 40px 30px 36px;
    border-radius: var(--at-radius); margin-bottom: 32px;
}
.at-wilaya-hero h1 { font-size: 2rem; margin: 12px 0 10px; font-weight: 800; }
.at-wilaya-stats   { display: flex; gap: 20px; font-size: 0.9rem; opacity: 0.9; }
.at-back { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.9rem; }
.at-back:hover { color: white; }

/* ---- RECHERCHE ---- */
.at-search-bar { text-align: center; margin-bottom: 28px; }
#at-search-lieux { max-width: 100%; border: 2px solid #e0e0e0; box-shadow: var(--at-shadow); }

/* ---- CARTE LEAFLET ---- */
.at-map-section { margin-bottom: 36px; }
.at-map-section h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; color: var(--at-dark); }
.at-map-container { height: 380px; border-radius: var(--at-radius); overflow: hidden; box-shadow: var(--at-shadow); border: 2px solid #e8e8e8; }

/* ---- ONGLETS ---- */
.at-tabs-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.at-tab-btn {
    background: white; border: 2px solid #e0e0e0;
    border-radius: 50px; padding: 10px 20px;
    font-size: 0.9rem; cursor: pointer;
    transition: var(--at-transition); font-weight: 600; color: #555;
}
.at-tab-btn:hover, .at-tab-btn.active {
    background: var(--at-primary); border-color: var(--at-primary);
    color: white; box-shadow: 0 4px 12px rgba(0,98,51,0.25);
}
.at-tab-content { display: none; }
.at-tab-content.active { display: block; }

/* ---- LIEUX GRID ---- */
.at-lieux-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}
.at-lieu-card {
    background: white; border-radius: var(--at-radius);
    overflow: hidden; box-shadow: var(--at-shadow);
    border: 1px solid #eee; transition: var(--at-transition);
}
.at-lieu-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0,0,0,0.13); }
.at-lieu-img { position: relative; }
.at-lieu-img img { width: 100%; height: 190px; object-fit: cover; }
.at-lieu-badge {
    position: absolute; top: 10px; right: 10px;
    background: white; border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.at-lieu-body { padding: 18px; }
.at-lieu-cat {
    font-size: 0.78rem; font-weight: 700; color: var(--at-primary);
    background: #e8f5ee; padding: 3px 10px; border-radius: 20px;
    display: inline-block; margin-bottom: 10px;
}
.at-lieu-body h4 { font-size: 1.05rem; font-weight: 700; color: var(--at-dark); margin: 0 0 8px; }
.at-lieu-body p  { font-size: 0.88rem; color: #666; line-height: 1.5; margin-bottom: 12px; }

/* ---- INFOS ---- */
.at-lieu-infos { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; font-size: 0.83rem; color: #555; }
.at-lieu-infos a { color: var(--at-primary); text-decoration: none; }

/* ---- ÉTOILES ---- */
.at-rating { margin: 8px 0 12px; }
.at-stars-display { display: inline-flex; gap: 3px; margin-right: 8px; }
.at-star { font-size: 1.2rem; color: #ccc; transition: color 0.2s; }
.at-star.filled { color: var(--at-gold); }
.at-star-vote { cursor: pointer; }
.at-rating-info { font-size: 0.85rem; color: #666; vertical-align: middle; }
.at-vote-msg { color: var(--at-primary); font-size: 13px; margin-top: 4px; }

/* ---- BOUTON ---- */
.at-btn {
    display: inline-block; background: var(--at-primary); color: white;
    padding: 9px 20px; border-radius: 50px; font-size: 0.85rem;
    font-weight: 600; text-decoration: none; transition: var(--at-transition); margin-top: 6px;
}
.at-btn:hover { background: #004d27; color: white; transform: translateX(3px); }

/* ---- VIDE ---- */
.at-empty {
    text-align: center; padding: 60px 20px; color: #888;
    background: #fafafa; border-radius: var(--at-radius); border: 2px dashed #ddd;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .at-hero h1 { font-size: 1.7rem; }
    .at-wilayas-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
    .at-lieux-grid { grid-template-columns: 1fr; }
    .at-tab-btn { padding: 8px 14px; font-size: 0.82rem; }
    .at-map-container { height: 260px; }
    .at-wilaya-stats { flex-direction: column; gap: 6px; }
}

/* =============================================
   AJOUTS v4.0
   ============================================= */

/* Sélecteur de villes */
.at-villes-selector {
    margin-bottom: 28px;
    background: white;
    padding: 16px 20px;
    border-radius: var(--at-radius);
    box-shadow: var(--at-shadow);
}
.at-villes-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 10px;
}
.at-villes-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.at-ville-pill {
    text-decoration: none;
    background: #f0f0f0;
    color: #444;
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--at-transition);
}
.at-ville-pill:hover { background: var(--at-primary, #006233); color: white; }
.at-ville-pill.active-pill { background: var(--at-primary, #006233); color: white; }

/* Variables dynamiques (réglages couleurs) */
.at-accueil, .at-wilaya-page {
    --at-primary: #006233;
    --at-secondary: #D21034;
}
.at-hero, .at-wilaya-hero {
    background: linear-gradient(135deg, var(--at-primary) 0%, var(--at-primary) 100%);
}
.at-wilaya-count, .at-lieu-cat {
    color: var(--at-primary);
}
.at-tab-btn:hover, .at-tab-btn.active {
    background: var(--at-primary);
    border-color: var(--at-primary);
}
.at-btn {
    background: var(--at-primary);
}

/* =============================================
   AJOUTS v5.0
   ============================================= */

/* Page lieu individuelle - centrée */
.at-lieu-single {
    --at-primary: #006233;
}
.at-lieu-single-inner {
    max-width: 760px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Segoe UI', sans-serif;
}
.at-lieu-single-img img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 24px;
}
.at-lieu-single-body h1 {
    font-size: 2rem;
    font-weight: 800;
    margin: 10px 0 14px;
    color: #1a1a2e;
}
.at-lieu-single-content {
    margin: 20px 0;
    line-height: 1.7;
    color: #444;
    font-size: 1rem;
}
.at-lieu-single-infos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fafafa;
    border-radius: 12px;
    padding: 20px;
    margin-top: 24px;
    font-size: 0.95rem;
}
.at-lieu-single-infos a { color: var(--at-primary); text-decoration: none; }

@media (max-width: 768px) {
    .at-lieu-single-inner { margin: 20px auto; }
    .at-lieu-single-body h1 { font-size: 1.5rem; }
    .at-lieu-single-img img { height: 220px; }
}

/* =============================================
   AJOUTS v6.0 - Centrage et correction largeur
   ============================================= */
.at-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.at-container * { box-sizing: border-box; }
.at-map-container, .at-lieux-grid, .at-wilayas-grid {
    max-width: 100%;
}
.at-wilaya-hero, .at-hero {
    max-width: 100%;
}

/* Bloc infos pratiques quand le lieu est designé avec Elementor */
.at-lieu-elementor-extra {
    margin: 30px auto 50px;
    max-width: 760px;
}

/* =============================================
   AJOUTS v7.0
   ============================================= */

/* ---- Espacement bas de page wilaya avant le footer ---- */
.at-wilaya-page {
    padding-bottom: 60px;
}

/* ---- Barre de stats sur l'accueil ---- */
.at-stats-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 50px;
}
.at-stat-item {
    background: white;
    border-radius: var(--at-radius);
    box-shadow: var(--at-shadow);
    padding: 20px 32px;
    text-align: center;
    flex: 1 1 160px;
    max-width: 220px;
}
.at-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--at-primary);
    line-height: 1.1;
}
.at-stat-label {
    display: block;
    font-size: 0.82rem;
    color: #777;
    font-weight: 600;
    margin-top: 6px;
}

/* ---- Section "lieux à la une" (mise en avant générale) ---- */
.at-avant-section .at-section-title { color: var(--at-gold); }

/* ---- Badge "mis en avant" sur une fiche lieu ---- */
.at-lieu-card { position: relative; }
.at-lieu-badge { left: 10px; right: auto; } /* icône catégorie déplacée à gauche pour libérer la droite */
.at-lieu-star-badge {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    background: linear-gradient(135deg, var(--at-gold) 0%, #d98d0c 100%);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    white-space: nowrap;
}
.at-lieu-star-badge-noimg { top: 10px; right: 10px; }

/* ---- Icône wilaya en image (Canva etc.) ---- */
.at-wilaya-icon-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px;
    border-radius: 8px;
}

/* ---- Icône wilaya en ligne (titre de page wilaya + badge des fiches) ---- */
img.at-hero-icon,
img.at-tag-icon {
    width: auto;
    height: 1em;
    display: inline-block;
    margin: 0;
    vertical-align: -0.12em;
    border-radius: 4px;
}

/* ---- Badge wilaya sur les fiches lieu (accueil + pages wilaya) ---- */
.at-lieu-wilaya-tag {
    display: inline-block;
    background: #f0f4f8;
    color: #5a6b7d;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
}

/* =============================================
   AJOUTS v7.4 — Header image, cartes wilaya en photo, hero de page wilaya
   ============================================= */

/* ---- HEADER D'ACCUEIL EN PLEINE LARGEUR ---- */
/* Le shortcode vit dans .at-container (1200 px) : on ressort de la colonne
   avec la marge négative en vw pour occuper toute la largeur de l'écran. */
.at-hero {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 48px;
    padding: 0;
    border-radius: 0;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0d2b45;
    color: #fff;
    overflow: hidden;
}
.at-hero-bg {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: center 55%;
    z-index: 0;
}
/* Voile léger : l'image reste claire, le texte reste lisible. */
.at-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(6,20,34,0.46) 0%, rgba(6,20,34,0.20) 100%),
        linear-gradient(180deg, rgba(6,20,34,0.30) 0%, rgba(6,20,34,0.10) 40%, rgba(6,20,34,0.42) 100%);
}
.at-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    padding: 70px 20px;
    text-align: center;
}
.at-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    margin: 0 0 14px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.45);
}
.at-hero p {
    font-size: 1.15rem;
    opacity: 1;
    margin-bottom: 26px;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.at-hero #at-search-wilaya {
    max-width: 560px;
    padding: 16px 24px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.30);
}

/* ---- PASTILLES DE CATÉGORIES DANS LE HEADER ---- */
.at-hero-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.at-hero-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.34);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 50px;
    transition: var(--at-transition);
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.at-hero-cat:hover {
    background: #fff;
    color: var(--at-primary);
    border-color: #fff;
    text-shadow: none;
    transform: translateY(-2px);
}
.at-hero-cat-icon { font-size: 1rem; line-height: 1; }
.at-hero-cat-count {
    background: rgba(255,255,255,0.28);
    border-radius: 50px;
    padding: 1px 8px;
    font-size: 0.78rem;
    font-weight: 700;
}
.at-hero-cat:hover .at-hero-cat-count { background: rgba(0,0,0,0.08); }

/* ---- CARTES WILAYA EN PHOTO (5 par ligne sur grand écran) ---- */
.at-wilayas-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}
.at-wilaya-inner {
    position: relative;
    padding: 0;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: linear-gradient(160deg, #1b4166 0%, #0e2438 100%);
    box-shadow: 0 6px 20px rgba(0,0,0,0.14);
    text-align: left;
}
.at-wilaya-card:hover .at-wilaya-inner {
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}
.at-wilaya-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}
.at-wilaya-card:hover .at-wilaya-photo { transform: scale(1.07); }
/* Dégradé bas : le nom reste lisible quelle que soit la photo. */
.at-wilaya-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.30) 62%, rgba(0,0,0,0.78) 100%);
}
.at-wilaya-legend {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 14px 16px 15px;
}
.at-wilaya-legend h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 3px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.at-wilaya-count {
    background: none;
    padding: 0;
    color: rgba(255,255,255,0.88);
    font-size: 0.82rem;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
/* Wilaya sans photo : l'emoji (ou le logo) reste affiché au centre. */
.at-wilaya-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 34px;
}
.at-wilaya-fallback .at-wilaya-icon { font-size: 2.6rem; margin: 0; }
.at-wilaya-fallback .at-wilaya-icon-img { width: 64px; height: 64px; margin: 0; }

/* ---- HERO DES PAGES WILAYA / VILLE / CATÉGORIE ---- */
.at-wilaya-hero {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 34px;
    padding: 0;
    border-radius: 0;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: #0d2b45;
    background-image: linear-gradient(135deg, var(--at-primary) 0%, #004d27 100%);
}
.at-wilaya-hero.at-has-cover {
    background-image: var(--at-hero-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.at-wilaya-hero.at-has-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,20,34,0.42) 0%, rgba(6,20,34,0.18) 45%, rgba(6,20,34,0.74) 100%);
}
.at-wilaya-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 38px;
}
.at-wilaya-hero h1 {
    font-size: 2.6rem;
    margin: 8px 0 10px;
    text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.at-wilaya-hero .at-wilaya-stats {
    opacity: 1;
    color: rgba(255,255,255,0.92);
    font-size: 0.95rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.at-fil-ariane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.at-fil-ariane a { color: rgba(255,255,255,0.85); text-decoration: none; }
.at-fil-ariane a:hover { color: #fff; text-decoration: underline; }
.at-fil-ariane .at-fil-actuel { color: #fff; font-weight: 600; }

/* ---- RESPONSIVE v7.4 ---- */
@media (max-width: 1024px) {
    .at-wilayas-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (max-width: 768px) {
    .at-hero { min-height: 400px; }
    .at-hero-bg { object-position: center; }
    .at-hero-content { padding: 54px 18px; }
    .at-hero h1 { font-size: 1.95rem; }
    .at-hero p { font-size: 1rem; }
    .at-hero-cat { font-size: 0.8rem; padding: 7px 12px; }
    .at-wilayas-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .at-wilaya-legend h3 { font-size: 0.95rem; }
    .at-wilaya-hero { min-height: 240px; }
    .at-wilaya-hero h1 { font-size: 1.7rem; }
    .at-wilaya-hero-content { padding: 0 18px 26px; }
}

/* =============================================
   AJOUTS v7.5 — Catégories repliées sur mobile
   ============================================= */

/* Le bouton n'existe que sur mobile : sur grand écran les pastilles tiennent
   sur deux lignes et restent visibles d'emblée. */
.at-hero .at-cats-toggle { display: none; }

@media (max-width: 768px) {
    .at-hero .at-cats-toggle {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-top: 18px;
        padding: 10px 18px;
        border-radius: 50px;
        border: 1px solid rgba(255,255,255,0.38);
        background: rgba(255,255,255,0.16);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        font-size: 0.92rem;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }
    .at-hero .at-cats-toggle-count {
        background: rgba(255,255,255,0.28);
        border-radius: 50px;
        padding: 1px 8px;
        font-size: 0.78rem;
    }
    .at-hero .at-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; width: 16px; }
    .at-hero .at-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: var(--at-transition); }
    .at-hero .at-cats-toggle-open .at-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    .at-hero .at-cats-toggle-open .at-burger span:nth-child(2) { opacity: 0; }
    .at-hero .at-cats-toggle-open .at-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

    /* Replié par défaut, déplié au clic. Sans JS (ou si le clic échoue),
       le lien reste atteignable par les pages catégories. */
    .at-hero .at-hero-cats {
        display: none;
        margin-top: 14px;
        max-height: 44vh;
        overflow-y: auto;
        padding: 4px;
    }
    .at-hero .at-hero-cats.at-cats-open { display: flex; }
    .at-hero-cat { font-size: 0.82rem; padding: 8px 13px; }

    /* Les 3 compteurs tiennent sur une ligne : empilés, ils repoussaient
       la grille des wilayas d'un écran entier. */
    .at-stats-bar { gap: 8px; margin-bottom: 34px; }
    .at-stat-item { flex: 1 1 0; min-width: 0; max-width: none; padding: 12px 6px; }
    .at-stat-number { font-size: 1.45rem; }
    .at-stat-label { font-size: 0.68rem; margin-top: 3px; }

    /* Filtres des pages wilaya : une seule ligne qui défile, au lieu de 4 ou 5
       lignes de pastilles qui repoussent les lieux hors de l'écran. */
    .at-tabs-nav,
    .at-villes-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .at-tabs-nav::-webkit-scrollbar,
    .at-villes-pills::-webkit-scrollbar { display: none; }
    .at-tab-btn,
    .at-ville-pill { flex: 0 0 auto; }
}

/* Les héros sortent de la colonne en 100vw : sans ça, la largeur de la barre de
   défilement verticale crée un petit défilement horizontal parasite sur toute la page. */
html, body { overflow-x: clip; }

/* =============================================
   AJOUTS v7.6 — Appel à partenariat en bas de fiche
   ============================================= */
.at-cta-partenaire {
    margin-top: 28px;
    padding: 24px 26px;
    border-radius: var(--at-radius);
    background: linear-gradient(135deg, #fdf6e8 0%, #fbf1f1 100%);
    border: 1px solid #f0e2c8;
    text-align: center;
}
.at-cta-titre {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--at-dark);
    margin: 0 0 6px;
}
.at-cta-texte {
    font-size: 0.92rem;
    color: #5c5c68;
    line-height: 1.55;
    margin: 0 0 16px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.at-cta-btn {
    display: inline-block;
    background: var(--at-gold);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    padding: 12px 26px;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(245,166,35,0.35);
    transition: var(--at-transition);
}
.at-cta-btn:hover {
    background: #d98d0c;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(245,166,35,0.45);
}
@media (max-width: 768px) {
    .at-cta-partenaire { padding: 20px 16px; }
    .at-cta-btn { width: 100%; }
}

/* =============================================
   AJOUTS v7.7 — Nombre de cartes par ligne réglable
   ============================================= */
/* Au-dessus de 1024 px on respecte le réglage (3 à 6). En dessous, la largeur
   commande : imposer 5 colonnes sur un téléphone donnerait des vignettes illisibles. */
@media (min-width: 1025px) {
    .at-wilayas-grid { grid-template-columns: repeat(var(--at-cartes, 5), 1fr); }
}

/* =============================================
   AJOUTS v7.9 — Le header colle au menu, et plus de pastilles en double
   ============================================= */

/* La page d'accueil Elementor contient encore un ancien widget HTML qui va
   chercher les catégories en REST et injecte ses propres pastilles
   (.at-cat-pills) dans le header. Doublon avec celles du plugin, et il ignore
   le repli mobile : c'est lui qu'on voyait sous le bouton « Catégories ».
   Neutralisé ici ; le nettoyage définitif est de supprimer ce widget dans Elementor. */
.at-cat-pills,
.at-cat-results { display: none !important; }

/* Le header doit toucher la barre de menu. La section Elementor qui porte le
   shortcode impose 59 px de marge en haut et 10 px de rembourrage : on les
   annule, mais seulement pour la section qui contient réellement l'accueil. */
.e-con:has(.at-accueil),
.elementor-element:has(> .e-con-inner > .elementor-widget .at-accueil) { margin-top: 0 !important; }
.e-con-inner:has(.at-accueil) { padding-top: 0 !important; }

/* =============================================
   AJOUTS v8.0 — Cadrage du header : garder le Maqam Echahid
   ============================================= */
/* L'image fait 2752x1536 mais le header est une bande bien plus large que haute :
   le navigateur en montre donc une tranche horizontale. Cadrée au centre, cette
   tranche commençait sous le monument, qui occupe le tiers haut de l'image.
   On remonte le cadrage et on donne plus de hauteur au header sur grand écran,
   pour montrer à la fois le monument, la plage et les dunes.
   Le mobile garde le cadrage centré : là, c'est la largeur qui est rognée, pas la hauteur. */
@media (min-width: 769px) {
    .at-hero { background-position: center 10%; }
}
@media (min-width: 1200px) {
    .at-hero { min-height: clamp(520px, 34vw, 720px); }
}

/* Écrans très larges (2200 px et plus) : la bande visible se réduit encore,
   on remonte le cadrage d'autant pour garder le monument entier. */
@media (min-width: 2200px) {
    .at-hero { background-position: center 5%; }
}

/* =============================================
   AJOUTS v8.1 — Les photos de carte doivent remplir la carte
   ============================================= */
/* Smush charge les images en différé et leur impose sa propre hauteur
   automatique (via --smush-placeholder-aspect-ratio) : la photo reprenait alors
   ses proportions d'origine — une bande de 206x53 dans une carte de 206x154 pour
   un panorama comme Adrar, le reste du cadre montrant le fond bleu.
   On réimpose la taille du cadre ; c'est object-fit qui recadre proprement. */
.at-wilaya-inner .at-wilaya-photo {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    object-fit: cover;
}

/* =============================================
   AJOUTS v8.2 — Pages catégorie regroupées par wilaya
   ============================================= */
.at-cat-groupe { margin-bottom: 44px; }
.at-cat-groupe-titre {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--at-dark);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}
.at-cat-groupe-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--at-primary);
    background: #e8f5ee;
    padding: 3px 12px;
    border-radius: 20px;
}
.at-cat-groupe-lien {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--at-primary);
    text-decoration: none;
}
.at-cat-groupe-lien:hover { text-decoration: underline; }

/* Les pastilles de wilaya sont des <button> ici : le thème leur donne sinon
   son propre style de bouton, très différent des pastilles de ville. */
.at-villes-pills button.at-ville-pill {
    font-family: inherit;
    border: none;
    cursor: pointer;
    line-height: 1.2;
}
.at-pill-count { opacity: 0.7; font-size: 0.78rem; margin-left: 3px; }

@media (max-width: 768px) {
    .at-cat-groupe-titre { font-size: 1.05rem; }
    .at-cat-groupe-lien { margin-left: 0; width: 100%; }
}

/* =============================================
   AJOUTS v8.3 — Les pastilles wilaya reprennent les couleurs du site
   ============================================= */
/* Le thème colore le texte de tout <button> en rose-rouge : les pastilles de
   wilaya des pages catégorie en héritaient. On repasse devant avec un sélecteur
   élément + classe, et on reprend le bleu des réglages du plugin. */
.at-villes-pills button.at-ville-pill {
    background: #f0f0f0;
    color: #444;
}
.at-villes-pills button.at-ville-pill:hover,
.at-villes-pills button.at-ville-pill.active-pill {
    background: var(--at-primary);
    color: #fff;
}
.at-villes-pills button.at-ville-pill .at-pill-count { color: inherit; }

/* Le dégradé de repli des heros mélangeait la couleur du site avec un vert
   codé en dur, hérité d'une ancienne version : on le dérive de la couleur
   principale pour qu'il reste dans la teinte choisie dans les réglages. */
.at-wilaya-hero {
    background-image: linear-gradient(135deg, var(--at-primary) 0%, color-mix(in srgb, var(--at-primary) 62%, #000) 100%);
}
.at-wilaya-hero.at-has-cover { background-image: var(--at-hero-image); }

/* =============================================
   AJOUTS v8.4 — Carte sans photo : image de la wilaya assombrie + catégorie
   ============================================= */
.at-lieu-img-repli {
    height: 190px;
    background-color: #12283d;
    /* Le voile noir est dans la même déclaration que la photo : la photo reste
       lisible en dessous, le nom de la catégorie reste lisible au-dessus. */
    background-image: linear-gradient(rgba(8,18,30,0.58), rgba(8,18,30,0.68)), var(--at-repli);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}
.at-lieu-repli-cat {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* =============================================
   AJOUTS v8.5 — Les liens déjà visités gardent leur couleur
   ============================================= */
/* Le thème définit a:visited (spécificité élément + pseudo-classe), ce qui passe
   devant mes sélecteurs de classe : une pastille ou un bouton déjà cliqué prenait
   son rouge sombre. On redonne explicitement la couleur à chaque état.
   À retenir : pour tout lien coloré par le plugin, écrire les trois états. */
.at-hero a.at-hero-cat,
.at-hero a.at-hero-cat:visited,
.at-hero a.at-hero-cat:active { color: #fff; }
.at-hero a.at-hero-cat:hover,
.at-hero a.at-hero-cat:focus { color: var(--at-primary); }

a.at-btn, a.at-btn:visited, a.at-btn:active { color: #fff; }
a.at-btn:hover, a.at-btn:focus { color: #fff; }

a.at-cta-btn, a.at-cta-btn:visited, a.at-cta-btn:active,
a.at-cta-btn:hover, a.at-cta-btn:focus { color: #fff; }

a.at-ville-pill, a.at-ville-pill:visited { color: #444; }
a.at-ville-pill:hover, a.at-ville-pill:focus,
a.at-ville-pill.active-pill, a.at-ville-pill.active-pill:visited { color: #fff; }

a.at-cat-groupe-lien, a.at-cat-groupe-lien:visited { color: var(--at-primary); }

.at-fil-ariane a, .at-fil-ariane a:visited { color: rgba(255,255,255,0.85); }
.at-fil-ariane a:hover { color: #fff; }

a.at-back, a.at-back:visited { color: rgba(255,255,255,0.8); }

.at-lieu-infos a, .at-lieu-infos a:visited,
.at-lieu-single-infos a, .at-lieu-single-infos a:visited { color: var(--at-primary); }

/* Les cartes wilaya et lieu sont des liens entiers : leur texte est déjà peint
   par les règles de la carte, mais on fige la couleur du lien lui-même. */
a.at-wilaya-card, a.at-wilaya-card:visited { color: inherit; }

/* =============================================
   AJOUTS v9.0 — Cadrage réglable des photos de catégorie
   ============================================= */
.at-wilaya-hero.at-has-cover { background-position: var(--at-hero-pos, center); }
.at-lieu-img-repli { background-position: var(--at-repli-pos, center); }

/* =============================================
   AJOUTS v9.1 — Pastilles wilaya identiques partout
   ============================================= */
/* Sur les pages catégorie ce sont des <button> (elles filtrent sans recharger),
   sur les pages wilaya des <a>. Le thème imposait aux boutons son arrondi de 3 px
   et sa taille de texte : on réaligne tout sur l'apparence des pastilles de ville. */
.at-villes-pills button.at-ville-pill {
    border-radius: 50px;
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
}