@charset "UTF-8";
/**
 * Emplacement : the7-child/inc/stations_ecologiques/css/styles-stations_saida.css
 * Catégorie : SAIDANATURE - Stations Écologiques de Saïda
 * Description : Styles personnalisés pour la rubrique Stations Écologiques de Saïda
 * Version : 2.0.1 - FIX ESPACE TITRE/CONTAINER
 * Auteur : Hassen Ksantini - Cheneyen Magazine® & Saïda Nature Network®
 */

/* ========================================
   FORCER PLEINE LARGEUR - UNIQUEMENT POUR LE CONTAINER STATION
   ⚠️ NE PAS MODIFIER
   ======================================== */
body.single-stations_saida .station-container,
body.single-stations_saida .station-thumbnail,
body.single-stations_saida .station-section,
body.single-stations_saida .station-gallery {
    max-width: calc(100vw - 40px) !important; /* 20px de chaque côté */
    margin-left: 0px !important;
    margin-right: 0px !important;
}

/* ========================================
   CONTAINER STATION
   ======================================== */

/* SECTIONS internes - largeur normale */
.station-section,
.station-header,
.station-content {
    max-width: 1400px; /* 🔧 Largeur de lecture confortable */
    margin-left: auto;
    margin-right: auto;
}

/* Image et galerie - pleine largeur du container */
.station-thumbnail,
.station-gallery {
    max-width: 100% !important;
}

/* ========================================
   CONTAINER PRINCIPAL - Pleine largeur
   FIX ESPACE HAUT 2026-01-29
   ======================================== */
.station-ecologique,
.station-container {
    max-width: 100%; /* Pleine largeur */
    margin: 0 !important; /* ✅ FIX : ZÉRO marge partout */
    padding: 0 0 20px 0; /* ✅ FIX : Seulement padding bas */
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: #2f3e2e;
}

/* ========================================
   EN-TÊTE - COLLÉ AU CONTAINER
   FIX ESPACE SUPÉRIEUR THÈME THE7
   ======================================== */
.station-header,
body.single-stations_saida .post-title,
body.single-stations_saida h1.entry-title,
body.single-stations_saida .post-header,
body.single-stations_saida .station-titre {
    margin-top: 0 !important; /* ✅ FIX PRINCIPAL */
    margin-bottom: 1.5rem !important;
    padding-top: 0 !important;
}

.station-titre,
.station-header h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #3e5e3d;
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/* ========================================
   IMAGE À LA UNE - Style élégant avec ombre
   ⚠️ NE PAS MODIFIER SANS RAISON
   ======================================== */
.station-thumbnail {
    max-width: 1400px;
    margin: 2rem auto 3rem;
    padding: 0 2rem;
}

.station-thumbnail img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: block;
    transition: transform 0.3s ease;
}

.station-thumbnail img:hover {
    transform: scale(1.02);
}

/* ========================================
   SECTIONS DE CONTENU
   ======================================== */
.station-description,
.station-section {
    margin-bottom: 2rem;
    background: #f0f4ec;
    padding: 1rem 1.2rem;
    border-left: 4px solid #7ba05b;
    border-radius: 6px;
}

.station-section h2 {
    font-size: 1.4rem;
    color: #1b392a;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* ========================================
   LISTES D'INFORMATIONS
   ======================================== */
.station-infos ul,
.station-section ul {
    list-style: none;
    padding-left: 0;
}

.station-infos li,
.station-section li {
    margin-bottom: 0.6rem;
    padding-left: 1rem;
    position: relative;
}

.station-infos li::before,
.station-section li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #7d947d;
}

/* ========================================
   TAXONOMIES
   ======================================== */
.station-taxonomies {
    margin: 2rem 0;
}

.station-taxonomies p {
    margin: 0.5rem 0;
    font-weight: 500;
    color: #4e5860;
}

/* ========================================
   GALERIE PHOTOS
   ⚠️ CODE PRINCIPAL - NE PAS DUPLIQUER
   ======================================== */
.station-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Wrapper photo + légende */
.gallery-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Lien contenant l'image */
.station-gallery a {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.station-gallery a:hover {
    transform: scale(1.05);
}

/* Image dans la galerie */
.station-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Légende sous miniature */
.photo-caption {
    font-size: 0.85rem;
    color: #6b7280;
    font-style: italic;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

/* ========================================
   CARTE GPS
   ======================================== */
.station-carte {
    margin-top: 2.5rem;
}

.station-carte iframe {
    width: 100%;
    height: 300px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

/* ========================================
   TAXONOMIES - ICÔNES
   ======================================== */
.term-forets .page-title:before { content: "🌲 "; }
.term-zones_humides .page-title:before { content: "💧 "; }

/* ========================================
   ARCHIVES
   ======================================== */
.station-archive {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.stations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.station-card {
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 8px;
}

.station-map {
    height: 200px;
    margin: 10px 0;
    background: #f5f5f5;
}

.term-icon::before {
    content: "🌍 ";
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .station-ecologique,
    .station-container {
        padding: 1.2rem;
    }

    .station-thumbnail {
        padding: 0 1rem;
        margin-bottom: 2rem;
    }
    
    .station-thumbnail img {
        max-height: 300px;
        border-radius: 8px;
    }

    /* Galerie mobile - 2 colonnes */
    .station-gallery {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

/* ========================================
   CONTRÔLE HAUTEUR ESPACE - MÉTHODE PHYSIQUE
   MODIFIER UNIQUEMENT : 40px ← VOTRE ESPACE
   ======================================== */
body.single-stations_saida {
    --mon-espace-haut: 40px; /* 🔧 VOTRE CONTRÔLE : 10px, 25px, 50px... */
}

/* POSITION RELATIVE = IGNORE TOUS CONFLITS */
body.single-stations_saida .station-container,
body.single-stations_saida .station-ecologique {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    top: calc(-80px + var(--mon-espace-haut)) !important; /* ✅ PHYSIQUEMENT positionné */
}

/* Nettoie le reste */
body.single-stations_saida main,
body.single-stations_saida .main,
body.single-stations_saida .content-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.single-stations_saida .station-header h1 {
    margin-top: 0 !important;
}