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

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

body {
  --orange: #ec4d30;
  --violet: #713491;
  --clair: #FFF;
  background-color: var(--clair);
  font-size: 18px;
}

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

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

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);}
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%;}
}

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: "D";
  font-size: 2em;
  color:var(--violet) !important;
}

.w3-button:hover {
  color:var(--orange) !important;
  background-color: var(--clair) !important;
}

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;
    padding-right: 120px;}
}

#contact h1 {margin:0; padding: 0;}
#contact .email p {
  font-family: "O";
  font-size: 54px;
  color: var(--orange);
}
#contact .email span {color: var(--violet);}

footer {
  color:var(--violet);

  max-width: 1450px;
  margin: 0 auto;
}
footer .titre {
  font-family: Q;
  font-size: 60px;
  padding: 8px;
  text-align: center;
}

footer .logo {height: 200px;}

footer .texte,
footer .liens  {
  text-align: center;
  padding-top: 30px;
}
footer .liens a {
  color: var(--violet); 
  border:none; 
  font-family: "D"; 
  font-size: 30px;
}

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

#legal .w3-display-topright {
  z-index: 10;
}
#legal .w3-container {
  border: 8px double var(--violet);
}
#legal h1 {padding: 0;}
.w3-modal {
  background-color: rgba(113, 52, 145, 0.5);
}