/********************************************
	* Domaine : ultrafluide.com
	*
	* Exploitant : Ultra Fluide
	*
	* Rôle : Feuille de style principale 
	*
	* Auteur : Ultra-Fluide, copyright 2023
********************************************/

/**** classique  ********/
/************************/
* {margin: 0px; padding: 0px; box-sizing: border-box;}
p, li, table, a , h4, h1, h2, h3, h5, dl, code, input, textarea{
	font-family: 'Sora', sans-serif;
}
a { 
	text-decoration: none;
}
/**** Global  *****************/
/*****************************/

body { 
	overflow-x: hidden;
	--header-height: min(100px, 17vh);
	--ma-largeur:min(var(--largeur-disponible), 2.25*(100vh - var(--header-height)));
	--audace-width: max(200px,calc(0.25*var(--ma-largeur)));
	--deux-height:calc(var(--audace-width) * 5 / 47.5);
	--deux-width:calc(var(--deux-height) * 28.8 / 40.05);
}
section {
	width: var(--ma-largeur);
	height:calc(100vh - var(--header-height));
	position:relative;
	margin: 0 auto;
}
/**** Header  *****************/
/*****************************/
header {
	height: var(--header-height);
	position: sticky !important;
	position: -webkit-sticky;
	top: 0;
	z-index: 20;
	box-shadow: 0 1px 2px 0 #aaa;
	background:white;
}
header > div{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	width: var(--ma-largeur);
	margin: 0 auto;
	height:100%;
}
header h1 {
	width: clamp(150px, 30%, 250px);
	margin-left:2.7%;
	font-size:clamp(7px,calc((0.3 * var(--ma-largeur) - 10px)* 0.05),12px);
	font-weight:400;
}
header h1 a{
	color:black;
}
header h1 svg{
	width:100%;
	margin-bottom:7px;
}
header ul{
	display: flex;
	flex-flow: row nowrap;
	justify-content: end;
	list-style: none;
	line-height: min(30px, 0.0666 * var(--ma-largeur));
	margin-right:2.7%;
}

header ul li a{
	padding:0 0 0 min(20px, 0.02 * var(--ma-largeur));
	color:black;
	font-weight: 300;
	font-size: min(19px, 0.031666 * var(--ma-largeur));
}
header ul li a img{
	width:min(30px, 0.0666 * var(--ma-largeur));
}
/**** Intro  *****************/
/*****************************/
svg#audace {
	position:relative;
	width:var(--audace-width);
	transform: translate(-50%,0);
	left:50%;
	top:20%;
	overflow: visible;
	height:calc(var(--audace-width) * 0.177);
}
svg#audace * { 
	animation: 3s ease 1 ;
	transform-origin: center;
}
@keyframes couleurF { 0% {fill:#e42313} 95% {fill:#e42313} 100% {} }
svg#audace *:last-child { 
	animation-duration:4s,2.2s ;
}
section#intro p { 
	font-weight:300;
	position:relative;
	text-align:center;
	top:20%;
}
p#rigueur {
	overflow: visible;
	font-size:calc(var(--audace-width) * 0.1366667);
}
p#rigueur *{
	animation: 4s ease 1 ;
	display:inline-block;
}
@keyframes couleurL { 0% {color:#e42313} 95% {color:#e42313} 100% {} }
p#rigueur *:last-child { 
	animation-duration:5s,4s ;
}
p#lesdeux {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
}
p#lesdeux #deux, p#lesdeux span{
	animation: 4.3s cubic-bezier(.47,.05,.81,1.2) 1 ;
}
@keyframes gauche { 0% {transform:translate(calc(var(--largeur-disponible) * -0.6),0)} 93% {transform:translate(calc(var(--largeur-disponible) * -0.6),0)} 100% {} }
@keyframes droite { 0% {transform:translate(calc(var(--largeur-disponible) * .6),0)} 93% {transform:translate(calc(var(--largeur-disponible) * .6),0)} 100% {} }
@keyframes big { 0% {} 99% {height:calc(var(--audace-width) * 5 / 47.5)} 99.5% {height:calc(var(--audace-width) * 0.2)} 100% {} }
p#lesdeux span { 
	animation-name: gauche;
	font-size:calc(var(--audace-width) * 0.1366667);
	margin-left:10px;
}
p#lesdeux #deux {
	height:var(--deux-height);
	fill:#e42313;
	animation-name: droite, big;
	animation-timing-function : cubic-bezier(.47,.05,.81,1.2), ease;
	margin:0 0 .3% 1.3%;
}
p#lesdeux  #circle {
	display:none;
}
section#intro p#uf {
	top:33%;
	font-size:calc(var(--audace-width) * 0.07);
}
section#intro p#uf span{
	font-size:calc(var(--audace-width) * 0.065);
}
section#intro p#scroll {
	position:absolute;
	width:100%;
	top:83%;
	color:#888;
	font-weight:400;
	font-size:min(20px, calc(var(--audace-width) * 0.06));
}
section#intro p#scroll:after {
	content:url(images/scroll.svg);
	display:inline-block;
	width:20px;
	margin-top:10px;
}
@keyframes uf { 0% {opacity: 0;} 85% {opacity: 0;} 100% {} }
section#intro p#scroll, section#intro p#uf {
	animation: 5.2s linear 1 uf;
}
/**** Expertise  *****************/
/*****************************/
section#expertise > * { 
	text-align:right;
}
section#expertise > article { 
	margin:10px 0;
	position:absolute;
}
section#expertise h2, section#expertise p { 
	font-weight:300;
}
section#expertise h2{ 
	font-size:calc(var(--audace-width) * 0.07);
}
section#expertise p { 
	font-size:calc(var(--audace-width) * 0.045);
}
section#expertise p:nth-of-type(2) { 
	font-size:calc(var(--audace-width) * 0.03);
	color:#888;
}
section#expertise #expertisetitre { 
	font-family: 'Codystar', cursive;
	font-weight: 400;
	font-size:calc(var(--audace-width) * 0.1366667);
	color:#ff1f45;
	opacity:0;
	position:absolute;
	left:10%;
	top:8%;
}
section#expertise #pilotage { 
	color:white;
	right:5%;
	top:43%;
}
section#expertise article *{ 
	opacity:0;
}
section#expertise #pilotage p { 
	opacity:1;
}
section#expertise #strategie, section#expertise #creation, section#expertise #production{ 
	right:60%;
}
section#expertise #strategie h2, section#expertise #creation h2, section#expertise #production h2 { 
	color:#888;
}
section#expertise #strategie {
	top:35%;
}
section#expertise #creation {
	top:40%;
}
section#expertise #production {
	top:45%;
}
section#expertise .etoiles polygon{
	fill:#ff1f45;
}
section#expertise .etoiles {
	width:calc(var(--audace-width) * 0.1);
	top:calc( 0.82 * var(--deux-width) * var(--scale-deux) / 2 + 50% - var(--audace-width) * 0.1);
	right:calc(0.3 * var(--deux-width) * var(--scale-deux));
	position:absolute;
	opacity:0;
}
/**** Clé en main  *****************/
/*****************************/
/* Titre + Tout est possible */
section#cleenmain { 
	overflow:hidden; /* sur tel, malgré la largeur explicité des sections, leurs débordements crééent un ascenseur horizontal et par aiulleur mets en echec tout le systeme de scroll...*/
}
section#cleenmain h1 { 
	font-family: 'Codystar', cursive;
	font-weight: 400;
	font-size:calc(var(--audace-width) * 0.1366667);
	color:#ff6913;
	opacity:0;
}
section#cleenmain article:first-child { 
	position:absolute;
	top: 45%;
	left: 50%; 
	transform: translate(-50%, -50%);
}
section#cleenmain article:first-child p{ 
	font-weight: 300;
	font-size:calc(var(--audace-width) * 0.045);
	margin-left:20px;
}
section#cleenmain article:first-child p span{ 
	opacity:0;
}
section#cleenmain svg{ 
	position:absolute;
	top: 50.6%;
	left: 50%; 
	transform: translate(-50%, -50%);
	width:calc(.1*var(--ma-largeur));
	opacity:0;
	overflow: visible;
}
section#cleenmain svg > *{ 
	fill:#ff1f45;
	fffill:#00ff45;
}
/* Liste des supports */
section#cleenmain article#supports {
	transform-origin: calc(-.07*var(--ma-largeur)) top;	
	position:absolute;
	top: 50.6%;
	left: 57%;
	opacity:0;
}
section#cleenmain article#supports p{ 
	transform-origin: left top;
	font-size:calc(var(--audace-width) * 0.04);
	line-height:calc(var(--audace-width) * 0.05);
}
/**** Convictions  *****************/
/*****************************/
section#convictions { 
	overflow:hidden; /* sur tel, malgré la largeur explicité des sections, leurs débordements crééent un ascenseur horizontal et par aiulleur mets en echec tout le systeme de scroll...*/
}
section#convictions h1 {
	font-family: 'Codystar', cursive;
	font-weight: 400;
	font-size: calc(var(--audace-width) * 0.1366667);
	color: #ff0000;
	opacity: .1;
	position: absolute;
	width:100%;
	text-align: center;
	top: 15%;
}
section#convictions h2 {
	font-weight: 400;
	font-size: calc(var(--audace-width) * 0.1);
	position: absolute;
	width:100%;
	text-align: center;
	top: 27%;
}
section#convictions h2 span{
	opacity: .1;
}
section#convictions p {
	font-weight: 300;
	font-size: calc(var(--audace-width) * 0.06);
	line-height: calc(var(--audace-width) * 0.11);
	position: absolute;
	width:100%;
	text-align: center;
}
section#convictions p:first-of-type {
	top: 52%;
}
section#convictions p:last-of-type {
	top: 57%;
}
section#convictions div{
	width:100%;
	font-weight: 500;
	font-size: calc(var(--audace-width) * 0.11);
	height: calc(var(--audace-width) * 0.11);
	color:#ff0000;
	opacity: 1;
	position: absolute;
}
section#convictions div:first-of-type {
	top: 52%;
}
section#convictions div:last-of-type {
	top: 57%;
}
section#convictions code{
	display:inline-block;
	position:relative;
	width:50%;
	height: calc(var(--audace-width) * 0.11);
	background:white;
}
section#convictions code span{
	display:block;
	position:absolute;
	height: calc(var(--audace-width) * 0.11);
	transform:scale(0);
	top:-2px;
}
section#convictions #interrogation .droite span{
	left:calc(var(--audace-width) * -0.06118929);
}
section#convictions #exclamation .droite span{
	left:calc(var(--audace-width) * -0,03375959);
}
section#convictions .gauche span{
	right:0;
}

/**** Références  *****************/
/*****************************/
section#references article { 
	position:absolute;
	top: 15%;
	left:-60vw;
	width:var(--audace-width);
	text-align: center;
}
section#references h1 {
	font-family: 'Codystar', cursive;
	font-weight: 400;
	font-size: calc(var(--audace-width) * 0.1366667);
	color: #dd095b;
}
section#references h2 {
	font-weight: 400;
	font-size: calc(var(--audace-width) * 0.1);
	margin-top:10px;
}
section#references article p {
	margin-top:50px;
	font-size: calc(var(--audace-width) * 0.05);
	font-weight: 300;
}
section#references article p a {
	vertical-align: sub;
}
section#references article p a:first-child {
	vertical-align: baseline;
	color: #dd095b;
}
section#references article p img {
	width: calc(var(--audace-width) * 0.05);
}
section#references aside { 
	position:absolute;
	height:100%;
	left:60%;
	width:calc(var(--ma-largeur) * 0.4);
	opacity:0;
	overflow:hidden;
}
section#references aside:before, section#references aside:after {
	content:"";
	position:absolute;
	height:30%;
	width:100%;
	background-color:red;
	z-index:5;
}
section#references aside:after  { 
	bottom:0;
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
}
section#references aside:before  { 
	top:0;
	background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
}
section#references aside div{ 
	position:relative;
	top:15%;
	width:100%;
}
section#references aside p{ 
	max-height:113px;
	height:calc(var(--ma-largeur) * 0.4 * 113 / 227); /* 113 / 227 ratio hauteur sur longueur de tous les logos */
}
section#references aside img{
	display:block;	
	height:100%;
}
/**** Contact  *****************/
/*****************************/
section#contact { 
	overflow:hidden; /* sur tel, malgré la largeur explicité des sections, leurs débordements crééent un ascenseur horizontal et par aiulleur mets en echec tout le systeme de scroll...*/
	background-color:#fffff;
}
section#contact > *  {
	position:relative;
	top: 20%;
}
section#contact h1 {
	font-family: 'Codystar', cursive;
	font-weight: 400;
	font-size: calc(var(--audace-width) * 0.1366667);
	color: #ff1f45;
	text-transform: uppercase;
	margin :30px 0 30px 10%;
}
section#contact h1 span {
	font-weight: 600;
	color: black;
	font-family: 'Sora', sans-serif;
}
section#contact h1 #leo {
	position:relative;
	z-index:5;
	height:calc(var(--audace-width) * 0.103);
	visibility:visible;
}
section#contact p {
	margin-left:20%;
	font-size: calc(var(--audace-width) * 0.045);
	font-weight: 300;
}
section#contact p img {
	width: calc(var(--audace-width) * 0.045);
}
section#contact a {
	color: #ff1f45;
	font-size: calc(var(--audace-width) * 0.07);
	border-left: 2px solid #ff1f45;
	padding-left:5px;
	vertical-align: sub;
}
section#contact p.soumis {
	font-weight: 400;
	color: #ff1f45;
	margin-top: 30px;
}
section#contact p:last-child {
	top: 40%;
}
section#contact p:last-child a{
	border:none;
}
section#contact p:last-child a:first-child{
	vertical-align: baseline;
	font-size:calc(var(--audace-width) * 0.045);
}
/**** Adresse  *****************/
/*****************************/
section#adresse {
	z-index:10;
	opacity:0;
}
section#adresse h1 {
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	font-weight: 300;
	font-size: calc(var(--audace-width) * 0.11);
	text-transform: uppercase;
}
section#adresse p {
	font-weight:300;
	font-size:calc(var(--audace-width) * 0.055);
}
section#adresse p:first-of-type {
	position:relative;
	top:3%;
	left:10px;
}
section#adresse p:last-child {
	position:absolute;
	right:10px;
	bottom:3%;
}
/**** Pop-up formulaire ****/
/*************************************/
.target-fix {
	display: block;
	left: 0;
	position: fixed;
	top: 0;
}
body > div#portfolio, body > div#projet {
	max-width:calc(var(--ma-largeur) - 10px);
	width:700px;
	display: none;
	position: fixed;
	bottom: 5px;
	right: 30px;
	box-shadow: 0 0 32px 0 rgb(60 60 60 / 40%);
	border-radius: 25px;
	background:white;
	padding-top:30px;
	font-size: 1.6rem;
	font-weight: 300;
	text-align: center;
	z-index:10;
	left: 50%;
	transform: translate(-50%,0) scale(1);
}
#portfolio:target, #projet:target {
	display: block;
}
body > div > p:first-child{
	position: absolute;
	top: 6px;
	right: 15px;
	font-weight: 400;
}
/* formulaire */
form{
	width:100%;
	margin:0;
	color:#555;
	background: white; 
	position:relative;
	
}

form > div{
	width:90%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin:3% auto;
}
form > div:last-child{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin:5% auto 0 auto;
}
form textarea, form input {
	border:none;
	border-bottom: 1px solid #555;
	background-color: transparent;
	font-size: 1.15rem;
	font-style: italic;
	color:#555;
	font-weight:300;
}
form input {
	width:48%;
	margin:8px 0;
	padding:5px 0;
}
form input::placeholder, form textarea::placeholder {
	color: #999;
	opacity: .9;
}
form > div:first-child input:nth-of-type(4) {
	display:none;
}
form textarea {
	width:100%;
}
form input[type="submit"] {
	border-radius: 2px;
	color: white;
	font-size: 1.3rem;
	font-style: normal;
	font-weight:500;
	text-transform: uppercase;
	margin:0;
	cursor: pointer;
	width: 200px;
	height:50px;
	background: #ff1f45;
	border:none;
	letter-spacing: .2rem;
}