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


/******************************************************************
******************************************************************
NE PAS MODIFIER / CES LIGNES ENLEVENT LES PADDING ET MARGIN AJOUTÉS
AUTOMATIQUEMENT PAR LE FICHIER NORMALIZE.CSS
******************************************************************
******************************************************************/

/*retire les padding et margin */
aside, section, article, footer, header, div, p, h1, h2, h3, h4, h5, h6, ol, ul, li, figure { padding:0; margin:0; }

/******************************************************************
******************************************************************
CSS PRÉDÉFINIES
******************************************************************
******************************************************************/

/* les images ne seront jamais plus grandes que le contenant <figure> qui les contient */
img { max-width:100%; height: auto;}

/* ajoutez cette classe si il n'y a qu'une seule image */
/* dans le <figure> et qu'un espace fin apparait sous l'image */
/* par exemple <img class="no-border-down" src="..." */
img.no-border-down { display:block;} 

/* dans le cas où le float est requis */
div.pousse { clear:both; width:0; height:0; overflow:hidden;}

/* polices par défaut */
body { font-family: Rubik, Arial, sans-serif; }

/* retire le gras par défaut des titres */
h1, h2, h3, h4, h5, h6 { font-weight: 400;}


/************************************************************************************************************************************
/************************************************************************************************************************************
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
/************************************************************************************************************************************
************************************************************************************************************************************/




/****************************************/
/* GENERAL
/****************************************/

body { 
    font-size:1.5vw; /* ajuster au besoin */
    background-color: #F0FAF5;
} 

p {
    font-size: 70%;
    line-height: 180%;
    padding: 0 0 1vw 0;
}


h2 {
    padding: 0 0 2vw 0;
    color: #E66139;
}

footer {
    list-style-type: none;
    margin: 2.5vw;
    /*justify-content: flex-end;*/
    font-size: 70%;
    /*display: flex;*/
    text-align: right;
    color: #3C9E7E;
    font-weight: 300;
    padding-top: 1.5vw;
}

footer p {
    padding-bottom: 0;
}

footer p a {
    margin-left: 0.5vw;
    color: #3C9E7E;
    font-size: 110%;
    font-weight: 500;
    
}

header {   
    background-color: white;
    display: flex;
    justify-content: space-between;
    padding: 0.75vw 2.5vw 0.75vw 2.5vw;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    z-index: 1000;
}


header nav ul li {
    padding: 0 0 0 2vw;
    font-size: 75%;
    font-weight: 500;
}

figure.menu {
    display: none;
}

span.noir {
    color: black;
}


nav ul {
    list-style-type: none;
    display: flex;
}

header figure {
    width: 6.5vw;
}

div.wrapper {
    margin: 0 15vw 0 15vw;
    padding: 10vw 0 0 0;
}

header nav ul li a {
    color: #E66139;
    text-decoration: none;
   /* transition: 0.2s;*/
}


.link{
	padding: 1vw 0 1vw 0;
}

.link:hover{
	text-decoration: none;
}


/*===================*/
/* 13. SINK
/*===================*/

.sink-on-hover {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  .sink-on-hover:hover, .sink-on-hover:focus, .sink-on-hover:active {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  
  



  



*{
    scroll-behavior: smooth !important;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    background: #fff;
    width: 100vw;
    height: 100vh;
    position: relative;
    transition: all 5s ease-in-out;
}
 
.popup .close {
    position: absolute;
    top: 0.5vw;
    right: 3.5vw;
    transition: all 200ms;
    font-size: 60px;
    font-weight: 400;
    text-decoration: none;
    color: #E66139;
}


div.popup ul {
    text-align: center;
    padding: 55vw 0 0 0;
}

div.popup ul li {
    padding: 4vw 0 4vw 0;
    font-size: 200%;
    font-weight: 500; 
}

div.popup ul li a {
    color: #E66139;
    text-decoration: none;
}




  


/****************************************/
/* ACCUEIL
/****************************************/


header.accueil {
    padding: 2vw 3vw 2vw 3vw;
}

header.accueil figure {
    width: 8vw;
}

h1 {
    color: #3C9E7E;
    font-size: 120%;
}

nav.accueil {
    display: block;
}

nav.accueil-mobile {
    display: none;
}

nav.accueil ul {
    justify-content: center;
}

nav.accueil ul li {
    font-size: 110%;
    font-weight: 500;
    padding: 0 2.5vw 0 2.5vw;
}

nav.accueil ul li a {
    color: #E66139;
    text-decoration: none;
    transition: 0.2s;
}

body.accueil {
    background-color: white;
}

div.animation {
    text-align: center;
    padding: 0 27vw 4vw 27vw;
    margin: 0 10vw 0 10vw;
}

div.accueil {
    padding: 10vw 0 0 0;
}




/****************************************/
/* APROPOS
/****************************************/

section.contenant {
    display: flex;
}

div.photo {
    width: 145%;
    padding-left: 3.5vw;
}

article.small {
    font-size: 90%;
    padding: 0;
}

article.small p {
    line-height: 130%;
    padding-bottom: 0.3vw;
}

article.regular p {
      padding: 0 0 1vw 0;
}

h4 {
    font-weight: 500;
    font-size: 80%;
    padding: 2vw 0 0.5vw 0;
}




/****************************************/
/* PORTFOLIO
/****************************************/

section.portfolio {
	display: grid;
    grid-template-areas: "auto auto auto";
    grid-gap: 0.5% 1.5%;
}

section.portfolio article figure img {
	opacity: 1;
	transition: 0.3s;
}

section.portfolio article figure img:hover {
	opacity: 0.6;
	
}

a.fleche {
    display: none;
}




/****************************************/
/* PAGES PROJETS + DEMO
/****************************************/



body.projets {
    background-color: white;
}

body.projets h2, h3 {
    color: #3C9E7E;
}

body.projets img {
    padding-bottom: 0.7vw;
}

body.demo {
    background-color: #3C9E7E;
}

h2.demo {
    color: white;
    /*padding-bottom: 0;*/
}

body.demo section {
    color: white;
}

section.col2 {
    display: flex;
    justify-content: space-between;
}

section.col2 article {
    width: 31%;
}

section.col2 article.small {
    width: 100%;
}

section.col2 figure {
    width: 66.5%;
    margin-left: 34%;

}

a.retour {
    color: #E66139;
    text-decoration: none;
    font-size: 80%;
    font-weight: 500;
    position: absolute;
    padding-top: 2vw;
}

a.retour-mobile {
    display: none;
}

a.lien {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}

section.col2 article.projet {
    width: 20%;
    position: fixed;
    /*font-size: 85%;*/
}

section.col2 video.demo {
    width: 50%;
}

section.col2 video.salarie {
    width: 66.5%;
    margin-left: 34%;
    padding-bottom: 2.5vw;
}

body.demo footer, body.demo footer a {
    color: white;
}

h2.projet {
    font-size: 120%;
    padding-bottom: 0;
}

h3 {
    text-transform: uppercase;
    font-weight: 300;
    padding-bottom: 2vw;
    font-size: 85%;
}







/****************************************/
/* CONTACT
/****************************************/



body.contact {
    background-color: #fedb27;
    background-image: url(images/fond.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

body.contact section {
    color: black;
    width: 30%;
}

body.contact article p {
    font-size: 80%;
    font-weight: 400;
}

body.contact article.coordonnees {
    color: #E66139;
    font-weight: 500;
    padding-top: 1vw;
}

body.contact article.coordonnees p {
    line-height: 120%;
}

body.contact article i {
    padding-right: 1.5vw;
    font-size: 120%;
    width: 21px
}

body.contact footer, body.contact footer a {
    color: #E66139;
}

body.contact footer {
    position: fixed;
    bottom: 0;
    right: 0;
}




/****************************************/
/* SCÉNARI0 JQUERY
/* SCÉNARI0 JQUERY
/* SCÉNARI0 JQUERY
/****************************************/

/* réglage de l'apparence initiale des objets avant le script jQuery */


div.wrapper { opacity: 0; }
body.accueil { opacity: 0; }
footer { opacity: 0; }





/**************************************************************
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
*************************************************************/


@media screen and (max-width: 680px) { 
    
    /* ne pas modifier */
    body { font-size:16px; } 
    h1 { font-size:48px; }
    h2 { font-size:36px; }
    h3 { font-size:24px; }
    h4 { font-size:20px; }
    h5 { font-size:18px; }
    h6 { font-size:16px; }
    /* ne pas modifier */
    
    /* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */

    body {
    /*    background-color: yellowgreen;*/
    }
    
    
    
    /****************************************/
    /* GÉNÉRAL CELL
    /****************************************/
    
    
    header {
        padding: 1.5vw 4.5vw 1.5vw 4.5vw;
    }
    
    header figure {
        width: 20vw;
        padding-top: 1vw;
    }
    
    div.wrapper {
        margin: 0 10vw 0 10vw;
        padding: 28vw 0 0 0;
    }
    
    section p {
        font-size: 105%;
    }
    
    footer {
        padding-top: 7vw;
        padding-bottom: 2vw;
        font-size: 120%;
        margin: 4.5vw;
    }
    
    footer p a {
        margin-left: 2vw;
        font-size: 150%;
    }
    
    header nav {
        display: none;
    }
    
    figure.menu {
        display: flex;
        justify-content: flex-end;
        font-size: 200%;
    }
    
    figure.menu a {
        color: #E66139;
    }
    
    h2 {
        font-size: 180%;
        padding-bottom: 4vw;
    }
    
    
    
    /****************************************/
    /* ACCUEIL CELL
    /****************************************/
    
    header.accueil {
        padding: 4vw 5vw 2vw 5vw;
    }
    
    header.accueil figure {
        width: 25vw;
    }

    h1 {
        font-size: 120%;
        text-align: end;
    }

    nav.accueil {
        display: none;
    }
   
    nav.accueil-mobile {
        display: block;
    }
     
    nav.accueil-mobile ul {
        display: flex;
        justify-content: space-between;
        padding: 1vw 4vw 1vw 4vw;
        align-items: center;
    }
    
    nav.accueil-mobile ul li {
        font-size: 115%;
        font-weight: 500;
        padding: 0 2.5vw 0 2.5vw;
        
    }

    nav.accueil-mobile ul li a {
        color: #E66139;
        text-decoration: none;
        transition: 0.2s;
    }
    
    div.animation {
        
        padding: 0 0 20vw 0;
        margin: 0 5vw 0 5vw;
    }

    div.accueil {
        padding: 45vw 0 0 0;
    }

    
    
    /****************************************/
    /* A PROPOS CELL
    /****************************************/
    
    
    
    section.contenant {
        display: block;
    }

    div.photo {
        width: 100%;
        padding-top: 6vw;
    }

    div.photo figure {
        display: flex;
        justify-content: center;
    }

    div.photo img {
        max-width: 70%;
        height: auto;
    }
    
    h4 {
        font-size: 120%;
        padding-top: 5.5vw;
        padding-bottom: 2vw;
    }
    
    article.small {
        font-size: 90%;
        line-height: 80%;
    }
    
    article.small p {
    padding-bottom: 0.5vw;
    padding-top: 1.5vw;
    }
    
    
    
    /****************************************/
    /* PORTFOLIO CELL
    /****************************************/

    section.portfolio {
        display: block;
    }
    
    section.portfolio article {
        padding-bottom: 1vw;
    }
    

    a.fleche {
        display: block;
        /*text-align: center;*/
        color: #E66139;
        text-decoration: none;
        padding-top: 3vw;
        
    }
    
    a.fleche p {
        font-size: 120%;
        color: #E66139;
        font-weight: 500;
        line-height: 130%;
    }
    
    
    
    /****************************************/
    /* PAGES PROJETS + DEMO CELL
    /****************************************/
    
    
    section.col2 {
        display: block;
    }
    
    section.col2 article {
        width: 100%;
        padding-bottom: 2vw;
    }

    section.col2 figure {
        width: 100%;
        margin: auto;
        padding-top: 2vw;
    }
    
    section.col2 video.demo {
        width: 100%;
        padding-top: 2vw;
    }   
    
    section.col2 video.salarie {
        width: 100%;
        padding-top: 2vw;
        margin: auto;
    }
    
    section.col2 article.projet {
        width: 100%;
        position: relative;
        font-size: 85%;
    }
        
    article.projet a {
    }
    
    a.retour {
        display: none;
    }
    
    a.retour-mobile {
        display: block;
        font-size: 120%;
        color: #E66139;
        text-decoration: none;
        font-weight: 500;
        line-height: 130%;
        padding-top: 2vw;
    }
    
    h2.projet {
        font-size: 200%;
        padding-bottom: 1.5vw;
        line-height: 100%;
    }
    
    h3 {
        font-size: 150%;
        padding-bottom: 4vw;
    }

    
    body.projets footer {
        font-size: 120%;
    }

    .projet p {
        font-size: 125%;
    }

    
    
    /****************************************/
    /* CONTACT CELL
    /****************************************/
    
    
    body.contact section {
        width: auto;
    }
    
    body.contact footer, body.contact footer a {
        color: #E66139;
    }
    
    body.contact article p {
        font-size: 110%;
        font-weight: 400;
    }
    
    body.contact article.coordonnees {
        padding-top: 3vw;
    }
    
    body.contact article.coordonnees p {
        line-height: 170%;
    }
    
    body.contact article i {
        padding-right: 3.5vw;
    }
    
    
    
	/* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */
}



/******************************************************************
******************************************************************
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
******************************************************************
******************************************************************/


@media screen and (min-width:681px) and (max-width: 1024px) { 
    
    /* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */

  
    
    
    /****************************************/
    /* GENERAL TABLETTE
    /****************************************/
    
    header figure {
        width: 8vw;
    }
    
    header nav {
        font-size: 150%;
    }
    
    div.wrapper {
        margin: 0 8vw 0 8vw;
        padding: 13.5vw 0 0 0;
    }
    
    section p {
        font-size: 105%;
    }
    
    
    footer {
        font-size: 130%;
    }
    
    
    
    /****************************************/
    /* ACCUEIL TABLETTE
    /****************************************/
    
    div.animation {
        
        padding: 4.5vw 0 5vw 0;
        margin: 0 28vw 0 28vw;
    }
    
    nav.accueil {
        display: none;
    }
    nav.accueil-mobile {
        display: block;
    }
     
    nav.accueil-mobile ul {
        justify-content: center;
        padding: 1.5vw 2.5vw 1.5vw 2.5vw;
        align-items: center;
    }
    
    nav.accueil-mobile ul li {
        font-size: 150%;
        font-weight: 500;
        padding: 0 4.5vw 0 4.5vw;
        
    }

    nav.accueil-mobile ul li a {
        color: #E66139;
        text-decoration: none;
        transition: 0.2s;
    }
    
    header.accueil figure {
        width: 11vw;
    }

    h1 {
        font-size: 150%;
        text-align-last: end;
    }
    
    
    
    
    /****************************************/
    /* A PROPOS TABLETTE
    /****************************************/
    
    div.photo {
        width: 200%;
        padding-left: 4vw;
    }
    
    h4 {
        font-size: 120%;
        padding-top: 1.5vw;
        padding-bottom: 1vw;
    }
    
    
    /****************************************/
    /* PAGES PROJETS + DEMO TABLETTE
    /****************************************/
    
    section.col2 video.demo {
        width: 60%;
    }
    
    section.col2 video.salarie {
        padding-bottom: 19vw;
    }
    
    article.projet a {
        font-size: 100%;
    }
    
    section.col2 article.projet {
        width: 25%;
    }
    
    h2.projet {
        font-size: 150%;
    }
    
    h3 {
        font-size: 120%;
    }
    
body.demo footer {
    position: fixed;
    bottom: 0;
    right: 0;
}
    
    
    
    
    /****************************************/
    /* CONTACT TABLETTE
    /****************************************/
    
    body.contact article p {
        font-size: 100%;
    }
    
    body.contact article.coordonnees {
        padding-top: 2vw;
    }
    
    
    
    
    
    
    
	/* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */
}