/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


:root {

	/* Couleurs principales */
	--color-green: #009E60;
	--color-blue: #003262;
	--color-terracotta: #C46A4A;

	/* Couleurs neutres */
	--color-white: #FFFFFF;
	--color-off-white: #F8F6F2;
	--color-light-gray: #E9ECEF;
	--color-dark: #2F3437;

	/* Couleurs de texte */
	--text-color: var(--color-dark);
	--text-light: var(--color-white);

	/* Couleurs de fond */
	--background-color: var(--color-off-white);
	--surface-color: var(--color-white);

	/* Couleurs d'accent */
	--primary: var(--color-green);
	--secondary: var(--color-blue);
	--accent: var(--color-terracotta);

}



.mejs-play button{
	background-position: 0 1px!important;
	padding-top: 2px!important;
	padding-bottom: 2px!important;
}
.mejs-play button:hover{

	background-color: var(--color-terracotta);
	
}

.small-line-after {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

.small-line-after::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}


.step-number{
    width:90px;
    height:90px;
    border-radius:50%;
    border: 20px solid #F8F6F1;
    background:var(--color-green);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:20px;
    box-sizing:border-box;
    margin:0 auto;
    line-height:1;

}

.steps{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.steps::before{
    content:"";
    position:absolute;
    top:70px; /* centre du cercle */
    left:17.5%;
    right: 20%;
    width: 65%;
    height:2px;
    background:#ddd;
    z-index:0;
}


.icon-prestas{
    width:80px;
    height:80px;
    border-radius:50%;

    background: rgba(44, 93, 138, 0.12); /* bleu clair */
    color: var(--color-blue);

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto;

    font-size:24px;
}


.presta-card,.card-presta
{
    transition: all 0.25s ease;
}


.presta-card:hover, .card-presta:hover{
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-radius: 12px;
}


.mejs-horizontal-volume-total{

    width: 60%!important;
}

.sr_it-playlist-title{
    color: var(--color-blue);
    text-align: center;
    font-size: 23px!important;
}

.track-list{
    box-shadow:
    0 1px 3px rgba(0,0,0,.06),
    0 12px 35px rgba(0,0,0,.10);
}

.srp_subtitle{
    background: #f2f2f2;
    padding: 7px 20px;
    border-radius: 8px;
    margin-top: 10px;
}

#menu-header  li:not(.menu-contact){
    margin-right: 20px;
}
/* Liens du menu sauf .menu-contact */
#menu-header li:not(.menu-contact) > a{
    position: relative;
    text-decoration: none;
    transition: color .3s ease;
}

#menu-header li:not(.menu-contact) > a::after{
    content: "";
    position: absolute;
    left: 7px;
    bottom: 6px;
    width: 90%;
    height: 2px;
    background: #003262;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

#menu-header li:not(.menu-contact) > a:hover{
    color: #003262;
}

#menu-header li:not(.menu-contact) > a:hover::after{
    transform: scaleX(1);
}

/* Actif */
#menu-header li.current-menu-item:not(.menu-contact) > a,
#menu-header li.current_page_item:not(.menu-contact) > a{
    color: #003262;
    font-weight: 700;
}

header{
    position:absolute!important;
    top:0;
    left:0;
    width:100%;
    z-index:100;
}




form label {
    padding-bottom: 15px
}

.wpcf7-form-control-wrap {
    display: inline-block;
    padding-top: 10px
}

.wpcf7-form .policy a{
    color: var(--color-blue);
}

.wpcf7-form-control.wpcf7-submit {
    background: var(--color-green) !important;
    color: #fff;
    border: none;
}


.wpcf7-response-output {
    display: none;
}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
    display: block;
}


.srp_meta.track-title{
    font-weight: bold;
}

.toggle-text-widget {
text-align:center

}

/* 
#sonaar_wave_base_canvas {
    filter: invert(1);
}


#sonaar_wave_base_canvas {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(200deg) brightness(118%) contrast(119%);
}*/
@media(min-width:768px){

    .desktop-hidden{ display: none; }

}

@media(max-width:768px){

.mobile-hidden{ display: none; }

.rmp-menu-additional-content a[href="tel:+33626851551"]{
  

    font-size:20px!important; color:#003262!important
}

#rmp-menu-title-link span span{
    color:#009E60 ;
}

#cta-home {

   
    background-position: center;

}
    .steps{
        flex-direction:column;
        gap:40px;
    }

    .steps::before{
        display:none;
    }

/* État initial */
#top-header{
    background: transparent;
    transition: background-color .3s ease;
}
}
/* Après scroll sur mobile */
@media (max-width:768px){
    body.header-scroll #top-header{
        background:#fff;
    }
}


.approche-content p{
    min-height: 75px;
}
@media (min-width: 1025px) and (max-width: 1560px){

#intro-header{

    background-position-x: -215px;
}
    #header-titre{margin-top:205px}

   #logo-footer {
    padding: 0px;
}
#logo-titre{
    padding: 10px 0 0 0;
}
#logo-footer h6{
    font-size: 20px;
}

.logo-name p{
    font-size: 12px;
}

.tagline-footer p{
font-size: 15px;

}

.approche-titre h2{
    font-size: 25px;
}

#prestations-1, #prestations-2, #approche{
    padding: 0px 15px;
}

#prestations-1 p, #prestations-2 p{
    font-size: 13px;
}

#cta-home {

   
    background-position: center;
    background-size: contain;
}

#cta-home h2{
    margin-top: 50px;
}

#btn-home-1,#btn-home-2{
    width: 35%;
}

#btn-home-2 a{
    background: rgba(255,255,255,0.8);
}

#btn-home-2{
    justify-content: start;
}

#intro-contact{
    padding-left:20px
}

#intro-contact p{
    font-size: 16px;
}


#intro-contact h1{
    font-size: 30px;
}

#contact-form h2{
    font-size: 25px;
}

#contact-form form{

    padding: 0 40px;
}

#top-header{
    padding: 0 15px;
}

#footer-vjl{
    padding: 20px 30px 0 20px;
}

#top-header.is-fixed{
    max-width: 100%!important;
}

#notice-demo{
    width: 85%;
}
}

.btn-contact{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 28px;
    text-decoration: none;
    text-transform: uppercase;
    background:#009E60;
    color:#fff !important;

    border-radius:8px;

    font-weight:600;
    text-decoration:none!important;

    transition:
        background-color .25s ease,
        transform .2s ease,
        box-shadow .25s ease;
}

.btn-contact:hover{
    background:#00b56d;
    color:#fff !important;

    transform:translateY(-2px);


    box-shadow:0 8px 20px rgba(0,158,96,.25);
}

.btn-contact:active{
    transform:translateY(0);
}

.btn-contact:focus-visible{
    outline:2px solid rgba(0,158,96,.35);
    outline-offset:3px;
}

@media (min-width: 1025px) and (max-width: 1260px){

    #prestations-1 h2, #prestations-2 h2{
    font-size: 15px;
}

#prestations-1 p, #prestations-2 p{
    font-size: 13px;
}


}
@media (min-width: 1025px){

    #top-header{
        transition:
        background-color .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease,
        transform .35s ease,
        padding .35s ease;
    }

    #top-header.is-fixed{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background: rgba(255,255,255,.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 8px 30px rgba(0,0,0,.12);
        animation: headerSlideDown .35s ease;
    }

    @keyframes headerSlideDown{
        from{
            transform: translateY(-100%);
            opacity: 0;
        }
        to{
            transform: translateY(0);
            opacity: 1;
        }
    }
}