/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; }
.ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;}

.ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); }
.ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); }
/**
 * General Elements
 **/
html {font-size: 10px; }
body {font-family: 'Lato', sans-serif; 
    --couleur1: #4D9B67;
    --couleur2: rgba(95,150,0,0.5);
    --couleur3: #C5D89F;
    
    --containerWidth: 100%;
    --asideWidth: calc( ((100vw - var(--containerWidth)) / 2) + (1.5rem / 2) );
    overflow-x: hidden;
}

body#orthodontie {
    --couleur1: #F4E6F5;
    --couleur2: #D66470;
    --couleur3: #D1293B;
    --couleurtiltle: #D1293B;
}
body#contact {
    --couleur1: rgba(247,8,8,0.5);
    --couleur2: #D66470;
    --couleur3: #D1293B;
    --couleurtiltle: #fff;
}
body#equipe {
    --couleur1: #C5D89F;
    --couleur2: #5F9600;
    --couleur3: #146E33;
    --couleurtiltle: #5F9600;
}

body#accueil {
    --couleur1: #C5D89F;
    --couleur2: #5F9600;
    --couleur3: #146E33;
    --couleurtiltle: #5F9600;
}

body#premiere-consultation {
     --couleur1: #F4E6F5;
    --couleur2: #D66470;
    --couleur3: #D1293B;
    --couleurtiltle: #D1293B;
}

.legal{padding-top: 150px; }
.legal h1 {color: #000;}

h2 {font-size: 4.6rem; color: var(--couleurtiltle);}
h2.souligne{ padding-bottom: 15px; font-weight: 800; display: inline-block; position: relative; margin-bottom: 0.5em; }
h2.souligne::after {content: ""; width: 100%; height: 2px; background-color: var(--couleur3); display: block; position: absolute; bottom: 0;}

h3 {font-size: 4.6rem; color: var(--couleurtiltle);}
p {font-size: 2rem; font-weight: 100;}
h1 {font-size: 5.2rem; color: white; font-weight: 900;}

:focus, button:focus { outline:none; }

/* Images */
img, svg { max-width:100%; height:auto; }
[data-sizes] { display:block; width:100%; }
[data-bg] { background-size:cover; background-repeat:no-repeat; background-position:center center; }

/* Paragraphs */
p { margin-bottom:1em; }
p:last-child { margin-bottom:0; }

/* Link */
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:none; color: inherit; }

/* Lists */
ul, ol { margin-bottom:0; padding:0; list-style:none; }

/* Forms */
.invalid-feedback.visible { display:block !important; }

/**
 * Layout
 **/

 /* Global */
#page { position:relative; width:100% }
strong {font-weight: 900;}
#main {padding-top: 15rem;}

.wrapper a:hover{color: #C5D89F;}

.img2col {height: 100%; min-height: 50vmin;}

/* Header */
#header {padding: 10px 5px; overflow: hidden;position: fixed; top: 0; width: 100vw; z-index: 1999; background-color: #fff; text-transform: uppercase;}
.nav {display: flex;justify-content: space-between; flex-wrap: nowrap;}
.nav li {text-transform: uppercase; font-size: 1.6rem; color: #5F9600; font-weight: bold;}
.nav a {display: block; position: relative; text-decoration: none; padding: 10px; opacity: 0.9; }
.nav a:hover { opacity: 1;}
.nav .logoheader {text-align: center;  color: #5F9600;}
.nav .logoheader p{font-size: 1.2rem; font-weight:bold; margin-top:5px; }

.navbar {display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; width: 70%; }
.navbar ul {display: flex; align-items: flex-end; justify-content: flex-end;}

.hamburger-wrapper {display: none;}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before,
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before{background-color: #5F9600 ;}

.navigation {position: fixed; left: 0px; top:0; width: 100%; height: 100%; background-color: #FFF; z-index: 9; flex-direction: column; align-items:center; justify-content: center; text-align:left; opacity:0; pointer-events:none; transition: all 0.4s ease 0s ; display:flex; max-height: 970px;}
.navigation ul{flex-direction: column; align-items: center; padding: 0; text-align: center;}
.navigation a{padding: 0;}
.navigation .tel::before { margin-right: 15px; }
.navigation .contact::after { margin-right: 15px; }
.navigation .contact { flex-direction: row-reverse;}
.navigation .wrapper{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%;  max-height: 400px;}
.navigation .wrapper ul{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 70%; }
.navigation .wrapper img {margin-bottom: 30px;}

#header .tel,
#header .contact{ display: flex; align-items: center; justify-content: center; font-weight: 600;font-size: 1.8rem;}
#header .tel::before {content:url(../themes/feuvrier/assets/images/tel.png); transform: translateY(3px);}
#header .contact::after {content:url(../themes/feuvrier/assets/images/contact.png); height: 18px; }
#header .contact{ text-transform: none;}
#header .pictotelresp { display:none; }
#header .pictotelresp svg { width:20px;  }

#header .mainrow {display: flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap;align-items: center;}


#head {height: calc(100vmin - 15rem);position: relative;}
#accueil #head::after {position: absolute;content: ""; background: url(../themes/feuvrier/assets/images/triangleaccueil.svg) no-repeat 50% 100%; top: 0; opacity: 0.2; width: 80%; max-width: 890px; height: 125%; background-size: 100% auto; margin: auto;left: 0; right: 0;}
.imgfond {position: relative; height: 100%; overflow: hidden;}
.imgfond img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: 100%; min-height: 100%; min-width: 100%; max-height: inherit; max-width: inherit; object-fit: cover;}
.imgfond .titleheader {position: absolute; top: 60%; transform: translateY(-50%); right: calc( var(--containerWidth) / 2); z-index: 3;}
.imgfond::after {position: absolute; content: ""; width: 100%; height: 100%; background-color: black; opacity: .1; top: 0; left: 0; }


/* Footer */

#footer .container { margin-bottom:50px; }
#footer .dent {text-align: center; justify-content: center; align-items: center; padding-top: 100px; display: flex;}
#footer .dent .dentcentre { position: relative; max-width: 100vw; width: 350px; height: 400px;}
#footer .dent .animdent{position: absolute;}
#footer .dent .animdent.bas-gauche{bottom: 0; left: 0;}
#footer .dent .animdent.bas-centre{bottom: 0; left: 33%;}
#footer .dent .animdent.bas-droite{bottom: 0; right: 0;}
#footer .dent .animdent.centre-gauche{bottom: 30px; right: 15%;}
#footer .dent .animdent.centre-droite{bottom: 30px; left: 15%;}
#footer .dent .animdent.millieu{bottom: 165px; left: 42%;}
#footer .dent .animdent.millieu-gauche{bottom: 160px; left: 10%;}
#footer .dent .animdent.millieu-droite{bottom: 160px; right: 0;}
#footer .dent .animdent.haut-gauche{bottom: 310px; left: 0;}
#footer .dent .animdent.haut-droite{bottom: 290px; left: 45%;}

#footer .block {display: flex; flex-direction: row;}
#footer .block1{width: calc(100% / 3); height: 80px;position: relative;}
#footer .block1::after{background-color: var(--couleur1);position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "";}
#footer .block2{width: calc(100% / 3); height: 80px;position: relative;}
#footer .block2::after{background-color: var(--couleur2);position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "";}
#footer .block3{width: calc(100% / 3); height: 80px;position: relative;}
#footer .block3::after{background-color: var(--couleur3);position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "";}


#footer {font-size: 2rem; color: #5F9600; font-weight: 100;}
#footer .tel {padding-top: 15px;}
#footer .footer {display: flex; flex-direction: row; justify-content: space-between; text-align: center; padding-top: 30px;align-items: center;}
#footer .footer .mentions p{ margin-bottom: 0;}
#footer .footer .logo p {font-size: 1.2rem; font-weight:bold; text-transform: uppercase; margin-top:5px; }
#footer a:hover {color: #5F9600;}
#footer a {text-decoration: none;}

#footer .txt {position: relative;}
/* #footer .txt p::before {content:url(../images/map.png);position: absolute;left: 17px; top: 5px;} */
#footer .tel {position: relative;}
#footer .tel p::before {content:url(../themes/feuvrier/assets/images/tel.png);position: absolute;left: 50px; top: 19px;}





/* Contact */

#contact #horaires {padding: 80px 0;}
#contact #horaires .centre {display: flex; justify-content: center; position: relative; }
#contact #horaires .centre::after {content: ""; background: url(../themes/feuvrier/assets/images/logohoraire.svg) no-repeat 50% 100%; left: 40%; right: 40%; width: 20%; height: 200%; top: -30px; z-index: -2; opacity: 0.3; background-size: 90% auto; position: absolute;}
#contact #horaires h2 {text-align: center; color: #F70808; }
#contact #horaires .horraire {background-color: #F70808; opacity: 79%; margin-top: 100px; display: flex;}
#horaires p {padding:  50px 8.33%; font-weight: 100;font-size: 2.6rem;color: white;}


#contact #questions {padding: 130px 0}
#contact .bloc {color: white; display: flex; height: 650px; justify-content: center; align-items: center; z-index: 2; position: relative; padding: 0 10px;}
#contact .bloc img {padding-right: 10px;}
#contact .bloc h2 {margin-bottom: 50px; font-weight: 900;}
#contact .bloc p {font-size: 2.5rem;}
#contact #questions .fond {position: relative;}
#contact .index {z-index: 10; color: white;}
#contact #questions .fond::after {background-color: #F70808; margin-left: 8.33%; width: 91.66%;content: ""; position: absolute; top: -15%; left: 0; height: 130%;}

#contact #carte {position: relative; margin: 80px 0;}


#contact .cardform {display: flex; justify-content: space-between; flex-direction: row; margin: 7px 0; flex-wrap:wrap; }
#contact .cardform  label {font-size:2.5rem; width:150px; text-transform: uppercase; font-weight: 100; color: #F70808;}
#contact .cardform  .form-control {height: 40px; width:calc(100% - 150px); border: .5px solid rgba(247, 8, 8, 1); font-size:1.6rem; }
#contact .cardform .invalid-feedback { width:100%; text-align:right; }
#contact .cardform  .form-control:focus{ box-shadow:  0 0 0 0.25rem rgba(247, 8, 8, 10); }
#contact .cardform  .form-floating {width: 100%;}

#contact .btn {color: #F70808; border-color: #F70808; padding: 10px 30px; margin-left: 100px;}
.captcha {margin-left: 100px;}


/* Partial Competence */
.competence {position: relative; height: 100%;display: flex; justify-content: center; align-items: center;}
.competence .bloc .row {align-items: center;}
.competence .bloc > div {z-index: 10;}
.competence .bloc h2 {color: white;}
.competence .bloc {color: white; display: flex; height: 100%; justify-content: center; align-items: center; z-index: 2; position: relative; margin: 150px 0;}
.competence .bloc::after {content: ""; background-color: var(--couleur3); display: block;height: 130%; width: 91.7%;margin-left: 8.33%; position: absolute; top: -15%; left: 0;}
.competence .background { position: absolute; width: 50%; right: 0; top: 0; height: 100%; display: flex; align-items: center;}
.competence p{ font-size: 2.5rem; font-weight: 100;}
.competence h2{ font-weight: 100;}
.competence .txtcompetence{padding: 0 20px;}

.competence {background-color: var(--couleur1)}
.competence .img::after {content: ""; height: 100%; width: 93.6%; background-color:  var(--couleur3);}
.competence::after {background-color: var(--couleur2); width: 50vw; height: 100%; display: block; content: ""; position: absolute; right: 0; top: 0;}

/* Partial cassetete */
.rowreverse {display: flex; flex-direction: row-reverse;}
.rowreverse .index {z-index: 3; position: relative;}
.rowreverse h2 ,
.rowreverse p {color: white;}
.rowreverse .paragraphe  {padding: 80px 15px;}
.rowreverse .title {padding-left: 15px; padding-right: 15px;}
.rowreverse .title h2{font-weight: 100;}
.rowreverse .img {position: relative; height: 100%;}
.rowreverse .img img {position: absolute; object-fit: cover; height: 100%;}
.couleur { position: relative;}
.couleur.une {margin-top: 40px;}
.block3 {position: relative;}
.couleur.trois {margin-top: 40px; background-color: var(--couleur1); width: calc(100% + var(--asideWidth) - 7.5px ); height: 100%; right: 0; position: absolute; }
.couleur.une {display: flex; align-items: center; height: 120%;}
.couleur.deux {mix-blend-mode: darken;}
.ifimg .couleur.trois{mix-blend-mode: initial;}
.couleur.trois {mix-blend-mode: multiply;}
.couleur.une::after {background-color: var(--couleur3); content: ""; top: 0; left: 0; position: absolute; display: block; width: var(--containerWidth); height: 100%;}
.couleur.deux::after {background-color: var(--couleur2); content: ""; top: 0; left: calc( -8.33% - 1.5rem); position: absolute; display: block; width: calc( var(--containerWidth) / 1.5); height: 100%;}
.couleur.ifimg{mix-blend-mode: initial;}



/* Accueil */

#accueil #entete { padding: 50px 0 ; position: relative;}

#accueil #entete p{font-size: 4.6rem; text-align: center; color: var(--couleurtiltle); line-height: 1.2em; font-weight: 100;}

#accueil #securitee {padding: 50px 0;}
#accueil #securitee h2 {font-weight: 100; padding-top: 10px;}
#accueil #securitee h2::after {content: ""; width: 100%; height: 2px; background-color: var(--couleur2); display: block; margin: 15px 0;}
#accueil #securitee h3 {font-weight: 100; padding-top: 10px;}
#accueil #securitee h3::after {content: ""; width: 90%; height: 2px; background-color: var(--couleur2); display: block; margin: 15px 0;}
#accueil #securitee .txtsecu {height: 100%; display: flex; justify-content: center; align-items: center; padding: 0 20px; flex-direction: column;}

#accueil .covid { margin-top:100px; }

/* pages */

#orthodontie #accompagnement  {padding: 100px 0;}
#orthodontie #accompagnement p {padding: 20px 0;}
#orthodontie #accompagnement h2 {font-weight: 100;}
#orthodontie #accompagnement .trait::after {content: ""; display: block; width: 100%; height: 1px; background-color: var(--couleur3);margin: 50px 0;}
#orthodontie #accompagnement .covidtxt h2 {text-align: center;}

#orthodontie .title {padding-top: 6.5rem; padding-bottom: 6.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#orthodontie .title h2 {text-align: center; position: relative;}
#orthodontie .title h2::after {width: 80%; }

#multi-attaches {padding: 80px 0; position: relative;}
#multi-attaches::after {position: absolute; background: url(../themes/feuvrier/assets/images/trianglefond.svg) no-repeat 50% 100%; content: ""; left: 0%;right: 0%; width: 100%; height: 100%; top: 0; z-index: -2; opacity: 0.3; background-size: 100% auto;}
#multi-attaches strong {font-size: 2.6rem; color: #D1293B;}


#equipe #interlocuteurs { padding: 30px 0; position: relative;}
#equipe #interlocuteurs::after {position: absolute; background: url(../themes/feuvrier/assets/images/trianglefond.svg) no-repeat 50% 100%; content: ""; left: 0%;right: 0%; width: 100%; height: 100%; top: 0; z-index: -2; opacity: 0.3; background-size: 100% auto;}
#equipe #interlocuteurs h2 {color: #5F9600; font-weight: 100; white-space: nowrap;}
#equipe #interlocuteurs h2::after {content: ""; display: block; height: 2px; width: 115px; background-color: #4D9B67; margin-left: -115px; margin-top: 15px;}
#equipe #interlocuteurs h3{font-size: 4.6rem; font-weight: 800; color: #5F9600; padding: 40px 0;}
#equipe #interlocuteurs .legende {text-align: center; padding-top: 80px;}

#equipe #meilleursoins {padding: 100px 0; position: relative;}
#equipe #meilleursoins::after {position: absolute; background: url(../themes/feuvrier/assets/images/trianglefond.svg) no-repeat 50% 100%; content: ""; left: 0%;right: 0%; width: 100%; height: 100%; top: 0; z-index: -2; opacity: 0.3; background-size: 100% auto;}
#equipe #meilleursoins h2 {font-weight: 100; padding-bottom: 50px;}
#equipe #meilleursoins p {padding-bottom: 20px;}
#equipe .text-cabinet {display: flex; justify-content: center;}

#equipe .imgportrait {display: flex; overflow: hidden; border-radius: 200px; position: relative; height: 100%; text-align: center;}
#equipe .imgportrait img{border-radius: 200px;  filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);transition: transform .5s, filter .5s ease-out;}
#equipe .imgportrait img:hover {transform: scale(1.1); opacity: 0.6;}

#equipe .nom {color: var(--couleurtiltle); font-size: 5.2rem; font-weight: 900; position: absolute; bottom: 33%; left: 25%;right: 25%;width: 50%; opacity: 0; transition: all 0.7s ease-out; pointer-events: none; }
#equipe .imgportrait:hover .nom {opacity: 1; }


#premiere-consultation #bilan {padding: 80px 0;}

#premiere-consultation #programmation {padding-top: 80px;}
#premiere-consultation #programmation h2 {font-weight: 100;}

#premiere-consultation .triblock {padding-top: 80px;}






/**
 * XXL
 **/
@media (min-width: 1400px) {

}

/**
 * XL
 **/
@media (max-width: 1399px) {

	#footer .tel p::before{left: -25px;}
	#footer .txt p::before {left: -30px;}
	#accueil #entete br,
	#accueil #securitee .txtsecu p br {display: none;}

	
	

	
}

/**
 * LG
 **/
@media (max-width: 1199px) {
	.rowreverse{flex-direction: row; flex-wrap: wrap;}
	.rowreverse .img img {position: relative;}
	.rowreverse .paragraphe {padding: 140px 15px;}
	.couleur.deux::after{width: 120%;}
	.couleur.trois {position: relative; margin-top: 0; height: 60%;}
	
	.competence p{font-size: 2rem;}	
}

/**
 * MD
 **/
@media (max-width: 991px) {

	#header .navbar{display: none;}
	body.open .navigation { opacity: 1; pointer-events: auto; }
	.hamburger-wrapper {display: block; z-index: 10; }
	.nav{ display: flex; align-items: center; justify-content: space-between;}
	/* #header .contact::after{content: "";} */

	#header .logoheader .logo-dentsbas { display:none; }
	#header .logoheader p { margin-top:-30px; }
	
	
	h1{font-size: 4rem;}
	h3 {font-size: 3.2rem;}
	
	#contact #horaires .horraire{flex-direction: column;}
	#contact #horaires .centre::after{background-size: 100% auto; width: 40%; left: 30%; right: 30%;}
	#horaires p{padding: 20px 10px; font-size: 1.7rem;}

	.couleur.une::after{width: 100%;}
	.couleur.trois {height: 50%;}

	#main section > div{ padding-left: 20px; padding-right: 20px; }

	#accueil #entete p {font-size: 2.5rem;}
	#accueil #securitee {padding-top: 25px; padding-bottom: 25px; }
	#accueil #securitee .txtsecu{justify-content: start; padding: 20px 0; flex-direction: column;}

	.row.img2col {height: 50vh;}
	#equipe .imgportrait{height: 50%; top: 25%;}
	#header .pictotelresp { display:block; }

	
}

/**
 * SM
 **/
@media (max-width: 767px) {
    h1{font-size: 3.0rem; padding: 0 20px;}
	h2 {font-size: 2.7rem;}
	p {font-size: 1.7rem;}
	#equipe #interlocuteurs h3{font-size: 2.6rem; padding: 20px 5px;}
	#head .imgfond .titleheader {right: 0;}

	#accueil #entete p {font-size: 2.2rem;}

	#equipe .imgportrait {padding: 5px 0;}

	#footer .footer{flex-direction: column;}
	#footer .logo {padding: 30px 0}
	#footer .txt p::before{content: "";}
	#footer .tel p::before{content: "";}

	#premiere-consultation #bilan,
	#multi-attaches{padding: 40px 0 ;}

	#multi-attaches::after{height: 50%;}
	#equipe #interlocuteurs::after {height: 20%;}
	#equipe .imgportrait{height: 100%; top: 0;}

	#contact #questions .fond::after{margin-left: 0; width: 100% ; height: 110%; top: 0;}
	#contact #questions .index h2{ margin-top: 1em; }
	#contact #questions h2, 
	#contact #questions p {text-align: center;}
	#contact #formulaire{ margin-top: 5rem; }

	#contact #horaires,
	#contact #questions{padding: 40px 0;}
	#contact #horaires .horraire{margin-top: 40px;}


	.competence .bloc{flex-direction: column-reverse; margin: 20px 0; }
	.competence::after{width: 0;}
	.competence .bloc::after{width: 0;}
	.competence{background-color: var(--couleur3); text-align: center;}
	.competence .bloc .index h2{padding-bottom: 15px}
	.competence .txtcompetence{padding: 15px;}

	.rowreverse .paragraphe {padding: 100px 15px;}

	.row.reverse {flex-direction: column-reverse;}

	#orthodontie .title h2::after { margin: auto; left: 0; right: 0; }
	#orthodontie #accompagnement,
	#premiere-consultation .triblock,
	#premiere-consultation #programmation,
	#equipe #meilleursoins{padding: 40px 0;}
	
	
}

/**
 * XS
 **/
@media (max-width: 575px) {
	
	#equipe #interlocuteurs h2::after{margin-left: -60px;}
	#equipe #interlocuteurs .legende{padding: 30px 0;}
	#equipe #meilleursoins h2{padding-bottom: 25px;}

	#contact .cardform{flex-direction: column;}
	#contact .cardform label { width:100%; }
	#contact .cardform .form-control { width:100%; }
	#contact .cardform .invalid-feedback { text-align:left; }

	#contact #carte{margin:  20px 0;}
	#multi-attaches::after{ height: 60%;}

	#orthodontie #accompagnement {padding: 20px 0;}
	.couleur.une {justify-content: center;}

	.couleur.trois{margin-top: -50px; width: 99%;}
	.rowreverse .img{height: 200%;}

	.row.img2col {height: 35vh;}

	.couleur.une{ height: 110%; }

	
	#contact .btn { margin-left: 0;}
	.captcha {margin-left: 0;}


	#footer .block1,
	#footer .block2,
	#footer .block3 {height: 50px;}

    
}

@media (min-width:  576px){ body{ --containerWidth:  540px; } }
@media (min-width:  768px){ body{ --containerWidth:  720px; } }
@media (min-width:  992px){ body{ --containerWidth:  960px; } }
@media (min-width: 1200px){ body{ --containerWidth: 1140px; } }
@media (min-width: 1400px){ body{ --containerWidth: 1320px; } }