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

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.3) ; --btnht: 0.4em ; --btngdt: 0.85em ; --btngdgd: -0.65em ; 
--coul_gris_1 : #666 ; --coul_gris_2 : #ccc ; --coul_gris_3 : #aaa ; --coul_gris_noir_1: #000 ; --coul_gris_noir_2: #222 ; --coul_gris_blanc: #eee ; --blanc: #aaa ; 
--coul_gris_fond: #fff ; --coul_fond_sombre: #333 ; --coul_fondvign_sombre: rgba(51, 51, 51, 0.85) ; --coul_fondvign_clair: rgba(220, 220, 220, 0.85) ; 
--coul_liens_mix: #333 ; --coul_liens : #666 ; --coul_liens_hover : #03c ; 
--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 : 350px ; 
--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_mix) ; 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_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:55% ; max-width: var(--largeur_maxi0) ; margin: 0 auto ; padding:0; z-index: 3 ; /*background-color: rgba(125, 95, 55, 0.95) ;*/ }
.di_h1 { position: relative ; width: 100% ; display : inline-block ; height: auto ; margin: 5px auto 10px ; color: #2E3054 ;font-size: var(--t_police_6) ; text-align:center ; letter-spacing : -0.01em ; z-index:2; /*background-color : #da97 ;*/ }

/*.di_h1 { position: relative ; display:inline-block ; height: auto ; margin-left: 0 ; color: #2E3054 ;}*/


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 ; 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_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 ; 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 ; 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: 100px ; min-width: 100px ; 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: 40px auto ; /*background-color : #ebd ;*/ }
.conteneur2 > .blocvign { margin: 0 20px ; 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: 0; }

.titre2 { font-size : var(--t_police_4) ; color: var(--coul_gris_noir_2) ; /*background-color : #89a ;*/ } 
.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 ;*/ } 

.titre { border : 0 ; vertical-align:middle ; width : 100% ; height : 3em ; text-align: center ; font-size : 1em ; }
.categorie { float: left; text-align: left; margin: 3em 0 1em 2.2em ; background-color:#fff ; clear:both; font-weight: bold; }
.annee { float: left; text-align: left; margin: 1.5em 0 0.5em 2.2em ; width: 80%; background-color:#fff ; clear:both; }
.bloc_listes { float: left; text-align: left; margin: 0 0.5em 0.2em 1.5em ; width: 100%; background-color:#fff ; clear:both; letter-spacing : 0.06em ; }
.tiret { float: left; text-align: left; margin: 0 ; width: 0.7em; background-color:#fff ; }
.titrcv { float: left; text-align: left; margin: 0; width: 90%; background-color:#fff ; }
.lieu { float: left; text-align: left; margin: 0 0 0 0.7em ; width: 90%; background-color:#fff ; }
.lieu_sans_titre { float: left; text-align: left; margin: 0 ; width: 90%; background-color:#fff ; }

.legendPo2 { position:relative ; display: block ; margin: 1.5rem auto 2.5rem ; left:0 ; width:95% ; line-height : var(--hauteurligne0) ; /*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_gris_2) ; /*background-color : rgba(255, 222, 222, 0.2) ; */}
.boutonth { width : 5em ; overflow-wrap: anywhere; color: var(--coul_gris_2) ; /*background-color : rgba(255, 222, 222, 0.05) ;*/ }
.boutontg { width: 13.2em ; margin-left : 0.3em ; overflow-wrap: anywhere; color: var(--coul_gris_2) ; 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_gris_2) ; 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 ; hyphenate-character: '';/*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: 0 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 ;*/ }

.di5_listes { display: flex ; flex-wrap: wrap ; gap: 10px 30px; width : 94% ; margin: 0 auto 0 ; /*background-color : #87e ;*/ }
.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 ;*/ }
.elemenfl2_1_0_240 { flex : 1 0 250px ; align-self: center ; margin:auto ; /*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_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; }

.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: 0 ; }
.margehaut1 { margin-top: 15px; }
.margehaut2 { margin-top: 60px; }
.margehaut3 { margin-top: 90px; }
.margehaut4 { margin-top: 150px; }
.italique { font-style:italic; }
.indentation1 { text-indent: 2.5rem ; }
.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 ; }
.couleur_text_rouge { color: #C63 ; } 
.affflexnowr { flex-wrap: nowrap ; }
.motsretours { word-break: break-word; }
.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 ; */}
.retour_ligne { clear:both ; } 


/* custom menu */
nav { position: relative ; width: 100% ; max-width: var(--largeur_maxi4) ; left: auto ; right: auto ; margin: 0 auto 5px ; font-size : var(--t_police_4) ; background-color : transparent ; 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-columns: 1fr 45px ; grid-template-rows: 1fr 1fr; grid-gap: 0.2em; align-items: stretch;}
/*_________________________________________________________________________*/
.d { grid-area: 1 / 2 / span 3 / span 1 ; } 
/*_________________________________________________________________________*/
li>a>p { display: flex; height: 100%; align-items: center; justify-content: center; /*background-color : #89a8 ; */}
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) ; height: 35px ; min-height: 100% ; 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: ''; }*/

#menu-btn { position: absolute; top: 0; left: 0; }
/* Hide hamburger for bigger screens */
.menu-icon { visibility: visible ; z-index: 15 ; }

.menu a { text-decoration: none; }
.menu-btn { display: none;  }
.menu-icon { position: absolute; display: block ; padding: 30px 5px 5px 20px ; user-select: none; visibility: visible; max-width: 90px; cursor: pointer; left : 0 ; /*background-color : #7b9 ;*/ }
.navicon { position: relative; display: block; height: 3px; width: 25px; background: var(--coul_gris_1) ; /* barre du milieu */ }
.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 { display: Inline-flex ; flex-direction: row; justify-content: center; flex-wrap: wrap ; max-height: 0; overflow: hidden; margin: 0 auto ; width: 85% ; max-width: 900px ; padding: 0 ; /*background-color : #7b9 ;*/ }
.menu a { padding: 20px 30px 5px ; text-align: center; }
.menu-btn:checked ~ .menu { max-height: 300px; margin: 0 auto 50px ; }
.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) { 
.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 { width:100% ; max-width: var(--largeur_maxi4) ; text-align : center ; 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 : block ; } 
.masqV680infa { display : none ; }
.affHinfa { display: inline ; } 
.masqHinfa { display: none ; } 
.affVinfa { display: block ; } 
.largeur73p { width:73% ;}

/*_________________________________________________________________________*/
nav>ul { grid-template-columns: 1fr 1fr 1fr 70px ; grid-template-rows: none ; grid-gap: 0.2em; }
.d { grid-area: 1 / 4 ; } 
/*_________________________________________________________________________*/

.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_noir_2) ; 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 ; }
.di2_list_dessus { position:absolute ; right : 0px ; top:0px ; width : 15% ; height: calc(120% + 100px) ; padding-bottom:40% ; margin: 0 ; z-index: 2 ; /*background-color : rgba(0, 0, 0, 0.025) ; */}
.affHinfa { display: inline ; } 
.masqHinfa { display: none ; } 
.boutonh { right : 24.7% ; }

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

.divfixbas333 { padding: 0.2rem 0.5rem ; 
left: 15px; transform: translate(0,0); bottom: 10px; height: auto ; text-align: left ; }

}

@media only screen and (min-width: 1250px) { 
.padd4 { max-width:0 ; min-width:0 ; }
}

.indentation0 { text-indent: 0 ; }