/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  --main-color: #3D553D;
  --main-color-light: #60835e;
  --main-color-lighten: #8aaf88;
  --white-color: #f1f1f1;
  --black-color: #131A15;
  --body-color: #f1f1f1;
  --hover-light-color:#131A15;
  --hover-dark-color:#8aaf88;

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Montserrat", Arial, sans-serif;
  --normal-font-size: 1rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1024px) {
  :root {
    --normal-font-size: 1rem;
  }
}

/*=============== NAV BAR SECTION ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: var(--body-font);
  }
  
  body {
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    padding: 0;
    margin: 0;
  }
  
  ul {
    list-style: none;
  }
  
  a {
    text-decoration: none;
  }

  a:hover {
    color: var(--hover-light-color);
  }
  
  /*=============== MARGIN CONTENT ===============*/
  .container {
    max-width: 1350px;
    margin-inline: 1.5rem;
  }
  
  /*=============== HEADER ===============*/
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--main-color);
    box-shadow: 0 2px 16px #0e1b104d;
    z-index: var(--z-fixed);
  }
  
  /*=============== NAV ===============*/
  .nav {
    height: var(--header-height);
  }
  
  .nav_logo, 
  .nav_burger, 
  .nav_close {
    color: var(--white-color);
  }
  
  .nav_content {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav_logo {
    display: inline-flex;
    align-items: center;
  }

  .nav_logo img{
    height: var(--header-height);
  }
  
  .nav_toggle {
    position: relative;
    width: 32px;
    height: 32px;
  }
  
  .nav_burger, 
  .nav_close {
    position: absolute;
    width: max-content;
    height: max-content;
    inset: 0;
    margin: auto;
    font-size: 1.25rem;
    cursor: pointer;
    transition: opacity .1s, transform .4s;
  }
  
  .nav_close {
    opacity: 0;
  }
  
  /* Navigation for mobile devices */
  @media screen and (max-width: 1118px) {
    .nav_menu {
      position: absolute;
      left: 0;
      top: 2.5rem;
      width: 100%;
      height: calc(100vh - 3.5rem);
      overflow: auto;
      pointer-events: none;
      opacity: 0;
      transition: top .4s, opacity .3s;
    }
    .nav_menu::-webkit-scrollbar {
      width: 0;
    }
    .nav_list {
      background-color: var(--main-color);
      padding-top: 1rem;
    }
    .nav_logo img{
      height: 3rem;
    }
  }
  
  .nav_link {
    color: var(--white-color);
    background-color: var(--main-color);
    font-weight: var(--font-semi-bold);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s;
  }
  
  .nav_link:hover {
    background-color: var(--main-color-light);
    color:var(--hover-dark-color);
  }
  
  /* Show menu */
  .show-menu {
    opacity: 1;
    top: 3.5rem;
    pointer-events: initial;
  }
  
  /* Show icon */
  .show-icon .nav_burger {
    opacity: 0;
    transform: rotate(90deg);
  }
  .show-icon .nav_close {
    opacity: 1;
    transform: rotate(90deg);
  }
  
  /* Dropdown */
  .dropdown_item {
    cursor: pointer;
  }
  
  .dropdown_arrow {
    font-size: 1.25rem;
    font-weight: initial;
    transition: transform .4s;
  }
  
  .dropdown_link, 
  .dropdown_sublink {
    padding: 1.25rem 1.25rem 1.25rem 2.5rem;
    color: var(--white-color);
    background-color: var(--main-color-light);
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-weight: var(--font-semi-bold);
    transition: background-color .3s;
  }
  
  .dropdown_link i, 
  .dropdown_sublink i {
    font-size: 1.25rem;
    font-weight: initial;
  }
  
  .dropdown_link:hover, 
  .dropdown_sublink:hover {
    background-color: var(--main-color);
    color:var(--hover-dark-color);
  }
  
  .dropdown_menu, 
  .dropdown_submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-out;
  }
  
  /* Show dropdown menu & submenu */
  .dropdown_item:hover .dropdown_menu, 
  .dropdown_subitem:hover > .dropdown_submenu {
    max-height: 1000px;
    transition: max-height .4s ease-in;
  }
  
  /* Rotate dropdown icon */
  .dropdown_item:hover .dropdown_arrow {
    transform: rotate(180deg);
  }

  .show-drop-menu{
    max-height: 1000px;
    transition: max-height .4s ease-in;
  }
  
  /*=============== DROPDOWN SUBMENU ===============*/
  .dropdown_add {
    margin-left: auto;
  }
  
  .dropdown_sublink {
    background-color: var(--main-color-lighten);
  }
  
  /*=============== BREAKPOINTS ===============*/
  /* For small devices */
  @media screen and (max-width: 340px) {
    .container {
      margin-inline: 1rem;
    }
  
    .nav_link {
      padding-inline: 1rem;
    }
  }
  
  /* For large devices */
  @media screen and (min-width: 1118px) {
    .container {
      margin-inline: auto;
    }
  
    .nav {
      height: calc(var(--header-height) + 2rem);
      display: flex;
      justify-content: space-between;
    }
    .nav_toggle {
      display: none;
    }
    .nav_list {
      height: 100%;
      display: flex;
      column-gap: 3rem;
    }
    .nav_link {
      height: 100%;
      padding: 0;
      justify-content: initial;
      column-gap: .25rem;
    }
    .nav_link:hover {
      background-color: transparent;
    }
  
    .dropdown_item, 
    .dropdown_subitem {
      position: relative;
    }
  
    .dropdown_menu, 
    .dropdown_submenu {
      max-height: initial;
      overflow: initial;
      position: absolute;
      left: 0;
      top: 6rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s, top .3s;
    }
  
    .dropdown_link, 
    .dropdown_sublink {
      padding-inline: 1rem 3.5rem;
    }
  
    .dropdown_subitem .dropdown_link {
      padding-inline: 1rem;
    }
  
    .dropdown_submenu {
      position: absolute;
      left: 100%;
      top: .5rem;
    }
  
    /* Show dropdown menu */
    .dropdown_item:hover .dropdown_menu {
      opacity: 1;
      top: 5.5rem;
      pointer-events: initial;
      transition: top .3s;
    }
  
    /* Show dropdown submenu */
    .dropdown_subitem:hover > .dropdown_submenu {
      opacity: 1;
      top: 0;
      pointer-events: initial;
      transition: top .3s;
    }
  }

/*=============== MAIN SECTION ===============*/
.main-section{
  margin: 8rem;
}

.main-section h1{
  font-size:1.6rem;
  text-align:center;
}

.sous-titre{
  font-size:.9rem;
  text-align:center;
}

section p{
  color:var(--black-color)
}
section h2{
  text-align:center;
}

.main-blocs{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  width:100%;
}

.main-blocs div{
  margin:3% 0% 1% 0%;
  width:60%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main-blocs div hr,
.formations hr,
.full_page hr,
.atex-blocs hr{
  color: #222222;
  margin:1rem;
  width:55%;
  align-self: center;
}

.atex-blocs{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  width:100%;
}

.atex-blocs div{
  margin:3% 0% 1% 0%;
  width:60%;
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hide_infos{
  display:none;
}

@media screen and (max-width: 1118px){
  .main-section{
    margin: 6rem 2rem;
  }
  .main-section h1{
    font-size:1.2rem;
    text-align:center;
  }
  .main-blocs div{
    width:100%;
    margin: 2.5rem 0rem 0rem 0rem;
  }
}

/*=============== FORMATIONS ===============*/
.formations{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:row;
  flex-wrap: wrap;
  flex:1;
  width:100%;
}

.formations div{
  margin:3% 5% 1% 5%;
  width:40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: justify;
}

.full_page{
  margin:3% 0% 1% 0%;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  width:100%;
  text-align: center;
}
.full_page p{
  width:100%;
}

@media screen and (max-width: 1118px){
  .formations{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    flex-wrap: wrap;
    flex:1;
    width:100%;
  }

  .formations div{
    margin:5% 0% 3% 0%;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: justify;
  }
}

/*=============== FOOTER ===============*/
footer{
  background-color: var(--main-color);
  margin:0px;
  padding:1%;
  position:fixed;
  bottom:0;
  width:100%;
  box-shadow: 0 -2px 16px #0e1b104d;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

footer p{
  margin: 0px 3px 0px 0px;
  color: var(--white-color);
  text-align: center;
}

footer div{
  display: flex;
  flex-direction: row;
  flex-grow:1;
  align-items: center;
  justify-content: center;
}

footer a{
  color:var(--white-color);
}

footer a:hover{
  color:var(--hover-dark-color);
  text-decoration: underline;
}

@media screen and (max-width: 1118px){
  footer div{
    display: block;
    text-align: center;
  }
}
/*=============== ADMIN INTERFACE ===============*/
.hide_edit{
  display:none!important;
}

/*=============== MENTIONS ===============*/
.cgv{
  margin:2% 0%;
}