.carte
{
    border: 2px solid #c08a1b; /* doré premium */
 
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease;
     appearance: none;

    box-shadow:
        inset 0 0 6px rgba(255, 255, 255, 0.1),
        0 4px 10px rgba(0, 0, 0, 0.4);
}








.visiteurs {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fdd496;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
   text-align: center;

}

.compteur{
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16px;
  font-weight: red;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fdd496;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
   text-align: center;

}








select {
      background-color: #ffffff;       /* fond blanc */
      color: #333333;                  /* texte foncé lisible */
      border: 2px solid #a06406;       /* bordure dorée */
      padding: 8px 14px;
      font-size: 15px;
      font-family: "Segoe UI", Arial, sans-serif;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin: 12px;
      width: 280px;                    /* largeur identique */
      text-align: center;              /* centre le texte */
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      appearance: none;                /* supprime le style natif */
    }

    select:hover {
      background-color: #fff8f0;       /* léger beige au survol */
      box-shadow: 0 0 8px #a06406;     /* halo doré */
    }

    label {
      font-weight: bold;
      color: #565355;
      margin-bottom: 4px;
      display: block;
      text-align: center;
    }






h1, h2 {
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 2.5em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fdd496;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  margin: 20px 0;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
}



/* Conteneur global */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Labels et listes déroulantes */
.controls label {
  font-weight: bold;
  margin-right: 0.5rem;
}

.controls select {
  min-width: 220px;
  width: 250px;
  padding: 0.4rem;
  font-size: 1rem;
  margin-right: 0.5rem;
}

/* Boutons invisibles par défaut */
.controls button {
  display: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;

}

.controls button.show {
  display: inline-block; /* visible quand une ville est choisie */
}

/* Carte */
#map {
  width: 100%;
  height: 70vh;
  margin: 0 auto;
  border: 2px solid #c08a1b; /* doré premium */
 
    border-radius: 10px;
       box-shadow:
        inset 0 0 6px rgba(255, 255, 255, 0.1),
        0 4px 10px rgba(0, 0, 0, 0.4);

  
  
}

/* Responsive : petit écran */
@media (max-width: 768px) {
  .controls {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .controls select {
    width: 90%; /* occupe presque toute la largeur */
    margin-bottom: 0.5rem;
  }

  #map {
    width: 95%;
    height: 60vh;
  }
}


#btn-france, #btn-asie {
  display: none; /* cachés par défaut */
}

#btn-france.show, #btn-asie.show {
  display: inline-block; /* visibles quand "show" est ajouté */
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/*begin-variables custom-site-css*/.journal {
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 2.5em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #222;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  margin: 20px 0;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
}
.journal-or {
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 2.5em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fdd496;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  margin: 20px 0;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
}

.rss-box {
  break-inside: avoid;
  margin: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 3px ridge #0077cc;
  border-radius: 10px;
  padding: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -20px,
              rgba(0, 0, 0, 0.3) 0px 18px 36px -18px,
              rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  cursor: pointer;



}
.rss-box:hover { transform: scale(1.03); }
.rss-box img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  transition: transform 0.3s ease;
  display: block;
}

.rss_1{

  background-color: rgba(226, 226, 226, 0.3);
  /* border: 2px solid gold; bordure couleur or #FFD700 */ 
	border: 1px solid #FFD700;

	border-radius: 10px;
  padding: 10px 10px 10px 10px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

}
/*end-variables custom-site-css*/
 /*begin-variables base-font-size*/ 
 html { font-size: 16px; }
 /*end-variables base-font-size*/

 /*begin-variables custom-site-css*/.journal {
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 2.5em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #222;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  margin: 20px 0;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
}
.journal-or {
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 2.5em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fdd496;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  margin: 20px 0;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
}


.journal-or2 {
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.5em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fdd496;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  margin: 20px 0;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
}



.rss-box {
  break-inside: avoid;
  margin: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 3px ridge #0077cc;
  border-radius: 10px;
  padding: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -20px,
              rgba(0, 0, 0, 0.3) 0px 18px 36px -18px,
              rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  cursor: pointer;



}



/* ===========================
   Container Pour List
=========================== */
.list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px auto;
    width: 100%;
    max-width: 900px;
}

/* ===========================
   Select Premium
=========================== */
.styled-select {
    background: linear-gradient(145deg, #4c4a4c, #5e5b5e); /* effet métal brossé */
    color: #f8f8f8;
    border: 2px solid #c08a1b; /* doré premium */
    padding: 10px 18px;
    font-size: 16px;
    font-family: "Segoe UI", Arial, sans-serif;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease;
    width: 260px;
    appearance: none;
    position: relative;
    box-shadow:
        inset 0 0 6px rgba(255, 255, 255, 0.1),
        0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Flèche personnalisée */
.styled-select::after {
    content: "▼";
    font-size: 12px;
    color: #d4a23a;
    position: absolute;
    right: 15px;
    pointer-events: none;
}

/* Hover premium */
.styled-select:hover {
    background: linear-gradient(145deg, #5e5b5e, #6f6c6f);
    border-color: #e0b04a;
    box-shadow:
        0 0 10px rgba(224, 176, 74, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Focus (clique) */
.styled-select:focus {
    outline: none;
    border-color: #ffcc5c;
    box-shadow:
        0 0 12px rgba(255, 204, 92, 0.8),
        0 0 4px rgba(255, 204, 92, 0.6) inset;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 768px) {
    .styled-select {
        width: 220px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .list {
        flex-direction: column;
    }

    .styled-select {
        width: 90%;
        max-width: 320px;
    }
}