/**********************************************************************************************************************************/
/* SMART BLOC 1
/**********************************************************************************************************************************/
@media only screen and (min-width: 600px) {
  .smart-bloc-flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}


/**********************************************************************************************************************************/
/* ROUND ?
/**********************************************************************************************************************************/
.smart-bloc.round{
  border-radius: var(--cvg-radius);
}


.smart-bloc-flex .frame{
  padding-left: 0;
  padding-right: 0;
}

/**********************************************************************************************************************************/
/* BACKGROUND ?
/**********************************************************************************************************************************/
.smart-bloc.withBg{
  padding: 20px;
  margin: 0 -20px;
}

@media only screen and (min-width: 600px) {
  .smart-bloc.withBg{
    padding: 30px;
    margin: 0;
  }
}

@media only screen and (min-width: 1000px) {
  .smart-bloc.withBg{
    padding: 50px;
  }
}

@media only screen and (min-width: 1600px) {
  .smart-bloc.withBg{
    padding: 80px;
  }
}

.smart-bloc.bg-rose{ background: var(--cvg-rose); }
.smart-bloc.bg-rouge{ background: var(--vert); color: #FFFFFF; }
.smart-bloc.bg-beton{ background: var(--cvg-beton); }
.smart-bloc.bg-creme{ background: var(--cvg-creme); }



/**********************************************************************************************************************************/
/* SMART BLOC 1/4 3/4
/**********************************************************************************************************************************/
.sb14and34 .left{
  margin-bottom: 30px;
}

@media only screen and (min-width: 600px) {
  .sb14and34 .left{
    width: 35%;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1000px) {
  .sb14and34 .left{
    width: 25%;
  }
}

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

@media only screen and (min-width: 1000px) {
  .sb14and34 .right{
    width: 65%;
  }
}

/**********************************************************************************************************************************/
/* SMART BLOC 1/3 2/3
/**********************************************************************************************************************************/
.sb13and23 .left{
  margin-bottom: 30px;
}

@media only screen and (min-width: 600px) {
  .sb13and23 .left{
    width: 30%;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1000px) {
  .sb13and23 .left{
    width: 27%;
  }
}

@media only screen and (min-width: 1600px) {
  .sb13and23 .left{
    width: 30%;
  }
}

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

@media only screen and (min-width: 1000px) {
  .sb13and23 .right{
    width: 53%;
  }
}

@media only screen and (min-width: 1600px) {
  .sb13and23 .right{
    width: 60%;
  }
}

/**********************************************************************************************************************************/
/* SMART BLOC 1/2 1/1
/**********************************************************************************************************************************/


.sb12and12 .left{
  margin-bottom: calc(var(--gutter-out)/2);
  position: relative;
}

@media only screen and (min-width: 600px) {
  .sb12and12 .left{
    width: 50%;
    padding-right: calc(var(--gutter-in)/2);
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 600px) {
  .sb12and12 .right{
    width: 50%;
    padding-left: calc(var(--gutter-in)/2);
  }
}

.sb12and12 + .sb12and12{
  margin-top: calc(var(--gutter-out)/2);
}

/**********************************************************************************************************************************/
/* SMART BLOC > RIGHT > CONTENTS
/**********************************************************************************************************************************/
@media only screen and (min-width: 600px) and (max-width: 1000px) {
  .smart-bloc .left .frame-type-textpic .ce-left{
    padding-right: calc(var(--gutter-out)/2);
  }
  .smart-bloc .right .frame-type-textpic .ce-left{
    padding-left: calc(var(--gutter-out)/2);
  }
}

@media only screen and (min-width: 1000px) {
  .smart-bloc .frame-type-textpic .ce-left{
    display: flex;
  }
  .smart-bloc .frame-type-textpic .ce-left .ce-gallery{
    width: 40%;
  }

  .smart-bloc .frame-type-textpic .ce-left .ce-bodytext{
    width: 60%;
    padding: 0 50px;
  }
}