@charset "UTF-8";

/***************************/
/***************************/
/********** FONTS **********/
/***************************/
/***************************/

/****************************/
/********** FAMILY **********/
/****************************/

/**
google fonts = https://fonts.google.com/specimen/Poppins
font-family: 'Open-Dyslexic', sans-serif;                                            
**/

body {
	--font-family: 'Poppins', sans-serif;
	--font-family-dyslexia: 'Open-Dyslexic', sans-serif;
	--font-weight-normal: 300;
	--font-weight-medium: 500;
	--font-weight-bold: 600;
}
body.dyslexia {
	font-family: var(--font-family-dyslexia);
}

/********************************/
/********** FONT SIZES **********/
/********************************/

/**
--font-size, --line-height	= default
--main-title-size, --description-title-size, --grid-title-size	= titles
--button-font-size, --go-back-size	= navigation
**/


@media (min-width:0px) {
	body {
		/* default */
		--font-size: 1rem;
		--line-height: .125rem;
		/* titles */
		--main-title-size: -webkit-calc(var(--font-size) * 3);
		--main-title-size: -moz-calc(var(--font-size) * 3);
		--main-title-size: calc(var(--font-size) * 3);
		--description-title-size: -webkit-calc(var(--font-size) * 1.5);
		--description-title-size: -moz-calc(var(--font-size) * 1.5);
		--description-title-size: calc(var(--font-size) * 1.5);
		--grid-title-size: -webkit-calc(var(--font-size) * 1.25);
		--grid-title-size: -moz-calc(var(--font-size) * 1.25);
		--grid-title-size: calc(var(--font-size) * 1.25);
		/* navigation */
		--button-font-size: -webkit-calc(var(--font-size) * .75);
		--button-font-size: -moz-calc(var(--font-size) * .75);
		--button-font-size: calc(var(--font-size) * .75);
		--go-back-size: 2.5em;
	}
}
@media (min-width:760px) {
	body {
		/* titles */
		--main-title-size: -webkit-calc(var(--font-size) * 6);
		--main-title-size: -moz-calc(var(--font-size) * 6);
		--main-title-size: calc(var(--font-size) * 6);
		--grid-title-size: -webkit-calc(var(--font-size) * 2);
		--grid-title-size: -moz-calc(var(--font-size) * 2);
		--grid-title-size: calc(var(--font-size) * 2);
		/* navigation */
		--button-font-size: -webkit-calc(var(--font-size) * .875);
		--button-font-size: -moz-calc(var(--font-size) * .875);
		--button-font-size: calc(var(--font-size) * .875);
		--go-back-size: 5em;
	}
}
@media (min-width:1000px) {
	body {
		/* titles */
		--main-title-size: -webkit-calc(var(--font-size) * 8);
		--main-title-size: -moz-calc(var(--font-size) * 8);
		--main-title-size: calc(var(--font-size) * 8);
	}
}
@media (min-width:1200px) {
	body {
		/* titles */
		--main-title-size: -webkit-calc(var(--font-size) * 10);
		--main-title-size: -moz-calc(var(--font-size) * 10);
		--main-title-size: calc(var(--font-size) * 10);
	}
}
@media (min-width:1600px) {
	body {
		/* titles */
		--main-title-size: -webkit-calc(var(--font-size) * 14);
		--main-title-size: -moz-calc(var(--font-size) * 14);
		--main-title-size: calc(var(--font-size) * 14);
		--grid-title-size: -webkit-calc(var(--font-size) * 2.5);
		--grid-title-size: -moz-calc(var(--font-size) * 2.5);
		--grid-title-size: calc(var(--font-size) * 2.5);
	}
}

/****************************/
/****************************/
/********** MEDIAS **********/
/****************************/
/****************************/

/************************/
/********** FX **********/
/************************/

body {
	--line-break-ratio: 1300/16;
	--line-break: url('../images/layout/slpj-separator.svg');
	--line-separator-ratio: 247.19/16;
	--line-separator-2: url('../images/layout/slpj-separator-02.svg');
}

/**************************/
/********** LOGO **********/
/**************************/

@media (min-width:0px) {
	body {
		--logo-height:3rem;
	}
}
@media (min-width:760px) {
	body {
		--logo-height:4rem;
	}
}
@media (min-width:1000px) {
	body {
		--logo-height:6rem;
	}
}

/****************************/
/****************************/
/********** COLORS **********/
/****************************/
/****************************/

/**
salon
actions
formations
kibookin
medias
**/

body {
	/* standard */
	--dark-rgb: 0, 0, 0;
	--light-rgb: 245, 245, 240;
	--bright-rgb: 255, 255, 255;
	/*--accent-rgb: 97, 255, 0;*/ /* green */
	--accent-rgb: 255, 129, 178;
	--alert-rgb: 255, 0, 0;
	--dark-color: rgb(var(--dark-rgb));
	--light-color: rgb(var(--light-rgb));
	--bright-color: rgb(var(--bright-rgb));
	--accent-color: rgb(var(--accent-rgb));
	--alert-color: rgb(var(--alert-rgb));
	/* in functions.php */
	/* variations */
	--lighter-brightness: 1.2;
	--darker-brightness: .8;
}

/*******************************/
/*******************************/
/********** STRUCTURE **********/
/*******************************/
/*******************************/

/*
--viewport-height
--banner-height
*/

/******************************/
/********** VIEWPORT **********/
/******************************/

body {
	--viewport-height: 100svh;
	--banner-height: 60svh;
}

/*****************************/
/********** HEIGHTS **********/
/*****************************/

/*
navbar height	: based on icons heights (1em) > for --header-height
primary height	: 1.25em + .5em x 2 padding == 2.25em > use for #navigation / for --header-height
*/

@media (min-width: 0px) {
	body {
		--header-height:-webkit-calc(var(--font-size) * 6);
		--header-height:-moz-calc(var(--font-size) * 6);
		--header-height:calc(var(--font-size) * 6);
		--footer-height: -webkit-calc(var(--font-size) * 3);
		--footer-height: -moz-calc(var(--font-size) * 3);
		--footer-height: calc(var(--font-size) * 3);
		--contextual-height: -webkit-calc(var(--font-size) * 3);
		--contextual-height: -moz-calc(var(--font-size) * 3);
		--contextual-height: calc(var(--font-size) * 3);
	}
}
@media (min-width: 760px) {
	body {
		--header-height: -webkit-calc((var(--font-size) * 6) + (var(--global-spacing) * 2));
		--header-height: -moz-calc((var(--font-size) * 6) + (var(--global-spacing) * 2));
		--header-height: calc((var(--font-size) * 6) + (var(--global-spacing) * 2));
		--contextual-height: -webkit-calc(var(--font-size) * .75 + var(--font-size) * .75 * .5 * 2 + var(--global-spacing) * 2);
		--contextual-height: -moz-calc(var(--font-size) * .75 + var(--font-size) * .75 * .5 * 2 + var(--global-spacing) * 2);
		--contextual-height: calc(var(--font-size) * .75 + var(--font-size) * .75 * .5 * 2 + var(--global-spacing) * 2);
	}
}

/***************************/
/********** FORMS **********/
/***************************/

@media (min-width:0px) {
	body {
		--input-min-height:3rem;
	}
}
@media (min-width:760px) {
	body {
		--input-min-height:4rem;
	}
}

/*******************************/
/********** MAX WIDTH **********/
/*******************************/

/**
50rem	== 800px
62.5rem	== 1000px
75rem	== 1200px
87.5rem	== 1400px
**/

body {
	--short-content-maxwidth: 62.5rem;
	--content-maxwidth: 87.5rem;
}

/*****************************/
/********** GUTTERS **********/
/*****************************/

/**
--gutter-gap		= structure
-- global-spacing	= content
**/

/** gutter gap **/
@media (min-width: 0px) {
	body {
		--gutter-gap: 1rem;
		--global-spacing: 1rem;
		--heading-spacing: 2rem;
	}
}
@media (min-width: 760px) {
	body {
		--gutter-gap: 2rem;
		--global-spacing: 2rem;
		--heading-spacing: 4rem;
	}
}
@media (min-width: 1200px) {
	body {
		--gutter-gap: 3rem;
	}
}

/***************************/
/***************************/
/********** GRIDS **********/
/***************************/
/***************************/

/**
--ad-item-width == 400px 1/1
**/

@media (min-width: 0px) {
	body {
		--item-width: 100%;
		--book-item-width: -webkit-calc(100% / 2);
		--book-item-width: -moz-calc(100% / 2);
		--book-item-width: calc(100% / 2);
		--ad-item-width: 25rem;
	}
}
@media (min-width: 480px) {
	body {
		--item-width: 50%;
		--book-item-width: -webkit-calc(100% / 3);
		--book-item-width: -moz-calc(100% / 3);
		--book-item-width: calc(100% / 3);
	}
}
@media (min-width: 760px) {
	body {
		--book-item-width: -webkit-calc(100% / 4);
		--book-item-width: -moz-calc(100% / 4);
		--book-item-width: calc(100% / 4);
	}
}
@media (min-width: 1000px) {
	body {
		--item-width: -webkit-calc(100% / 3);
		--item-width: -moz-calc(100% / 3);
		--item-width: calc(100% / 3);
		--book-item-width: -webkit-calc(100% / 5);
		--book-item-width: -moz-calc(100% / 5);
		--book-item-width: calc(100% / 5);
	}
}

/******************************/
/******************************/
/********** OVERLAYS **********/
/******************************/
/******************************/

/*
--overlay-bg-opacity, --overlay-border-radius	= default
--overlay-width-short, --overlay-width-limit	= modals
*/

body {
	--overlay-bg-opacity: .66;
	--overlay-border-radius: 2em;
	--overlay-width-short: 60%;
	--overlay-width-limit: 40rem;
}