/* CSS Document */

strong {
	font-weight: bolder;
}

.r_mess {
	width: 100%;
	text-transform: capitalize;
	color: green;
	font-size: 15px;
	margin-bottom: 20px;
}

body {
	font-family: "Hubballi", sans-serif !important;
	overflow-x: hidden;
}

body p {
	font-size: 1.5rem;
}

.top {
	background-color: #F1EDEA;
	padding: 10px;
	justify-content: space-evenly;
	display: flex;
}

.top a {
	color: black;
	text-decoration: none;
}

.nav-item a {
	font-size: 20px;
	position: relative;
}

.nav-item a:before, a:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -2px;
  background: #b972f6;
}

.nav-item a:before {
  left: 0;
}
.nav-item a:after {
  right: 0;
  background: #b972f6;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-item a:hover:before {
  background: #b972f6;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-item a:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;
}

#intro h1 {
	font-family: "Modak", system-ui;
	font-size: 6rem;
} 

#intro h2 span {
	text-decoration: underline;
	text-decoration-color: #FF8913;
}

#intro h2 span:last-of-type {
	text-decoration-color: #b972f6;
}

#intro #guillemet {
	position: absolute;
	border-top-right-radius: 0;
	top: 80px;
	left: 90%;
}

#intro img {
	border-top-right-radius: 180px;
}

#slogan {
	 background-color: orange;
	color: white;
}

#slogan p {
	font-family: "Padyakke Expanded One";
	font-size: 43px;
	padding: 10px;
	margin-top: 8px;
	font-weight: bolder;
	margin-bottom: 0;
}

#slogan > :first-child {
	display: inline-flex;                /* modèle de boîte en ligne */
	white-space: nowrap;                  /* pas de passage à la ligne */
	animation: defilement-rtl 15s infinite linear;
	animation-name: defilement-rtl;       /* référence à la règle @keyframes mise en oeuvre */
	animation-duration: 50s;              /* valeur à ajuster suivant la longueur du message */
	animation-iteration-count: infinite;  /* boucle continue */
	animation-timing-function: linear;    /* pas vraiment utile ici */
	align-items: center;
}

#slogan:hover > div {
  animation-play-state: paused; /* met en pause le défilement */
}

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

h3 {
	font-family: "Modak", system-ui;
	font-size: 50px !important;
	letter-spacing: 2px;
}

#a_propos {
	background: url("img/diese.svg") right no-repeat;
}

#a_propos p {
	width: 60%;
}

.bouton {
	background-color: #E2EB55;
	padding: 10px 25px;
	display: inline-block;
	border-radius: 35px;
	text-transform: uppercase;
	color: black;
	text-decoration: none;
	font-size: 23px;
	border: 1px solid;
	text-align: center;
	transition: all linear 0.2s;
	margin-bottom: 1rem!important;
}

.bouton:hover {
	border: 1px solid;
	box-shadow: 2px 2px 0px 2px black;
}

#services {
	position: relative;
	color: white;
	text-align: center;
}

#services img {
	border-radius: 280px 280px 0 0;
}

#violet {
	background-color: #B972F6;
	position: absolute;
	width: 100%;
	height: 70%;
	z-index: -1;
}

.num p:first-of-type {
	font-family: 'modak';
	font-size: 55px;
	padding: 20px;
}

.bloc {
	position: relative;
}

.bloc:hover .survol {
	opacity: 1;
}

.survol {
	background: rgba(56, 19, 55, 0.8) no-repeat;
	display: inline;
	height: 100%;
	opacity: 0;
	position: absolute;
	transition: all .3s ease-out;
	width: 100%;
	left: 0;
	border-radius: 280px 280px 0 0;
}

#services .survol p {
	color: #fff;
	position: absolute;
	bottom: 0;
	font-size: 56px;
	width: 100%;
}

#footer {
	background-color: #F1EDEA;
}

#footer a {
	color: black;
	text-decoration: none;
	font-size: 1.5rem;
}

#mentions {
	background-color: #FF9D3C;
	color: white;
}

#mentions a {
	color: white;
}

#portfolio h3, #contact h3, #about h3, .projets h3, #mention_l h3 {
	color: #FF9D3C;
}

.projets h3 {
	padding-bottom: 30px;
}

.projets img {
	border-radius: 35px;
}

#contact {
	background: url("img/bulle.svg") no-repeat right;
	background-size: contain;
}

form input, textarea {
	width: 100%;
	border: #707070 1px solid;
	border-radius: 25px;
	color: gray;
	padding-left: 10px;
}

#about ul {
	list-style: none;
}

#about ul:first-of-type {
	background:url("img/guillemet3.svg") left no-repeat;
}

#about ul:nth-child(2) {
	background: url("img/guillemet1.svg") left no-repeat;
}

#about ul:last-of-type {
	background: url("img/guillemet2.svg") left no-repeat;
}

#about #compet ul {
	background: none;
}

#about img {
	margin-top: -100px;
	height: 100%;
}

#compet {
	background-color: #E2EB55;
}

.projets {
	background: url("img/interro.svg") no-repeat;
	background-size: contain;
	background-position: -330px;
	padding-bottom: 80px;
}

#ulule img {
	border-radius: 0;
}

@media (max-width: 991.98px) {
	
	#a_propos p {
		width: 100% !important;
	}
	
	#contact form {
		width: 100% !important;
	}
	
	#portfolio {
		margin: 0px !important;
	}
	
	.projets img {
		border-radius: 8px;
	}
	
	#intro img {
		border-radius: 100%;
		margin-left: 40px;
	}
	
	#intro #guillemet {
  position: absolute;
  border-radius: 0;
  top: 30px;
  left: 80%;
}

@media (max-width: 767.98px) {
	
	#intro #guillemet {
		display: none;
	}
	
	#intro img {
		border-radius: 0;
		margin-left: 0px;
	}
	
	#intro h1 {
		position: absolute;
		top: 50px;
		left: 80px;
		color: white;
	}
	
	#intro {
		position: relative;
	}
	
	#violet {
		height: 101%;
	}
	
	#services .survol p {
		top: -100px;
		text-shadow: 1px 1px 5px #b972f6;
	}
	
	.survol {
		opacity: 1;
		background: none;
	}
	
	.num p:first-of-type {
		font-size: 100px;
	}
	
	#pourquoi h3 {
		text-align: center;
	}
	
	#about img {
		margin: 60px 0 60px 0;
	}
	
	.nav-item a:hover:before, .nav-item a:before, .nav-item a:after {
		background: none;;
	}
	
	.navbar-collapse {
		text-align: center;
	}
	
	.navbar-brand {
		display: block;
		text-align: center;
		margin: auto;
	}
	
	.projets .w-50 {
		width: 100% !important;
	}
	
}

@media (max-width: 575.98px) {
	#intro h1 {
		font-size: 3.6rem;
		left: 38px;;
	}
	
	#intro p, #intro div {
  		text-align: center;
	}
	
	#intro p {
		padding: 20px 0 50px !important;
	}
	
	#services .survol p {
		font-size: 46px;
	}
	
	#slogan p {
		font-size: 30px;
	}
	
	#slogan img {
		width: 170px;
	}
	
	#about #compet ul {
		text-align: center;
	}
	
	#a_propos {
	background: url("img/diese2.svg") right no-repeat;
	}	
	
	#slogan {
		overflow: hidden;
	}
	
	#about img {
	margin-top: 0;
	height: auto;
}

}