/*Polices*/
@import url('https://fonts.googleapis.com/css2?family=Caudex:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');


.contenu2 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  padding: 0 0;
}
.contenu3 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  padding: 0 0;
}

body {
  background-color: #777777;
  width:auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  min-height: calc(100vh - 260px);
}

.text-paragraph {
  font-size: 1.3em;
  font-family: "Caudex", serif;
  font-weight: 400;
  font-style: normal;
  text-indent: 2em;
  padding: 0 150px;
}

.liste-guildes {
  font-size: 1.3em;
  font-family: "Caudex", serif;
  font-weight: 400;
  font-style: normal;
  text-indent: 2em;
  padding: 0 150px;
}

.text-description {
  font-size: 1.3em;
  font-family: "Caudex", serif;
  font-weight: 400;
  font-style: normal;
  padding: 0 150px;
}

.display-element {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: 80%;
  padding: 0 0;
}

.info-calc-paragraph {
  font-size: 1em;
  font-family: "Caudex", serif;
  font-weight: 400;
  font-style: normal;
  padding: 0 150px;
}

.info-calc-label {
  font-size: 1em;
  font-family: "Caudex", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}

.title1 {
  font-size: 2.5em;
  font-family: "Eagle Lake", serif;
  font-weight: 400;
  font-style: normal;
  padding-bottom: 5px;
}

.title2 {
  font-size: 2em;
  font-family: "Eagle Lake", serif;
  font-weight: 400;
  font-style: normal;
  padding-bottom: 10px;
}

.title3 {
  font-size: 1.7em;
  font-family: "Eagle Lake", serif;
  font-weight: 400;
  font-style: normal;
  padding-bottom: 5px;
  padding-top: 5px;
}

.title4{
  font-size: 1.5em;
  font-family: "Eagle Lake", serif;
  font-weight: 400;
  font-style: normal;
  padding: 5px 150px;
  text-align: center;
  margin: auto;
}

.title5{
  font-size: 1.1em;
  font-family: "Eagle Lake", serif;
  font-weight: 400;
  font-style: normal;
  padding: 5px 150px;
  text-align: center;
}

.img-center {
  max-width: 600px;
  max-height: 300px;
}

/*Listes à puce*/

.normal-list {
  padding: 5px 190px;
}

/*Table*/

table {
  table-layout: fixed;
  width: auto;
  border-collapse: collapse;
  border: 1px solid black;
  padding: 5px 150px;
}

.col1-table {
  max-width: 60%;
  thead th {
    border: 1px solid black;
  }
  
  thead th:nth-child(1) {
    width: 100%;
  }
  
  tbody td {
    border: 1px solid black;
    text-align: center;
  }
}

.col2-table {
  max-width: 60%;
  thead th {
    border: 1px solid black;
  }
  
  thead th:nth-child(1) {
    width: 50%;
  }
  
  thead th:nth-child(2) {
    width: 50%;
  }
  
  tbody td {
    border: 1px solid black;
    text-align: center;
  }
}

.col3-table{
  max-width: 60%;
  margin: auto;
  thead th {
  border: 1px solid black;
  }
  
  thead th:nth-child(1) {
    width: 33%;
  }
  
  thead th:nth-child(2) {
    width: 34%;
  }

  thead th:nth-child(3) {
    width: 33%;
  }
  
  tbody td {
    border: 1px solid black;
    text-align: center;
  }
}

.col4-table{
  max-width: 60%;
  margin: auto;
  thead th {
  border: 1px solid black;
  }
  
  thead th:nth-child(1) {
    width: 25%;
  }
  
  thead th:nth-child(2) {
    width: 25%;
  }

  thead th:nth-child(3) {
    width: 25%;
  }

  thead th:nth-child(4) {
    width: 25%;
  }
  
  tbody td {
    border: 1px solid black;
    text-align: center;
  }
}

.col5-table{
  max-width: 80%;
  margin: auto;
  thead th {
  border: 1px solid black;
  }
  
  thead th:nth-child(1) {
    width: 20%;
  }
  
  thead th:nth-child(2) {
    width: 20%;
  }

  thead th:nth-child(3) {
    width: 20%;
  }

  thead th:nth-child(4) {
    width: 20%;
  }

  thead th:nth-child(5) {
    width: 20%;
  }
  
  tbody td {
    border: 1px solid black;
    text-align: center;
  }
}

.col6-table{
  max-width: 80%;
  margin: auto;
  thead th {
  border: 1px solid black;
  }
  
  thead th:nth-child(1) {
    width: 16.5%;
  }
  
  thead th:nth-child(2) {
    width: 16.5%;
  }

  thead th:nth-child(3) {
    width: 16.5%;
  }

  thead th:nth-child(4) {
    width: 16.5%;
  }

  thead th:nth-child(5) {
    width: 16.5%;
  }

  thead th:nth-child(6) {
    width: 17.5%;
  }
  
  tbody td {
    border: 1px solid black;
    text-align: center;
  }
}

.col7-table{
  max-width: 80%;
  margin: auto;
  thead th {
  border: 1px solid black;
  }
  
  thead th:nth-child(1) {
    width: 14%;
  }
  
  thead th:nth-child(2) {
    width: 14%;
  }

  thead th:nth-child(3) {
    width: 14%;
  }

  thead th:nth-child(4) {
    width: 16%;
  }
  
  thead th:nth-child(5) {
    width: 14%;
  }

  thead th:nth-child(6) {
    width: 14%;
  }

  thead th:nth-child(7) {
    width: 14%;
  }
  
  tbody td {
    border: 1px solid black;
    text-align: center;
  }
}

/*Footer*/

.footer-copyright {
  font-size: 1em;
  font-family: "Caudex", serif;
  font-weight: 400;
  font-style: normal;
}

footer {
  height:80px;
  width:auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px 0;
  }

/*Dropdown menu*/
nav {
  &.primary-navigation {
    margin: 0 5px;
    display: block;
  
    padding: 0 0 0 0;  
    text-align: center;
    font-size: 16px;
    background-color: #777777;

    ul li {
      list-style: none;
      margin: 0 auto;
      border-left: 1px solid #ffffff;
      display: inline-block;
      padding: 0 5px;
      position: relative;
      text-decoration: none;
      text-align: center;
      font-family: arvo;
    }

    li a {
      color: black;
    }

    li a:hover {
      color: #ffffff;
    }

    li:hover {
      cursor: pointer;
    }

    ul li ul {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      padding-left: 5px;
      left: 0;
      display: none;
      background-color: #777777;
    }

    ul li:hover > ul,
    ul li ul:hover {
      visibility: visible;
      opacity: 1;
      display: block;
      min-width: 250px;
      text-align: left;
      padding-top: 20px;
      background-color: #777777;
    }

    ul li ul li {
      clear: both;
      width: 100%;
      text-align: left;
      margin-bottom: 20px;
      border-style: none;
    }

    ul li ul li a:hover {
      padding-left: 10px;
      border-left: 2px solid #ffffff;
      transition: all 0.3s ease;
    }
  }
}

a {

    text-decoration: none;

    &:hover {
        color: #3CA0E7;
    }
 
}

 ul li ul li a { transition: all 0.5s ease; }