/*<![CDATA[*/
/************************
*	Charte graphique	*
*************************
*
*	Sable
*		Hex : #e6e2af;
*		RGB : 230, 226, 175;
*		HSL : 56, 52%, 79%;
*
*	Pierre
*		Hex : #a7a37e;
*		RGB : 167, 163, 126;
*		HSL : 54, 19%, 57%;
*
*	Plage
*		Hex : #efecca;
*		RGB : 239, 236, 202;
*		HSL : 55, 54%, 86%;
*
*	Océan
*		Hex : #046380;
*		RGB : 4, 99, 128;
*		HSL : 194, 94%, 26%;
*
*	Profondeurs
*		Hex : #002f2f;
*		RGB : 0, 47, 47;
*		HSL : 180, 100%, 9%;
*
*	Corail
*		Hex : #e73e01;
*		RGB : 231, 62, 1;
*		HSL : 16, 99%, 45%;
*/
/*
*	Polices
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700|Indie+Flower|Ultra");
body {
	background: url('../images/site/bg.jpg') no-repeat center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: 'Open Sans', sans-serif;
}
/*
*	Outils couleurs
*/
.bg-sable { background-color: hsl(56, 52%, 79%); }
.bg-pierre { background-color: hsl(54, 19%, 57%); }
.bg-plage { background-color: hsl(55, 54%, 86%); }
.bg-ocean { background-color: hsl(194, 94%, 26%); }
.bg-profondeurs { background-color: hsl(180, 100%, 9%); }
.bg-corail { background-color: hsl(16, 99%, 45%); }
.bg-sable-alpha { background-color: hsla(56, 52%, 79%, .8); }
.bg-pierre-alpha { background-color: hsla(54, 19%, 57%, .8); }
.bg-plage-alpha { background-color: hsla(55, 54%, 86%, .8); }
.bg-ocean-alpha { background-color: hsla(194, 94%, 26%, .8); }
.bg-profondeurs-alpha { background-color: hsla(180, 100%, 9%, .8); }
.bg-corail-alpha { background-color: hsla(16, 99%, 45%, .8); }
.txt-sable { color: hsl(56, 52%, 79%); }
.txt-pierre { color: hsl(54, 19%, 57%); }
.txt-plage { color: hsl(55, 54%, 86%); }
.txt-ocean { color: hsl(194, 94%, 26%); }
.txt-profondeurs { color: hsl(180, 100%, 9%); }
.txt-corail { color: hsl(16, 99%, 45%); }
.border-sable { border-color: hsl(56, 52%, 79%)!important; }
.border-pierre { border-color: hsl(54, 19%, 57%)!important; }
.border-plage { border-color: hsl(55, 54%, 86%)!important; }
.border-ocean { border-color: hsl(194, 94%, 26%)!important; }
.border-profondeurs { border-color: hsl(180, 100%, 9%)!important; }
.border-corail { border-color: hsl(16, 99%, 45%)!important; }
.border-large { border-width: 3px!important; }
.border-dashed { border-style: dashed!important; }
.badge-sable { background-color: hsl(56, 52%, 79%); }
.badge-pierre { background-color: hsl(54, 19%, 57%); }
.badge-plage { background-color: hsl(55, 54%, 86%); }
.badge-ocean { background-color: hsl(194, 94%, 26%); }
.badge-profondeurs { background-color: hsl(180, 100%, 9%); }
.badge-corail { background-color: hsl(16, 99%, 45%); }
/*
*	Outils texte
*/
.txt-indie { font-family: 'Indie Flower', cursive; }
.tight { line-height: 1.3rem; }
.smaller { font-size: smaller; }
.larger { font-size: larger; }
blockquote p, q { quotes: '\00ab\00a0' '\00a0\00bb' '\0022' '\0022'; }
blockquote p::before, q::before { content: open-quote; }
blockquote p::after, q::after { content: close-quote; }
/*
*	Outils boutons
*/
.btn-corail {
	background-color: hsl(16, 99%, 45%);
	color: white;
}
.btn-corail:hover {
	background-color: hsl(194, 94%, 26%);
	color: white;
}
.btn-ocean {
	background-color: hsl(194, 94%, 26%);
	color: hsl(55, 54%, 86%);
}
.btn-ocean:hover {
	background-color: hsl(55, 54%, 86%);
	color: hsl(194, 94%, 26%);
	box-shadow: 0 0 8px 1px hsl(55, 54%, 86%);
	cursor: pointer;
}
.btn-sable {
	background-color: hsl(56, 52%, 79%);
	color: hsl(194, 94%, 26%);
}
.btn-sable:hover {
	background-color: hsl(180, 100%, 9%);
	color: hsl(56, 52%, 79%);
	box-shadow: 0 0 8px 1px hsl(55, 54%, 86%);
	cursor: pointer;
}
.btn-link-sable {
	background-color: transparent;
	color: hsl(56, 52%, 79%);
}
.btn-link-sable:hover { cursor: pointer; }
.btn-link-sable:active { color: hsl(194, 94%, 26%); }
.btn-link-sable:focus { box-shadow: none; }
.option-tri::after { content: '\25b2'; color: hsl(16, 99%, 45%); }
.option-tri.reverse::after { content: '\25bc'; }
/*
*	Liens
*/
a.txt-sable:hover {
	text-decoration: none;
	color: hsl(16, 99%, 45%);
}
a.txt-sable:hover h1 { color: hsl(16, 99%, 45%); }
a.txt-sable:hover p { color: hsl(56, 52%, 79%); }
a.txt-corail:hover { color: hsl(180, 100%, 9%); }
a.txt-ocean:hover {
	text-decoration: none;
	color: hsl(16, 99%, 45%);
}
a.txt-profondeurs:hover { color: hsl(56, 52%, 79%); }
/*
*	Titres
*/
#titre-awesome {
	font-family: 'Ultra', serif;
	font-size: 48px;
	color: hsl(180, 100%, 9%);
	position: fixed;
    left: -.3em;
    top: 60px;
    width: .7em;
    line-height: .8;
    text-align: center;
    text-transform: uppercase;
    word-wrap: break-word;
}
.titre-nv1 {
	font-family: 'Indie Flower', cursive;
	border-bottom: 1px solid currentColor;
}
/*
*	Hamburger
*/
.custom-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(231, 62, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/*
*	Images
*/
.figure-caption {
	font-family: 'Indie Flower', cursive;
	quotes: '\00ab\00a0' '\00a0\00bb';
}
.figure-caption::before { content: open-quote; color: hsl(16, 99%, 45%); }
.figure-caption::after { content: close-quote; color: hsl(16, 99%, 45%); }
.media-img { width: 64px; height: 64px; }
.garmin { width: 465px; height: 500px; }
/*
*	Formulaires
*/
[draggable=true] {
	user-select: none;
	cursor: move;
}
#drop {
	height: 110px;
	width: 150px;
}
.deposezmoi {
	background: red;
	border: 3px dashed green;
}
/*
*	Menu lavalamp
*/
#menu-lavalamp {
	font-family: 'Indie Flower', cursive;
	font-size: 1.2rem;
}
	#menu-lavalamp a { color: hsl(180, 100%, 9%); }
	#menu-lavalamp a:hover {
		color: hsl(56, 52%, 79%);
		text-shadow: 1px 2px hsl(180, 100%, 9%);
	}
	#menu-lavalamp a:last-child::after {
		content: "";
		position: absolute;
		left: 1.2rem;
		display: block;
		width: 4.2rem;
		height: 2px;
		background: hsl(180, 100%, 9%);
		transition: all .5s ease;
	}
	#menu-lavalamp a:nth-child(2):hover ~ a:last-child::after {
		left: 5.4rem;
		width: 7.7rem;
		background: hsl(56, 52%, 79%);
	}
	#menu-lavalamp a:nth-child(3):hover ~ a:last-child::after {
		left: 13rem;
		width: 4.9rem;
		background: hsl(56, 52%, 79%);
	}
	#menu-lavalamp a:nth-child(4):hover ~ a:last-child::after {
		left: 18rem;
		width: 3rem;
		background: hsl(56, 52%, 79%);
	}
	/* Dernier onglet */
	#menu-lavalamp a:last-child:hover::after {
		left: 21rem;
		width: 4.7rem;
		background: hsl(56, 52%, 79%);
	}
	/* Retrait du soulignement dans la version "hamburger" */
	#menu-lavalamp a.toggled::after,
	#menu-lavalamp a.toggled:hover::after { opacity: 0; }
/*
*	Transformations
*/
.translate-left { transition: transform 1s ease; }
.translate-left:hover { transform: translateX(-1rem); }
/*
*	Animations
*/
.blink { outline: none; }
.blink:hover {
	animation: Blink 3s 1;
}
@keyframes Blink {
    0% { opacity: 1; color: white; }
    3% { opacity: 0; }
    5% { opacity: 1; color: hsl(16, 99%, 45%); }
    7% { opacity: 1; color: white; }
}
.glow {
	border: none;
	transition: box-shadow .5s;
}
.glow:hover, .glow:focus {
	outline: none;
	box-shadow: 0 0 8px 1px hsl(16, 99%, 45%);
}
.opacity-min { opacity: .3; }
.opacity-md { opacity: .6; }
.opacity-mx { opacity: .9; }
.opacity-min, .opacity-md, .opacity-mx { transition: opacity .7s; }
.opacity-min:hover, .opacity-md:hover, .opacity-mx:hover { opacity: 1; }
/*]]>*/