:root
{
  --couleurPrincipale : #050DA3;
  --couleurPrincipaleSombre: hsl(236.96, 94.05%, 22.94%);
}
@font-face {
  font-family: "fontRegular";
  src: url("/global/fonts/OpenSans/OpenSans-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}
      
@font-face {
  font-family: "fontBold";
  src: url("/global/fonts/OpenSans/OpenSans-Bold.ttf");
 
}
*, *::before, *::after{box-sizing: border-box;}

html{font-family: fontRegular; }
body{padding: 0; margin: 0}
#logo{margin: 0; background: #fff; text-align: center}
#logo img{height: 80px}
header{height: 100dvh; background-color: #ccc; position: relative; color: #fff; display: flex;align-items: center; justify-content: center; text-align: center; padding: 20px; background-image: url(/temp/Accueil_Canyon_petit.jpg), url(/temp/Accueil_Canyon.jpg); background-size: cover; background-position: center center}
header:before{content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .3)}
header .txts{ position: relative; z-index: 2}
#follow a{font-size: 1.5em;
  color: #fff;
  background: var(--couleurPrincipale);
  display: inline-flex;
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  min-width: 40px;
  aspect-ratio: 1/1;
  justify-content: center;
  align-items: center;
  transition: background .5s ease
}
@media (hover: hover) 
{
  #follow a:hover{background: var(--couleurPrincipaleSombre)}
}

h1{font-size: 3em}
h1, h2{font-family: fontBold; margin-top: 0}

body > div{display: grid; grid-template-columns: 2fr 1fr}
.form-container{display: flex; align-items: center}

@media screen and (max-width: 600px) {
  body > div {
    display: block;
  }
  
  header{flex-direction: column}
  header:after{content: var(--fa); font-family: "Font Awesome 6 Pro"; --fa: "\f078";
  --fa--fa: "\f078\f078"; font-weight: bold; display: block;
  margin-top: 20px;
  font-size: 1.5em;
  
  font-size: 2em;
  position: absolute;
  bottom: 10px;
  }
  
  
}


#infos{position: relative}

.banniere__etiquette {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1rem;
background: rgba(50,50,50, 0.6);
padding: 0.5rem 1rem;
border-radius: 10px;
color: #fff;
font-size:.8em;
position: absolute; bottom: 20px; left: 10px;
}

@media screen and (max-width: 600px) {
  .banniere__etiquette 
  {
    bottom: 60px;
  }
}
.etiquette__texte{text-align: left}
.etiquette__texte span {
  display: block;}
  
.etiquette__texte span:nth-child(2) {
  font-size: 0.75em;}