/* Feuille de style de AQUA-CRYSTAL. */

/* Déclaration des variables globales à la page (communes à tous les selecteurs). */
:root {
	/* Varibles du des effets de couleurs en dégradée de la barre de progression. */
	--progress-bar-aspect: linear-gradient(to bottom, #778495 0%, white 10%, white 40%, blue 70%, #778495 100%);
	--progress-bar-background: transparent;
	/* Variable de la taille de l'arrondi de la barre de progression (Radius). */
	/* Pour rester relatif pour rester responsive on utilise une hauteur de police et non un % qui depend de la largeur. */
	--progress-radius: 3rem;
}
html {
	/*
		L'unité rem (root em) est correspond à une hauteur de caractère textuel.
		Son initialisation se fait dans le style html ou body pour être considéré root.
		Cela dit, c'est encore relatif au navigateur et au périphérique d'application.
		En effet, pour la pluspart des couples navigateur/périphérique, 1 rem = 16px, pour certain cela peut être 10px.
		Pour les exception il est bon d'ajouter les particularité avec règle spécifique avec @media.
		Si l'on part sur une valeur de 1 rem = 16px on a le tableau suivant de correspondances :
			0,625rem	= 10px
			0,75rem		= 12px
			0,875rem	= 14px
			1rem		= 16px (base)
			1,125rem	= 18px
			1,25rem		= 20px
			1,5rem		= 24px
			1,875rem	= 30px
			2rem		= 32px
		Ces valeurs ne sont pas très pratiques pour effectuer des calculs, mais avec l'astuce appelée "62,5%" on a un tableau :
			1rem		= 10px (base)
			1,2rem		= 12px
			1,4rem		= 14px
			1,6rem		= 16px
			1,8rem		= 18px
			2rem		= 20px
			2,4rem		= 24px
			3rem		= 30px
			32,2rem		= 32px
		
	*/
	font-size: 62.5%;
}

body {
	background-color: #ffffff;
	color: #00000a;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	width: 100%;
	height: 100%;
	border: none;
	margin: 0 0 0 0; /* haut droite bas gauche. */
}

/*
	Préalablement on désactive les contours généralement orange sur certain mobiles lorsque des objets sont sélectionnés.
	Pour l'instant toutes les balises sont ainsi traitées, mais voici une proposition de liste pour être exaustif :
		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed, 
		figure, figcaption, footer, header, hgroup, 
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video
*/
* {
	/* <!important> donne une priorité plus elevé dans le parcours en cascade du css. */
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
	-webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
	outline: none !important;
}

/* Conteneur global avec la vidéo proprement dite et de sa barre de contrôles. */
	/**
	 * Flex -> Modèle de boîte flexible dont les quatre possibilités principales sont : 
	 * 		1. Distribution des éléments horizontale ou verticale, avec passage à la ligne autorisé ou non,
	 * 		2. Alignements et centrages horizontaux et verticaux, justifiés, répartis,
	 * 		3. Réorganisation des éléments indépendamment de l’ordre du flux (DOM),
	 * 		4. Gestion des espaces disponibles (fluidité).
	 * 
	 * 	Flexbox (le modèle de boîte flexible) se fonde schématiquement sur une architecture de ce type :
	 * 		Un flex-container permettant de créer un contexte général d’affichage,
	 * 		Un ou plusieurs "flex-item" qui ne sont rien d’autre que les enfants directs du conteneur, quels qu’ils soient.
	 * 	
	 * 	Comportement différent en fonction du navigateur :
	 * 		Vidéo
	 * 				Chrome	->	Avec position: relative et object-fit: fill la vidéo et le conteneur sont retaillésmais sans respecter le ratio.
	 * 							Avec object-fit: cover la vidéo est retaillée avec le ratio mais pas son conteneur.
	 * 							Opéra et Safari normalement se comporte pareil.
	 * 				Firefox	->	La vidéo et son conteneur sont retaillés et le ratio longeur/hauteur est conservé.
	 * 				IE		->	Ne support pas object-fit: fill; et donc la vidéo ne remplit pas le conteneur.
	 */
	/**
	 * Pour gérer les différents cas on peut en partie s'appuyer sur la règle @supports.
	 * Elle est également nommée “règle conditionnelle”, elle permet de détecter la reconnaissance de certaines propriétés CSS au sein du navigateur.
	 * Attention aux faux négatifs : la règle @supports est parfois moins bien supportée que la propriété testée, et les résultats peuvent en être faussés.
	 * Par exemple le module CSS3 Grid Layout est bien supporté par Internet Explorer 10, mais c’est @supports qui n’est pas reconnu sur ce navigateur !
	 * Mais on est confronté à des impossibilité pour que tous les navigateurs se comportent identiquement. Le choix est fait ici de sous-traiter à video-player.js
	 */
.videoContainer {					/* Pour IE */
	display: block;
}
@supports (object-fit: fill) {		/* Pour les navigateur supportant object-fit: fill. */
	.videoContainer {
		display: flex;
	}
}

/* Pseudo-classes CSS (:) pour le plein écran en fonction des navigateurs. */
.videoContainer:-webkit-full-screen {			/* Chrome, Safari et Opera. */
	width: 100% !important;
}
.videoContainer:-moz-full-screen {				/* Firefox. */
	width: 100% !important;
}
.videoContainer:-ms-fullscreen {				/* IE/Edge */
	width: 100% !important;
}
.videoContainer:fullscreen {					/* Standard. */
	width: 100% !important;
}

/* En plein écran, masquer tous les enfants avec la classe 'tohide'. */
.videoContainer:-webkit-full-screen .tohide {
	display: none;
}
.videoContainer:-moz-full-screen .tohide {
	display: none;
}
.videoContainer:-ms-fullscreen .tohide {
	display: none;
}
.videoContainer:fullscreen .tohide {
	display: none;
}


/*==============================================================================*/
/* La vidéo proprement dite. */
video.videoPlayer {
	/* Positionné en haut à gauche sur toute la largeur et la hauteur. */
	/* Attention à ne pas interpréter "relative" comme une relation de positionnement relatif dans le parent. */
	position: relative;
	z-index: auto;					/* Rang d'affichage du block (plus la valeur est haute plus le block est en premier plan). */
	top: 0;
	left: 0; 
	min-width: 100%; 
	min-height: auto;
	width: auto; 
	height: auto;
	padding: 0;
	margin: 0;
	overflow: auto;
	object-fit: fill;
}

/*==============================================================================*/
/* Les contrôles de la vidéo. */
/* Conteneur global des contrôles de la vidéo. */
.controlsContainer {
	/* Positionné en bas à gauche sur toute la largeur et d'une hauteur en % du conteneur global de la vidéo (videoContainer). */
	position: absolute;
	/*
		Rang d'affichage du block (plus la valeur est haute plus le block est en premier plan).
		Ici, il faut s'assurer que la valeur soit assez élevée pour que le survole puisse envoyer un événement onmouseover.
		En effet, le block de contrôles est caché par défaut, pour qu'il puisse être actif après un survole de ce conteneur,
		la valeur doit être supérieure aux z-index déjà positionnés.
	*/
	z-index: 20;					/* Grosse valeur par sécurité. */
	left: 0;
	width: 100%;
	height: 100%;					/* Hauteur calculée par video-player.js dans le style du div html. */
	top: 0;							/* Positionné par video-player.js dans le style du div html. */
	border: none;
	background: transparent;
}
/* Block des contrôles de la vidéo, il est piloté par video-player.js en fonction du survol du conteneur global. */
.controlsBlock {
	/* Positionné en bas à gauche sur toute la largeur et d'une hauteur de 20% du conteneur global de la vidéo (videoContainer). */
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	background-size: contain;
	/* Pour gérer la transparence ici 80% utiliser le format RGBA. */
	/* Red/Green/Bleu/Alpha pour le canal alpha la valeur 1 donne une couleur pleine ou 0.8 pour 20% de transparence par ex. */
	background: linear-gradient(to bottom, rgba(255,255,255,0.80), grey);
	background-repeat: no-repeat;
}

.videoControl {
	background: transparent;
	width: 100%;
	height:100%;
	border: none;
}

/* Touts les enfants directs (adjacents) de controlsBlock. */
.controlsBlock > * {
	float: left;
	width: 4%;
	height: 100%;
	padding: 0;
}
/* Marge à gauche pour le premier contrôle. */
.controlsBlock > *:first-child {
	margin-left: 1%;
}
/* Marge à doite pour le dernier contrôle. */
.controlsBlock > *:last-child {
	margin-right: 1%;
}

.controlsBlock button {
	text-align: center;
	white-space: nowrap;			/* Pour qu'il n'y ait pas de retour à la ligne non désiré. */
	border: none;
	background: transparent;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.controlsBlock button:hover {
	opacity: 0.8;
}
.controlsBlock button[data-state="play"] {
	background-image: url('../images/VC-Lecture.png');
}
.controlsBlock button[data-state="pause"] {
	background-image: url('../images/VC-Pause.png');
}
.controlsBlock button[data-state="stop"] {
	background-image: url('../images/VC-Stop.png');
}
.controlsBlock button[data-state="mute"] {
	background-image: url('../images/VC-Muet.png');	
}
.controlsBlock button[data-state="sound"] {
	background-image: url('../images/VC-Son.png');	
}
.controlsBlock button[data-state="volup"] {
	background-image: url('../images/VC-Son+.png');	
}
.controlsBlock button[data-state="voldown"] {
	background-image: url('../images/VC-Son-.png');	
}
.controlsBlock button[data-state="fullscreen"] {
	background-image: url('../images/VC-Plein-ecran.png');
}
.controlsBlock button[data-state="unfullscreen"] {
	background-image: url('../images/VC-Reduction.png');	
}

/*
Commentaire préalable pour expliquer les différents calculs de longueur et de hauteur des éléments constituant la barre de progression :
	(Il faut s'accrocher!)
	Base :
		Vidéo 16/9ème de 1280x720px, des boutons de 148x148px avec 13px de bordure
		et un conteneur de contrôle à 10% de hauteur de celle de la vidéo (valeur en exemple, c'est video-playe.js qui la définie).
		Voici la liste des contrôles envisagés :
			1 bouton de lecture, 1 de stop, 1/2 bouton de partie gauche de barre, 1 partie centrale de barre, 1/2 de partie droite,
			1 de muet, 1 de son+, 1 de son- et 1 de plein écran.
		On souhaite aussi avoir une marge à droite et à gauche.
		
		Maintenant, il faut définir la répartition en % pour rendre les contrôles proportionnels à la vidéo.
		On considère que l'on part sur 1% de marge. Il est aussi postulé qu'un bouton fasse 4 fois la marge donc 4%.
		Ainsi on décline le remplissage en largeur du conteneur comme suit avec les marges sans la barre de progression :
		liste de % (1 + 4 + 4 + 4 + 4 + 4 + 4 + 1) = 26%, il reste donc 74%.
@A		Ainsi width: 74%;
		Cette dernière complémente la barre mais elle peut-être réduite si l'on souhaite ajouter des contrôles.
		
		A noter que les contrôles sont accolés par choix volontaire, s'il en était autrement il faudrait revoir la distribution.
		
		Si l'on part sur la taille réelle des boutons en largeur, on devrait avoir une largeur de :
		37 + 148 + 148 + (74%/4% * 148 = 2738) + 148 + 148 + 148 + 148 + 37 = 3700px.
		Si l'on reste sur cette largeur réelle on devrait avoir une vidéo de 3700 * ( 16 /9 ) = 2081.25px.
		Une vidéo 3700x2082 est bien trop grosse à charger, la plus grande acceptable est de 1280x720 ou 720x480 encore + légère.

		Si l'on applique ces % sur une vidéo de L-1280px pour le vérifier avec un debuger de navigateur sur une taille raisonnable,
		on obtient la liste suivante des tailles en appliquant le ratio 1280/3700 :
		Les marges de 12.8px, des boutons de 51.2px, d'un bouton de progression de 947.2.
		Par contre, la hauteur du conteneur est directement établie sur 10% de celle de la vidéo soit 72px.
		On constate que la hauteur n'est pas totalement remplie par celle des boutons (51.px).
		
		Pour la suite, voire le commentaire au niveau des styles de positionnement et de taille de la barre de progression.
*/
/* Le bouton de la barre de progression est l'arrière-plan de celle-ci et est le conteneur de l'avancée dynamique. */
.controlsBlock button[data-state="progress"] {
	width: 74%;						/* Voir @A plus haut. */
	background-image: url('../images/VC-Progression-2738.png');
}

/* L'avant-plan de la barre de progression matérialise dynamiquement l'avancée de la lecture de la vidéo. */
/*
		Il reste donc encore une liste de % à déterminer pour positionner correctement la barre de progression dynamique.
		En effet, elle doit avoir un offset vis-à-vis du haut du conteneur comprenant l'espace supérieur non couvert par le bouton,
		et la bordure supérieure de ce dernier à ne pas couvrir. Sa propre hauteur doit aussi respecter la bordure inférieure.
		Il en va de même en largeur pour le respect les bordures du bouton à gauche et à droite.
		
		Largeur :
			La barre est de 74% de 3700px soit 2738px. si l'on enlève les 13px de bordure de chaque coté,
			la longueur effective doit donc être de 2712px soit 99.05% de son conteneur (bouton).
			Il est à noter que suivant la taille de l'affichage les arrondis peuvent entrainer une couverture effective inférieure.
@B			Ainsi width: 99.05%;
			
			Déclinaison sur une largeur de 1280px : la largeur effective est de 947.2px * 99.1% = 938.67px.
			
		Hauteur :
			Il faut aussi faire un calcul pour établir la hauteur relative de la barre dynamique de progression vis-à-vis du bouton.
			Le conteneur des contrôles fait 10% de hauteur d'une vidéo 16/9ème, si on conserve la base du calcul
			pour plus de précision avec une largeur de 3700px la vidéo fait donc ( 3700 x ( 9 / 16 ) ) = 2081.25px.
			Par voie de conséquence la hauteur du conteneur des contôles fait 208.125px.
			On peut déduire le % de la hauteur relative pour positionner la barre en respect des parties non-couvertes par le bouton de 148px.
			Soit (148 - 26) / 208.125 = 58.62%.
@C			Ainsi height: 58.62%;
			Mais pour la barre dynamique elle doit être réajustée par player-video.js pour compenser l'espace non couvert du conteneur.
			
			Déclinaison sur une largeur de 1280x720 : la hauteur effective est de 72px * 58.62% = 42.2px.
*/
/* Définition des styles de positionnement et de taille de la barre de progression. */ 
.controlsBlock .progressBar {
	width: 99.05%;					/* Voir @B plus haut. */
	height: 58.62%;					/* Voir @C plus haut. */
	cursor: auto;
	/*
		Par défaut on la met non opaque (transparente) pour éviter le problème de riadius sur une trop petite largeur de barre.
		A partir d'une durée de ~1 seconde, l'arrondi devient acceptable.
	*/
	opacity: 0;
}

/* Aspect de la progression proprement dite avec les différents pseudo-selecteurs (::) dépendants des navigateurs. */
/* Attention dans l'inspecteur des navigateurs ces styles ne sont pas vivibles. */
/* IE requière sa propre règle, sinon il l'ignore et utilise color. */
/* IE ne supporte pas les variables, obligé d'être ici déclaratif. */
.controlsBlock progress::-ms-fill {
	/* Pour l'aspect de la progression. */
	background: linear-gradient(to bottom, #778495 0%, white 10%, white 40%, blue 70%, #778495 100%);
	border-radius: 3rem;
}
/* Chrome, Opera et Safari requièrent leur propre règle, sinon ils l'ignorent. */
.controlsBlock progress::-webkit-progress-value {		/* Pour l'aspect de la progression. */
	background: var(--progress-bar-aspect);
	border-radius: var(--progress-radius);
}
/* Firefox requière sa propre règle, sinon il l'ignore et utilise color. */
.controlsBlock progress::-moz-progress-bar {			/* Pour l'aspect de la progression. */
	background: var(--progress-bar-aspect);
	border-radius: var(--progress-radius);
}
/* Pour l'aspect du fond de la barre de progression pour Chrome, Opera et Safari. */
.controlsBlock progress::-webkit-progress-bar {
	background: var(--progress-bar-background);
}

/* Si le navigateur ne supporte pas l'élément de progression de la vidéo, video-player.js met à "incompatible" le data-state. */
.controlsBlock progress[data-state="incompatible"] {
	background: black;
	height: 100%;
}

/*
	L'élément générique span sert à video-player.js d'indiquer dynamiquement les éléments de progression de lecture.
	Le format retenu est le % et le temps déjà écoulé, la durée totale de la vidéo, le tout entre parenthèses.
	Là aussi, il faut déterminer le positionnement de ces données de progressions. Ce texte doit être sorti du flux pour qu'il
	ne décale pas la barre de progression dans son conteneur (bouton).
	On donne aussi une priorité (!important) dans la cascade des styles.
@D	Ainsi position:absolute !important;
	
	Il faut calculer sont positionnement vis-à-vis de la gauche de son conteneur. Ce texe doit être au centre de la barre de progression
	soit 1% de marge + (2 boutons de 4%) + (1/2 barre de 74%) = 46%. Il faut aussi le décaler de la moitié de sa propre largeur.
@E ainsi left:46%;
@F ainsi transform: translate(-50%, 0);

	Ce texte doit aussi être positionné centré et en dessous du bord supérieur du bouton et du bord du haut du linear-gradient
	de la barre de progression dynamique. On repart sur un calcul précédent (voir @C), soit la hauteur du conteneur des contrôles
	de 208.125px calculé sur une base de 3700px de largeur, le bord du bouton est à (208.125 - 148) / 2 = 30.0625px du haut du
	conteneur, on doit aussi prendre en compte les 13px de la bordure du bouton donc offset de 43.0625.
	Et si l'on souhaite faire correspondre l'affichage du texte dans la partie blanche du linear-gradian de la barre
	qui est à 10% de la hauteur de celle-ci, on reprend le calcul précédent (voir @B) 2712px de hauteur et 10% de celle-ci
	nous aussi 27px à ajouter à l'offset nous donnant donc 70.06px au total. Cela nous donne (70.06 / 208.125) = 33.66% d'offset.
	Il faut aussi prendre en compte la hauteur du texte de 1rem, on le divise par 2 pour le centrer verticalement.
	Pour IE la taille de la police n'est pas restituée comme les autres navigateurs. Il faut la passer à 1.5rem au lieu de 1rem.
@G	Ainsi top:calc(33.5% - 0.7rem);	Pour IE.
@G'	Ainsi top:calc(33.5% - 0.5rem);	Pour les autres navigateurs.
*/
.progressDuration {
	position: absolute !important;	/* Voir @D plus haut. */
	width: auto;					/* Désactivation de la largeur établie par .controlsBlock. */
	left:46%;						/* Voir @E plus haut. */
	transform: translate(-50%, 0);	/* Voir @F plus haut. */
	height: auto;					/* Désactivation de la hauteur établie par .controlsBlock. */
	top:calc(33.5% - 0.7rem);		/* Voir @G plus haut. */
	color: #778495;
	background: transparent;
	text-align: center;
	font-size: 1.5rem;				/* Pour IE, voir plus bas la redéfinition pour les autres navigateurs. */
	font-weight: bold;
	cursor: help;
}
/* Utilisation d'une fonctionnalité non-supportée par IE11, en l'occurence le test de support : @supports qui va pousser IE à l'ingnorer. */
/* Redéfinition pour les navigateurs autre que IE. */
@supports (--progress-radius: 3rem) {
	.progressDuration {
		top:calc(33.5% - 0.5rem);		/* Voir @G' plus haut. */
		font-size: 1rem;
	}
}

/* Comme les boutons, on atténue l'opacité sur un survol. */
.controlsBlock span:hover {
	opacity: 0.8;
}

/*==============================================================================*/
/* Les Info bulles. */
/* Les éléments avec une infobulle sont référents du positionnement relatif de celle-ci. */
.tooltip {
	position: relative;
}

/* Ammorce des pseudo-éléments before et after avec un premier effet d'apparence. */	
.tooltip::before,
.tooltip::after {
	position: absolute;
	transform: translate3d(0,-10rem,0);		/* Positionnement initial sur l'axe Y, soit 5 largeur de police plus haut. */
	transform: translate(0,-10rem);			/* IE11 ne support pas translate3d, mais translate(<x>,<y>), ici cela nous suffit. */
	opacity: 0;								/* Non visible initalement. */
	/*	Liste de tuples de transitions de l'application des propriétés des pseudo-classes comme :hover.
		Ces tuples peuvent être déclinés unitairement comme suit, bien évidemment l'ordre doit être respecté.
			transition-property			-> Propriété consernée par l'application de la transition.
			transition-duration			-> Durée de la transition entre la valeur intiale et la nouvelle.
			transition-timing-function	-> Type de fonction de déclinant les valeurs intermédiaires pendant durée.
			transition-delay			-> Délai préalable avant l'application effective de la transition (retardement).
	*/
	transition: transform 1s,opacity 1s; /* Transition entre les propriétés actuelles et celle des pseudo-classes. */
}

/* Le pseudo-élément before est utilisé pour le contenu de l'infobulle hérité de l'attribut data-tooltip-content. */
.tooltip[data-tooltip-content]::before {
	content: attr(data-tooltip-content);
	color: black;
	font-size: 1.2rem;				/* Pour les info-bulles on utilise l'unité relative à la taille de la police em, voire rem (root em). */
	padding: 1rem;					/* Attention ! Il vaut mieux une proportion entière vis-à-vis de la font-size quand on utilise em. */
	white-space: nowrap;			/* Pour qu'il n'y ait pas de retour à la ligne non désiré. */
	font-weight: normal;
	text-decoration: none;
	background-image: linear-gradient(to bottom, white, #778495);
	border-radius: 0.5rem;
	cursor: help;
}

/* Le pseudo-élément after est utilisé pour matérialiser la flêche visant l'élément pointé. */
.tooltip::after {
	width: 0;
	height: 0;
	content: '';
}

/* Lorsque l'élément ayant une infobulle (masquée par défaut) est survolée l'affichage de celle-ci. */
/* Ainsi les pseudo-classes :hover permettent de changer les styles des pseudo-éléments ::before (contenu) et ::after (flêche). */
.tooltip[data-tooltip-position]:hover::before,
.tooltip[data-tooltip-position]:hover::after {
	transform: initial;		/* Retrait de la translation établie lors de la création des pseudo_élements ::before et ::after. */
	opacity: 1;				/* Rendu visible lors du passage à l'état de la pseudo-classe, une transition a été déclarée + haut. */
}

/* Mise en forme des l'infobulles en haut et à droite de l'élément pointé. */
/* Contenu. */	
.tooltip[data-tooltip-position="top-right"]::before {
	bottom: calc(100% + 3.2rem);		/* Même % que la flêche + la taille de la bordure haute de la flêche (voir :after). */
}
/*
	Tant que les navigateurs ne prennent pas en charge le type d'unité de l'attribut, il est interprété comme chaine.
	Or, certaines propriétés (left, right, width...) acceptent qu'une valeur numérique suivît d'une unité ou des constantes répertoriées.
	L'interprétation d'une valeur commençant par 'attr(' n'est pas faite et rend donc la propriété invalide.
	On ne peut pas pour l'instant traiter l'offset vis-à-vis de la gauche ou la droite comme ceci :
		.tooltip[data-tooltip-position="top-right"][data-tooltip-offset]::before {
			left: attr(data-tooltip-offset %?);
		}
	On va donc le traiter en déclinant les différentes déclaration possibles.
*/
.tooltip[data-tooltip-position="top-right"][data-tooltip-offset="0"]::before {
	left: 0%;	/* Offset appliqué sur la gauche. */
}
.tooltip[data-tooltip-position="top-right"][data-tooltip-offset="25"]::before {
	left: 25%;	/* Offset appliqué sur la gauche. */
}
.tooltip[data-tooltip-position="top-right"][data-tooltip-offset="50"]::before {
	left: 50%;	/* Offset appliqué sur la gauche. */
}
/* Flêche établie avec un jeu de tailles de bordures (haut, droite, bas, gauche). */
.tooltip[data-tooltip-position="top-right"]::after {
	bottom: 100%;					/* En haut du bouton. */
	left: calc(50% - 0.3rem);		/* Bout de la flêche au centre du bouton : 50% - bordure gauche). */
	border-style: solid;
	border-width: 3.2rem 1rem 0rem 0.3rem;
	border-color: #778495 transparent transparent transparent;
}
		
/* Mise en forme des l'infobulles en haut et au milieu de l'élément pointé. */	
/* Contenu. */	
.tooltip[data-tooltip-position="top-center"]::before {
	bottom: calc(100% + 3.2rem);
}
.tooltip[data-tooltip-position="top-center"][data-tooltip-offset="0"]::before {
	left: 0%;	/* Offset appliqué sur la gauche. */
}
.tooltip[data-tooltip-position="top-center"][data-tooltip-offset="25"]::before {
	left: 25%;	/* Offset appliqué sur la gauche. */
}
.tooltip[data-tooltip-position="top-center"][data-tooltip-offset="-25"]::before {
	left: -25%;	/* Offset appliqué sur la gauche. */
}
.tooltip[data-tooltip-position="top-center"][data-tooltip-offset="33"]::before {
	left: 33%;	/* Offset appliqué sur la gauche. */
}
.tooltip[data-tooltip-position="top-center"][data-tooltip-offset="-33"]::before {
	left: -33%;	/* Offset appliqué sur la gauche. */
}
.tooltip[data-tooltip-position="top-center"][data-tooltip-offset="45"]::before {
	left: 45%;	/* Offset appliqué sur la gauche. */
}
.tooltip[data-tooltip-position="top-center"][data-tooltip-offset="-45"]::before {
	left: -45%;	/* Offset appliqué sur la gauche. */
}
.tooltip[data-tooltip-position="top-center"][data-tooltip-offset="50"]::before {
	left: 50%;	/* Offset appliqué sur la gauche. */
}
.tooltip[data-tooltip-position="top-center"][data-tooltip-offset="-50"]::before {
	left: -50%;	/* Offset appliqué sur la gauche. */
}
/* Flêche. */
.tooltip[data-tooltip-position="top-center"]::after {
	bottom: 100%;
	left: calc(50% - 0.6rem);		/* Bout de la flêche au centre du bouton : 50% - bordure gauche). */
	border-style: solid;
	border-width: 3.2rem 0.6rem 0rem 0.6rem;
	border-color: #778495 transparent transparent transparent;
}
		
/* Mise en forme des l'infobulles en haut et à gauche de l'élément pointé. */	
/* Contenu. */	
.tooltip[data-tooltip-position="top-left"]::before {
	bottom: calc(100% + 3.2rem);
}
.tooltip[data-tooltip-position="top-left"][data-tooltip-offset="0"]::before {
	right: 0%;	/* Offset appliqué sur la droite. */
}
/* Flêche. */
.tooltip[data-tooltip-position="top-left"]::after {
	bottom: 100%;
	right: calc(50% - 0.3rem);		/* Bout de la flêche au centre du bouton : 50% - bordure droite). */
	border-style: solid;
	border-width: 3.2rem 0.3rem 0rem 1rem;
	border-color: #778495 transparent transparent transparent;
}
/*==============================================================================*/
/* Les éléments annexes. */
.funContainer {
	display: block;
	position: absolute;
	z-index: auto;					/* Attention à ne pas lui donner un rang supérieur à celui des contrôles de la vidéo. */
	top: 0;
	left:0;
}

.fingerSensor {
	position: absolute;
	z-index: auto;					/* Attention à ne pas lui donner un rang supérieur à celui des contrôles de la vidéo. */
	top: 4%;						/* A partir de 30px du haut pour une image de 720px de hauteur (30/720=0.0416 soit 4%). */
	left:50%;
	transform: translate(-50%, 0);	/* Recentrage de l'élément (1/2 de sa propre largeur) pour que son centre corresponde à celui du conteneur. */
	opacity: 0;						/* Invisible. */
}
.middleFingerRH {
	position: absolute;
	top: 50%;						/* A partir de la moitié de la hauteur du conteneur. */
	left:0%;						/* Doigt de la main droite complètement à gauche. */
	/*
		Recentrage de l'élément (1/2 de sa propre hauteur) pour que son centre corresponde à celui du conteneur.
		De plus, l'image étant la main gauche on la retourne de 180 degrés pour en faire une main droite.
	*/
	transform: translate(0, -50%) rotateY(180deg);
	visibility: hidden;				/* Masqué par défaut. */
	opacity: 1;						/* Transparence de 10%. */
}
.middleFingerLH {
	position: absolute;
	top: 50%;						/* A partir de la moitié de la hauteur du conteneur. */
	right:0%;						/* Doigt de la main gauche complètement à droite. */
	transform: translate(0, -50%);	/* Recentrage de l'élément (1/2 de sa propre hauteur) pour que son centre corresponde à celui du conteneur. */
	visibility: hidden;				/* Masqué par défaut. */
	opacity: 1;						/* Transparence de 10%. */
}
/*==============================================================================*/