/**********************************************************************************************************************************/
/* FLEX
/**********************************************************************************************************************************/
.fc-flex{
  display: flex;
  flex-direction: column;
  gap: var(--padding);
}

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

.fc-flex.fc-space_around{
  justify-content: center;
  gap: var(--margin);
}

@media only screen and (min-width: 600px) {
  .fc-flex.fc-space_around{
    gap: calc(var(--margin)*3);
  }
}

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

  .fc-flex.reverse-mobile{
    flex-direction: row;
    gap: var(--margin);
  }

  .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(--padding);
}
*/

/*
.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(--padding) 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 sur fc-flex : superposition des colonnes */
.fc-flex.fc-decale{
  position: relative;
  gap: 0;
}

/* Colonnes décalées : z-index pour contrôler la superposition */
.fc-flex.fc-decale > .fc-left,
.fc-flex.fc-decale > .fc-right{
  position: relative;
}

.fc-flex.fc-decale > .fc-decale-left{
  z-index: 2;
}

.fc-flex.fc-decale > .fc-decale-right{
  z-index: 2;
}

/* Mobile : superposition verticale */
@media only screen and (max-width: 599px) {
  .fc-flex.fc-decale > .fc-decale-right{
    margin-top: -3rem;
  }
  .fc-flex.fc-decale > .fc-decale-left{
    margin-top: -3rem;
  }
  .hasDecale .fc-left{
    padding-bottom: 0 !important;
  }

  /* Reverse mobile : l'ordre visuel est inversé,
     le margin-top négatif doit passer sur le frère */
  .fc-flex.fc-decale.reverse-mobile > .fc-decale-right{
    margin-top: 0;
  }
  .fc-flex.fc-decale.reverse-mobile > .fc-left:not(.fc-decale-left){
    margin-top: -3rem;
  }

  .fc-flex.fc-decale.reverse-mobile > .fc-decale-left{
    margin-top: 0;
  }
  .fc-flex.fc-decale.reverse-mobile > .fc-right:not(.fc-decale-right){
    margin-top: -3rem;
  }
}

/* Desktop : superposition horizontale */
@media only screen and (min-width: 600px) {
  .fc-flex.fc-decale{
    justify-content: center;
    margin: calc(var(--space-elements)*-1.5) 0;
  }

  /* Décalé à droite : la colonne droite chevauche la gauche */
  .fc-flex.fc-decale > .fc-decale-right{
    margin-left: -10rem;
  }

  /* Décalé à gauche : la colonne gauche chevauche la droite */
  .fc-flex.fc-decale > .fc-decale-left{
    margin-right: -10rem;
  }
}

/* Desktop large : chevauchement réduit */
@media only screen and (min-width: 1600px) {
  .fc-flex.fc-decale > .fc-decale-right{
    margin-left: -3rem;
  }

  .fc-flex.fc-decale > .fc-decale-left{
    margin-right: -3rem;
  }
}

.frame-container-1column.frame-layout-400 .container{
  max-width: unset;
}