/**********************/
/**      Common      **/
/**********************/

.mobile input,
.mobile textarea,
.mobile select {
  font-size: 16px;
}

.mobile .bg_desktop {
	display: none;
}

.mobile .bg_fullHD {
	display: none;
}

.mobile .mobileCenter
{
  text-align:center;
}

.mobile #header h1 {
	padding-top: 150px;
	text-align: center;
}

.mobile #header p {
	font-size: 34px;
	text-align: center;
    margin: 8px 2px 26px 2px;
}

.mobile #header button {
	margin-top: 45px;
}

.mobile .block {
    width: 800px;
    padding: 35px 10px;
}

.mobile #frontContainer {
    width: 800px;
}

.mobile #backContainer {
    z-index: 3;
    width: 800px;
}

/**********************/
/****** ACCUEIL ******/
/**********************/

.mobile #pitch {
	display: none;
}

.mobile #pitchMobile .pitchName {
	line-height: 50px;
}

.mobile #pitchMobile.pitchSection {
	flex-direction: column;
	padding-top: 155px;
}

.mobile #pitchMobile .profession {
	font-size: 28px;
}

.mobile #pitchMobile.pitchSection .imgContainer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile #pitchMobile.pitchSection .imgContainer div:first-child {
	text-align: center;
}

.mobile #pitchMobile.pitchSection .imgContainer img{
	width: 390px !important;
	margin-top: -60px;
}

.mobile #pitchMobile h2 {
	max-width: none;
}

.mobile #pitchMobile .description {
	text-align: center;
	font-size: 29px;
}
/*** Metier ***/

.mobile #metier {
  flex-direction: column;
}

.mobile #metier .textMetier {
  max-width: 760px; 
	margin: 20px;
}

.mobile #metier .metierImage {
  width: 800px;
}
.mobile #metier .textMetier p {
	line-height: 40px;
}

/*** Prestations ***/

.mobile #prestations .thumbnailContainer{
	flex-wrap: wrap;
  gap: 25px;
}

.mobile #prestations .thumbnail{
	width: 375px;
	height: 500px
}

.mobile #prestations .thumbnail:hover {
	transform: scale(1.05);
}
.mobile #prestations .thumbnail span{
	font-size: 28px;
	line-height: 26px;
}
/**** Lieu ********/

.mobile #lieu .mapContainer {
	flex-direction: column;
	align-items: center;
	margin-top: 0px;
}

.mobile #lieu h2 {
	margin-inline: 20px;
}

.mobile #lieu .lieuBox {
	margin: 5px;
}

.mobile #lieu .mapContainer p {
	line-height: 43px;
}
/************************/
/*******  Modal  ********/
/************************/

.mobile .modal-body {
  padding: 4px;
}

.mobile #modalContainer .modal {
	transform-origin: 0px 0px;
}

.mobile #appointementForm h5 {
  margin: 5px;
}
.mobile #appointementForm #prestation {
	margin-top: 0px !important;
}

.mobile #appointementForm .first {
	flex-direction: column;
}
.mobile #appointementForm p {
  text-align: center;
  margin: 20px -9px;
}

.mobile .checkboxAvailability {
	width: 128px;
}

.mobile input.checkboxAvailability {
	width: 120px;
	height: 30px;
	margin: 4px;
}

.mobile input.checkboxAvailability::before {
	border-radius: 10px;
	width: 120px;
	height: 32px;
}



/******************************/
/**       Tarification       **/
/******************************/

#tarif.mobile #header {
	margin-top: 160px;
}

#tarif.mobile #header .headerContent div {
	display: none;
}

#tarif.mobile #header .headerContent {
	background: none;
	justify-content: center;
}

#tarif.mobile .cardsContainer {
	display: flex;
	flex-wrap: wrap;
} 
#tarif.mobile #header .headerContent {
	padding: 50px 10px 0px 10px;
}

#tarif.mobile #header .headerContent img {
	height: 750px;
}

#tarif.mobile .card button{
	display: none;
} 

#tarif.mobile .card {
	height: 360px;
	width: 385px;
	margin-bottom: 20px;
	justify-content: center;
}


#tarif.mobile .card:hover {
	transform: scale(1.05);
}
#tarif.mobile .card h3,
#tarif.mobile .card p{
	margin: 0px;
}

#tarif.mobile .card svg {
	height: 120px;
}
#tarif.mobile #descriptifContent li {
	font-size: 26px;
}
#tarif.mobile #accordionContainer {
	margin-inline: 20px;
}

#tarif.mobile .accordion-button:not(.collapsed) {
	padding: 25px;
}

#tarif .accordion-button {
	padding: 25px;
}

/**********************/
/**       Blog       **/
/**********************/

.mobile #carouselPopularBlogs {
	height: 640px;
	margin-top: 0px;
}

.mobile .carousel-item {
	height: 640px;
}

.mobile .carouselTextDiv {
	padding-top: 125px;
}

.mobile .carouselTextDiv h3 {
    margin: 40px 27px;
}

.mobile .carouselTextDiv p {
    margin: 40px 60px;
    font-size: 32px;
}

.mobile .carousel-control-prev,
.mobile .carousel-control-next {
    padding: 0;
    width: 65px;
    margin-bottom: 90px;
}

.mobile .blogCard {
	border-radius: 10px;
	margin: 20px 5px;
	padding-bottom: 20px;
}
  
.mobile .blogCard img {
	width: 770px;
	height: 308px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin-bottom: 30px;
}

.mobile .blogCard h5 {
	margin: 0px 50px;
}

.mobile .blogCard p {
	margin: 20px;
    line-height: 45px;
}


/**********************/
/***** Blog Post ******/
/**********************/

.mobile .blogHeader {
	height: 500px;
}

.mobile .blogPost h1 {
    text-align: center;
    margin: 50px 27px;
    font-size: 38px;
}
  
.mobile .blogPost h2 {
	margin-top: 70px;
    font-size: 35px;
}

.mobile .blogPost h4 {
	margin-top: 55px;
    font-size: 33px;
}

.mobile .blogPost h5 {
	margin-top: 45px;
    font-size: 31px;
}

.mobile .blogPost p {
	margin-bottom: 16px;
}

.mobile .blogPostQuestion {
	margin-top: 40px;
}


/*******************/
/***** PROFIL *******/
/*****************/

#profil.mobile .aboutSection {
	flex-direction: column-reverse;
	margin-inline: 20px;
	margin-bottom: 40px;
}
#profil.mobile .aboutSection.reverse {
	flex-direction: column;
}
#profil.mobile .aboutSection h3 {
	margin-inline: auto;
}

#profil.mobile #word {
	flex-direction: column;
}

#profil.mobile #word .openQuote {
	margin-left: 0px;
}

#profil.mobile .biggerImg {
	width: 800px;
}

#profil.mobile #word .closeQuote {
	margin-right: 0px;
}

#profil.mobile #word .wordQuote p {
	line-height: 41px;
}

#profil.mobile #word .openQuote {
	margin-bottom: 576px;
}

#profil.mobile #word .closeQuote {
	margin-top: 487px;
}
/*  values  */

.mobile #values {
	display: none;
}

.mobile .cardContainer {
	height: 1070px;
    position: relative;
}

.mobile .cardBorder {
	display: flex;
	align-items: center;
	width: 760px;
	justify-content: center;
    height: 760px;
    margin: 0px;
    position: absolute;
    top: 50px;
    left: 5px;
    border: solid 5px grey;
    border-radius: 50px;
    transition-property: transform, border-width;
    transition-duration: 1000ms;
    transform: translate(0, 0) scale(1);
    background-color: white;
}

.mobile .cardBorder h5 {
	font-size: 42px;
	text-align: center;
    margin: 40px;
}

.mobile .one {
	transform: translate(-260px, -280px) scale(0.30263158);
}

.mobile .activeCard {
	transform: translate(5px, 250px) rotateY(180deg);
    padding: 15px 20px;
    border-width: 1.9px;
}

.mobile .displayCardText {
	display: block;
	transform: rotateY(180deg);
	font-size: 10px;
	text-align: center;
}

.mobile .noDisplayCardText {
	display: none;
}

.mobile .displayImg {
	display: block;
	width: 700px;
}



.mobile .noDisplayImg {
	display: none;
}

.mobile .oneToTwo {
	transform: translate(5px, -280px) scale(0.30263158);
}

.mobile .oneToThree {
	transform: translate(270px, -280px) scale(0.30263158);
}

/*******************/
/***** FOOTER *******/
/*****************/


.mobile #footer .layer {
	flex-wrap: wrap;
}

.mobile #footer .contact p {
	font-size: 40px;
	line-height: 56px;
	margin: 6px 0px;
}

.mobile #footer .logo {
  width: 205px;
}

.mobile #footer .text {
	width: 380px;
	margin-left: 30px;
}

.mobile #footer .thumbnail {
	width: 350px;
	height: 340px;
	margin: 30px 0px;
}

.mobile #footer .thumbnail svg {
  width: 180px;
  height: 180px;
}

.mobile #footer .thumbnail span {
	font-size: 24px;
	line-height: 50px;
  display: inline-flex;
  margin-top: 10px;
}

.mobile #footer .contact {
  margin-right: 50px;
  margin-left: 20px;
	padding: 0px;
}

.mobile #footer .layer {
  padding-top: 40px;
  padding-bottom: 10px;
}

.mobile #footer .copyright p {
font-size: 25px;
line-height: 35px;
margin: 14px 8px;
}

/*******************/
/* PAGES PRESTATIONS */
/*****************/
.prestations.mobile li,
.prestations.mobile #header li  {
	font-size: 31px;
}
.prestations.mobile #header {
	margin-top: 160px;
	height: initial;
	flex-direction: column;
	gap: 25px;
	text-align: center;
}
.prestations.mobile .question {
	padding: 30px 20px;
}
.prestations.mobile .modalite {
	flex-direction: column;
}

.prestations.mobile .diplome {
	width: 530px;
	margin-inline: auto;
}
/*******************/
/***** CALENDAR *******/
/*****************/

.mobile .calendarForm {
	width: 100%;
}

.mobile #calendarContainer {
	height: 450px;
}

.mobile .calendarContainer {
	/*flex-direction: column;*/
	gap: 10px;
}


.mobile .slotsList button {
	font-size: 20px;
	width: 185px;
	height: 47px;
}

.mobile #appointementForm .calendarGroup {
	flex-direction: column;
	gap: 0px;
	margin-bottom: 1rem;
}

.mobile #appointementForm .carousel-control-prev, 
.mobile #appointementForm .carousel-control-next {
	padding: 12px;
  margin-bottom: 0px; 
}


.mobile #contactModal {
	padding-right: 0px !important;
}

.mobile .calendarInput {
	width: 100%;
}

.mobile .calendarInput input,
.mobile .calendarInput textarea,
.mobile .calendarInput select,
.mobile .modal-body textarea,
.mobile .modal-body select {
	font-size: 27px;
}

.mobile .calendarLayout {
	flex-direction: column;
}
.mobile #modalContainer .modal {
	width: 800px;
}
.mobile .calendarForm {
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.mobile #calendarContainer {
	margin: 30px;
}

.mobile #calendarContainer button {
	padding: 5px 20px;
	margin-bottom: 0px;
}

.mobile .slotsList {
	height: 400px;
	width: 250px;
}
.mobile #modalContainer .modal-dialog {
	margin: 20px;
	height: calc(100% - 20px);
}