/* 
    Created on : 07 mars 2020
    Author     : pierre vuckovic
*/
*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    color: #262626;
    text-align: justify;
    background-color: #f2f2f2;
    font-family: 'Poppins', sans-serif;
}
h1, h3 {
    text-align: center;
    font-family: 'Gugi', cursive;
}
h1 {
    font-size: 2em;
}
h3 {
    font-size: 1.5em;
}
h4 {
    font-size: 1.2em;
    color: #8EBFBA;
}
#bandeauTitre, #bandeauMenu, #conteneur, #bandeauMentions {
    background-color: #f2f2f2;
}
#bandeauMentions a {
    color: #B3331B;
}
#bandeauTitre, #bandeauMenu, #bandeauProfil, #bandeauQualite, 
#bandeauPatron, #bandeauPrototype, #bandeauImpression, #bandeauContact, #bandeauMentions {
    padding-left: 15%;
    padding-right: 15%;
}
#bandeauTitre, #bandeauMentions {
    padding-top: 50px;
    padding-bottom: 50px;
}
#bandeauMentions h1 {
    padding-bottom: 20px;
}
#bandeauMentions h3 {
    text-align: left;
    margin-top: 30px;
}
/********* Menu *************/
#bandeauMenu {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 1;
    border-bottom: 2px solid #404040;
}
#nav-bar {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    flex-flow: row wrap;
    justify-content: space-between;
    font-size: 1.2em;
}
#nav-bar a {
    padding: 10px;
    text-decoration: none;
    color: #000;
    border-left: 2px solid #404040;
    flex: 1 0 auto;
    text-align: center;
}
#nav-bar a:last-child{
    border-right: 2px solid #404040;
}
#nav-bar a:hover {
    background-color: #404040;
    color: #f2f2f2;
}
.btn-dark:hover {
    color: #f2f2f2;
    background-color: #8ebfba;
    border-color: #8ebfba;
}
.btn-dark {
    color:  #f2f2f2;
    background-color: #404040;
    border-color: #404040;
}
.retourAccueil {
    display: flex;
    justify-content: center;
    padding-top: 30px;
}
.btn-retour {
    width: 300px;
}
.lienExt img {
    width: 15px;
    height: 15px;
}
/********* Profil *************/
#bandeauProfil {
    background-color: #8eBFBA;
    display: flex;
    flex: 0 0 auto; 
    font-size: 1.1em;
}
#photoid {
    text-align: left;
    width: 100%;
    height: auto;
    margin-right: 20px;
}
#photoid img {
    max-width: 400px;
    height: auto;
    border-radius: 30px;
    box-shadow: 10px 10px 5px #262626;
}
#photoid img, #profil {
    margin-top: 50px;
}
#profil {
    padding-bottom: 50px;
    padding-left: 30px;
} 
/********* Qualite **********/   
#bandeauQualite {
    display: flex;
    background-color: #f2f2f2;
    min-height: 350px;
    padding-top: 100px;
    padding-bottom: 50px;
    font-size: 1.1em;
}
#bandeauQualite div {
    width: 33.33%;
}
.qualBorder {
    width: 5px;
    height: 150px;
    margin-right: 50px;
    margin-left: 50px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: #8eBFBA;
    border-radius: 50%;
}
.Hqual {
    padding: 10px;
    text-align: center;
    background-color: #404040;
    color: #f2f2f2;
    border-radius: 10px;
    margin-bottom: 35px;
    font-size: 1.2em;
    font-family: 'Gugi', cursive;
}
/*********** Services **************/
#bandeauPatron, #bandeauPrototype, #bandeauImpression, #bandeauContact {
    background-color: #f2f2f2;
    --height-bp: 600px;
    height: var(--height-bp);
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 50px;
}
#bandeauContact {
    margin-bottom: 200px;
}
.fond {
    height: 500px;
    display: flex;
    position: relative;
}
.patron, .impression{
    background-color: #A58365;
}
.prototype {
    background-color: #8eBFBA;
}
.titre {
    position: absolute;
    left: -70px;
    height: 500px;
    display: flex;
    font-family: 'Gugi', cursive;
}
.titre2 {
    position: absolute;
    left: -70px;
    top: 10px;
    font-family: 'Gugi', cursive;
}
div.titre p {
    margin-top: auto;
    margin-bottom: auto;
}
div.titre p, div.titre2 p {
    font-size: 3em;
}
.photo img {
    height: var(--height-bp);
    width: auto;
    position: absolute;
    top: -50px;
    right: 400px;
    box-shadow: 10px 10px 5px #404040;
}
.photo2 img { 
    top: -50px;
    right: 50px;
}
.texte {
    background-color: #f2f2f2;
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50px;
    right: 50px;
    border-radius: 30px;
    padding: 15px;
}
.texte ul {
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
}
.texte li {
    font-size: 1em;
    margin: 15px;
}
.texte2 {
    top: 50px;
    right: 450px;
}
/******** formulaire **********/
.contact, #bloc2, #formulaire {
    position: relative;
    width: 800px;
    border-radius: 30px;
}
#bloc2, #formulaire {
    top: 100px;
    left: 100px;
}
.contact {
    background-color: #8eBFBA;
    margin-left: 100px;
    margin-right: auto;
}
#bloc2 {
    background-color: #404040;
}
#formulaire {
    background-color: #f2f2f2;
    border: 4px solid #8ebfba;
    height: 500px;
    font-size: 1.1em;
}
form {
    width: 70%;
    margin: 10px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}
.oblige {
    color: #b3331b;
}
/******** Mentions **********/
#bandeauMentions ul {
    list-style: square;
    margin-left: 20px;
    padding-left: 0px;
}
#bandeauMentions li {
    font-size: 1em;
    margin: 0px;
}
/******** Footer **********/
footer {
    background-color: #404040;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f2f2f2;
}
footer a {
    color: #f2f2f2;
    padding-right: 20px;
    padding-left: 20px;
}
footer a:hover {
    color: #f2f2f2;
    text-decoration: underline;
}
/******* envoi mail *********/
#message {
    max-width: 500px;
    border: 4px solid #8ebfba;
    border-radius: 30px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
}
/******* sécurisé le n° tel *********/
span[class^="zero-"]{
	font-size:1px;
	font-size:0.01rem
}
span[class^="zero-"]::before{
	font-size:initial
}	

.zero-un::before{
	content:"01";
}
.zero-six::before{
	content:"06";
}
.zero-sept::before{
	content:"07";
}
.zero-huit::before{
	content:"08";
}
.zero-neuf::before{
	content:"09";
}

/***************************************************************************/
/* requête de media */
@media screen and (max-width: 1850px) {
    #bandeauTitre, #bandeauMenu, #bandeauProfil, #bandeauQualite, 
    #bandeauPatron, #bandeauPrototype, #bandeauImpression, #bandeauContact, #bandeauMentions {
    padding-left: 10%;
    padding-right: 10%;
    }
}  
/***************************************************************************/
/* requête de media */
@media screen and (max-width: 1570px) {
    .titre, .titre2 {
        font-size: 0.7em;
    }
}  
/***************************************************************************/
/* requête de media */
@media screen and (max-width: 1400px) {
    /*********** Services **************/
    #bandeauPatron, #bandeauPrototype, #bandeauImpression, #bandeauContact {
        padding-left: 0%;
        padding-right: 0%;
        background-color: #f2f2f2;
        height: auto;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 50px;
    }
    .fond {
        position: inherit;
        height: 500px;
        display: flex;
    }
    .patron, .impression{
        background-color: #A58365;
    }
    .prototype {
        background-color: #8eBFBA;
    }
    .titre, .titre2, .photo img, .photo2 img, .texte, .texte2 {
        position: inherit;
        top: 0px;
        right: 0px;
    }
    .titre, .titre2 {
        display: flex;
        font-family: 'Gugi', cursive;
        padding-left: 50px;
        padding-right: 50px;
    }
    .bloc {
        display: flex;
        margin-right: 50px;
        margin-left: auto;
    }
    .photo, .photo2 {
        margin-right: 50px;
        margin-left: auto;
    }
    div.titre p, div.photo, div.texte, div.texte2 {
        margin-top: auto;
        margin-bottom: auto;
    }
    div.titre p, div.titre2 p {
        font-size: 3em;
    }
    .photo img {
        height: 400px;
        width: auto;
        box-shadow: 10px 10px 5px #404040;
    }
    .texte {
        background-color: #f2f2f2;
        width: 400px;
        height: 400px;
        border-radius: 30px;
        padding: 15px;
    }
    .texte ul {
        list-style: none;
        margin-left: 0px;
        padding-left: 0px;
    }
    .texte li {
        font-size: 1em;
        margin: 15px;
    }

    /******** formulaire **********/
    .contact {
        position: inherit;
        width: inherit;
        border-radius: inherit;
        margin-left: auto;
        margin-right: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 50px;
    }
    .contact .titre2 {
        margin-left: auto;
        margin-right: auto;
    }
    #formulaire {
        height: 500px;
        border: 4px solid #404040;
    }
    #bloc2, #formulaire {
        position: inherit;
        border-radius: 30px;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }
    form {
        width: 70%;
        margin: 10px;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
}
/***************************************************************************/
/* requête de media */
@media screen and (max-width: 1200px){
    #bandeauPatron, #bandeauPrototype, #bandeauImpression {
        padding-bottom: 0px;
        margin-top: 10px;
    }
    .fond {
        display: inherit;
        height: auto;
    }
    .titre, .titre2 {
        position: inherit;
        height: auto;
        left: 0px;
        top: 0px;
        font-family: 'Gugi', cursive;
        font-size: 0.7em;
    }
    .titre {
        display: flex;
    }
    div.titre p, div.titre2 p {
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    div.titre2 p {
        margin-top: 0px;
        padding: 20px;
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
    }
    .bloc {
        margin-right: 0;
        margin-left: 0;
        flex-flow: row wrap;
        justify-content: space-evenly;
        padding-left: 10px;
        padding-right: 10px;
    }
    div.photo {
        margin: 0;
    }
    div.photo, div.texte, div.texte2 {
        margin-bottom: 50px;
    }
    .photo img, .photo2 img {
        margin-right: 30px;
    }
    
}
/***************************************************************************/
/* requête de media */
@media screen and (max-width: 1024px){
    #nav-bar a:last-child {
        border-right: inherit;
    }
    #nav-bar a:first-child{
        border-left: inherit;
    }
    #bandeauMenu {
        position: inherit;
        border-bottom: 2px solid #404040;
        padding-left: 0;
        padding-right: 0;
    }
    #bandeauQualite {
        display: inherit;
        background-color: #f2f2f2;
        min-height: 350px;
        padding-top: 100px;
        padding-bottom: 50px;
        font-size: 1.1em;
    }
    #bandeauQualite div {
        width: 100%;
        padding-bottom: 50px;
    }
    .qualBorder {
        display: none;
    }
    .Hqual {
        padding: 10px;
        text-align: center;
        background-color: #404040;
        color: #f2f2f2;
        border-radius: 10px;
        margin-bottom: 35px;
        font-size: 1.2em;
    }
    #bandeauProfil {
        display: inherit;
    }
    #photoid {
        text-align: center;
    }
    #photoid img {
        max-width: 50%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    #profil {
        padding-left: 0px;
    }
    
    /******** formulaire **********/
    #formulaire {
        height: 550px;
    }
    #bloc2{
        width: auto;
        margin-left: 10%;
        margin-right: 10%;
    }
    .row {
        display: block;
    }
}
/***************************************************************************/
/* requête de media */
@media screen and (max-width: 720px){
    #bandeauMenu {
        position: inherit;
        border-bottom: 0px solid #404040;
    }
    #nav-bar {
        display: flex;
        flex-direction: row;
        width: 100%;
        margin: auto;
        flex-flow: row wrap;
        justify-content: space-between;
        font-size: 1.2em;
    }
    #nav-bar a {
        padding: 10px;
        text-decoration: none;
        color: #000;
        border-left: 0px solid #404040;
        border-bottom: 2px solid #404040;
        flex: 1 0 auto;
        text-align: center;
        width: 50%;
    }
    #nav-bar a.colon {
        border-right: 2px solid #404040;
    }
    #nav-bar a:last-child{
        border-right: 0px solid #404040;
        border-left: 0px solid #404040;
    }
    #nav-bar a:hover {
        background-color: #404040;
        color: #f2f2f2;
    }
}
/***************************************************************************/
/* requête de media */
@media screen and (max-width: 700px){
    #bandeauPatron, #bandeauPrototype, #bandeauImpression {
        padding-bottom: 0px;
        margin-top: 10px;
    }
    .fond {
        display: inherit;
        height: auto;
    }
    .titre, .titre2 {
        position: inherit;
        height: auto;
        left: 0px;
        top: 0px;
        font-family: 'Gugi', cursive;
        font-size: 0.7em;
    }
    .titre {
        display: flex;
    }
    div.titre p, div.titre2 p {
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    div.titre2 p {
        margin-top: 0px;
        padding: 20px;
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
    }
    /******** formulaire **********/
    #bandeauContact, .fond, #bloc2, #formulaire{
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        position: inherit;
        top: 0px;
        left: 0px;
        border: inherit;
        border-radius: 0px;
    }
    #bandeauContact, #formulaire , form {
        background-color: #8ebfba;
    }
    #bandeauContact, footer {
        margin-top: 10px;
    }
    .contact {
        padding: 50px;
    }
    .contact .titre2 {
        text-align: left;
    }
    form {
        width: 90%;
        height: auto;
        margin: 0px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 50px;
    }
    .retourAccueil {
        background-color: #f2f2f2;
        width: 100%;
    }
    .row {
        display: block;
    }
    .btn-dark {
        color: #f2f2f2;
        background-color: #404040;
        border: none;
    }
}

/***************************************************************************/
/* requête de media */
@media screen and (max-width: 450px){
    #bandeauMenu {
        display: none;
        margin: 0px;
    }
    #photoid img {
        max-width: 80%;
    }
    #bandeauTitre, #bandeauQualite div {
        padding-bottom: 20px;
    }
    #bandeauQualite {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    #bandeauPatron, #bandeauPrototype, #bandeauImpression {
        padding-bottom: 0px;
        margin-top: 10px;
    }
    .fond {
        display: inherit;
        height: auto;
    }
    .titre, .titre2 {
        position: inherit;
        height: auto;
        left: 0px;
        top: 0px;
        font-family: 'Gugi', cursive;
        font-size: 0.7em;
    }
    .titre {
        display: flex;
    }
    div.titre p, div.titre2 p {
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    div.titre2 p {
        margin-top: 0px;
        padding: 20px;
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
    }
    .photo img, .photo2 img {
        position: inherit;
        top: 0px;
        right: 0px;
        width: 100%;
        height: auto;
        box-shadow: inherit;
    }
    .texte {
        background-color: inherit;
        width: 100%;
        height: auto;
        position: inherit;
        top: 0px;
        right: 0px;
        border-radius: 0px;
        padding: 15px;
    }
    .texte2 {
        left: 0px;
    } 

    /******** formulaire **********/
    #bandeauContact, .fond, #bloc2, #formulaire{
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        position: inherit;
        top: 0px;
        left: 0px;
        border: inherit;
        border-radius: 0px;
    }
    #bandeauContact, #formulaire , form {
        background-color: #8ebfba;
    }
    #bandeauContact, footer {
        margin-top: 10px;
    }
    form {
        width: 90%;
        height: auto;
        margin: 0px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 50px;
    }
    .retourAccueil {
        background-color: #f2f2f2;
        width: 100%;
    }
    .row {
        display: block;
    }
    .btn-dark {
        color: #f2f2f2;
        background-color: #404040;
        border: none;
    }
}

/***************************************************************************/
/* Code pour Tester */