/* CSS for BUZZEE TALK
V 1.0 - Mars 2024
Author: Erwann Ser
*/

/* Variables list*/
:root {--CurrentTextColor: hsl(175	, 70%, 85%)}
:root {--LinkColor: hsl(215, 75%, 25%)}
:root {--OpenSans: "Open Sans", Verdana, Tahoma, Arial, sans-serif}
:root {--OpenSansLight: "Open Sans Light", Verdana, Tahoma, Arial, sans-serif}
:root {--OpenSansMedium: "Open Sans Medium", Verdana, Tahoma, Arial, sans-serif}
:root {--OpenSansBold: "Open Sans Bold", Verdana, Tahoma, Arial, sans-serif}

@font-face {
  font-family: "Open Sans Light";
  font-weight: 300;
  src: url("../fonts/OpenSans-Light.woff2") format("woff2"),
  src: url("../fonts/OpenSans-Light.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  src: url("../fonts/OpenSans-Regular.woff2") format("woff2"),
  src: url("../fonts/OpenSans-Regular.woff") format("woff");
}
@font-face {
  font-family: "Open Sans Medium";
  font-weight: 500;
  src: url("../fonts/OpenSans-Medium.woff2") format("woff2"),
}
@font-face {
  font-family: "Open Sans Bold";
  font-weight: 600;
  src: url("../fonts/OpenSans-Semibold.woff2") format("woff2"),
  src: url("../fonts/OpenSans-Semibold.woff") format("woff");
}

html {
	font-size: 62.5%;
	font-size: calc(1em * 0.625); /* IE9-IE11 math fixing. */
	line-height: 1.15;
	text-size-adjust: 100%;
	-ms-overflow-style: scrollbar;
	-webkit-tap-highlight-color: transparent;	
  }

body {
	margin: 0;
	overflow-x: hidden;	
	background: hsl(215, 77%, 27%);
	background: radial-gradient(600px 600px at 55% 50px, hsla(180, 100%, 30%, .5) 0%, transparent 100%),
				radial-gradient(70% 60% at 10% 40%, hsla(160, 100%, 35%, .5) 0%, transparent 100%),
				linear-gradient(180deg, hsl(215, 80%, 20%) 0, hsl(215 75% 30% / 1) 30%, #1695A1FF 100%);
	/*background-image: url(../images/bg.png);*/
	color: var(--CurrentTextColor);
	font: 1.6em/1.5 var(--OpenSans);
}
@-ms-viewport {width: device-width}
@-o-viewport {width: device-width}
@viewport {width: device-width}


/* RESET & SET RULES
--------------------------------------*/

*, *::before, *::after {
    box-sizing: border-box;
    min-width: 0;     /* avoid min-width: auto on flex and grid children */
    min-height: 0;
}

b, strong {
	color: hsl(215, 50%, 20%);
	color: #ffa683;
	color: hsl(65, 100%, 65%);
	font-weight: 400;
    letter-spacing: .02em;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
p {margin-top: 0;}

#wrapper .txt-center {text-align: center}


/*FORMS ELEMENTS */

form {margin: 0;}
button, input, optgroup, select, textarea {
    margin: 0;
	font: inherit;
	line-height: inherit;
}
button, input, select {vertical-align: middle;}
button, input {overflow: visible;} /* Show the overflow in Edge. */
button, select, label, [type="submit"], [type="file"] {cursor: pointer;} 

button {
    background: none;
    padding: 0;
    border: 0;
	line-height: 1;
	}
button:focus, [type="submit"]:focus {outline: none;}


/* @COMMON RULES
---------------------------------------------*/

table {border-collapse: collapse;}

button, a {transition: all .15s;}

a {
    text-decoration: none;
	color: hsl(65 90% 65% / 1);
    border-bottom: 1px dotted;
}
a:hover {border: 0;}

.hide {display: none;}
.flex {display: flex;}
.noflex {flex: none;}
.bloc {display: block;}

img {max-width: 100%; vertical-align: middle;}

/* @LAYOUT
------------------------------------------------------*/

.wrapper {
	position: relative;
	max-width: 100em;
	margin: 25px auto;
	padding: 0 4%;
	}
	.langs {
		position: absolute;
		right: 4%;
		background: #fff;
		border-radius: .6em;
		overflow: hidden;
	}
	@media only screen and (max-width: 600px) {
		.langs {
			display: table;
			position: static;
			margin: 0 auto 2em;
		}
	} 	
	.langs > button {
		display: flex;
    	align-items: center;
		padding: .6em .9em .6em .7em;
		color: #213347;
		font-size: 1.4rem;
	}
	.is-clicked > .fa-angle-down {transition: all .2s;}
	.is-clicked > .fa-angle-down {transform: rotate(180deg);}
		.langs [class^="lang-"] {
			margin-right: .5em;
			padding-left: 1.9em;
			background-size: contain;
			background-repeat: no-repeat;
			line-height: .9;
		}
		.lang-fr {background: url("/images/flag-france.svg");}
		.lang-en {background: url("/images/flag-UK.svg");}
		.lang-es {background: url("/images/flag-spain.png");}
		.langs .lang-de {padding-left: 2.05em; background-image: url(/images/flag-germany.svg);}
		.lang-it {background: url("/images/flag-italy.svg");}

		#lang-list {
			border-top: 1px solid hsl(210 15% 90% / 1);
			border-radius: 0 0 .7em .7em;
			background: hsl(210 15% 90% / 1);
			font-size: 1.4rem;
		}
		#lang-list > li:first-child > a {padding-top: .3em;}
		#lang-list > li:last-child {padding-bottom: .5em;}
		.langs a {
			display: block;
			padding: .1em 0 0 .7em;
			border: 0;
			line-height: 2.2em;
			color: #213347;
		}
		.langs a:hover {background: #fff;}

	.logo {
		padding-top: 25px;
		text-align: center;
	}
	.intro {margin: 2em 0;}
	.intro-txt {
		margin: 3em auto 4em;
		font-size: 1.8rem;
		max-width: 40em;
		text-align: center;
	}
	.intro-corpo {
		margin: 2em auto;
		max-width: 657px;
		overflow: hidden;
		border-radius: 1em;
		background: hsla(200, 100%, 15%, .7);
		color: #fff;
		}
		.intro-corpo > p {margin: 0;}
		.intro-corpo > p::after {
			content: none;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 100%;
			height: 3px;
			background: url(../images/pointilles.png);
			}
			.intro-corpo_inner {
				display: block;
				position: relative;
				padding: 1em;
				text-align: center;
			}

	.logos {flex: none; margin-left: 25px;}
	.footer {
		width: 40em;
		max-width: calc(100% - 40px);
		margin: 0 auto 40px;
		color: #fff;
	}

	.intro-corpo_inner:first-child::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 3px;
			background: url(../images/pointilles.png);
		}
		.intro-corpo_inner:first-child::before {
			content: "";
			position: absolute;
			left: 50%;
			top: -25px;
			transform: translateX(-50%);
			border: 17px solid transparent;
    		border-bottom: 9px solid #05456a;
		}
		.intro-corpo_inner:last-child::after {
			content: "";
			position: absolute;
			bottom: -25px;
			left: 50%;
			transform: translateX(-50%);
			border: 17px solid transparent;
    		border-top: 9px solid #05456a;
		}

.logos {display: none;}
	

@media only screen and (max-width: 950px) {
.intro {display: block;}
.logo {padding-top: 0;}
} 	
@media only screen and (max-width: 670px) {

	.logos {width: 100%;}

} 	
/* @TEXT
------------------------------------------------------*/

.current-txt {color: #fff;}
h2:not(:first-child) {margin-top: 2em;}
.slogan {
	margin-top: 0.5em;
	color: #113b6d;
	color: #fff;
	font: 3.2rem/1.2em var(--OpenSans);
}
.slogan::after {
    content: "..........";
	display: block;
    margin-top: .3em;
    font-size: 1.7em;
    line-height: .4;
}