@font-face {
  font-family: "SNIGLET";
  font-display: swap;
  src: url("../style/Sniglet-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "QUICKSAND REGULAR";
  font-display: swap;
  src: url("../style/Quicksand-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "QUICKSAND BOLD";
  font-display: swap;
  src: url("../style/Quicksand-Bold.ttf") format("truetype");
}


html, body, ul, ol, h1, h2, h3, h4, h5, h6, p, hr {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
}

body {
  min-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

hr {
  height: 0;
  border: 0;
}

* {
  box-sizing: border-box;
}


html,
body {
  font-size: 20px;
  line-height: 1.3;
  min-height: 100%;
  font-family: "QUICKSAND REGULAR";
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #fbfbfb;
}

@media screen and (max-width: 1050px) {
  html,
  body {
    font-size: 16px;
  }
}

@media screen and (max-width: 820px) {
  html,
  body {
    font-size: 15px;
  }
}

input:focus, textarea:focus {
  outline: none;
}


.ver-tel {
  display: none;
}

.btnHidden {
  display: none;
}

strong {
  font-family: "QUICKSAND BOLD";
  font-weight: normal;
}

.page-wrapper {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.bnd {
  padding: 0 1rem;
  font-family: "SNIGLET";
  color: #fff;
  background-color: #b1191d;
  height: 4.5rem;
  display: flex;
  align-items: center;
}


.bnd-wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 1300px) {
  .bnd-wrapper {
  }
}

.bnd .logo img {
  display: block;
  height: 5rem;
  /*background-color: #fff;*/
}

.bnd-login .bnd-wrapper .logo, .bnd-login .bnd-wrapper .pictos {
  width: 28%;
}

.bnd-login .logo img {
  height: 1.8rem;
}

.bnd .infos {
  display: flex;
  align-items: center;
}

  .bnd .infos i {
    margin-right: 0.5rem;
    font-size: 1.5rem;
    vertical-align: -0.2rem;
  }

  .bnd .infos p {
    font-size: 1rem;
  }

.bnd .pictos {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: "QUICKSAND REGULAR";
  font-size: 1rem;
}

  .bnd .pictos .rs {
    display: block;
    width: 2rem;
  }

@media screen and (max-width: 1300px) {
  .bnd-login .logo img {
    height: 1.5rem;
  }
}

@media screen and (max-width: 1180px) {
  .bnd-login .logo img {
    height: 1.4rem;
  }

  .bnd .infos p, .bnd .pictos {
    font-size: 0.8rem;
  }

    .bnd .pictos .rs {
      width: 1.5rem;
    }
}

@media screen and (max-width: 768px) {

  .bnd-login {
    height: auto;
    padding: 1rem 1rem 0.5rem 1rem;
  }

    .bnd-login .bnd-wrapper {
      flex-wrap: wrap;
    }

      .bnd-login .bnd-wrapper .logo {
        width: 100%;
        margin-bottom: 0.7rem;
      }

    .bnd-login .logo img {
      height: 1.7rem;
      margin-bottom: 0.6rem;
    }

    .bnd-login .ver-tel {
      display: none;
    }

  .bnd .infos p, .bnd .pictos {
    font-size: 1rem;
  }

  .bnd .infos i {
    margin-top: -1.8rem;
    display: none;
  }

  .bnd .infos p {
    margin-top: -0.5rem;
    line-height: 1.5;
  }

  .bnd .pictos {
    display: block;
    text-align: center;
  }

  .bnd-login .pictos {
    display: block;
    text-align: right;
  }

  .bnd .pictos .rs {
    display: inline;
  }
}

@media screen and (max-width: 500px) {

  .bnd-login .ver-tel {
    display: block;
  }

  .bnd-login .infos {
    text-align: left;
  }

    .bnd-login .infos p {
      text-align: left;
    }

  .bnd .infos p, .bnd .pictos {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .bnd .infos i {
    display: none;
  }
}

.bnd .tel-btn {
  display: none;
}

#form1, #mainContent {
  height: 100%;
}

#mainContent {
  display: flex;
  height: 100%;
  background-color: #fff;
}

.login {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 70px;
}

  .login p {
    width: 50%;
    margin-top: 5rem;
    margin-bottom: 3rem;
    font-size: 0.95rem;
    text-align: center;
  }

  .login .row {
    display: flex;
    margin: 0.25rem 0;
    width: 17.8rem;
  }

    .login .row label {
      width: 7.5rem;
      padding-right: 0.5rem;
      font-size: 0.95rem;
      line-height: 1.7;
      text-align: right;
      font-weight: bold;
    }

    .login .row input {
      width: 9.8rem;
      padding: 0.2rem;
      background: #fefbfa;
      font-family: "QUICKSAND REGULAR";
      font-size: 0.95rem;
      border: 1px solid #ded3c7;
      border-radius: 3px;
    }

    .login .row.souvenir {
      display: block;
      margin: 0.25rem 0;
      text-align: right;
    }

      .login .row.souvenir label {
        width: 7.5rem;
        font-weight: normal;
      }

      .login .row.souvenir input {
        width: auto;
        margin-right: 0.5rem;
      }

    .login .row input:focus {
      /*        border: 1px solid #5c141e;
*/
    }

    .login .row #btnValider {
      margin-top: 1rem;
      display: block;
      padding: 0.3rem 1rem;
      color: #fff;
      font-size: 1.0rem;
      /*font-weight: bold;*/
      font-family: "SNIGLET";
      border: 0;
      border-radius: 3px;
      background-color: #94c123;
      cursor: pointer;
      text-transform: uppercase;
    }

    .login .row.erreur {
      margin-top: 1rem;
      padding: 0.3rem;
      width: 17rem;
      font-size: 0.9rem;
      color: #b1191d;
      border: 1px solid #b1191d;
      background-color: #fdf7f8;
      border-radius: 3px;
    }

nav {
  font-size: 19px;
}

@media screen and (max-width: 1050px) {
  nav {
    font-size: 16px;
  }
}

@media screen and (max-width: 820px) {
  nav {
    font-size: 15px;
  }
}

nav .user {
  display: flex;
  align-items: center;
  margin-bottom: 2.6em;
  margin-left: -0.9em;
  margin-right: -0.9em;
}

@media screen and (max-width: 1300px) {
  nav .user {
    margin-left: -0.6em;
    margin-right: -0.6em;
  }
}

nav .user img {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  margin-right: 0.7em;
  object-fit: cover;
}

nav .user i.defaut {
  font-size: 2.5em;
  color: #bbb;
  margin-right: 0.3em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

nav .user i.jeune {
  font-size: 1.8em;
  color: #b1191d;
  margin-right: 0.3em;
  margin-left: 0.25em;
}

nav .user h2 {
  font-size: 1em;
  font-family: "SNIGLET";
}

nav .user h3 {
  font-size: 0.8em;
}

nav a.accueil, nav a.contact, nav a.solidaire {
  display: inline-block;
  margin-bottom: 0.6em;
  font-family: "SNIGLET";
  font-size: 0.9em;
  color: #000;
  text-decoration: none;
  /*text-transform: uppercase;*/
}

nav a.solidaire {
  margin-bottom: 1.0em;
}

  nav a.accueil.on, nav a.contact.on, nav a.solidaire.on {
    color: #ed7c5d;
  }

  nav a.accueil i, nav a.contact i, nav a.solidaire i {
    width: 1.3em;
    font-size: 1.15em;
    color: #ed7c5d;
  }

nav .coeur {
  color: #b1191d;
  font-size: 1.2rem;
  vertical-align: -2px;
}

nav ul li {
  list-style: none;
}

nav .pays {
  margin-bottom: 1.0em
}

  nav .pays h2 {
    font-family: "SNIGLET";
    font-size: 1.2em;
    color: #000;
  }

    nav .pays h2 img {
      width: 1.3rem;
      margin-right: 0.1rem;
      vertical-align: -6px;
    }

@media screen and (max-width: 768px) {
  nav .pays h2 img {
    width: 1.4rem;
    margin-right: 0.2rem;
  }
}

nav .pays .sejour {
  padding-left: 0;
  font-size: 0.9em;
  /*font-family: "SNIGLET";*/
}

nav .pays .sejour-on {
  /*background-color: #f2ece4;*/
}

nav .pays .sejour li {
  padding: 0.2em 0 0.2em 1.4em;
  cursor: pointer;
}

  nav .pays .sejour li:hover {
    /*background-color: #f2ece4;*/
  }

  nav .pays .sejour li .wrapper {
    width: 100%;
    padding-right: 0.6em;
    display: flex;
    justify-content: space-between;
  }

nav .pays .sejour .alert {
  width: 1.2em;
  margin-left: -1.2em;
  font-size: 0.9em;
  color: #e38404;
}

nav .pays .sejour .down {
  margin-top: 0.15em;
  margin-left: 0.3em;
  color: #000;
}

nav .pays .sejour .wrapper .label {
  font-family: "SNIGLET";
  color: #b1191d;
}

nav .pays .sejour .menu {
  display: none;
  font-size: 0.9em;
}

  nav .pays .sejour .menu li {
    padding: 0.2em 0 0.2em 0.4em;
  }

    nav .pays .sejour .menu li:first-child {
      margin-top: 0.5em;
    }

    nav .pays .sejour .menu li:last-child {
      margin-bottom: 0.5em;
    }

    nav .pays .sejour .menu li a {
      color: #000;
      text-decoration: none;
      font-weight: bold;
      /*/text-transform: uppercase;*/
    }

      nav .pays .sejour .menu li a:hover {
        color: #ed7c5d;
      }

      nav .pays .sejour .menu li a.selected {
        color: #ed7c5d;
      }

    nav .pays .sejour .menu li i {
      width: 1.6em;
      font-size: 1.2em;
      color: #ed7c5d;
    }

.col1 {
  width: 16rem;
  min-width: 16rem;
  background-color: #faf6f1;
  padding: 1.4rem 1.5rem 1.4rem 1.5rem;
}

.col2 {
  flex-basis: 49rem;
}

.col2-wrapper {
  padding: 2.2rem 2.2rem
}

@media screen and (max-width: 768px) {
  .col2-wrapper {
    padding: 1rem;
  }
}

@media screen and (max-width: 350px) {
  .col2-wrapper {
    padding: 0.5rem;
  }
}

.col2 h1 {
  font-family: "SNIGLET";
  font-size: 1.5rem;
  color: #5c141e;
  margin-bottom: 1.85rem;
}

  .col2 h1 .coeur {
    color: #b1191d;
    font-size: 1.8rem;
    vertical-align: -2px;
  }

.col2 h2 {
  font-family: "SNIGLET";
  font-size: 1.0rem;
  color: #b1191d;
}

.col2 h3 {
  font-size: 0.75rem;
  margin-bottom: 1.35rem;
}

.col2 h4 {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.1rem 0.5rem;
  font-family: "SNIGLET";
  font-size: 0.9rem;
  /*font-weight: bold;*/
  color: #fff;
  background-color: #5c141e;
}

.col2 h5 {
  font-size: 1rem;
  margin-bottom: 0;
  font-weight: bold;
}

.col2 h6 {
  font-size: 0.8rem;
  margin-bottom: 0;
}

.col2 p {
  font-size: 0.95rem;
}

.col2 ul {
  margin-bottom: 1.5rem;
  list-style: none;
}

  .col2 ul li {
    margin: 0.2rem 0 0.2rem 2rem;
    font-size: 0.95rem;
  }

    .col2 ul li i {
      width: 1.3rem;
      margin-left: -1.3rem;
      color: #94c123;
      font-size: 0.9rem;
    }

    .col2 ul li a {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }

      .col2 ul li a:hover {
        color: #94c123;
      }

.col2 .video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56%;
}

.col2 .video {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
}

.col2 .asterix {
  font-size: 1.5rem;
  line-height: 0;
  color: #b1191d;
  font-weight: bold;
}

.hp .logo {
  width: 9rem;
  margin: 0 auto 10px auto;
  display: block;
}

.hp .text {
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

  .hp .text p {
    margin-bottom: 0.7rem;
    font-size: 0.95rem;
  }

.hp .video-wrapper {
  margin: 2.5rem auto;
}

.hp .instagram {
  display: block;
  width: 10rem;
  margin: 3rem auto;
}

.telecharger .col-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2rem;
}

  .telecharger .col-wrapper .col {
    width: 48%;
    padding-right: 2rem;
  }

    .telecharger .col-wrapper .col:first-child {
      /*margin-right: 2rem;*/
    }

.renvoyer {
  position: relative;
}

  .renvoyer .text, .renvoyer .confirmation {
    padding: 1.3rem;
    font-size: 0.95rem;
    color: #5c141e;
    background-color: #f2ece4;
  }

  .renvoyer .confirmation {
    display: none;
    padding: 1.5rem;
    color: #5c141e;
    background-color: #f2ece4;
    text-align: center;
  }

    .renvoyer .confirmation strong {
      display: block;
      margin-bottom: 0.8rem;
    }

  .renvoyer .form-wrapper {
    margin-top: 2rem;
  }

  .renvoyer .form-group {
    margin: 0.4rem 0 0 1rem;
    display: flex;
    font-size: 0.95rem;
  }

    .renvoyer .form-group label {
      width: 17rem;
    }

    .renvoyer .form-group.message {
      margin: 1.5rem 0 0 0;
      flex-direction: column;
    }

    .renvoyer .form-group label i {
      width: 1.3rem;
      color: #94c123;
      font-size: 0.9rem;
    }

    .renvoyer .form-group.message label {
      font-size: 1rem;
    }

    .renvoyer .form-group textarea {
      margin-top: 0.2rem;
      width: 100%;
      height: 7rem;
      padding: 0.5rem;
      font-family: "QUICKSAND REGULAR";
      font-size: 0.95rem;
      background-color: #fefbfa;
      border: 1px solid #ded3c7;
      border-radius: 3px;
    }

      .renvoyer .form-group textarea:focus {
        /*      border: 1px solid #5c141e;
*/
      }

  .renvoyer .form-wrapper button {
    display: block;
    margin: 1rem 0 0 auto;
    padding: 0.3rem 1rem;
    color: #fff;
    font-family: "SNIGLET";
    font-size: 1.0rem;
    font-weight: normal;
    border: 0;
    border-radius: 3px;
    background-color: #94c123;
    cursor: pointer;
  }

  .renvoyer .fileinput-button {
    cursor: pointer;
    text-decoration: none;
  }

    .renvoyer .fileinput-button:hover {
      color: #94c123;
    }

  .renvoyer .btn-up {
    color: #94c123;
    cursor: pointer;
    text-decoration: none;
  }

  .renvoyer .fileinput-button input {
    width: 100%;
    height: 1rem;
  }

  .renvoyer .fileinput-button i.add {
    color: #94c123;
    font-size: 0.9rem;
    margin-right: 0.3rem;
  }

  .renvoyer .doc-erreur {
    color: #ff3c3c !important;
  }

  .renvoyer .form-erreur {
    background-color: #fff9f9 !important;
    border: 1px solid #ff3c3c !important;
  }

  .renvoyer a i.up {
    color: #94c123;
    font-size: 0.9rem;
    margin-right: 0.3rem;
  }

  .renvoyer a i.del {
    color: #bbb;
    font-size: 0.8rem;
    margin-left: 0.5rem;
  }

  .renvoyer .erreur-valid {
    display: none;
    margin: 2rem 0 2rem 0;
    padding: 1rem;
    font-size: 0.95rem;
    color: #ff3c3c;
    background-color: #fff9f9;
    border: 1px solid #ff3c3c;
    border-radius: 3px;
    text-align: center;
  }


.pays .row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5rem
}

  .pays .row .col {
    width: 45%;
    margin-right: 5%;
    margin-bottom: 1.5rem;
  }

  .pays .row .col100 {
    width: 100%;
    margin-right: 5%;
    margin-bottom: 1.5rem;
  }

  .pays .row .col .video-wrapper {
    margin-bottom: 0.3rem;
  }

  .pays .row .col p {
    line-height: 1.1;
  }

.partenaires .row {
  margin-bottom: 2rem;
}

  .partenaires .row img {
    float: left;
    display: block;
    width: 15rem;
    margin-right: 1.5rem;
    margin-bottom: 0.5rem;
    margin-top: 0.4rem;
  }

  .partenaires .row .plus {
    display: table;
    margin: 1rem 0 0 auto;
    padding: 0.2rem 0.7rem;
    font-family: "SNIGLET";
    color: #fff;
    font-size: 0.8rem;
    font-weight: normal;
    border-radius: 3px;
    background-color: #94c123;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

.contact .row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.contact .telephone {
  font-size: 1rem;
  color: #94c123;
  font-weight: bold;
  text-decoration: none;
}

  .contact .telephone:hover {
    /*    text-decoration: underline;
*/
  }

.contact .row img {
  width: 7rem;
  border-radius: 50%;
  background-color: #ded3c7;
}

.contact .row .col {
  margin-left: 2rem;
  flex-basis: 31rem;
}

  .contact .row .col .email {
    display: block;
    margin-top: 0.5rem;
    color: #000;
    text-decoration: none;
  }

    .contact .row .col .email:hover {
      /*      text-decoration: underline;
*/ color: #f36856;
    }

  .contact .row .col .telephone {
    display: block;
    margin-top: 0.7rem;
  }

    .contact .row .col .telephone i {
      width: 1.7rem;
      font-size: 1.2rem;
      vertical-align: -0.12rem
    }

  .contact .row .col .horaire {
    margin-left: 1.7rem;
  }





@media screen and (max-width: 768px) {

  html, body {
    height: none;
    background-color: #fff;
  }

  .ver-tel {
    display: block;
  }

  .bnd {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }

  .bnd-wrapper {
  }

  .bnd .infos {
    padding: 0;
    text-align: center;
  }

  .bnd .btn {
    padding: 0 5px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #fff;
    cursor: pointer;
  }

    .bnd .btn div {
      width: 30px;
      height: 4px;
      margin: 7px 0;
      border-radius: 2px;
      background: #fff;
    }

  .login p {
    width: 90%;
    margin-top: 4rem;
    margin-bottom: 2rem;
  }

  .col1 {
    max-width: 0;
    width: 0;
    min-width: 0;
    padding: 0;
  }

  .col2 {
    padding: 0;
  }

  nav {
    font-size: 17px;
    position: fixed;
    z-index: 10;
    top: 4.5rem;
    left: 100%;
    width: 100%;
    padding: 1rem;
    background-color: #faf6f1;
  }

    nav .user, nav .pays {
      margin-bottom: 0.8em;
    }

    nav .user {
      margin-left: -0.5em;
      margin-right: -0.5em;
    }

    nav .sejour li {
      padding: 0.3em 0 0.3em 1.4em;
    }

    nav .menu li {
      padding: 0.3em 0 0.3em 0.4em;
      font-size: 1.0em;
    }

  #mainContent {
    padding-top: 4.5rem;
  }

  .telecharger .col-wrapper {
    display: flex;
    flex-direction: column;
  }

  .renvoyer .form-group {
    margin: 0.4rem 0 0 0;
  }

  .col2 ul li {
    margin: 0.2rem 0 0.2rem 1.3rem;
  }

  @media screen and (max-width: 500px) {

    .pays .row .col {
      width: 100%;
      margin-right: 0;
    }

    .partenaires .row {
      flex-direction: column;
    }

      .partenaires .row img {
        width: 100%;
        max-width: 12rem;
        margin-bottom: 1.2rem;
      }

      .partenaires .row .col {
        margin-left: 0;
        flex-basis: auto;
      }
  }
}


/*** MODALE ****/

.modale {
  display: none;
  justify-content: center;
  position: fixed;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  background: rgba(0,0,0,0.6);
}

  .modale .contenu {
    width: auto;
    height: auto;
    margin-top: -10%;
    padding: 1.5rem;
    background: #fff;
    border-radius: 5px;
    /* box-shadow: 2px 1px 10px rgb(0 0 0 / 20%);*/
    overflow: hidden;
  }

    .modale .contenu p {
      margin-bottom: 1rem;
      font-size: 0.95rem;
      line-height: 1.15;
      text-align: center;
      font-weight: normal;
      /*        background-color: #5c141e;
        border-bottom: 1px solid #eee;
*/
    }

    .modale .contenu div {
      width: 65%;
      margin: 0 auto 0 auto;
      display: flex;
      justify-content: space-between;
    }

      .modale .contenu div button {
        padding: 0.2rem 0.7rem;
        color: #fff;
        font-size: 0.8rem;
        font-weight: normal;
        border: 0;
        border-radius: 3px;
        background-color: #94c123;
        text-decoration: none;
        text-transform: uppercase;
        cursor: pointer;
      }

        .modale .contenu div button.non {
          background-color: #ccc;
        }