html { height: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit;}
body { height: 100%; font-family: Arial, Helvetica, sans-serif; color: var(--coul_gris_noir_2) ; font-size:16px; line-height : var(--hauteurligne2) ; 
text-align : center ; margin: 0 12px; background-color: var(--coul_gris_fond) ; overflow-y :scroll ; hyphenate-character: '';}

video { display: block; margin: 0 auto 3em ; width: 100% ; max-width: 1280px ; /*background-color : #89a ;*/ }
@supports (aspect-ratio: 16 / 9 ) { video { aspect-ratio: 16 / 9 ; }}

:root { 
/*triangles*/ --tr_b: 1.7rem ; --tr_h: 1.1rem ; --coul_tr: rgba(255, 255, 255, 0.8) ; --btnht: 0.4em ; --btngdh: 2.9em ; --btngdt: 0.85em ; --btngdgd: -0.65em ; 
--coul_gris_1 : #888 ; --coul_gris_2 : #ccc ; --coul_gris_3 : #aaa ; --coul_gris_noir_1: #000 ; --coul_gris_noir_2: #333 ; --coul_gris_blanc: #eee ; --blanc: #fff ; 
--coul_gris_fond: #eee ; --coul_gris_fond_sombre: #333 ; --coul_fondvign_sombre: rgba(51, 51, 51, 0.85) ; --coul_fondvign_clair: rgba(220, 220, 220, 0.85) ; 
--coul_liens_mix: #950 ; --coul_liens : #930 ; --coul_liens_hover : #03c ; --coul_liens_hover_neg : #00c ; 
--t_police_0 : 0.7rem ; --t_police_1 : 0.85rem ; --t_police_2 : 0.95rem ; --t_police_3 : 1.02rem ; --t_police_4 : 1.04rem ; --t_police_5 : 1.3rem ; --t_police_6 : 1.4rem ; 
--hauteurligne0 : 0.78rem ; --hauteurligne1 : 0.95rem ; --hauteurligne2 : 1.3rem ; --hauteurligne3 : 1.5rem ; --largeur_maxi0 : 400px ; 
--largeur_maxi1 : 600px ; --largeur_maxi2 : 900px ; --largeur_maxi3 : 1100px ; --largeur_maxi4 : 1600px ; }

.fondgris333 { background-color: rgba(51, 51, 51, 0.5) ; color: #ccc ; text-align: center ; left:auto ; right	:auto ; bottom: 10px; }

.hautpage:hover .triangleh { border-bottom-color: var(--coul_liens_mix) ; transition: border-bottom-color 0.1s;}
.boutonh:hover .triangleh { border-bottom-color: var(--coul_liens_mix) ; transition: border-bottom-color 0.1s;}
.boutong:hover .triangleg { border-right-color : var(--coul_liens_mix) ; transition: border-right-color 0.1s;}
.boutond:hover .triangled { border-left-color : var(--coul_liens_mix) ; transition: border-left-color 0.1s;}

.hautpage:hover .bouthaupage { color: var(--coul_liens_mix) ; transition: color 0.1s; }
.boutonh:hover .boutonth { color: var(--coul_liens_mix) ; transition: color 0.1s; }
.boutong:hover .boutontg { color: var(--coul_liens_mix) ; transition: color 0.1s; }
.boutond:hover .boutontd { color: var(--coul_liens_mix) ; transition: color 0.1s; }

ul{ list-style-type: none; margin: 0; padding: 0; }
.di1_listes ul, ol{ margin-left: 20px; /*background-color : #89a ; */}
.di1_listes li { list-style-type: square; }

ol { counter-reset: list;}
ol > li { list-style: none; position:relative ;}
ol > li:before { counter-increment: list; content: " (" counter(list, decimal) ") "; position:absolute ; left: -1.4rem ; }

.tiretliste { display:list-item ; }
.tiretliste::marker { content: '- ';}
ul .listesannees { list-style-type: none ; }
img { border: 0; max-width:100% ; }
a {color: var(--coul_liens) ; text-decoration: none; } 
a:hover{ color: var(--coul_liens_hover) ; transition: color 0.15s; text-decoration: none; }

.affVinfa { display : none ; } 
.affV680infa { display : none ; } 
.affV680infb { display : none ; } 
.masqV680infa { display : block ; } 

.divfixbas333 { position:fixed ; font-size : var(--t_police_2) ; 
padding: 0.2rem 0.5rem ; left: 50%; transform: translate(-50%, 0); text-align: center ; max-width: var(--largeur_maxi2) ; 
bottom: 10px; height: auto ; border-radius: 3px ; line-height : var(--hauteurligne2) ; z-index: 2 ; 
color:var(--coul_gris_noir_2) ; mix-blend-mode: normal ; }
@supports (mix-blend-mode:exclusion) {.divfixbas333 { color: var(--blanc) ; mix-blend-mode: exclusion ; }}

.conteneurdi_h1 { position: relative ; display: inline-block ; width:98% ; max-width: var(--largeur_maxi4) ; margin: 0 auto ; padding:0; z-index: 3 ;/*background-color:#9da ;*/ }
.di_h1 { position: relative ; width: 70% ; display : flex ; flex-wrap: wrap; justify-content: center ; align-self: center ; gap: 0 30px; margin: 15px auto ; color: var(--coul_gris_noir_2) ;font-size: var(--t_police_6) ; text-align:center ; text-transform: uppercase; letter-spacing : -0.01em ; z-index:2; /*background-color : #9add ;*/ }
a:hover .di_h1 { color: var(--coul_liens_hover) ; transition: color 0.15s; text-decoration: none; }

.di_h2 { position: relative ; display: inline-block ; margin: 1rem auto 0 ; width: auto ; padding: 0.1rem 0.5rem ; border-radius: 3px ; color: var(--coul_gris_noir_2) ;font-size: var(--t_police_4) ; text-align:center ; text-transform: uppercase; letter-spacing : -0.01em ; mix-blend-mode: normal ; z-index:3; /*background-color : #9acb ; */}
@supports (mix-blend-mode:exclusion) {.di_h2 { color: var(--blanc) ; mix-blend-mode: exclusion ; }}
.di_h2:hover { color : var(--coul_liens_mix) ; transition: border-right-color 0.1s;}

.di_h3 { position: relative ; display : block ; margin: 40px auto 15px ; width: 95% ; height : auto ; color: var(--coul_gris_noir_2) ;font-size: var(--t_police_4) ; text-align:center ; text-transform: uppercase; letter-spacing : -0.01em ; mix-blend-mode: normal ; z-index:2; /*background-color : #eeed ;*/ }

.di_h4 { position: relative ; display: inline-block ; top: 0.8rem ; margin: 1rem auto 0 ; width: 55% ; padding: 0.1rem 0.5rem ; border-radius: 3px ; 
font-size: var(--t_police_4) ; text-align:center ; text-transform: uppercase; letter-spacing : -0.01em ; z-index:3; 
color: var(--coul_gris_noir_2) ; background-color : var(--coul_fondvign_clair) ; }
@supports (position: sticky) {.di_h4 { position: sticky; }}

.padd3 { padding-right: 16% ; /*background-color : #a9e4 ;*/ }
.padd4 { display:inline-block ; max-width:105px ; min-width:105px ; visibility: visible; z-index:3; /*background-color : #89a ;*/ }

.conteneur0 { position: relative ; display: inline-block ; width:98% ; max-width: var(--largeur_maxi4) ; margin: 0 auto 40px ; padding:0; /*background-color:#9ad ;*/ }
.conteneur1 { position: relative ; display: block ; height:auto; width:100% ; margin: 0 auto ; /*background-color : #bde ;*/ }
.conteneur2 { position: relative ; display: flex ; flex-wrap: wrap ; justify-content: center ; align-content: start ; gap: 25px; width:100% ; margin: 50px auto 0 ; /*background-color : #ebd ;*/ }
.conteneur2 > .blocvign { margin: 0; align-self: center ;}
.conteneur2 > .textdiB { margin: 0; align-self: center ;}

.conteneur3 { max-width: var(--largeur_maxi4) ; margin:auto ; /*background-color:#3CF ;*/ }
.di1_listes { width:99% ; height:auto ; margin: 30px auto 20px ; padding: 0 ;font-size: var(--t_police_4) ; text-align : left ; /*background-color : #db9 ;*/ }

.di1_listes li::marker { content: '- ';}
.di1_listes .listesannees::marker { content: ''; }
.listesannees { margin: 1rem 0 0.5rem ; font-size: var(--t_police_4) ; padding-left:0; padding-right:0.5rem; text-align : left ; list-style-type: none ; /*background-color : #daeb ;*/ }
.listestitres { display: list-item ; font-size: var(--t_police_3) ; list-style-position: outside; text-align : left ; margin-top:0.5rem; margin-left:0rem; /*background-color : #eda7 ;*/ }
.listessoustitres { display: block ; font-size: var(--t_police_2) ; left:2em; /*background-color : #bde8 ;*/ }
.listesweb { display: block ; font-size: var(--t_police_1) ; word-wrap: break-word ; /*background-color : #9ec8 ;*/ }




.di2_listes { position: relative ; display: block ; width:100% ; max-width:600px ; margin : 50px auto 0 ; top:0 ; padding: 20px 0px 0px 0px ; font-size: var(--t_police_2) ; /*background-color : #baa8 ;*/ }

.blocvign { position: relative ; display: block ; align-self: center ; width: 100% ; margin: 0 auto 25px ; /*background-color : #ea9 ;*/ }
.blocvig3 { position: relative ; display: block ; width: 100% ; margin: 15px auto 25px ; /*background-color : #ea9 ;*/ }
.di1_listes .blocvig3 { text-align : center ; }
.blocvig2 { display: block ; height:auto ; width: 100% ; padding: 0.5rem ; margin-left: auto; margin-right: auto; margin-bottom: 25px; /*background-color : #afa ;*/ }
.blocvi2containerflex { display:flex ; flex-direction: column ; justify-content: space-between ; gap: 0; width: 100% ; /*background-color:#db5757 ;*/ }
.blocvi2containerflex .blocvign { margin-bottom: 10px ; }

.titre2 { font-size : var(--t_police_4) ; color: var(--coul_gris_noir_2) ; /*background-color : #89a ;*/ } 
.annee { font-size : var(--t_police_3) ; color: var(--coul_gris_noir_2) ; /*background-color : #9ab ;*/ } 
/*.tiretliste { font-size : var(--t_police_3) ; color: var(--coul_gris_noir_2) ; background-color : #765 ; } */
.reference { font-size : var(--t_police_3) ; color: var(--coul_gris_noir_2) ; /*background-color : #456 ;*/ }

.titre2_kr { position: relative ; float:left ; font-size : var(--t_police_6) ; height: auto ; color: var(--coul_gris_noir_2) ; line-height : var(--hauteurligne3) ; /*background-color : #dad ;*/ } 
.annee_kr { clear:both ; float: left ; font-size : var(--t_police_3) ; width: 37% ; height: auto ; color: var(--coul_gris_noir_2) ; line-height : var(--hauteurligne3) ; /*background-color : #dea ;*/ } 
.reference_kr { float: left ; font-size : var(--t_police_3) ; width: 50% ; margin: 0 0 0 5% ; height: auto ; color: var(--coul_gris_noir_2) ; line-height : var(--hauteurligne3) ; text-align: left ; /*background-color : #ebd ;*/ }
.dimensions_kr { clear:both ; float: left ; font-size : var(--t_police_3) ; width: 37% ; height: auto ; margin: 0 0 0 0 ; color: var(--coul_gris_noir_2) ; line-height : var(--hauteurligne3) ; text-align: left ; /*background-color : #7bf ;*/ } 
.description_kr { float: left ; font-size : var(--t_police_3) ; height: auto ; width: 40% ; margin: 0 0 0 5% ; color: var(--coul_gris_noir_2) ; line-height : var(--hauteurligne3) ; text-align: left ; /*background-color : #8ec ;*/ } 
.collections_kr { clear:both ; float: left ; font-size : var(--t_police_3) ; height: auto ; color: var(--coul_gris_noir_2) ; line-height : var(--hauteurligne3) ; /*background-color : #8cb ;*/ } 
.inscriptions_kr { clear:both ; float: left ; font-size : var(--t_police_3) ; height: auto ; margin: 0 ; color: var(--coul_gris_noir_2) ; line-height : var(--hauteurligne3) ; /*background-color : #8bc ;*/ } 
.expo_biblio_kr { clear:both ; float: left ; margin-top: 1em ; font-size : var(--t_police_3) ; width: 100% ; height: auto ; color: var(--coul_gris_noir_2) ; /*background-color : #bcf ;*/ } 
.annee_kr_liste { clear:both ; float: left ; margin-top: 0.2em ; font-size : var(--t_police_3) ; width: 15% ; height: auto ; color: var(--coul_gris_noir_2) ; /*background-color : #dae ;*/ } 
.expo_kr_liste { float: right ; margin : 0.2em 0 0 ; font-size : var(--t_police_3) ; width: 81% ; height: auto ; color: var(--coul_gris_noir_2) ; /*background-color : #ade ;*/ } 
.tiret_liste_kr { clear: right ; float: left ; margin : 0.1em 0 0 2% ; font-size : var(--t_police_3) ; width: 2% ; height: auto ; color: var(--coul_gris_noir_2) ; /*background-color : #cab ;*/ } 

.legendPo2 { position:relative ; display: block ; margin: 0.3rem auto 0; left:0 ; width:95% ; font-size: var(--t_police_3) ; color: var(--coul_gris_noir_2) ; /*background-color : #8ec ;*/ }


.bloc_bouthpage { position: fixed ; width:95.5% ; max-width: var(--largeur_maxi4) ; bottom: 0 ; left: 50%; transform: translateX(-50%); font-size: var(--t_police_1) ; letter-spacing : 0.0rem ; line-height : var(--hauteurligne1) ; font-weight: lighter; mix-blend-mode: exclusion ; z-index: 3 ; /*background-color : #d8c8 ;*/ }
.bloc_bouthgdf { position: fixed ; width:95.5% ; max-width: var(--largeur_maxi4) ; top: 0 ; left: 50%; transform: translateX(-50%); font-size: var(--t_police_1) ; letter-spacing : 0.0rem ; line-height : var(--hauteurligne1) ; font-weight: lighter; mix-blend-mode: exclusion ; z-index: 3 ; /*background-color : #d8c8 ;*/ }
.bloc_bouthgds { position: fixed ; top: 0 ; left : 1rem ; right: 0 ; font-size: var(--t_police_1) ; letter-spacing : 0.0rem ; line-height : var(--hauteurligne1) ; font-weight: lighter; mix-blend-mode: exclusion ; z-index: 3 ; /*background-color : #aeb5 ;*/ }
@supports (position: sticky) {.bloc_bouthgds { position: sticky; }}

.hautpage { position: absolute ; display : flex ;justify-content: flex-start ; align-items: center ; bottom: var(--btnht) ; right : 0 ; border : 0 ; height : 1.9em ; margin: 0 ; /*background-color : #d75b ; */}


.boutonh { position: absolute ; display : flex ;justify-content: flex-start ; align-items: center ; top: var(--btnht) ; right : 18% ; border : 0 ; 
padding-right : 0.8rem ; border-radius: 3px ; 

height : 2.1em ; margin: 0 ; /*background-color : #d75b ;*/ }
.boutong { position: absolute ; display : flex ;justify-content: flex-start ; align-items: center ; top: var(--btngdt) ; left : var(--btngdgd) ; border : 0 ; 
padding-left : 0.8rem ; padding-right : 0.4rem ; border-radius: 3px ; 
height : 2.1em ; margin: 0 ; /*background-color : #d75b ;*/ }
.boutond { position: absolute ; display : flex ;justify-content: flex-end ; align-items: center ; top: var(--btngdt) ; right : var(--btngdgd) ; border : 0 ; 
padding-left : 0.4rem ; padding-right : 0.8rem ; border-radius: 3px ; 
height : 2.1em ; margin: 0 ; /*background-color : #d75b ;*/ }

.bouthaupage { width : 9em ; overflow-wrap: anywhere; color: var(--coul_tr) ; /*background-color : rgba(255, 222, 222, 0.2) ; */}
.boutonth { width : 5em ; overflow-wrap: anywhere; color: var(--coul_tr) ; /*background-color : rgba(255, 222, 222, 0.05) ;*/ }
.boutontg { width: 13.2em ; margin-left : 0.3em ; overflow-wrap: anywhere; color: var(--coul_tr) ; line-height : var(--hauteurligne0) ; letter-spacing: -0.05rem ; /*background-color : rgba(255, 222, 222, 0.05) ;*/ }
.boutontd { width: 13.2em ; margin-right: 0.3em ; overflow-wrap: anywhere; color: var(--coul_tr) ; line-height : var(--hauteurligne0) ; letter-spacing: -0.05rem ; /*background-color : rgba(255, 222, 222, 0.05) ;*/ }

.triangleh { width : 1.2em ; height: 1.2em ; top: auto ; border-right: var(--tr_h) solid transparent ; border-bottom: var(--tr_b) solid var(--coul_tr) ; border-left : var(--tr_h) solid transparent ; }
.triangleg { width : 1.2em ; height: 1.2em ; top: auto ; border-top : var(--tr_h) solid transparent ; border-right : var(--tr_b) solid var(--coul_tr) ; border-bottom: var(--tr_h) solid transparent ; }
.triangled { width : 1.2em ; height: 1.2em ; top: auto ; border-top : var(--tr_h) solid transparent ; border-bottom: var(--tr_h) solid transparent ; border-left : var(--tr_b) solid var(--coul_tr) ; }

/*bloc carré textes A*/
.fondvigntext { position: absolute ; display: block; left:0; top:0; width: 100% ; height: 100%; }
.fondvigntext:hover .textspaB { color: var(--coul_liens_hover) ; opacity: 0.6 ; transition: color 0.2s; }
.liste_vign { margin: 0 auto ; width: 96% ;/*background-color : #cdd ;*/ }
.textdiB { position:relative ; display: inline-block ; margin-left: auto; margin-right: auto; width:95% ; max-width:340px ; /*background-color : #76a5 ;*/ }
.textdiB::before { content:""; display: block; padding-bottom: 100% ; }
.textspaB { position: absolute ; top: 0 ; right: 0 ; bottom: 0 ; left: 0 ; width : 100% ; height: 100% ; padding:0px ; letter-spacing : -0.03rem ; font-weight: lighter; 
color : var(--coul_gris_noir_1) ; text-align: justify ; overflow: hidden ; hyphens: auto ; /*background-color : #a5d4 ;*/ }

.di2_images { display: block ; position: relative ; width : 90% ; max-width: var(--largeur_maxi1) ; margin: 2em auto 0.5em ; text-align: center ; }
.di3_listes { display: inline-block ; position: relative ; top : 2em ; width : 90% ; max-width: var(--largeur_maxi1) ; margin: 0 auto 90px ; padding: 0.0rem ; color:var(--coul_gris_noir_2); font-weight: lighter ; letter-spacing : 0.02em ; text-align: left ; /*background-color : #da5 ;*/ }

.di4_listes { position: relative ; display: block ; width : 94% ; margin: 30px auto 0 ; /*background-color : #da5 ;*/}
.di4_titr { position: relative ; display: block ; width : 100% ; margin: 0 auto 0.5em ; text-align: center ; font-size: var(--t_police_5) ; /*background-color : #89a ;*/ }
.di4_text { position: relative ; display: block ; width : 100% ; margin: 0 auto ; text-align: left ; font-size: var(--t_police_4) ; /*background-color : #9b9 ;*/ }

.di6_listes { display: flex ; flex-wrap: nowrap ; justify-content: flex-start ; gap: 15px ; width : 100% ; height: auto ; font-size: var(--t_police_4) ; line-height: 0.95rem ; margin: 0.6rem auto 0 ; /*background-color : #cea ;*/ }
.elemenfl_1_0_220 { flex : 1 0 220px ;align-self: center ; /*background-color : #9ca ;*/ }


.di5_listes { display: flex ; flex-wrap: wrap ; gap: 10px 30px; width : 94% ; margin: 0 auto 0 ; /*background-color : #87e ;*/ }
.elemenfl2_1_0_240 { flex : 0 1 300px ; align-self: center ; margin: 0 auto 10px ; /*background-color : #c9a ;*/ }
.elemenfl_1_0_600 { flex : 1 1 600px ; max-width: 100% ; align-self: center ; text-align:left ; font-size: var(--t_police_4) ; /*background-color : #db9 ;*/ }
.elemenfl2_1_0_240 img { max-height: 300px ; }


.elemenfl2_1_0_280 { position: relative ; flex : 1 0 280px ; margin: 0.1rem 0 0.5rem ; max-width: 100% ; align-self: stretch ; text-align:left ; font-size: var(--t_police_4) ; /*background-color : #bec ;*/}

#pano_container{ position: fixed ; left:0; top:0; margin: 0 ; height : 100% ; width : 100% ; border : 0 ; z-index: 2; }

.boutonvideo { position: absolute ; display: flex ; justify-content: center ; align-self: center ; border-radius: 50% ; top: auto ; left: auto ; width: 30% ; margin: 0 ; max-width : 95% ; background-color : rgba(0, 0, 0, 0.7) ; }
.boutonvideo::before { content:""; display: block; padding-bottom: 100% ; }
.vignboutonvideo:hover .boutonvideo .trianglevideo:after { border-left-color : var(--coul_liens_hover) ; opacity: 0.7 ; transition: border-left-color 0.1s; }
.trianglevideo { margin-left : 13% ; align-self: center ; width: 0; height: 0; padding-top: 30%; padding-bottom: 30%; padding-left: 52%; overflow: hidden; }
.trianglevideo:after { content: ""; display: block; width: 0; height: 0; margin-top:-500px; margin-left: -866px; border-top: 500px solid transparent; border-bottom: 500px solid transparent; border-left: 866px solid rgba(255, 255, 255, 0.7) ; }
.vignboutonvideo { display: flex ; justify-content: center ; border: 0; margin-bottom : 0.5rem ; max-width : 100% ; cursor: pointer; }

.boutonvideo_neg { position: absolute ; display: flex ; justify-content: center ; align-self: center ; border-radius: 50% ; top: auto ; left: auto ; width: 30% ; margin: 0 ; max-width : 95% ; background-color : rgba(255, 255, 255, 0.7) ; }
.boutonvideo_neg::before { content:""; display: block; padding-bottom: 100% ; }
.vignboutonvideo:hover .boutonvideo_neg .trianglevideo_neg:after { border-left-color : var(--coul_liens_hover_neg) ; opacity: 0.7 ; transition: border-left-color 0.1s; }
.trianglevideo_neg { margin-left : 13% ; align-self: center ; width: 0; height: 0; padding-top: 30%; padding-bottom: 30%; padding-left: 52%; overflow: hidden; }
.trianglevideo_neg:after { content: ""; display: block; width: 0; height: 0; margin-top:-500px; margin-left: -866px; border-top: 500px solid transparent; border-bottom: 500px solid transparent; border-left: 866px solid rgba(0, 0, 0, 0.7) ; }
.vignboutonvideo { display: flex ; justify-content: center ; border: 0; margin-bottom : 0.5rem ; max-width : 100% ; cursor: pointer; }

.vignet { margin: 0 ; max-width : 95% ; }

.droite {text-align: right; }
.centre {text-align: center; }
.arrondi { border-radius: 1.9em ; }
.ancre { position: relative; top: -50px ; /*background-color : #7ca ;*/ }
.gauchedroite {text-align: left; }
.gras { font-weight: bold ; }
.maigre { font-weight: lighter ; }
.gauche { text-align: left ; }
.souligne { text-decoration: underline; } 
.larghautmax200 { max-width: 300px ; max-height: 300px ; }
.largmax0 {max-width: var(--largeur_maxi0) ; }
.largmax80p {max-width: 70% ; }
.largmax1 {max-width: var(--largeur_maxi1) ; margin:auto ; }
.largeur100p { width:100% ;}
.largeur73p { width:100% ;}
.largeur25p { width:25% ; top:0 ; bottom:0 ;}
.bas0 { bottom:0 ; right:0;}
.pad10 { padding: 0 10px ; }
.margebas1l { margin-bottom: 1rem; }
.margebas2l { margin-bottom: 1.5rem; }
.margebas { margin-bottom: 90px ; }
.margehaut0 { margin-top: 15px; }
.margehaut1 { margin-top: 15px; }
.margehaut2 { margin-top: 60px; }
.margehaut3 { margin-top: 90px; }
.italique { font-style:italic; }
.indentation1 { text-indent: 2.5rem ; }
.coul_car_gris { color: var(--coul_gris_2) ;  }
.caracteres0 { font-size: var(--t_police_0) ; }
.caracteres1 { font-size: var(--t_police_1) ; }
.caracteres2 { font-size: var(--t_police_2) ; }
.caracteres3 { font-size: var(--t_police_3) ; }
.caracteres4 { font-size: var(--t_police_4) ; }
.caracteres5 { font-size: var(--t_police_5) ; }
.caracteres6 { font-size: var(--t_police_6) ; }
.hligne0 { line-height: var(--hauteurligne0) ; }
.hligne1 { line-height: var(--hauteurligne1) ; }
.hligne2 { line-height: var(--hauteurligne2) ; }
.hligne3 { line-height: var(--hauteurligne3) ; }
.caracteres6 { font-size: var(--t_police_6) ; }
.majuscule { text-transform: uppercase; letter-spacing : -0.01em ; z-index:2; }
.affblok { position:absolute ; display: block; }
.affblokrelative { position: relative ; display: block; }
.affblokenligne { position: relative ; display: inline-block ; }
.affflex { display: flex ; flex-wrap: wrap ; gap: 10px 40px; width : 94% ; margin: 0 auto 0 ; /*background-color : #7ac ;*/ }
.couleurfondzzz { background-color : #7ac ; }
.affflexnowr { flex-wrap: nowrap ; }
.couleurliensneutres a{color: var(--coul_gris_noir_2) ; } 
.couleurliensneutres a:hover{ color: var(--coul_liens_hover) ; transition: color 0.15s; text-decoration: none; }
p { /*background-color : #7ca ; */}
.indentation0 { text-indent: 0 ; }


/* custom menu */
nav { position: relative ; max-width: var(--largeur_maxi4) ; left: auto ; right: auto ; margin: 0 auto 5px ; font-size : var(--t_police_4) ; background-color : var(--coul_gris_fond) ; z-index:4 ; }

nav:after{ content: ""; clear: both; display: block;}
nav a{ display: block; text-decoration: none; white-space: nowrap;}

nav ul ul{ background-color: rgba(200, 200, 200, 0.7) ; display: list-item; position: relative; min-width: 100%;}
@supports (display: grid) { nav ul ul{ display: none ; position: absolute ; }}

nav>ul{ display: grid; grid-template-rows: repeat(6, 1fr) ; }





nav>ul>li{ position: relative; margin: 1px; }
nav ul ul li+li{ border-top: 1px solid var(--coul_gris_fond);}
nav ul li a{ background-color: var(--coul_gris_fond) ; padding: 10px 20px; color: var(--coul_gris_noir_2); text-align: center;}
nav>ul>li>a{ background-color: rgba(255, 255, 255, 0.5) ; color: var(--coul_gris_noir_2) ; border-radius: 5px ; } 
nav ul ul a{ background-color: rgba(200, 200, 200, 0.7) ; color: var(--coul_gris_noir_1) ; }
.fleche { display: inline-block; width: 0; height: 0; margin: 0 0 2px 20px; vertical-align: middle; border-top: 12px solid var(--coul_gris_1) ; border-right: 8px solid transparent; border-left: 8px solid transparent;}
.sousmenudessus{ z-index:5; }

nav > ul > li .actif { background-color: var(--coul_gris_blanc) ; color: var(--coul_liens) ; }
nav > ul > li > ul > li .actif { background-color: var(--coul_gris_2) ; color: var(--coul_liens) ; }
.actif .fleche { border-top-color : var(--coul_gris_noir_2) ; }

nav>ul>li{ display: inline-block; }
nav>ul>li a{ display: block; }
nav>ul>li li .dropdown{ display: none; }
nav>ul>li:hover .dropdown{ display: block;	/* Display the dropdown */ }
/*ul li:hover > ul,
ul li ul:hover { display: block;}*/

/*https://frontendresource.com/css-dropdown-menus/*/
/*https://codepen.io/andornagy/pen/ALbdbJ*/
/*body { word-wrap:break-word !important;}*/
nav ul { padding: 0; margin: 0; list-style: none; position: relative; }
/*nav ul li { display:inline-block; }*/
/* Hide Dropdowns by Default */
nav ul ul { display: none; position: absolute; /*top: 60px; *//* nécessaire pour ios 9, the height of the main nav */}

/* Display Dropdowns on Hover */
/*nav ul li:hover > ul { display:inherit;}*/ /* nécessaire pour ios 9, hover ne fonctionne q'au premier click*/
@supports not (display: grid) { nav ul li:hover > ul { display:inherit;} }


/* Fisrt Tier Dropdown */
nav ul ul li { float:none; display:list-item; position: relative;}
/* Second, Third and more Tiers */
nav ul ul ul li { position: relative; }
/* Change this in order to change the Dropdown symbol */
/*li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }*/

@media only screen and (min-width: 550px) { 
nav>ul{ display: grid; grid-template-rows: none; grid-template-areas: "a a" "b b" "c c" ; }
.di1_listes { width:90% ; }
.affV680infb { display : block ; } 
.largmax1 { margin:auto ; }
}

@media only screen and (min-width: 900px) and (min-height: 610px){ 
:root { /*triangles*/ --tr_b: 1.3rem ; --tr_h: 0.8rem ; }
.di_h1 { display: table-cell ; vertical-align:middle; width:90% ; max-width: var(--largeur_maxi4) ; height: 70px ; padding : 0.5rem 0 0 1.5rem ; text-align : left ; line-height: var(--hauteurligne3) ; }

.conteneur1 { display: flex ;justify-content: start ; gap: 25px 25px; width:90% ; max-width: var(--largeur_maxi4) ; }
.textdiB { position:relative ; width : 100% ;height: 340px ; margin : 0 ; }

.conteneur2 { max-width: var(--largeur_maxi4) ; }

.di1_listes { margin: 60px auto 20px ; }
.di2_listes > .blocvign .textdiB { max-width: 280px ; max-height: 280px ; }
.di2_listes { display: flex ; flex-direction: column ; justify-content: space-between ; width:38% ; max-height: 100% ; margin : 60px auto 20px ; top:0 ; padding: 5rem 0px 0px 0px ; font-size: var(--t_police_2) ; }
.padd3 { padding: 0 ; }
.blocvign { display: block ; margin: 0 0 25px 0 ; }
.blocvig3 { display: block ; max-width: 500px ; }
.blocvig2 { display: block ; width: 100% ; margin: 0 auto 25px; }
.blocvi2containerflex { width: 100% ; flex-wrap: wrap; flex-direction: row ; justify-content: center ; gap: 10px; }
.legendPo2 { max-width:95% ; }

.blocvi2containerflex .blocvign { flex: 0 0 48% ; }
.debut { align-self: flex-start ; }
.fin { align-self: flex-end ; }
.di1_listes { order: 2; width:52% ; margin-left:0 ;}

.affV680infa { display : inline ; } 
.masqV680infa { display : none ; }
.affHinfa { display: inline ; } 
.masqHinfa { display: none ; } 
.affVinfa { display: block ; } 
.largeur73p { width:73% ;}

nav>ul{ display: grid; grid-template-rows: none; grid-template-areas: "a a a" "b b b" ; }

.divfixbas1 { position: fixed ; font-size : var(--t_police_1) ; left : 25px ; bottom: 15px; width: 44% ; margin : 0 0 0 1em ; height: auto ; color:var(--coul_gris_1) ; text-align: left ; line-height : var(--hauteurligne1) ; /*background-color : #abc ; */}

.divfixbas2 { position:fixed ; font-size : var(--t_police_2) ; padding: 0.2rem 0.5rem ; 
left: 50%; transform: translate(-50%, 0); max-width: var(--largeur_maxi2) ; 
bottom: 10px; height: auto ; border-radius: 3px ; text-align: center ; line-height : var(--hauteurligne2) ; z-index: 2 ; 
color: var(--coul_gris_noir_2) ; background-color : var(--coul_fondvign_clair) ; }

.di_h4 { width: 40% ; }

.di3_listes { float:right ; right : 1em ; width : 42% ; min-height: 100% ;max-width: var(--largeur_maxi2) ; top: 3em ; margin: 0 2% 10% 0 ; }
.di4_listes { width : 82% ; max-width: var(--largeur_maxi2) ; }

.di5_listes { width : 82% ; max-width: var(--largeur_maxi3) ; margin: 0 ; /*background-color : #abc ;*/ }

.di2_list_dessus { position:absolute ; right : 0px ; top:0px ; width : 15% ; height: calc(120% + 400px) ; padding-bottom:40% ; margin: 0 ; z-index: 2 ; /*background-color : rgba(0, 0, 0, 0.025) ; */}
.affHinfa { display: inline ; } 
.masqHinfa { display: none ; } 
.boutonh { right : 23.7% ; }


@supports (columns:2) {.colonnes2 { max-width: var(--largeur_maxi3) ; } 
.gauchedroite {text-align: right; }
}

@media only screen and (min-width: 1250px) { 
nav>ul{ display: grid; grid-template-rows: none; grid-template-columns: repeat(6, 1fr) ; }
.margehaut1 { margin-top: 0 ; }
.margehaut0 { margin-top: 0 ; }
.padd4 { display:inline-block ; max-width: 0 ; min-width: 0 ; visibility: visible; z-index:3; /*background-color : #89a ;*/ }
}