:root{
  /* charte de couleur */
  /* coleur de base / theme */
  --vert : #465626;
  --blanc : #F4EDE6;
  --noir : #0c0c0c;
    /* pour les bouttons */
  --vert-btn : #366646;
  --vert-btn-hover : #777777;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Montserrat, sans-serif;
  /* outline: 1px solid red !important; */
}
body{
  height: 100vh;
  min-height: 100vh;
  color: var(--blanc);
  overflow: hidden;
  background-color: var(--blanc);

  background-image: url(../assets/img/fond/fond_blanc.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size:auto;
}

header{
  height: 100vh;
  min-height: 100vh;
  transition: 0.3s ease-in;
  z-index: 1;
}
/* bipyramide qui flotte dans la première page */
#bipyramid-container{
  pointer-events: none;
  position: absolute;
  z-index: 100;
  justify-self: center;
  width: 200px;
  height: 200px;
  background-color: transparent;
  margin-top: calc(50vh - 100px);
}


/* placement des 4 élément qui compose le container du header */
.haut-droit, .haut-gauche, .bas-gauche, .bas-droit{
  width: calc(45%);
  height: calc(45%);
  padding: 15px;
  display: block;   
  margin: auto;
}

.haut-droit, .haut-gauche{ 
  align-content: start; /* les éléments des sous container du haut sont placés en haut de la page*/
}

.bas-gauche, .bas-droit{
  align-content: end; /* les éléments des sous-container de bas sont placés en bas de la page*/
}

/* haut gauche */
.title{
  font-size: 30px;
}
hr.mid{
  width: 50%;
}

/* vignette SVG */
.svg-card,.content-zone-text, foreignObject.zone-text{
  width: 15vw;
  min-width: 200px;
}
foreignObject.zone-text{
  width: 100%;
  min-width: 200px;
  height: 100%;
}

svg.droit{ /*placement à droite des vignettes étant du coté droit de l'écran*/
  float: right;
}

/* contenue de la card */
.content-zone-text{
  width: 90%;
  height: auto;
  margin: 10px auto auto auto;
  font-weight: 600;
}
p.title-card{
  background-color: var(--vert);
  color: var(--blanc);
  border-radius: 5px;
  text-align: center;
}
p.text-card{
  margin-top: 10px;
}

a{
  color: var(--noir);
  transition: color 0.3s ease;
}
a:hover{
  color: var(--vert-btn);
  transition: color 0.4s ease;
}