/* Couleurs du thème */
/** *** 2016 Bodacious *** **/

.w3-theme-l5 {color:#000 !important; background-color:#fbf6f9 !important}
.w3-theme-l4 {color:#000 !important; background-color:#f1e1ed !important}
.w3-theme-l3 {color:#000 !important; background-color: rgba(206, 224, 241, 0.6) !important}
.w3-theme-l2 {color:#000 !important; background-color:#d4a6c8 !important}
.w3-theme-l1 {color:#fff !important; background-color:#c689b6 !important}
.w3-theme-d1 {color:#fff !important; background-color:#ae5797 !important}
.w3-theme-d2 {color:#fff !important; background-color:#9d4c87 !important}
.w3-theme-d3 {color:#fff !important; background-color:#894276 !important}
.w3-theme-d4 {color:#fff !important; background-color:#763965 !important}
.w3-theme-d5 {color:#fff !important; background-color:transparent !important}

.w3-theme-light {color:#000 !important; background-color: rgba(206, 224, 241, 0.6) !important}
.w3-theme-dark {color:#fff !important; background-color:#622f55 !important}
.w3-theme-action {color:#fff !important; background-color:#622f55 !important}

.w3-theme {color:#fff !important; background-color:#b76ba3 !important}
.w3-text-theme {color:#b76ba3 !important}
.w3-theme-border {border-color:#7b59eb !important}
.w3-hover-theme:hover {color:#fff !important; background-color:#b76ba3 !important}
/* Liens */
a {  text-decoration:none; }
a:hover {  text-decoration:underline;  }
/* article section a {color:#af9483 } */ /* w3-text-theme */
/* .coments .content_com a {color:#445566 } */ /* w3-text-theme */


/* Images */
img {    height: auto;    max-width: 100%;}

/* Commentaires */
.coments .level-0 {  }
.coments .level-1 {  margin-left: 32px;}
.coments .level-2 {  margin-left: 64px;}
.coments .level-3 {  margin-left: 96px;}
.coments .level-4 {  margin-left: 128px;}
.coments .level-5 {  margin-left: 160px;}
#id_answer .comment-reply, #id_answer .comment-link {  artout; display: none}

/** igation **/
.menu-large.w3-navbar ul {  display: none;   position:sticky;  z-index: 1000;}
.menu-large.w3-navbar li:hover > ul {	display:block;	padding: 0px;}
.menu-large.w3-navbar ul li   {	  float:none;   display : block;  }
.menu-large.w3-navbar div:after  {	   font-family: FontAwesome;  content:"\f0d7"}
.menu-small ul li ul li   {	  list-style-type: none;display: block;
  position:sticky; position:-webkit-sticky;z-index: 1000;}
.menu-small ul li ul li a:before  {	   font-family: FontAwesome;  content:"\f0da"}

/** Icones dans le menu **/
 /* nav ul li#static-home a:before {font-family: FontAwesome; content:"\f015   ";} 
nav ul li#static-1 a:before, nav ul li#static-1_alt a:before {font-family: FontAwesome; content:"\f1d6   ";} 
 */
/** Tags **/
aside ul.tag-list li {  display: inline-block ;  margin-right:1rem;}
aside ul.tag-list {  list-style-type: none;}
.tag-size-1   	{ font-size: 1em;   }
.tag-size-2   	{ font-size: 1.1em; }
.tag-size-3   	{ font-size: 1.2em; }
.tag-size-4   	{ font-size: 1.3em; }
.tag-size-5   	{ font-size: 1.4em; }
.tag-size-6   	{ font-size: 1.5em; }
.tag-size-7   	{ font-size: 1.6em; }
.tag-size-8   	{ font-size: 1.7em; }
.tag-size-9   	{ font-size: 1.8em; }
.tag-size-10  	{ font-size: 1.9em; }
.tag-size-max 	{ font-size: 2em;   }
/* .tag-size-1 a 	{ color: #cfbfb4; }    		/* theme-l2 */
/* .tag-size-2 a 	{ color: #bfa99b; }      	/* theme-l1 */
/* .tag-size-3 a 	{ color: #af9483; }  		/* theme */
/* .tag-size-4 a 	{ color: #a48470; }  		/* theme-d1 */
/* .tag-size-5 a 	{ color: #a48470; }  		/* theme-d1 */
/* .tag-size-6 a 	{ color: #95745f; }  		/* theme-d2 */
/* .tag-size-7 a 	{ color: #95745f; }  		/* theme-d2 */
/* .tag-size-8 a 	{ color: #836654; }  		/* theme-d3 */
/* .tag-size-9 a 	{ color: #836654; }  		/* theme-d3 */
/* .tag-size-10 a	{ color: #705748; } 		/* theme-d4 */
/* .tag-size-max a { color: #5d493c; } 		/* theme-d5 */

/** Titres **/
/* .w3-text-theme-dark {color:#5d493c !important}  /* theme-d5 */

/** cacher le lien "Lire la suite" **/
/* article section p.more {display: none;} */


/* Make the navbar sticky on scroll 
.nav {
	background-color: #002d6c;
	height: 0.1rem;
	text-align: center;
  font-size: 1.5rem;
	position: fixed;
	width: 100%;
	z-index: 15;
	border-bottom: 1px #eee solid; 
    top: 0;
    position: -webkit-sticky; /* Pour ceux qui aiment la Pomme */
    position: sticky;
  
    background-color: rgb(14, 14, 211);
}
*/

.wrappery {
    height: 100vh;
    /*This part is important for centering*/
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .typing-demo {
    width: 10ch;
    animation: typing 2s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2em;
  }
  
  @keyframes typing {
    from {
      width: 0
    }
  }
      
  @keyframes blink {
    50% {
      border-color: transparent
    }
  }

  @media (max-width: 767px) {
    .header {
        position: sticky;
        top: 0;
    }
  }
  
.artout{
  outline: 4px ridge aqua);
  border-radius: 2rem;
  margin-right: 0px;
  margin-left: 0px;
    
}
.artout2{
  outline: 5px ridge rgba(59, 50, 223, 0.6);
  border-radius: 1.5rem;  

}
  
.backg{
  background-color: rgb(255, 255, 255);
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  -moz-opacity: 0.8;
			-khtml-opacity: 0.8;
			opacity: 0.8;

}

#duco-widget {
  text-align: center;
  padding: 1rem;
  border: 2px solid #00FFFF; /* cyan */
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  background-color: rgba(0, 0, 0, 0.8); /* semi-transparent black */
  max-width: 20rem;
  margin: auto;
}


#duco-widget .logo {
  width: 4rem;
  margin: 0 auto 0.5rem;
  filter: drop-shadow(0 0 10px #FF00FF); /* pink shadow */
  animation: pulse 2s infinite;
}

#duco-widget h3 {
  font-size: 1.25rem;
  font-weight: bold;
  color: #FF00FF; /* pink */
  text-shadow: 0 0 5px #FF00FF;
}

#duco-widget p {
  margin: 0.5rem 0;
  color: #00FFFF; /* cyan */
  text-shadow: 0 0 5px #00FFFF;
}

#duco-widget .neon-text {
  color: #00FFFF; /* cyan */
  text-shadow: 0 0 5px #00FFFF;
}

@keyframes pulse {
  0%, 100% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.1);
  }
}

.counter-update {
  animation: counter-update 0.2s ease-in-out;
}

@keyframes counter-update {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}
/* Nouvelle classe pour le néon jaune */
.neon-yellow {
  color: #FFFF00; /* jaune */
  text-shadow: 0 0 5px #FFFF00, 0 0 10px #FFFF00, 0 0 15px #FFFF00;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  
}
/* Nouvelle classe pour le néon bleu */
.neon-blue {
  color: #889fd1; /* bleu*/
  text-shadow: 2px 3px 5px #161616, 0 0 10px #669de6, 0 0 15px #8f68ea;
  font-size: 43px;    
  font-family: 'Orbitron', sans-serif; 
  stroke: rgb(167, 7, 79);
  stroke-width: .5px;
  stroke-linejoin: round;
  stroke-dasharray: 90% 10%;
  stroke-width: 14px;
  stroke-dashoffset: 0%;
  animation: stroke-offset 15.5s linear infinite;

}
@keyframes stroke-offset {
  100% {
      stroke-dashoffset: -35%;
  }
}


/* Nouvelle classe pour le néon bleu-foncé */
.neon-blue-deep {
  color: #92ade8; /* deep blue */
  text-shadow: 2px 1px 5px #4b62e5, 2px 0 6px #1a1c1e, 2px 0 15px #6739d4;
  font-size: 28px; 
  font-weight: lighter; 
  font-family: 'Orbitron', sans-serif; 
  transition: text-shadow 0.3s ease; /* Ajout de la transition pour l'effet de survol */ 

}

.neon-blue-deep:hover {
 text-shadow: 2px 2px #558abb;  /* Effet de survol */
 text-decoration: underline; /* Ajout du soulignement */
}

/* Nouvelle classe pour le néon rose */
.neon-pink {
  color: #FF00FF; /* rose */
  text-shadow: 0 0 1px #FF00FF, 0 1px 1px #FF00FF, 0 1px 1px #FF00FF;
  font-size: 27px;
  font-family: 'Orbitron', sans-serif;
  font-weight: lighter;
  transition: text-shadow 0.3s ease; /* Ajout de la transition pour l'effet de survol */
}
/* Nouvelle classe pour le néon vert */
.neon-green {
  color: #00FF7F; /* Couleur pastel vert */
  text-shadow: 0 0 1px #00FF7F, 0 0 1px #00FF7F, 0 0 1px #00FF7F;
  font-family: 'Orbitron', sans-serif;
  font-weight: lighter;

}
/* Nouvelle classe pour le néon vert */
.neon-green2 {
  color: #e7f1ec; 
  text-shadow: 1px 4px 5px #68d968, 3px 5px 15px #059c50,  1px 4px 20px #6b756d;
  font-family: 'Orbitron', sans-serif;
  font-size: 55px;
  font-weight: bolder;


}
/* Nouvelle classe pour le néon rouge */
.neon-red {
  color: #FF0000; /* rouge */
  text-shadow: 0 0 1px #FF0000, 1px 0 1px #FF0000, 1px 0 1px #FF0000;
  font-size: 20px;
  font-family: 'Orbitron', sans-serif;
  font-weight: lighter;
}
.neon-red:hover {
  text-shadow: 0 0 1px #FF0000, 1px 0 1px #FF0000, 1px 0 1px #FF0000;
  font-size: 20px;
  font-family: 'Orbitron', sans-serif;
  font-weight: lighter;
  color: #FF0000; /* rouge */
}


/* Nouvelle classe pour le néon violet */
.neon-purple {
  color: #800080; /* violet */
  text-shadow: 0 0 5px #800080, 0 0 10px #800080, 0 0 15px #800080;
  font-size : 20px;
  font-family: 'Orbitron', sans-serif;
  font-weight: lighter;

}
.neon-purple:hover {
  text-shadow: 0 0 5px #800080, 0 0 10px #800080, 0 0 15px #800080;
  font-size : 20px;
  font-family: 'Orbitron', sans-serif;
  font-weight: lighter;
  color: #800080; /* violet */
}


/* Nouvelle classe pour le néon blanc */
.neon-white {
  color: #fbf3fb; /* blanc */
  text-shadow:
  1px 1px 2px red,
  0 0 1em blue,
  0 0 0.2em blue;
  font-size : 20px;
  font-family:  'Orbitron', sans-serif;
}
/* Nouvelle classe pour le néon orange */
.neon-orange {
  color: #FFB347; /* Couleur pastel orange */
  text-shadow: 1px 1px 1px #FFB347, 1px 0 1px #FFB347, 0 0 1px #FFB347;
  font-family:  'Orbitron', sans-serif;
  font-weight:lighter;
  background-color: transparent;
}
. neon-orange:hover {
  text-shadow: 1px 1px 2px #FFB347, 0 0 2px #FFB347, 0 0 1px #FFB347;
  font-family:  'Orbitron', sans-serif;
  font-weight: lighter;
  color: #FFB347; /* Couleur pastel orange */
  
}
/* Nouvelle classe pour le néon cyan */
.neon-cyan {
  color: #00FFFF; /* cyan */
  text-shadow: 2px 1px 3px #00FFFF, 3px 2px 1px #00FFFF, 2px 1px 1px #00FFFF;
  font-family: 'Orbitron', sans-serif;

}
/* Nouvelle classe pour le néon grey */
.neon-grey {
  color: #808080; /* grey */
  text-shadow: 0 0 1px #808080, 0 0 10px #808080, 0 0 15px #808080;
  font-size: 16px;
  font-family: 'Orbitron', sans-serif;
}
/* Nouvelle classe pour le néon brown */
.neon-brown {
  color: #A52A2A; /* brown */
  text-shadow: 0 0 5px #A52A2A, 0 0 10px #A52A2A, 0 0 15px #A52A2A;
}
/* Nouvelle classe pour le néon black */
.neon-black {
  color: #f4ecec; /* black */
  text-shadow: 0 0 1px #f153e4, 0 0 1px #000000, 1px 0 1px #4e4d4d;
  font-family:  'Orbitron', sans-serif;
  font-weight:lighter;
  background-color: transparent;
  font-size: 16px;
}
/* Nouvelle classe pour le néon gold */
.neon-gold {
  color: #FFD700; /* gold */
  text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700, 0 0 15px #FFD700;
  font-size: 16px;
  font-family:  'Orbitron', sans-serif;
}
/* Nouvelle classe pour le néon silver */
.neon-silver {
  color: #6a9ff9; /* silver */
  text-shadow: 1px 1px 2px #0c232d, 0 2px 5px #b07a7a, 2px 0 10px #C0C0C0;
  font-size: 16px;
  font-family:  'Orbitron', sans-serif;
}

/* Nouvelle classe pour le néon silver */
.neon-silver2 {
  color: #6a9ff9; /* silver */
  text-shadow: 1px 1px 2px #7ad4f7, 0 2px 5px #b07a7a, 2px 0 10px #C0C0C0;
  font-size: 22px;
  font-family:  'Orbitron', sans-serif;
}
/* Nouvelle classe pour le néon turquoise */
.neon-turquoise {
  text-shadow:
    1px 1px 2px rgb(120, 187, 242),
    0 0 1em rgb(104, 104, 208),
    0 0 0.2em blue;

  font-size: 16px;
  font-family:  'Orbitron', sans-serif;
  text-decoration:overline;

}
/* Appliquer la police Orbitron
// <weight>: Use a value from 400 to 900
// <uniquifier>: Use a unique and descriptive class name */

.orbitron-norm{
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-list li {
  font-family: 'Orbitron', sans-serif;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-list li:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.article-list a {
  text-decoration: none;
  color: #333;
}

.article-list a:hover {
  text-decoration: underline;
}


/* Styles pour le popup */
.popup {
  display: none; /* Masqué par défaut */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.9); /* Fond semi-transparent noir */
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  z-index: 1000;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
}

.popup-content {
  color: #00FFFF; /* Texte cyan */
  font-family:'Courier New', Courier, monospace
  text-shadow: 0 0 5px #00FFFF;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #FF00FF; /* Fond rose */
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 5px #FF00FF;
  border-radius: 5px;
}

.popup-close:hover {
  background-color: #FF00FF;
  text-shadow: 0 0 10px #FF00FF;
}

pre code {
  display: block;
  white-space: pre-wrap; /* Permet le retour à la ligne automatique */
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Conteneur sticky pour le titre, sous-titre et hamburger *//* Rendre le conteneur du titre et du sous-titre sticky */
.sticky-header {
  position: sticky;
  top: 0; /* Fixé en haut de la page */
  z-index: 100; /* Assurez-vous qu'il reste au-dessus des autres éléments */
  background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
  
}

/* Styles pour le titre */
.sticky-header h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  color: aqua;
  margin: 0;
  text-align: center;
  margin-top: 0%;
  top : 0;
}

/* Styles pour le sous-titre */
.sticky-header h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  color: aquamarine;
  margin-top: 0%;
  margin-bottom: 0.1rem;
  text-align: center;
  top : 0;
}

/* Styles pour l'image de fond */
.vidbacking {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* L'image couvre toute la largeur */
  height: 100%; /* L'image couvre toute la hauteur */
  object-fit: cover; /* L'image s'adapte pour couvrir tout l'espace sans déformation */
  z-index: -1; /* Place l'image derrière le contenu */
}

.backmenu {
  background: linear-gradient(45deg, #FFDEE9, #B5FFFC, #D4FC79, #A7C7E7);

}
.backsite {
  background: linear-gradient(25deg, #A7C7E7,#FDFD96,#D4A5E7);
  background-repeat: no-repeat;
  background-size: cover; /* Utilisez "cover" pour s'assurer que l'arrière-plan couvre toute la zone */
  background-attachment: fixed;
  -webkit-background-size: cover; /* Compatibilité avec Safari */
  -moz-background-size: cover; /* Compatibilité avec Firefox */
  -o-background-size: cover; /* Compatibilité avec Opera */
  background-size: cover;
}
@media (max-width: 768px) {
  .backsite {
    background-attachment: scroll; /* Désactive l'effet "fixed" sur les petits écrans */
  }
}
.backtop {
  background: linear-gradient(85deg,#FDFD96,#D4A5E7,#A7C7E7 );

}

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .w3-opennav {
      background-color: #444; /* Couleur spécifique pour Safari */
    }

    .backtop {
      background: linear-gradient(45deg, #A7C7E7, #D4A5E7, #FDFD96);
      background-size: cover;
      height: 100vh;
      width: 100%;
    }
  }
}


/* Styles pour l'effet de "marquee" */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  background-color: transparent; /* Couleur de fond */
  width: 150px; /* Assurez-vous que le conteneur occupe toute la largeur */
  padding: 0 1rem; /* Ajoute un padding pour éviter que le texte touche les bords */
}

.marquee span {
  display: inline-block; /* Corrige le problème de "display:" vide */
  animation: marquee 250s linear infinite; /* Ralentir l'animation */
}

/* Animation pour le texte défilant */
@keyframes marquee {
  0% {
    transform: translateX(100%); /* Commence à droite */
  }
  100% {
    transform: translateX(-100%); /* Termine à gauche */
  }
}

.test {
  font-family: 'Orbitron', sans-serif;
  font-size: xx-large;
  color: aqua;
  -webkit-text-stroke: 1px black;
}

.test2 {
  font-family: 'Orbitron', sans-serif;
  font-size: x-large;
  color: aquamarine;

  -webkit-text-stroke: 1px blue;
}

.test3 {
  font-family: 'Orbitron', sans-serif;
  font-size: medium;
  color: black;
}

.test4 {
  font-family: 'Orbitron', sans-serif;
  font-size: x-large;
  color: black;
}

.test5 {
  font-family: 'Orbitron', sans-serif;
  font-size: xx-large;
  color: black;

}

.test6 {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  color: black;
}

.test7 {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: black;
}

.test8 {
  font-family: 'Orbitron', sans-serif;
  font-size: small;
  color: black;

}

.test9 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  color: black;


  ;
}



.wrappery {
  /*This part is important for centering*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.typing-demo {
  width: 15ch;
  animation: typing 3s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: 'Orbitron', sans-serif;
  font-size: medium;
  color: black;

}

@keyframes typing {
  from {
    width: 0
  }
}

@keyframes blink {
  50% {
    border-color: transparent
  }
}


/* Demo Styles */
.z-text {
  animation: wobble 15s ease-in-out infinite;
  transform: rotateX(10deg) rotateY(-10deg);
}

.z-layer {
  filter: brightness(0.7);
}

.z-layer:first-child {
  filter: brightness(1);
}


.z-layer:not(:first-child) {
  filter: brightness(0.7);

}

@keyframes wobble {

  0%,
  100% {
    transform: rotate3d(-1, 1, 0, 20deg);
  }

  25% {
    transform: rotate3d(1, 10, 0, -10deg);
  }

  50% {
    transform: rotate3d(10, -1, 0, 20deg);
  }

  75% {
    transform: rotate3d(-1, -10, 0, -30deg);
  }
}

.trans {
  -moz-opacity: 0.98;
  -khtml-opacity: 0.98;
  opacity: 0.98;
}

.trans2 {
  -moz-opacity: 0.99;
  -khtml-opacity: 0.99;
  opacity: 0.99;
}

.trans3 {
  background-color: transparent;
}




@keyframes typing {
  from {
    width: 0
  }
}

@keyframes blink {
  50% {
    border-color: transparent
  }
}


/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  .scene {
    width: 98%;
    height: 98%;
    margin: 5%;
  }
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  .scene {
    width: 98%;
    height: 98%;
    margin: 5%;
  }
}
/* iPhones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
  .scene {
    width: 98%;
    height: 98%;
    margin: 5%;
  }
}
/* iPhones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
  .scene {
    width: 98%;
    height: 98%;
    margin: 5%;
  }
}
/* iPhones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
  .scene {
    width: 98%;
    height: 98%;
    margin: 5%;
  }
}

/* Conteneur pour le lecteur audio */
.audio-container {
  position: sticky; /* Rend le conteneur sticky */
  bottom: 0; /* Fixe le conteneur en bas de la page */
  width: 12%; /* Occupe toute la largeur de la page */

  z-index: 1000; /* Assure que le lecteur reste au-dessus des autres éléments */

}

/* Style du lecteur audio */
.audio-container audio {
  width: 90%; /* Rend le lecteur responsive */
  max-width: 600px; /* Limite la largeur maximale */
  border-radius: 30px; /* Ajoute des coins arrondis */
  background-color: #fff; /* Fond blanc pour le lecteur */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ajoute une ombre subtile */
}
/* Style du bouton de lecture */
.audio-container button {
  padding: 10px 20px; /* Ajoute du padding pour le bouton */
  background-color: #007bff; /* Couleur de fond du bouton */
  color: #fff; /* Couleur du texte du bouton */
  border: greenyellow; /* Supprime la bordure du bouton */
  border-radius: 5px; /* Ajoute des coins arrondis */ 
  cursor: pointer; /* Change le curseur au survol du bouton */
  transition: background-color 0.3s ease; /* Ajoute une transition de couleur */
}

/* Effet de survol pour le bouton de lecture */
.audio-container button:hover {
  background-color: #0056b3; /* Change la couleur de fond au survol */
}
/* Style du texte du lecteur audio */ 
.audio-container p {
  color: #fff; /* Couleur du texte */
  font-family: 'Orbitron', sans-serif; /* Police de caractères */
  font-size: 1.2rem; /* Taille de la police */
  margin: 0; /* Supprime la marge par défaut */
  padding: 0.5rem; /* Ajoute un padding pour espacer le texte */
}
/* Style du titre du lecteur audio */
.audio-container h2 { 
  color: #fff; /* Couleur du texte */
  font-family: 'Orbitron', sans-serif; /* Police de caractères */ 
  font-size: 1.5rem; /* Taille de la police */
  margin: 0; /* Supprime la marge par défaut */ 
  padding: 0.5rem; /* Ajoute un padding pour espacer le titre */  
}   
.info-container{
  bottom: 0;
  z-index: 1000;
}

.bip{
  text-decoration: none;
  color: #FFFFFF;
}
.bip2{
  text-decoration: none;
  color: #FFFFFF;
}
.bipscifi{
  text-decoration: none;
  color: #FFFFFF;
}

/* Styles pour les éléments avec effet de glow */
.glow {
  text-shadow: 0 0 5px #00FFFF, 0 0 10px #00FFFF, 0 0 15px #00FFFF;
  font-family: 'Orbitron', sans-serif;
}

.glow-container {
  border: 2px solid #00FFFF; /* Bordure cyan */
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: rgba(0, 0, 0, 0.8); /* semi-transparent black */
}

.glow-container p {
  color: #00FFFF; /* cyan */
  text-shadow: 0 0 5px #00FFFF;
}

.glow-container a {
  color: #FF00FF; /* pink */
  text-shadow: 0 0 5px #FF00FF;
}

.glow-container a:hover {
  text-shadow: 0 0 10px #FF00FF;
}

.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-list li {
  font-family: 'Orbitron', sans-serif;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-list li:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.article-list a {
  text-decoration: none;
  color: #333;
}

.article-list a:hover {
  text-decoration: underline;
}