/* @override 
	https://phenyx.academy/content/themes/phenyx-shop-default/css/autoload/habiba.css */

/*
 *
 *
 *
 *
 * L E  L O G O  */
:root {
	/* 3 couleurs */
	--ocean: #000c3f;
	--terre: maroon;
	--sable: rgba(128, 0, 0, 0.27);	
}
.logoCF,
.logoCF * {
	box-sizing: border-box;	
}

.logoCF {
	display: block;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	text-align: center;

	width: 150px;
}
a.logoCF,
a.logoCF:hover {
	/* Si c'est un <a> */
	text-decoration: none;
}


@media (min-width: 992px) {
	.logoCF {
		width: 200px;
	}
}

@media (min-width: 1224px) {
	.logoCF {
		width: 300px;
	}
}

.logoCF .boussole {
	position: relative;
}
.logoCF .cercle {
	display: block;
	position: relative;
	
	width: 50%;
	aspect-ratio: 1/1;
	margin: auto;
	
	border-radius: 100%;
	
	background-color: var(--sable);
}

.logoCF .aiguille {
	background-color: var(--ocean);
	
	display: block;
	position: absolute;
	width: 10%;
	left: 45%;
	top: -10%;
	bottom: -10%;
	
	clip-path: polygon(
		50% 0,
		100% 50%,
		50% 100%,
		0 50%
	);
}
.logoCF .centre {
	display: block;
	width: 5%;
	aspect-ratio:1/1;
	background-color: white;
	position: absolute;
	top: 45%;
	left: 47.5%;
	
	border-radius: 100%;
}
.logoCF .centre::before,
.logoCF .centre::after {
	/* Un triangle */
	content: "";
	display: block;
	position: absolute;
	background-color: white;
	
	width: 100%;
	aspect-ratio: 1/2;
	bottom: 50%;
	
	clip-path: polygon(50% 0, 70% 100%, 30% 100%);
}
.logoCF .centre::after {
	clip-path: polygon(30% 0, 50% 100%, 70% 0);
	bottom: auto;
	top: 50%;
}
.logoCF .roseContainer {
	display: block;
	position: absolute;
	inset:0;
	width: 50%;
	left: 25%;
}

/* Un masque pour réaliser le contour de l'aiguille */
.logoCF .roseContainer,
.logoCF .cercle {
	clip-path: polygon(0 0, 0% 100%, 100% 100%, 100% 0%, 55% -5%, 65% 50%, 55% 105%, 45% 105%, 35% 50%, 45% -5%);
	clip-path: polygon(0 0, 0% 100%, 100% 100%, 100% 0%, 53% -5%, 63% 50%, 53% 105%, 47% 105%, 37% 50%, 47% -5%);
}

.logoCF .rosedesvents {
	background-color: var(--terre);

	display: block;
	width: 80%;
	aspect-ratio: 1/1;
	position: absolute;
	top: 10%;
	left: 10%;
		
	clip-path: polygon(
		100% 50%,
		63.8% 42.9%,
		77.4% 22.7%,
		57.1% 36.2%,
		57.1% 36.2%,
		50% 0%,
		42.8% 36.5%,
		42.8% 36.2%,
		22.6% 22.7%,
		36.1% 42.9%,
		0% 50%,
		36.2% 57.1%,
		22.7% 77.4%,
		42.9% 63.8%,
		50% 100%,
		57.1% 63.8%,
		57.1% 63.8%,
		77.4% 77.4%,
		63.8% 57.1%
		);
}
.logoCF .nom {
	padding-bottom: 2%;
	
	font-family: 'Alice', serif;
	position: relative;
	
	white-space: nowrap;
	color: var(--ocean);

	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	margin: 5% 0 0;
}
.logoCF .nom em {
	font-style: normal;
	color: var(--terre);
}
.logoCF .nom span {
	width: calc(50% - 30px);
	text-align: right;
}
.logoCF .nom span + em + span {
	text-align: left;
}
.logoCF .nom em {
	width: 40px;
	margin: -4px -5px 0 0;
	
	transition: width 1s ease-in-out 0s;
}
.logoCF .nom {
	font-size: 16px;
	margin-left: -20px;
	margin-right: -20px;
}
.logoCF .nom em {
	font-size: 28px;
}
@media (min-width: 992px) {
	.logoCF .nom {
		font-size: 20px;
		}
	.logoCF .nom em {
		font-size: 28px;
	}
}

@media (min-width: 1224px) {
	.logoCF .nom {
		font-size: 26px;
	}
	.logoCF .nom em {
		font-size: 38px;
	}
}

/*
 *
 *
 *
 * Effet d'inclinaison 
 */
 
.logoCF .cercle,
.logoCF .aiguille,
.logoCF .centre,
.logoCF .roseContainer {
	transform: rotate(-20deg);
	transition:
		transform 1s ease-in-out 0s,
		border-width 1s ease-in-out 0s;
}
.logoCF .rosedesvents {
	transform: rotate(20deg);
	transition: 
		transform 1s ease-in-out 0s;
}

/*
 *
 *
 *
 * Effet hover qui fait une rotation 
 */
 
.logoCF:hover .cercle,
.logoCF:hover .aiguille,
.logoCF:hover .centre,
.logoCF:hover .roseContainer {
	transform: rotate(10deg);
}
.logoCF:hover .rosedesvents {
	transform: rotate(-10deg);
}
.logoCF:hover .nom em {
	width: 50px;
	transition: width .6s ease-in-out 0s;
}
	

/*
 *
 *
 *
 * Version mini
 */

.logoCF.mini {
	width: 100px;
}

.logoCF.mini .nom {
	flex-wrap: wrap;
	white-space: normal;
	font-size: 16px;
	
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.logoCF.mini .nom span {
	width: auto !important;
	text-align: center !important;
}
.logoCF.mini .nom em {
	margin: -29px -5px -33px 0;
	font-size: 50px;
	opacity: 0;
}
	

/*
 *
 *
 *
 * Version maxi
 */

.logoCF.maxi {
	width: 900px;
}

.logoCF.mini .nom {
	flex-wrap: wrap;
	white-space: normal;
}

/* 
 * F I N   D U   L O G O 
 *
 *
 *
 */

.eph_user a {
	color: var(--ocean);
}
.blog {
	color: var(--ocean);	
}
.blog article > i::before {
	color: var(--ocean);
}
.blog article > i::after {
	color: var(--terre);
}
.blog article time {
	color: var(--terre);
}
h3,
.blog h3 {
	font-family: 'Alice', serif;	
}