@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
  font-family: evolver;
  src: url(evolver.ttf);
}

body {
    font-family: 'PT Sans', sans-serif;
    color: #000000;
    margin: 0;
    background: #1d2122 url("../../images/2025/cockpit.png") no-repeat center;
	background-size: cover;
	font-size:120%;
}

* {
    box-sizing: border-box;
}

a {
    color: #101010;
    outline: none;
}

a:hover, a:focus, a:active {
    color: #CCCCCC;
}

header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(128, 128, 128, 0.2);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  margin: 0 auto auto;
  overflow: hidden;
}
header:hover {
  background-color: rgba(128, 128, 128, 0.5);
}
header h1 {
  margin: 5px 0 0 5px;
  float: left;
  width: 96vw;
  height: calc( 96vw * 0.079);
    max-height: 65px;
}
header h1 a {
  background: url(../../images/2025/TitreCalendrier.png) no-repeat;
  background-size: contain;
  width: 96vw;
  height: 65px;
  display: block;
}
header h1 span {
  display: none;
}

#menu {
  overflow: hidden;
  float: right;
  margin-top: 15px;
  margin-right: 15px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.8), 0 0 5px black, 0 0 5px black;
}

#menu li {
  float: left;
  margin-right: 10px;
  list-style: none;
  padding-bottom: 2px;
}

#menu li a {
  text-decoration: none;
  color: #fff3e7;
  padding: 6px 10px;
  display: inline-block;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  border-radius: 8px;
}
#menu li a.rss:after {
    content: "";
    display: inline-block;
    background: transparent url("../../images/2016/rss-icon.png") no-repeat left center;
    background-position: 0 -20;
    width: 20px;
    height: 20px;
    vertical-align: sub;
    margin-left:5px;
}

#menu li a:hover {
  color: white;
  background-color: rgba(0,0,0,0.5);
}
#menu li a.rss:hover:after {
  background-position: right center;
}

#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  font-size: medium;
  padding: 10px;
  background-color: #424148;
  background: linear-gradient(to bottom, #424148 0%, #727279 100%);
  color:white;
}
footer a {
  color:white;
}

.legal {
    margin-bottom: 0;
}

.about {
    margin-top: 0;
    margin-bottom: 8px;
}

footer h1 {
    display: inline-block;
    margin: 0;
    vertical-align: -4px;
}

.footerlogo img {
    vertical-align: middle;
}

footer dl {
    margin-top: 3px;
    font-size: smaller;
}
footer dt {
    display: inline-block;
    font-weight: bold;
    margin-right: 0.3em;
}
footer dt:after {
    content: " :";
}
footer dd {
    display: inline-block;
    margin-left: 0;
}
footer dd + dt:before {
    content: " ⋅ ";
    margin-left: 0.3em;
    margin-right: 0.3em;
}

.netophonix, .footerlogo {
    text-decoration: inherit;
    opacity: 0.8;
}

.netophonix:hover, .footerlogo:hover {
    opacity: 1;
}

.netophonix {
    padding-left: 36px;
    background: url("../../images/2025/netophonix.png") no-repeat left center;
}

/* Ci-dessous, CSS spécifique de l'année */
#scene {
    width: 100%;
	margin: 0 auto;
	overflow:hidden;
	/* background-color: #4c756d; */
	/* background: url("../../images/2025/cockpit.png") center center; */
	background-size: cover;
}

#texte {
  width: 90vw;
  height: 70vh;
  margin: 50px auto;
  overflow: auto;
  max-width: initial;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  border-radius: 5px;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.3);
  position: relative;
  box-sizing: border-box;
  color:white;
  z-index:50;
}
#texte .center, .case .center {
  text-align: center;
  display: block;
  margin: auto;
}
#texte a, .case a {
	color:white;
}
#texte a:hover, #texte a:focus,
.case a:hover, .case a:focus, {
	color:#DDDDDD;
}
 
#satellite {
	position: absolute;
	background: url("../../images/2025/satellite.png") no-repeat top center;
	background-size: contain;
	width: 15%;
	height: 15%;
	left: 38%;
	top: 47%;
	z-index: 1;
	animation: oscillation 42s infinite alternate;
}

#cheetos {
	position: absolute;
	background: url("../../images/2025/cheetos.png") no-repeat top center;
	background-size: contain;
	width: 18%;
	height: 18%;
	left: 45%;
	top: 34%;
	z-index: 1;
	animation: rotation 75s infinite linear;
}

#cheetos-1 {
	position: absolute;
	background: url("../../images/2025/cheetos-1.png") no-repeat top center;
	background-size: contain;
	width: 5%;
	height: 5%;
	left: 56%;
	top: 45%;
	z-index: 1;
	animation: rotation 40s infinite linear;
}

#cheetos-2 {
	position: absolute;
	background: url("../../images/2025/cheetos-2.png") no-repeat top center;
	background-size: contain;
	width: 12%;
	height: 12%;
	left: 39%;
	top: 24%;
	z-index: 1;
	animation: rotation 60s infinite linear;
}

#cheetos-3 {
	position: absolute;
	background: url("../../images/2025/cheetos-3.png") no-repeat top center;
	background-size: contain;
	width: 13%;
	height: 13%;
	left: 56%;
	top: 26%;
	z-index: 1;
	animation: anti-rotation 30s infinite linear;
}

#cheetos-4 {
	position: absolute;
	background: url("../../images/2025/cheetos-4.png") no-repeat top center;
	background-size: contain;
	width: 12%;
	height: 12%;
	left: 30%;
	top: 10%;
	z-index: 1;
	animation: rotation 35s infinite linear;
}

#baladeur {
	position: relative;
	height: 100vmin;
	width: 100vmin;
	/* width: 730px; /* 650px de tableau blanc + marges du tableau */
	background: url("../../images/2025/baladeur-cut-logo.png") no-repeat top center; /* rgba(0,0,255,0.2) */
	background-size: contain;
	/*min-height: calc(700px - 2vh);
	height: calc(100vh - 200px);
	right: 0;
	margin: 1vh 15%;*/
	z-index:30;
}

/* Lignes temporelles, dépliées au fil des jours */
.lignes {
	position: relative;
	background: url("../../images/2025/lignes-temps-26.png") no-repeat top center;
	background-size: contain;
	height: 100%;
	width: 100%;
}
.lignes-0 { background: none; }
.lignes-1 { background: url("../../images/2025/lignes-temps-01.png") no-repeat top center; background-size: contain;}
.lignes-2 { background: url("../../images/2025/lignes-temps-02.png") no-repeat top center; background-size: contain;}
.lignes-3 { background: url("../../images/2025/lignes-temps-03.png") no-repeat top center; background-size: contain;}
.lignes-4 { background: url("../../images/2025/lignes-temps-04.png") no-repeat top center; background-size: contain;}
.lignes-5 { background: url("../../images/2025/lignes-temps-05.png") no-repeat top center; background-size: contain;}
.lignes-6 { background: url("../../images/2025/lignes-temps-06.png") no-repeat top center; background-size: contain;}
.lignes-7 { background: url("../../images/2025/lignes-temps-07.png") no-repeat top center; background-size: contain;}
.lignes-8 { background: url("../../images/2025/lignes-temps-08.png") no-repeat top center; background-size: contain;}
.lignes-9 { background: url("../../images/2025/lignes-temps-09.png") no-repeat top center; background-size: contain;}
.lignes-10 { background: url("../../images/2025/lignes-temps-10.png") no-repeat top center; background-size: contain;}
.lignes-11 { background: url("../../images/2025/lignes-temps-11.png") no-repeat top center; background-size: contain;}
.lignes-12 { background: url("../../images/2025/lignes-temps-12.png") no-repeat top center; background-size: contain;}
.lignes-13 { background: url("../../images/2025/lignes-temps-13.png") no-repeat top center; background-size: contain;}
.lignes-14 { background: url("../../images/2025/lignes-temps-14.png") no-repeat top center; background-size: contain;}
.lignes-15 { background: url("../../images/2025/lignes-temps-15.png") no-repeat top center; background-size: contain;}
.lignes-16 { background: url("../../images/2025/lignes-temps-16.png") no-repeat top center; background-size: contain;}
.lignes-17 { background: url("../../images/2025/lignes-temps-17.png") no-repeat top center; background-size: contain;}
.lignes-18 { background: url("../../images/2025/lignes-temps-18.png") no-repeat top center; background-size: contain;}
.lignes-19 { background: url("../../images/2025/lignes-temps-19.png") no-repeat top center; background-size: contain;}
.lignes-20 { background: url("../../images/2025/lignes-temps-20.png") no-repeat top center; background-size: contain;}
.lignes-21 { background: url("../../images/2025/lignes-temps-21.png") no-repeat top center; background-size: contain;}
.lignes-22 { background: url("../../images/2025/lignes-temps-22.png") no-repeat top center; background-size: contain;}
.lignes-23 { background: url("../../images/2025/lignes-temps-23.png") no-repeat top center; background-size: contain;}
.lignes-24 { background: url("../../images/2025/lignes-temps-24.png") no-repeat top center; background-size: contain;}
.lignes-25 { background: url("../../images/2025/lignes-temps-25.png") no-repeat top center; background-size: contain;}
.lignes-26 { background: url("../../images/2025/lignes-temps-26.png") no-repeat top center; background-size: contain;}

.liste, .liste li {
  list-style: none;
  padding-left: 0;
  margin: 0;
  z-index: 30;
}

.repere {
    display: block;
    position: absolute;
}

.repere a {
	display: block;
	position: absolute;
	z-index: 30;
    width: 5vw;
    height: 5vw;
	text-indent: -5000px;
}

#repere-1 {  left: 38.7%; 	top: 84.2%;	 }
#repere-1 a {  background: url(../../images/2025/1.png) top left no-repeat; background-size: cover; }
#repere-2 {  left: 38.7%;  	top: 77.8%;	}
#repere-2 a {  background: url(../../images/2025/2.png) top left no-repeat; background-size: cover; }
#repere-3 {  left: 69.8%;  	top: 84.2%;	}
#repere-3 a {  background: url(../../images/2025/3.png) top left no-repeat; background-size: cover; }
#repere-4 {  left: 69.8%;  	top: 77.8%;	}
#repere-4 a {  background: url(../../images/2025/4.png) top left no-repeat; background-size: cover; }
#repere-5 {  left: 44.8%;  	top: 77.8%;	} 
#repere-5 a {  background: url(../../images/2025/5.png) top left no-repeat; background-size: cover; }
#repere-6 {  left: 69.8%;  	top: 71.4%;	}
#repere-6 a {  background: url(../../images/2025/6.png) top left no-repeat; background-size: cover; }
#repere-7 {  left: 44.8%;  	top: 71.4%;	}
#repere-7 a {  background: url(../../images/2025/7.png) top left no-repeat; background-size: cover; }
#repere-8 {  left: 69.8%; 	top: 65%;	}
#repere-8 a {  background: url(../../images/2025/8.png) top left no-repeat; background-size: cover; }
#repere-9 {  left: 44.8%;  	top: 65%;	}
#repere-9 a {  background: url(../../images/2025/9.png) top left no-repeat; background-size: cover; }
#repere-10 {  left: 69.8%;  top: 58.6%;	}
#repere-10 a {  background: url(../../images/2025/10.png) top left no-repeat; background-size: cover; }
#repere-11 {  left: 50.9%;  top: 58.8%; 	} 
#repere-11 a {  background: url(../../images/2025/11.png) top left no-repeat; background-size: cover; }
#repere-12 {  left: 69.8%; 	top: 52.2%; 	}
#repere-12 a {  background: url(../../images/2025/12.png) top left no-repeat; background-size: cover; }
#repere-13 {  left: 50.9%;	top: 52.2%; 	}
#repere-13 a {  background: url(../../images/2025/13.png) top left no-repeat; background-size: cover; }
#repere-14 {  left: 69.8%; 	top: 45.8%; 	}
#repere-14 a {  background: url(../../images/2025/14.png) top left no-repeat; background-size: cover; }
#repere-15 {  left: 57.2%; 	top: 45.8%; 	}
#repere-15 a {  background: url(../../images/2025/15.png) top left no-repeat; background-size: cover; }
#repere-16 {  left: 69.8%;  top: 39.4%; 	}
#repere-16 a {  background: url(../../images/2025/16.png) top left no-repeat; background-size: cover; }
#repere-17 {  left: 57.2%; 	top: 39.4%; 	}
#repere-17 a {  background: url(../../images/2025/17.png) top left no-repeat; background-size: cover; }
#repere-18 {  left: 69.8%; 	top: 33%;	}
#repere-18 a {  background: url(../../images/2025/18.png) top left no-repeat; background-size: cover; }
#repere-19 {  left: 63.4%;  top: 33%;	} 
#repere-19 a {  background: url(../../images/2025/19.png) top left no-repeat; background-size: cover; }
#repere-20 {  left: 69.8%;  top: 26.6%;	}
#repere-20 a {  background: url(../../images/2025/20.png) top left no-repeat; background-size: cover; }
#repere-21 {  left: 63.4%;  top: 26.6%; 	}
#repere-21 a {  background: url(../../images/2025/21.png) top left no-repeat; background-size: cover; }
#repere-22 {  left: 69.8%;  top: 20.2%;	}
#repere-22 a {  background: url(../../images/2025/22.png) top left no-repeat; background-size: cover; }
#repere-23 {  left: 69.8%;  top: 13.8%;	}
#repere-23 a {  background: url(../../images/2025/23.png) top left no-repeat; background-size: cover; }
#repere-24 {  left: 69.8%;  top: 7.4%; 	}
#repere-24 a {  background: url(../../images/2025/24.png) top left no-repeat; background-size: cover; }
#repere-25 {  left: 63.4%;	top: 7.4%;	}
#repere-25 a {  background: url(../../images/2025/25.png) top left no-repeat; background-size: cover; }
#repere-26 {  left: 32%;	top: 66.5%; }
#repere-26 a {	background: url(../../images/2025/26.png) top left no-repeat; background-size: cover;
    width: 7.2vmin;
    height: 7.2vmin;
}


#repere-1 a:focus, #repere-1 a:hover, 
#repere-2 a:focus, #repere-2 a:hover, 
#repere-3 a:focus, #repere-3 a:hover, 
#repere-4 a:focus, #repere-4 a:hover, 
#repere-5 a:focus, #repere-5 a:hover, 
#repere-6 a:focus, #repere-6 a:hover, 
#repere-7 a:focus, #repere-7 a:hover, 
#repere-8 a:focus, #repere-8 a:hover, 
#repere-9 a:focus, #repere-9 a:hover, 
#repere-10 a:focus, #repere-10 a:hover, 
#repere-11 a:focus, #repere-11 a:hover, 
#repere-12 a:focus, #repere-12 a:hover, 
#repere-13 a:focus, #repere-13 a:hover, 
#repere-14 a:focus, #repere-14 a:hover, 
#repere-15 a:focus, #repere-15 a:hover, 
#repere-16 a:focus, #repere-16 a:hover, 
#repere-17 a:focus, #repere-17 a:hover, 
#repere-18 a:focus, #repere-18 a:hover, 
#repere-19 a:focus, #repere-19 a:hover, 
#repere-20 a:focus, #repere-20 a:hover, 
#repere-21 a:focus, #repere-21 a:hover, 
#repere-22 a:focus, #repere-22 a:hover, 
#repere-23 a:focus, #repere-23 a:hover, 
#repere-24 a:focus, #repere-24 a:hover, 
#repere-25 a:focus, #repere-25 a:hover,
#repere-26 a:focus, #repere-26 a:hover {
	background-position: top right; 
	background-size: cover; 
} 

.icon a {
	border:none;
}
li.icon a:hover, li.icon a:focus {
	background: #7ba1d5;
    border: 3px solid #000;
	color: #000;
	border-radius: 50%;
}

#repere-deezer {	left: 33%;	top: 40%; }
#repere-deezer a {
	background: url("../../images/2025/repere-deezer.png") no-repeat center center;
	background-size: contain;
	text-indent: -5000px;
}
#repere-apple {	left: 33%;	top: 48%; }
#repere-apple a {
	background: url("../../images/2025/repere-itunes.png") no-repeat center center;
	background-size: contain;
	text-indent: -5000px;
}
#repere-podcloud {	left: 42%;	top: 40%; }
#repere-podcloud a {
	background: url("../../images/2025/repere-podcloud.png") no-repeat center center;
	background-size: contain;
	text-indent: -5000px;
}
#repere-youtube {	left: 42%;	top: 48%; }
#repere-youtube a {
	background: url("../../images/2025/repere-youtube.png") no-repeat center center;
	background-size: contain;
	text-indent: -5000px;
}

/* CSS des Cases du jour */
.case {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 30px;
    border-radius: 10px;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    margin: 5vh auto;
    max-width: 730px;
    box-sizing: border-box;
	color:white;
	z-index:30;
}

.case h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1em;
}

.case .player {
	margin: 0px;
	padding: 25px 10px 10px 100px;
	background: #abe8fe url(../../images/2018/headphones.png) 10px center no-repeat;
	color: white;
}
.case audio {
    clear: both;
    width: 100%;
}

.case a.download-link {
    padding: 2px;
    font-size: small;
    display: block;
    text-align: right;
	color:black;
}

.case .player-bonus {
	margin: 0px;
	padding: 20px 10px 10px 100px;
	height: 100px;
	background: #abe8fe url(../../images/2018/headphones.png) 10px center no-repeat;
	text-align: center;
}
.case .player-bonus a.download-link {
	display: inline-block;
    text-decoration: none;
    border: 2px solid currentColor;
    padding: 10px 50px;
	background-color: #fefe82;
	-webkit-transition: background-color .5s, box-shadow .5s; /* Safari */
    transition: background-color .5s, box-shadow .5s;
	font-size: x-large;
}
.case .player-bonus a.download-link:hover,
.case .player-bonus a.download-link:focus {
	background-color: #fcff5a;
	-webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.60);
	-moz-box-shadow: 4px 4px 10px rgba(0,0,0,0.60);
	box-shadow: 4px 4px 10px rgba(0,0,0,0.60);
}

.case .back-to-calendar {
    text-align: center;
    margin-top: 30px;
}

.case .back-to-calendar a,
a.download-notmp3 {
    display: inline-block;
    text-decoration: none;
    border: 1px solid currentColor;
    line-height: 1;
    padding: 8px;
	margin: 8px;
    border-radius: 3px;
	-webkit-transition: background-color .5s, box-shadow .5s; /* Safari */
    transition: background-color .5s, box-shadow .5s;
}
a.download-notmp3 {
	font-weight: bold;
	font-size: 18px;
	background-color: #fcffff;
	width: 90%;
}
.player.notmp3 {
    text-align: center;
	padding: 10px 10px 10px 100px;
	min-height: 100px;
}

.case .back-to-calendar a:hover,
.case .back-to-calendar a:focus,
a.download-notmp3:hover,
a.download-notmp3:focus {
	background-color: #555555;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}

.case .authors {
	overflow-y: auto;
}

@media (min-height: 1330px) and  (orientation: landscape) {
	/* 1330px, proportion en hauteur du whiteboard par rapport aux 730px de largeur. Toutes les tailles en px fois 2 */
}

@media (min-width: 768px) and (min-aspect-ratio: 5/3) {

  /*.repere a {
	  line-height: 2.4vw;
  }*/
}

@media (orientation: landscape) {
	body {
		font-size:100%;
	}
	/*.repere a {
		width: 4.8vw;
		height: 4.8vw;
	}*/
  header h1 {
    width: 515px;
  }
  header h1 a {
    width: 515px;
    height: 65px;
  }
  #scene {
	margin: 0 auto;
	overflow:hidden;
  }
  #texte {
    width: 40vw;
    margin: 10vh 2vw 10vh;
	clear: left;
	float: left;
  }
  #baladeur {
	position: absolute;
	height: 90vh;
	width: 90vh;
	right: 0;
  }
  .repere a {
	width: 4.8vh;
    height: 4.8vh;
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes anti-rotation {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes oscillation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(30deg);
  }
}