@charset "utf-8";

/* Global */
:root{
	--couleur01:#fe7d22;
	--couleur02:#8f8a9c;
	--couleur03:#a3c1d8;
	--couleur04:#ffcf44;
	--couleur05:#c09325;
	--couleur06:#81cb77;
}
*,*::before,*::after{
	box-sizing:inherit;
	min-width:0;
	min-height:0;
}
html{
	box-sizing:border-box;
	font-size:62.5%;
	overflow-wrap:break-word;
	-webkit-text-size-adjust:100%;
	   -moz-text-size-adjust:100%;
		-ms-text-size-adjust:100%;
			text-size-adjust:100%;
	-webkit-tap-highlight-color:transparent;
	scroll-behavior:smooth;
	interpolate-size:allow-keywords;

	&[dir="rtl"]{
		direction:rtl;
	}
}
body{
	margin:0;
	color:var(--couleur-texte);
	font-family:Roboto,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
	font-optical-sizing:auto;
	font-weight:400;
	font-style:normal;
	font-variation-settings:"wdth" 100;
	font-size:1.6rem;
	line-height:1.5;
	min-height:100vh;
	background:url('images/fond.webp') no-repeat center top / 100% auto #f0f2f1;
}
body:not(.ready) *{ transition:none; }

img{
	max-width:100%;
	border:none;
}

h2{
	font-size:2.6rem;
	text-transform:uppercase;
	font-weight:700;
}
.container{
	width:1200px;
	max-width:calc(100% - 60px);
	margin-inline:auto;
}
.texte-et-bouton{ text-align:center; }
.bouton, button, [type="submit"]{
	appearance:none;
	border:none;
	display:inline-block;
	background:var(--couleur05);
	color:#fff;
	text-decoration:none;
	text-transform:uppercase;
	font-size:2.2rem;
	font-weight:700;
	line-height:1;
	padding:1em 1.5em;
	clip-path:polygon(
		calc(0% + 0.67em)	calc(0% + 0em),
		calc(100% - 0.67em)	calc(0% + 0.33em),
		calc(100% + 0em)	calc(100% - 0.33em),
		calc(0% + 0em)		calc(100% + 0em)
	);
	transition:0.3s ease-out;
	transition-property:clip-path, background-color;

	&:is(:hover,:focus-visible){
		background-color:var(--couleur06);
		clip-path:polygon(
			calc(0% + 0em)		calc(0% + 0.33em),
			calc(100% + 0em)	calc(0% + 0em),
			calc(100% - 0.67em)	calc(100% - 0em),
			calc(0% + 0.67em)	calc(100% + 0.33em)
		);
	}
}

/*============*\
#    HEADER    #=====================================================================================================================================
\*============*/

.header{
	display:grid;
	grid-template-columns:clamp(160px, 21vw, 260px) 1fr clamp(220px, 28vw, 340px) auto;
	grid-template-rows:1fr 1fr;
	grid-template-areas:"logo . BW langue" "logo . BW .";
	gap:1.5em;
	align-items:flex-start;
	justify-content:space-between;
	margin-bottom:60px;

	.page-H &{
		grid-template-areas:"logo . BW langue" "compteur . BW .";
	}
}
@media(max-width:600px){
	.header{
		grid-template-columns:1fr 1fr;
		grid-template-rows:auto;
		grid-template-areas:"logo langue" "BW BW";

		.page-H &{
			grid-template-areas:"logo langue" "BW BW" "compteur compteur";
		}
	}
}

/* Logo */
.header-logo{
	grid-area: logo;
	align-self:center;
	display:block;
	flex:0 0 auto;
	width:clamp(160px, 21vw, 260px);
	margin-right:auto;

	& img{ display:block; }
}

/* Best Wishes */
.header-bestwishes{
	grid-area: BW;
	display:block;
	flex:0 0 auto;
	width:clamp(220px, 28vw, 340px);
	background:#fff;
	clip-path:polygon(0% 0%, 99% 0%, 93% 93%, 8% 100%);

	& img{ display:block; }
}
@media(max-width:600px){
	.header-bestwishes{
		order:1;
		width:100%;
		margin-inline:0;
		clip-path:none;
		background:none;
	}
}

/* Sélecteur de langues */
.selectlang{
	grid-area: langue;
	flex:0 0 auto;
	margin:1.5em 0 1.5em auto;
	position:relative;
	width:fit-content;
	line-height:1;
	text-transform:uppercase;
}
.selectlang-selected{
	padding:0.25em 0.5em;
	border-radius:0.25em;
	background:white;
	display:flex;
	align-items:baseline;
	gap:0.5em;
	color:inherit;
	text-decoration:none;

	&::after{
		content:"";
		display:block;
		background:var(--couleur05);
		height:0.67cap;
		top:-0.1667cap;
		position:relative;
		aspect-ratio:2;
		clip-path:polygon(0 0, 100% 0, 50% 100%);
	}
}
.selectlang-liste{
	position:absolute;
	width:100%;
	min-width:fit-content;
	top:100%;
	height:0;
	padding-block:0;
	overflow-y:clip;
	interpolate-size:allow-keywords;
	transition:0.3s ease-out;
	transition-property:height,padding-block;
	z-index:1;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	justify-content:flex-start;
	background:white;
	border-radius:0.25em;

	.active > &{ height:auto; }
}
.selectlang-liste a{
	display:block;
	text-align:center;
	padding:0.25em 0.5em;
	color:inherit;
	border-radius:0.25em;
	text-decoration:none;
	transition:background-color 0.3s ease-out;

	&:is(:hover,:focus-visible){
		background:var(--couleur03);
	}
}
@media(max-width:980px){
	.selectlang{ font-size:0.8em; }
}
@media(pointer:coarse){
	.selectlang-selected,
	.selectlang-liste a{
		min-height:40px;
		align-content:center;
		align-items:center;
	}
}

/* Compteur de participations */
.home-compteur{
	grid-area: compteur;
	font-size:2rem;
	color:var(--couleur05);
	text-align:center;
	line-height:1;

	& b{ font-size:2em; }
}
.home-compteur-icon{
	display:inline-block;
	height:1lh;
}


/*==============*\
#    MOTS-CLÉ    #===================================================================================================================================
\*==============*/
.motscle-outer{
	display:flex;
	align-items:center;
	justify-content:space-between;

	[dir="rtl"] &{
		flex-direction:row-reverse;
	}
}
.motscle{
	width:940px;
	max-width:calc(100% - 20px);
	margin:0 auto;
	position:relative;
	align-content:center;
}
.motscle-fond{
	position:absolute;
	inset:0;
	z-index:-1;
}
/*div#word-cloud,*/
canvas{
	display:block;
	max-width:86%;
	height:auto;
	/*clip-path:polygon(0% 10%, 100% 2.5%, 93.5% 94.5%, 7.5% 100%);*/
	aspect-ratio:1920/1080;
	margin:5% auto 3%;
	direction: ltr;
}
.motscle-silhouettes{
	flex:0 0 auto;
	display:block;
	width:clamp(90px, calc(50% - 470px), 210px);
	height:auto;
	max-height:100%;
	aspect-ratio:21/53;
}
@media(max-width:980px){
	.motscle-silhouettes{ display:none; }
}


/*============*\
#    FOOTER    #=====================================================================================================================================
\*============*/
.footer-img{
	display:block;
	margin-top:90px;
}
.footer-limagrain{
	background:#fff;
	display:flow-root;
}
.footer-limagrain img{
	display:block;
	margin:1em 0 1em auto;
	width:130px;
	height:auto;
}


/*===========================*\
#    SÉLECTION DE MOTS-CLÉ    #======================================================================================================================
\*===========================*/
.keywords-liste{
	margin:10%;
	text-align:center;
	align-content:center;
	/*display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:1em;*/
	font-size:0;
	text-wrap:balance;
}
.keyword-item{
	--couleur:#000;
	color:var(--couleur);
	display:inline-block;
	font-size:2.7rem;
	font-weight:700;
	text-transform:uppercase;
	padding:0.5em 1em;
	border:1px solid var(--couleur);
	transition:0.3s ease-out;
	transition-property:color, background-color;
	cursor:pointer;
	margin:0.8rem;

	&:where(:nth-child( 1)){--couleur:#512c23;}
	&:where(:nth-child( 2)){--couleur:#ffcf44;}
	&:where(:nth-child( 3)){--couleur:#8f8a9c;}
	&:where(:nth-child( 4)){--couleur:#fe7d22;}
	&:where(:nth-child( 5)){--couleur:#a3c1d8;}
	&:where(:nth-child( 6)){--couleur:#027540;}
	&:where(:nth-child( 7)){--couleur:#c09325;}
	&:where(:nth-child( 8)){--couleur:#80aaa3;}
	&:where(:nth-child( 9)){--couleur:#7fca74;}
	&:where(:nth-child(10)){--couleur:#99573f;}
	&:is(:hover,:focus-within,.active){
		color:#fff;
		background-color:var(--couleur);
	}
}