@charset "utf-8";
/* CSS Document */


* {margin: 0; padding: 0; border: 0;}

html { scroll-behavior: smooth; }

body { font-family: "Montserrat", sans-serif; line-height: 1.3; color: #4e56a2;}

#contenu {overflow: hidden;}

.div-inner {width: 80%; margin: 0 auto;}

header {text-align: center;}
header #logo {width: 350px; display: inline-block; margin: 60px 0; padding-bottom: 40px; position: relative;}
header #logo::after {content: ""; position: absolute; bottom: 0; left: 50%; width: 100px; height: 2px; background-color: #4e56a2; opacity: 0.3; transform: translateX(-50%);}
header #logo img {width: 100%; height: auto;}


#bloc-andree {background-image: linear-gradient(to top, #eaeaf5, #fff); margin-top: 1.5vw;}
#bloc-andree .div-inner {display: flex; align-items: center;}
#bloc-andree-photo, #bloc-andree-contenu {width: 50%;}
#bloc-andree-photo {text-align: center; position: relative; z-index: 2;}
#bloc-andree-photo img {display: block; width: 80%; height: auto;}

#bloc-andree-contenu {}
#bloc-andree-contenu-inner {padding-right: 30%;}
#bloc-andree-contenu-titre {font-size: 30px; text-transform: uppercase; font-weight: 500; margin-bottom: 10px;}
#bloc-andree-contenu-sous {text-transform: uppercase; font-size: 21px; margin-bottom: 40px;}
#bloc-andree-contenu p {font-size: 22px; margin-bottom: 100px;}
.bloc-andree-contenu-nom {font-size: 34px; color: #fff; font-weight: bold; position: relative; padding: 20px;}
.bloc-andree-contenu-nom-inner { position: relative; z-index: 1;}
.bloc-andree-contenu-nom span {font-weight: normal; font-size: 20px; margin-left: 20px;}
.bloc-andree-contenu-nom::after {content: ""; position: absolute; top: 50%; right: 0; width: 150%; height: 100px; background-image: linear-gradient(to right, #6268c8, #a07dd1); transform: translateY(-50%); z-index: 0; border-radius: 20px;}

.bloc-andree-contenu-nom-cell {display: none; margin-bottom: 40px;}
.bloc-andree-contenu-nom-cell::after {width: 100%;}
.bloc-andree-contenu-nom-desk {display: block;}


#bloc-services {padding: 3vw 0;}
#bloc-services .div-inner {}
#bloc-services-liste {display: flex; column-gap: 40px; margin-bottom: 50px;}

.service-element {width: calc(33% - 27px); border-radius: 20px; background-color: #f7f6fa; overflow: hidden; display: flex; flex-direction: column;}
.service-element-inner, .service-element-prix {padding: 40px;}
.service-element-inner {margin-bottom: auto;}
.service-element-sous {text-transform: uppercase; font-size: 16px; letter-spacing: 2px;}
.service-element-titre {font-size: 26px; font-weight: bold; position: relative; padding-bottom: 30px; margin-bottom: 30px;}
.service-element-titre::after {content: ""; position: absolute; bottom: 0; left: 0; width: 50px; height: 1px; background-color: #4e56a2; opacity: 0.6;}
.service-element-liste-titre {font-size: 20px; font-weight: bold; margin-bottom: 10px;}
.service-element ul {list-style: none; padding-left: 0; font-size: 20px;}
.service-element li {padding-left: 40px; position: relative; margin-bottom: 6px;}
.service-element li::before {position: absolute; content: ""; width: 13px; height: 9px; top: 9px; left: 14px; background: url("../images/fleche.svg") no-repeat; background-size: cover;}
.service-element-prix {background-color: #e6def2; font-size: 22px; font-weight: 500;}
.service-element-prix-desc {}
.service-element-prix-chiffre {}

#bloc-services-legende {padding: 0 20%; font-size: 16px; text-align: center;}

#bloc-services-cta {text-align: center; margin-top: 50px;}
#bloc-services-cta a {}
#bloc-services-cta a:first-child {margin-right: 40px;}
#bloc-services-cta a:last-child {}


#bloc-seance {background-image: linear-gradient(to bottom, #eaeaf5, #fff); padding: 3vw 0;}
#bloc-seance .div-inner {display: flex; align-items: center;}
#bloc-seance-video, #bloc-seance-contenu {width: 50%;}
#bloc-seance-video {border-radius: 20px; overflow: hidden;}
#video-description {background-color: #4e56a2; padding: 20px 30px 20px 80px; font-size: 20px; color: #fff;}


#bloc-seance-contenu {}
#bloc-seance-contenu-inner {padding-left: 20%;}
#bloc-seance-contenu p {padding: 80px 0; font-size: 22px;}
#bloc-seance-contenu a {}


footer {background: url("../images/bg-montagnes.jpg") bottom right no-repeat; padding: 3vw 0 700px 0; text-align: center;}
#footer-coordonnees {display: flex; width: 100%; padding-bottom: 3vw;}
.footer-coordonnees-div {font-size: 30px; width: 50%;}
.footer-coordonnees-div a {color: #4e56a2; text-decoration: none;}
.footer-coordonnees-div a:hover {text-decoration: underline;}
.footer-coordonnees-div:first-child {padding-right: 100px; text-align: right; position: relative;}
.footer-coordonnees-div:first-child::after {content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 100%; background-color: #4e56a2; opacity: 0.3;}
.footer-coordonnees-div:last-child {padding-left: 100px; text-align: left;}

#footer-social {}
#footer-social a:first-child {background-image: url("../images/linkedin.svg"); margin-right: 10px}
#footer-social a:last-child {background-image: url("../images/facebook.svg");}
#footer-social a {display: inline-block; width: 80px; height: 80px; background-size: 40px 40px; background-repeat: no-repeat; background-position: center center; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 2px solid #4e56a2; border-radius: 50%;}
#footer-social a:hover {background-color: var(--main-color-beige); border-color: var(--main-color-beige);}


h1, h2 {}
h1 {font-size: 50px;}
h2 {font-weight: normal; font-size: 40px;}



/* bouton arrondi */

.btn-arrondi {display: inline-block; background-color: #4e56a2; border-radius: 20px; text-decoration: none; text-transform: uppercase; font-size: 22px; letter-spacing: 2px; color: #fff; padding: 25px 80px 23px 30px; line-height: 1; position: relative; overflow: hidden; border: 1px solid #4e56a2}
.btn-arrondi::after {content: ""; position: absolute; width: 18px; height: 12px; background: url("../images/fleche.svg") no-repeat; background-size: cover; top: 50%; right: 30px; transform: translateY(-50%);}
.btn-arrondi:hover {background-color: #a07dd1; color: #fff; padding-left: 80px; padding-right: 30px; border-color: #a07dd1;}
.btn-arrondi:hover::after {animation: btn-fleche 400ms forwards;}

.btn-arrondi-trans {background-color: transparent; color: #4e56a2;}

@keyframes btn-fleche {
  0% {right: 30px;}
  50% {right: -30px;}
  51% {right: auto; left: -30px; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(290deg) brightness(102%) contrast(102%);}
  100% {right: auto; left: 30px; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(290deg) brightness(102%) contrast(102%);}
}

@-webkit-keyframes btn-fleche {
  0% {right: 30px;}
  50% {right: -30px;}
  51% {right: auto; left: -30px; -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(290deg) brightness(102%) contrast(102%);}
  100% {right: auto; left: 30px; -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(290deg) brightness(102%) contrast(102%);}
}






/* Transitions standard */

a, a *, .video-control {
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;}





/***** VIDÉO *****/

.video-container {
	position: relative;
}

video {
	max-width: 100%;
	max-height: 100vh;
    display: block;
}

.video-control {
	position: absolute; cursor: pointer;
	left: 10px;
	bottom: -62px;
    background-color: transparent;
    width: 60px; height: 60px;
}

.video-control-play, .video-control-pause {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background-repeat: no-repeat; background-size: cover;}
.video-control-play {background-image: url("../images/play.svg"); margin-left: 3px;}
.video-control-pause {background-image: url("../images/pause.svg");}

.video-control:not(.playing) .video-control-pause,
.video-control.playing .video-control-play {
	display: none;
}