/* .............................................................................
SITE ITEMS
............................................................................. */

/*
ITEM / Header
Default head for a block. */
.iHead { }
.iHead + * {margin-top: 1.002em; }



/*
ITEM / Social networks
Liens vers reseaux sociaux, cote a cote. */
.rs {list-style: none;font-size: 2.85em;line-height: 1;}
.rs li {display: inline-block;}
.rs li a {color: var(--color-green);margin: -0.1em;text-decoration: none;display: block;height: 1em;box-sizing: content-box;transition: color 0.2s;}

	/* On dark */
	.onDark .rs li a {color: #fff;}

	/* Hover */
	.rs li a:hover {color: var(--color-orange); }

	/*
	ALT :
	Vertical alignment */
	.rs--vertical {text-align: center;}
	.rs--vertical li {display: block;}
	.rs--vertical li a {display: inline-block;}

	/*
	ALT :
	Left aligned.
	Si premier de ligne et left-align, l'alignement du premier n'est
	pas quite good. Donc, pull un peu le premier vers la gauche. */
	.rs--leftAlign { }
	.rs--leftAlign li:first-child {margin-left: -0.18em;}



/*
ITEM / BG lined
Les vars permettent d'afficher le nombre voulu. */
:root {--qty-bg-lined-width:10;--qty-bg-lined-height:5; }
.bgLined {display: block;font-size: 5em;position: relative;width: 100%;opacity: 0.5;position: sticky;bottom: 0;}
.bgLined__in {display: block; padding-top: calc(100% * 1.572 / var(--qty-bg-lined-width) * var(--qty-bg-lined-height)); background-image: url(../../img/svg/bg-lined-orange.svg);background-position: 0 0;background-size: calc(100% / var(--qty-bg-lined-width)); background-repeat: repeat; }



/*
ITEM / Nav status
Nom de la question et nav dans le style 01 / 20. */
.iQuizStatus {display: flex; justify-content: space-between; gap: 1em; }
.iQuizStatus > * {margin: 0; }
.iQuizStatus .iQuizStatus__name {color: var(--color-green-light); }
.iQuizStatus__nav { }
.iQuizStatus__current {display: inline-block; margin-right: 0.25em; }
.iQuizStatus__total {display: inline-block; margin-left: 0.25em; }



/*
ITEM / Slide
Slide avec question, choix de reponses et bouton pour question suivante. */
.iSlide {width: 100%; }
.iSlide__question { }
.iSlide__reponse {margin-top: 8%;}
.iSlide__btnNext {margin-top: 7%;text-align: right;padding-right: 1em;display: flex;justify-content: space-between;}
.iSlide__btnNext > * {flex: 0 0 auto;}

	/* Spacing */
	@media (max-width:46rem) {
		.iSlide__reponse {margin-top: 10%; }
		.iSlide__btnNext {margin-top: 10%; }
	}



/*
ITEM / Resultat
Gauche : Icone + rond qui se remplit en fonction du pourcentage.
Droite : Pourcentage, titre, texte et bouton. */
.iResultat {--gap: 7%;}
.iResultat__lay {display: flex;align-items: center;gap: var(--gap);}
.iResultat__cChart {flex:0 0 auto; width: calc(50% - calc(var(--gap) / 2)); }
.iResultat__cCtn {flex: 0 1 auto;width: auto;}
.iResultat__cChart .iChart {margin-left: auto; }

.iResultat__nb { }
.iResultat__name {margin-top: 0.5em;}
.iResultat__desc { }
.iResultat__btn {margin-top: 1.5em;white-space: nowrap;}

	/* 
	ALT :
	Smaller. */
	.iResultat--sm { }
	.iResultat--sm .iResultat__name {margin-top: 0; }
	.iResultat--sm .iResultat__btn {margin-top: 1em; }

	/* Stacked */
	@media (max-width:62rem) {
		.iResultat__lay {display: block; text-align: center; }
		.iResultat__cChart {width: 100%; }
		.iResultat__cCtn {margin-top: 1.5em; }
		.iResultat__cChart .iChart {margin-left: auto; margin-right: auto; }
	}

	/* Sizes */
	@media (max-width:46rem) {
		.iResultat__cCtn {margin-top: 1em;}

		.iResultat__nb {font-size: 1.8em; }
		.iResultat__name {font-size: 1.1em;margin-top: 0;}
	}



/*
ITEM / Chart
Stroke remplissable et animable qui entoure une icone. */
.iChart {--size:20em; --pourcent:0; --stroke:3.5em; position: relative;border-radius: 50%;width: var(--size);height: var(--size);}
.iChart__icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 8.5em;}
.iChart__lines {transform: rotate(-90deg);border-radius: 50%;width: 100%;height: 100%;}
.iChart__lineOver {fill: transparent;stroke: var(--color-orange-crush);stroke-width: var(--stroke);stroke-dasharray: 314%;stroke-dashoffset: 314%;animation: resultatPourcentage 3s ease 0s 1 normal forwards;}
.iChart__lineUnder {fill: transparent;stroke: #FFFFFF;stroke-width: var(--stroke);stroke-dasharray: 314%;stroke-dashoffset: 0%;}

	@keyframes resultatPourcentage {
		to {stroke-dashoffset:calc(314% * (1 - var(--pourcent))); }
	}

	/* 
	ALT :
	Smaller. */
	.iChart--sm {--size:9.5em; --stroke:1.75em; }
	.iChart--sm .iChart__icon {font-size: 5.5em; }

	/* Sizes */
	@media (max-width:46rem) {
		.iChart {--size:10em; --stroke:2em; }
		.iChart .iChart__icon {font-size: 4.5em; }

		.iChart--sm {--size:5.5em; --stroke:1em; }
		.iChart--sm .iChart__icon {font-size: 3em; }
	}



/*
ITEM / Title
Description. */