html
{
margin:0 auto;
padding:0px;
border:0px;
width:100%;
height : 100%; /* INDISPENSABLE POUR CENTRAGE VERTICAL */
}
body
{
margin:0 auto;
padding:0px;
border:0px;
height:100%; /* INDISPENSABLE POUR CENTRAGE VERTICAL */
width:100%; /* INDISPENSABLE POUR CENTRAGE VERTICAL */
text-align:center;
background-color:#FFF;
overflow-x:hidden;
}
*{ /* permet d'avoir bien tous les blocs en relative collés en haut */
margin: 0;
padding:0;
}
/* ---------------------------------------------*/
/* --- FONTS --- */ /* voir css dedie */
/* ---------------------------------------------*/
/* ---------------------------------------------*/
/* --- GENERAL --- */
/* ---------------------------------------------*/
.vert
{
color:#A6A13F; /* 166 / 161 / 63 */
}
.vert2
{
color:#676853; /* 37 / 68 / 53 */
}
.orange1
{
color:#d14f31; /* 52 / 51 / 45 */
}
.orange2
{
color:#FFA000; /* 255 / 160 / 0 */
}
.noir
{
color:#000000; /* 0 / 0 / 0 */
}
.noir2
{
color:#333333; /* 51 / 51 / 51 */
}
.noir3
{
color:#555555; /* 85 / 85 / 85 */
}
.blanc
{
color:#FFFFFF; /* 25 / 255 / 255 */
}
.BG-vert
{
background-color:#A6A13F; /* 166 / 161 / 63 */
}
.BG-vert2
{
background-color:#676853; /* 37 / 68 / 53 */
}
.BG-orange1
{
background-color:#d14f31; /* 52 / 51 / 45 */
}
.BG-orange2
{
background-color:#FFA000; /* 255 / 160 / 0 */
}
.BG-noir
{
background-color:#000000; /* 0 / 0 / 0 */
}
.BG-noir2
{
background-color:#333333; /* 51 / 51 / 51 */
}
.BG-noir3
{
background-color:#555555; /* 85 / 85 / 85 */
}
.BG-blanc
{
background-color:#FFFFFF; /* 25 / 255 / 255 */
}
h1 /* --- titre accueil --- */
{
color : #FFF;
font-family: 'montserratultra_light', Arial, sans-serif;
font-weight:normal;
font-size: 2.1vw;
line-height: 12vh;
letter-spacing: 0.5px;
text-align : center;
z-index:1999999;
}
h2 /* --- titre de ref --- */
{
color : #FFFFFF;
font-family: 'montserratlight', Arial, sans-serif;
font-weight:normal;
font-size: 1.5vw;
line-height: 4.5vh;
letter-spacing: 0.5px;
text-align : right;
text-transform: uppercase;
margin-right:1vw;
z-index:1999999;
}
h3 /* --- titre-texte de ref --- */
{
color : #d14f31;
font-family: 'montserratlight', Arial, sans-serif;
font-weight:normal;
font-size: 1.2vw;
line-height: 2vw;
letter-spacing: 0.5px;
text-align : left;
text-transform: uppercase;
margin-left:1vw;
margin-top:1.6vw;
}
h4 /* --- texte accueil --- */
{
/*padding:0 2vh 0 2vh;*/
color : #fff;
font-family: 'montserratultra_light', Arial, sans-serif;
font-size: 1.5vw;
line-height:2.5vw;
text-decoration : none;
text-align : left;
letter-spacing:0.1vw;
font-weight:normal;
}
p /* --- textes des ref --- */
{
/*padding:0 2vh 0 2vh;*/
color : #000;
font-family: 'montserratlight', Arial, sans-serif;
font-weight:normal;
font-size: 1vw;
line-height: 1.2vw;
letter-spacing: 0.5px;
text-align : left;
text-transform: uppercase;
margin-left:1vw;
margin-top:0.4vw;
}
a, a:visited, a:focus, a:hover
{
color:#FFFFFF;
font-family: 'montserratregular', Arial, sans-serif;
text-decoration : none;
}
strong, .bold
{
font-weight:bold;
}
.picHauteur100pc
{
position : relative;
height:100%;
border:0;
}
.picLargeur100pc
{
position : relative;
width:100%;
height:auto;
border:0;
}
.picHauteur50pc
{
position : relative;
height:50%;
border:0;
}
.picLargeur50pc
{
display : inline-block;
width:49%;
height:auto;
border:0;
}
.picLargeur75pc
{
display : inline-block;
width:75%;
height:auto;
border:0;
}
.picLargeur33pc
{
display : inline-block;
width:32.5%;
height:auto;
border:0;
}
.centrage-LH
{
display:block;
position:relative;
width:100%;
height:100%;
}
.centrage-LH img /* pour center image en largeur dans une diuiv plus petite */
{
position:absolute;
margin:auto;
top:-2000px;left:-2000px;right:-2000px;bottom:-2000px;
}
.alignCenter
{
text-align:center;
}
.centragevertical
{
position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;
}
.ombre
{
-moz-box-shadow:2px 2px 4px 1px #CCC;
-ms-box-shadow:2px 2px 4px 1px #CCC;
-o-box-shadow:2px 2px 4px 1px #CCC;
-webkit-box-shadow:2px 2px 4px 1px #CCC;
box-shadow:2px 2px 4px 1px#CCC;
border:0;
}
.drop-shadow
{
filter: drop-shadow(4px 4px 4px #333333);
}
.pointer
{
cursor:pointer;
}
.clear
{
clear: both;
}
.inline
{
display:inline;
}
.none
{
display:none;
}
.mentions
{
color : #000;
font-family: 'Open_sansregular', Arial, sans-serif;
font-size: 1vh;
line-height:1.2vh;
text-decoration : none;
text-align : center;
}
/*
.puce
{
color:#9a0d40;
margin-left:1%;
margin-right:1%;
}
*/
/* ---------------------------------------------*/
/* --- HEADER --- */
/* ---------------------------------------------*/
.architecte
{
position:fixed;
display:block;
left:0;
width:100vw;
top:0;
height:12vh;
text-align:center;
z-index:100000;
}
.logo-orchampt
{
position:relative;
display:block;
top:3vh;
height:6vh;
right:3vh;
/*width:16vw;*/
text-align:right;
}
.menu
{
position:fixed;
/*width:16vw;*/
left:3vh;
top:4.5vh;
height:3vh;
background:none;
text-align:left;
z-index:200000;
}
.menu-item
{
position:relative;
display:inline-block;
margin-left:3vh;
/*margin-top:0;*/
padding-left:1vh;
padding-right:1vh;
top:0;
left:0;
height:3vh;
text-align:left;
color : #333333;
font-family: 'montserratlight', Arial, sans-serif;
font-size: 1.8vh;
line-height:3vh;
text-decoration : none;
letter-spacing:0.6px;
cursor:pointer;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menu-item:hover
{
color : #d14f31;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu-selected
{
position:relative;
display:inline-block;
margin-left:3vh;
padding-left:1vh;
padding-right:1vh;
top:0;
left:0;
height:3vh;
text-align:left;
color : #FFFFFF;
font-family: 'montserratlight', Arial, sans-serif;
font-size: 1.8vh;
line-height:3vh;
text-decoration : none;
letter-spacing:0.6px;
cursor:default;
background-color : #d14f31;
}
.menuon, .menuoff
{
left:0;
}
.menu-bt
{
display:none;
position:fixed;
right:0vw;
top:2vw;
height:11vw;
width:15vw;
z-index:9000010;
}
.contact-bt
{
display:none;
position:fixed;
left:0vw;
top:2vw;
height:11vw;
width:15vw;
z-index:9000010;
}
/* ---------------------------------------------*/
/* --- FOOTER --- */
/* ---------------------------------------------*/
.architecte-dplg /* bandeau total bas */
{
position:fixed;
left:0;
width:100%;
bottom:0;
height:3vh;
box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -2px -2px 5px rgba(0,0,0,0.4);
-moz-box-shadow: -2px -2px 5px rgba(0,0,0,0.4);
z-index:200000;
background-color: #d14f31;
/*overflow:hidden;*/
}
.normandie-architectes /* gauche */
{
position:absolute;
display:block;
top:0vh;
height:3vh;
width:25vw;
left:2vw;
text-align:left;
color : #FFF;
font-family: 'montserratlight', Arial, sans-serif;
font-size: 0.9vw;
line-height:3vh;
text-decoration : none;
letter-spacing:1px;
vertical-align: top;
}
.normandie-construction /* centre */
{
position:absolute;
display:block;
top:0vh;
height:3vh;
width:25vw;
left:2vw;
text-align:left;
/*
width:12vw;
left:44vw;
text-align:center;
*/
color : #FFF;
font-family: 'montserratlight', Arial, sans-serif;
font-size: 0.9vw;
line-height:3vh;
text-decoration : none;
letter-spacing:1px;
}
.normandie-batiment /* droite */
{
position:absolute;
display:block;
top:0vh;
height:3vh;
right:2vw;
width : 25vw;
padding-right:0;
text-align:right;
color : #FFF;
font-family: 'montserratlight', Arial, sans-serif;
font-size: 0.9vw;
line-height:3vh;
text-decoration : none;
letter-spacing:1px;
}
.picto-social
{
display:inline-block;
position:relative;
margin-right:-0.2vw;
margin-left:0;
top:0vh;
height:6vh;
vertical-align: top;
cursor:pointer;
overflow:hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.picto-social:hover
{
top:-3vh;
height:6vh;
background-color:#333333;
/*background-color:#F48A32;*/
/*filter: grayscale(100%);*/
-webkit-transform-origin : 50% 50%;
-moz-transform-origin : 50%,50%;
-ms-transform-origin : 50%,50%;
-o-transform-origin : 50%,50%;
transform-origin : 50%,50%;
-webkit-transform : scale(1.1,1.1);
-moz-transform : scale(1.1,1.1);
-ms-transform : scale(1.1,1.1);
-o-transform : scale(1.1,1.1);
transform : scale(1.1,1.1);
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.boldover
{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.boldover:hover
{
font-family: 'montserratbold';
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.partagez
{
display:inline-block;
}
/* ---------------------------------------------*/
/* --- PRINCIPAL --- */
/* ---------------------------------------------*/
.principal
{
position:absolute;
display:block;
left:0;
top:12vh;
width:100vw;
height:auto; /* 85 vh */
font-size:0; /* TRES IMPORTANT : evite espaces entre blocs dans div Enfants */
text-align:center;
z-index:90000;
vertical-align:top;
}
.accueil-photo
{
position:absolute;
display:block;
left:0;
top:0;
width:100vw;
height:88vh;
/*font-size:0; TRES IMPORTANT : evite espaces entre blocs dans div Enfants */
text-align:center;
background-image: url(../architectes-normandie/lisieux-architecture.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
.accueil-logo
{
position:relative;
display:block;
left:0;
top:0;
width:100vw;
height:88vh;
/*font-size:0; TRES IMPORTANT : evite espaces entre blocs dans div Enfants */
text-align:center;
}
.accueil-titre
{
position:relative;
display:block;
left:0;
top:0;
width:100vw;
height:12vh;
/*font-size:0; TRES IMPORTANT : evite espaces entre blocs dans div Enfants */
text-align:center;
}
.accueil-texte
{
position:relative;
display:block;
left:0;
top:0;
width:100vw;
/*height:43vh*/
/*font-size:0; TRES IMPORTANT : evite espaces entre blocs dans div Enfants */
text-align:left;
}
.accueil-texte-bloc
{
position:relative;
display:inline-block;
left:0;
top:4vw;
margin:0 0 10vw 5vw;
width:42vw;
/*height:30vh;*/
/*font-size:0; TRES IMPORTANT : evite espaces entre blocs dans div Enfants */
text-align:center;
vertical-align:top;
}
.accueil-identites-bloc
{
position:relative;
display:inline-block;
left:0;
margin-top:0;
margin-bottom:3vw;
margin-left:1vw;
margin-right:1vw;
width:calc(50% - 2vw);
height:17vw;
/*font-size:0; TRES IMPORTANT : evite espaces entre blocs dans div Enfants*/
text-align:center;
overflow:hidden;
filter: grayscale(100%);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.accueil-identites-bloc:hover
{
filter: grayscale(0%);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.accueil-identites-legende
{
display:block;
position :absolute;
bottom:1vw;
left:1vw;
width:calc(100% - 3vw);
text-align:center;
background-color:#FFF;
padding:0.5vw;
color : #333;
font-family: 'montserratlight', Arial, sans-serif;
font-weight:normal;
font-size: 0.9vw;
line-height: 0.9vw;
letter-spacing: 0.5px;
text-align : center;
/*text-transform: uppercase;*/
}
.accueil-photo-bloc
{
position:relative;
display:inline-block;
left:0;
margin-top:0;
margin-bottom:3vw;
margin-left:1vw;
margin-right:1vw;
width:calc(100% - 2vw);
height:17vw;
/*font-size:0; TRES IMPORTANT : evite espaces entre blocs dans div Enfants*/
text-align:center;
overflow:hidden;
filter: grayscale(100%);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.accueil-photo-bloc:hover
{
filter: grayscale(0%);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* VERSION DEUX PAVES DANS LE TEXTE */
/*.accueil-identites-bloc
{
position:relative;
display:inline-block;
left:0;
margin-top:2.5vw;
margin-bottom:2.5vw;
width:100%;
height:10vw;
font-size:0; TRES IMPORTANT : evite espaces entre blocs dans div Enfants
text-align:center;
overflow:hidden;
}*/
.accueil-fleche
{
position:absolute;
display:block;
left:45vw;
bottom:5vw;
width:10vw;
height:3vw;
/*font-size:0; TRES IMPORTANT : evite espaces entre blocs dans div Enfants*/
text-align:center;
/*background-color: aqua;*/
-webkit-animation: tourne 3s infinite;
-moz-animation: tourne 3s infinite;
animation: tourne 3s infinite;
}
@-webkit-keyframes tourne {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes tourne {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes tourne {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.marge-basse
{
position:relative;
top:0;
left:0;
width:100%;
height:3vh;
background-color: #333333;
}
/* ------------- ELEMENTS PAGE ACCUEIL des REALISATIONS / GALERIE -----------*/
.real-vig
{
position:relative;
display:inline-block;
top:0;
left:0;
margin-left:0;
margin-top:0;
width:25vw;
height:18vw;
overflow:hidden;
}
.real-vig-pic
{
position:absolute;
display:block;
top:0;
left:0;
width:25vw;
height:18vw;
overflow:hidden;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.real-vig-tit
{
position:absolute;
display:block;
top:13.5vw;
left:2vw;
width:17vw;
/*height:5vw;*/
color : #FFFFFF;
font-family: 'montserratultra_light', Arial, sans-serif;
font-weight:normal;
font-size: 1.2vw;
line-height: 1.3vw;
letter-spacing: 1px;
text-align : left;
/*background-color: aqua;*/
opacity:0;
overflow:hidden;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.real-vig-dat
{
position:absolute;
display:block;
left:1vw;
bottom:1vw;
width:4vw;
height:1.5vw;
color : #FFFFFF;
font-family: 'montserratlight', Arial, sans-serif;
font-weight:normal;
font-size: 1vw;
line-height: 1.5vw;
letter-spacing: 1px;
text-align : center;
background-color: #d14f31;
opacity:1;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.real-vig-sym
{
position:absolute;
display:block;
top:12.1vw;
left:15vw;
/*width:17vw;*/
/*height:5vw;*/
color : #d14f31;
font-family: 'montserratultra_light', Arial, sans-serif;
font-weight:normal;
font-size: 5vw;
line-height: 5vw;
letter-spacing: 1px;
text-align : left;
/*background-color: aqua;*/
opacity:0;
overflow:hidden;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.real-vig:hover .real-vig-pic
{
position:absolute;
display:block;
top:2vw;
left:2vw;
width:21vw;
height:11vw;
overflow:hidden;
filter: grayscale(100%);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.real-vig:hover .real-vig-tit
{
position:absolute;
display:block;
top:13.5vw;
left:2vw;
width:17vw;
/*height:5vw;*/
padding:0;
color : #FFFFFF;
font-family: 'montserratultra_light', Arial, sans-serif;
font-weight:normal;
font-size: 1.2vw;
line-height: 1.3vw;
letter-spacing: 1px;
text-align : left;
/*background-color: aqua;*/
opacity:1;
overflow:hidden;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.real-vig:hover .real-vig-sym
{
position:absolute;
display:block;
top:12.1vw;
left:20.4vw;
/*width:17vw;*/
/*height:5vw;*/
color : #d14f31;
font-family: 'montserratultra_light', Arial, sans-serif;
font-weight:normal;
font-size: 5vw;
line-height: 5vw;
letter-spacing: 1px;
text-align : left;
/*background-color: aqua;*/
opacity:1;
overflow:hidden;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.real-vig:hover .real-vig-dat
{
position:absolute;
display:block;
left:0vw;
bottom:0vw;
width:6vw;
height:3.5vw;
color : #FFFFFF;
font-family: 'montserratlight', Arial, sans-serif;
font-weight:normal;
font-size: 2vw;
line-height: 3vw;
letter-spacing: 1px;
text-align : center;
background-color: #A6A13F;
opacity:0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
/* ------------- ELEMENTS PAGE REALISATIONS fiche -----------*/
/* ------------- vignettes, par 4/6/12 (mulitple de 2 pour V° Resp.) -----------*/
.principal-fiche
{
position:absolute;
display:block;
left:0;
top:12vh;
width:100vw;
height:85vh;
font-size:0; /* TRES IMPORTANT : evite espaces entre blocs dans div Enfants */
text-align:center;
z-index:90000;
vertical-align:top;
overflow:hidden;
}
.fiche-titre
{
position:absolute;
display:block;
width:100vw;
height:4.5vh;
margin:0;
padding;0.5vh;
top:0;
left:0;
background-color: #d14f31;
}
.bt-ref-retour
{
position: absolute;
display: block;
top:0.75vh;
left:0.75vh;
height:3vh;
padding-left:1vh;
padding-right:1vh;
background-color:rgba(255,255,255,0);
color : #FFF;
font-family: 'montserratlight', Arial, sans-serif;
font-size: 1.3vh;
line-height:3vh;
text-decoration : none;
letter-spacing:0.6px;
cursor:pointer;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.bt-ref-retour:hover
{
background-color:rgba(255,255,255,1);
color : #d14f31;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.bt-ref-details
{
display: none;
}
.fiche-galerie
{
position: absolute;
display: block;
top:4.5vh;
left:0;
padding:1vw;
height:calc(81vh - 2vw);
width:calc(70vw - 2vw);
font-size:0; /* TRES IMPORTANT : evite espaces entre blocs dans div Enfants TEST ICI */
text-align:center;
overflow-y: auto;
/*background-color: aquamarine;*/
}
.fiche-infos
{
position: absolute;
display: block;
margin:0vh;
padding:0 0 0 0.5vw;
top:4.5vh;
left:70vw;
height:81vh;
width:29.5vw;
background-color: #333;
overflow: auto;
}
.fiche-infos p
{
color:#FFF;
}
/* ------------- GAL x4 x6 -----------*/
.fiche-picX4
{
position: relative;
display: inline-block;
width:calc(50% - 2vw);
height:calc(50% - 2vw);
margin:1vw;
font-size:0; /* TRES IMPORTANT : evite espaces entre blocs dans div Enfants TEST ICI */
overflow:hidden;
text-align: center;
/*background-color: bisque;*/
filter: grayscale(0%);
-moz-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-ms-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-o-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-webkit-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.fiche-picX6
{
position: relative;
display: inline-block;
width:calc(50% - 2vw);
height:calc(33.3% - 2vw);
margin:1vw;
font-size:0; /* TRES IMPORTANT : evite espaces entre blocs dans div Enfants TEST ICI */
overflow:hidden;
text-align: center;
/*background-color: bisque;*/
filter: grayscale(0%);
-moz-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-ms-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-o-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-webkit-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.fiche-picX1
{
position: relative;
display: inline-block;
width:calc(85% - 2vw);
height:calc(68% - 2vw);
margin-top:15%; /* uniquement top pour X1 */
margin-bottom:1vw;
margin-left:1vw;
margin-right:1vw;
font-size:0; /* TRES IMPORTANT : evite espaces entre blocs dans div Enfants TEST ICI */
overflow:hidden;
text-align: center;
/*background-color: bisque;*/
filter: grayscale(0%);
/* !!!!!!! OMBRE DE CADRE SUPPRIMEE CAR LA PHOTO NE REMPLIT PAS L'ESPACE SI UNE SEULE PHOTO !!!!!!
-moz-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-ms-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-o-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-webkit-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
*/
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.fiche-picX1vert
{
position: relative;
display: inline-block;
width:calc(68% - 2vw);
height:calc(85% - 2vw);
top:7.5%; /* uniquement top pour X1 */
margin:1vw;
font-size:0; /* TRES IMPORTANT : evite espaces entre blocs dans div Enfants TEST ICI */
overflow:hidden;
text-align: center;
/*background-color: bisque;*/
filter: grayscale(0%);
-moz-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-ms-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-o-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-webkit-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
/* ------------- GAL x8 -----------*/
.pic-GAL-Hauteur100pc
{
position : relative;
height:100%;
width:auto;
border:0;
}
/* corrige affichage des pics dans blocs vignette en version écran : quand la largeur de l'écran se réduit (mais pas encore assez pour passer en responsive), la pic passse en remplissage hauteur 100% au lieu largeur 100% */
@media screen and (min-aspect-ratio: 100/61) {
.pic-GAL-Hauteur100pc
{
position : relative;
width:100%;
height:auto;
border:0;
}
}
.fiche-picX8
{
position: relative;
display: inline-block;
width:calc(33.3% - 2vw);
height:calc(33.3% - 2vw);
margin:1vw;
font-size:0; /* TRES IMPORTANT : evite espaces entre blocs dans div Enfants TEST ICI */
overflow:hidden;
text-align: center;
/*background-color: bisque;*/
filter: grayscale(0%);
-moz-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-ms-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-o-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-webkit-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.fiche-pic-container /* devient renovation */
{
position:absolute; /* position:absolute; */
top :0;
left:0;
width:100%;
height:100%;
filter: grayscale(0%);
opacity:1;
text-align: center;
/*background-color: aqua;*/
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
overflow:hidden;
}
.fiche-picX4:hover .fiche-pic-container, .fiche-picX8:hover .fiche-pic-container, .fiche-picX6:hover .fiche-pic-container, .fiche-picX1vert:hover .fiche-pic-container /* .fiche-picX1:hover .fiche-pic-container, NON */
{
position:absolute;
top:-5%;
left:-5%;
width:110%;
height:110%;
filter: grayscale(0%);
opacity:1; /* 0.7 */
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
overflow:hidden;
}
.picto-zoom, .picto-zoom-sombre
{
position:absolute;
display:block;
top:0vh;
left:0vh;
width:100%;
height:100%;
border:1px solid #FFF;
opacity:0;
cursor:pointer;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.fiche-picX4:hover .picto-zoom, .fiche-picX8:hover .picto-zoom, .fiche-picX6:hover .picto-zoom, .fiche-picX1vert:hover .picto-zoom /* .fiche-picX1:hover .picto-zoom, NON */
{
position:absolute;
display:block;
top:2vh;
left:2vh;
width:calc(100% - 4vh);
height:calc(100% - 4vh);
border:1.4px solid #FFF;
opacity:1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.fiche-picX4:hover .picto-zoom-sombre, .fiche-picX8:hover .picto-zoom-sombre, .fiche-picX6:hover .picto-zoom-sombre, .fiche-picX1vert:hover .picto-zoom-sombre /* .fiche-picX1:hover .picto-zoom-sombre NON */
{
position:absolute;
display:block;
top:2vh;
left:2vh;
width:calc(100% - 4vh);
height:calc(100% - 4vh);
border:1.4px solid #333;
opacity:1;
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
-ms-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.bt-plusbas
{
display: block;
position: fixed;
bottom:4.5vh;
height:6vh;
width:6vh;
left:calc(50% - 3vh - 15vw);
opacity:0;
-webkit-animation: anim-plusbas 2s 2;
animation: anim-plusbas 2s 2;
/*background-color: aqua;*/
}
@keyframes anim-plusbas {
0% {
opacity:0;
}
45% {
opacity:1;
}
55% {
opacity:1;
}
100% {
opacity:0;
}
}
.bt-plusbas-accueil
{
display: block;
position: absolute;
bottom:5vh;
height:8vh;
width:8vh;
left:calc(50% - 4vh);
opacity:0;
-webkit-animation: anim-plusbas 2s 3;
animation: anim-plusbas 2s 3;
/*background-color: aqua;*/
}
video {
display: block;
margin: 0 auto;
width: 100%;
/*max-width: 800px;*/
border: 0;
border-radius: 0;
}
.fiche-picVideo
{
position: relative;
display: inline-block;
width:calc(85% - 2vw);
height:calc(140% - 2vw);
margin-top:10%;
font-size:0; /* TRES IMPORTANT : evite espaces entre blocs dans div Enfants TEST ICI */
/*overflow:hidden;*/
text-align: center;
/*background-color: bisque;*/
/*filter: grayscale(0%);*/
/* !!!!!!! OMBRE DE CADRE SUPPRIMEE CAR LA PHOTO NE REMPLIT PAS L'ESPACE SI UNE SEULE PHOTO !!!!!!
-moz-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-ms-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-o-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
-webkit-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
*/
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.respOnly
{
display: none;
}
/* ------------- ELEMENTS PAGE CONTACT -----------*/
.contact-coordonnees
{
position: relative;
display: block;
width: calc(100% - 12vh);
height: auto;
padding: 2vh 6vh 2vh 6vh;
text-align:center;
}
.contact-map
{
position: absolute;
top:4vw;
height:calc(100% - 8vw);
right:5vw;
width:35vw;
}
.bt-mentionsleg
{
position: relative;
display: block;
width:70%;
left:15%;
padding:5px;
margin:6vw 0 9vw 0;
color : #fff;
font-family: 'montserratultra_light', Arial, sans-serif;
font-size: 1.2vw;
line-height:1.8vw;
text-decoration : none;
text-align : center;
letter-spacing:0.1vw;
font-weight:normal;
cursor:pointer;
}
.form-contact
{
position:relative;
display:block;
top:0;
left:20%;
width:60%;
height:auto;
padding:0;
margin:0;
/*background-color: aqua;*/
}
label {
display:block;
margin-top:1.8vw;
margin-bottom:0.4vw;
letter-spacing:1px;
color:#FFF;
font-family: 'montserratlight', Arial, sans-serif;
font-size: 1.2vw;
line-height:2.4vw;
text-decoration : none;
letter-spacing:0.05vw;
text-transform: uppercase;
}
/* Style the text boxes */
input, textarea {
display:block;
width:97%;
left:0;
background-color:#FFF;
border:0px solid #dedede;
padding-left:3%;
margin:0 auto;
color:#333;
font-family: 'montserratlight', Arial, sans-serif;
font-size: 1.2vw;
line-height:2.3vw;
text-decoration : none;
letter-spacing:0.05vw;
border-radius: 12px;
text-align:left;
}
textarea {
display:block;
width:97%;
max-width:97%; /* éviter extension latérale*/
max-height:40vw;
padding-top:1%;
padding-bottom:1%;
height:20vw;
overflow-y: auto;
}
input:focus, textarea:focus {
border:1px solid #333;
}
#submit {
width:30%;
/*height:38px;*/
margin:0 auto;
margin-top:3.5vw;
cursor:pointer;
padding:0;
color : #FFF;
font-family: 'montserratlight', Arial, sans-serif;
font-size: 1.7vw;
line-height:3.4vw;
text-decoration : none;
letter-spacing:1px;
text-align:center;
border:1px solid #FFF;
background-color: #333;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#submit:hover
{
color : #FFF;
background-color: #d14f31;
border:0px solid #FFF;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.captcha-top
{
margin-top:4vw;
}
.checkboite
{
display:inline;
width:auto;
margin-right:10px;
cursor:pointer;
}
.stupidcheck
{
display:inline;
position: relative;
color : #BBB;
font-family: 'montserratlight', Arial, sans-serif;
font-weight:normal;
font-size: 0.9vw;
line-height: 1.2vw;
letter-spacing: 0.5px;
text-align : left;
cursor:pointer;
}
.stupidcheck-checked /* uniquement couleur change */
{
display:inline;
position: relative;
color : #FFF;
font-family: 'montserratlight', Arial, sans-serif;
font-weight:normal;
font-size: 0.9vw;
line-height: 1.2vw;
letter-spacing: 0.5px;
text-align : left;
cursor:pointer;
}