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 #ccc;
  border-radius: 8px;
}

/* 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;



}



/* ===========================
   Pour Liste
=========================== */
 .list {
      display: flex;
      justify-content: center;   /* centrer horizontalement */
      align-items: center;       /* centrer verticalement */
    }

.styled-select {
      background-color: #565355;   /* fond */
      color: #f5f5f5;              /* texte lisible */
      border: 2px solid #a06406;   /* bordure dorée */
      padding: 8px 16px;
      font-size: 15px;
      font-family: Arial, sans-serif;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin: 10px;
      appearance: none;            /* supprime le style natif */
      text-align: center;          /* centre le texte */
      width: 250px;                /* largeur fixe identique */
    }

    .styled-select:hover {
      background-color: #6d6b69;   /* survol discret */
      box-shadow: 0 0 6px #a06406;
    }