/*
Theme Name: Elementra Child Theme
Template: elementra
Theme URI: https://elementra.themerex.net/
Description: Elementra Child Theme
Author: ThemeREX
Author URI: https://themerex.net/
Version: 1.0
Tested up to: 6.7
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
Text Domain: elementra
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */

/* ==========================================================================
   BOUTONS "SEE MORE" (Elementor + MetForm)
   - Effet de double-ligne via ::before/::after
   - Animation de l’icône
   - Pastille carrée décorative
   ========================================================================== */

/* Fenêtre verticale d'une ligne de texte */
.see-more .elementor-button-text,
#submitBtn.see-more .metform-submit-btn span{
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1em;
  vertical-align: middle;
}

/* Ligne 1 (dupliquée via data-text) */
.see-more .elementor-button-text::before{
  content: attr(data-text); /* On va générer ce contenu en JS car Elementor free ne permet pas data-text */
  display: block;
  transform: translateY(0%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#submitBtn.see-more .metform-submit-btn span::before{
  content: attr(data-text); /* On va générer ce contenu en JS car Elementor free ne permet pas data-text */
  display: block;
  transform: translateY(0%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Ligne 2 (copie colorée) */
.see-more .elementor-button-text::after{
  content: attr(data-text);
  display: block;
  transform: translateY(0%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: #FF7316;
}
#submitBtn.see-more .metform-submit-btn span::after{
  content: attr(data-text);
  display: block;
  transform: translateY(0%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: #FF7316;
}

/* Défilement au hover */
.see-more:hover .elementor-button-text::before,
#submitBtn.see-more:hover .metform-submit-btn span::before{
  transform: translateY(-100%);
}
.see-more:hover .elementor-button-text::after,
#submitBtn.see-more:hover .metform-submit-btn span::after {
  transform: translateY(-200%);
}

/* Animation de l’icône */
.see-more .elementor-button-icon,
#submitBtn.see-more .metform-submit-btn svg {
  transition: transform 0.35s ease;
}
.see-more:hover .elementor-button-icon,
#submitBtn.see-more:hover .metform-submit-btn svg {
  transform: translateX(4px);
}
.see-more:hover .elementor-button-icon path,
#submitBtn.see-more:hover .metform-submit-btn path{
  fill: #FF7316;
}

/* Variante blanche */
.see-more-white{
  width: fit-content;
}
.see-more-white .elementor-button-icon path{
  fill: #FFFFFF;
}

/* Wrapper du contenu + pastille */
.see-more .elementor-button-content-wrapper,
.see-more-white .elementor-button-content-wrapper{
  position: relative;
  display: inline-flex;
  height: clamp(22px, 1.692vw, 32px); 
}
.see-more .elementor-button-content-wrapper::before,
.see-more-white .elementor-button-content-wrapper::before{
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  align-self: end;
  background-color: #708F96;
  left: -13px;
  bottom: clamp(12px, 1.692vw, 17px);
  order: 1;
}
.see-more-white .elementor-button-content-wrapper::before{
  background-color: #FFFFFF;
}

/* Pastille sur bouton MetForm */
#submitBtn.see-more .elementor-widget-container::before{
  content: "";
  width: 5px;
  display: block;
  height: 5px;
  position: absolute;
  background-color: #708F96;
  left: 0;
  bottom: 3px;
}

/* Couleur de pastille au hover */
.see-more:hover .elementor-button-content-wrapper::before,
#submitBtn.see-more:hover .elementor-widget-container::before{
  background-color: #FF7316;
  transition: all .35s ease;
}


/* ==========================================================================
   MARQUEURS / ACCENTS (points/carrés)
   ========================================================================== */

.orange-dot::before{
  content: "";
  width: 7px;
  display: block;
  height: 7px;
  position: absolute;
  background-color: #FF7316;
  left: 2px;
  bottom: 15px;
}

.orange-dot-team::before{
  content: "";
  width: 7px;
  display: block;
  height: 7px;
  position: absolute;
  background-color: #FF7316;
  left: 2px;
  bottom: 2px;
}

@media(max-width: 1279px) {
  .orange-dot::before{
	bottom: 8px;
  }
}
@media(max-width: 767px) {
	
}


/* ==========================================================================
   LISTES PERSONNALISÉES (gris / orange)
   ========================================================================== */

.custom-list-grey ul, 
.custom-list-orange ul{
  list-style: none; /* supprime les puces natives */
  margin: 0;
  padding: 0;
}

/* Supprime le ::marker par défaut */
.custom-list-grey ul li::marker,
.custom-list-orange ul li::marker{
  content: "";
}

.custom-list-grey ul li,
.custom-list-orange ul li{
  display: flex;
  align-items: baseline; /* aligne la puce sur la ligne de texte */
}

/* Carrés personnalisés */
.custom-list-grey ul li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #708F96;
  margin-right: 8px; /* espace entre la puce et le texte */
  flex-shrink: 0; /* évite le rétrécissement */
  transform: translateY(1px); /* petit ajustement visuel */
}
.custom-list-orange ul li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #FF7316;
  margin-right: 8px; /* espace entre la puce et le texte */
  flex-shrink: 0; /* évite le rétrécissement */
  transform: translateY(1px); /* petit ajustement visuel */
}


/* ==========================================================================
   SLIDER & BLOCS
   ========================================================================== */
.custom-slider .slider-slide .slide_content p:first-child{
  text-align: center;
}
.custom-slider .slider-slide .slide_content p:first-child img{
  max-width: 50%;
  padding: 0 0 40px;
  margin-top: 20px;
}
@media(max-width: 767px) {
  .custom-slider .slider-slide .slide_content p:first-child {
    max-width: 100%;
    padding: 0 0 20px;
  }
  .custom-slider .slider-slide .slide_content p:first-child img{
    padding: 0;
  }
}

.custom-slider .slider-slide .slide_content p:last-child {
  padding: 10px 0 30px;
}

.custom-slider .slider-slide {
  padding: 20px;
}

.custom-slider .slider-slide::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: #FF7316;
  margin-right: 8px; /* espace entre la puce et le texte */
  flex-shrink: 0; /* évite le rétrécissement */
  transform: translateY(1px); /* petit ajustement visuel */
  position: absolute;
  right: 0;
  top: 10px;
}

.container-background-image{
	pointer-events: none;
}

.multiple-background-opacity{
	opacity: 0;
}


/* ==========================================================================
   ACCENTS POSITIONNÉS (contact/box)
   ========================================================================== */

.custom-contact::before{
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: #FF7316;
  flex-shrink: 0;
  transform: translateY(1px);
  position: absolute;
  right: -15px;
  top: -31px;
}
.custom-box::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: #FF7316;
  flex-shrink: 0;
  transform: translateY(1px);
  position: absolute;
  right: -20px;
  top: -43px;
}


/* ==========================================================================
   BREAKPOINTS (≤1279px)
   ========================================================================== */

@media(max-width: 1279px) {
  .custom-slider .slider-slide::before{
    width: 6px;
    height: 6px;
    right: 2px;
  }
  .custom-contact::before{
    width: 5px;
    height: 5px;
    top: -27px;
  }
  .custom-box::before {
    width: 5px;
    height: 5px;
    right: -13px;
    top: -30px;
  }

  .see-more .elementor-button-content-wrapper{
    height: inherit;	
  }
  .see-more .elementor-button-content-wrapper::before{
    bottom: 3px;
    position: absolute;
  }
  .see-more-white-fr .elementor-button-text{
    line-height: 1.1em;
  }
}


/* ==========================================================================
   BREAKPOINTS (≤767px)
   ========================================================================== */

@media(max-width: 767px) {
  .custom-contact::before{
    top: -22px;
    right: -10px;
  }
  .custom-box::before {
    top: -20px;
  }
  .see-more .elementor-button-content-wrapper::before{
    bottom: 1px;
  }
}


/* ==========================================================================
   LIENS / TEXTE / BLOCS GÉNÉRAUX
   ========================================================================== */

.elementor-widget-mf-gdpr-consent label a{
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
}
.newsletter.elementor-widget-mf-gdpr-consent label a {
  color: rgba(112, 143, 150, 0.5);
  text-decoration: underline;
}

.submit-contact-button button {
  width: 100%;
  text-align: left;
}

.footer-company .elementor-heading-title {
  display: block;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  margin: 0 auto;
}

.footer-social-icon svg{
  width: 45px;
  height: 1.2em;
}

.logo_image {
  max-height: 40px!important;
}
.menu-item-type-custom a{
  color: #FFFFFF!important;
}


/* ==========================================================================
   BREAKPOINTS (≥1280px)
   Typo fluide, tailles d’icônes, etc.
   ========================================================================== */

@media screen and (min-width: 1280px) {
  .header-links .trx-addons-menu-link-text,
  .header-links .cpel-switcher__code{
    font-size: clamp(16px, 1.1vw, 26px);
  }
  .home-counter h1{
    font-size: clamp(57px, 4.385vw, 90px);
    line-height: 1.05;
  }
  .see-more .elementor-button-icon{
    margin-top: 5px;
  }
  .see-more .elementor-button-icon svg{
    width: clamp(22px, 1.692vw, 32px);
  }
  h1 {
    font-size: clamp(57px, 4.385vw, 100px);
    line-height: 1.05;
  }
  h2 {
    font-size: clamp(47px, 3.615vw, 80px);
    line-height: 1.1;
  }
  h3 {
    font-size: clamp(35px, 2.692vw, 55px);
    line-height: 1.15;
  }
  h4 {
    font-size: clamp(28px, 2.154vw, 50px);
    line-height: 1.2;
  }
  h5 {
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.2;
  }
  p {
    font-size: clamp(20px, 1.538vw, 26px);
    line-height: 1.5;
  }
  .footer-text-follow p {
    font-size: clamp(30px, 1.538vw, 40px);
  }
  .product-container p,
  .product-container li{
    font-size: clamp(22px, 1.692vw, 32px);
    line-height: 1.5;
  }
  .see-more .elementor-button-text{
    font-size: clamp(22px, 1.692vw, 32px);
    line-height: normal;
    height: clamp(1em, 2vw, 1.3em);
  }
}


/* ==========================================================================
   3D MODELS (loader)
   ========================================================================== */

.secure-model-viewer{
  height: inherit;
}
.smv-loader{
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  align-items: start;
}
.smv-loader-bar-custom{
  width: 80%;
  margin: 0 auto;
}
.smv-loader-progress-custom{
  height: 2px;
  background-color: #FF7316;
}
.smv-loader-value{
  color: #FF7316;
  position: absolute;
  top: -30px;
  width: inherit;
  max-width: 380px;
  font-size: 20px;
  font-family: "Space Grotesk";
}


/* ==========================================================================
   UTILITAIRE
   ========================================================================== */

.aspect-ratio-custom{
  aspect-ratio: 1/1;
}