@font-face {
  font-family: "regular";
  src: url(../fonts/Jost-Regular.ttf);
}
@font-face {
  font-family: "medium";
  src: url(../fonts/Jost-Medium.ttf);
}
@font-face {
  font-family: "thin";
  src: url(../fonts/Jost-Thin.ttf);
}
@font-face {
  font-family: "light";
  src: url(../fonts/Jost-Light.ttf);
}
@font-face {
  font-family: "jost";
  src: url(../fonts/Jost-VariableFont_wght.ttf);
}
@font-face {
  font-family: "newsreader";
  src: url(../fonts/Newsreader-VariableFont.ttf);
}
@font-face {
  font-family: "Geologica";
  src: url(../fonts/Geologica-VariableFont.ttf);
}
:root {
  color-scheme: light only !important;
  --urban-ispointer:0;
  --urban-ispointer-local:0;
  --urban-HeaderH: 40px;
  --urban-MaxW: 100vw;
  --urban-FooterH:50px;
  --urban-btn-padding-LR:15px;
  --urban-btn-padding-TB:6px;
  --urban-wrapper-margin:2%;
  --urban-body-color: #fffaf6;
  --urban-header-color:#27384c;
  --urban-footer-color: var(--urban-header-color);
  --urban-cat-color: #7e4b2f;
  --urban-cat-bgcolor:#f6ebdf;
  --urban-cat-bgcolor2:#f6dfdf;
  --urban-extra-color:#3f688c;
  --urban-block-color:#ffffff;
  --urban-block-color-alpha:50%;
  --urban-padding:20px;
  --unrban-Ft-h1:12px;
  --unrban-Ftsize-std:16px;
  --urban-VScrollBarW:100vw;
  --urban-btn-color: white;
  --urban-btn-bgcolor: none;
  --urban-btn-bordercolor: white;
  --urban-btn-bordercolor-alpha:0%;
  --urban-btn-color-hover: white;
  --urban-btn-bgcolor-hover: none;
  --urban-btn-bordercolor-hover: white;
  --urban-btn-bordercolor-alpha-hover:100%;
  --urban-myflex-justify-content:space-around;
  --urban-myflex-align-items:flex-start;
  --urban-myflex-align-content:flex-start;
  --urban-block-design-width:100%;
  --urban-block-design-min-height:0px;
  --urban-block-rows-header-h:50px;
  --urban-block-rows-footer-b:30px;
  --urban-depashBg: calc( 0px + max(0px , calc( (100vw - $maxw) / 2 ) ));
  --urban-block-design2-minH: 240px;
  --urban-color-logo-u:blue;
  --urban-page-height:100vh;
}
@media screen and (min-device-width: 720px) {
  :root {
    --urban-HeaderH: 50px;
    --urban-MaxW: 1280px;
    --urban-FooterH:50px;
    --unrban-Ft-h1:12pt;
    --urban-btn-padding-LR:12px;
    --urban-btn-padding-TB:4px;
  }
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  :root {
    --urban-ispointer:1;
    --urban-ispointer-local:1;
    --urban-HeaderH: 50px;
    --urban-wrapper-margin:20px;
    --urban-btn-padding-LR:12px;
    --urban-btn-padding-TB:4px;
    --urban-block-design-width:295px;
  }
}

#suptop {
  background-color: var(--urban-header-color);
}

#header {
  margin: auto;
  width: 100%;
  height: var(--urban-HeaderH);
  position: relative;
  background-color: var(--urban-header-color);
  max-width: var(--urban-MaxW);
  z-index: 400;
}
#header a {
  display: inline;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #header {
    border-top-style: none;
    border-top-width: 0px;
  }
}

#nav {
  position: absolute;
  height: var(--urban-HeaderH);
  overflow: hidden;
  z-index: 400;
  right: 0px;
  border-width: 1px;
}
#nav h3 {
  font-family: "Geologica", sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-transform: uppercase;
  margin-block-start: 24px;
  margin-block-end: 0;
  letter-spacing: 0.8px;
}
#nav ul {
  margin-block-end: 0;
}
#nav li {
  font-family: "Geologica", sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  margin-block-start: 24px;
  margin-block-end: 0;
  letter-spacing: 0.8px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #nav {
    margin-bottom: 0px;
    left: 0px;
  }
  #nav h3 {
    font-size: 20px;
    margin-block-start: 8px;
    margin-block-end: 20px;
  }
  #nav li {
    font-size: 16px;
    margin-block-start: 20px;
    margin-block-end: 20px;
  }
}
#nav #burger {
  position: absolute;
  right: 0px;
  height: var(--urban-HeaderH);
  width: var(--urban-HeaderH);
  cursor: pointer;
  pointer-events: all;
  background-image: url("/assets/img/burger.svg");
  background-repeat: no-repeat;
  background-size: calc(var(--urban-HeaderH) / 2) calc(var(--urban-HeaderH) / 2);
  background-position: calc(var(--urban-HeaderH) / 4) calc(var(--urban-HeaderH) / 4);
  /*@media screen and (min-device-width: $mobsize){
  	background-size: 35px 35px;
  	background-position: 15px 15px;
  }*/
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #nav #burger {
    display: none;
  }
}
#nav.show {
  z-index: 399;
  overflow: visible;
}
#nav.show #burger {
  background-image: url("/assets/img/croix.svg");
}
#nav.show #header-nav {
  left: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #nav.show #header-nav .myarrow {
    transform: rotate(-90deg);
  }
  #nav.show #header-nav .coll-header {
    height: 230px;
    overflow: hidden;
  }
  #nav.show #header-nav .submenue {
    top: 0px;
  }
}
#nav.show.moveout #burger {
  background-image: url("/assets/img/burger.svg");
}
#nav.show.moveout #header-nav {
  left: -100vw;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #nav.show.moveout #header-nav {
    left: 0px;
  }
  #nav.show.moveout #header-nav .coll-header {
    height: var(--urban-HeaderH);
    overflow: hidden;
  }
  #nav.show.moveout #header-nav .submenue {
    top: 200px;
  }
}
#nav #header-nav {
  z-index: 400;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  left: 100vw;
  top: 0px;
  width: 100vw;
  height: 100vh;
  padding-top: 10vh;
  justify-content: flex-start;
  align-content: center;
  background-color: rgba(39, 56, 76, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(20px);
  max-width: var(--urban-MaxW);
  margin-top: var(--urban-HeaderH);
  max-height: 100vh;
  transition: all 0.5s;
}
#nav #header-nav .myarrow {
  display: none;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #nav #header-nav {
    z-index: 400;
    background-color: var(--urban-header-color);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    top: 0px;
    left: 0px;
    width: auto;
    height: auto;
    position: relative;
    margin-top: 5px;
    padding-left: 250px;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
  }
  #nav #header-nav .myarrow {
    display: inline-block;
    transform: rotate(90deg);
  }
  #nav #header-nav #dosubmenue {
    z-index: 400;
  }
  #nav #header-nav .coll-header {
    transition: all 0.5s;
    height: calc(var(--urban-HeaderH) - 5px);
    overflow: hidden;
  }
  #nav #header-nav .submenue {
    z-index: 398;
    position: relative;
    transition: all 0.5s;
    top: 250px;
  }
  #nav #header-nav .submenue li {
    z-index: 398;
  }
}
#nav #header-resa {
  display: none;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #nav #header-resa {
    position: absolute;
    right: 20px;
    display: block;
  }
}

#hlogo {
  position: absolute;
  z-index: 420;
  width: calc(100% - var(--urban-HeaderH));
  height: var(--urban-HeaderH);
  left: 0px;
  display: flex;
  justify-content: space-between;
}
#hlogo img {
  width: auto;
  height: var(--urban-HeaderH);
}
#hlogo .logotxt {
  flex-grow: 2;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #hlogo {
    justify-content: flex-start;
    width: calc(var(--urban-HeaderH) * 4);
  }
}

#footer {
  background-color: var(--urban-footer-color);
  margin-bottom: var(--urban-FooterH);
  position: relative;
  z-index: 390;
}
#footer h3 {
  font-family: "Geologica", sans-serif;
  font-weight: 200;
  font-size: 18px;
  text-transform: uppercase;
  margin-block-start: 20px;
  margin-block-end: 0;
}
#footer ul {
  margin-block-end: 0;
}
#footer li {
  font-family: "Geologica", sans-serif;
  font-size: 14px;
  font-weight: 200;
  text-transform: uppercase;
  margin-block-start: 20px;
  margin-block-end: 0;
  line-height: normal !important;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #footer {
    margin-bottom: 0px;
  }
  #footer h3 {
    font-size: 18px;
    margin-block-start: 8px;
    margin-block-end: 18px;
    letter-spacing: 0.5px;
  }
  #footer li {
    font-size: 14px;
    margin-block-start: 18px;
    margin-block-end: 18px;
    letter-spacing: 1px;
  }
}

#footer-nav {
  text-align: center;
  z-index: 390;
  --urban-btn-bgcolor-hover: white;
  --urban-btn-color-hover: #34291e;
  --urban-btn-bordercolor-hover: white;
  min-height: 496px;
  padding-top: 20px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #footer-nav {
    padding-top: 20px;
    text-align: left;
    justify-content: space-between;
    min-height: auto;
  }
}

#footer-resa {
  z-index: 390;
  display: none;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #footer-resa {
    display: flex;
    pointer-events: none;
    justify-content: flex-end;
    margin-top: -16px;
    top: -40px;
    position: relative;
  }
  #footer-resa .btn {
    --urban-btn-bgcolor-hover:none;
    pointer-events: all;
  }
}

#footer-deco {
  width: 100%;
  height: 90px;
  z-index: 200;
  background-color: var(--urban-footer-color);
  display: none;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #footer-deco {
    display: block;
  }
}

#mobilefooter {
  display: block;
  margin: auto;
  width: 100%;
  position: fixed;
  text-align: center;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--urban-FooterH) + 3px);
  background-color: var(--urban-header-color);
  z-index: 400;
  color: aliceblue;
  box-shadow: 0px -5px 15px #000000;
}
#mobilefooter h3 {
  font-family: "Geologica", sans-serif;
  font-weight: 200;
  font-size: 14px;
  text-transform: uppercase;
  margin-block-start: 15px;
  margin-block-end: 0;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #mobilefooter {
    display: none;
  }
}

#wrapper {
  margin: auto;
  position: relative;
  display: block;
  width: 100%;
  z-index: 200;
  max-width: var(--urban-MaxW);
  /* .myflex{
       --urban-myflex-justify-content:space-between;

   }*/
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #wrapper {
    position: unset;
    min-height: 80vh;
  }
}
#wrapper h1 {
  font-family: "jost", sans-serif;
  font-size: 32px;
  font-weight: 500;
  text-transform: uppercase;
  margin-block-start: 4px;
  margin-block-end: 20px;
  line-height: 42px;
  text-align: left;
  margin-left: 3%;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #wrapper h1 {
    text-align: left;
    margin-left: 10%;
    margin-block-start: 12px;
    margin-block-end: 24px;
    font-size: 60px;
    line-height: 70px;
  }
}
#wrapper #soinHeader {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 210;
  min-height: 50vh;
}
#wrapper #soinHeader p {
  font-family: "Geologica", sans-serif;
  font-size: 20px;
  font-weight: 100;
  margin-block-end: 20px;
}
#wrapper #soinHeader h2 {
  font-family: "jost", sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  margin-block-start: 4px;
  margin-block-end: 16px;
  line-height: 25px;
  text-align: left;
  margin-left: 3%;
}
#wrapper #soinHeader #soinDesc p:nth-child(2n+1), #wrapper #soinHeader .swap p:nth-child(2n+1) {
  margin-left: 12%;
  margin-right: 3%;
}
#wrapper #soinHeader #soinDesc p:nth-child(2n), #wrapper #soinHeader .swap p:nth-child(2n) {
  margin-left: 3%;
  margin-right: 7%;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #wrapper #soinHeader p {
    font-size: 36px;
    margin-left: 30%;
    margin-right: 10%;
    margin-block-end: 50px;
  }
  #wrapper #soinHeader h2 {
    text-align: left;
    margin-left: 10%;
    margin-block-start: 16px;
    margin-block-end: 24px;
    font-size: 48px;
    line-height: 53px;
  }
  #wrapper #soinHeader #soinDesc p:nth-child(2n+1), #wrapper #soinHeader .swap p:nth-child(2n+1) {
    margin-left: 25%;
    margin-right: 10%;
  }
  #wrapper #soinHeader #soinDesc p:nth-child(2n), #wrapper #soinHeader .swap p:nth-child(2n) {
    margin-left: 10%;
    margin-right: 25%;
  }
}
#wrapper #soin1 .block-design1, #wrapper #soin1 .block-design2, #wrapper #soin1 .block-design3, #wrapper #soin3 .block-design1, #wrapper #soin3 .block-design2, #wrapper #soin3 .block-design3 {
  background-color: color-mix(in srgb, var(--urban-block-color) var(--urban-block-color-alpha), transparent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
#wrapper #soin0 .block-design1, #wrapper #soin0 .block-design2, #wrapper #soin0 .block-design3, #wrapper #soin2 .block-design1, #wrapper #soin2 .block-design2, #wrapper #soin2 .block-design3, #wrapper #soin4 .block-design1, #wrapper #soin4 .block-design2, #wrapper #soin4 .block-design3 {
  background-color: color-mix(in srgb, var(--urban-block-color) calc(var(--urban-block-color-alpha) + 10%), transparent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
#wrapper .blkh1R.blk-2 .block-normaltxt .blkmargin {
  margin-bottom: 10px;
}
#wrapper .blkh1R .block-hugetxt .blkmargin {
  margin-right: 5px;
}
#wrapper .blkh1R .block-normaltxt .blkmargin {
  margin-top: 15px;
  margin-left: 5px;
  margin-bottom: 0px;
}
#wrapper .blkh1R .block-smallltxt .blkmargin {
  margin-top: 5px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #wrapper .blkh1R .block-hugetxt .blkmargin, #wrapper .blkh1R .block-normaltxt .blkmargin, #wrapper .blkh1R .block-smallltxt .blkmargin {
    margin: 10px;
  }
  #wrapper .blkh1R .block-smallltxt .blkmargin {
    margin-top: 0px;
  }
}
#wrapper .blkh1L.blk-2 .block-normaltxt .blkmargin {
  margin-bottom: 10px;
}
#wrapper .blkh1L .block-hugetxt .blkmargin {
  margin-left: 5px;
}
#wrapper .blkh1L .block-normaltxt .blkmargin {
  margin-top: 15px;
  margin-right: 5px;
  margin-bottom: 0px;
  margin-left: 25px;
}
#wrapper .blkh1L .block-smallltxt .blkmargin {
  margin-top: 5px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #wrapper .blkh1L .block-hugetxt .blkmargin, #wrapper .blkh1L .block-normaltxt .blkmargin, #wrapper .blkh1L .block-smallltxt .blkmargin {
    margin: 10px;
  }
  #wrapper .blkh1L .block-smallltxt .blkmargin {
    margin-top: 0px;
  }
}
#wrapper .block-hugetxt {
  font-family: "jost", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--urban-cat-color);
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #wrapper .block-hugetxt {
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 0.8px;
  }
}
#wrapper .block-normaltxt {
  font-size: 14px;
  font-family: "newsreader", serif;
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.2;
  color: var(--urban-cat-color);
}
#wrapper .block-normaltxt p {
  margin-block-start: 0px;
  margin-block-end: 10px;
}
#wrapper .block-normaltxt ul, #wrapper .block-normaltxt li {
  margin-block-start: 0px;
  margin-block-end: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #wrapper .block-normaltxt {
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.1;
    font-size: 19px;
  }
  #wrapper .block-normaltxt p {
    margin-block-start: 0px;
    margin-block-end: 12px;
  }
}
#wrapper .block-smallltxt {
  font-size: 13px;
  color: var(--urban-cat-color);
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #wrapper .block-smallltxt {
    font-size: 16px;
  }
}
#wrapper section {
  margin-left: var(--urban-wrapper-margin);
  margin-right: var(--urban-wrapper-margin);
}

#palnity {
  position: relative;
  z-index: 304;
}

#planitywl .css-osa93s {
  font-family: "jost", sans-serif;
  font-size: 48px;
  font-weight: 400;
  text-transform: uppercase;
  margin-block-start: 3em;
  margin-block-end: 0.5em;
  line-height: 1.2em;
  text-align: left;
  margin-left: 3%;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #planitywl .css-osa93s {
    text-align: left;
    margin-left: 10%;
    margin-block-start: 4em;
    margin-block-end: 0.5em;
    font-size: 48px !important;
  }
}

.gestcol {
  pointer-events: none;
  height: 180px;
  overflow: visible;
  position: relative;
}
.gestcol .mediacol {
  position: absolute;
  width: 100%;
  height: 250px;
  border-radius: 16px;
  overflow: hidden;
}
.gestcol .mediacol .mediacont {
  position: relative;
  width: 100%;
  height: 100%;
}
.gestcol .mediacol .mediacont .mediacontimg {
  position: relative;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.gestcol#geste1 .mediacont {
  width: 100%;
  height: auto;
  top: -290px;
  left: 0px;
}
.gestcol#geste2 .mediacont {
  width: 100%;
  height: auto;
  top: -200px;
  left: 0px;
}
.gestcol#geste3 .mediacont {
  width: 100%;
  height: auto;
  top: -170px;
  left: 0px;
}
.gestcol#geste4 .mediacont {
  width: 100%;
  height: auto;
  top: -235px;
  left: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .gestcol {
    height: 180px;
  }
  .gestcol.blk2-col {
    max-width: calc(var(--urban-block-design-width) * 2);
    min-width: calc(var(--urban-block-design-width) * 2);
  }
  .gestcol .mediacol {
    position: absolute;
    width: 295px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
  }
  .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .gestcol#geste1 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .gestcol#geste2 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .gestcol#geste3 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .gestcol#geste4 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
}
@media screen and (min-device-width: 720px) and (min-width: 1280px) {
  .gestcol {
    height: 180px;
  }
  .gestcol .mediacol {
    position: absolute;
    width: 100%;
    height: 250px;
    aspect-ratio: unset;
    border-radius: 0px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    overflow: hidden;
  }
  .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .gestcol#geste1 .mediacol {
    border-top-left-radius: 0px;
  }
  .gestcol#geste1 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -20px;
    left: 0px;
  }
  .gestcol#geste2 .mediacol {
    border-top-right-radius: 0px;
  }
  .gestcol#geste2 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -100px;
    left: 0px;
  }
  .gestcol#geste2.coll-3 .mediacol {
    border-top-right-radius: 50%;
  }
  .gestcol#geste3 .mediacol {
    border-top-left-radius: 0px;
  }
  .gestcol#geste3 .mediacol .mediacont {
    width: 120%;
    height: auto;
    top: -80px;
    left: -40px;
  }
  .gestcol#geste3.coll-3 .mediacol {
    border-top-left-radius: 50%;
    border-top-right-radius: 0%;
  }
  .gestcol#geste4 .mediacol {
    border-top-right-radius: 0px;
  }
  .gestcol#geste4 .mediacol .mediacont {
    width: 150%;
    height: auto;
    top: -220px;
    left: -90px;
  }
}

.filter {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.fond1 {
  background-image: url("../medias/bandeau-soins.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 140% auto;
  width: 100%;
  aspect-ratio: 1280/950;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .fond1 {
    aspect-ratio: 1280/650;
    background-position: center top;
    background-size: 100% auto;
    position: relative;
    z-index: 100;
  }
}

.bgtest {
  z-index: 201;
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background-image: url("/assets/img/logo-f-rose.svg"), url("/assets/img/logo-f-rose.svg");
  background-size: 200%;
  background-position: -3% -40px, 90% 155vh;
  background-repeat: no-repeat, no-repeat;
  opacity: 0.2;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .bgtest {
    width: 100%;
    max-width: 1280px;
    overflow: visible;
    background-position: -10% -40px, 90% 130vh;
    background-repeat: no-repeat, no-repeat;
  }
}

/*.bgtest2 {
   z-index: calc($zindexMain + 1);
   position: absolute;
   width: 100%;
   height: 100%;
   display: block;
   //background-image: url( '/assets/img/logo-s-b.svg' ), url( '/assets/img/logo-s-b.svg' );
   background-image: url( '/assets/img/logo-s-b.svg' );
   background-size: 200%;
   background-position:-3% -40px, 90% 155vh;
   background-repeat: no-repeat, no-repeat;
       @media screen and (min-device-width: $mobsize)  and (min-width: $mobsize){

       background-size: min(100% , calc( $maxw  ) );
       background-position: $test 150px;
       background-repeat: no-repeat, no-repeat;
   }
   opacity: 0.3;
}*/
.bgtest2 {
  display: none;
  z-index: 201;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/assets/img/logo-f-bleu-bg.svg"), url("/assets/img/logo-f-bleu-bg.svg");
  background-size: 200%;
  background-position: -3% -40px, 90% 155vh;
  background-repeat: no-repeat, no-repeat;
  opacity: 1;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .bgtest2 {
    display: unset;
    background-size: 50vw, 50vw;
    background-position: calc(-50vw + (100vw - 1280px) / 2) top, calc(100vw - (100vw - 1280px) / 2) top;
    background-repeat: no-repeat, no-repeat;
  }
}

@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .no-let-space {
    letter-spacing: normal !important;
  }
}

#soinHeader {
  position: relative;
  padding-bottom: 10px;
  padding-top: calc(var(--urban-HeaderH) + 15px);
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #soinHeader {
    padding-top: calc(var(--urban-HeaderH) + 35px);
  }
}

@media screen and (min-device-width: 720px) {
  .overzoom {
    transition: transform 0.5s;
    transform: scale(1);
  }
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .overzoom {
    transition: transform 0.5s;
    transform: scale(1);
  }
}

.mobilefocus {
  transform: scale(1);
}

.focus {
  transform: scale(1.05);
}

.nofocus {
  transform: scale(0.95);
}

#soinHeader, .myflex {
  z-index: 210 !important;
  /*  *{
        z-index: calc($zindexMain + 10)!important;
    }*/
}

.w-t1 {
  width: 100%;
}

.w-t1-mob {
  width: 100%;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .w-t1-mob {
    width: auto;
  }
}

.nobg {
  background-color: transparent !important;
}

.metro {
  border: 1px;
  font-size: 14px;
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  align-content: center;
  justify-content: center;
  margin-block-start: 4px;
  font-family: "medium", sans-serif;
  border-radius: 100%;
  margin-left: 10px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .metro {
    width: 20px;
    height: 20px;
    font-size: 14px;
    margin-left: 10px;
    margin-block-start: 4px;
  }
}

.m4 {
  background-color: #921c6b;
  color: white;
}

.m8 {
  background-color: #c786bb;
  color: black;
}

.m9 {
  background-color: #b7bd3c;
  color: black;
}

.m3 {
  background-color: #656218;
  color: white;
}

.wrap {
  width: 100%;
  margin: 0px;
}

.fixedtop {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 400;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .fixedtop {
    height: var(--urban-HeaderH);
    transition: all 0.5s;
    overflow: hidden;
  }
  .fixedtop.show {
    height: 230px;
  }
}

.logo-u {
  fill: var(--urban-color-logo-u);
}

#test {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 500px;
  --urban-color-logo-u:white;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 400;
  /* */
}

.prestations {
  --urban-color-logo-u:green;
  /* */
}

.contentwraper {
  width: 100%;
  max-width: var(--urban-MaxW);
  margin: auto;
  z-index: 201;
  position: relative;
}

.nomob {
  display: none;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .nomob {
    display: inherit;
  }
}

.footer-flex {
  margin-left: 30px;
  margin-right: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  row-gap: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .footer-flex {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

.coll-header {
  display: block;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .coll-header {
    z-index: 400;
    margin-left: 0px;
    margin-right: 10px;
    flex-basis: inherit;
  }
}

.coll-footer {
  display: block;
  flex-basis: 100%;
  z-index: 200;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .coll-footer {
    flex-grow: 1;
  }
}

.notbtn {
  padding-left: var(--urban-btn-padding-LR);
  padding-right: var(--urban-btn-padding-LR);
}

@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .col-offset2 {
    margin-left: 15%;
  }
}

@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .col-offset3 {
    margin-left: 80%;
  }
}

@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .col-resa {
    flex-grow: inherit;
    margin-left: 15%;
  }
}

.allwidthcontent {
  background-color: var(--urban-cat-bgcolor);
}
.allwidthcontent.color2, .allwidthcontent.mediasline {
  background-color: var(--urban-cat-bgcolor2);
}
@media (pointer: fine) {
  .allwidthcontent {
    position: relative;
    width: calc(100vw - var(--urban-VScrollBarW));
    left: calc((100% - (100vw - var(--urban-VScrollBarW))) / 2);
  }
}

.myflex {
  z-index: 401;
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--urban-myflex-justify-content);
  row-gap: 40px;
  -moz-column-gap: 20px;
       column-gap: 20px;
  padding-top: 40px;
  padding-bottom: 80px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .myflex {
    padding-top: 40px;
    padding-bottom: 80px;
    flex-wrap: wrap;
    display: flex;
  }
}

.coll-4 {
  z-index: 410;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  align-content: stretch;
  align-items: stretch;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .coll-4 {
    flex-grow: 1;
    flex-basis: 16%;
    max-width: var(--urban-block-design-width);
    min-width: var(--urban-block-design-width);
  }
}

.coll-3 {
  z-index: 410;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  align-content: stretch;
  align-items: stretch;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .coll-3 {
    flex-grow: 1;
    flex-basis: 33%;
    max-width: var(--urban-block-design-width);
    min-width: var(--urban-block-design-width);
  }
}

.bgtrans {
  background-color: rgba(255, 255, 255, 0.5);
}

.blkmargin {
  margin: 10px;
  display: block;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blkmargin {
    margin: 10px;
  }
}

.w80 {
  width: 100%;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .w80 {
    width: 95%;
    height: 100%;
  }
}

.oneblock {
  border-width: 1px;
  border-style: none;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  margin-block-end: 0px;
  margin-block-start: 0px;
  align-content: center;
  justify-content: center;
  text-align: center;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}
.oneblock.nobgcolor {
  background-color: rgba(255, 255, 255, 0);
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .oneblock {
    align-content: center;
    justify-content: center;
    text-align: center !important;
  }
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .oneblock.blk-3-col {
    flex-grow: 3 !important;
    flex-basis: 33% !important;
    min-width: 100%;
  }
}

.blockdispatch {
  display: grid;
  grid-template-columns: [first] 30% [line2] auto [line3] 30% [end];
  grid-template-rows: [row1-start] auto [row1-end] auto [last-line];
  min-height: var(--urban-block-design-min-height);
}
.blockdispatch.blk-2 {
  grid-template-rows: [row1-start] auto [row1-end];
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blockdispatch {
    grid-template-columns: [first] auto [end];
    grid-template-rows: [row1-start] var(--urban-block-rows-header-h) [row1-end] auto [row2-end] var(--urban-block-rows-footer-b) [last-line];
    min-height: var(--urban-block-design-min-height);
  }
  .blockdispatch.blk-2 {
    grid-template-rows: [row1-start] var(--urban-block-rows-header-h) [row1-end] auto [row2-end];
  }
  .blockdispatch.blk2-col {
    flex-grow: 2;
    grid-template-columns: [first] 30% [line2] auto [line3] 30% [end];
    grid-template-rows: [row1-start] auto [row1-end];
    max-width: calc(var(--urban-block-design-width) * 2);
    min-width: calc(var(--urban-block-design-width) * 2);
  }
}
.blockdispatch .block-design1 {
  border-width: 1px;
  border-style: none;
  display: flex;
  margin-block-end: 0px;
  margin-block-start: 0px;
  align-content: flex-start;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blockdispatch .block-design1 {
    padding: 0px;
    width: 100%;
    flex-grow: 1;
    align-content: center;
    justify-content: center;
    text-align: center !important;
    grid-column-start: first !important;
    grid-column-end: end !important;
    grid-row-start: row1-start !important;
    grid-row-end: row1-end !important;
    justify-self: stretch !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
}
.blockdispatch .block-design2 {
  border-width: 1px;
  border-style: none;
  display: flex;
  width: 100%;
  margin-block-end: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blockdispatch .block-design2 {
    padding: 0px;
    flex-basis: 100%;
    min-height: var(--urban-block-design2-min);
    grid-column-start: first !important;
    grid-column-end: end !important;
    grid-row-start: row1-end !important;
    grid-row-end: row2-end !important;
    justify-self: stretch !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blockdispatch.blk-2 .block-design2 {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
  }
}
.blockdispatch .block-design3 {
  border-width: 1px;
  border-style: none;
  display: flex;
  width: 100%;
  margin-block-end: 0px;
  justify-content: center;
  text-align: center;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blockdispatch .block-design3 {
    padding: 0px;
    flex-basis: 100%;
    flex-grow: 1;
    justify-content: center;
    align-content: center;
    text-align: center !important;
    padding-top: 0px;
    grid-column-start: first !important;
    grid-column-end: end !important;
    grid-row-start: row2-end !important;
    grid-row-end: last-line !important;
    justify-self: stretch !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
  }
  .blockdispatch .block-design3 .blkmargin {
    margin: auto;
  }
}
.blockdispatch.blkh1R .block-design1 {
  text-align: right;
  justify-content: flex-end;
  grid-column-start: first;
  grid-column-end: line2;
  grid-row-start: row1-start;
  grid-row-end: row1-end;
  justify-self: stretch;
  border-top-left-radius: 16px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blockdispatch.blkh1R .block-design1 {
    justify-content: center;
  }
}
.blockdispatch.blkh1R.blk-2 .block-design1 {
  border-top-left-radius: 16px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blockdispatch.blkh1R.blk2-col .block-design1 {
    text-align: right !important;
    grid-column-start: first !important;
    grid-column-end: line2 !important;
    grid-row-start: row1-start !important;
    grid-row-end: end !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 0px !important;
  }
}
.blockdispatch.blkh1L .block-design1 {
  text-align: left;
  grid-column-start: line3;
  grid-column-end: end;
  grid-row-start: row1-start;
  grid-row-end: row1-end;
  justify-self: stretch;
  border-top-left-radius: 0px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.blockdispatch.blkh1L.blk-2 .block-design1 {
  border-top-left-radius: 0px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 16px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blockdispatch.blkh1L.blk2-col .block-design1 {
    text-align: left;
    grid-column-start: line3 !important;
    grid-column-end: end !important;
    grid-row-start: row1-start !important;
    grid-row-end: end !important;
    justify-self: stretch !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 16px !important;
  }
}
.blockdispatch.blkh1R .block-design2 {
  text-align: left;
  grid-column-start: line2;
  grid-column-end: end;
  grid-row-start: row1-start;
  grid-row-end: row1-end;
  justify-self: stretch;
  border-top-left-radius: 0px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.blockdispatch.blkh1R.blk-2 .block-design2 {
  border-top-left-radius: 0px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 16px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blockdispatch.blkh1R.blk2-col .block-design2 {
    text-align: left;
    grid-column-start: line2 !important;
    grid-column-end: end !important;
    grid-row-start: row1-start !important;
    grid-row-end: end !important;
    justify-self: stretch !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 16px !important;
  }
}
.blockdispatch.blkh1L .block-design2 {
  text-align: left;
  justify-content: flex-start;
  grid-column-start: first;
  grid-column-end: line3;
  grid-row-start: row1-start;
  grid-row-end: row1-end;
  justify-self: stretch;
  border-top-left-radius: 16px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blockdispatch.blkh1L .block-design2 {
    text-align: left;
    justify-content: flex-start;
  }
}
.blockdispatch.blkh1L.blk-2 .block-design2 {
  border-top-left-radius: 16px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .blockdispatch.blkh1L.blk2-col .block-design2 {
    text-align: right;
    grid-column-start: first !important;
    grid-column-end: line3 !important;
    grid-row-start: row1-start !important;
    grid-row-end: end !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 0px !important;
  }
}
.blockdispatch.blkh1R .block-design3 {
  grid-column-start: first;
  grid-column-end: end;
  grid-row-start: row1-end;
  grid-row-end: last-line;
  justify-self: stretch;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.blockdispatch.blkh1L .block-design3 {
  grid-column-start: first;
  grid-column-end: end;
  grid-row-start: row1-end;
  grid-row-end: last-line;
  justify-self: stretch;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.btn {
  word-break: normal !important;
  color: var(--urban-btn-color);
  background-color: var(--urban-btn-bgcolor);
  text-decoration: none;
  border-radius: 16px;
  border-width: 1px;
  border-style: solid;
  transition: all 0.25s;
  border-color: color-mix(in srgb, var(--urban-btn-bordercolor) var(--urban-btn-bordercolor-alpha), transparent);
  padding-left: var(--urban-btn-padding-LR);
  padding-right: var(--urban-btn-padding-LR);
  padding-top: var(--urban-btn-padding-TB);
  padding-bottom: var(--urban-btn-padding-TB);
  box-sizing: border-box;
  margin-block-start: 4px;
  margin-block-end: 1px;
}
.btn:hover {
  background-color: var(--urban-btn-bgcolor-hover);
  color: var(--urban-btn-color-hover);
  border-color: color-mix(in srgb, var(--urban-btn-bordercolor-hover) var(--urban-btn-bordercolor-alpha-hover), transparent);
  border-style: solid;
}

.btnfake {
  word-break: normal !important;
  color: var(--urban-btn-color);
  background-color: var(--urban-btn-bgcolor);
  text-decoration: none;
  border-radius: 16px;
  border-width: 1px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--urban-btn-bordercolor) var(--urban-btn-bordercolor-alpha), transparent);
  padding-left: var(--urban-btn-padding-LR);
  padding-right: var(--urban-btn-padding-LR);
  padding-top: var(--urban-btn-padding-TB);
  padding-bottom: var(--urban-btn-padding-TB);
  box-sizing: border-box;
  margin-block-start: 4px;
  margin-block-end: 1px;
}

.btnprestation {
  position: relative;
  z-index: 210 !important;
  --urban-btn-bgcolor:none;
  --urban-btn-color:var(--urban-cat-color);
  --urban-btn-bordercolor:var(--urban-cat-color);
  --urban-btn-bordercolor-alpha:100%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.btnprestation:hover {
  --urban-btn-bgcolor-hover:var(--urban-extra-color);
  --urban-btn-color-hover:white;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .btnprestation {
    min-width: 100%;
    min-height: 85%;
  }
}

.btnres {
  min-width: 0px;
  min-height: 0px;
  background-color: rgba(255, 255, 255, 0.5);
}

.bthnav {
  --urban-btn-bgcolor:none;
  --urban-btn-color:white;
}
.bthnav:hover {
  --urban-btn-bgcolor-hover:none;
  --urban-btn-color-hover:white;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .bthnav {
    --urban-btn-bgcolor:var(--urban-header-color);
    --urban-btn-color:white;
  }
  .bthnav:hover {
    --urban-btn-bgcolor-hover:var(--urban-header-color);
    --urban-btn-color-hover:white;
  }
}

.neg {
  --urban-btn-bgcolor:white;
  --urban-btn-color:var(--urban-header-color);
}
.neg:hover {
  --urban-btn-bgcolor-hover:var(--urban-header-color);
  --urban-btn-color-hover:white;
}

.mediasline {
  font-size: 0px;
  display: flex;
  flex-wrap: nowrap;
}
.mediasline .circle {
  border-radius: 50%;
  aspect-ratio: 1/1;
}
.mediasline .circle .mediacontimg {
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.mediasline .mediarow {
  display: flex;
  flex-wrap: wrap;
  min-width: 100vw;
  position: relative;
  left: 0vw;
  transform-origin: top left;
}
.mediasline .mediarow .mediacol {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  min-width: 100vw;
  max-height: 15vh;
  overflow: visible;
  justify-content: space-around;
}
.mediasline .mediarow .mediacol .mediacont {
  overflow: hidden;
  width: 45vw;
  position: relative;
  box-sizing: border-box;
}
.mediasline .mediarow .mediacol .mediacont .mediacontimg {
  position: absolute;
  position: relative;
  width: 100%;
  height: auto;
}
.mediasline .scenario1 .item1 .item1 {
  z-index: 213;
  width: 25vw;
  height: 55vw;
}
.mediasline .scenario1 .item1 .item2 {
  z-index: 215;
  width: 30vw;
  height: 30vw;
}
.mediasline .scenario1 .item2 .item1 {
  z-index: 212;
  width: 90vw;
  min-width: 90vw;
  height: 60vh;
}
.mediasline .scenario1 .item2 .item2 {
  z-index: 214;
  width: 15vw;
  width: 25vw;
}
.mediasline .scenario1 .item3 .item1 {
  z-index: 215;
  width: 30vw;
  height: 30vw;
}
.mediasline .scenario1 .item3 .item2 {
  z-index: 212;
  width: 25vw;
  height: 55vw;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .mediasline {
    display: flex;
  }
  .mediasline .mediarow {
    margin-right: 0;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    left: unset;
    min-width: unset;
  }
  .mediasline .mediarow .mediacol {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    max-width: 100%;
    position: relative;
    width: 100%;
    display: block;
    height: 200px;
    max-height: unset;
  }
  .mediasline .mediarow .mediacol .mediacont {
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    position: absolute;
    z-index: 500;
    display: block;
  }
  .mediasline .scenario1 .item1 .item1 {
    z-index: 210;
    width: 250px;
    left: 2vw;
  }
  .mediasline .scenario1 .item1 .item2 {
    z-index: 215;
    width: 150px;
    right: 1vw;
  }
  .mediasline .scenario1 .item2 .item1 {
    z-index: 212;
    width: 250px;
    left: 1vw;
  }
  .mediasline .scenario1 .item2 .item2 {
    z-index: 213;
    width: 150px;
    right: 1vw;
  }
  .mediasline .scenario1 .item3 .item1 {
    z-index: 215;
    width: 150px;
    left: 1vw;
  }
  .mediasline .scenario1 .item3 .item2 {
    z-index: 210;
    width: 250px;
    right: 2vw;
  }
}

.home .m-c-1-1 {
  top: -130px;
  left: -40px;
  border-bottom-left-radius: 90%;
}
.home .m-c-1-1 .mediacontimg {
  height: 130% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  width: 130% !important;
  /*  width: 130% !important;
   left: -40px;
   top: -50px;*/
}
.home .m-c-1-2 {
  top: -120px;
  right: 38px;
}
.home .m-c-1-2 .mediacontimg {
  -o-object-fit: contain !important;
     object-fit: contain !important;
  width: 145% !important;
  left: -22px;
  top: -40px;
}
.home .m-c-2-1 {
  top: -60px;
  border-radius: 16px;
  left: 5vw;
  top: -150px;
}
.home .m-c-2-1 .mediacontimg {
  width: 130% !important;
  left: -90px;
  top: -90px;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  /*  object-fit: contain !important;
    width: 130% !important;
    left: -40px;
    top: -50px;*/
}
.home .m-c-2-2 {
  top: 220px;
  border-radius: 16px;
}
.home .m-c-2-2 .mediacontimg {
  display: none;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  width: 140% !important;
  left: -15px;
  top: 0;
}
.home .m-c-3-1 {
  top: 200px;
  left: 15vw;
}
.home .m-c-3-1 .mediacontimg {
  -o-object-fit: contain !important;
     object-fit: contain !important;
  width: 135% !important;
  left: -20px;
  top: -30px;
}
.home .m-c-3-2 {
  top: 40px;
  right: -40px;
  border-bottom-right-radius: 90%;
}
.home .m-c-3-2 .mediacontimg {
  height: 130% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  width: 130% !important;
  /*   left: -40px;
  top: -50px;*/
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .home .m-c-1-1 {
    width: 300px !important;
    height: 450px !important;
    top: -40px;
    border-bottom-left-radius: 90%;
  }
  .home .m-c-1-1 .mediacontimg {
    height: 100% !important;
    width: unset !important;
    /*  object-fit: contain !important;
      width: 130% !important;
      left: -40px;
      top: -50px;*/
  }
  .home .m-c-1-2 {
    top: 80px;
    width: 200px !important;
    height: 200px !important;
  }
  .home .m-c-1-2 .mediacontimg {
    -o-object-fit: contain !important;
       object-fit: contain !important;
    width: 135% !important;
    left: -35px;
    top: -70px;
  }
  .home .m-c-2-1 {
    width: auto !important;
    height: 500px !important;
    max-width: unset !important;
    min-width: 400px !important;
    top: -60px;
    border-radius: 16px;
  }
  .home .m-c-2-1 .mediacontimg {
    width: 100% !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    /*  object-fit: contain !important;
      width: 130% !important;
      left: -40px;
      top: -50px;*/
  }
  .home .m-c-2-2 {
    top: 220px;
    width: calc 150px !important;
    height: calc 225px !important;
    border-radius: 16px;
  }
  .home .m-c-2-2 .mediacontimg {
    -o-object-fit: contain !important;
       object-fit: contain !important;
    width: 120% !important;
    left: -15px;
    top: 0;
  }
  .home .m-c-3-1 {
    top: -130px;
    width: 250px !important;
    height: 250px !important;
  }
  .home .m-c-3-1 .mediacontimg {
    -o-object-fit: contain !important;
       object-fit: contain !important;
    width: 130% !important;
    left: -40px;
    top: -60px;
  }
  .home .m-c-3-2 {
    width: 300px !important;
    height: 450px !important;
    top: -40px;
    border-bottom-right-radius: 90%;
  }
  .home .m-c-3-2 .mediacontimg {
    height: 100% !important;
    left: -40px;
    /*  object-fit: contain !important;
      width: 130% !important;
      left: -40px;
      top: -50px;*/
  }
}

#soin0 {
  order: 0;
}

#geste1 {
  order: 1;
}

#soin1 {
  order: 2;
}

#geste2 {
  order: 3;
}

#soin2 {
  order: 4;
}

#geste3 {
  order: 5;
}

#soin3 {
  order: 6;
}

#geste4 {
  order: 7;
}

#soin4 {
  order: 8;
}

#soinrdv {
  order: 9;
}

@media screen and (min-device-width: 720px) and (min-width: 1280px) {
  #soin0 {
    order: 0;
  }
  #geste1 {
    order: 1;
  }
  #soin1 {
    order: 5;
  }
  #geste2 {
    order: 2;
  }
  #soin2 {
    order: 6;
  }
  #geste3 {
    order: 3;
  }
  #soin3 {
    order: 7;
  }
  #geste4 {
    order: 4;
  }
  #soin4 {
    order: 8;
  }
  #soinrdv {
    order: 9;
  }
}
#soinHeader {
  position: relative;
  z-index: 120;
  padding-top: 0px;
}
#soinHeader h1 {
  position: relative;
  z-index: 120;
  margin-block-start: -60px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  #soinHeader {
    padding-top: 0px;
  }
  #soinHeader h1 {
    margin-block-start: -140px;
  }
}

.home .fond1 {
  background-image: url("../medias/bandeau-epilation-new.png");
}
.home .bgtest {
  background-image: url("/assets/img/logo-f-bleu-bg.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .home .bgtest {
    background-position: center 180px;
  }
}
.home #soinDesc2 {
  margin-block-start: 250px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .home #soinDesc2 {
    margin-block-start: 250px;
  }
}
.home #soinHeader {
  position: relative;
  z-index: 120;
  padding-top: 0px;
}
.home #soinHeader h1 {
  position: relative;
  z-index: 120;
  font-size: 32px;
  margin-block-start: -50px;
}
.home #soinHeader h2 {
  font-size: 20px !important;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .home #soinHeader {
    padding-top: 0px;
  }
  .home #soinHeader h1 {
    margin-block-start: -180px;
    font-size: 48px;
  }
  .home #soinHeader h2 {
    font-size: 36px !important;
  }
}
.home .myflex {
  padding-top: 15px !important;
  --urban-block-rows-footer-b:70px;
}
.home .myflex #soin0 h1 {
  margin-block-end: 0px !important;
}
.home .mediasline {
  margin-block-start: 120px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .home .mediasline {
    margin-block-start: 120px;
  }
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .home {
    --urban-block-rows-header-h: 80px;
  }
  .home #wrapper .block-hugetxt {
    align-items: center;
  }
}
.home .gestcol {
  /* pointer-events: none;
   //height: 80px;
   overflow: visible;
   position: relative;
   .mediacol{
       position: absolute;
       //width: 100%;
       //height: 150px;
       //aspect-ratio: 1/1;
       border-radius: 16px;
       overflow: hidden;
       .mediacont{
           position: relative;
           width: 100%;
           height: 100%;
           .mediacontimg{
               position: relative;
               width: 100%;
               height: 100%;
               object-fit: cover;
           }
        }
   }*/
}
.home .gestcol#geste1 .mediacont {
  width: 100%;
  height: auto;
  top: -50px;
  left: 0px;
}
.home .gestcol#geste2 .mediacont {
  width: 100%;
  height: auto;
  top: -70px;
  left: 0px;
}
.home .gestcol#geste3 .mediacont {
  width: 100%;
  height: auto;
  top: -40px;
  left: 0px;
}
.home .gestcol#geste4 .mediacont {
  width: 100%;
  height: auto;
  top: -35px;
  left: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .home .gestcol {
    height: 180px;
    justify-content: center;
  }
  .home .gestcol .mediacol {
    position: absolute;
    width: 200px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
  }
  .home .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .home .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .home .gestcol#geste1 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .home .gestcol#geste2 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .home .gestcol#geste3 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .home .gestcol#geste4 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
}
@media screen and (min-device-width: 720px) and (min-width: 1280px) {
  .home .gestcol {
    height: 180px;
  }
  .home .gestcol .mediacol {
    position: absolute;
    width: 100%;
    height: 250px;
    aspect-ratio: unset;
    border-radius: 0px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    overflow: hidden;
  }
  .home .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .home .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .home .gestcol#geste1 .mediacol {
    border-top-left-radius: 0px;
  }
  .home .gestcol#geste1 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -20px;
    left: 0px;
  }
  .home .gestcol#geste2 .mediacol {
    border-top-right-radius: 0px;
  }
  .home .gestcol#geste2 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -20px;
    left: 0px;
  }
  .home .gestcol#geste3 .mediacol {
    border-top-left-radius: 0px;
  }
  .home .gestcol#geste3 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -20px;
    left: 0px;
  }
  .home .gestcol#geste4 .mediacol {
    border-top-right-radius: 0px;
  }
  .home .gestcol#geste4 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -20px;
    left: 0px;
  }
}

.notre-institut .bgtest2 {
  display: block;
  background-image: url("../medias/salon-canape-reverse-crop.jpg");
  background-repeat: no-repeat;
  background-size: 170% auto;
  background-position: left top;
  opacity: 0.8;
  z-index: 0;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .notre-institut .bgtest2 {
    background-size: min(150%, 1920px);
    background-position: center -80px;
    opacity: 0.8;
  }
}
.notre-institut .bgtest {
  background-image: url("../medias/salon-canape-reverse-crop.jpg");
  background-repeat: no-repeat;
  background-size: 170% auto;
  background-position: left top;
  opacity: 0.8;
  display: none;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .notre-institut .bgtest {
    background-position: left top;
    background-size: 120% auto;
    display: none;
  }
}
.notre-institut #wrapper {
  min-height: 0px;
}
.notre-institut #wrapper h1 {
  text-align: center;
  margin: 0px;
  padding-top: calc(var(--urban-HeaderH) + 15px);
  padding-bottom: 15px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .notre-institut #wrapper h1 {
    padding-top: calc(var(--urban-HeaderH) + 35px);
  }
}
.notre-institut #wrapper #soinHeader {
  min-height: 25vh;
  -webkit-backdrop-filter: unset;
          backdrop-filter: unset;
  padding-top: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .notre-institut #wrapper #soinHeader {
    padding-top: 0px;
    min-height: 100vh;
  }
}
.notre-institut #wrapper #intituts {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  row-gap: 20px;
  -moz-column-gap: 20px;
       column-gap: 20px;
  min-width: 90%;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .notre-institut #wrapper #intituts {
    min-width: 50%;
    flex-wrap: nowrap;
    flex-direction: row;
  }
}
.notre-institut #wrapper .myflex {
  padding-top: 0px;
  row-gap: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .notre-institut #wrapper .myflex {
    flex-wrap: nowrap;
  }
}
.notre-institut #wrapper #iacces {
  /*flex-grow: 1;
  flex-basis: 16%;
  text-align: center;
  @media screen and (min-device-width: $mobsize)  and (min-width: $mobsize){
      flex-grow: 2;
      flex-wrap: nowrap;
  }*/
  padding-top: 20px;
  padding-bottom: 30px;
  text-align: center;
  margin: auto;
  max-width: 90%;
}
.notre-institut #wrapper #iacces p {
  margin: 0px;
  margin-block-start: 0px;
  margin-block-end: 0px !important;
}
.notre-institut #wrapper #iacces p.smalltxt {
  display: flex;
  font-size: 15px;
  align-items: center;
  align-content: center;
  justify-content: center;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .notre-institut #wrapper #iacces {
    padding-top: 30px;
    max-width: 50%;
    text-align: left;
  }
  .notre-institut #wrapper #iacces p.smalltxt {
    display: inline-flex;
    font-size: 32px;
  }
}
.notre-institut #wrapper #shop {
  z-index: 210;
  margin-block-start: 10px;
  flex-grow: 1;
  overflow: hidden;
}
.notre-institut #wrapper #shop .shopimg {
  width: 100%;
  height: 100%;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .notre-institut #wrapper #shop {
    margin-block-start: 30px;
    max-width: 350px;
    max-height: 350px;
    flex-grow: unset;
  }
}
.notre-institut #wrapper #iadresse {
  z-index: 210;
  margin-block-start: 10px;
  flex-grow: 1;
}
.notre-institut #wrapper #iadresse p {
  font-size: 16px;
  margin-block-start: 12px;
  margin-block-end: 12px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .notre-institut #wrapper #iadresse {
    margin-block-start: 30px;
    min-width: 350px;
    flex-grow: unset;
  }
  .notre-institut #wrapper #iadresse p {
    font-size: 20px;
    margin-left: 10%;
    margin-right: 10%;
    margin-block-start: 20px;
    margin-block-end: 20px;
  }
}
.notre-institut #wrapper a {
  text-decoration: none;
  color: var(--urban-extra-color);
  /* &:visited {
       color: var(--urban-cat-color);
   }
   &:active{
       color: var(--urban-cat-color);
   } */
}
.notre-institut #wrapper a:hover {
  color: black;
}
.notre-institut #wrapper .oneblock {
  display: block;
}
.prestations {
  --urban-block-rows-header-h: 80px;
  --urban-block-rows-footer-b:70px;
}
.prestations .fond1 {
  background-image: url("../medias/bandeau-prestation.png");
}
.prestations .block-design2 {
  --urban-block-design2-minH:0px;
  align-items: flex-start;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .prestations {
    --urban-block-design-width:295px;
  }
  .prestations #wrapper .block-hugetxt {
    align-items: center;
  }
}
.prestations .gestcol {
  /* pointer-events: none;
   //height: 80px;
   overflow: visible;
   position: relative;
   .mediacol{
       position: absolute;
       //width: 100%;
       //height: 150px;
       //aspect-ratio: 1/1;
       border-radius: 16px;
       overflow: hidden;
       .mediacont{
           position: relative;
           width: 100%;
           height: 100%;
           .mediacontimg{
               position: relative;
               width: 100%;
               height: 100%;
               object-fit: cover;
           }
        }
   }*/
}
.prestations .gestcol#geste1 .mediacont {
  width: 100%;
  height: auto;
  top: -50px;
  left: 0px;
}
.prestations .gestcol#geste2 .mediacont {
  width: 100%;
  height: auto;
  top: -70px;
  left: 0px;
}
.prestations .gestcol#geste3 .mediacont {
  width: 100%;
  height: auto;
  top: -40px;
  left: 0px;
}
.prestations .gestcol#geste4 .mediacont {
  width: 100%;
  height: auto;
  top: -35px;
  left: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .prestations .gestcol {
    height: 180px;
    justify-content: center;
  }
  .prestations .gestcol .mediacol {
    position: absolute;
    width: 200px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
  }
  .prestations .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .prestations .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .prestations .gestcol#geste1 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .prestations .gestcol#geste2 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .prestations .gestcol#geste3 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .prestations .gestcol#geste4 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
}
@media screen and (min-device-width: 720px) and (min-width: 1280px) {
  .prestations .gestcol {
    height: 180px;
  }
  .prestations .gestcol .mediacol {
    position: absolute;
    width: 100%;
    height: 250px;
    aspect-ratio: unset;
    border-radius: 0px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    overflow: hidden;
  }
  .prestations .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .prestations .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .prestations .gestcol#geste1 .mediacol {
    border-top-left-radius: 0px;
  }
  .prestations .gestcol#geste1 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -20px;
    left: 0px;
  }
  .prestations .gestcol#geste2 .mediacol {
    border-top-right-radius: 0px;
  }
  .prestations .gestcol#geste2 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -20px;
    left: 0px;
  }
  .prestations .gestcol#geste3 .mediacol {
    border-top-left-radius: 0px;
  }
  .prestations .gestcol#geste3 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -20px;
    left: 0px;
  }
  .prestations .gestcol#geste4 .mediacol {
    border-top-right-radius: 0px;
  }
  .prestations .gestcol#geste4 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -20px;
    left: 0px;
  }
}

.epilation-a-la-cire .fond1 {
  background-image: url("../medias/bandeau-epilation.png");
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .epilation-a-la-cire {
    --urban-block-design-width:395px;
    --urban-block-design-min-height:0px;
  }
}
.epilation-a-la-cire .gestcol#geste1 .mediacont {
  width: 100%;
  height: auto;
  top: -50px;
  left: 0px;
}
.epilation-a-la-cire .gestcol#geste2 .mediacont {
  width: 100%;
  height: auto;
  top: -70px;
  left: 0px;
}
.epilation-a-la-cire .gestcol#geste3 .mediacont {
  width: 100%;
  height: auto;
  top: -70px;
  left: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .epilation-a-la-cire .gestcol {
    height: 180px;
    justify-content: center;
  }
  .epilation-a-la-cire .gestcol .mediacol {
    position: absolute;
    width: 200px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
  }
  .epilation-a-la-cire .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .epilation-a-la-cire .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .epilation-a-la-cire .gestcol#geste1 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .epilation-a-la-cire .gestcol#geste2 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .epilation-a-la-cire .gestcol#geste3 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
}
@media screen and (min-device-width: 720px) and (min-width: 1280px) {
  .epilation-a-la-cire .gestcol {
    height: 180px;
  }
  .epilation-a-la-cire .gestcol .mediacol {
    position: absolute;
    width: 100%;
    height: 250px;
    aspect-ratio: unset;
    border-radius: 0px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    overflow: hidden;
  }
  .epilation-a-la-cire .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .epilation-a-la-cire .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .epilation-a-la-cire .gestcol#geste1 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -50px;
    left: 0px;
  }
  .epilation-a-la-cire .gestcol#geste2 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -70px;
    left: 0px;
  }
  .epilation-a-la-cire .gestcol#geste3 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -70px;
    left: 0px;
  }
}

.manucure-soins-des-pieds, .manucure-pedicure {
  --urban-block-design-min-height:100px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .manucure-soins-des-pieds, .manucure-pedicure {
    --urban-block-design-width:395px;
    --urban-block-design-min-height:0px;
  }
}
.manucure-soins-des-pieds .blockdispatch, .manucure-pedicure .blockdispatch {
  --urban-block-rows-footer-b:50px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .manucure-soins-des-pieds .blockdispatch, .manucure-pedicure .blockdispatch {
    --urban-block-rows-footer-b:50px;
  }
}
.manucure-soins-des-pieds .fond1, .manucure-pedicure .fond1 {
  background-image: url("../medias/bandeau-manucure.png");
}
.manucure-soins-des-pieds .gestcol, .manucure-pedicure .gestcol {
  /* @media screen and (min-device-width: $mobsize)  and (min-width: $mobsize){
       height: 180px;
       justify-content: center;
       .mediacol{
           position: absolute;
           width: 200px;
           height: 200px;
           aspect-ratio: 1/1;
           border-radius: 50%;
           overflow: hidden;
           .mediacont{
               position: relative;
               width: 100%;
               height: 100%;
               .mediacontimg{
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
               }
            }
       }
       &#geste1{
           .mediacol{
               .mediacont{
                   width:100%;
                   height:auto;
                   top:0px;
                   left:0px;
               }
           }
       }

   }*/
}
.manucure-soins-des-pieds .gestcol#geste1 .mediacont, .manucure-pedicure .gestcol#geste1 .mediacont {
  width: 100%;
  height: auto;
  top: -20px;
  left: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .manucure-soins-des-pieds .gestcol, .manucure-pedicure .gestcol {
    height: 180px;
  }
  .manucure-soins-des-pieds .gestcol .mediacol, .manucure-pedicure .gestcol .mediacol {
    position: absolute;
    width: 100%;
    height: 200px;
    aspect-ratio: unset;
    /* border-radius: 0px;
     border-top-left-radius: 50%;
     border-top-right-radius: 50%;*/
    overflow: hidden;
  }
  .manucure-soins-des-pieds .gestcol .mediacol .mediacont, .manucure-pedicure .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .manucure-soins-des-pieds .gestcol .mediacol .mediacont .mediacontimg, .manucure-pedicure .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .manucure-soins-des-pieds .gestcol#geste1 .mediacol, .manucure-pedicure .gestcol#geste1 .mediacol {
    border-radius: 16px;
  }
  .manucure-soins-des-pieds .gestcol#geste1 .mediacol .mediacont, .manucure-pedicure .gestcol#geste1 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -50px;
    left: 0px;
  }
}

.soins-du-visage .fond1 {
  background-image: url("../medias/bandeau-soins.png");
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .soins-du-visage {
    --urban-block-design-width:380px;
  }
}
.soins-du-visage .blockdispatch {
  --urban-block-rows-footer-b:50px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .soins-du-visage .blockdispatch {
    --urban-block-rows-footer-b:50px;
  }
}
.soins-du-visage .gestcol#geste1 .mediacont {
  width: 100%;
  height: auto;
  top: -70px;
  left: 0px;
}
.soins-du-visage .gestcol#geste2 .mediacont {
  width: 100%;
  height: auto;
  top: -70px;
  left: 0px;
}
.soins-du-visage .gestcol#geste3 .mediacont {
  width: 100%;
  height: auto;
  top: -70px;
  left: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .soins-du-visage .gestcol {
    height: 180px;
    justify-content: center;
  }
  .soins-du-visage .gestcol .mediacol {
    position: absolute;
    width: 200px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
  }
  .soins-du-visage .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .soins-du-visage .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .soins-du-visage .gestcol#geste1 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .soins-du-visage .gestcol#geste2 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .soins-du-visage .gestcol#geste3 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
}
@media screen and (min-device-width: 720px) and (min-width: 1280px) {
  .soins-du-visage .gestcol {
    height: 180px;
  }
  .soins-du-visage .gestcol .mediacol {
    position: absolute;
    width: 100%;
    height: 250px;
    aspect-ratio: unset;
    border-radius: 0px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    overflow: hidden;
  }
  .soins-du-visage .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .soins-du-visage .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .soins-du-visage .gestcol#geste1 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -70px;
    left: 0px;
  }
  .soins-du-visage .gestcol#geste2 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -70px;
    left: 0px;
  }
  .soins-du-visage .gestcol#geste3 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -70px;
    left: 0px;
  }
}

.massage .fond1 {
  background-image: url("../medias/bandeau-massage.png");
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .massage {
    --urban-block-rows-header-h:80px;
  }
  .massage h1 {
    margin-block-start: -180px;
  }
  .massage #soin3 .block-design1, .massage #soin3 .block-design2 {
    align-items: center;
  }
}
.massage .blockdispatch {
  --urban-block-rows-footer-b:50px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .massage .blockdispatch {
    --urban-block-rows-footer-b:50px;
  }
}
.massage .gestcol#geste1 .mediacont {
  width: 100%;
  height: auto;
  top: -35px;
  left: 0px;
}
.massage .gestcol#geste2 .mediacont {
  width: 100%;
  height: auto;
  top: -220px;
  left: 0px;
}
.massage .gestcol#geste3 .mediacont {
  width: 100%;
  height: auto;
  top: -20px;
  left: 0px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .massage .gestcol {
    height: 180px;
    justify-content: center;
  }
  .massage .gestcol .mediacol {
    position: absolute;
    width: 200px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
  }
  .massage .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .massage .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .massage .gestcol#geste1 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .massage .gestcol#geste2 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .massage .gestcol#geste3 .mediacont {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
}
@media screen and (min-device-width: 720px) and (min-width: 1280px) {
  .massage .gestcol {
    height: 180px;
  }
  .massage .gestcol .mediacol {
    position: absolute;
    width: 100%;
    height: 250px;
    aspect-ratio: unset;
    border-radius: 0px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    overflow: hidden;
  }
  .massage .gestcol .mediacol .mediacont {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .massage .gestcol .mediacol .mediacont .mediacontimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .massage .gestcol#geste1 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -20px;
    left: 0px;
  }
  .massage .gestcol#geste2 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -120px;
    left: 0px;
  }
  .massage .gestcol#geste3 .mediacol {
    border-top-right-radius: 150px;
  }
  .massage .gestcol#geste3 .mediacol .mediacont {
    width: 100%;
    height: auto;
    top: -100px;
    left: 0px;
  }
}

.planity #planity {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.planity #planity .planity-widget-nav {
  display: none !important;
}
.planity #planity .css-8xz9l5 {
  min-height: 80vh !important;
}

.choosecolor .bgtest {
  display: none !important;
}
.choosecolor .blockdispatch {
  --urban-block-rows-footer-b:50px;
}
@media screen and (min-device-width: 720px) and (min-width: 720px) {
  .choosecolor .blockdispatch {
    --urban-block-rows-footer-b:50px;
  }
}
.choosecolor .block-design2 a {
  text-decoration: none;
  color: var(--urban-extra-color);
  /* &:visited {
       color: var(--urban-cat-color);
   }
   &:active{
       color: var(--urban-cat-color);
   } */
}
.choosecolor .block-design2 a:hover {
  color: black;
}

html {
  min-height: 100%; /* make sure it is at least as tall as the viewport */
  position: relative;
}

body {
  margin: 0px;
  height: 100%;
  background-color: var(--urban-body-color);
  font-family: "regular", sans-serif;
  font-size: var(--unrban-Ftsize-std);
  --urban-bodyW:calc(100vw - 100%);
  font-size: 100%;
  word-wrap: normal;
}
@media screen and (min-device-width: 720px) {
  body {
    overflow: overlay;
    margin: 0px;
    width: 100%;
    font-size: 100%;
  }
}

h1, h2, h3, h4, h5 {
  margin-block-start: 5px;
  margin-block-end: 2px;
}

p {
  margin-block-end: 0px;
  margin-block-start: 0px;
}

ul {
  margin-block-end: 0.625em;
  margin-block-start: 0px;
  padding-inline-start: 0px;
}
ul li {
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin-block-start: 0.4375em;
  margin-block-end: 0.4375em;
}

#servicewraper {
  display: none;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100vh;
  z-index: 600;
  align-items: center;
  justify-content: center;
}
#servicewraper.on {
  display: flex;
}
#servicewraper .sevicewraper {
  margin: auto;
  height: 150px;
  width: 150px;
  background-color: red;
}

/*# sourceMappingURL=main.css.map */