@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100vh;
	font-family: 'Muli', sans-serif;
    overflow-x: hidden;
}

.headerun {
	height: 26em;
}

header {
	height: 20em;
	color: #009CA6;
	text-align: center;
	
}

.logoun {
	width: 40%;
	height: 60%;
	float: left;
	background-image: url(../img/logo_2clrs.png); background-size: 10em; background-position: center; background-repeat: no-repeat;
}

.logo {
	width: 40%;
	height: 83%;
	float: left;
	background-image: url(../img/logo_2clrs.png); background-size: 10em; background-position: center; background-repeat: no-repeat;
}

header nav {
	width: 90%;
	text-align: right;
	line-height: 16em;
}

header nav a {
	text-decoration: inherit;
	color: #009CA6;
	padding: 0 1em;
    background-color: #fff;
}

header p {
    color: #009CA6;
}

a:hover {
	color: #E8927C;
}

#icn:hover {
    animation-name: icn;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    
}

@keyframes icn {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.actif {
	color: #E8927C;
	font-weight: 700;
	text-decoration: line-through;
}
header article {
	width: 10em;
	float: right;
	padding-top: 4em;
}

header article a {
	display: block;
	width: 3.5em;
	padding-left: 5em;
	padding-top: 0.5em;
}

header article img {
	display: block;
	width: 3.5em;
}

header p {
	clear: both;
	float: none;
	width: 100vw;
}

#retour {
	background: #009CA6;
	border-radius: 1em 0 0 1em;
	padding: 2em 2.5em;
	color: #fff;
	position: fixed;
		bottom: 5%;
		right: -0.5em;
		line-height: 1em;
}

h2 {
	font-size: 2em;
    color: #009CA6;
	line-height: 1.5em;    
}

#anim {
    animation-name: bonjour;
    animation-duration: 0.7s;
    animation-timing-function: ease-in-out;
}

@keyframes bonjour {
    0% {font-size: 0;
          opacity: 0;}
    50% {font-size: 2.1em;}
    100% {font-size: 2em;
        opacity: 1;}
}
/* fin header */

.galerie {
	text-align: center;
	padding: 2.5em 15em;
}

.galerie a {
	width: 25em;
	height: 15em;
	margin: 1.8%;
	display: inline-block;
	border-radius: 15px;
	
}

#envoirplus {
    background-color:#E8927C; 
    padding-top: 5em;
}

#envoirplus h2 {
    color: #fff;
    line-height: 0;
}

#envoirplus p {
    color: #fff;
    line-height: 5em;
}

#envoirplus a {
    width: 25em;
	height: 15em;
	margin: 1.8%;
	display: inline-block;
	border-radius: 15px;
}

p {
	line-height: 1.5em;
	color: #E8927C;
	font-weight: 600;
}

italic {
    font-style: italic;
}

.projet1 {
	background-image: url(../img/galerie-fan.png); background-size: cover; background-repeat: no-repeat; background-position: bottom;
}
.projet1:hover {
	background-image: url(../img/hover_galerie_fan.gif); background-size: cover; background-repeat: no-repeat; background-position: bottom;
}
.projet2 {
	background-image: url(../img/galerie-soulanges.png); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet2:hover {
	background-image: url(../img/hover_galerie_soulanges.gif); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet3 {
	background-image: url(../img/galerie-corps.png); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet3:hover {
	background-image: url(../img/hover_galerie_corps.gif); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet4 {
	background-image: url(../img/galerie-pub.png); background-size: cover; background-repeat: no-repeat; background-position: top;
}
.projet4:hover {
	background-image: url(../img/hover_galerie_pub.gif); background-size: cover; background-repeat: no-repeat; background-position: top;
}
.projet5 {
	background-image: url(../img/../img/galerie-vif.png); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet5:hover {
	background-image: url(../img/../img/hover_galerie_vif.gif); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet6 {
	background-image: url(../img/galerie-cml.png); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet6:hover {
	background-image: url(../img/hover_galerie_cml.gif); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet7 {
	background-image: url(../img/galerie-llio.png); background-size: cover; background-repeat: no-repeat; background-position: top;
}
.projet7:hover {
	background-image: url(../img/hover_galerie_llio.gif); background-size: cover; background-repeat: no-repeat; background-position: top;
}
.projet8 {
	background-image: url(../img/galerie-agrivert.png); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet8:hover {
	background-image: url(../img/hover_galerie_agrivert.gif); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet9 {
	background-image: url(../img/galerie-berger.png); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet9:hover {
	background-image: url(../img/hover_galerie_berger.gif); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet10 {
	background-image: url(../img/galerie-photos.png); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet10:hover {
	background-image: url(../img/hover_galerie_photos.gif); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet11 {
	background-image: url(../img/galerie-illus.png); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.projet11:hover {
	background-image: url(../img/hover_galerie_illus.gif); background-size: cover; background-repeat: no-repeat; background-position: center;
}


/* PAGE ME RENCONTRER */

.merencontrer {
	background-image: none;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
}
.presentation {
	text-align: left;
	width: 40%;
	margin-left: 18%;
	padding: 0% 10%;
	
}

/* PAGE PROJET */

.details {
	text-align: left;
	padding: 0;
	margin-left: 57%;
	width: 28%;
	line-height: 1.5em;
	color: #E8927C;
}

.details h2 {
	font-family: 'Cormorant Garamond', serif;
	color: #009CA6;
	font-weight: 700;
}

.details h5 {
	font-family: 'Cormorant Garamond', serif;
	color: #009CA6;
	font-weight: 700;
	font-size: 1em;
}

.details p {
    padding-bottom: 25%;
}

a{
	text-decoration: none;
    color: #009CA6;
	font-weight: 600;
    cursor:crosshair;
}

a:hover{
    color: #E8927C;
}

.swiper-container {
    width: 865px;
    height: 530px;
    border-radius: 30px;
}

.swiper-container img {
    min-width: 100%;
}

.swiper-button-next {
    background-image: url(../img/slide_droit.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 50px;
}

.swiper-button-next:hover {
    background-image: url(../img/slide_droit_hover.png);
}

.swiper-button-prev {
     background-image: url(../img/slide_gauche.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 50px;
}

.swiper-button-prev:hover {
    background-image: url(../img/slide_gauche_hover.png);
}

.swiper-pagination-bullet-active {
    background: #E8927C!important;
}

.swiper-pagination-bullet {
   background: #009CA6;
    opacity: inherit;
}

.fan {
	background-image: url(../img/@2x_bg_fan.png);
	background-position: 0 13em ;
	background-repeat: no-repeat;
	background-size: 52%;
}

.soulanges {
	background-image: url(../img/@2x-bg-soulanges.png);
	background-position: 0 13em ;
	background-repeat: no-repeat;
	background-size: 52%;
}

.corps {
	background-image: url(../img/@2x-bg-corps.png);
	background-position: 0 13em ;
	background-repeat: no-repeat;
	background-size: 52%;
}

.pub {
	background-image: url(../img/bg_04_pub.png);
	background-position: 0 13em ;
	background-repeat: no-repeat;
	background-size: 52%;
}

.vif {
	background-image: url(../img/@2x-bg-vif.png);
	background-position: 0 13em ;
	background-repeat: no-repeat;
	background-size: 52%;
}

.cml {
	background-image: url(../img/@2x-bg-cml.png);
	background-position: 0 13em ;
	background-repeat: no-repeat;
	background-size: 52%;
}

.llio {
	background-image: url(../img/@2x-bg-llio.png);
	background-position: 0 13em ;
	background-repeat: no-repeat;
	background-size: 52%;
}

.agrivert {
	background-image: url(../img/@2x-bg-agrivert.png);
	background-position: 0 13em ;
	background-repeat: no-repeat;
	background-size: 52%;
}

.berger {
	background-image: url(../img/@2x_bg_berger.png);
	background-position: 0 13em ;
	background-repeat: no-repeat;
	background-size: 52%;
}

.photos {
	background-image: url(../img/@2x-bg-photos.png);
	background-position: 0 13em ;
	background-repeat: no-repeat;
	background-size: 52%;
}

.illus {
	background-image: url(../img/@2x_bg_illus.png);
	background-position: 0 13em ;
	background-repeat: no-repeat;
	background-size: 52%;
}



.photo {
    text-align: center;
}
.photo li {
    margin: 5% 10%;
    max-width: 100%;
}
.photo img {
    width: 100%;
}

/* FOOTER */

footer {
    padding-bottom: 1.5em;
    padding-top: 1.5em;
	text-align: center;
	clear: both;
    font-weight: 600;
    font-size: 0.8em;
    line-height: 6em;
}

/* TCHIN TACTIC */
.tchintactic {
    
    background-color: #E8927C;
    background-image: url(../img/bg12.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}
.tchintactic h2 {
    color: #fff;
    text-align: center;
    line-height: 2.6em;
    animation-name: bonjour;
    animation-duration: 0.7s;
    animation-timing-function: ease-in-out;
    font-size: 2.5em;
    padding-top: 4vh;
}
.tchintactic p{
    color: #fff;
    text-align: center;
    line-height: 1.5em;
    font-size: 1em;
}
.pun {
    animation-name: opacite;
    animation-duration: 2.4s;
    animation-timing-function: ease-in-out;
}

@keyframes bonjour {
    0% {font-size: 0em;}
    50% {font-size: 2.2em;}
    100% {font-size: 2em;}
}
@keyframes opacite {
    0% {color: #E8927C;}
    50% {color: #E8927C;}
    100% {color: #fff;}
}
@keyframes opacite2 {
    0% {color: #E8927C;}
    50% {color: #E8927C;}
    100% {color: #fff;}
}

.tchintactic nav a {
    color: #fff;
}
.tchintactic nav a:hover {
    color: #009CA6;
}
.tchintacticlogo {
    width: 40%;
	height: 83%;
	float: left;
	background-image: url(../img/logo_blanc.png); background-size: 10em; background-position: center; background-repeat: no-repeat;
}


/* ICI LES MEDIAS QUERIES */

/* tablettes */
@media screen and (max-width : 1024px) {
    
    .logoun {
        width: 35%;
        background-size: 17em;
        margin-top: 5em;
    }
    
    .logo {
        width: 33%;
        background-size: 17em;
        margin-top: 5em;
    }
    
    header nav {
        padding: 0 0 1em 0;
        text-align: left;
        font-size: 1.6em;
    }
    
    header article {
        width: 4em;
        position: fixed;
        right: 155px;
        top: 0vh;
    }

    header article a {
        padding: 0 0 1em 0.5;
    }
    
    .galerie {
        padding: 15em 0 5em 0;
    }
    
    .galerie a {
        width: 30em;
        height: 17.5em;
    }
    
    .details {
        margin: 43em auto 10vh;
        text-align: center;
        width: 65%;
        font-size: 1.8em;
        line-height: 2.1em; 
        text-align: left;
    }
    
    .carousel {
        text-align: center;
    }
    
    .fan {
	background-image: url(../img/@2x_bg_fan.png);
	background-position: 0 20em ;
	background-repeat: no-repeat;
	background-size: 95%;
    }

.soulanges {
	background-image: url(../img/@2x-bg-soulanges.png);
	background-position: 0 20em ;
	background-repeat: no-repeat;
	background-size: 95%;
}

.corps {
	background-image: url(../img/@2x-bg-corps.png);
	background-position: 0 20em ;
	background-repeat: no-repeat;
	background-size: 95%;
}

.pub {
	background-image: url(../img/bg_04_pub.png);
	background-position: 0 20em ;
	background-repeat: no-repeat;
	background-size: 95%;
}

.vif {
	background-image: url(../img/@2x-bg-vif.png);
	background-position: 0 20em ;
	background-repeat: no-repeat;
	background-size: 95%;
}

.cml {
	background-image: url(../img/@2x-bg-cml.png);
	background-position: 0 20em ;
	background-repeat: no-repeat;
	background-size: 95%;
}

.llio {
	background-image: url(../img/@2x-bg-llio.png);
	background-position: 0 20em ;
	background-repeat: no-repeat;
	background-size: 95%;
}

.agrivert {
	background-image: url(../img/@2x-bg-agrivert.png);
	background-position: 0 20em ;
	background-repeat: no-repeat;
	background-size: 95%;
}

.photos {
	background-image: url(../img/@2x-bg-photos.png);
	background-position: 0 20em ;
	background-repeat: no-repeat;
	background-size: 95%;
}

.illus {
	background-image: url(../img/@2x_bg_illus.png);
	background-position: 0 20em ;
	background-repeat: no-repeat;
	background-size: 95%;
}
    
    figcaption {
        visibility: hidden;
    }
    
    .fan footer p, .soulanges footer p, .corps footer p, .pub footer p, .vif footer p, .cml footer p, .llio footer p, .agrivert footer p {
        font-size: 1.3em;
        line-height: 3em;
    }
    
    

    p {
        font-size: 1.3em;
        line-height: 2em;
    }
    
    /* PAGE ME RENCONTRER */

.merencontrer {
	background-image: url(../img/bg12.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
    text-align: center;
}
.presentation {
	text-align:left;
	width: 65%;
	padding: 15% 0 0 0;
    line-height: 3em;
	
}
    
    
    .tchintactic h2 {
       padding-top: 20vh;
        font-size: 2.8em;
        line-height: 3.5em;
    }
    .tchintactic p {
        font-size: 2em;
        line-height: 2.8em;
    }
    
	}

/* mobiles */