html, 
body {
    height: 100%;
}

/* FONT SELECTA */

@font-face{
	font-family: f1;
	src: url(../fonts/HelveticaNeue.ttf);
}

@font-face{
	font-family: f2;
	src: url(../fonts/MonospaceTypewriter.ttf);
}

@font-face{
	font-family: f3;
	src: url(../fonts/HelveticaNeue-CondensedBold.ttf);
}

/* ── BANDEAU ANNONCE ── */
.announce-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: #ff007f;
  color: #fff;
  font-family: f2, monospace;
  font-size: 0.85em;
  letter-spacing: .04em;
  padding: 8px 40px 8px 16px;
  text-align: center;
  border-bottom: 2px dotted rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.announce-text a {
  color: #fff;
  text-decoration: underline dotted;
}

.announce-close {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1em;
  cursor: pointer;
  opacity: .7;
  line-height: 1;
  padding: 2px 4px;
}
.announce-close:hover { opacity: 1; }

@media (max-width: 768px) {
  .announce-bar {
    font-size: 0.75em;
    padding: 7px 36px 7px 10px;
  }
}


/* INDEX */

.body_index{
	
	-webkit-animation: NAME-YOUR-ANIMATION 6s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 6s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 6s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 6s infinite; /* IE 10+, Fx 29+ */
}


.titre_bloc{
	width: 100%;
	height: 100%;
	
}
.titre{
font-size: 6rem ;
margin: 0px;
	text-align: center;
		-webkit-animation: TITRE_ANIM 6s infinite; /* Safari 4+ */
  -moz-animation:    TITRE_ANIM  6s infinite; /* Fx 5+ */
  -o-animation:      TITRE_ANIM  6s infinite; /* Opera 12+ */
  animation:         TITRE_ANIM  6s infinite; /* IE 10+, Fx 29+ */
}
.sub_title{
	font-family: f2;
	text-align: center;
	font-size: 3rem;
}


@-webkit-keyframes NAME-YOUR-ANIMATION {
0%, 32% {
    background-color: #ff007f;
    
}
33%, 65% {
    background-color: #FFE900;
   
}
66%, 100% {
    background-color: #0827F5;
   
}

}

@-webkit-keyframes TITRE_ANIM {
0%, 32% {
 	color: #fff;
    
}
33%, 65% {
    color: #0827F5;
   
}
66%, 100% {
    color: #19FFEE;
   
}

}

.sub{
	width: 35%;
	margin: auto;
font-size: 4rem;
	font-family: f2;
}




/* RADIO */

	
.body_radio{
	background:url('../img/BG.png');

background-repeat:no-repeat;
background-size:cover;
background-position:bottom;
        position:relative; 
        
	
}


#chataigneContainer{
	
	position:absolute;
	right: 25px;
	width: 10%;
	height: auto;
}

#chataigneAile{
	width: 100%;
}

.titre_RC{

	width: 36%;
	position: absolute;
	left: 50%;
	transform : translateX(-50%);
	top: 0;
}

#logo{
	text-align: center;
	font-family: f2;
	font-size: 1.5em;

}
#userCount{
	

}

.description_RC{
	text-align: center;
	font-family: f2;
}
.player_container{
	 position: absolute;
	 top: 30%;
	 left: 50%;
	 transform: translateX(-50%);
	 z-index: 1;
 }

#userCount{
	font-family: system-ui;
	font-size: smaller;
	display: block;
	text-align: center;
}
.menu{
	position: absolute;
	display: inline-block;
  	left: 41px;
  	top: 25px;
	width: 23%;
	height: 500px;
  	font-family: f2;
  


}


/* Ne touche pas aux marges/espacements existants de .menuLink */
.menuLink{
  /* ton style existant : */
  color:#fff;
  font-size:1.5em;
  /* PAS de line-height forcé ici */
}

/* Le SVG vaut exactement 1em de haut = même taille que le texte */
.menuLink svg{
  display:inline-block;
  height:1em;
  width:auto;
  vertical-align:baseline;
  overflow:visible; /* IMPORTANT : laisse le stroke dépasser */
}

/* Texte vectoriel avec vrai contour, sans redimensionner la glyphe */
.menuLink text{
  fill:#fff;
  stroke:#000;
  stroke-width:16px;                /* ton contour */
  vector-effect:non-scaling-stroke; /* 16px réels, pas “écrasés” */
  paint-order:stroke fill;
  stroke-linejoin:round;

  /* hérite exactement de la typo du titre */
  font-size:1em;
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
}

/* Hover = contour retiré, comme ton -webkit-text-stroke:0 */
.menuLink:hover text{
  stroke-width:0;
  cursor:pointer;
}
/* Focus clavier : anneau custom sur le conteneur, pas sur le <text> */
.menuLink:focus-visible{
  outline: none;                /* on neutralise l’outline natif */
}
.menuLink:focus-visible::after{
  content:"";
  position: absolute;
  inset: -4px;                  /* marge autour du lien */
  border: 2px dashed rgba(255,255,255,.6);
  border-radius: 8px;           /* optionnel */
  pointer-events: none;         /* ne bloque pas les clics */
}

/* Respect des préférences “réduire les animations” */
@media (prefers-reduced-motion: reduce){
  .menuLink:focus-visible::after{ transition: none; }
}


#mainContainer{
	
	width: 40%;
	height: 500px;
	margin: auto;
	display: flex;
  	flex-direction: column;
  	position: absolute;
  	overflow: auto;
  	left: 50%;
  	transform: translateX(-50%);
  	top: 30%;


}
.chat_container{
  	position: absolute;
  	right: 15px;
  	top: 30%;
	width: 25%;
	height: 500px;
	margin-right: 1%;
	display: flex;
  	flex-direction: column;
  	overflow: hidden;
  	
}



#messageArea{

	overflow-x: auto;
	scrollbar-color: #A2413B #dfc1ad;
  	scrollbar-width: thin;
	
}


.chat_form{
	
	text-align: center;
	padding: 5px;
	border-top: dotted white 2px;

}
.chat_form input{
	
}


.grilleContainer{
	
  	position: absolute;
  	left: 25px;
  	top: 30%;
	width: 23%;
	height: 400px;
	margin-right: 1%;

	display: flex;
  	flex-direction: column;
  	overflow: auto;
  	border: dotted white 2px;
  
}
.progTitle{
	font-family: f3;
	
	
}
.gridLine{
	 direction:ltr;

	width: 100%;
	

}
.showTime{
	font-family: f2;
	width:15%;
	height: auto;
	float: left;
	overflow: hidden;
	text-align: center;

}
.lineInfo{
	width: 85%;
	padding-left: 5px;
	float: right;
	display: inline-block;
	border-left: dotted white 2px;
}
.showName{
	font-family: f3;
}
.showDescription{
	font-family: f2;
	
}
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    display: none;
}

.galerieContainer{
	font-family: f2;
	text-align: center;
	width:576px;
	margin: auto;
	background-color: #dfc1ad;
}
.aboutContainer{
	text-align: center;
	font-family: f2;
	width:100%;
	margin: auto;
	background-color: #dfc1ad;
}
.contactContainer{
	font-family: f2;
	text-align: center;
	width:100%;
	margin: auto;
	background-color: #dfc1ad;
}
.archivesContainer{
	font-family: f2;
	text-align: center;
	width:100%;
	margin: auto;
	background-color: #dfc1ad;

}
.contactTitle{
	font-size: 1.5em;
	
}
.contactText{

}



/* responsiness */

@media (max-width:768px)  {
/*INDEX */



/* RADIO */

.body_radio{
	background:url('../img/BG_uni.png');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
	
}

.titre_RC{
	width: 95%;
	position: unset;
    left: unset;
    transform: none;
    display: block;
    margin: auto;
}
.menu{
	 width: 100%;
    height: auto;
   left: 0;
  	top: 0;
    position: relative;
    text-align: center;
  
   
}
.player_container{
	position: unset;

    transform: none;
    margin: auto;

}
.player{
	display: block;
	margin: auto;
}

.menuLink{
	padding: 0px;
	display: inline;
    line-height:51px;
    
 
}

#mainContainer{
	position: unset;
    left: unset;
    transform: none;
	width: 90%;

	height: auto;
	margin: auto;
	margin-top: 30px;
	
}
.aboutContainer{
	position: unset;
    left: unset;
    transform: none;
	width: 100%;

}
.grilleContainer {
    display: none !important;
}

.chat_container {
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    width: 100% !important;
    height: auto !important;
    max-height: 50vh;
    margin: 0 !important;
    top: unset !important;
    background: rgba(0,0,0,.88);
    border-top: 2px dotted white;
    z-index: 500;
    display: flex !important;
    flex-direction: column;
}
.chat_container #logo {
    font-size: 1em;
    margin: 0;
    padding: 6px 12px;
    cursor: pointer;
    color: #fff;
    border-bottom: 1px dotted rgba(255,255,255,.3);
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat_container #logo::after {
    content: "▲";
    font-size: 0.7em;
    transition: transform .3s;
}
.chat_container.collapsed #logo::after { transform: rotate(180deg); }
.chat_container.collapsed #userCount,
.chat_container.collapsed #messageArea,
.chat_container.collapsed .chat_form { display: none !important; }
#messageArea { flex: 1; overflow-y: auto; }

.chat_form input{
	padding: 5px;
	display: block;
	margin: auto;
	width: 100%;
}


}