body{
    /*Nous avons un appel de la font dans le HEAD du HTML. Réccuperez le nom de la police.*/
    /*Si la typographie n'est pas bien appelé pour quelques raisons que ce soit, nous mettons une alternative en choississant une font de typo SANS EMPATEMENTS*/
    font-family: 'Roboto', sans-serif;
    background-color: var(--clr-lighter);
    color: var(--clr-dark);
}
/*Ceci est le séparateur utilisé entre les sections*/
hr{
    border: none;
    border-top: var(--clr-light) 1px solid;
    margin-top:3rem;
    margin-bottom:3rem;
}

/*-------------------*/
/*-------------------*/
/*SECTION*/
/*-------------------*/
/*-------------------*/
section{padding:3rem 1rem;}
section .container{
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
    max-width: 1300px;
}
section > h1, section .container > h1  {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.88rem;
    font-weight: bolder;
    text-align: center;
    margin-bottom: 4.44rem;
    color: var(--clr-dark);
}

section .container > p {
    text-align: center;
}
@media (min-width:768px){
    section{padding:5rem 2rem;}
    section > h1, section .container > h1  {
      font-size: 2.88rem;
    }
}

/*-----------------------*/
/*SECTIONS SPECIFIQUES*/
/*----------------------*/
section.bg-revert{
    background: var(--bg-dark);
    color: var(--clr-lighter);
}
section.bg-revert h1{
    color: var(--clr-secondary);
    text-shadow: 2px 2px 4px var(--clr-dark);
    
}



section.bg-test{
  background-image: var(--url);
  background-position: center center;
  background-size: cover;
}

.bg-parallax{
  background-image:
    radial-gradient(circle, rgba(17,59,64,0.8) 42%, rgba(1,1,1,0.8) 100%),
    var(--url);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
section.bg-parallax{
  background-image:
    radial-gradient(circle, rgba(17,59,64,0.8) 42%, rgba(1,1,1,0.8) 100%),
    var(--url);
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

section.bg-parallax-2{
  background-image:
    radial-gradient(circle, rgba(17,59,64,0.4) 42%, rgba(0,0,0,0.7) 100%),
    var(--url);
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}




.bg-brown{
    background-color: #8e7860;
    color:white;
}

.bg-dark{
  background-color: var(--clr-dark);
}


/*-----------------------*/
/*CONTENEURS GENERIQUES : GRID FLEX ETC*/
/*-----------------------*/
.grid{
  display: grid;
}
.flex{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/**/
.flex-container{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap:1rem;
}

.wrapper-img{
  max-width: 650px;
  flex:5;
  margin-top:58px;
}
.wrapper-contenu{
  max-width: 580px;
  flex:6;
}
/*wrapper 2 columns Atouts et closer*/

.reverse{flex-direction: row-reverse;}

.flex-container .wrapper-img img{
width: 100%;
}
@media only screen and (max-width: 760px)  { 
.flex-container{
flex-direction: column;
}
}

.circle{
aspect-ratio: 1/1;
border-radius: 50%;
text-align: center;
}


/*GLASS-EFFECT ONLY*/
.glass-primary{
  display:block;
  background: rgba(46, 173, 168, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5.4px);
  -webkit-backdrop-filter: blur(5.4px);
  border: 1px solid rgba(46, 173, 168, 1);
  color:#ffffff;
}  

.link-nostyle{
  color: var(--clr-dark);
  text-decoration: none;
}
.deadlink{
  cursor: not-allowed;
}


/*circle neumorphism*/
/*
.circle-neumorphism {
    margin-left: auto;
    margin-right: auto;
    font-size: 6rem;
aspect-ratio: 1/1;
max-width: 200px;
  background: var(--clr-lighter);
  border: none;
  border-radius: 50%;
  text-align: center;
  outline: none;
  cursor: pointer;
  transition: .2s ease-in-out;
  box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
              -6px -6px 10px rgba(255, 255, 255, .5),
              6px 6px 8px rgba(189, 151, 97, .075),
              6px 6px 10px rgba(189, 151, 97, 0.25);
    line-height: 12rem;
}
.circle-neumorphism:hover {
  box-shadow: -2px -2px 6px rgba(255, 255, 255, .6),
              -2px -2px 4px rgba(255, 255, 255, .4),
              2px 2px 2px rgba(255, 255, 255, .05),
              2px 2px 4px rgba(0, 0, 0, .1);

}
.circle-neumorphism:hover svg {
    
color: var(--clr-secondary);
  
  }

.circle-neumorphism :active {
  box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
              inset -2px -2px 4px rgba(255, 255, 255, .5),
              inset 2px 2px 2px rgba(255, 255, 255, .075),
              inset 2px 2px 4px rgba(0, 0, 0, .15);
}*/