/* .............................................................................
CONFIGS
................................................................................

EXPLICATION DES FICHIERS :
- Dev : assets/css/
- Prod : task "grunt buildcss" pour builder le CSS build/css/main.css


COULEURS :
- Voir les vars plus bas.


TRANSITION :
- cubic-bezier(0.4, 0, 0.2, 1)


NAMING CONVENTIONS :
- Blocks = section d'une page, ex : .bMain, .bBoxesList.
- Items = partie importante reutilisable, ex : .iBox, .iAccordion.
- Text = style precis pour texte, ex : .tBig, .tUpper


REFERENCES :
Desktop-first :
@media (max-width:1999px) {}    124.99rem
@media (max-width:1499px) {}    93rem
@media (max-width:1199px) {}    75rem
@media (max-width:991px) {}     62rem
@media (max-width:736px) {}     46rem

Mobile-first :
@media (min-width:737px) {}     46.01rem
@media (min-width:992px) {}     62.01rem
@media (min-width:1200px) {}    75.01rem
@media (min-width:1500px) {}    93.01rem
@media (min-width:2000px) {}    125rem
*/


/*
COLORS */
:root {
	/* Colors */
	--color-accent: red;
	--color-black: #000;
	--color-white: #fff;
	--color-green-dark: #1D484D;
	--color-green: #BFD6BA;
	--color-green-light: #F3F7F1;
	--color-green-vivid: #58AA91;
	--color-beige: #F9DECA;
	--color-orange: #EE772A;
	--color-jaune: #FBB928;
	--color-blue: #3687C8;
	--color-pink: #F08580;

	/* Text and BG */
	--color-base: var(--color-green-dark);
	--color-base-on-dark: var(--color-green);
	--color-bg-base: var(--color-green-light);
}



/*
BASE WIDTHS
L'application des valeurs est dans base.css. */
:root {
	--width-std: 4vw;

	--width-std-left: var(--width-std);
	--width-std-right: var(--width-std);

	/* Narrow */
	--width-narrow: calc(1.9 * var(--width-std));
	--width-narrow-left: var(--width-narrow);
	--width-narrow-right: var(--width-narrow);

	/* 4k overflow sides */
	--overflow-std-left: var(--width-std-left);
	--overflow-std-right: var(--width-std-right);
}

	/* Ultra large, on restreint la largeur maximale */
	@media (min-width:125rem) {
		:root {
			--width-std: 4rem;

			--width-std-left: calc(45vw - 51rem);
			--width-std-right: calc(45vw - 51rem);

			--overflow-std-left: 4.2vw;
			--overflow-std-right: 4.2vw;
		}
	}

	/* Tablet */
	@media (max-width:62rem) {
		:root {
			--width-narrow: var(--width-std);
		}
	}

	/* Mobile */
	@media (max-width:46rem) {
		:root {
			--width-std: 6vw;
		}
	}



/*
BASE SPACINGS
L'application des valeurs est dans site-blocks.css. */
:root {
	--base-spacing: 7.002em;
	--base-spacing-top: var(--base-spacing);
	--base-spacing-bottom: var(--base-spacing);
}

	@media (max-width:62rem) {
		:root {
			--base-spacing: 5.5002em;
		}
	}

	@media (max-width:46rem) {
		:root {
			--base-spacing: 4.002em;
		}
	}



/*
GRID
Gap commun. */
:root {
	--grid-gap:2vw;
}

	@media (min-width:125rem) {
		:root {
			--grid-gap:2em;
		}
	}



/*
TOPBAR HEIGHT
La hauteur du topBar affecte plusieurs elements dans la page.
On specifie donc une valeur globale pour pouvoir y acceder facilement. */
:root {
	--topbar-height: 3.7em;
}

	/* Mobile */
	@media (max-width:62rem) {
		:root {
			--topbar-height: 3.7em;
		}
	}

/**
BORDER RADIUS
*
*/
:root{
	--border-radius: 0.5em;
}