/**
Theme Name: vitreclaire-child
Author: Wecode
Author URI: https://wecode.swiss
Description: Thème personnalisé pour VEC, entreprise spécialisée dans le nettoyage, l’entretien et les services professionnels en Suisse romande.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vec
Template: astra
*/

:root {
    /* === TITLES === */
    --title-brand-900: #0C436E;
    --title-brand-500: #0D95EA;
    --title-brand-50-light: #F0F8FF;

    /* === TEXT === */
    --text-brand-800: #075085;
    --text-white-light: #ffffff;

    /* === GLOBAL COLORS === */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray: #535862;

    --color-brand-25: #F4FAFF;
    --color-brand-50: #F0F8FF;
    --color-brand-100: #E0F0FE;
    --color-brand-200: #BAE1FD;
    --color-brand-300: #7DCAFC;
    --color-brand-400: #43B4F9;
    --color-brand-500: #0D95EA;
    --color-brand-600: #0176C8;
    --color-brand-700: #025EA2;
    --color-brand-800: #075085;
    --color-brand-900: #0C436E;
    --color-brand-950: #082A49;

    /* === GLOBAL WEIGHT === */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
}

/* Set Onest as default font for the entire site */
body {
    font-family: 'Onest', sans-serif;
}

/* TITLES */

/* h1 */
.title-s1 p,
.title-s1 h1,
.title-s1 h2,
.title-s1 h3,
.title-s1 h4,
.title-s1 h5,
.title-s1 h6 {
    color: var(--title-brand-900);
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height: 72px;
    letter-spacing: -1.2px;
}

.light.title-s1 p,
.light.title-s1 h1,
.light.title-s1 h2,
.light.title-s1 h3,
.light.title-s1 h4,
.light.title-s1 h5,
.light.title-s1 h6 {
    color: var(--title-brand-50-light);
}

/* h2 */
.title-s2 p,
.title-s2 h1,
.title-s2 h2,
.title-s2 h3,
.title-s2 h4,
.title-s2 h5,
.title-s2 h6 {
    color: var(--title-brand-900);
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -0.72px;
}

.light.title-s2 p,
.light.title-s2 h1,
.light.title-s2 h2,
.light.title-s2 h3,
.light.title-s2 h4,
.light.title-s2 h5,
.light.title-s2 h6 {
    color: var(--title-brand-50-light);
}

/* h3 */
.title-s3 p,
.title-s3 h1,
.title-s3 h2,
.title-s3 h3,
.title-s3 h4,
.title-s3 h5,
.title-s3 h6 {
    color: var(--title-brand-900);
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 38px;
}

.light.title-s3 p,
.light.title-s3 h1,
.light.title-s3 h2,
.light.title-s3 h3,
.light.title-s3 h4,
.light.title-s3 h5,
.light.title-s3 h6 {
    color: var(--title-brand-50-light);
}

/* h4 */
.title-s4 p,
.title-s4 h1,
.title-s4 h2,
.title-s4 h3,
.title-s4 h4,
.title-s4 h5,
.title-s4 h6 {
    color: var(--title-brand-500);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.light.title-s4 p,
.light.title-s4 h1,
.light.title-s4 h2,
.light.title-s4 h3,
.light.title-s4 h4,
.light.title-s4 h5,
.light.title-s4 h6 {
    color: var(--title-brand-50-light);
}

p,
.p {
    color: var(--text-brand-800);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 150% */
}

.light p,
.light.p {
    color: var(--text-white-light);
}

.small p {
    font-size: 15px;
    line-height: 24px;
}

.large p {
    font-size: 20px;
    line-height: 28px;
}

.card p {
    font-size: 16px;
    line-height: 26px;
}

.list p {
    font-size: 15px;
    line-height: 24px;
    color: var(--color-gray);
}

.pastille p {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.small span {
    font-size: 15px;
    line-height: 24px;
    color: var(--color-white);
}

.elementor-button-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.elementor-button-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.secondary .elementor-button {
    background-color: var(--color-brand-50);
    color: var(--color-brand-900);
}


.secteur {
    margin-bottom: 12px;
    margin-top: 12px;
    background: white;
    border-radius: 10px;
    padding: 12px;
}

.secteur:hover,
.secteur:hover .elementor-icon-box-description,
.secteur:hover .elementor-icon-box-icon svg path {
    background-color: var(--color-brand-950);
    color: var(--color-white) !important;
}

.secteur:hover .elementor-icon-box-icon svg path {
    fill: var(--color-white) !important;
}



/* RESPONSIVE TABLETTE */
@media (max-width: 1024px) {
	.title-s1 p,
    .title-s1 h1,
    .title-s1 h2,
    .title-s1 h3,
    .title-s1 h4,
    .title-s1 h5,
    .title-s1 h6 {
        font-size: 42px;
        line-height: 52px;
    }

	.title-s2 p,
    .title-s2 h1,
    .title-s2 h2,
    .title-s2 h3,
    .title-s2 h4,
    .title-s2 h5,
    .title-s2 h6 {
        font-size: 30px;
        line-height: 38px;
    }

	.title-s3 p,
    .title-s3 h1,
    .title-s3 h2,
    .title-s3 h3,
    .title-s3 h4,
    .title-s3 h5,
    .title-s3 h6 {
        font-size: 26px;
        line-height: 34px;
    }

	.title-s4 p,
    .title-s4 h1,
    .title-s4 h2,
    .title-s4 h3,
    .title-s4 h4,
    .title-s4 h5,
    .title-s4 h6 {
        font-size: 16px;
        line-height: 24px;
    }

    p,
    .card p,
    .list p,
    .large p {
        font-size: 16px;
        line-height: 26px;
    }
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {

	.title-s1 p,
    .title-s1 h1,
    .title-s1 h2,
    .title-s1 h3,
    .title-s1 h4,
    .title-s1 h5,
    .title-s1 h6 {
        font-size: 28px;
        line-height: 35px;
    }

	.title-s2 p,
    .title-s2 h1,
    .title-s2 h2,
    .title-s2 h3,
    .title-s2 h4,
    .title-s2 h5,
    .title-s2 h6 {
        font-size: 24px;
        line-height: 30px;
    }

	.title-s3 p,
    .title-s3 h1,
    .title-s3 h2,
    .title-s3 h3,
    .title-s3 h4,
    .title-s3 h5,
    .title-s3 h6 {
        font-size: 20px;
        line-height: 28px;
    }

	.title-s4 p,
    .title-s4 h1,
    .title-s4 h2,
    .title-s4 h3,
    .title-s4 h4,
    .title-s4 h5,
    .title-s4 h6 {
        font-size: 14px;
        line-height: 20px;
    }

    p,
    .card p,
    .list p,
    .large p {
        font-size: 15px;
        line-height: 24px;
    }

    .pastille p {
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
    }

    .elementor-button-text {
        font-size: 14px;
        line-height: 20px;
    }
}



.elementor-g-recaptcha{
	display: none !important;
}

.elementor-field-group .elementor-select-wrapper select {
	font-size: 16px;
    line-height: 26px;
}

#form-field-field_commune {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  padding-right: 30px; /* espace si tu veux rajouter une flèche custom */
  cursor: pointer; /* curseur main au survol */
}

#form-field-field_commune:hover {
  border-color: #000; /* optionnel : mettre un petit effet visuel */
}