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

h1 { margin:0 ; font-size: var(--t_police_6) ; line-height : var(--hauteurligne1) ; }

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(80, 80, 80, 1) ; --btnht: 0.4em ; --btngdt: 0.85em ; --btngdgd: -0.65em ; 
--coul_gris_1 : #555 ; --coul_gris_2 : #ccc ; --coul_gris_3 : #ddd ; --coul_gris_noir_1: #000 ; --coul_gris_noir_2: #333 ; --coul_gris_blanc: #eee ; --coul_blocv : #f0f0f0 ; --coul_bloctransparent : transparent ; --blanc: #fff ; --coul_gris_fond: #ccc ; 
--coul_fondvign_sombre: rgba(51, 51, 51, 0.85) ; --coul_fondvign_clair: rgba(225, 225, 225, 0.7) ; --coul_liens_mix: #fb8c51 ; --coul_liens : #930 ; --coul_liens_hover : #384f94 ; --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 : 1400px ; --largeur_maxi4 : 2000px ; }

.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_hover) ; transition: border-bottom-color 0.1s;}
.boutonh:hover .triangleh { border-bottom-color: var(--coul_liens_hover) ; transition: border-bottom-color 0.1s;}
.boutong:hover .triangleg { border-right-color : var(--coul_liens_hover) ; transition: border-right-color 0.1s;}
.boutond:hover .triangled { border-left-color : var(--coul_liens_hover) ; transition: border-left-color 0.1s;}

.hautpage:hover .bouthaupage { color: var(--coul_liens_hover) ; transition: color 0.1s; }
.boutonh:hover .boutonth { color: var(--coul_liens_hover) ; transition: color 0.1s; }
.boutong:hover .boutontg { color: var(--coul_liens_hover) ; transition: color 0.1s; }
.boutond:hover .boutontd { color: var(--coul_liens_hover) ; 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); 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) ; mix-blend-mode: normal ; }
@supports (mix-blend-mode:exclusion) {.divfixbas333 { color: var(--blanc) ; mix-blend-mode: exclusion ; }}

figure {  width: fit-content ; margin: auto ; /*background-color:#9da ;*/ }
figcaption { margin: 0 auto 8px ; font-size: 0.8rem ; line-height: 0.8rem ; color:#444 ;  width: 94% ;  text-align: left ; /*background-color:#abe ;*/ }

.conteneurdi_h1 { position: relative ; display: inline-grid ; height: 100% ; place-items : center ;  color: var(--coul_gris_noir_2) ; mix-blend-mode: normal ; z-index: 3 ; /*background-color: MediumOrchid ;*/ }
@supports (mix-blend-mode:exclusion) {.conteneurdi_h1 { color: var(--blanc) ; mix-blend-mode: exclusion ; }}


.di_h1 { color: var(--coul_gris_noir_2) ; font-size: var(--t_police_6) ; letter-spacing : -0.01em ; /*background-color : MediumAquaMarine ;*/ }
@supports (mix-blend-mode:exclusion) {.di_h1 { color: var(--blanc) ; mix-blend-mode: exclusion ; }}
a:hover .di_h1 { color: var(--coul_liens_mix) ; transition: color 0.15s; text-decoration: none; }


.di_h2 { position: relative ; display: inline-block ; margin: 10px 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 : var(--coul_gris_fond) ; }
@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: sticky ; display: inline-block ; top: 0.9rem ; margin: 1rem auto 0 ; width: 55% ; padding: 0.1rem 0.5rem ; border-radius: 3px ; 
font-size: var(--t_police_4) ; text-align:center ; letter-spacing : -0.01em ; z-index:3; 
color: var(--coul_gris_noir_2) ; transition: background-color .5s; }
.di_h4.scrolled { background-color: rgba(255, 255, 255, 0.95) ; border: 1px solid #ccc ; }
@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: 100% ; max-width: var(--largeur_maxi3) ; margin: 0 auto 40px ; padding:0; /*background-color: MediumOrchid ;*/ }
.conteneur1 { position: relative ; display: block ; height:auto; width: 100% ; margin: 0 auto ; /*background-color : MediumPurple ;*/ }
.conteneur2 { position: relative ; display: flex ; flex-wrap: wrap ; justify-content: center ; align-content: start ; gap: 25px; width:100% ; margin: 20px auto 0 ; padding: 20px 0px 0px 0px ; border-radius: 5px ; /*background-color : MediumSeaGreen ;*/ }
.conteneur2 > .blocvign { margin: 0; align-self: center ;}
.conteneur2 > .blocvindex { 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% ; margin : 30px auto 0 ; top:0 ; padding: 20px 0px 0px 0px ; font-size: var(--t_police_2) ; /*background-color : MediumSlateBlue ;*/ }

.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 ; }
.blocvindex { display: block ; width: 100% ; vertical-align: middle; margin: 15px auto ; padding : 10px 0 5px ; border-radius: 8px ; background-color : var(--coul_blocv) ; }
.blocvig2 { display: inline-block ; height:auto ; width: auto ; vertical-align: middle; padding: 0rem ; margin: 15px auto ; padding : 10px 0 0 ; border : 0px solid #bbb; border-radius: 8px ; background-color : var(--coul_blocv) ; }
.blocvi2containerflex {  display: block ; margin: 0 4px ; /*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_1) ; color: var(--coul_gris_1) ; /*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.2rem auto 0.4rem; left:0 ; width:95% ; font-size: var(--t_police_3) ; /*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: 6 ; /*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: 6 ; /*background-color : #d8c8 ;*/ }
.bloc_bouthgds { position: fixed ; width: 100% ; max-width: var(--largeur_maxi4) ; 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: 6 ; /*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: 11.5em ; 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: 11.5em ; 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: 10px auto ; /*background-color : DarkOrange ;*/}
.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 : HotPink ;*/ }

.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.2em ; }
.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 ; }
.padhaut0 { padding-top: 15px; }
.margehaut1 { margin-top: 15px; }
.margehaut2 { margin-top: 60px; }
.margehaut3 { margin-top: 90px; }
.italique { font-style:italic; }
.indentation1 { text-indent: 2.5rem ; }
.coul_fond_222 { background-color : #262626 ; }
.coul_fond_444 { background-color : #444 ; }
.coul_caracteres_0 { color: DarkViolet ; }
.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 ;*/ }
.affflexnowr { flex-wrap: nowrap ;  }
.fixe_pos  { position:fixed ; }
.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 */

.blochaut { margin : 9px auto 0 ; max-width: var(--largeur_maxi3) ; display: grid ; grid-template: minmax(20px, 40px) 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; gap: 9px 5px ; justify-items: center; align-items: center; justify-content: center; /*background-color : #7ac ;*/ }
.blochaut a { z-index: 4 ;  }

.entete { grid-row: 1 / 2 ; grid-column: 2 / 7 ; color:var(--coul_gris_noir_2) ; mix-blend-mode: normal ; }
@supports (mix-blend-mode:exclusion) {.entete { color: var(--blanc) ; mix-blend-mode: exclusion ; } }

.entet_centre { grid-row: 1 / 2 ; grid-column: 3 / 8 ; color:var(--coul_gris_noir_2) ; mix-blend-mode: normal ; }
@supports (mix-blend-mode:exclusion) {.entet_centre { color: var(--blanc) ; mix-blend-mode: exclusion ; } }

nav>ul { display: grid ;  grid-template-rows: repeat(9, 1fr)   ; gap: 3px ; place-items : center stretch ; }
nav { width: 100% ; }


nav>ul>li{ margin: 1px; }

nav>ul>li>a{ background-color: var(--coul_blocv) ; color: var(--coul_gris_noir_2) ; border-radius: 5px ; } 


nav>ul>li>span{ background-color: var(--coul_bloctransparent) ; color: var(--coul_gris_noir_2) ; border-radius: 5px ; } 
nav>ul>li span{ display: block; }
.menu span { padding: 10px 10px ; }

nav>ul>li{ display: inline-block ; }
nav>ul>li a{ display: block; }
nav>ul>li li .dropdown{ display: none; }

.menu a { text-decoration: none; }
.menu-btn { display: none; }
.menu-icon { display: inline-block ; width: 50px ; left: 0 ; padding: 14px 5px 14px 12px ; visibility: visible; cursor: pointer; /*background-color : MediumPurple ;*/ }
.navicon { visibility: visible ; position: relative; display: block; height: 3px; width: 25px; background: var(--coul_gris_1) ; z-index: 15 ; }
.navicon:before { top: 9px; }
.navicon:after { top: -9px; }
.navicon:before, .navicon:after { position: absolute; display: block; width: 100%; height: 100%; content: ''; background: var(--coul_gris_1) ; }

.menu { max-height: 0; overflow: hidden; /*background-color : MediumBlue ;*/ }

.menu a { padding: 10px 10px ; }
.menu-btn:checked ~ .menu { max-height: 600px; margin: 0 auto ; }
.menu-btn:checked ~ .menu-icon .navicon { background: transparent; }
.menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); }
.menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); }
.menu-btn:checked ~ .menu-icon .navicon:before, .menu-btn:checked ~ .menu-icon .navicon:after { top: 0px ; } 

@media only screen and (min-width: 550px) { 
nav>ul { grid-template-rows: none; grid-template-areas: "a a a" "b b b" "c c c" ; }

.di1_listes { width:90% ; }
.affV680infb { display : block ; } 
.largmax1 { margin:auto ; }
}

@media only screen and (min-width: 1000px) and (min-height: 610px){ 


.entete { grid-column: 3 / 8 ; }

nav>ul { grid-template-rows: none; grid-template-columns: repeat(9, 1fr) ; }

:root { /*triangles*/ --tr_b: 1.3rem ; --tr_h: 0.8rem ; }

.conteneur1 { display: flex ;justify-content: start ; gap: 25px 25px; width:100% ; 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 > .blocvindex .textdiB { max-width: 280px ; max-height: 280px ; }
.di2_listes { width:100% ; max-height: 100% ; font-size: var(--t_police_2) ; }
.padd3 { padding: 0 ; }
.blocvign { display: block ; margin: 0 0 25px 0 ; }
.blocvindex { display: inline-block ; margin: 4px 5px ; }
.blocvig3 { display: block ; max-width: 500px ; }
.blocvig2 { display: inline-block ; max-width: 850px ; margin: 4px 5px ; }
.legendPo2 { max-width:95% ; }

.blocvi2containerflex { display: grid ; grid-template-rows: none ; grid-gap: 0px; justify-items: center ; align-items : center ; } 

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

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


.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) { 

.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 ;*/ }
}