:root {
    color-scheme: light dark;
    
	/* BORDER */
	--border-radius: .5rem;
	--border-radius-btn: .25rem;
	--border-width: 1px;
    --outline-width: 2px;
		
    
	/* WRAPPER / GRID */
	--wrapper-size: 106.25rem;
    --wrapper-size-small: 60rem;
    --wrapper-size-mobile: 90%;
	--items-margin: clamp(.5rem, .125rem + 1.875vw, 2rem);
	--items-gap: 2rem;
    --items-min-size: 20rem;
		
    
	/* HEADER / LOGO */
    --logo-ratio: 150 / 64;
    --logo-height: clamp(2rem, 1.6rem + 2vw, 4rem);
    --padding-header: clamp(1rem, .75rem + 1.25vw, 2rem);
			
    
    /* PRIMITIVE COLORS */
    --dark-color: #0C3A30;
    --light-color: #F5F5F5;
	
	--primary-color: light-dark(#70B52C, #70B52C);
    --primary-hover-color: light-dark(hsl(from var(--primary-color) h calc(s + 5) calc(l - 20)), hsl(from var(--primary-color) h s calc(l + 20)));
    --primary-active-color: light-dark(hsl(from var(--primary-color) h calc(s + 5) calc(l - 35)), hsl(from var(--primary-color) h s calc(l + 30)));
	
	--secondary-color: light-dark(#EFBA94, #EFBA94);
    --secondary-hover-color: light-dark(hsl(from var(--secondary-color) h calc(s + 5) calc(l - 20)), hsl(from var(--secondary-color) h s calc(l + 20)));
    --secondary-active-color: light-dark(hsl(from var(--secondary-color) h calc(s + 5) calc(l - 35)), hsl(from var(--secondary-color) h s calc(l + 30)));
      
    
    /* ALERTS */
    --alert-danger-color: light-dark(#DF2935, #eb7a81);    
    --alert-danger-bg: hsl(from var(--alert-danger-color) h s l / .1);    
    --alert-danger-border: hsl(from var(--alert-danger-color) h s l / .15);    
    --alert-danger-outline: hsl(from var(--alert-danger-color) h s l / .3);
    
    --alert-warning-color: light-dark(#E8814A, #eda178);
    --alert-warning-bg: hsl(from var(--alert-warning-color) h s l / .1);    
    --alert-warning-border: hsl(from var(--alert-warning-color) h s l / .15);    
    --alert-warning-outline: hsl(from var(--alert-warning-color) h s l / .3);
    
    --alert-success-color: light-dark(#4FB477, #6be19a);  
    --alert-success-bg: hsl(from var(--alert-success-color) h s l / .1);    
    --alert-success-border: hsl(from var(--alert-success-color) h s l / .15);    
    --alert-success-outline: hsl(from var(--alert-success-color) h s l / .3);
    
    --alert-info-color: light-dark(#3b82f6, #9ec1fa);  
    --alert-info-bg: hsl(from var(--alert-info-color) h s l / .1);
    --alert-info-border: hsl(from var(--alert-info-color) h s l / .15);
    --alert-info-outline: hsl(from var(--alert-info-color) h s l / .3);
    
    
    /* ELEMENT COLORS */
	--background-color: light-dark(var(--light-color), var(--dark-color));
    --background-grey: color-mix(in hsl, var(--background-color), var(--title-color) 5%);
	--background-primary: hsl(from var(--primary-color) h s l / .10);
	--background-scrollbar: hsl(from var(--primary-color) h s l / .25);
	--background-dark: light-dark(var(--dark-color), var(--light-color));
    --background-secondary: light-dark(var(--secondary-color), var(--secondary-color));
    
    --border-color: var(--muted-color);
    --border-hover-color: var(--text-color);
    --border-focus-color: var(--primary-color);
    
	--title-color: light-dark(var(--dark-color), var(--light-color));
	--strong-color: hsl(from var(--title-color) h s l / .95);
	--text-color: hsl(from var(--title-color) h s l / .85);
	--muted-color: hsl(from var(--title-color) h s l / .6);
	--outline-color: hsl(from var(--title-color) h s l / .3);
	--shadow-color: hsl(from var(--title-color) h s l / .15);
		
	
	/* FONTS */
	--font-title: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--font-text: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-icon: normal 400 var(--text-size-normal)/1 "inodia-icons";
	--letter-spacing: 0;
		
	
	/* FONT SIZES */
	--h1-font-size: clamp(1.75rem, 1.2rem + 2.75vw, 4.5rem);
	--h2-font-size: clamp(1.5rem, 1.1rem + 2vw, 3.5rem);
	--h3-font-size: clamp(1.5rem, 1.375rem + .625vw, 2rem);
	--h4-font-size: clamp(1.25rem, 1.1875rem + .3125vw, 1.5rem);
	--text-size-big: clamp(1rem, .95rem + .25vw, 1.25rem);
	--text-size-normal: 1rem;
    --text-size-small: .75rem;
		
	
	/* FONT WEIGHT */
	--text-weight-normal: 300;
    --text-weight-medium: 500;
    --text-weight-bold: 700;
	
	
	/* MARGES */    
    --spacing-4xs: .25rem;
    --spacing-3xs: .5rem;
    --spacing-2xs: .75rem;
    --spacing-xs: 1rem;
    --spacing-sm: clamp(1rem, .875rem + .625vw, 1.5rem);
    --spacing-md: clamp(1.5rem, 1.375rem + .625vw, 2rem);
    --spacing-lg: clamp(2rem, 1.75rem + 1.25vw, 3rem);
    --spacing-xl: clamp(2.5rem, 2.125rem + 1.875vw, 4rem);
    --spacing-2xl: clamp(3rem, 2.25rem + 3.75vw, 6rem);
    --spacing-3xl: clamp( 4rem, 3rem + 5vw, 8rem);
    --spacing-4xl: clamp(5rem, 3.75rem + 6.25vw, 10rem);
    --columns-gap: 9%;
		
	
	/* TRANSITIONS */
    --transition-default: all .3s ease-in-out, outline .1s ease-in-out;
		
	
	/* VECTORS */
    
}

@media (prefers-contrast: more) {
    
    :root {
    
        /* ALERTS */   
        --alert-danger-bg: transparent;    
        --alert-danger-border: var(--alert-danger-color);    
        --alert-danger-outline: var(--alert-danger-color);

        --alert-warning-bg: transparent;    
        --alert-warning-border: var(--alert-warning-color);    
        --alert-warning-outline: var(--alert-warning-color);
 
        --alert-success-bg: transparent;    
        --alert-success-border: var(--alert-success-color);    
        --alert-success-outline: var(--alert-success-color);
 
        --alert-info-bg: transparent;
        --alert-info-border: var(--alert-info-color);
        --alert-info-outline: var(--alert-info-color);
        

        /* ELEMENT COLORS */
        --border-color: light-dark(var(--dark-color), var(--light-color));
        --border-hover-color: light-dark(var(--dark-color), var(--light-color));    
        --text-color: light-dark(var(--dark-color), var(--light-color));
        --strong-color: light-dark(var(--dark-color), var(--light-color));
        --placeholder-color: light-dark(var(--dark-color), var(--light-color));
        --muted-color: light-dark(var(--dark-color), var(--light-color));
        --muted-invert: light-dark(var(--light-color), var(--dark-color));
        --outline-color: light-dark(var(--dark-color), var(--light-color));
    }
}



/* ICONS SET */
.inodia-icons.play:before,
.bouton.icon-play a > span:before {
  content: "\e90a";
}
.inodia-icons.phone:before {
  content: "\e90f";
}
.inodia-icons.package:before {
  content: "\e90e";
}
.inodia-icons.nuancier:before {
  content: "\e90d";
}
.inodia-icons.star:before {
  content: "\e911";
}
.inodia-icons.profile:before {
  content: "\e910";
}
.inodia-icons.linkedin:before {
  content: "\e909";
}
.inodia-icons.instagram:before {
  content: "\e908";
}
.inodia-icons.facebook:before {
  content: "\e907";
}
.inodia-icons.checkmark:before {
  content: "\e906";
}
.bouton.download a > span:after,
.inodia-icons.download:before {
  content: "\e905";
}
.inodia-icons.upload:before {
  content: "\e904";
}
.inodia-icons.arrow_left:before {
  content: "\e903";
}
.inodia-icons.arrow_right:before {
  content: "\e902";
}
.inodia-icons.arrow_up:before {
  content: "\e901";
}
.inodia-icons.arrow_down:before {
  content: "\e900";
}
.inodia-icons.search:before {
  content: "\e912";
}





/* ----------------------------------- */
/*
/* ----------- RESPONSIVE ------------ */
/*
/* ----------------------------------- */

/* 960px */
@media screen and (max-width: 60rem) {
	
	:root {
        --wrapper-size-mobile: 85%;
	    --items-gap: calc(var(--items-margin) * 4) var(--items-margin);
	}	
}