@charset "UTF-8";
/*
Theme Name: Boréale prod
Author: Boréale Média - Franck Bujna
Author URI: http://borealemedia.com
Description: Thème entièrement fait pour notre service d'effets maison
Version: 1.0
License: Agence Boréale - Boréale prod
*/
@font-face {
  font-family: "gabaritoBold";
  src: url("assets/fonts/Gabarito-Bold.woff2") format("woff");
}
@font-face {
  font-family: "gabaritoSemiBold";
  src: url("assets/fonts/Gabarito-SemiBold.woff2") format("woff");
}
@font-face {
  font-family: "gabaritoRegular";
  src: url("assets/fonts/Gabarito-Regular.woff2") format("woff");
}
:root {
  --gabaritoBold: "gabaritoBold";
  --gabaritoSemiBold: "gabaritoSemiBold";
  --gabaritoRegular: "gabaritoRegular";
  --violetEclatant: #280972;
  --vertEclatant: #3EC300;
}

/* --------- 1. Reset CSS --------- */
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
  box-sizing: border-box;
}

body {
  background-color: #E9E9E9;
  overflow-x: hidden;
}

.transition-page {
  position: absolute;
  right: 0;
  top: -100%;
  background-color: #14191D;
  height: 100vh;
  width: 80vw;
  z-index: 99;
}

/* --------- 2. Main début --------- */
.main {
  display: flex;
  width: 100vw;
}

/* --------- 2. Main fin --------- */
/* --------- 3. Header début --------- */
.main header {
  position: fixed;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: var(--violetEclatant);
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  padding: 2.5rem;
  height: 100vh;
  width: 25vw;
  z-index: 100;
}
.main header::-webkit-scrollbar {
  display: none;
}
.main header .logo-link svg {
  width: 55%;
}
.main header .logo-link svg #o path, .main header .logo-link svg #rest path {
  fill: white;
}
.main header nav .menu-menu-principal-container ul .menu-item-has-children > a {
  color: white;
  font-family: var(--gabaritoSemiBold);
  font-size: 1.75em;
  display: block;
  border-bottom: 1px solid lightgray;
  margin-bottom: 1rem;
  padding: 2rem 0 1rem 0;
  pointer-events: none;
  width: 100%;
}
.main header nav .menu-menu-principal-container ul .menu-item-has-children .sub-menu {
  width: -moz-fit-content;
  width: fit-content;
}
.main header nav .menu-menu-principal-container ul .menu-item-has-children li a {
  display: flex;
  color: white;
  font-family: var(--gabaritoRegular);
  font-size: 1.25em;
  margin: 0.5rem 0 0.5rem 1rem;
  transition: all 0.2s ease-in-out;
}
.main header nav .menu-menu-principal-container ul .menu-item-has-children li a::before {
  content: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.35355 1.35355C5.54882 1.15829 5.54882 0.841709 5.35355 0.646447C5.15829 0.451184 4.84171 0.451184 4.64645 0.646447L0.647143 4.64575C0.644731 4.64815 0.642343 4.65058 0.63998 4.65303C0.553949 4.74228 0.500793 4.86343 0.500009 4.997C0.500003 4.998 0.5 4.999 0.5 5C0.5 5.001 0.500003 5.002 0.500009 5.003C0.500401 5.0697 0.513853 5.13331 0.537939 5.19139C0.562339 5.25036 0.598508 5.30561 0.646446 5.35355L4.64645 9.35355C4.84171 9.54882 5.15829 9.54882 5.35355 9.35355C5.54882 9.15829 5.54882 8.84171 5.35355 8.64645L2.2071 5.5L17 5.5C17.2761 5.5 17.5 5.27614 17.5 5C17.5 4.72386 17.2761 4.5 17 4.5L2.20711 4.5L5.35355 1.35355Z' fill='white' stroke-width='3'/%3E%3C/svg%3E");
  transform: rotate(180deg);
  display: flex;
  margin-right: 0.5rem;
  transition: all 0.2s ease-in-out;
  width: -moz-fit-content;
  width: fit-content;
}
.main header nav .menu-menu-principal-container ul .menu-item-has-children li a:hover {
  color: var(--vertEclatant);
}
.main header nav .menu-menu-principal-container ul .menu-item-has-children li a:hover::before {
  content: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.35355 1.35355C5.54882 1.15829 5.54882 0.841709 5.35355 0.646447C5.15829 0.451184 4.84171 0.451184 4.64645 0.646447L0.647143 4.64575C0.644731 4.64815 0.642343 4.65058 0.63998 4.65303C0.553949 4.74228 0.500793 4.86343 0.500009 4.997C0.500003 4.998 0.5 4.999 0.5 5C0.5 5.001 0.500003 5.002 0.500009 5.003C0.500401 5.0697 0.513853 5.13331 0.537939 5.19139C0.562339 5.25036 0.598508 5.30561 0.646446 5.35355L4.64645 9.35355C4.84171 9.54882 5.15829 9.54882 5.35355 9.35355C5.54882 9.15829 5.54882 8.84171 5.35355 8.64645L2.2071 5.5L17 5.5C17.2761 5.5 17.5 5.27614 17.5 5C17.5 4.72386 17.2761 4.5 17 4.5L2.20711 4.5L5.35355 1.35355Z' fill='%233EC300' stroke-width='3'/%3E%3C/svg%3E");
  transform: rotate(200deg);
}

/* --------- 3. Header fin --------- */
/* --------- 4. Section home début --------- */
.main .home {
  padding: 5rem;
  margin-left: auto;
  min-height: 100vh;
  width: 75vw;
}
.main .home .home__description {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.main .home .home__description h1 {
  color: #14191D;
  font-size: 2.5rem;
  font-family: var(--gabaritoSemiBold);
  margin-bottom: 1rem;
}
.main .home .home__description h4 {
  color: #14191D;
  font-size: 1.35rem;
  font-family: var(--gabaritoBold);
  width: 50%;
}
.main .home .home__description p {
  color: #14191D;
  font-size: 1.2rem;
  font-family: var(--gabaritoRegular);
  margin-bottom: 3rem;
  width: 75%;
}
.main .home .home__description .container-image {
  display: flex;
  gap: 16px;
  position: relative;
  margin-top: 5rem;
  min-height: 20rem;
  width: 100%;
}
.main .home .home__description .container-image__image {
  border-radius: 1.5rem;
  position: relative;
  overflow: hidden;
  height: 100%;
  width: calc(33.33% - 16px);
}
.main .home .home__description .container-image__image img {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}

/* --------- 4. Section home fin --------- */
/* --------- 5. Section base début --------- */
.general {
  padding: 5rem;
  margin-left: auto;
  min-height: 100vh;
  width: 75vw;
}
.general__container-texte {
  margin-bottom: 10rem;
}
.general__container-texte h1 {
  color: #14191D;
  font-size: 2.5rem;
  font-family: var(--gabaritoSemiBold);
  margin-bottom: 1rem;
}
.general__container-texte p {
  color: #14191D;
  font-size: 1.2rem;
  font-family: var(--gabaritoRegular);
  margin-bottom: 3rem;
  width: 75%;
}
.general__container-effet {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.general__container-effet .container {
  margin-bottom: 3rem;
  height: auto;
  width: calc(50% - 16px);
}
.general__container-effet .container__file {
  border-radius: 1.5rem;
  display: block;
  position: relative;
  aspect-ratio: 1/0.5;
  overflow: hidden;
  width: 100%;
}
.general__container-effet .container__file img, .general__container-effet .container__file video {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}
.general__container-effet .container__texte-lien {
  display: flex;
  margin-top: 1rem;
  padding-left: 1rem;
}
.general__container-effet .container__texte-lien .textes {
  width: 50%;
}
.general__container-effet .container__texte-lien .textes p {
  color: #14191D;
  font-size: 1rem;
  font-family: var(--gabaritoBold);
}
.general__container-effet .container__texte-lien .textes a {
  color: var(--violetEclatant);
  text-decoration: underline;
  font: 500 1rem var(--gabaritoBold);
}
.general__container-effet .container__texte-lien .categorie {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  gap: 16px;
  width: 50%;
}
.general__container-effet .container__texte-lien .categorie p {
  border-radius: 12px;
  font: 500 0.85rem var(--gabaritoSemiBold);
  line-height: 1.6em;
  background-color: #fab01c;
  padding: 0.5rem 0.8rem;
}

/* --------- 5. Section base fin --------- */
/* --------- 6. Section connexion debut --------- */
.connexion {
  background-color: var(--violetEclatant);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
.connexion .error {
  display: none;
}
.connexion form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.connexion form p {
  display: flex;
  flex-direction: column;
  font-family: var(--gabaritoSemiBold);
  font-size: 1.5rem;
  color: white;
  margin-bottom: 0.75rem;
}
.connexion form p label {
  margin-bottom: 0.35rem;
}
.connexion form p input {
  padding-left: 1rem;
  border-radius: 0.5rem;
  border: none;
  height: 3rem;
  width: 20rem;
}
.connexion form p input[type=submit] {
  cursor: pointer;
  border-radius: 1.5rem;
  width: 10rem;
  padding-left: 0;
  margin-top: 2rem;
  font-family: var(--gabaritoSemiBold);
  font-size: 1rem;
  transition: all 0.35s ease-in-out;
}
.connexion form p input[type=submit]:hover {
  color: white;
  background-color: var(--vertEclatant);
  border-radius: 1rem;
}

/* --------- 6. Section connexion fin --------- */