/**********************************************************************************************************************************/
/* FLEX
/**********************************************************************************************************************************/
.fc-flex{
  display: flex;
  flex-direction: column;
  row-gap: var(--gutter-out);
  column-gap: calc(var(--gutter-out)*2);
}

.fc-flex.reverse-mobile{
  flex-direction: column-reverse;
}

.fc-flex.fc-space_around{
  justify-content: center;
}

@media only screen and (min-width: 600px) {

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

  .fc-flex{
    flex-direction: row;
    justify-content: space-between;
    /* align-items: stretch; */
  }

  .fc-flex.vstart{
    align-items: flex-start;
  }

  .fc-flex.vcenter{
    align-items: center;
  }

  .fc-flex.vend{
    align-items: flex-end;
  }

}



/**********************************************************************************************************************************/
/* COLUMNS
/**********************************************************************************************************************************/
/*
.fc-left,
.fc-right{
  padding: var(--gutter-in);
}
*/

/*
.fc-left{
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.fc-right{
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.fc-footer{
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
}

.fc-footer{
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
}

.fc-header{
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
}
*/

.fc-round, .fc-round .frame-bg{
  border-radius: var(--round);
  overflow: hidden;
}

.fc-shadow{
  box-shadow: var(--shadow);
}


/**********************************************************************************************************************************/
/* 55% 40%
/**********************************************************************************************************************************/
@media only screen and (min-width: 600px) {
  .sb55and40 .fc-left{
    width: 55%;
  }
}

@media only screen and (min-width: 600px) {
  .sb55and40 .fc-right{
    width: 40%;
  }
}


/**********************************************************************************************************************************/
/* 55% 40%
/**********************************************************************************************************************************/
@media only screen and (min-width: 600px) {
  .sb40and55 .fc-left{
    width: 40%;
  }
}

@media only screen and (min-width: 600px) {
  .sb40and55 .fc-right{
    width: 60%;
  }
}


/**********************************************************************************************************************************/
/* 1/4 3/4
/**********************************************************************************************************************************/
@media only screen and (min-width: 600px) {
  .sb14and34 .fc-left{
    width: 25%;
  }
}

@media only screen and (min-width: 600px) {
  .sb14and34 .fc-right{
    width: 75%;
  }
}

/**********************************************************************************************************************************/
/* 1/3 1/3 1/3
/**********************************************************************************************************************************/
.sb13and13 .fc-milieu{
  margin: var(--gutter-in) 0;
}

@media only screen and (min-width: 600px) {
  .sb13and13 .fc-left{
    width: 33%;
  }
}

@media only screen and (min-width: 600px) {
  .sb13and13 .fc-milieu{
    width: 33%;
    margin: 0;
  }
}

@media only screen and (min-width: 600px) {
  .sb13and13  .fc-right{
    width: 33%;
  }
}

.fc-header h2{
  margin-bottom: 0 !important;
}


/**********************************************************************************************************************************/
/* SMART BLOC 1/4 3/4
/**********************************************************************************************************************************/
@media only screen and (min-width: 600px) {
  .sb34and14 .fc-left{
    width: 75%;
  }
}

@media only screen and (min-width: 600px) {
  .sb34and14 .fc-right{
    width: 25%;
  }
}


/**********************************************************************************************************************************/
/* SMART BLOC 1/3 2/3
/**********************************************************************************************************************************/
@media only screen and (min-width: 600px) {
  .sb13and23 .fc-left{
    width: 33%;
  }
}

@media only screen and (min-width: 600px) {
  .sb13and23 .fc-right{
    width: 67%;
  }
}


/**********************************************************************************************************************************/
/* SMART BLOC 1/3 2/3
/**********************************************************************************************************************************/
@media only screen and (min-width: 600px) {
  .sb23and13 .fc-left{
    width: 60%;
  }
}

@media only screen and (min-width: 600px) {
  .sb23and13 .fc-right{
    width: 40%;
  }
}


/**********************************************************************************************************************************/
/* SMART BLOC 1/2 1/1
/**********************************************************************************************************************************/
.sb12and12 .fc-left{
  position: relative;
}

@media only screen and (min-width: 600px) {
  .sb12and12 .fc-left{
    width: 50%;
  }
}

@media only screen and (min-width: 600px) {
  .sb12and12 .fc-right{
    width: 50%;
  }
}


/**********************************************************************************************************************************/
/* SMART BLOC 1/2 1/2 rapproché
/**********************************************************************************************************************************/
.sb12and12forced .fc-left{
  position: relative;
}

@media only screen and (min-width: 600px) {
  .sb12and12forced .fc-left{
    width: 50%;
  }
}

@media only screen and (min-width: 600px) {
  .sb12and12forced .fc-right{
    width: 50%;
  }
}

.fc-decale{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
	margin: 10px;
}

@media only screen and (min-width: 600px) {
  .fc-decale{
	   margin: calc(var(--space-elements)*-1.5) 0;
  }
}

@media only screen and (min-width: 600px) {
  .fc-decale-right{
    transform: translateX(-10%);
  }
}

.fc-decale-left{
  transform: translateX(10%);
}

@media only screen and (max-width: 600px) {
  .hasDecale .fc-left{
    padding-bottom: 0 !important;
  }
}

@media only screen and (min-width: 600px) {
  .fc-decale .frame:nth-child(n+2):last-child {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: var(--space-elements);
  }
}