body,td,th { font-family: Arial, Helvetica, sans-serif; overflow-y:scroll; overflow-x:auto; margin:auto; padding:0; max-width: 1500px ; height:100%; color:#ccc; background-color:#333 ; text-align : center ; }
html { background-color:#333 ; }
img { border: 0; }

.fondbouton { position: absolute; left:0; top:0; width: 100% ; height: 100%; }

.di1_listes {display: inline-block ; width: 90% ; max-width: 1150px ; margin: 0 4% 2% 2% ; font-weight: lighter ; letter-spacing : 0.02em ; color:#000; /*background-color : #da5 ; */}
.di2_listes { display : inline-block ; width : 90% ; max-width: 1150px ; margin : 0 ; padding: 0 ; color:#000; font-weight: lighter ; letter-spacing : 0.02em ; text-align: center ; /*background-color : #dce ; */}
.di3_listes { display : inline-block ; width : 90% ; max-width: 1150px ; margin : 0 auto 0 ; padding: 0 ; color:#000; font-weight: lighter ; letter-spacing : 0.02em ;  /*background-color : #cde ; */}
.di4_listes { margin: 0.5em auto 1.5em ; width: 96% ; max-width: 1150px ; /*background-color : #9c6 ; */}

.padd1 { padding : 2em 0 2em 0 ; margin : 0 ; /*background-color : #cbd ; */}
.padd1 > * { page-break-inside: avoid; /*break-inside: avoid-column; */}
.padd2 { padding : 0 ; margin : 0 ; /*background-color : #cbd ; */}
.padd2 > * { page-break-inside: avoid; /*break-inside: avoid-column; */}

.> * { page-break-inside: avoid; /*break-inside: avoid-column; */}
.padd3 { padding: 0 13% 0 0 ; height:auto ; /*background-color : #a4e ; */}
.borbas1 { border-bottom: 0px ; }
.borbas2 { border-bottom: 0px ; }

.colonnes0 { display : inline-block ; margin: 0 auto ; width: 100% ; max-width: 400px ; /*background-color : #a97 ; */}
.colonnes1 { margin: auto ; width: 83% ; max-width: 400px ; /*background-color : #a97 ; */}
.colonnes2 { margin: auto ; width: 100% ; max-width: 400px ; /*background-color : #678 ; */}
.colonnesb2 { width: 95% ; max-width: 400px ; margin: 0 5% 0.7em 2% ; text-align : left ; /*background-color : #e8b ; */}
.colonnes3 { margin: auto ; width: 100% ; max-width: 400px ; /*background-color : #abc ; */}
@supports (columns: 2 ) {.colonnes2 { columns: 2 19em ; column-gap: 3em ; } .colonnes3 { columns: 3 19em ; column-gap: 3em ; } .colonnesb2 { columns: 2 19em ; column-gap: 3em ; } .padd1 { padding : 2em 0 2em 0 ; margin : 0 ; } }

.di_h1 { display : block ; position:relative ; margin: 0.4em auto 0.4em ; width: 65% ; height : auto ; color:#fff; font-size:1.1em; text-align : center ; text-transform: uppercase; letter-spacing : -0.01em ; z-index: 11 ; /*background-color : #e9a ; */}

.enveloppeboutons { position: inherit ; display: block ; border : 0 ; width : 76% ; height: auto ; text-align: center ; margin: 0.2em auto 2em ; overflow: hidden ; z-index: 8 ; /*background-color : #5ad ; */}
.blocboutons { display : inline-block ; margin: 0.4em auto 0.4em ; width: 96% ; max-width: 1400px ; text-align: center ; z-index: 7 ; /*background-color : #da5 ; */}
.boutoni { position: relative ; display: inline-block ; border : 0 ; width : 85% ; height : 25px ; margin: 0 0.04em 0 0.04em ; text-align: center ; letter-spacing : 0.1em ; font-size: 0.68em ; font-weight: lighter; text-transform: uppercase; z-index: 6 ; /*background-color : #a95 ; */}
.boutonti { position: absolute ; top: 50% ; transform: translate(-50%,-50%); color:#000; /*background-color : #5ad ; */}

.enveloppefleches { position: fixed ; width : 96% ; height: 14px ; top: 0 ; left : 2% ; margin: 0 ; z-index: 9 ; /*background-color : #9ae ; */}
.flecheshboutons { position: absolute ; top: 0.4em ; right : 15% ; border : 0 ; width : 1.9em ; height : 1.4em ; margin: 0 ; /*background-color : #9a5 ; */}
.flechesgboutons { position: absolute ; top: 0.6em ; left : 0.3em ; border : 0 ; width : 1.4em ; height : 1.9em ; margin: 0 ; /*background-color : #9a5 ; */}
.flechesdboutons { position: absolute ; top: 0.6em ; right : 0.3em ; border : 0 ; width : 1.4em ; height : 1.9em ; margin: 0 ; /*background-color : #dec ; */}

.boutonh         { position: absolute ; top: 0.4em ; right : 23% ; border : 0 ; width : 8em ; height : 1.4em ; margin: 0 ; letter-spacing : 0.0em ; line-height : 0.8em ; font-size: 0.8em ; font-weight: lighter; /*background-color : #a76 ; */}
.boutonth        { position: absolute ; width : 6em ; top: 49% ; left : 3.1em ; transform: translate(-50%,-50%); overflow-wrap: break-word; color:#000; /*background-color : #5ad ; opacity: 0.7 ; */}
.flecheshboutonlarges { position: absolute ; top: 0 ; right : 0 ; border : 0 ; width : 1.9em ; height : 1.4em ; margin: 0 ; /*background-color : #9a5 ; */}

.boutong         { position: absolute ; top: 0.6em ; left : 0 ; border : 0 ; width : 14em ; height : 1.9em ; margin: 0 ; letter-spacing : -0.03em ; line-height : 0.8em ; font-size: 0.75em ; font-weight: lighter; /*background-color : #a76 ; */}
.boutontg        { position: absolute ; width : 11.5em ; top: 49% ; left : 7.75em ; transform: translate(-50%,-50%); overflow-wrap: break-word; color:#000; /*background-color : #5ad ; opacity: 0.7 ; */}
.flechesgboutonlarges { position: absolute ; top: 0 ; left : 0.3em ; border : 0 ; width : 1.4em ; height : 1.9em ; margin: 0 ; /*background-color : #9a5 ; */}

.boutond         { position: absolute ; top: 0.6em ; right : 0 ; border : 0 ; width : 14em ; height : 1.9em ; margin: 0 ; letter-spacing : -0.03em ; line-height : 0.8em ; font-size: 0.75em ; font-weight: lighter; /*background-color : #a76 ; */}
.boutontd        { position: absolute ; width : 11.5em ; top: 49% ; right : -3.4em ; transform: translate(-50%,-50%); overflow-wrap: break-word; color:#000; /*background-color : #5ad ; opacity: 0.7 ; */}
.flechesdboutonlarges { position: absolute ; top: 0 ; right : 0.3em ; border : 0 ; width : 1.4em ; height : 1.9em ; margin: 0 ; /*background-color : #9a5 ; */}

.colonneA1 { display: inline-block ; width: 95%; top: 0.4em ; margin: 0 5% 0.7em 2% ; vertical-align: top ; text-align : left ; /*background-color : #e9a ; */}
.titrerubriqueG  { display : inline-block ; width : 95% ; height:1em ; top: 0.4em ; margin: 0 5% 1.5em 2% ; vertical-align: top ; text-align : left ; /*background-color : #7ae ; */}

.bloc2boutons { margin: 0.5em auto 1.5em ; width: 92% ; height : auto ; max-width: 1400px ; text-align: center ; /*background-color : #9aa ; */}
.boutonj { position: relative ; display: inline-block ; border : 0 ; width : 80% ; height : 30px ; margin: 0.01em auto 0 ; letter-spacing : 0.03em ; line-height : 1em ; font-size: 0.68em ; font-weight: lighter; text-transform: uppercase; color:#000; /*background-color : #a76 ; */}
.boutontj { position: absolute ; top: 50% ; transform: translate(-50%,-50%); overflow-wrap: break-word; /*background-color : #5ad ; */}

.liste_vign { margin: 0.5em auto 1.5em ; width: 99% ; max-width: 1500px ; text-align: center ; /*background-color : #cdd ; */}

#pano_container{ position: absolute; left:0; top:0; margin: 0 ; height : 100% ; width : 100% ; float: left; border : 0 ; background-color:#333 ; z-index: 1; }

.titre_cat_cv { display : inline-block ; width : 90% ; margin : 0 0 0.5em 3% ; color: #222; font-size: 1.4em; /*background-color : #5da ; */}
.sous_bloc_cv { display: block ; width: 94% ; padding-left: 3% ; margin : 0 1% 1em 2% ; /*background-color : #ebd ; */}
.annee_cv { display: block ; margin-bottom: 0.3em ; font-size: 1.1em; font-weight:bold; color: #777; }
.date_cv { display: block ; margin-bottom: 0.3em ; color: #444; font-size:0.9em; }
.titre_element_cv {display: block ; margin-bottom: 0em ; font-weight: bold ; font-size: 1em; color: #555; }
.editeur_cv { display: block ; color: #444; font-size:0.9em; }
.lieu_cv { display: block ; color: #444; font-size:0.9em; }

.blocvign:hover .legendPop { visibility: visible; opacity: 1; }
.blocvign { display : inline-block ; vertical-align : middle ; margin : 2em auto 0.3em ; height : auto ; width : 97% ; /*background-color : #da5 ; */}
.vignet { margin: 0 ; max-width : 97% ; }
.legendPo2 { display: block ; top : 0.0em; margin-left: 5% ; padding: 0; height : auto ; letter-spacing: 0 ; font-size: 1em; line-height: 1.4em ; width : 90% ; z-index: 10 ; /*background-color : #ea7 ; */}
.arrondi { border-radius: 1.3em ; }

/*bloc carré textes*/
.textdi { position: relative ; display: inline-block ; vertical-align : middle ; width : 85vw ; height: 85vw ; margin : 0.7em 0.3em 0 0.3em ; border : 0 ; letter-spacing : -0.03em ; font-size: 0.8em ; font-weight: lighter; color:#111; /*background-color : #a76 ; */}
.textspa { position: absolute ; top: 0 ; left: 0 ; width : 100% ; height: 100% ; margin: 0 ; text-align: left ; overflow: hidden ; word-wrap: break-word ; text-overflow: clip ; /*background-color : #5ad ; */}

.textsp2 { overflow: hidden ; word-wrap: break-word ; text-overflow: clip ; }

.bloc2vign { position: relative ; display: inline-block ; width: 85vw ; height: 63.3vw ; margin : 0.7em 0.3em 0 0.3em ; overflow: hidden ; /*background-color : #9c6 ; */}
.bloc3vign { position: relative ; padding-bottom: 100%; height: 0 ; top: 0 ; left: 0 ; margin: 0 ; overflow: hidden ; word-wrap: break-word ; text-overflow: clip ; /*https://alistapart.com/article/creating-intrinsic-ratios-for-video/*/}
.vigne2spa { position: absolute ; width : 100% ; top: 0 ; left: 0 ; margin: 0 ; filter: brightness(0.90) contrast(90%) saturate(0.9); /*background-color : #5ad ; */}
.legend2e { position: absolute; top: 88%; left: 6%; width: 90%; height: 5rem; margin: 0 ; font-size: 1.0em ; font-weight: 300 ; text-align: left ; text-overflow: clip ; color: #000 ; /*https://alistapart.com/article/creating-intrinsic-ratios-for-video/*/}
.vigne2t { margin: 0 ; width : 100% ; /*opacity: 0.4; */}

.affVinfa { display : none ; z-index: 6 ; } 
.affV680infa { display : none ; z-index: 5 ; } 
.masqV680infa { display : block ; z-index: 5 ; } 

.divfixbas { left : 0.5em ; width: 25vw ; max-width: 5em ; margin : 0 ; height: auto ; position: fixed; text-align: left ; bottom: 10px; margin : 0 0 0 1em ; z-index: 10 ; /*background-color : #462 ; */}
.spanfixbas { position: relative; text-align: left ; }

.bloc2vign a:link { filter: brightness(1) contrast(100%) saturate(1) } 
.bloc2vign a:visited { filter: brightness(1) contrast(100%) saturate(1) }
.bloc2vign a:hover { filter: brightness(1.2) contrast(80%) saturate(0.80) }
.bloc2vign a:active { filter: brightness(1.2) contrast(80%) saturate(0.80) }

a:link {color: #47a; text-decoration: none; } 
a:visited { color: #47a; text-decoration: none; }
a:hover {color: #888; text-decoration: none; }
a:active { color: #888; text-decoration: none; }

.legend2e { color: #fff ; }
.legend2e a:link { color: #fff ; }
.legend2e a:visited { color: #fff ; }
.legend2e a:hover { color: #fff ; /*opacity: 0.0 ; */}
.legend2e a:active { color: #fff ; /*opacity: 0.0 ; */}

.gris3 { color : #fff ; text-decoration : none ; } 
.gris3 a:link { color : #fff ; text-decoration : none ; } 
.gris3 a:visited { color : #fff ; text-decoration : none ; } 
.gris3 a:hover { color : #fb9 ; text-decoration : none ; } 
.gris3 a:active { color : #fb9 ; text-decoration : none ; } 

.gris5 { color:#555; text-decoration: none; }
.gris5 a:link {color:#555; text-decoration: none; font-weight:lighter ; }
.gris5 a:visited { color:#555; text-decoration: none; }
.gris5 a:hover {color:#222; text-decoration: none;}
.gris5 a:active { color:#222; text-decoration: none; }

.gauche {text-align: left; }
.centree {text-align: center;}
.droite {text-align: right;}
.justifie {text-align: justify ;}
.gras { font-weight: bold ; }
.taille_police_1 { font-size : 1.4em ; } 
.taille_police_2 { font-size : 1.1rem ; } 
.taille_police_3 { font-size : 0.8rem ; } 
.hauteur_ligne_3 {line-height : 0.8em ; } 
.italique{ font-style: italic; }
.capitales { text-transform: uppercase; }
.couleur_text_1 { color: #900 ; } 
.marges_1 { margin: 1em auto 0 ; }
.marges_2 { margin: 0.2em auto 0 ; }
.marges_bas { margin-bottom : 6em ; }
.padd_haut { padding: 2em 0 0 0 ; }
.largeur1 { width: 95% ;}
.largeur2 { width: 80% ;}
.largeur3 { width: 98% ;}
.souligne{ text-decoration: underline; }
.tabulation1a { width:49%; text-indent: 0 ;display: inline-block; float: left; text-align: left ; clear: both;  }
.tabulation2a { width:49%; text-indent: 0 ;display: inline-block; float: right; }
.tabulation1b { width:33%; text-indent: 0 ;display: inline-block; float: left; text-align: right ; clear: both;  }
.tabulation2b { width:65%; text-indent: 0 ;display: inline-block; float: right; }
.blok_en_ligne { display : inline-block ; margin-bottom: 1em ; }
.blok2_en_ligne { display : inline-block ; }
.marges2_bas { display:block ; margin-bottom: 1em ; margin-top:0 ; }

.bloc_im_individuelle_4 { position : absolute ; right : -2.3em ; top : 1.8em ; margin : 0 ; width : 14em ; height : 0.2em ; letter-spacing : 0.08em ; line-height : 1.1em ; font-size : 0.7em ; z-index : 2 ; /*background-color : #9ea ; */} 
.melange1 { color: #000; mix-blend-mode: normal  ; }
.melangetext1 {color: #000; mix-blend-mode: normal  ; }
.prec { position : relative ; display : inline-block ; text-align: left ; font-size : 2.5em ; top : 0.4em ; width : 1.2em ; height : 0.1em ; font-family : serif ; /*background-color : #9ea ; */} 
.retou2 { position : relative ; display : inline-block ; text-align: center ; font-size : 2.5em ; bottom : 0.4em ; width : 1.2em ; height : 0.1em ; font-family : serif ; /*background-color : #a9e ; */} 
.suiv { position : relative ; display : inline-block ; text-align: right ; font-size : 2.5em ; top : 0.4em ; width : 1.2em ; height : 0.1em ; font-family : serif ; /*background-color : #ea9 ; */} 

.afftext { display: none ; position : relative ; margin: 0 ; width : 1.5em ; height: 1.5em ; top : -1.9em ; right : 2.8em ; opacity: 0.5 ; z-index : 4 ; background-color : #aaa ; } 
.aff_text_sans_nav { display : block ; position : absolute ; top : 3.5em ; right : 4.8em ; margin : 0 ; color : #ccc ; font-size : 1em ; line-height : 1.2em ; height : 0.2em ; white-space : nowrap ; direction : rtl ; unicode-bidi : normal ; letter-spacing : 0.08em ; line-height : 1.3em ; text-align : right ; z-index : 5 ; } 

.titre_page { display : block ; position : absolute ; top : 0.9em ; right : -1.0em ; margin : 0 ; color : #ccc ; letter-spacing : 0.01em ; font-size : 1.4em ; line-height : 1.2em ; height : 0.2em ; white-space : nowrap ; direction: ltr ; unicode-bidi : normal ; /*background-color : #e7c ;*/ } 

/* _____The MIT License (MIT) Copyright (c) 2018 Kristijonas Gerdvilis__ https://github.com/krisger/MultilevelNavigationPlugin__ https://www.jqueryscript.net/menu/multi-level-expanding-navigation.html___*/
.navigation { display : inline-block ; position : absolute ; font-size : 1em ; right : 4.9em ; top : 3.8em ; margin : 0 ; width : 0px ; height : 2em ; letter-spacing : 0.08em ; line-height : 0.8em ; text-align : right ; z-index : 5 ; /*background-color : #ea7 ; */} 
.navigation li { list-style-type : none ; } 
.navigation li a { display : block ; } 
ul.navigation > li ul { display : none ; } 
ul.navigation li.active > a { width : 11em ; height : 3em ; right : 5em ; opacity: 0.0 ; } 

.grasref { font-weight: normal ; font-size : 1em ; color:#fff; /*background-color : #ea7 ; */}
.grasref a:link {color:#555; }
.grasref a:visited { color:#555; }
.grasref a:hover {color:#555; }
.grasref a:active { color:#555; }

.categorie { font-size : 0.9em ; font-weight: bold ; color: #000 ; } 
.titre2 { font-size : 0.9em ; font-weight: normal ; color: #ddd ; } 
.annee { font-size : 0.9em ; color: #000 ; } 
.description { font-size : 0.9em ; color: #000 ; } 
.dimensions { font-size : 0.9em ; color: #000 ; } 
.im_zoom { font-size : 0.65em ; color: #444 ; } 

#triangldmasq { width: 100%; height: 100% ; }
#trianglgmasq { width: 100%; height: 100% ; }
#trianglhmasq { width: 100%; height: 100% ; }
#triangldaff { width: 100%; height: 100% ; }
#trianglgaff { width: 100%; height: 100% ; }
#trianglhaff { width: 100%; height: 100% ; }


@supports (mix-blend-mode: exclusion) {.boutoni { mix-blend-mode: exclusion ; } .boutonti { color:#fff; mix-blend-mode: difference ; } .boutonth { color:#fff; mix-blend-mode: difference ; opacity: 0.7 ; } .boutontg { color:#fff; mix-blend-mode: difference ; opacity: 0.7 ; } 
.boutontd { color:#fff; mix-blend-mode: difference ; opacity: 0.7 ; } .di_h1 { color:#fff; mix-blend-mode: exclusion ; } .enveloppefleches { mix-blend-mode: difference ; } .legendPo2 { mix-blend-mode: difference ; } .divfixbas { color:#fff; mix-blend-mode: difference ; }
.melange1 { color: #fff; mix-blend-mode: exclusion ; } .melangetext1 { color: #fff; mix-blend-mode:difference ; } 
.categorie { color: #fff; mix-blend-mode:exclusion ; } 
.titre2 { color: #ddd; mix-blend-mode:exclusion ; } 
.annee { color: #fff; mix-blend-mode:exclusion ; } 
.description { color: #fff; mix-blend-mode:exclusion ; } 
.dimensions { color: #fff; mix-blend-mode:exclusion ; } 
.im_zoom { color: #aaa; mix-blend-mode:exclusion ; } 
}

#c5x5px { position: relative; right : 4px ; }
#d5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#e5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#f5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#g5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#h5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#i5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#j5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#k5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#l5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#m5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#n5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#o5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#p5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#q5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#r5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#s5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#t5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#u5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#v5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#w5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#x5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#y5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#z5x5px { border-radius: 3px; width: 100%; height: 100% ; }
#aa5x5px { border-radius: 3px; width: 100%; height: 100% ; }

.affHinfa { display : none ; z-index: 5 ; } 
.masqHinfa { display : block ; } 

@media only screen and (min-width: 500px) {
.bloc2vign { max-width: 500px ; height: auto ; }
.di1_listes { width: 80%; }
.di2_listes { width: 80%; }
.di3_listes { width: 80%; margin: 2rem 0 0 1.5rem ; }
.titre_cat_cv { width : 96% ; margin: 2.5em 2% 0 0 ; text-align: center ; }
.sous_bloc_cv { width: 90% ; padding-left: 3% ;margin : 0 1% 1em 4% ; }
.di4_listes { width: 80%; }
.di_h1 { width: 31% ; }
.padd1 { padding : 2em 0 2em 0 ; margin : auto ; }
.padd3 { padding: 0 ; }
.textdi { width : 340px ; height: 340px ; }
.textspa { width : 340px ; height: 340px ; }
.boutoni { width : 11em ; }
.boutonti { width : 10em ; }
.boutonj { width : 12.5em ; }
.boutontj { width : 11.9em ; }
.largeur1 { width: 70% ;}
.largeur2 { width: 85% ;}
.largeur3 { width: 100% ; }
.affVinfa { display: block ; } 
.colonnes0 { margin: 0 5em 0 2em ; }
.colonnes1 { margin: 0 2em 0 5em ; }
@supports (columns:2) {.colonnes2 { max-width: 1150px ; } 
.colonnesb2 { max-width: 1150px ; }
.colonnes3 { max-width: 1150px ; }
}}

@media only screen and (min-width: 750px) { 
.affV680infa { display : block ; } 
.masqV680infa { display : none ; }
.colonneA1 { width:45.1%; margin: 0% 2.2% 0.7em 2.2% ; }
.titrerubriqueG { width: 95.2%; margin: 0 2.4% 1.5em 2.4% ; }
.colonnesb2 { width: 95% ; margin: 0% 2.2% 0.7em 2.2% ; }
.di4_listes { text-align: left ; }
 }

@media only screen and (min-width: 837px) { @supports (columns:2) {.borbas1 { border-bottom: 2px solid #bbb ; } 
.borbas2 { border-bottom: 1px solid #999 ; } 
.di2_listes { margin: 2rem auto 0.5rem ; } .
di3_listes { width: 80%; margin: 2rem 0 0 1.5rem ; } }}

@media only screen and (min-width: 1277px) { .colonnes2 { width: 83% ; }}

@media only screen and (min-height: 610px) {
.affHinfa { display: inline ; } 
.masqHinfa { display: none ; } 
.divfixbas { left : 1em ; width: 45vw ; max-width: 42em ; margin : 0 ; }
.spanfixbas { text-align: center ; }
/*body,td,th { overflow : hidden ; }*/
}