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

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


DIMENSION DES ICONES :
Pour calculer le em des icones, suivre les etapes suivantes.
C'est une fonction rationnelle (une courbe exponentielle inversée) :
http://www.alloprof.qc.ca/BV/pages/m1137.aspx

1.  Trouver le coefficient de l'icone (variable k).
    [Dimension du SVG de l'icone] divisé par [root font-size].
    [48px] / [16] = 3 = k

2.  Ensuite, appliquer la formule suivante.
	    k         3
    y = --- donc ----
	    x        em

    Ex : le parent a un font-size de 1.125em
	    k        3
    y = --- = --------- = 2.6667em (appliquer ce font-size a l'icone)
	    x     1.125em


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:767px) {}     47rem
@media (max-width:592px) {}     37rem

Mobile-first :
@media (min-width:768px) {}     47.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 {
	/* Main colors */
	--color-base: #808080;
	--color-base-on-dark: #fff;
	--color-orange: #f7941d;
	--color-orange-alt: #d2882f;
	--color-green: #006350;

	/* BG */
	--color-bg-base: #fff;
}



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

	/* 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-left: calc(45vw - 43.5em);
			--width-std-right: calc(45vw - 43.5em);

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

	/* Mobile */
	@media (max-width:47rem) {
		:root {
			--width-std-left: 7vw;
			--width-std-right: 7vw;
		}
	}



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

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

	@media (max-width:47rem) {
		:root {
			--base-spacing-top: 4em;
			--base-spacing-bottom: 4em;
		}
	}



/*
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: 7em;
	--topbar-height-scrolled: 3.5em;
	--topbar-nav-height: 3.2em;
}

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