/* Menu interne des stations */

.station-menu {

    display: flex;

	width: 100%; 

    justify-content: center;

	font-size: 14px;

    flex-wrap: wrap;

    background: var(--wp--preset--color--gris-fonce);

    margin-top: 20px;

}



.station-menu a {

    color: white;

    text-decoration: none;

    padding: 10px 10px;

    margin: 0px 5px;

    border-radius: 5px;

    /*! background: rgba(255, 255, 255, 0.1); */

	font-size: 14px;

	font-weight: 400;

    transition: background 0.3s ease, transform 0.2s ease;

}



.station-menu a:hover {

    background: rgba(255, 255, 255, 0.3);

    transform: scale(1.05);

}



/* Conteneur du tableau */

.station-table-container {

    max-width: 1200px;

    margin: 20px auto;

}



/* Table sans bordures */

#station-table {

    width: 100%;

    border-collapse: collapse;

    border: none;

}



/* En-têtes & cellules */

#station-table th,

#station-table td {

    padding: 8px 12px;

    border: none;

    text-align: left;

}



/* Effet hover plus léger */

#station-table th:hover {

    background-color: #f0f0f0;

}



/* Style des en-têtes */

#station-table th {

    cursor: pointer;

    background: #f9f9f9;

    font-weight: 600;

    color: #333;

}



/* Lignes alternées */

#station-table tr:nth-child(even) {

    background-color: #fdfdfd;

}



/* Optionnel : ajouter un léger séparateur visuel uniquement en bas des lignes */

#station-table tr {

    border-bottom: 1px solid #eee;

}



.station-avis {

    background: #f9f9f9;

    padding: 25px;

    border-radius: 8px;

    margin-top: 20px;

}

.station-avis h3 {

    margin-bottom: 10px;

}

.station-avis ul {

    list-style: none;

    padding: 0;

}

.station-avis li {

    margin-bottom: 5px;

}



.station-avis ul {

    list-style-type: none; /* Supprime les puces */

    padding-left: 0; /* Supprime l'indentation par défaut */

}



.station-links {

    padding: 0;

}



.station-links ul {

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

}



.station-links li {

    margin-bottom: 5px;

    list-style-type: none; /* Supprime les puces */

}



.barre-repartition {

    display: flex;

    height: 12px;

    border-radius: 4px;

    background: #eee;

    width: 100%;

    max-width: 160px;

    margin-top: 4px;

}



/* Correction pour les coins arrondis de la barre des pistes */

.barre-repartition .barre:first-child {

    border-top-left-radius: 4px;

    border-bottom-left-radius: 4px;

}



.barre-repartition .barre:last-child {

    border-top-right-radius: 4px;

    border-bottom-right-radius: 4px;

}



.barre {

    display: block;

    height: 100%;

}



.barre-verte { background-color: #5cb85c; }

.barre-bleue { background-color: #428bca; }

.barre-rouge { background-color: #d9534f; }

.barre-noire { background-color: #000; }



@media screen and (max-width: 768px) {

    .station-table-container {

        overflow-x: auto;

    }



    #station-table {

        width: 100%;

        min-width: 600px;

    }

}



.pistes-container {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    font-size: 13px;

}



.pistes-total {

    margin-bottom: 4px;

    font-weight: 500;

}



.station-filters {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 0.8rem 0.8rem;

    padding: 1rem;

    margin: 2rem auto;

    max-width: 1200px;

    background: #f9f9f9;

    border-radius: 8px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

    font-size: 14px;

}



.station-filters label {

    margin-right: 0.5em;

    font-weight: 500;

}



.station-filters select,

.station-filters input[type="text"] {

    padding: 6px 10px;

    font-size: 14px;

    border: 1px solid #ccc;

    border-radius: 6px;

    min-width: 180px;

    background: white;

}



.station-filters input[type="text"]::placeholder {

    color: #888;

}



#apply-filters {

    padding: 8px 16px;

    background-color: #0073aa;

    color: #fff;

    border: none;

    border-radius: 6px;

    font-size: 14px;

    cursor: pointer;

    transition: background-color 0.2s ease;

}



#apply-filters:hover {

    background-color: #005f8d;

}



/* Responsive */

@media (max-width: 768px) {

    .station-filters {

        flex-direction: column;

        align-items: stretch;

        gap: 0.8rem;

    }



    .station-filters select,

    .station-filters input[type="text"] {

        width: 100%;

    }



    #apply-filters {

        width: 100%;

        text-align: center;

    }

}



.station-counter {

    font-weight: 600;

    text-align: center;

    margin-bottom: 1em;

}



.liste-stations {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 20px;

}



.station-similaire {

    flex: 1 1 250px;

    max-width: 300px;

    background: #fff;

    border: 1px solid #eee;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 2px 6px rgba(0,0,0,0.1);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.station-similaire:hover {

    transform: translateY(-3px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}



.station-similaire a {

    text-decoration: none;

    color: inherit;

    display: block;

}



.station-similaire h3 {

    margin: 12px 16px 0 16px;

    font-size: 18px;

    line-height: 1.3;

}



.station-similaire p {

    margin: 8px 16px 16px 16px;

    font-size: 14px;

    color: #666;

}



/* Responsive mobile */

@media (max-width: 600px) {

    .station-similaire {

        flex: 1 1 100%;

        max-width: 100%;

    }

}



.station-similaire img {

    width: 100%;

    height: 180px;

    object-fit: cover;

    display: block;

}



/* Cartouche "La Station en Bref" */

.station-cartouche-bref {

    margin-top: 30px;

    margin-bottom: 30px;

}



.station-cartouche-bref h3.wp-block-heading {

    margin-top: 0;

    margin-bottom: -20px; /* Espace sous le titre */

    text-align: left;

}



.station-bref-liste {

    list-style-type: none;

    padding-left: 0;

    text-align: left; /* Ou center si vous préférez tous les items centrés */

}



.station-bref-liste li {

    padding: 4px 0; /* Espace vertical entre les items */

    display: flex;

}



.station-bref-liste li .dashicons {

    margin-right: 10px; /* Espace plus important pour l'icône */

    color: var(--wp--preset--color--gris-fonce, #555); /* Utiliser une variable WP ou couleur thème */

    font-size: 1.2em; /* Taille de l'icône */

}



/* Spécifique pour la carte dans le cartouche */

.station-bref-gps {

    flex-direction: column; /* La carte en dessous du label "Localisation" */

    align-items: flex-start !important; /* Forcer l'alignement à gauche */

}

.station-leaflet-map {

    height: 200px; /* Un peu moins haut pour un cartouche */

    width: 100%;

    border-radius: 5px;

    border: 1px solid #ddd;

}





/* Bloc "Domaine Skiable & Infos Techniques" */

.station-technique-block {

    /* Vous utilisiez déjà .wp-block-group avec des styles de bordure, donc il hérite déjà. */

    /* Si vous voulez des styles spécifiques à CE bloc en plus : */

    margin-top: 30px;

    margin-bottom: 30px;

    /* padding: 20px 25px; */ /* Votre .wp-block-group a déjà son padding */

}



.station-technique-block h2#domaine-technique { /* Cible le H2 spécifique */

    margin-bottom: 15px;

}

.station-technique-block h4 { /* Pour "Détails Techniques des Remontées Mécaniques" */

    margin-top: 25px;

    margin-bottom: 10px;

    font-size: 1.2em;

    border-bottom: 1px solid #eee;

    padding-bottom: 5px;

}



.station-details-technique-liste {

    list-style-type: none;

    padding-left: 0;

    font-size: 0.95em;

}



.station-details-technique-liste > li > .dashicons {

    margin-right: 10px;

    color: var(--wp--preset--color--gris-fonce, #555);

    font-size: 1.1em;

    margin-top: 0.1em; /* Ajustement fin */

}



.station-details-rm-types {

    margin-left: 28px; /* Aligner avec le texte après l'icône parente */

    font-size: 0.95em; /* Un peu plus petit */

    list-style-type: disc;

    padding-left: 15px;

    margin-top: 5px;

}

.station-details-rm-types li {

    margin-bottom: 4px;

}



/* Assurer que les .wp-block-group imbriqués ou spécifiques n'ont pas de marges excessives */

.station-technique-block .wp-block-group {

    margin-top: 10px;

    margin-bottom: 10px;

}



/* Styles pour le shortcode de carte des stations (Guide des Stations) */



/* Contenu de la popup d'information sur la carte */

.gds-station-popup-content {

    font-family: sans-serif; /* Ou héritez de la police de votre thème */

    font-size: 12px;

    line-height: 1.4;

}



.gds-station-popup-content img {

    width: 100%;

    height: auto;

    max-height: 100px; /* Hauteur maximale de l'image dans la popup */

    object-fit: cover;

    border-radius: 4px;

    margin-bottom: 5px;

}



.gds-station-popup-content h3 {

    margin: 0 0 5px 0;

    font-size: 14px;

    font-weight: bold;

}



.gds-station-popup-content h3 a {

    text-decoration: none;

    color: #0056b3; /* Couleur des liens, adaptez à votre thème */

}



.gds-station-popup-content h3 a:hover {

    text-decoration: underline;

}



.gds-station-popup-content p {

    margin: 3px 0; /* Espacement des paragraphes dans la popup */

}



.gds-station-popup-content .details-link {

    display: block;

    margin-top: 8px;

    font-weight: bold;

}



/* Barre de répartition des pistes dans la popup */

.station-popup-pistes-bar {

    display: flex;

    width: 100%;

    height: 18px; /* Hauteur de la barre */

    border-radius: 4px;

    overflow: hidden; /* Pour que les coins arrondis s'appliquent aux enfants */

    font-size: 10px; /* Taille de police pour le texte (si affiché) */

    margin-top: 5px;

    margin-bottom: 5px;

    background-color: #e0e0e0; /* Couleur de fond si aucune piste (rare) */

}



.station-popup-pistes-bar > div {

    /* Segments colorés de la barre de pistes */

    text-align: center; /* Alignement du texte (si affiché) */

    color: white;       /* Couleur du texte (si affiché) */

    line-height: 18px;  /* Pour centrer verticalement le texte */

    overflow: hidden;

    white-space: nowrap;

    /* La couleur de fond (background-color) et la largeur (width) 

       sont appliquées inline via PHP pour chaque segment. */

}



/* Ajustements optionnels pour les popups Leaflet */

.leaflet-popup-content-wrapper {

    border-radius: 5px; /* Coins arrondis pour la popup globale */

}



.leaflet-popup-content {

    margin: 10px !important; /* Marge intérieure de la popup */

    min-width: 200px;        /* Largeur minimale de la popup */

    max-width: 250px;        /* Largeur maximale de la popup */

}



.domaine-skiable-card {

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.1);

    margin-bottom: 2em;

    overflow: hidden;

    padding: 0;

}



.domaine-skiable-thumbnail img {

    width: 100%;

    height: auto;

    display: block;

    border-bottom: 1px solid #eee;

}



.domaine-skiable-card h3,

.domaine-skiable-card h4 {

    padding: 1em 1.5em 0 1.5em;

    margin: 0;

    font-size: 1.3em;

    color: #333;

}



.domaine-skiable-card p,

.domaine-skiable-card ul {

    padding: 0 1.5em;

    font-size: 1em;

    color: #444;

}



.domaine-skiable-card ul {

    list-style: none;

    padding-left: 1.5em;

    margin-bottom: 1.5em;

}



.domaine-skiable-card ul li {

    margin: 0.5em 0;

    padding-left: 1.5em;

    position: relative;

}



.domaine-skiable-card ul li::before {

    content: "•";

    position: absolute;

    left: 0;

    color: #999;

}

.moment-puissance-bar {

    margin: 1em 0;

}



.moment-puissance-bar p {

    margin: 0 0 6px;

    font-weight: bold;

}



.moment-puissance-bar .bar-container {

    background: #eee;

    height: 16px;

    width: 100%;

    border-radius: 8px;

    overflow: hidden;

}



.moment-puissance-bar .bar-fill {

    height: 100%;

    transition: width 0.5s ease;

}



.moment-puissance-bar .scale {

    display: flex;

    justify-content: space-between;

    font-size: 12px;

    margin-top: 4px;

    color: #666;

}



.moment-puissance-bar .niveau {

    font-size: 0.9em;

    margin-left: 0.5em;

    font-weight: normal;

}

.rm-chart-flex {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: flex-start;

    gap: 30px;

    margin-top: 20px;

}



.rm-chart-container {

    max-width: 300px;

    flex: 0 0 300px;

}



.rm-chart-legend {

    flex: 1 1 200px;

    max-width: 300px;

}



.rm-chart-legend ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.rm-chart-legend li {

    display: flex;

    align-items: center;

    margin-bottom: 8px;

    font-size: 14px;

    color: #333;

}



.rm-legend-color {

    display: inline-block;

    width: 16px;

    height: 16px;

    margin-right: 10px;

    border-radius: 3px;

}

.prix-journee-bar {

    margin: 1em 0;

}



.prix-journee-bar p {

    margin: 0 0 6px;

    font-weight: bold;

}



.prix-journee-bar .bar-container {

    background: #eee;

    height: 16px;

    width: 100%;

    border-radius: 8px;

    overflow: hidden;

}



.prix-journee-bar .bar-fill {

    height: 100%;

    transition: width 0.5s ease;

}



.prix-journee-bar .scale {

    display: flex;

    justify-content: space-between;

    font-size: 12px;

    margin-top: 4px;

    color: #666;

}



.prix-journee-bar .prix-phrase {

    margin-top: 8px;

    font-weight: normal;

    font-size: 14px;

    color: #333;

}



.moment-puissance-bar .bar-container {

  position: relative; /* Nécessaire pour positionner le marqueur */

  background-color: #f0f0f0; /* Fond gris pour la barre vide */

}



.moment-puissance-bar .bar-marker-moyenne {

  position: absolute;

  top: -4px; /* Ajustez pour centrer verticalement */

  bottom: -4px; /* Ajustez pour centrer verticalement */

  width: 2px;

  background-color: rgba(0, 0, 0, 0.5);

  transform: translateX(-50%); /* Centre le marqueur sur sa position */

  z-index: 2; /* Pour être au-dessus de la barre de remplissage */

}



.moment-puissance-bar .bar-marker-moyenne::after {

    content: 'Moyenne';

    position: absolute;

    top: -20px; /* Positionne le label au-dessus du marqueur */

    left: 50%;

    transform: translateX(-50%);

    font-size: 10px;

    color: #555;

    white-space: nowrap;

}





.moment-puissance-bar .scale {

  display: flex;

  justify-content: space-between; /* Aligne min à gauche et max à droite */

  margin-top: 4px;

}



.moment-puissance-bar .bar-marker-moyenne::after {

    content: 'Moyenne'; /* Définit le texte à afficher */

    position: absolute;

    top: 100%; /* Positionne le texte juste en dessous de la barre */

    left: 50%; /* Centre le texte par rapport au marqueur */

    transform: translateX(-50%); /* Ajuste le centrage horizontal */

    margin-top: 4px; /* Ajoute un petit espace sous la barre */

    font-size: 11px;

    font-weight: 500;

    color: #333;

}



/* --- Icône d'information (i) --- */

.info-icon {

    display: inline-block;

    width: 16px;

    height: 16px;

    line-height: 16px;

    text-align: center;

    font-size: 11px;

    font-weight: bold;

    font-family: sans-serif;

    color: white;

    background-color: #909090; /* Gris */

    border-radius: 50%;

}



/* ==========================================================================

   Système d'Infobulles Global (Tooltip)

   ========================================================================== */



/* L'élément qui déclenche l'infobulle */

[data-tooltip] {

    position: relative;

    cursor: help;

}



/* La boîte de l'infobulle */

[data-tooltip]::after {

    content: attr(data-tooltip); /* Affiche le texte de l'attribut */

    position: absolute;

    bottom: 125%;

    left: 50%;

    transform: translateX(-50%);

    background-color: #333;

    color: #fff;

    padding: 8px 12px;

    border-radius: 5px;

    font-size: 12px;

    line-height: 1.4;

    white-space: pre-wrap; /* Respecte les sauts de ligne */

	width: max-content;   /* L'infobulle prend la largeur de son contenu */

    max-width: 300px;     /* Mais ne dépassera jamais 300px */    

	text-align: left;

    

    /* On la cache par défaut */

    visibility: hidden;

    opacity: 0;

    transition: opacity 0.2s ease;

    z-index: 10;

}



/* La petite flèche en dessous */

[data-tooltip]::before {

    content: '';

    position: absolute;

    bottom: 100%;

    left: 50%;

    transform: translateX(-50%);

    border-width: 5px;

    border-style: solid;

    border-color: #333 transparent transparent transparent;

    

    /* On la cache aussi par défaut */

    visibility: hidden;

    opacity: 0;

    transition: opacity 0.2s ease;

    z-index: 10;

}



/* Au survol (desktop), on affiche l'infobulle */

[data-tooltip]:hover::after,

[data-tooltip]:hover::before {

    visibility: visible;

    opacity: 1;

}



/* Pour le clic sur mobile (via JS) */

[data-tooltip].tooltip-active::after,

[data-tooltip].tooltip-active::before {

    visibility: visible;

    opacity: 1;

}



/* Style pour le conteneur global des onglets "Où dormir" */

.tabs-ou-dormir-container {

    margin-top: 20px;

    border: 1px solid #ddd;

    border-radius: 8px;

    overflow: hidden; /* Pour que les coins arrondis s'appliquent bien */

}



/* La barre de navigation des onglets */

.tabs-nav-dormir {

    display: flex;

    list-style: none;

    padding: 0;

    margin: 0;

    border-bottom: 1px solid #ddd;

    background-color: #f9f9f9;

}



/* Chaque bouton d'onglet */

.tab-nav-item {

    padding: 12px 18px;

    cursor: pointer;

    font-weight: 500;

    color: #555;

    margin: 0;

    border-right: 1px solid #ddd;

}



/* Style de l'onglet actif */

.tab-nav-item.active {

    background-color: #fff;

    color: #000;

    border-bottom: 1px solid #fff; /* Cache la bordure du bas du conteneur */

    margin-bottom: -1px; /* Fait "ressortir" l'onglet */

}



/* Style au survol (optionnel) */

.tab-nav-item:not(.active):hover {

    background-color: #f0f0f0;

}



/* Conteneur pour tous les panneaux de contenu */

.tabs-content-dormir {

    padding: 20px;

    background-color: #fff;

}



/* Style par défaut pour un panneau (ils sont cachés par JS) */

.tab-pane {

    display: none; /* Le JS gère l'affichage en "block" */

}



/* Style du panneau actif (celui qui est visible) */

.tab-pane.active {

    display: block;

}



/* Style pour les titres dans les onglets */

.tab-pane h3 {

    margin-top: 0;

}



/* --- PERMETTRE AUX ONGLETS DE PASSER À LA LIGNE SUR MOBILE --- */



@media (max-width: 767px) {

    .tabs-nav-dormir {

        /* 1. On s'assure que les onglets peuvent passer à la ligne */

        flex-wrap: wrap;

        

        /* 2. On supprime le scroll horizontal */

        overflow-x: hidden; 

    }



    .tab-nav-item {

        /* 3. On dit aux onglets de grandir pour remplir la largeur */

        flex-grow: 1;

        

        /* 4. On leur donne une largeur de base (120px) */

        /* S'il y a 3 onglets, ils feront 33% de la largeur */

        /* S'il y en a 4, ils s'empileront */

        flex-basis: 120px;

        

        /* 5. On centre le texte pour un meilleur look */

        text-align: center;

    }

}



.avis-station {

    background: #F6F6F6;

    padding: 1.8rem 2rem;

    margin-bottom: 2rem;

    border-radius: 4px;

}



.avis-station h2 {

    margin-top: 0;

    font-size: 1.4rem;

    color: var(--wp--preset--color--gris-fonce);

}



.avis-colonnes {

    display: flex;

    flex-wrap: wrap;

    gap: 2rem;

    margin-top: 1.5rem;

}



.avis-bloc {

    flex: 1 1 250px;

}



.avis-bloc h3 {

    margin-bottom: .5rem;

    font-size: 1.1rem;

    color: var(--wp--preset--color--blue);

}



.avis-bloc ul {

    margin: 0;

    padding-left: 1.2rem;

}



.avis-intro {

    font-style: italic;

    margin-bottom: 1rem;

    color: #444;

}



@media (max-width: 768px) {

    .avis-station {

        padding: 1.5rem;

    }

}



.gds-top-neige-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; margin-bottom: 30px; }

        .gds-snow-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; text-align: center; }

        .gds-snow-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

        .gds-card-forecast:hover { border-color: #3498db; }

        .gds-card-depth:hover { border-color: #2c3e50; }

        .rank-badge { position: absolute; top: 8px; left: 8px; font-size: 0.75rem; font-weight: bold; color: #fff; background: #3498db; padding: 2px 6px; border-radius: 4px; }

        .rank-badge.depth { background: #2c3e50; }

        .snow-amount { font-size: 1.6rem; font-weight: 800; color: #3498db; line-height: 1; margin: 10px 0 5px 0; }

        .snow-amount.depth { color: #2c3e50; }

        .station-name { font-weight: 600; font-size: 0.95rem; line-height: 1.2; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.4em; }

        .snow-date { font-size: 0.7rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }

        .snow-temp { font-size: 0.8rem; color: #555; margin-top: 5px; }

        .massif-name { font-size: 0.75rem; color: #666; margin-top: 5px; font-style: italic; }

        .gds-meteo-table-container { overflow-x: auto; margin-bottom: 30px; border: 1px solid #eee; border-radius: 8px; }

        .gds-meteo-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: #fff; }

        .gds-meteo-table th { background: #f9f9f9; padding: 12px; text-align: left; color: #666; font-weight: 600; border-bottom: 2px solid #eee; }

        .gds-meteo-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }

        .badge-avalanche { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-weight: bold; font-size: 0.85em; }

        .cell-weather { text-align: center; border-left: 1px solid #f9f9f9; min-width: 80px; }

        .weather-snow { font-size: 0.85em; color: #3498db; font-weight: bold; background: #f0f8ff; border-radius: 3px; display: inline-block; padding: 0 4px; margin-top: 2px; }

        .btn-detail { background: #f0f0f0; color: #333; text-decoration: none; padding: 6px 12px; border-radius: 4px; font-size: 0.85em; transition: 0.2s; white-space: nowrap; }

        .btn-detail:hover { background: #3498db; color: #fff; }

        @media (max-width: 768px) {

            .hide-mobile { display: none; }

            .gds-top-neige-grid { grid-template-columns: repeat(2, 1fr); }

        }