@charset "UTF-8";
/* WEBFONTS */

@font-face {
    font-family: 'ralewayextrabold';
    src: url('../font/raleway-extrabold-webfont.woff2') format('woff2'),
         url('../font/raleway-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    
    
    font-family: 'ralewaymedium';
    src: url('../font/raleway-medium-webfont.woff2') format('woff2'),
         url('../font/raleway-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    
    
    font-family: 'playfair_displayregular';
    src: url('../font/playfairdisplay-variablefont_wght-webfont.woff2') format('woff2'),
         url('../font/playfairdisplay-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}





/* ---- HABILLAGE GENERAL DU HTML ---- */
body { 
    margin: 0; 
	padding: 0; 
	background-color: #ffffff; 
	font-family:'ralewaymedium',Arial, Helvetica, Verdana, Sans-Serif;
    color: #333333; 
	line-height: 1.5; 	/* interligne par defaut */
	font-size: 100%;	/* permet de gérer la taille GLOBALE des fontes de toute la page Web */
    overflow-x:hidden;
	}
p, ul, ol, li, td { 
	font-size: 1.15em; 	/* taille des textes par défaut */
	}
p, ul, ol {
    margin-bottom: 1.25em;
    color:#2B2D42;
    font-family:Avenir, Arial, Helvetica, Verdana, Sans-Serif;
    }
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1.1em;
    font-family:'ralewayextrabold', Arial, Helvetica, Verdana, Sans-Serif; 
	font-weight: lighter;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 1.5px;
    color:#000;
	}
h1 { font-size: 1.8em; }	
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
blockquote { 
    margin: 15px 0 15px 40px;
    padding: 10px 20px; 
    font-style: italic;
    font-size: 1.1em;
    color: #333333;
    border-left: 10px solid #359ac7;
    }
sub, sup { font-size: 0.7em; }
hr { /* simple ligne de separation */
	color: #999; 
	background-color: #999; 
	height: 1px; 
	border: #999; 
	}
img { 
	border: none; 		/* on supprime les bordures sur les images (qui apparaissent avec un lien) */
	vertical-align: middle; /* alignement des images sur le milieu de la ligne de texte */
	} 
figure {
    margin-bottom: 15px;
    overflow: hidden; /* cache le contenu qui dépasse du block */
    }
figcaption { 
    font-size:0.8em;
    }

/* ---- lien par defaut a ---- */
a:link, a:visited { 
    color: #9f9797; 
    text-decoration:none; 
    }
a:hover, a:active { 
    color: #9f9797; 
    text-decoration:none; 
    }

/* ---- lien noir sans soulignement .a2 ---- */
.a2:link, .a2:visited { 
    color: #333333; /* bleu rgba(53,154,199,1) */
    text-decoration: none; 
    }
.a2:hover, .a2:active { 
    color: #000000; 
    text-decoration: underline; 
    }

/* ---- lien bleu sans soulignement .a3 ---- */
.a3:link, .a3:visited { 
    color: #359ac7; /* bleu rgba(53,154,199,1) */
    text-decoration: none; 
    }
.a3:hover, .a3:active { 
    color: #007394; 
    text-decoration: underline; 
    }

/* ---- lien noir transparent sans soulignement .a4 ---- */
.a4:link, .a4:visited { 
    color: #359ac7; /* bleu rgba(53,154,199,1) */
    text-decoration: none; 
    }
.a4:hover, .a4:active { 
    color: #007394; 
    text-decoration: none; 
    }

/* ---- lien soulignement tiret gris .a5 ---- */
button{
    background-color:transparent;
    border:none;
    cursor:pointer;
}
button:link, button:visited{
    background-color:transparent;
    border:none;
    cursor:pointer;
}
button:hover, button:active{
    background-color:transparent;
    border:none;
    cursor:pointer;
    
}

/* ---- BOUTONS ---- */
.bouton {
    display:inline-block;
    margin-top:20px;
    padding:10px 20px;
	background-color: #52635A;
    text-align: center;
    font-family:'ralewayextrabold', Arial, Verdana, Sans-Serif;
    letter-spacing: 2.7px;
    font-weight:bold;
    font-style:normal;
    font-size:18px;
    color: #ffffff;
    border-radius:40px;
    transition:all 0.25s ease;
    }
.bouton:link, .bouton:visited { 
	background-color: #75837B;
	color: #ffffff;
	text-decoration: none; 
	}
.bouton:hover, .bouton:active { 
	background-color: #75837B;
	color: #ffffff;
	text-decoration: none; 
	}
.bouton-finpage{
    font-family:'montserratbold',AvenirBook, Helvetica, Verdana, Sans-Serif;
    font-weight: 600;
    text-transform:uppercase;
    font-size:9px;
}

/* ---- HEADER ---- */
header {
    margin:0;
    padding:15px 0;
    
    
   }
header nav { 
    
    }
header nav ul { /* on cible tous les 'ul' contenus dans le 'nav' du 'header' */
    list-style:none;
    margin:0;
    padding:0;
    display:inline-block;
    color:#000;
    }
header nav ul li { /* on cible tous les 'li' des 'ul' contenus dans le 'nav' du 'header' */
    list-style:none;
    display:inline-block;
    margin:0 34px;
    padding:0;
    font-family:'ralewaymedium',AvenirBook, Helvetica, Verdana, Sans-Serif;
    letter-spacing: 1px;
    font-weight:normal;
    font-style:normal;
    font-size:0.9em;
    color:#000;
	}
header nav ul li a {
    display:inline-block;
    margin:0;
    padding: 0;
    white-space:nowrap; /* interdit les retours à la ligne */
    color:#000;
    
	}
header nav ul li a:link, header nav ul li a:visited {
    color:#181919;
    text-decoration:none;
    
	}
header nav ul li a:hover, header nav ul li a:active {
    color:#515151;
    
	}
#active{
     border-bottom: 2px solid #ffff;
}

.sous-menu{
    font-family:'ralewaymedium',AvenirBook, Helvetica, Verdana, Sans-Serif;
    list-style: none;
    margin:0;
    padding:0;
    display:inline-block;
    color:#2B2D42;
    text-transform:uppercase;
    letter-spacing: 0.05em;
    font-size:0.9em;
    
}

.sous-menu li{
    list-style: none;
    margin:0 35px;
    padding:0;
    display:inline-block;
}

.sous{
    display:none;
    position:fixed;
    top:5em;
    left:9.8333333333333%;
    width:80.333333333333%;
    height:100vh;
    padding:20px;
    padding-top:40px;
    background-color:rgba(255,255,255,0.95);
    
    text-align: center;
}

.collection:hover .sous, .collection:target .sous, .collection:active .sous{
    display:block;
}

.menu-burger{
    visibility:hidden;
    background-color:#ffff;
    position:fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    text-align: center;
    padding:10px 0;
    z-index:100;
    
    
}
.menu-burger ul li{
    display:block;
    list-style: none;
    margin:0;
    padding:0;
    margin-top:2em;
    text-align: center;
    font-size:1em;
    text-transform:uppercase;
    letter-spacing: 2px;
    font-family:'playfair_displayregular',Arial, Helvetica, Verdana, Sans-Serif;
}
.croix{
    position:relative; 
    top:2.3em;
    right:2.5em;
}
.burger{
    position:relative; 
    top:2em;
    right:2.5em;
}
.logo { font-size:1.6em}
.picto { 
    margin-left: 8px;
    width: 20px; 
    height: 20px; 
    border-radius: 50%;
    border: 2px solid #359ac7;
    }
#bt1:hover > .picto { opacity: 0.5; }




/* ---- FOOTER ---- */


footer ul {
    list-style:none;
    margin:0;
    padding:0;
    display:inline-block;
    }
footer ul li{ 
    list-style:none;
    display:block;
    margin:0 34px;
    padding:0;
    font-family:'ralewaymedium',AvenirBook, Helvetica, Verdana, Sans-Serif;
    letter-spacing: 1px;
    font-weight:normal;
    font-style:normal;
    font-size:0.9em;
    color:#fff;
	}
footer ul li a {
    display:inline-block;
    margin:0;
    padding: 0;
    color:#fff;
    
	}
footer ul li a:link, footer ul li a:visited {
    color:#fff;
    text-decoration:none;
	}
footer ul li a:hover, footer ul li a:active {
    color:rgba(255,255,255,0.65);
    text-decoration:none;
	}



footer {
	margin: 0; 
	padding: 15px 0;
    font-size: 0.8em;
    background-color: #52635A;
    color: #ffffff; 
	font-family:'ralewaymedium',Arial, Helvetica, Verdana, Sans-Serif;
    margin-top:20px;
    padding-top:40px;
    position:relative;
    right:0;
    left:0;
    bottom:0;
	}
footer > ul, ul.liste-sans-puce {
    list-style: none;
    margin: 0; /* espace sous les ul */
    padding: 0;
    }
footer > ul li, ul.liste-sans-puce li {
    list-style: none; /* on repete pour les vieux navigateurs IE */
    margin: 0 0 0.25em 0; /* espace sous les li */
    padding: 0;
    }

/* ------------------------------------------------------------------------- */


/* ---- MES STYLES DE BLOCS ---- */
.page { 
	margin: 0 auto; /* centre hrizontalement le block */
	padding: 0; 
	width: 1400px;
	}
.marge-top { 
    margin-top:70px;
} /* à cause du menu positionné en fixed */
.marge-top-plus{
    margin-top:150px;
}
.marge-top-interieur{margin-top:10em;}
.marge-top-lunette{margin-top:2em;}
.marge-top-nav{
    margin-top:24px;
}
.marge-top-nav-plus{
    margin-top:33px;
}
.marge-top-section{
    margin-top:18px;
}
.marge-top-point{
    margin-top:20px;
}
.marge-info{
    margin-bottom: 0.7em;
}

.marge-negative-top{
    margin-top: -4.6em;
    margin-bottom: 5em;    
}
.sans-marge-gauche{
    margin-left:0;
    margin-right:3%;
}
.sans-marge-droite{
    margin-right:0;
    margin-left:3%;
}
.sans-droite-home{
    margin-right:0;
}
.sans-gauche-home{
    margin-left:0;
}

.hauteur90 { 
    height: 90px;
    width: auto;
    }
.hauteur70 { 
    height: 70px;
    width: auto;
    }
.hauteur-ecran {
    
    }
.relative{
    position:relative; 
}
.absolute{
    position:absolute;
    
}

.curseur-pointer{
    cursor:pointer;
}

.pola-boutique:hover img, .pola-boutique:hover .bouton{
    transform: scale(0.9);
    background-color: #75837B;
}

.pola-collection:hover img, .pola-collection:hover .bouton{
    transform: scale(0.9);
    background-color: #75837B;
}
.pola-boutique:hover img{opacity: 0.7;}
.pola-collection:hover img{opacity: 0.7;}
.pola-collection:hover .bouton, .pola-boutique:hover .bouton{
    margin-top:-0.3em;
}
.plus-petit{font-size:16px;}
.taille-picto{
    width:50%;
    height:auto;
}
.marge-top-picto{
    margin-top: 2.5em;
}
.point{
    width:18px;
    height:18px;
    border-radius: 50%;
    background-color: #52635A;
    cursor:pointer;
}
.actif-point{
    opacity:0.65;
}
.titre{
    font-family:'playfair_displayregular',Arial, Helvetica, Verdana, Sans-Serif;
}
.lunette:hover{
    opacity:0.6;
}
.coloris{
    display:none;
}

a.retour:link, a.retour:visited{
    color: #000; 
    text-decoration:none;
}
a.retour:hover, a.retour:active{
    color: #000; 
    text-decoration:line-through;
}