/*
Theme Name: Divi Child
Theme URI: https://moustachestudio.fr/
Template: Divi
Author: Agence Moustache
Author URI: https://moustachestudio.fr/
Version: 2.1.5.1766569235
Updated: 2025-12-24 09:40:35

*/

.fond-flou {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.1);
}

.fond-flou::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(15px);
    transform: scale(1.1); /* évite les bords coupés */
    z-index: 0;
}

.fond-flou > * {
    position: relative;
    z-index: 1;
}


.light {
    position: absolute;
    width: 0px;
    opacity: .75;
    background-color: white;
    box-shadow: #e9f1f1 0px 0px 20px 2px;
    opacity: 0;
    top: 100vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

.x1{
  -webkit-animation: floatUp 4s infinite linear;
  -moz-animation: floatUp 4s infinite linear;
  -o-animation: floatUp 4s infinite linear;
  animation: floatUp 4s infinite linear;
   -webkit-transform: scale(1.0);
   -moz-transform: scale(1.0);
   -o-transform: scale(1.0);
  transform: scale(1.0);
}

.x2{
  -webkit-animation: floatUp 7s infinite linear;
  -moz-animation: floatUp 7s infinite linear;
  -o-animation: floatUp 7s infinite linear;
  animation: floatUp 7s infinite linear;
  -webkit-transform: scale(1.6);
  -moz-transform: scale(1.6);
  -o-transform: scale(1.6);
  transform: scale(1.6);
  left: 15%;
}

.x3{
  -webkit-animation: floatUp 2.5s infinite linear;
  -moz-animation: floatUp 2.5s infinite linear;
  -o-animation: floatUp 2.5s infinite linear;
  animation: floatUp 2.5s infinite linear;
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
  -o-transform: scale(.5);
  transform: scale(.5);
  left: -15%;
}

.x4{
  -webkit-animation: floatUp 4.5s infinite linear;
  -moz-animation: floatUp 4.5s infinite linear;
  -o-animation: floatUp 4.5s infinite linear;
  animation: floatUp 4.5s infinite linear;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  left: -34%;
}

.x5{
  -webkit-animation: floatUp 8s infinite linear;
  -moz-animation: floatUp 8s infinite linear;
  -o-animation: floatUp 8s infinite linear;
  animation: floatUp 8s infinite linear;
  -webkit-transform: scale(2.2);
  -moz-transform: scale(2.2);
  -o-transform: scale(2.2);
  transform: scale(2.2);
  left: -57%;
}

.x6{
  -webkit-animation: floatUp 3s infinite linear;
  -moz-animation: floatUp 3s infinite linear;
  -o-animation: floatUp 3s infinite linear;
  animation: floatUp 3s infinite linear;
  -webkit-transform: scale(.8);
  -moz-transform: scale(.8);
  -o-transform: scale(.8);
  transform: scale(.8);
  left: -81%;
}

.x7{
  -webkit-animation: floatUp 5.3s infinite linear;
  -moz-animation: floatUp 5.3s infinite linear;
  -o-animation: floatUp 5.3s infinite linear;
  animation: floatUp 5.3s infinite linear;
  -webkit-transform: scale(3.2);
  -moz-transform: scale(3.2);
  -o-transform: scale(3.2);
  transform: scale(3.2);
  left: 37%;
}

.x8{
  -webkit-animation: floatUp 4.7s infinite linear;
  -moz-animation: floatUp 4.7s infinite linear;
  -o-animation: floatUp 4.7s infinite linear;
  animation: floatUp 4.7s infinite linear;
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  -o-transform: scale(1.7);
  transform: scale(1.7);
  left: 62%;
}

.x9{
  -webkit-animation: floatUp 4.1s infinite linear;
  -moz-animation: floatUp 4.1s infinite linear;
  -o-animation: floatUp 4.1s infinite linear;
  animation: floatUp 4.1s infinite linear;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
  left: 85%;
}

button:focus{
  outline: none;
}

@-webkit-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@-moz-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@-o-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}

.header{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Roboto', sans-serif;
  font-weight: 200;
  color: white;
  font-size: 2em;
}

#head1, #head2,#head3, #head4, #head5{
  opacity: 0;
}

#head1{
  -webkit-animation: fadeOut 1 5s ease-in;
  -moz-animation: fadeOut 1 5s ease-in;
  -o-animation: fadeOut 1 5s ease-in;
  animation: fadeOut 1 5s ease-in;
}

#head2{
  -webkit-animation: fadeOut 1 5s ease-in;
  -moz-animation: fadeOut 1 5s ease-in;
  -o-animation: fadeOut 1 5s ease-in;
  animation: fadeOut 1 5s ease-in;
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}

#head3{
  -webkit-animation: fadeOut 1 5s ease-in;
  -moz-animation: fadeOut 1 5s ease-in;
  -o-animation: fadeOut 1 5s ease-in;
  animation: fadeOut 1 5s ease-in;
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

#head4{
  -webkit-animation: fadeOut 1 5s ease-in;
  -moz-animation: fadeOut 1 5s ease-in;
  -o-animation: fadeOut 1 5s ease-in;
  animation: fadeOut 1 5s ease-in;
  -webkit-animation-delay: 17s;
  -moz-animation-delay: 17s;
  -o-animation-delay: 17s;
  animation-delay: 17s;
}

#head5{
  -webkit-animation: finalFade 1 5s ease-in;
  -moz-animation: finalFade 1 5s ease-in;
  -o-animation: finalFade 1 5s ease-in;
  animation: finalFade 1 5s ease-in;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 22s;
  -moz-animation-delay: 22s;
  -o-animation-delay: 22s;
  animation-delay: 22s;
}

@-webkit-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-moz-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-o-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-webkit-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@-moz-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@-o-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@-webkit-keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}

@-moz-keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}

@-o-keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}

@keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}

#footer{
  font-family: 'Roboto', sans-serif;
  font-size: 1.2em;
  color: white;
  position: fixed;
  -webkit-transform: translate(95vw,90vh);
  -moz-transform: translate(95vw,90vh);
  transform: translate(95vw,90vh);
  transform: translate(95vw,90vh);
}

/* ------------------ */



.container .card{
  position: relative;
  width: 320px;
  height: 450px;
  background: #232323;
  border-radius: 20px;
  overflow: hidden;
}

.container .card:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #9bdc28;
  clip-path: circle(150px at 80% 20%);
  transition: 0.5s ease-in-out;
}

.container .card:hover:before{
  clip-path: circle(300px at 80% -20%);
}

.container .card:after{
  content: 'InSpire';
  position: absolute;
  top: 30%;
  left: -20%;
  font-size: 12em;
  font-weight: 800;
  font-style: italic;
  color: rgba(255,255,25,0.05)
}

.container .card .imgBx{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  width: 100%;
  height: 220px;
  transition: 0.5s;
}

.container .card:hover .imgBx{
  top: 0%;
  transform: translateY(0%);
    
}

.container .card .imgBx img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  width: 270px;
}

.container .card .contentBx{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  text-align: center;
  transition: 1s;
  z-index: 10;
}

.container .card:hover .contentBx{
  height: 210px;
}

.container .card .contentBx h2{
  position: relative;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  margin: 0;
}

.container .card .contentBx .size, .container .card .contentBx .color {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  transition: 0.5s;opacity: 0;
  visibility: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.container .card:hover .contentBx .size{
  opacity: 1;
  visibility: visible;
  transition-delay: 0.5s;
}

.container .card:hover .contentBx .color{
  opacity: 1;
  visibility: visible;
  transition-delay: 0.6s;
}

.container .card .contentBx .size h3, .container .card .contentBx .color h3{
  color: #fff;
  font-weight: 300;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-right: 10px;
}

.container .card .contentBx .size span{
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  display: inline-block;
  color: #111;
  background: #fff;
  margin: 0 5px;
  transition: 0.5s;
  color: #111;
  border-radius: 4px;
  cursor: pointer;
}

.container .card .contentBx .size span:hover{
  background: #9bdc28;
}

.container .card .contentBx .color span{
  width: 20px;
  height: 20px;
  background: #ff0;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.container .card .contentBx .color span:nth-child(2){
  background: #9bdc28;
}

.container .card .contentBx .color span:nth-child(3){
  background: #03a9f4;
}

.container .card .contentBx .color span:nth-child(4){
  background: #e91e63;
}

.container .card .contentBx a{
  display: inline-block;
  padding: 10px 20px;
  background: #fff;
  border-radius: 4px;
  margin-top: 10px;
  text-decoration: none;
  font-weight: 600;
  color: #111;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.5s;
  margin-top: 0;
}

.container .card:hover .contentBx a{
  opacity: 1;
  transform: translateY(0px);
  transition-delay: 0.75s;
  
}
/* ============================================================
   7. ACTIONS (boutons CTA)
   ============================================================ */
.ho-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Bouton secondaire header (Appeler) */
.ho-header-actions .ho-hdr-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.64);
  background: rgba(255,255,255,0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ho-text) !important;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    box-shadow 220ms cubic-bezier(.2,.8,.2,1),
    border-color 220ms cubic-bezier(.2,.8,.2,1);
}

.ho-header-actions .ho-hdr-btn-secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(220,185,199,0.4);
  box-shadow: 0 12px 24px rgba(113,43,70,0.06);
}

/* Bouton primaire header (Devis) */
.ho-header-actions .ho-hdr-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #1e1e21, #111113);
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 16px 30px rgba(17,17,19,0.18);
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    box-shadow 220ms cubic-bezier(.2,.8,.2,1);
}

.ho-header-actions .ho-hdr-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(155,53,95,0.24);
}



/***menu wordpress**/
header#main-header, #main-header.et-fixed-header { top:10px !important; box-shadow:none!important; background:initial !important; position: fixed; }
@media (min-width: 980px) { header#main-header, #main-header.et-fixed-header {top:25px !important;} }
@media (max-width: 980px) { .et_header_style_left #logo {  max-width: 65%;} }
@media (min-width: 1140px) {#logo {max-width: initial;} }
header .container { width: 95%;max-width: 1800px;border-radius: 20px;background-color: #ffffff85; -webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);border: 1px solid #e1e1e1;padding: 12px 20px;display: flex;align-items: center;justify-content: space-between; box-shadow: 0px 0px 25px 0px rgba(85, 85, 85, 0.05);}
header .container:after, #top-menu-nav #top-menu a:after { content: none !important;}
header#main-header .logo_container {position: initial;height: auto;width: auto;}
header#main-header #et-top-navigation {padding: 0 !important;}
header#main-header #top-menu-nav #top-menu a {border-radius: 20px;padding: 0.7em 0.7em!important;color: rgb(0 0 0) !important;font-weight: 500;width: auto;border-width: 1px 1px 1px 1px;border-color: transparent;border-style: solid;transition: all 0.1s linear; z-index: 99999;}
header#main-header #top-menu-nav #top-menu a:hover {opacity: 1;}
nav#top-menu-nav, #top-menu, nav.et-menu-nav, .et-menu {float: none;}

header#main-header #top-menu li {padding-right: 0;}
header#main-header #top-menu li.current-menu-ancestor > a, header#main-header #top-menu li.current-menu-item > a, 
#top-menu li.current_page_item > a, #top-menu li.menu-item > a:hover {background: #ddf0fa; cursor:pointer;}

@media (min-width: 980px) { 
	header#main-header #top-menu .menu-item-has-children:hover > a { border-radius: 20px 20px 0 0 !important;background-color: #fff; border-width: 1px 1px 0 1px !important; 
		border-color: #e1e1e1 !important;}
	header#main-header #top-menu .menu-item-has-children:hover > a:hover {background-color: #fff;}
	header#main-header ul.sub-menu { border-radius: 0 20px 20px 20px;box-shadow: 12px 8px 20px 5px rgba(85, 85, 85, 0.05);border-width: 1px 1px 1px 1px !important; 
		border-color: #e1e1e1 !important;border-style: solid !important;padding: 15px;border: 0;background-color: #fff;width: 300px;display: flex;flex-direction: column;top: 37px;}
}
	
header#main-header #top-menu-nav #top-menu ul.sub-menu li a:hover {text-decoration: underline;}
#top-menu li li {padding: 0;}
span.logo_helper {display: none;}

header#main-header .btn a {border-radius: 20px;color: #000000 !important;background-color: #81E46B;padding: 0.7em 1.5em!important;transition: all 0.25s ease;}
header#main-header #top-menu-nav #top-menu .btn a:hover {background-color: #000000;color: #ffffff !important;opacity: 1;transform: translateY(-5px);}


/**menu mobile**/
.et_header_style_left #et-top-navigation .mobile_menu_bar { padding-bottom: 0;}
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before { content: '\4d';  }

ul.et_mobile_menu {border: 0; border-radius: 20px; top: 75px;  overflow: auto; max-height: 480px;}
ul.et_mobile_menu li a { width: 100%; margin: 0 auto; padding: 10px; font-weight: 500 !important; border-radius: 20px; font-size: initial; } 



/*ajoute d'un sub menu toogle js pour le mobile*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle::after { /*width: 30px; height: 100%; padding: 0px !important; max-height: 44px; border: none; position: absolute; 
right: 0; top: 0; z-index: 999; background-color: transparent;*/}

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children { position: relative;}

.et_mobile_menu li li { padding-left: 0;}
.et_mobile_menu .menu-item-has-children>a { background:transparent;}
.et_mobile_menu li a:hover, .nav ul li a:hover { opacity:1;}
 
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu { display: none !important; visibility: hidden !important;}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {display: block !important; visibility: visible !important; padding-left:20px;}

/*submenu icon*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {cursor: pointer; opacity: 1;}
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {top: 10px;position: absolute;font-family: "ETModules";content: '\33';color: #00d263;background: #ededed;border-radius: 50%; padding: 3px 5px; right: 10px;  height: 20px; width: 15px;}
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {content: '\32';}

.rdv-menu {
    border-radius: 20px;
    color: #000000 !important;
    background-color: #81d5ff;

    transition: all 0.25s ease;
}