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

/* Variables list*/
:root {
	--CurrentTextColor: hsl(195, 80%, 80%)
}

: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%);
	color: var(--CurrentTextColor);
	font: 1.8em/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:not(.normal), strong {
	color: hsl(53, 100%, 70%);
	letter-spacing: .02em;
	font: normal 1em var(--OpenSansMedium);
}
b.normal, strong {letter-spacing: .05em;}

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

p {
	margin-top: 0;
}


/*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;
}

.phide {
	opacity: 0;
	transition: opacity .4s;
}

.show {
	display: block;
}

.flex {
	display: flex;
}

.noflex {
	flex: none;
}

.bloc {
	display: block;
}

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

[class$="-centered"],
[class$="-centered"]::before,
[class$="-centered"]::after,
.centered {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.intro-ttl {
	display: table;
	margin: 0 auto 2em;
	background: linear-gradient(to left, hsl(188.33deg 100% 30.31%), hsl(199.38deg 100% 18.9%));
	padding: .35em 1em .4em 1em;
	border-radius: 1.5em;
	font: 3rem var(--OpenSansLight);
}

.intro-ttl > .bt {
	color: #92f7ff;
}

.intro {
	margin-bottom: 5em;
}


.ttl {
	margin: 5em 0 1.5em;
	padding: .35em 1em .4em;
	border-bottom: 2px solid hsl(197.78deg 100% 21.18%);
	/*background: linear-gradient(to left, hsl(188.33deg 100% 30.31%), hsl(199.38deg 100% 18.9%));*/
	background: linear-gradient(to left, hsl(182deg 83% 30%), hsl(198deg 100% 21%));
	border-radius: .3em 1.5em 1.5em .3em;
	color: #fff;
	font: 3.7rem var(--OpenSansLight);
}
@media only screen and (max-width: 1080px) {
	.ttl {
		display: block;
		margin: 0;
		background: none;
		padding: .5em 0;
		border: 0;
		border-radius: 0;
		border-bottom: 1px solid;
		line-height: 1.1em;
		font-size: 3.4rem;
	}

}

.ttl-small {
	display: inline-block;
	padding: .2em 1em .3em .6em;
	background: #074d6a;
	border-radius: .5em 2.5em 2.5em .5em;
	font-size: 2.2rem;
	margin-bottom: 1em;
}

.list1 > li {
	display: flex;
	align-items: baseline;
	margin-bottom: .7em;
}

.list1 [class*="fa-"] {
	flex: none;
	margin-right: 1.5em;
	font-size: .5em;
}


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

.wrapper {
	margin: 25px auto;
	padding: 0 4%;
	max-width: 86em;
}

.backgrds {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1350px;
	height: 100vh;
	background: url("/images/bg1.png") 0 180px, url("/images/bg2.png") 630px -10px, url("/images/bg3.png") right 80px top 80px;
	background-repeat: no-repeat;
	mix-blend-mode: luminosity;
}

.langs {
	position: absolute;
	right: 4%;
	top: 25px;
	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");
}

.langs .lang-en {
	padding-left: 2.2em;
	background-image: 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 1em 0 .7em;
	border: 0;
	line-height: 2.2em;
	color: #213347;
}

.langs a:hover {
	background: #fff;
}

.head {
	padding-top: 25px;
	text-align: center;
}

.head > a {
	border: 0;
}

.intro {
	margin: 2em 0;
}

.intro-txt {
	display: flex;
	justify-content: center;
	margin: 3em auto 4em;
	font: 2rem/1.5em var(--OpenSansMedium);
	text-align: right;
}

.intro-txt_inner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: 34em;
	margin-right: 3em
}

.intro-corpo {
	margin-top: auto;
}

@media only screen and (max-width: 1400px) {
	.intro-txt {
		display: block;
		text-align: center;
		margin-bottom: 2em;
	}

	.intro-txt_inner {
		align-items: center;
		max-width: 38em;
		margin: 0 auto;
	}

	.intro-corpo {
		margin: 3em auto;
	}
}

.intro-corpo,
.compat_inner {
	max-width: 657px;
	overflow: hidden;
	border-radius: 1em;
	background: hsla(200, 100%, 15%, .7);
	color: #fff;
	font-size: 1.8rem;
}

.compat {
	display: flex;
	justify-content: center;
	border-top: 1px dotted #fff;
	padding-top: 4em;
}

.compat_inner {
	background: #f2f6f7;
	text-align: center;
	border-radius: .3em .3em 1em 1em;
	padding-bottom: 15px;
	margin-bottom: 4em;
	min-width: 37em;
}

.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,
.compat_inner > p {
	display: block;
	position: relative;
	padding: 1em;
	text-align: center;
}

.compat_inner > p {
	margin-bottom: 1.8em;
	background: hsla(200, 60%, 20%);
	line-height: 1.6em;
}

.compat_inner span {
	color: hsl(190, 90%, 80%);
	font-family: var(--OpenSansMedium);
}

.compat_inner > img {
	padding: 0 15px;
}


.logos {
	flex: none;
	margin-left: 25px;
}

.footer {
	width: 36.6em;
	color: #fff;
	margin-left: 3em;
}

@media only screen and (max-width: 1400px) {
	.footer {
		width: auto;
		margin: 0;
		max-width: none;
	}

	.compat {
		display: block;
		border: 0;
		padding-top: 0em;
	}

	.compat_inner {
		margin: 3em auto;
		min-width: 0;
	}

}

@media only screen and (max-width: 750px) {
	.footer {
		width: auto;
		max-width: none;
	}
}

.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,
.compat_inner > p::after {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 50%;
	transform: translateX(-50%);
	border: 17px solid transparent;
	border-top: 9px solid #05456a;
}

.compat_inner > p::after {
	border-top-color: #143d52;
}

.logos {
	display: none;
}


footer {
	text-align: center;
	margin-bottom: 30px
}

footer > img:first-child {
	margin-right: 30px
}


@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: .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;
}


/* HOMEPAGE */

.video {position: relative;}
	.video > button {
		overflow: hidden;
		border-radius: 1em;
	}	

@media only screen and (max-width: 1400px) {
	.video {margin: 3em auto 4em; text-align: center;}
}


.try {
	margin-bottom: 1.5em;
	color: #fff;
	text-align: center;
	font-size: 2.2rem;
}

.try-inner {
	padding: .2em .7em .3em;
	border-radius: .3em;
	border: 1px solid;
}

.download {
	margin: 20px auto 50px;
	justify-content: space-between;
	max-width: 560px;
}

.download > a {
	width: calc(50% - 10px);
	overflow: hidden;
	border: 1px solid #fff;
	border-radius: .8em;
}

.also {
	display: flex;
	color: #fff;
}

.also + .flex > div:last-child {
	padding-left: 40px;
	margin-left: 40px;
	border-left: 1px dotted;
}

@media only screen and (max-width: 1100px) {
	.also {display: block;}

	.iphone {
		display: block;
		margin: 2em auto !important
	}
.iphone + div {margin: 2em auto !important}	
.also + .flex {display: block;}
.also + .flex > div {
    margin: 2em auto;	
	max-width: 39em;
}
.also + .flex > div:last-child {
	padding: 0;
	margin: 0 auto;
	border: 0;
}
	
	
}

.also > img {
	flex: none;
	margin: 0 4em 4em 0;
	overflow: hidden;
	border-radius: .6em;
	border: 2px solid;
}


.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	margin-top: 80px;	
}

	/* Première colonne */
	.item-1-1 {
		grid-column: 1;
		grid-row: 1;
		text-align: right;
		padding-right: 25px;
	}

	.item-2-1 {
		grid-column: 1;
		grid-row: 2;
		justify-self: end;
		margin-top: auto;
		padding: 0 25px 80px 0;
	}

	.item-3-1 {
		grid-column: 1;
		grid-row: 3;
		padding: 80px 25px 0 0;
		border-top: 1px dotted #fff;
	}

	.item-fusionne {
		grid-column: 2;
		grid-row: 1 / 3;
		padding: 0 0 80px 25px;
	}

	.item-3-2 {
		grid-column: 2;
		grid-row: 3;
		padding: 80px 0 0 25px;
		border-top: 1px dotted #fff;
		color: #fff;
	}