/*
CTC Separate Stylesheet
Updated: 2025-11-06 15:24:52
                                                       
	 ▄▄▄▄  ▄▄▄   ▄▄▄  ████▄ ▄▄▄▄   ▄▄▄   ▄▄▄   ▄▄▄▄ ▄▄▄▄▄▄ 
	██▀▀▀ ██▀██ ██▀██  ▄██▀ ██▄██ ██▀██ ██▀██ ███▄▄   ██   
	▀████ ▀███▀ ▀███▀ ███▄▄ ██▄█▀ ▀███▀ ▀███▀ ▄▄██▀   ██   
                                                       
                https://www.coo2boost.com/

/* ------------------------------
   HEADER
--------------------------------*/

nav ul li a.is-item-active {border-bottom: 1px solid #222 !important}

nav {text-transform:uppercase;}

nav a.is-item-active, div.elementor-element-cac2fb a, footer a {color:var(--e-global-color-48ef9a0) !important;}

nav a.is-item-active {font-weight:bold !important}

/** FIX du changement de taille du header au premier chargement de la page **/
.elementor-element-699edd34 {width:100%;}

/** FIX du décalage du menu sur tablette/mobile **/
header[data-responsive-breakpoint="tablet-portrait"] {
    padding: 0 5%;
}


/** Correction d'un décalage sur PC portables/Tablettes **/
#main-nav {display:block;}

.elementor-191 .elementor-element.elementor-element-29fad89a {display:block;}

/* ------------------------------
   FOOTER
--------------------------------*/

img.ehp-flex-footer__site-logo {--flex-footer-logo-width:50%;}

footer a:hover {font-weight:bold;}

/* ------------------------------
   PAGES
--------------------------------*/

/** CARDS Internes aux pages **/

#custom_card div.card:hover h2.elementor-heading-title {
	font-weight:700 !important;
	transition:100ms;
}

#custom_card div.card:hover p {
	font-weight:600 !important;
	transition:100ms;
}

div.card:hover {
	box-shadow:-6px 7px 2px 2px #ffd715 !important;
transition:300ms;
}

.ehp-image img:hover {box-shadow:-6px 7px 2px 2px #ffd715 !important;
	transform:translate(5px, -5px);
transition:300ms;}

.ehp-image img {
transition:300ms;}
}

div.elementor-element-4abb5693 {padding:0;}


/** FORMULAIRE DE DEVIS **/

/* ------------------------------
   WRAPPER DU FORMULAIRE
--------------------------------*/
#form_devis {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

/* ------------------------------
   TITRES DES ÉTAPES
--------------------------------*/
#form_devis .elementor-field-group-step {
    margin-bottom: 25px;
}

#form_devis .elementor-step-title {
    font-size: 22px;
    font-weight: 600;
    color: #0078b6;
}

/* ------------------------------
   CHAMPS (input / textarea / select)
--------------------------------*/
#form_devis input[type="text"],
#form_devis input[type="email"],
#form_devis input[type="tel"],
#form_devis textarea,
#form_devis select {
    background: #f7f9fc;
    border: 1px solid #d7dde6;
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.25s ease;
}

#form_devis input:focus,
#form_devis textarea:focus,
#form_devis select:focus {
    border-color: #0078b6;
    box-shadow: 0 0 0 3px rgba(0,120,182,0.15);
    background: #ffffff;
}

/* ------------------------------
   CHECKBOX
--------------------------------*/
#form_devis .elementor-field-type-checkbox label {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin: 6px 0;
    background: #f7f9fc;
    border: 1px solid #d7dde6;
    border-radius: 6px;
    transition: all 0.25s ease;
    cursor: pointer;
}

#form_devis .elementor-field-type-checkbox label:hover {
    background: #eaf4ff;
    border-color: #0078b6;
}

#form_devis input[type="checkbox"]:checked + label {
    background: #0078b6;
    color: #fff;
    border-color: #006ba3;
}

/* Ajuste la case à cocher elle-même */
#form_devis .elementor-field-type-checkbox input[type="checkbox"] {
    margin-right: 8px;
}

/* ------------------------------
   BOUTONS (Suivant / Précédent / Envoyer)
--------------------------------*/
#form_devis button,
#form_devis input[type="submit"] {
    background-color: #0078b6;
    border-radius: 8px;
    padding: 14px 26px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    color: #fff;
    transition: all 0.25s ease;
}

#form_devis button:hover,
#form_devis input[type="submit"]:hover {
    background-color: #005f8e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,120,182,0.25);
}

/* Boutons précédent */
#form_devis .elementor-button.elementor-field-type-step.elementor-prev {
    background-color: #d7dde6 !important;
    color: #333 !important;
}

#form_devis .elementor-button.elementor-field-type-step.elementor-prev:hover {
    background-color: #b8bfc9 !important;
}

/* ------------------------------
   BARRE DE PROGRESSION
--------------------------------*/

#form_devis .e-form__indicators__indicator--active {
    background: #0078b6;
}

#form_devis .e-form__indicators__indicator--completed {
    background: #00b67a;
}

/* ------------------------------
   MESSAGES DE VALIDATION
--------------------------------*/
#form_devis .elementor-message {
    border-radius: 8px;
    padding: 12px 18px;
}

#form_devis .elementor-message.elementor-message-danger {
    background: #ffe5e5;
    border-left: 4px solid #d11a2a;
}

#form_devis .elementor-message.elementor-message-success {
    background: #e6ffed;
    border-left: 4px solid #00b67a;
}

/* Masquer uniquement la case à cocher */
#form_devis .elementor-field-type-checkbox input[type="checkbox"] {
    display: none !important;
}

/* Rendre toute la carte cliquable */
#form_devis .elementor-field-type-checkbox label {
    cursor: pointer;
    position: relative;
    padding-left: 16px;
}

/* Style quand c'est sélectionné */
#form_devis .elementor-field-type-checkbox input[type="checkbox"]:checked + label {
    background: #0078b6;
    color: #fff;
    border-color: #006ba3;
}

#form_devis .elementor-field-type-checkbox label::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 2px solid #0078b6;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    transition: all .25s ease;
}

#form_devis .elementor-field-type-checkbox input[type="checkbox"]:checked + label::after {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}


/** masquer les checkboxs des élements non interactifs **/
#form_devis label[for="form-field-choix"]::after,
#form_devis label[for="form-field-particuliers"]::after,
#form_devis label[for="form-field-pro"]::after {
    display: none;
}


/* ------------------------------
   BOUTONS RADIO (style cartes)
--------------------------------*/

/* Masquer l'input radio */
#form_devis .elementor-field-type-radio input[type="radio"] {
    display: none !important;
}

/* Style des options radio */
#form_devis .elementor-field-type-radio label {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    margin: 6px 0;
    background: #f7f9fc;
    border: 1px solid #d7dde6;
    border-radius: 6px;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}

/* Hover */
#form_devis .elementor-field-type-radio label:hover {
    background: #eaf4ff;
    border-color: #0078b6;
}

/* Style lorsque l’option est sélectionnée */
#form_devis .elementor-field-type-radio input[type="radio"]:checked + label {
    background: #0078b6;
    color: #fff;
    border-color: #006ba3;
}

/* Ajout d’un petit indicateur visuel (comme les checkbox) */
#form_devis .elementor-field-type-radio label::after {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #0078b6;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    transition: all .25s ease;
}

/* Style du “dot” lorsque sélectionné */
#form_devis .elementor-field-type-radio input[type="radio"]:checked + label::after {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.4);
}

#pro,
#particuliers {
    transition: opacity .25s ease;
}

#pro[style*="none"],
#particuliers[style*="none"] {
    opacity: 0;
}

/** FORMULAIRE DE CONTACT **/

/* ------------------------------
   CORPS DU FORMULAIRE - Messages de validation
--------------------------------*/

#contact_form .elementor-message {
    border-radius: 8px;
    padding: 12px 18px;
}

#contact_form .elementor-message.elementor-message-danger {
    background: #ffe5e5;
    border-left: 4px solid #d11a2a;
}

#contact_form .elementor-message.elementor-message-success {
    background: #e6ffed;
    border-left: 4px solid #00b67a;
}


/** ARTICLES **/

/* ------------------------------
   Extrait d'articles - tronquer avec "..." à la fin de l'extrait
--------------------------------*/

.elementor-post__excerpt p {
    display: inline;
}

.elementor-post__excerpt p::after {
    content: "…";
}

/* ------------------------------
   Style bouton - "Lire la suite"
--------------------------------*/

.elementor-post__read-more {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
    background: linear-gradient(135deg, #f5c400, #ffd84d);
    color: #111 !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.15);
    transition: transform .25s ease;
}

.elementor-post__read-more:hover {
    transform: translateY(-3px);
		font-weight:600 !important;
		transition: transform .25s ease;
		
}

div.elementor-post__read-more-wrapper {text-align:center;}