/* .............................................................................
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.


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


RESPONSIVE desktop-first :
@media (max-width:93rem) {}    1488px
@media (max-width:75rem) {}    1200px
@media (max-width:62rem) {}     992px
@media (max-width:46rem) {}     736px

Écrans ultra large :
@media (min-width:125rem) {}    2000px
*/


/*
COLORS */
:root {
	/* Colors */
	--color-accent: green;
	--color-black: #000000;
	--color-white: #fff;
	--color-orange: #FF4438;
	--color-orange-rgb: 255 68 56;
	--color-gray-light: #F4F4F4;
	--color-gray-medium: #DBDCDD;
	--color-gray-medium-dark: #A4A6A9;
	--color-gray: #4a4a49;
	--color-gray-rgb: 74 74 73;
	--color-gray-dark: #2D3136;

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



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

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

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

			--width-std-left: calc(24vw - 23.75rem);
			--width-std-right: calc(24vw - 23.75rem);

			--width-narrow-left: calc(24vw - 16.25rem);
			--width-narrow-right: calc(24vw - 16.25rem);
		}
	}

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

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



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

	/* Tablet */
	@media (max-width:62rem) {
		:root {
			--base-spacing: max(3.5em, 10vw);
		}
	}



/*
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: 4em;
	--topbar-height-scrolled: 3.5em;
	--topbar-notice-height:2.9em;
}

	/* Pas de notice, donc enlever la hauteur, car c'est une var 
	utilisée à certains endroits dans le CSS. */
	:root:not(:has(.topBar .topBar__notice)) {
		--topbar-notice-height: 0px;
	}

	/* Sizes */
	@media (max-width:62rem) {
		:root {
			--topbar-notice-height: 5em;
		}
	}

	@media (max-width:46rem) {
		:root {
			--topbar-height: 3.5em;
			--topbar-height-scrolled: var(--topbar-height);
			--topbar-notice-height: 5.3em;
		}
	}



/*
EASING
Standardisé car utilisé à plusieurs endroits. */
:root {
	--ease-cubic: cubic-bezier(0.4, 0, 0.2, 1);
}