/**
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;
}

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


h1.elementor-heading-title.elementor-size-default {
    color: var(--title-brand-900);
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height:  72px; 
    letter-spacing: -1.2px;
}

.light h1.elementor-heading-title.elementor-size-default {
  color: var(--title-brand-50-light);
}
  
h2.elementor-heading-title.elementor-size-default {
    color: var(--title-brand-900);
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px; 
    letter-spacing: -0.72px;
}

.light h2.elementor-heading-title.elementor-size-default {
  color: var(--title-brand-50-light);
}
  
h3.elementor-heading-title.elementor-size-default {
    color: var(--title-brand-900);
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 38px; /* 126.667% */
}

.light h3.elementor-heading-title.elementor-size-default {
  color: var(--title-brand-50-light);
}
  
h4.elementor-heading-title.elementor-size-default {
    color: var(--title-brand-500);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; 
}

.light h4.elementor-heading-title.elementor-size-default {
  color: var(--title-brand-50-light);
}
  
p {
    color: var(--text-brand-800);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 150% */
}

.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;
}


/* Styles de base (desktop) */
h1.elementor-heading-title.elementor-size-default {
    color: var(--title-brand-900);
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height: 72px;
    letter-spacing: -1.2px;
}

.light h1.elementor-heading-title.elementor-size-default {
  color: var(--title-brand-50-light);
}

h2.elementor-heading-title.elementor-size-default {
    color: var(--title-brand-900);
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -0.72px;
}

.light h2.elementor-heading-title.elementor-size-default {
  color: var(--title-brand-50-light);
}

h3.elementor-heading-title.elementor-size-default {
    color: var(--title-brand-900);
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 38px;
}

.light h3.elementor-heading-title.elementor-size-default {
  color: var(--title-brand-50-light);
}

h4.elementor-heading-title.elementor-size-default {
    color: var(--title-brand-500);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.light h4.elementor-heading-title.elementor-size-default {
  color: var(--title-brand-50-light);
}

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

.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;
}

/* RESPONSIVE TABLETTE */
@media (max-width: 1024px) {
  h1.elementor-heading-title.elementor-size-default {
    font-size: 42px;
    line-height: 52px;
  }

  h2.elementor-heading-title.elementor-size-default {
    font-size: 30px;
    line-height: 38px;
  }

  h3.elementor-heading-title.elementor-size-default {
    font-size: 26px;
    line-height: 34px;
  }

  h4.elementor-heading-title.elementor-size-default {
    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) {
  h1.elementor-heading-title.elementor-size-default {
    font-size: 28px;
    line-height: 35px;
  }

  h2.elementor-heading-title.elementor-size-default {
    font-size: 24px;
    line-height: 30px;
  }

  h3.elementor-heading-title.elementor-size-default {
    font-size: 20px;
    line-height: 28px;
  }

  h4.elementor-heading-title.elementor-size-default {
    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;
  }
}