/* ===================================================================================

* Theme Name: Vertexify Child
* Theme URI: https://themexriver.com/wp/vertexify
* Author: ThemeXriver
* Author URI: https://themeforest.net/user/themexriver
* Description: Business Consulting WordPress Theme
* Version: 1.0.1
* Template: vertexify
* Text Domain: vertexify-child
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready
* Tested up to: 6.6
* Requires PHP: 7.4

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of vertexify updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
:root {
    --vt-heading: "Sen", sans-serif !important;
    --vt-body-font: "Sen", sans-serif !important;
    --vt-semibold: "Sen", sans-serif !important;
}
.vy-scn-title-1 {
  text-transform: none !important;
}
.xp-pf{
	font-family: "Playfair Display", serif;
	font-style:italic;
}
.vy-hero-3-content-slider .swiper-slide .vy-hero-3-content{
	padding-top:200px !important;
}

.vt-breadcrumb-section .container .vt-breadcrumb-content .vt-btn.mt-30.btn-spin{
	display:none;
}
#header-01 .vt-header-navigation-content .main-navigation-cta div.off-canvas-btn{
	display:none !important;
}

.vt-header-section{
	background-color:white !important;
	z-index:10 !important;
}

.vt-header-section.header_style_one .header-top-area .top-action {
	/*max-width:600px !important;*/
	max-width: fit-content !important;
}
.vt-header-section.header_style_one .header-top-area .action-text{
	max-width:300px !important;
}
.txa-search-box.active{
	z-index:15 !important;
}

/*HOME*/
body.home .vy-phone-btn{
	color:#fff !important;
}
body.home .vy-search-btn-1{
	color:#fff !important;
}
body.home .vy-join-btn-1{
	color:#fff !important;
}

/*TEAM*/

/*ACTU BLOG*/
.vt-go-back a{
	display:none;
}

/*SERVICES*/
.vt-service-item-feed .item-img{
	height:100% !important;
}

/*CONTACT*/
.vt-contact-form-input .input-field textarea{
	height:auto !important;
}
.fs14{
	font-size:14px !important;
}

/*TESTIMONIALS*/
.vt-testimonial-item.ver_2 p{
	font-size: 28px !important;
}

/* ===================================================================================
   PRELOADER MOBILE STYLES
   Limite la largeur du logo du preloader à 80% sur mobile
====================================================================================== */

/* Styles pour mobile - largeur du logo limitée à 80% */
@media (max-width: 768px) {
    #preloader .preloader-logo img {
        max-width: 80% !important;
        width: 80% !important;
        height: auto !important;
    }
	.vt-breadcrumb-section .container{
		background-color: #ffffff78 !important;
	}
}

/* Styles pour très petits écrans - largeur du logo limitée à 70% */
@media (max-width: 480px) {
    #preloader .preloader-logo img {
        max-width: 70% !important;
        width: 70% !important;
        height: auto !important;
    }
	.vt-breadcrumb-section .container{
		background-color: #ffffff78 !important;
	}
}

/*
 * Custom CSS overrides to unify the home page mobile menu with the
 * mobile menus used on the other pages of the 30XP site.  The
 * existing markup for the menu is the same on every page, but on the
 * home page the theme applies a light (white) colour scheme.  On
 * internal pages the menu uses a dark background with light coloured
 * text and icons.  Since we cannot modify the HTML or JavaScript,
 * these selectors only target the home page via the `.home` class on
 * the `<body>` element.  The rules below therefore do not affect
 * internal pages.
 *
 * If the theme ever changes the body class names, update the
 * `.home` selector accordingly.  Colour values were taken from
 * existing theme SVG fills (#3533FF blue and #A505D8 violet) to
 * preserve the site’s colour palette.
 */

/* Dark background for the mobile menu panel on the home page */
body.home .mobile_menu_content {
    background-color: #010a20; /* match dark menu background on inner pages */
    color: #ffffff;
  }
  
  /* Ensure the wrapper is dark as well */
  body.home .mobile_menu_wrap {
    background-color: #010a20;
  }
  
  /* Darken the overlay when the menu is open */
  body.home .mobile_menu_overlay {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  /* Style the burger button (hamburger icon) and close icon so they
   * contrast against the dark background.  The spans of the button
   * create the lines of the burger.  */
  body.home .mobile-menu-btn span,
  body.home .mobile_menu_button span,
  body.home .mobile_menu_button span::before,
  body.home .mobile_menu_button span::after,
  body.home .mobile_menu_close i {
    background-color: #ffffff;
    color: #ffffff;
  }
  
  /* Colour links inside the mobile menu.  The default theme styles
   * anchors on internal pages with white text and a coloured hover.
   * Apply the same styling here.  */
  body.home .mobile_menu_content .mobile-main-navigation a {
    display: block;
    color: #ffffff;
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.2s ease-in-out;
  }
  
  /* Hover and active state use the theme accent colour (#A505D8). */
  body.home .mobile_menu_content .mobile-main-navigation li:hover > a,
  body.home .mobile_menu_content .mobile-main-navigation li.current-menu-item > a {
    color: #a505d8;
  }
  
  /* Mobile search bar tweaks: white text and icons on dark background */
  body.home .mobile-search-bar input[type="search"] {
    background-color: #010f29;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }
  
  body.home .mobile-search-bar input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
  
  /* Include webkit placeholder selector for better browser support */
  body.home .mobile-search-bar input[type="search"]::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
  
  body.home .mobile-search-bar button {
    background: transparent;
    color: #ffffff;
  }
  
  /* Social icons at the bottom of the menu should also be light. */
  body.home .ptx-mobile-header-social a i,
  body.home .mobile_menu_content a i {
    color: #ffffff;
  }
  
  /* Maintain spacing consistency with internal page menu */
  body.home .mobile_menu_content nav.mobile-main-navigation ul.nav {
    margin: 1rem 0;
  }
  
/*
 * Custom CSS overrides to unify the home page mobile menu with the
 * mobile menus used on the other pages of the 30XP site.  The
 * existing markup for the menu is the same on every page, but on the
 * home page the theme applies a light (white) colour scheme.  On
 * internal pages the menu uses a dark background with light coloured
 * text and icons.  Since we cannot modify the HTML or JavaScript,
 * these selectors only target the home page via the `.home` class on
 * the `<body>` element.  The rules below therefore do not affect
 * internal pages.
 *
 * If the theme ever changes the body class names, update the
 * `.home` selector accordingly.  Colour values were taken from
 * existing theme SVG fills (#3533FF blue and #A505D8 violet) to
 * preserve the site’s colour palette.
 */

/* Dark background for the mobile menu panel on the home page */
body.home .mobile_menu_content {
    background-color: #01040c; /* dark backdrop similar to internal page menu */
    color: #ffffff;
  }
  
  /* Ensure the wrapper is dark as well */
  body.home .mobile_menu_wrap {
    background-color: #01040c;
  }
  
  /* Darken the overlay when the menu is open */
  body.home .mobile_menu_overlay {
    /* Darker overlay to match internal page opacity */
    background-color: rgba(0, 0, 0, 0.95);
  }
  
  /* Style the burger button (hamburger icon) and close icon so they
   * contrast against the dark background.  The spans of the button
   * create the lines of the burger.  */
  body.home .mobile-menu-btn span,
  body.home .mobile_menu_button span,
  body.home .mobile_menu_button span::before,
  body.home .mobile_menu_button span::after,
  body.home .mobile_menu_close i {
    background-color: #ffffff;
    color: #ffffff;
  }
  
  /* Colour links inside the mobile menu.  The default theme styles
   * anchors on internal pages with white text and a coloured hover.
   * Apply the same styling here.  */
  body.home .mobile_menu_content .mobile-main-navigation a {
    display: block;
    color: #ffffff;
    font-weight: 500;
    padding: 0.6rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease-in-out;
  }
  
  /* Hover and active state use the theme accent colour (#A505D8). */
  body.home .mobile_menu_content .mobile-main-navigation li:hover > a,
  body.home .mobile_menu_content .mobile-main-navigation li.current-menu-item > a {
    color: #a505d8;
  }
  
  /* Mobile search bar tweaks: white text and icons on dark background */
  body.home .mobile-search-bar input[type="search"] {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    color: #ffffff;
  }
  
  body.home .mobile-search-bar input[type="search"]::placeholder {
    color: #ffffff;
  }
  
  /* Include webkit placeholder selector for better browser support */
  body.home .mobile-search-bar input[type="search"]::-webkit-input-placeholder {
    color: #ffffff;
  }
  
  body.home .mobile-search-bar button {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
  }
  
  /* Social icons at the bottom of the menu should also be light. */
  body.home .ptx-mobile-header-social a i,
  body.home .mobile_menu_content a i {
    color: #ffffff;
  }
  
  body.home .mobile-main-navigation {
    padding-left:20px !important;  
  }

  /* Maintain spacing consistency with internal page menu */
  body.home .mobile_menu_content nav.mobile-main-navigation ul.nav {
    margin: 1rem 0;
  }
  
  /* Spacing between items in the standard mobile menu */
  body.home .mobile_menu_content nav.mobile-main-navigation li {
    margin-bottom: 0.4rem;
  }
  
  /*
   * Off‑canvas menu used on the home page (visible on mobile when the burger
   * icon is tapped).  The off‑canvas markup differs from the standard
   * `.mobile_menu` and is wrapped in `.txa-offcanvas-box` and
   * `.txa-offcanvas-box-container`.  We override the light styling
   * applied by the theme on the home page so that this menu matches the
   * dark menu used elsewhere.
   */
  
  /* Dark background for the off‑canvas container and wrapper */
  body.home .txa-offcanvas-box,
  body.home .txa-offcanvas-box-container {
    background-color: rgb(15, 13, 13);
    color: #ffffff;
  }
  
  /* Make the off‑canvas wrapper transparent on the home page.  The dark
   * background is applied only on the inner container so that the
   * menu appears as a panel rather than covering the entire width. */
  body.home .txa-offcanvas-box {
    /* Darken the overlay outside of the panel to match the internal menu */
    background-color: rgba(0, 0, 0, 0.80);
  }
  
  /* Limit off‑canvas menu width on home page so that it does not occupy
   * the full screen width.  The internal pages present the menu as a
   * side panel that covers roughly 75–85 % of the screen on small
   * devices.  Setting a max‑width gives it a fixed width while still
   * being responsive.  Align it to the right using margin‑left:auto. */
  body.home .txa-offcanvas-box-container {
    /* Reduce the maximum width slightly so the panel size better matches
     * the internal page menu.  The panel will occupy roughly 80 % of
     * small mobile viewports but will not exceed this fixed maximum. */
    max-width: 340px;
    width: 80%;
    margin-left: 0px;
    margin-right: auto;
    height: 100vh;
    overflow-y: auto;
    /*padding: 0 1.5rem;*/
    box-sizing: border-box;
    position: relative;
    left: 0;
    right: auto;
    /* Start with the panel off‑screen to the left.  When the menu becomes
     * active, the transform will be reset to 0 via a separate rule.  The
     * transition property will animate the slide from left to right. */
    transform: translateX(-100%) !important;
    transition: transform 0.5s ease;
  }
  
  /* Close button icon should be white */
  body.home .txa-offcanvas-box-close i {
    color: #000000;
  }
  
  /* Styling for the search field in the off‑canvas menu */
  body.home .txa-offcanvas-search{
    margin:40px 0px 10px 0px !important;
    padding-left:20px !important;
  }

  body.home .txa-offcanvas-search-form{
    max-width: 240px !important;
  }

  body.home .txa-offcanvas-search-form-input {
    /* Dark grey background with subtle contrast for search bar */
    background-color: rgb(45, 45, 45);
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
  }
  
  body.home .txa-offcanvas-search-form-input::placeholder {
    color: #ffffff;
  }
  
  body.home .txa-offcanvas-search-form-input::-webkit-input-placeholder {
    color: #ffffff;
  }
  
  body.home .txa-offcanvas-search-form-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
  }
  
  /* Navigation links inside the off‑canvas menu */
  body.home .txa-offcanvas-box-container .mobile-menu-navigation{
    margin: 20px 0 !important;
  }
  body.home .txa-offcanvas-box-container .mobile-menu-navigation a {
    display: block;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 0.6rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease-in-out;
  }
  
  /* Spacing between menu items inside the off‑canvas menu */
  body.home .txa-offcanvas-box-container .mobile-menu-navigation li {
    margin-bottom: 0.4rem;
  }
  
  body.home .txa-offcanvas-box-container .mobile-menu-navigation li:hover > a,
  body.home .txa-offcanvas-box-container .mobile-menu-navigation li.current-menu-item > a {
    color: #ffffff;
  }

  /* Social icons in the off‑canvas menu */
  body.home .txa-offcanvas-social a i {
    color: #ffffff;
	font-size: 24px !important;
  }
  body.home .txa-offcanvas-social li{
    overflow: visible !important;
  }
  body.home .txa-offcanvas-box:is(.active) .offcanvas-slideup{
    position: relative;
    left: 150px;
  }
  
  /* Insert the site logo at the top of the off‑canvas menu on the
   * homepage.  Internal pages display the brand logo inside the
   * `.mobile_menu_content` block, so here we emulate that by
   * injecting a pseudo‑element before the container contents.  */
  body.home .txa-offcanvas-box-container::before {
    content: "";
    display: block;
    width: 100px;
    height: 48px;
    margin: 0 0 20px 20px;
    background: url('https://www.30xp.fr/wp-content/uploads/2025/02/30xp-RVB-Blanc-color.png') no-repeat center;
    background-size: contain;
  }
  
  /*
   * When the off‑canvas menu is active on the home page, slide the
   * container into view from the left by resetting the translation.
   * The `.offcanvas_box_active` class is toggled on the wrapper when
   * the burger button is clicked.  Without this rule, the panel
   * remains off‑screen due to the negative translation above.
   */
  body.home .offcanvas_box_active .txa-offcanvas-box-container {
    transform: translateX(0) !important;
  }