/*



Theme Name: Ancelia



Theme URI: https://www.preproduction.ancelia.fr/



Description: Thème enfant d'Astra pour Ancelia



Author: Dev Roofline



Author URI: https://www.preproduction.ancelia.fr/



Template: astra



Version: 1.0.0



*/



/* Styles personnalisés du thème enfant */


@media screen and (max-width: 2399px) {
  #menu-menu-landing-page-desktop 
  .eael-simple-menu-container.eael-simple-menu--loading > ul {
    display: none !important;
  }

  #menu-menu-landing-page-desktop 
  .eael-simple-menu-container:not(.eael-simple-menu--open) nav > ul {
    display: none !important;
  }

  #menu-menu-landing-page-desktop 
  .eael-simple-menu-toggle {
    display: block !important;
  }
}

body,html {

	overflow-x:hidden;

	scroll-padding-top:100px;

}



h1,h2, h3, .benton{

    font-family: "BentonModDisp-Semibold", sans-serif !important;

}



a {

  text-decoration: none !important;

}


.phrase-container {
  overflow: hidden;
}

.read-more-toggle {
  display: none;
}


/*-----Header ------*/



#header , #header-mobile{

	background: rgba(24, 46, 77, 0.35) !important;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    backdrop-filter: blur(18.8px);

}





#menu-1-46018d4 > li > a,  #menu-1-bd94f43 > li >a:hover , #menu-1-17d648a > li >a:hover , #menu-1-b47c6ee > li >a:hover {

	transition: transform 0.3s ease, color 0.3s ease;

}



#menu-1-46018d4 > li >a:hover, #menu-1-bd94f43 > li >a:hover , #menu-1-17d648a > li >a:hover  , #menu-1-b47c6ee > li >a:hover {

	transform: translateX(-10px) scale(0.9)

}

/* Menu landing */

#menu-menu-landing-page {
max-width: 500px !important;
  width: 400px !important;
  top: 72px !important;
  left: 90% !important;
}

#menu-menu-principal-mobile {
  top: 73px !important;
}




/*------Bouton-------*/



.glassmorphisme > a {

background: rgba(255, 255, 255, 0.05) !important;



box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

backdrop-filter: blur(3px);



border: 1px solid rgba(255, 255, 255, 0.3);

}



.glassmorphisme > a:hover {

	background: rgba(112, 195, 181, 1) !important;

}



.glass-hover >a:hover {

	background: rgba(255, 255, 255, 0.05) !important;



box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

backdrop-filter: blur(3px);



border: 1px solid rgba(255, 255, 255, 0.3) !important;

}



/*-------- Flip Card --------------*/



.eael-elements-flip-box-container{

	padding: 10px;

}



.content-card {

	display: flex;

    flex-direction: column;

    gap: 10px;

}

 

.pre-title-card {

	font-family : "Bellota Text", sans-serif;

	font-weight: 300 ;

	font-size: 16px;

	letter-spacing: 5px;

  text-transform: uppercase;

}



.title-card {

	font-family: "BentonModDisp-Semibold", sans-serif ;

	color: white !important ;

	font-size: 28px

}



.eael-elements-flip-box-padding{

	padding: 10px !important;

}



/*--------- Carrousel circulaire ---*/



.carrousel {

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: visible;

  perspective: 1000px;

  gap: 0px;

}



.carrousel-home-page, .carrousel-daf{

      height: 500px;

}



.carrousel-home-page{

      height: 570px;

}





.carrousel-tpe-pme {

    height: 650px;

}

.carrousel-foyer-vie {
  height: 700px;
}





.carte-interactive {

 /* width: 400px;

  height:500px;*/

  position: absolute;

  top: 30px;

  left: 50%;

  transform: translateX(-10%) scale(0.8);

	background: rgba(255, 255,255 , 0.2) !important;

	backdrop-filter: blur(8px);

  filter: blur(2px);

  opacity: 0.4;

  z-index: 1;

  transition: all 0.6s ease;

  cursor: pointer;

}

 .carte-interactive-cliniques, .carte-interactive-home-page {
  background: rgba(255, 255,255 , 0.2) !important;
	backdrop-filter: blur(8px);
    opacity: 0.9;
	border: 1px solid rgba(255, 255, 255, 0.3);
 }



.carte-interactive-daf {

 width: 400px;

  height:500px;

}

/* Page Foyer de vie */

.carte-interactive-foyer-vie, .carte-interactive-ehpad  {
  height: 680px;
  width: 500px;
}

.carrousel-foyer-vie, .carrousel-ehpad {
  height: 700px;
}











.carte-interactive-tpe-pme {

      width: 500px;

      height:600px;

}



.carte-interactive.center {

  transform: translateX(-50%) scale(1.0);

  filter: none;

  opacity: 0.9;

  z-index: 10;

 background-color: #fff;

 /* box-shadow: 0 20px 40px rgba(0,0,0,0.2); */

	border: 1px solid rgba(255, 255, 255, 0.3);

}



.carte-interactive.left {

  transform: translateX(-140%) scale(0.9);

  opacity: 0.6;

  z-index: 5;

}



.carte-interactive.right {

  transform: translateX(40%) scale(0.9);

  opacity: 0.7;

  z-index: 5;

}



.carte-interactive.hidden {

  opacity: 0;

  pointer-events: none;

}



.carrousel-pagination {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 15px;

}



.carrousel-dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.4);

  transition: background 0.3s, transform 0.3s;

  cursor: pointer;

}



.carrousel-dot.active {

  background: white;

  transform: scale(1.2);

}



/*-------- FAQ ---------*/



/*Masquer lire plus*/

.faq-toggle {

  display: none;

}





.colonne{

	    width: 100%;

    display: flex;

    gap: 50px;

}



.colonne-1, .colonne-2{

	width: 100%;

}





.faq-box {

  margin-bottom: 10px;

  cursor: pointer;

  transition: background 1s ease;

	

	box-shadow: 0px 8px 15px -11px rgba(0, 0, 0, 0.2);

	border-radius: 3px

}





.question{

		    padding: 10px 20px;		

}





.question > h3{

    font-family: "Bellota Text", sans-serif;

    font-weight: 600;

	color: #182E4D ;

	font-size : 18px; 

    margin: 0px;

}





.answer {

    max-height: 0;

  overflow: hidden;

    font-family: "Bellota Text", sans-serif;

	font-size: 14px;

	line-height: 18px;

	color: #695F7C;

    font-weight : 400 ;

}





.faq-box .question {

  display: flex;

  align-items: center;

  gap: 12px;

}





.faq-box .answer {

  overflow: hidden;

  opacity: 0;

  transition: max-height 1s ease-in-out, opacity 0.8s ease-in-out,padding 0.5s ease-in-out;

  padding-top: 0;

  margin-left: 20px;

}







.faq-box.open .answer {

max-height: 300px;

  opacity: 1;

  padding-top: 10px;

  padding-bottom: 10px ;

  margin-left: 20px;

  ;

}



.faq-icon{

    width: 15px;

    min-width: 15px;

    transition: transform 0.3s ease;

  transform: rotate(0deg);

}

/*

.faq-box.open .faq-icon {

  transform: rotate(90deg);

}*/





/*------ Formulaire contact ------*/



.elementor-field, .elementor-field-textual{

	padding-left: 0px !important

}





/*supprime les effets de base*/

#monformulaire input:focus,

#monformulaire input,#monformulaire select:focus,

#monformulaire select, #monformulaire textarea:focus,

#monformulaire textarea{

  outline: none !important;

  box-shadow: none !important;

  border-style: solid !important;

}



/*traits sous les champs*/



/*petit trait) */

.elementor-field-type-text input,

.elementor-field-type-email input,.elementor-field-type-tel input,

.elementor-field-type-select select{

  background-image: linear-gradient(to right, #97a9cf 0%, #97a9cf 100%);

  background-repeat: no-repeat;

  background-position: left bottom;

  transition: background-size 0.3s ease;

  box-sizing: border-box;

}



.elementor-field-type-text input {

	background-size: 10% 2px;

}



.elementor-field-type-email input,.elementor-field-type-tel input{

	background-size: 25% 2px;

}





.elementor-field-type-text input:focus {

  background-size: 40% 2px;

}



.elementor-field-type-email input:focus, .elementor-field-type-tel input:focus { 

		background-size: 80% 2px;

}



/*grand trait*/

.elementor-field-type-select select{

	background-size: 100% 2px;

}

	







/*Marge titre champs*/

#monformulaire > div > div.elementor-field-type-select.elementor-field-group.elementor-column.elementor-field-group-motif_rdv.elementor-col-100.elementor-field-required {

	margin-bottom: 50px;

}



#monformulaire > div > div.elementor-field-type-html.elementor-field-group.elementor-column.elementor-field-group-field_f38cf1a.elementor-col-100, #monformulaire > div > div.elementor-field-group.elementor-column.elementor-field-type-submit.elementor-col-20.e-form__buttons {

	margin-top:  50px;

}

/*Message erreur formulaire */
/* Message global (sous le bouton) */
.elementor-message-danger {
    font-size: 16px; /* modifie ici */
    font-weight: 600;
}

/* Messages sous les champs */
.elementor-field-group .elementor-message {
    font-size: 14px; /* modifie ici */
}

/* Optionnel : champ en erreur */
.elementor-field-group.elementor-has-error input,
.elementor-field-group.elementor-has-error textarea,
.elementor-field-group.elementor-has-error select {
    border-color: #d9534f;
}



/*------- Responsive--------*/


@media (max-width: 768px ){

/*Lire plus Texte sur mobile */
  .read-more-box .read-more-hidden {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: 
      max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.4s ease,
      transform 0.4s ease;
  }

  .read-more-box.read-more-expanded .read-more-hidden {
    max-height: 800px; /* plus safe pour contenus longs */
    opacity: 1;
    transform: translateY(0);
  }

  .read-more-box .read-more-toggle {
    display: block;
    margin-top: 10px;
    background: none;
    border: none;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    color: white;
    text-decoration: underline;
    transition: opacity 0.2s ease;
  }

  .read-more-box .read-more-toggle:hover {
    opacity: 0.7;
  }




  .carrousel-home-page {

    height: 630px;

  }



    .carrousel-tpe-pme {

    height: 750px;

}



	.carte-interactive-tpe-pme {

		width: 95%;

    height: 700px;

	}



  	.carte-interactive-tpe-pme {

		width: 95%;

	}



    .carrousel-daf {

    height: 530px;

}

/* Page Foyer de vie */

.carte-interactive-foyer-vie{
  height: 680px;
  width: 95%;
}

.carrousel-foyer-vie {
  height: 710px;
}

/* Page EHPAD */

.carte-interactive-ehpad{
  height: 750px;
  width: 95%;
}

 .carrousel-ehpad {
  height: 780px;
}



/* Formulaire de contact */	

	#monformulaire > div > div.elementor-field-type-html.elementor-field-group.elementor-column.elementor-field-group-email.elementor-col-70{

		display:none !important ;

	}

	

	.elementor-field-type-text input,

.elementor-field-type-email input,.elementor-field-type-tel input {

		background-size: 25% 2px;

	}

	

	.elementor-field-type-email input:focus, .elementor-field-type-tel input:focus , .elementor-field-type-text input:focus {

		background-size: 60% 2px;

	}

	

	#monformulaire > div > div.elementor-field-type-select.elementor-field-group.elementor-column.elementor-field-group-motif_rdv.elementor-col-100.elementor-field-required {

	margin-bottom: 30px;

}



#monformulaire > div > div.elementor-field-type-html.elementor-field-group.elementor-column.elementor-field-group-field_f38cf1a.elementor-col-100, #monformulaire > div > div.elementor-field-group.elementor-column.elementor-field-type-submit.elementor-col-20.e-form__buttons {

	margin-top:  30px;

}

	

	

/*FAQ*/	

	

.colonne {
  gap: 0px;
  flex-direction: column;
}

/* On anime la 2e colonne au lieu de display none */

  .faq-wrapper .colonne-2 {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition:
      max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.5s ease,
      transform 0.5s ease;
  }

  .faq-wrapper.expanded .colonne-2 {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
  }

/* Bouton visible uniquement sur mobile */

.faq-toggle,
.faq-toggle:focus {
  font-family: "Bellota Text", sans-serif;
  display: block;
  margin: 24px auto 0;
  padding: 12px 24px;
  font-size: 16px;
  color: white;
  font-weight: 900;
  background: #70C3B5;
  border: 1px solid #70C3B5;
  cursor: pointer;
  border-radius: 12px;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

/* petit effet hover sympa */

.faq-toggle:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}





}