/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 14 sept. 2016, 18:06:54
    Author     : Damien
*/

/*Polices de carac*/
@font-face {
    font-family: 'cac_champagneregular';
    src: url('fonts/cac_champ/cac_champagne-webfont.eot');
    src: url('fonts/cac_champ/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/cac_champ/cac_champagne-webfont.woff') format('woff'),
        url('fonts/cac_champ/cac_champagne-webfont.ttf') format('truetype'),
        url('fonts/cac_champ/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'italianno';
    src: url('fonts/ita/italianno.woff2') format('woff2'),
        url('fonts/ita/italianno.woff') format('woff'),
        url('fonts/ita/italianno.ttf') format('truetype'),
        url('fonts/ita/italianno.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bla';
    src: url('fonts/bla/blancheDeLaFontaine.ttf') format('truetype');        
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'coeur';
    src: url('fonts/coeur/coeur.ttf') format('truetype');        
    font-weight: normal;
    font-style: normal;
}
/*-----------------------------------*/

/*En tête*/
header
{                                /*clair, foncé*/
    background: radial-gradient( #F9DEFA, #A437B0);     
    width : 90%;    
    margin : auto;
    
}

.imgHead {
    float : left;
    margin-left : 1%;
    height : 190px;
}

.head {
    line-height: 190px; /*pour centrer le texte dans la boite header*/
    height: 190px;
    margin-left: 23%;
    text-align: center;      
}

h1{
    text-align: center;
    font-size: 5em;
    font-family: cac_champagneregular, italianno;
}
/*---Fin En-tête*/

h2 {
    font-size: 2.5em;
    font-weight: bold;
    font-family: cac_champagneregular;
}

annonce {
    font-size: 2.2em;
    font-weight: bold;
	color : red;
 }

footer{
    margin-left: 23%;    
    width : auto;
    text-align: center;
    font-family: Georgia;
    font-size: 1.1em;
    color : #A437B0;
}

#menuMobile {
    display: none;
}

/*Menu de Navigation*/
nav{
    width: 19%;
    text-align: center;
    background-color: #cccccc;
    border : 1px black solid;
    font-family: Arial;
    margin-top : 10px;
    position: fixed;
    z-index: 2;    
    }
    
.navi {
    list-style-type: none;
    margin: 0;
    padding: 0;      
}

li a {
    display: block;
    padding : 5px;
}

.titreMenu {
    display: block;
    padding : 5px;
    background-color: #A437B0;
    color : white;
    font-size: 1.1em;
}

li a:hover {
    background-color: #F9DEFA;
    color: #A437B0;
}

#current {
    background-color: #CF9DE3;
    color: white;     
}

nav a {
    color : #A437B0;
    text-decoration: none;
}
/*---Fin du menu Nav*/

body{
    background-color:  #F7F7D2;
    font-size : 1.1em;    
}

section{
    margin-left: 23%;    
    width : auto;
    font-family: Georgia;
    position : relative;
    z-index: 1;
}

#container{
    width : 90%;
    margin : auto;      
}

.cont-epil {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.underline {
    text-decoration: underline;
}

.bigger {
    font-size: 1.4em;
}

.offreSpe {
    font-size: 2.5em;
    font-weight: bold;
    font-family: cac_champagneregular;
    text-align: center;
}

#coeurCligno {
    font-family: coeur;
    font-size: 2em;
}

.justify {
    text-align: justify;
}

a, .purple  {
    color : #A437B0;
}

.conseil {
    color : #00cccc;
}

.bold{
    font-weight: bold;
}

.boldTit {
    font-weight: bold;
    font-size: 1.5em;
}

.telTit {
    color : #A437B0;
    font-weight: bold;
    font-size: 1.5em;
}

.lienTel {
    text-decoration: none;
    color: black;
}

.purpleTit {
    color : #A437B0;
    font-size : 2.4em;
}

.purpleUnder {
    color : #A437B0;
    text-decoration: underline;
}

.mailTit {
    font-size: 1.5em;
}

hr {
    width: 50%;
    border : 2px #A437B0 solid;
    }
    
/*images du site classées par page*/
.float-right {
    float: right;
    margin-left: 20px;
    margin-bottom: 5px;
}

.float-left {
    float: left;
    margin-right:  20px;
    margin-bottom: 5px;
}

/*Accueil*/
.float-right-index {
    float: right;
    margin-left: 20px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.float-left-index {
    float : left;
    margin-right: 100px;
}

.alveMob {
    display: none;
}

/*Mains et Pieds*/
.float-right-mains {
    float: right;
    margin-left: 20px;
    margin-bottom: 5px;
}

.float-left-pieds {
    float: left;
    margin-right:  20px;
    margin-bottom: 5px;
}

.mEtP {
    float: right;
    margin-right: 300px;
    margin-top: 50px;
}

/*Soins Corps*/
.imgSoinBougie {
    float: right;
    margin-left: 20px;
    margin-bottom: 25px;
    margin-top: 20px;
}

.imgAsie {
    float: right;
    margin-left: 20px;
    margin-bottom: 25px;
    margin-top: 20px;
}

.imgPolynesien {
    float: left;
    margin-right:  20px;
    margin-bottom: 25px;
}

.imgMadiana {
    float: left;
    margin-right:  20px;
    margin-bottom: 25px;
}

/*Epilations*/
.float-right-epil {
    float: right;
    margin-right: 200px;
    margin-left : 20px;
    margin-bottom: 5px;
}

.float-left-epil {
    float: left;
    margin-top: 10px;
    margin-right:  20px;
    margin-bottom: 5px;
}

 .imgEpilHom {
        display : block;
        margin : auto;
   }

/*Maquillage et Teint*/
.float-right-maq {
    float: right;
    margin-left: 20px;
    margin-bottom: 5px;
}

.float-right-teint {
    float: right;
    margin-left: 20px;
    margin-bottom: 5px;
}

.float-left-teint {
    float: left;
    margin-right:  20px;
    margin-bottom: 5px;
}

/*Soin visage*/
.float-left-sv {
    float: left;
    margin-right:  20px;
    margin-bottom: 5px;
}

.float-left-svcj {
    float: left;
    margin-right:  20px;
    margin-bottom: 5px;
}

/*Mariage*/
.imgPieceMont, .imgSurMes {
    float: left;
    margin-right:  20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.imgAlli, .imgNoces {
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}


/*Divers*/
.imgClairjoie {
    float: right;
    margin-left: 20px;
    margin-bottom: 5px;
}

.imgCenter {
    display : block;
    margin : auto;
   }
   
   .imgBoncadeau {
    display : block;
    margin : auto;
   }
   
   .imgFid {
     display : block;
    margin : auto;      
   }
   
   .imgZDep {
       display : block;
    margin : auto;       
   }  

/*---------fin des images*/

.dessous {
    clear:both;
}

.conseil-dessous {
    color : #00cccc;
    clear:both;
}

.sign{
    margin-right: 10%;
    text-align: right;
}

.nb {
    text-decoration: underline;
    font-weight: bold;
    font-style: italic;
}

.desc {
    font-style: italic;
}

.center {
    text-align: center;
}

/*tableaux*/
caption {
    font-weight: bold;
    margin-bottom: 15px;
}

td {
    padding : 2px;
    padding-right: 15px;
}

.tabepil tr:nth-child(odd){
    background-color: #CF9DE3 ;
}

.tabMainsEtP tr:nth-child(odd) {
    background-color: #CF9DE3 ;
}

.tabMainsEtP .prix {
    text-align: right;
}

.tabmaq tr:nth-child(odd){
    background-color: #CF9DE3 ;
}

.tabmaq .prix {
    text-align: right;
}

.tabmar tr:nth-child(odd){
    background-color: #CF9DE3 ;
}

.tabmar .prix {
    text-align: right;
}

.tabmar {
    width: 100%;
}

.connais {
    font-weight: bold;
    padding-top: 15px;
}

.epilhom {
    background-color: #F7F7D2;    
}

/*------fin des tableaux*/







/*MEDIA QUERIES*/
/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */
@media screen and (max-width: 1280px) { 

    /*En Tête*/
     header {
        width : 100%;
    }
    
    .head {
        height : 140px;
        line-height: 120px;        
    }

    .imgHead {
        height: 140px;
        margin-left: 0px;
    }
    
    h1 {
        font-size: 3.6em;
    }
    /*------------FIN En tete*/
    
    annonce {
        font-size: 1.6em;
    }  
    	
    h2 {
        font-size: 1.8em;
    }  
    
    section, nav {
        font-size: 1em;
    }
    
    .bigger {
        font-size: 1.2em;
    }

    #container{
        width : 100%;
        margin : auto;
        /*display : flex;*/
    }   
    
    /*Images par page */
    /*Accueil*/
    .float-right-index {
        width: 200px;
        margin-top: 0px
    }
    
    /*Epilation*/
    .imgEpilHom {
        display: none;
    }
    
    .float-right-epil {
        margin-right: 50px;
    }
    
    /*Soin visage*/
    .float-left-svcj {
        width: 160px;
        margin-top: 20px;
    }
    
    /*Soins corps*/
    .imgAsie {
        margin-top: 5px;
        height: 160px;
    }
    
    .imgPolynesien {
        margin-top : 10px;
        height: 115px;
    }

    /*Mains et Pieds*/
    .mEtP {
        margin-right: 150px;
    }
    
    /*Marque Clairjoie*/
    .imgClairjoie {
        height: 160px;
    }
}

/*MEDIA QUERIES*/
/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1024px */
@media screen and (max-width: 1024px) { 
    
    .head {
        height : 120px;
        line-height: 120px;        
    }

    .imgHead {
        height: 120px;
        margin-left: 0px;
    }
    
    h1 {
        font-size: 3em;
    }
    
    nav, section {
        font-size: 0.9em;
    }  
    
    /*Mains et Pieds*/
    .mEtP {
        margin-right: 100px;
    }
      
}

/*MEDIA QUERIES*/
/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 800px */
@media screen and (max-width: 800px) { 

    /*En tete*/
    header {
        width : 100%;        
    }
    
    .imgHead {
        height : 100px;
        margin-left: 0%;
    }
    
    .head {
        height : 100px;
        line-height: 100px;        
    }
    
    h1 {
        font-size: 2.3em;
    }

    annonce {
        font-size: 1.7em;
    }

    h2 {
        font-size: 1.9em;
    }
    
    section {
        font-size: 0.7em;
    }

    #container{
        width : 100%;
        margin : auto;
       }

    nav {
        font-size: 0.7em;
    }
    
    .bigger {
        font-size: 1.2em;
    }

    .offreSpe {
        font-size: 1.9em;
    }
    
    footer {
        font-size: 0.9em;
    }
    
    /*images classées par page !!*/    
    /*Accueil*/
    .float-right-index {
        width : 150px;
        
    }
    
    .float-left-index {
        width : 200px;
    }
    
     /*Epilations*/
    .float-right-epil {
        margin-right : 50px;
    }  
    
    .float-left-epil {
        width: 130px;
    }
    
    .imgEpilHom {
        display: none;
    }
    
     /*Maquillage et teintures*/
    .float-left-teint {
        width : 130px;
    }
    
    .float-right-teint {
        height: 85px;
     }
   
    /*Soins Visages*/
    .float-left-sv {
        width : 70px;
    }
    
    .float-left-svcj {
        margin-top: 10px;
        margin-right: 10px;
        width : 120px;
    }
    
    /*Soins corps*/
    .imgMadiana {
        margin-bottom: 10px;
        height: 80px;
    }
    
     .imgAsie {
        height: 100px;
    }
    
    .imgPolynesien {
        margin-top : 20px;
        height: 100px;
    }
    
    .imgSoinBougie {
        margin-top: 5px;
    }
    
    /*Mains et Pieds*/
    .float-right-mains {
        margin-top: 20px;
        height : 130px;
    }
    
    .float-left-pieds {
        height : 180px;
    }
    
    .mEtP {
        display: none;
    }
    
    /*Mariage*/
    .imgNoces {
        height : 160px;
    }
    
    .imgAlli {
        height: 70px;
    }
    
    .imgPieceMont {
        height : 140px;
    }
    
    .imgSurMes {
        height: 70px;
    }
    
    /*Marque Clairjoie*/
    .imgClairjoie {
        height: 130px;
    }
    
    /*Zone de depl*/
    .imgZDep {
        height : 250px;
    }
    
    /*Avantages Fid*/
    .imgFid {
        height : 200px;
    }
        
    /*Quelques Réalisations*/
    .imgRea {
        height : 90px;
    }
    
}

/*Regles pour les petits écrans et les mobiles */
@media screen and (max-width: 600px) { 

 #container {
        width: 97%;
    }
    
    .imgHead {
        display: none;
    }
    
    .head {
    line-height: 80px; /*pour centrer le texte dans la boite header*/
    height: 80px;
    margin-left: 0px;
    text-align: center;      
}

h1 {
    font-size: 1.5em;
}

annonce {
    font-size: 1.2em;
}

h2 {
    font-size: 1.4em;
}

section {
    font-size: 0.7em;
}

.bigger {
    font-size: 1.1em;
}
    
nav {
    display:none;
}

#menuMobile {
    display : inline;
    font-size: 0.75em;
    font-family: arial;  
    margin: auto;
    text-align: center;    
    padding: 1.5px;    
}

#menuMobile a {
    display: inline;
    padding: 1.5px;
    color : #A437B0;
    margin-top: 1.5px;
    margin-bottom: 1.5px;
    background-color: #cccccc;
}

#menuMobile .current {
    background-color: #CF9DE3;
    color: white;     
}

section {
    margin-left: 0px;
    width : 100%;
}

footer {
    font-size: 0.8em;
    margin-left: 0px;
}

.txtIndex {
    clear: both;
    text-align: center;
}

.sign {
    text-align: center;
}

.imgFoot {
    width: 15px;
}

caption {
    margin-top: 10px;
    margin-bottom: 0px;
}

hr {
    width: 70%;
    border : 1px #A437B0 solid;
    }
    
    #coeurCligno {
        font-size: 1.5em;
    }

/*Images
Index*/
.float-right-index {
    display : none;
}

.float-left-index {
    display: none;
}

.alveMob {
    display: block;
    margin: auto;
}

/*Epilation*/
.float-left-epil {
    width: 100px;
}

.float-right-epil {
    width: 60px;
    margin-right: 10px;
    margin-top: 20px;
}

/*Maquillage et Teintures*/
.float-right-maq {
    width: 70px;
    margin-left: 10px;
}

.float-right-teint {
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: 3px;
}
    
.float-left-teint {
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 3px;
}

/*soins visages*/
.float-left-svcj {
    display: none;
}

/*Soins Corps*/
.imgSoinBougie {
    float: right;
    margin-left: 7px;
    margin-bottom: 5px;
    margin-top: 7px;
    height: 70px;
}

.imgAsie {
    float: right;
    margin-left: 7px;
    margin-bottom: 7px;
    margin-top: 12px;
}

.imgPolynesien {
    float: left;
    margin-top: 5px;
    margin-right:  7px;
    margin-bottom: 7px;
    height: 100px;
}

.imgMadiana {
    float: left;
    margin-top: 7px;
    margin-right:  7px;
    margin-bottom: 5px;
}

/*Mains et pieds*/
.float-right-mains {
    float: none;
    display: block;
    margin: auto;
    height: 100px;
}

.float-left-pieds {
    float: none;
    display: block;
    margin: auto;
    height: 100px;
}

/*Mariage*/
.imgPieceMont {
    float: left;
    margin-right:  7px;
    margin-bottom: 20px;
    margin-top: 20px;
    height: 130px;
}

.imgSurMes {
    float: left;
    margin-right:  20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.imgNoces {
    display: block;
    float: none;
   margin : auto;
   margin-top: 10px;
    height: 100px;
}

/*Clairjoie*/
.imgClairjoie {
    float: right;
    margin-left: 10px;
    margin-bottom: 5px;
    height: 95px;
}

/*Fidelite*/
.imgFid {  
height: 180px;    
   }
   
   /*Bon cadeau*/   
   .imgBoncadeau {
   height: 220px;
   }
 /*Zone deplacement*/
 .imgZDep {
     height: 210px;
 }    
    
}