@font-face {
  font-family: O;
  src: url(fonts/Ostrich.otf);
}
@font-face {
  font-family: Q;
  src: url(fonts/Quentin.otf);
}

* {position: relative;}
.clear {clear: both;}

body {
  --orange: #ec4d30;
  --violet: #713491;
  --violetclair: #7134911f;
  --clair: #FFF;
  background-color: var(--clair);
  font-size: 18px;
  word-break: break-word;
  position: relative;
}

h1, h2, h5 {font-family: "O";}
h1 {
  font-size: 7em; 
  color: var(--violet);
  padding: 76px 0 0 0;
}
@media (max-width: 601px) {
  h1 {padding-top: 20px;}
}
h3, h4 {
  font-size: 3em; 
  font-family: "Q";
  line-height: 55px;
  padding-top: 30px;
}

h4 {font-size: 2em;}

h2, .h2, h3.titre {
  font-size: 4em; 
  color: var(--orange);
  line-height: 85px;
  padding-top: 30px;
  font-family: "O";
}
.h2 {padding-top: 26px; margin: 0;}

h5 {font-size: 32px;}
p {
  line-height: 1.6;
  font-size: 22px;
}

@media (max-width: 601px) {

  h1, h2, h3, h4, h5 {text-align: center;}
  h1 {font-size: 5.5em;}
  h2 {font-size: 4.5em;}
  h3 {font-size: 2.5em;}
}

article div.contenu {max-width: 1200px;width: auto; margin: 0 auto;}
@media (max-width: 601px) {
  article div.contenu {margin-top: 130px;}
}
a {
  text-decoration: none;
  border-bottom: 3px double var(--orange);
}
a:hover {border-block-color: var(--violet); cursor: pointer;}
a:focus, a:hover {color: var(--violet);}

#menu nav {
  background-color: var(--clair);
  border-bottom: 8px double var(--violet);
}

#menu .logonavbar {width: 140px;}
#menu .menu-links {padding-top: 16px;}

#menu #navbar {
  max-width: 1450px;
  margin: 0 auto;
}
@media (max-width: 435px) {
  #menu #navbar .w3-col.s6 {width: 50%;}
}

a.menu-rsn {
  color: #ec4f33 !important;
}

header .logo {
  width: 100%;
   height: auto;
  z-index: 30;
  background-color: #FFF;
}

header .logobox {
  width: 60%;
  max-width: 1000px;
  margin: 0 auto;
}

header .logobox img {
  width: 100%;
}

.w3-button {
  font-family: "O";
  font-size: 2em;
  color:var(--violet) !important;
}

.w3-button:hover {
  color:var(--orange) !important;
  background-color: color:var(--violetclair) !important;
  text-decoration: underline;
  text-decoration-style: double;
}

article {
  border-top: 8px double var(--violet);
  border-bottom: 8px double var(--violet);
}

#info {
  background-color: var(--orange);
  background-image: url(images/rayon-b.png);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 30%;
  padding-right: 220px;
  color: var(--clair);
  font-size: 2em;
  margin: 32px;
  border-radius: 2em;
}

#info .texte {
  padding: 32px;
}

@media (max-width: 991px) {
  #info  {
    font-size: 1em;
    margin: 0 !important;
  }
  #info .texte {
    padding: 18px;
  }
  audio.w3-padding.w3-margin {
    margin: 0 !important; 
    padding: 0 !important; 
    min-width: 180px;
  }
}
@media (max-width: 601px) {
  #info  {
    padding:6px;
    background-image: none;
  }
  #info .texte {
    padding: 8px;
  }
}

#emissions .frame {
  margin: 6px;
  background-color: var(--violetclair);
}
#emissions .frame .data {
  font-family: "O";
  color: var(--violet);
  font-size: 40px;
  margin: 0;
  padding: 0;
  line-height: 1;
}
#emissions .frame .data.presentation {
  color: var(--orange);
  font-size: 32px;
}
#emissions .frame .w3-image {
  margin-bottom: 26px;
}
#emissions h2 {display: none;}
#emissions #playlist h2 {display: block;}

#emissions sup {
  font-variant: small-caps;
}
#emissions .frame  h3 {
  font-family: "O";
}

#emissions .frame .w3-button {
  background-color: var(--clair);
  padding: 8px;
  margin-top: 16px;
  font-size: 35px;
}
#emissions .frame .w3-button:hover {
  text-decoration: none;
  background-color: var(--clair) !important;
}

#emissions .frame ul.diff li {
  list-style: none;
  display: inline;
  margin-right: 24px;
}

@media (max-width: 601px) {
    #emissions .frame ul.diff li {
    list-style:circle;
    display: list-item;
  }
}

.croix {
  border: 3px double;
  border-radius: 1em;
  font-size: 2em;
  padding: 0 12px;
  line-height: 0.8em;
}

#contact h1 {margin:0; padding: 0;}
#contact .email {
  font-family: "O";
  font-size: 32px;
  color: var(--orange);
}
#contact .email span {color: var(--violet);}
#contact .courriel span {
  color: var(--orange);
}
#contact ul {padding:0;}
#contact ul li {display: inline; list-style: none;}

footer {
  color:var(--violet);
  max-width: 1450px;
  margin: 0 auto 150px;
}
@media (max-width: 431px) {
 footer {margin-bottom: 0;}
}
footer .titre {
  font-family: Q;
  font-size: 60px;
  padding: 8px;
  text-align: center;
}

footer .logo {height: 200px;}

footer .texte p {
  font-family: "Q";
  font-size: 2.4em;
  line-height: 0.7em;
}
footer .texte,
footer .liens  {
  text-align: center;
  padding-top: 30px;
}
footer .liens a {
  color: var(--violet); 
  border:none; 
  font-family: "O"; 
  font-size: 30px;
}

footer .liens a:hover {
  color: var(--orange); 
}

footer .liens-bas {
  border-top: 2px solid var(--violet);
}

.w3-modal .w3-display-topright {
  z-index: 1000;
}
.w3-modal .w3-container {
  border: 8px double var(--violet);
}
.w3-modal h1 {padding: 0;}

.w3-modal {
  background-color: rgba(113, 52, 145, 0.5);
  z-index: 2500;
}

@media (max-width: 601px) {
  .w3-display-topright {
    position: relative;
    display: block;
  }
}

#player {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1300;
  background-color: var(--clair);
  border-top: 8px double var(--orange);
}

#player .fond {background-color: var(--violet);}

@media (max-width: 431px) {
  #player {
    top: -162px;
    z-index: 200;
    bottom: auto;
    border-bottom: 8px double var(--violet);
  }
  header#menu {z-index: 300} 
  article div.contenu {
    margin-top: 170px;
  }
  footer .texte,
  footer .liens  {padding-top: 0;}

  footer .texte p {margin: 6px 0;}

}
.clear {clear: both;}