*{
    --coloneImageDeplieeWidth: max(calc((var(--content_width) - 4 * (var(--margin1) * 2)) / 100 * 10), 115px)
    /*lagrgeur volet formé normalement var(--lageurVoletFerme)*/
}
#content{
    display: flex;
    height: 100vh;
    --nbColumn: 4;
}
#content *{
    --info_width: max(36%, 380px) ;
}
#containeurSectionDroite{
    --containeurSectionDroite_width: calc(var(--content_width) - var(--info_width));
    display: flex;
    justify-content: right;
    height: 100%;
    width: var(--containeurSectionDroite_width); /*anciennement 64%*/
    transition: margin-left var(--timingAnim1) ease-in-out,
    width var(--timingAnim1) ease-in-out;
    background-color: rgba(255, 255, 255, 0);
}
/*remplacecr par paliatif1.js*/
/*#containeurSectionDroite:hover{
    margin-left: calc( var(--lageurVoletFerme) * -1);
    width: calc(64% + var(--lageurVoletFerme)) ;
}*/
.section{
    height: 100%;
    position: relative;
    min-width: var(--lageurVoletFerme) !important;
    overflow-x: hidden;

    transition:
    margin-left var(--timingAnim1) ease-in-out,
    width var(--timingAnim1) ease-in-out,
    min-width var(--timingAnim1) ease-in-out;
}
.lienSection{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index: -1;
}
 /* Hide scrollbar for Chrome, Safari and Opera */
.section::-webkit-scrollbar , .coloneImages::-webkit-scrollbar,
#container_infoExpo::-webkit-scrollbar, #container_regardSur::-webkit-scrollbar
.grandPanneau::-webkit-scrollbar{
  display: none;
}
.section, .coloneImages, #container_infoExpo, #container_regardSur, .grandPanneau{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#section_documentation, #section_publications, #section_regardSur{
    border-left: solid var(--borderWidth) var(--couleurText2);
}
#section_infoExpo{
    overflow-y: hidden;
    overflow-x: visible;
}
#container_infoExpo{
    width: calc(var(--content_width) / 100 * 36);
    color: var(--couleurText1);
    height: 100%;
    overflow-y: scroll;
}
#container_espaces, #container_documentation, #container_publications, #container_regardSur{
    --sectionDeplieWidth: calc(var(--content_width) - var(--lageurVoletFerme) * var(--nbColumn) );
    background-color: white;
    color: var(--couleurText2);

    /* width: max(calc(var(--content_width) / 100 * 16), 100%) ; */

    min-width: calc(var(--content_width) / 100 * 16);
    width: var(--sectionDeplieWidth);

    transition: width var(--timingAnim1) ease-in-out;
}
/*bricolage*/
#container_documentation, #container_publications/*, #container_regardSur*/{
    width: calc(var(--sectionDeplieWidth) + var(--borderWidth)*2) ;
} 

.section_titre{
    color: var(--couleurText2);
    z-index: 100;
    position: absolute;
    padding: var(--margin1) var(--margin1) calc(var(--margin1) - 0.2em) calc(var(--margin1) - var(--borderWidth) );
    top: 0;
    left: 0;
    background-color: white;

    transform-origin: top left;

    border-bottom: dotted var(--borderWidth) var(--couleurText2) ;
    
    transition: border-bottom-color var(--timingAnim1) ease 0.0s,
    border-bottom-width var(--timingAnim1_divPar2) var(--timingAnim1_divPar2);

    min-width: min(100%, calc(var(--content_width) / 100 * 16 - var(--borderWidth) + var(--lageurVoletFerme) ));
}
#section_titre_regardSur{
    min-width: 100%;
    opacity: 1;
    transition: opacity 0.2s ease-in-out,
    border-bottom-color var(--timingAnim1) ease 0.0s,
    border-bottom-width var(--timingAnim1_divPar2) var(--timingAnim1_divPar2);
}
.decalagePourTitre{
    min-height: calc( var(--lageurVoletFerme) - var(--borderWidth) * 2); /* auteur esthimé de section_titre*/

    transition:
    min-height var(--timingAnim1) ease;
}


/*section info===================================================*/
#titre_page{
    margin-bottom: calc(var(--margin1)*4.8);
}
#bloc_infoExpo_1{
    margin-bottom: var(--margin3);
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: var(--margin1);

}
.gauche_expoInfo, .droite_expoInfo{
    display: flex;
    flex-direction: column;
    gap: var(--margin1);
}
/*section espaces, etc===============================================*/
input[type="radio"] { display: none; }
input[type="radio"]:checked + label, label:hover{
    background-color: var(--couleurImageHighlight);
}
.blocImage_coloneImage{
    --paddingBlocImage: max(var(--margin1), 1.6vw);
    display: block;
    border-bottom: dotted var(--borderWidth) var(--couleurText2) ;
    width: min(100%, calc(var(--largeurBaseColone) + var(--lageurVoletFerme)) );
    /*height: var(--largeurBaseColone);*/
    padding: var(--paddingBlocImage);
    transition: width var(--timingAnim1) ease-in-out,
                height var(--timingAnim1) ease-in-out,
                border-bottom-color 0.0s ease 0s,
                padding var(--timingAnim1) 0s ease-in-out;
}
.blocImage_coloneImage_containeur_img{
    height: calc(var(--largeurBaseColone) - 2 * var(--paddingBlocImage) - var(--borderWidth));
    width:  calc(var(--largeurBaseColone) - 2 * var(--paddingBlocImage) - var(--borderWidth));
    transition: width var(--timingAnim1) ease-in-out,
    height var(--timingAnim1) ease-in-out;
    user-select: none;
}

.blocImage_coloneImage img{
    mix-blend-mode: multiply;
}
.bloc_image_grandPanneau img{
    object-fit: contain;
} 

.container_ensemble_espacesDocPub{
    display: flex;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}
.conataineurGandPanneaus{
    flex: 1;
    position: sticky;
    top: 0px;
}
.coloneImages{
    width: max(100%, calc(var(--content_width) / 100 * 16) ) ;
    transition: width var(--timingAnim1) 0s ease-in-out,
    border-left  0s 0.05s ease-in-out;

    display: flex;
    flex-direction: column;

    overflow-y: scroll;

    z-index: 1;

    background-color: white;
    border-left: solid 0 var(--couleurText2);
}
.lienSection2{
    display: block;
    flex: 1;
}
/*gand(grand) panneau*/
.grandPanneau{
    /*normalement devrait être, mais bug ? :  min-width: calc(var(--content_width) - (var(--lageurVoletFerme) * 4) - var(--coloneImageDeplieeWidth)); */
    width: calc(var(--content_width) - (var(--lageurVoletFerme) * var(--nbColumn)) - var(--coloneImageDeplieeWidth) + (var(--borderWidth) * var(--nbColumn)));
    /*calcul comprenant tout les élément de version ordi (bricolage) si volonté d'enlever le bug besoin de js*/
    
    height: calc(100% + var(--borderWidth)) ;
    display: flex;
    flex-direction: column;

    border-top: solid var(--borderWidth) var(--couleurText2);
    margin-top: calc(var(--borderWidth) * -1);

    position: absolute;
    background-color: white;

    transition: top var(--timingAnim1) 0.0s ease-in-out;

    z-index: 0;
}
.grandPanneau_dedans{
    top: 0;
}
.grandPanneau_enDehors{
    top: calc(100vh + var(--borderWidth));
}
.bloc_image_grandPanneau{
    flex: 1;
    padding: calc(115px/2) var(--coloneImageDeplieeWidth) calc(115px/2) var(--coloneImageDeplieeWidth) ;
    overflow: hidden;
    width: 100%;
    cursor: none !important;
}
.bloc_image_grandPanneau:not([data-suit]):not([data-precede]) {
    cursor: default !important;
}
.bloc_image_grandPanneau.bloc_image_grandPanneau.is-zoomed {
    cursor: zoom-out !important;
}
.bloc_info_grandPanneau{
    color: var(--couleurText2);
}
.bloc_info_grandPanneau{
    display: grid;
    grid-template-columns: /*auto auto auto*/ 2.5fr 5fr 2.5fr;
    gap: var(--margin1);
    padding: var(--margin1);
    border-top: solid var(--borderWidth) var(--couleurText2);
    z-index: 10;
    background-color: white;
}
.sousbloc_info_grandPanneau{
    display: flex;
    flex-direction: column;
    gap: var(--margin1);
}
.bloc_info_grandPanneau a{
    display: block;
}

.conataineurGandPanneaus{
    width: 0;
}

/*regard sur*/

#container_regardSur{
    --container_regardSur_width: calc(var(--content_width) - (var(--lageurVoletFerme) * var(--nbColumn)) + (var(--borderWidth) * var(--nbColumn)));
    height: 100%;
    min-width: var(--container_regardSur_width);
    overflow-y: auto;
    display: flex;
    justify-content: center;
}
#zoneArticle_regardSur{
    --container_regardSur_width: calc(var(--content_width) - (var(--lageurVoletFerme) * var(--nbColumn)) + (var(--borderWidth) * var(--nbColumn)));
    --margePasBonneVariable : var(--lageurVoletFerme);
    --zoneArticle_regardSur_margeAvecNote : calc(var(--margin1) * 3 + var(--sidenoteWidth));

    margin: var(--margin3) var(--zoneArticle_regardSur_margeAvecNote) auto var(--margin1);
    width: 40em;
    max-width: 100%;
    transition: margin var(--timingAnim1) ease-in-out,
                transform var(--timingAnim1) ease-in-out;
    /*pas firefox*/
 transform: translateX( calc(      ((var(--container_regardSur_width) - min(40em, 100%) - var(--margin1) * 3 - var(--zoneArticle_regardSur_margeAvecNote)) / 2)     * -1 + var(--borderWidth)));

}


.zoneTexteLabeur{
    padding-bottom: var(--margin1) ;
}

#titre_regardSur{
    width: 80%;
    margin-bottom: var(--marginTexteTitre);
}
#auteur_regardSur{
    margin-left: 2em   /*alinea*/ ;
    margin-bottom: 1em;
}
/*image*/
.zoneTexteLabeur figure{
    display: grid;
    grid-template-columns: var(--sidenoteWidth) 1fr ;
    gap: var(--margin1);
    
}
.zoneTexteLabeur figure img{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
        object-fit: contain;
}
.zoneTexteLabeur figure figcaption{
    grid-column: 1 / 2;
    grid-row: 1 / 2; 
}
.numNote_sidenote{
    margin-right: 2em   /*alinea*/;
}


.sidenote{
    width: var(--sidenoteWidth);
    float: right;
    clear: right;
    margin-right: calc((var(--sidenoteWidth) * -1) - var(--margin1));
    margin-bottom: var(--margin1);
}

@media (min-width: 1900px) {
    .sidenote{
        margin-right: calc((var(--sidenoteWidth) * -1) - 2vw);
    }
}

/*#content:not(.seg-espaces):not(.seg-documentation):not(.seg-publications):not(.seg-regardSur) .section
{
    transition:
    margin-left var(--timingAnim1) ease-in-out,
    width 0 ease-in-out,
    min-width var(--timingAnim1) ease-in-out;
}*/


/*case '' ======================================================*/
#section_infoExpo{
    background-color: var(--couleurFond1);
    width: var(--info_width); /*anciennement 36%*/
}
#section_espaces, #section_documentation, #section_publications, #section_regardSur,
#section_espaces.empty:hover, #section_documentation.empty:hover, #section_publications.empty:hover, #section_regardSur.empty:hover{
    --largeurBaseColone: calc((var(--content_width) / 100 * 64) / 100 * 25) ; /*25 % de largegeur containeur droite*/
    width: 25%;
}
#section_espaces:hover, #section_documentation:hover, #section_publications:hover, #section_regardSur:hover{
    width: calc(25% + var(--lageurVoletFerme) );
}

/*paliatif*/
@media (min-width: 1381px) {
#content.noRegardSur:not(.seg1-espaces):not(.seg1-documentation):not(.seg1-publications):not(.seg1-regardSur) .section.paliatif2 {
    width: calc(33.3% - var(--lageurVoletFerme)) !important;
}

#content:not(.noRegardSur):not(.seg1-espaces):not(.seg1-documentation):not(.seg1-publications):not(.seg1-regardSur) .section.paliatif2 {
    width: calc(25% - var(--lageurVoletFerme)) !important;
}
    #content:not(.seg1-documentation):not(.seg1-regardSur) #containeurSectionDroite.paliatif2{
        margin-left: calc( var(--lageurVoletFerme) * -1);
        width: calc(var(--containeurSectionDroite_width) + var(--lageurVoletFerme));
    }
}

#lienSection_regardSur{
    z-index: 100;
}

#section_espaces:hover .section_titre, #section_documentation:hover .section_titre,
#section_publications:hover .section_titre{
    transition: border-bottom-color var(--timingAnim1) ease 0.0s,
    border-bottom-width var(--timingAnim1_divPar2) var(--timingAnim1_divPar2);
}

@media (min-width: 1381px) {
    #content:not(.seg1-espaces):not(.seg1-documentation):not(.seg1-publications):not(.seg1-regardSur) #containeurSectionDroite.paliatif1{
        margin-left: calc( var(--lageurVoletFerme) * -1);
        width: calc(64% + var(--lageurVoletFerme)) ;
    }
}


/*pas de regard sur =================*/
#content.noRegardSur{
    --nbColumn: 3;
}

#content.noRegardSur #section_espaces, #content.noRegardSur #section_documentation, #content.noRegardSur #section_publications, #content.noRegardSur #section_regardSur,
#content.noRegardSur #section_espaces.empty:hover, #content.noRegardSur #section_documentation.empty:hover, #content.noRegardSur #section_publications.empty:hover, #content.noRegardSur #section_regardSur.empty:hover{
    --largeurBaseColone: calc((var(--content_width) / 100 * 64) / 100 * 33.3) ; /*25 % de largegeur containeur droite*/
    width: 33.3%;
}
#content.noRegardSur #section_espaces:hover, #content.noRegardSur #section_documentation:hover, #content.noRegardSur #section_publications:hover, #content.noRegardSur #section_regardSur:hover{
    width: calc(33.3% + var(--lageurVoletFerme) );
}

#content.noRegardSur .section_titre{
    min-width: min(100%, calc(var(--content_width) / 100 * 21.2 - var(--borderWidth) + var(--lageurVoletFerme) ));
}

/*je crois que se n'est pas utile*/
/* #content.noRegardSur #container_espaces, #content.noRegardSur #container_documentation, #content.noRegardSur #container_publications, #content.noRegardSur #container_regardSur{
    min-width: calc(var(--content_width) / 100 *  21.2);
}  */


/*case all sauf '' ====================*/
.seg1-espaces #containeurSectionDroite, .seg1-documentation #containeurSectionDroite, .seg1-publications #containeurSectionDroite, .seg1-regardSur #containeurSectionDroite{
    width: calc(100% -  var(--lageurVoletFerme) );
}
.seg1-espaces #containeurSectionDroite:hover, .seg1-documentation #containeurSectionDroite:hover, .seg1-publications #containeurSectionDroite:hover, .seg1-regardSur #containeurSectionDroite:hover{
    margin-left: 0;
    width: calc( calc(100% -  var(--lageurVoletFerme) ));
}
.seg1-espaces .section, .seg1-documentation .section, .seg1-publications .section, .seg1-regardSur .section{
    width: var(--lageurVoletFerme) !important;
    overflow-y: hidden;
}

.seg1-espaces .section:hover, .seg1-documentation .section:hover, .seg1-publications .section:hover, .seg1-regardSur .section:hover{
    width: 0 !important;
    min-width: calc( var(--lageurVoletFerme) + var(--margin2)) !important;
}
.seg1-documentation .coloneImages, .seg1-publications .coloneImages{
    min-width: var(--coloneImageDeplieeWidth);
}
.seg1-espaces .decalagePourTitre, .seg1-documentation .decalagePourTitre, .seg1-publications .decalagePourTitre, .seg1-regardSur .decalagePourTitre{
    min-height: 0;
}
.seg1-espaces .section_titre, .seg1-documentation .section_titre, .seg1-publications .section_titre, .seg1-regardSur .section_titre{
    border-bottom-color: transparent !important;
    border-bottom-width: 0;
    background-color: transparent;   

    transition: border-bottom-color var(--timingAnim1) ease 0.0s,
    border-bottom-width 0s 0s;
}

.seg1-espaces .section:hover .section_titre, .seg1-documentation .section:hover .section_titre, .seg1-publications .section:hover .section_titre, .seg1-regardSur .section:hover .section_titre{
    left: 0 !important;
}
.seg1-espaces #zoneArticle_regardSur, .seg1-documentation #zoneArticle_regardSur, .seg1-publications #zoneArticle_regardSur{
    margin-left: calc(1em - 0.3em + 0.5em + var(--margin1) + 6px);
}

.seg1-espaces #zoneArticle_regardSur, .seg1-documentation #zoneArticle_regardSur, .seg1-regardSur #zoneArticle_regardSur, .seg1-publications #zoneArticle_regardSur{
    transform: translateX( calc( ((var(--container_regardSur_width) - min(40em, 100%) - var(--margin1)*4 - var(--zoneArticle_regardSur_margeAvecNote)) / 2) * -1 + var(--lageurVoletFerme) - var(--margin1)));
}







/*case 'espaces' ======================================================*/
.seg1-espaces #section_espaces{
    width: 100% !important;
}
.seg1-espaces #coloneImages_espaces{
    width: max(10%, 115px);
    border-left: solid var(--borderWidth) var(--couleurText2);
    margin-left: calc(var(--borderWidth) * -1);
}
.seg1-espaces .blocImage_coloneImage_espaces{
    border-bottom: solid var(--borderWidth) var(--couleurText2);
}
.seg1-espaces .blocImage_coloneImage_espaces{
    padding: var(--margin1);
}
.seg1-espaces #lienSection_infoExpo, .seg1-espaces #lienSection_regardSur, .seg1-espaces #lienSection_documentation, .seg1-espaces #lienSection_publications{
    z-index: 100;
}
.seg1-espaces #lienSection_espaces2{
    display: none;
}
.seg1-espaces .blocImage_coloneImage_documentation, .seg1-espaces .blocImage_coloneImage_publications{
    border-bottom-color: transparent;
    background-color: white;
    transition: width var(--timingAnim1) ease-in-out,
                height var(--timingAnim1) ease-in-out,
                border-bottom-color var(--timingAnim1) ease 0.0s,
                padding var(--timingAnim1) 0s ease-in-out;
}


.seg1-espaces #sousConataineurGandPanneaus_espaces{
    display: block;
}
.seg1-espaces #section_documentation:hover .blocImage_coloneImage_documentation, .seg1-espaces #section_publications:hover .blocImage_coloneImage_publications{
    border-bottom: dotted var(--borderWidth) var(--couleurText2) !important ;
}
.seg1-espaces #section_titre_documentation, .seg1-espaces #section_titre_publications, .seg1-espaces #section_titre_regardSur{
    transform:  rotate(-90deg) translateX( calc(-100% - (var(--margin1) / 2))) translateY(-0.3em);
    text-align : right;
}
.seg1-espaces #section_titre_espaces{
    pointer-events: none;
}
.seg1-espaces .blocImage_coloneImage_containeur_img_documentation, .seg1-espaces .blocImage_coloneImage_containeur_img_publications{
        height: calc(var(--largeurBaseColone) - 2 * var(--lageurVoletFerme));
        width:  calc(var(--largeurBaseColone) - 2 * var(--lageurVoletFerme));
}



.seg1-espaces .blocImage_coloneImage_containeur_img_espaces{
        height: 100%;
        width: min(100%, var(--largeurBaseColone));
}
.seg1-espaces .blocImage_coloneImage_documentation, .seg1-espaces .blocImage_coloneImage_publications{
    padding: var(--lageurVoletFerme) ;
}
.seg1-espaces .blocImage_coloneImage_containeur_img_espaces{
    height: max(calc(var(--sectionDeplieWidth)/100*10 - var(--margin1) * 2 - var(--borderWidth)), calc(115px - var(--margin1) * 2 - var(--borderWidth)));
    width:  max(calc(var(--sectionDeplieWidth)/100*10 - var(--margin1) * 2 - var(--borderWidth)), calc(115px - var(--margin1) * 2 - var(--borderWidth)));
}


/*case 'documentation' ======================================================*/
.seg1-documentation #section_documentation{
    width: 100% !important;
}
.seg1-documentation #coloneImages_documentation{
    width: max(10%, 115px);
    border-left: solid var(--borderWidth) var(--couleurText2);
    margin-left: calc(var(--borderWidth) * -1);
}

.seg1-documentation .blocImage_coloneImage_documentation{
    border-bottom: solid var(--borderWidth) var(--couleurText2);
}
.seg1-documentation .blocImage_coloneImage_documentation{
    padding: var(--margin1);
}
.seg1-documentation #lienSection_infoExpo, .seg1-documentation #lienSection_regardSur,.seg1-documentation #lienSection_espaces, .seg1-documentation #lienSection_publications{
    z-index: 100;
}
.seg1-documentation #lienSection_documentation2{
    display: none;
}
.seg1-documentation .blocImage_coloneImage_espaces, .seg1-documentation .blocImage_coloneImage_publications{
    border-bottom-color: transparent;
    background-color: transparent;
        transition: width var(--timingAnim1) ease-in-out,
                height var(--timingAnim1) ease-in-out,
                border-bottom-color var(--timingAnim1) ease 0.0s,
                padding var(--timingAnim1) 0s ease-in-out;
}

.seg1-documentation #section_espaces:hover .blocImage_coloneImage_espaces, .seg1-documentation #section_publications:hover .blocImage_coloneImage_publications{
    border-bottom: dotted var(--borderWidth) var(--couleurText2) !important ;
}

.seg1-documentation #section_titre_espaces, .seg1-documentation #section_titre_publications, .seg1-documentation #section_titre_regardSur{
    transform:  rotate(-90deg) translateX( calc(-100% - (var(--margin1) / 2))) translateY(-0.3em);
    text-align : right;
}
.seg1-documentation #section_titre_documentation{
    pointer-events: none;
}
.seg1-documentation .blocImage_coloneImage_containeur_img_espaces, .seg1-documentation .blocImage_coloneImage_containeur_img_publications{
        height: calc(var(--largeurBaseColone) - 2 * var(--lageurVoletFerme));
        width:  calc(var(--largeurBaseColone) - 2 * var(--lageurVoletFerme));
}


.seg1-documentation .blocImage_coloneImage_containeur_img_documentation{
        height: 100%;
        width: min(100%, var(--largeurBaseColone));
}
.seg1-documentation .blocImage_coloneImage_espaces, .seg1-documentation .blocImage_coloneImage_publications{
    padding: var(--lageurVoletFerme) ;
}
.seg1-documentation .blocImage_coloneImage_containeur_img_documentation{
    height: max(calc(var(--sectionDeplieWidth)/100*10 - var(--margin1) * 2 - var(--borderWidth)), calc(115px - var(--margin1) * 2 - var(--borderWidth) - 6px));
    width:  max(calc(var(--sectionDeplieWidth)/100*10 - var(--margin1) * 2 - var(--borderWidth)), calc(115px - var(--margin1) * 2 - var(--borderWidth) - 6px));
}

/*case 'publications' ======================================================*/
.seg1-publications #section_publications{
    width: 100% !important;
}
.seg1-publications #coloneImages_publications{
    width: var(--coloneImageDeplieeWidth);
    border-left: solid var(--borderWidth) var(--couleurText2);
    margin-left: calc(var(--borderWidth) * -1);
}
.seg1-publications .blocImage_coloneImage_publications{
    border-bottom: solid var(--borderWidth) var(--couleurText2);
}
.seg1-publications .blocImage_coloneImage_publications{
    padding: var(--margin1);
}
.seg1-publications #lienSection_infoExpo, .seg1-publications #lienSection_regardSur,.seg1-publications #lienSection_espaces, .seg1-publications #lienSection_documentation{
    z-index: 100;
}
.seg1-publications #lienSection_publications2{
    display: none;
}
.seg1-publications .blocImage_coloneImage_espaces, .seg1-publications .blocImage_coloneImage_documentation{
    border-bottom-color: transparent;
    background-color: transparent;
    transition: width var(--timingAnim1) ease-in-out,
                height var(--timingAnim1) ease-in-out,
                border-bottom-color var(--timingAnim1) ease 0.0s,
                padding var(--timingAnim1) 0s ease-in-out;
}
.seg1-publications #section_espaces:hover .blocImage_coloneImage_espaces, .seg1-publications #section_documentation:hover .blocImage_coloneImage_documentation{
    border-bottom: dotted var(--borderWidth) var(--couleurText2) !important ;
}

.seg1-publications #section_titre_espaces, .seg1-publications #section_titre_documentation, .seg1-publications #section_titre_regardSur{
    transform:  rotate(-90deg) translateX( calc(-100% - (var(--margin1) / 2))) translateY(-0.3em);
    text-align : right;
}
.seg1-publications #section_titre_publications{
    pointer-events: none;
}


.seg1-publications .blocImage_coloneImage_containeur_img_espaces, .seg1-publications .blocImage_coloneImage_containeur_img_documentation{
        height: calc(var(--largeurBaseColone) - 2 * var(--lageurVoletFerme));
        width:  calc(var(--largeurBaseColone) - 2 * var(--lageurVoletFerme));
}
.seg1-publications .blocImage_coloneImage_containeur_img_publications{
        height: 100%;
        width: min(100%, var(--largeurBaseColone));
}
.seg1-publications .blocImage_coloneImage_espaces, .seg1-publications .blocImage_coloneImage_documentation{
    padding: var(--lageurVoletFerme) ;
}
.seg1-publications .blocImage_coloneImage_containeur_img_publications{
 height: max(calc(var(--sectionDeplieWidth)/100*10 - var(--margin1) * 2 - var(--borderWidth)), calc(115px - var(--margin1) * 2 - var(--borderWidth) - 5px));
    width:  max(calc(var(--sectionDeplieWidth)/100*10 - var(--margin1) * 2 - var(--borderWidth)), calc(115px - var(--margin1) * 2 - var(--borderWidth) - 5px));
}





/*case 'regardSur' ======================================================*/
.seg1-regardSur .transparent{
  opacity: 0 !important;
}

.seg1-regardSur #section_regardSur{
    width: 100% !important;
}
.seg1-regardSur #lienSection_regardSur{
    z-index: -1;
}
.seg1-regardSur .blocImage_coloneImage{
    border-bottom-color: transparent;
    transition: width var(--timingAnim1) ease-in-out,
                height var(--timingAnim1) ease-in-out,
                border-bottom-color var(--timingAnim1) ease 0.0s,
                padding var(--timingAnim1) 0s ease-in-out;
}
.seg1-regardSur #lienSection_infoExpo, .seg1-regardSur #lienSection_espaces, .seg1-regardSur #lienSection_documentation, .seg1-regardSur #lienSection_publications{
    z-index: 100;
}
.seg1-regardSur .section:hover .blocImage_coloneImage{
    border-bottom: dotted var(--borderWidth) var(--couleurText2) !important ;
}

.seg1-regardSur #section_titre_espaces, .seg1-regardSur #section_titre_documentation, .seg1-regardSur #section_titre_publications{
    transform:  rotate(-90deg) translateX( calc(-100% - (var(--margin1) / 2))) translateY(-0.3em);
    text-align : right;
}
.seg1-regardSur #section_titre_regardSur{
    pointer-events: none;
}

.seg1-regardSur #zoneArticle_regardSur{
    transform: translateX(0);
}

.seg1-regardSur .blocImage_coloneImage_containeur_img{
        height: calc(var(--largeurBaseColone) - 2 * var(--lageurVoletFerme));
        width:  calc(var(--largeurBaseColone) - 2 * var(--lageurVoletFerme));
}
.seg1-regardSur .blocImage_coloneImage{
    padding: var(--lageurVoletFerme) ;
}

/* past================================================================= */
.past-first .coloneImages, .past-espaces .coloneImages, .past-documentation .coloneImages, .past-publications .coloneImages{
    transition: width  calc(var(--timingAnim1) * 0.9) calc(var(--timingAnim1) / 10) ease-in-out,
    border-left 0s 0.1s ease-in-out;
}
.past-first #coloneImages_documentation, .past-espaces #coloneImages_documentation, .past-documentation #coloneImages_documentation, .past-documentation #coloneImages_publications{
    transition: width  calc(var(--timingAnim1) * 0.9) calc(var(--timingAnim1) / 11) ease-in-out,
    border-left 0s 0.1s ease-in-out;
}
.past-first #coloneImages_publications, .past-espaces #coloneImages_publications, .past-documentation #coloneImages_publications, .past-publications #coloneImages_publications{
    transition: width  calc(var(--timingAnim1) * 0.9) calc(var(--timingAnim1) / 12) ease-in-out,
    border-left 0s 0.1s ease-in-out;
}


/*responsiv============================================================*/
/*car "documentation" commence à manger*/
/*vollet toujour fermé (copié coller de quand ouvert addapter)*/
@media (max-width: 1380px) {
    #containeurSectionDroite{
        width: calc(var(--lageurVoletFerme) * var(--nbColumn));
    }
    #containeurSectionDroite:hover{
        margin-left: calc( var(--lageurVoletFerme) * -1);
        width: calc(var(--lageurVoletFerme) * 4 + var(--lageurVoletFerme));
    }
     .section{
        width: var(--lageurVoletFerme) !important;
        overflow-y: hidden;
    }

     .section:hover{
        width: 0 !important;
        min-width: calc( var(--lageurVoletFerme) + var(--margin2)) !important;
    }
     .coloneImages{
        min-width: var(--coloneImageDeplieeWidth);
    }
     .decalagePourTitre{
        min-height: 0;
    }
     .section_titre{
        border-bottom-color: transparent !important;
        border-bottom-width: 0;
        background-color: transparent;   

        transition: border-bottom-color var(--timingAnim1) ease 0.0s,
        border-bottom-width 0s 0s;
    }

     .section:hover .section_titre{
        left: 0 !important;
    }
     #zoneArticle_regardSur{
        margin-left: calc(1em - 0.3em + 0.5em + var(--margin1) + 6px);
    }

     #zoneArticle_regardSur{
        transform: translateX( calc( ((var(--container_regardSur_width) - min(40em, 100%) - var(--margin1)*4 - var(--zoneArticle_regardSur_margeAvecNote)) / 2) * -1 + var(--lageurVoletFerme) - var(--margin1)));
    }


    /*copier et addapté à partire de seg regard sur*/
    #section_infoExpo{
        width: 100% !important;
    }
    .blocImage_coloneImage{
        border-bottom-color: transparent;
        transition: width var(--timingAnim1) ease-in-out,
                    height var(--timingAnim1) ease-in-out,
                    border-bottom-color var(--timingAnim1) ease 0.0s,
                    padding var(--timingAnim1) 0s ease-in-out;
    }
    .section:hover .blocImage_coloneImage{
        border-bottom-color: var(--couleurText2);
    }

    .section_titre{
        transform:  rotate(-90deg) translateX( calc(-100% - (var(--margin1) / 2))) translateY(-0.3em);
        text-align : right;
    }
    .blocImage_coloneImage_containeur_img{
            height: calc(var(--largeurBaseColone) - 2 * var(--lageurVoletFerme));
            width:  calc(var(--largeurBaseColone) - 2 * var(--lageurVoletFerme));
    }
    .blocImage_coloneImage{
        padding: var(--lageurVoletFerme) ;
    }
    .lienSection{
        z-index: 100;
    }
    #lienSection_infoExpo{
        z-index: -1;
    }
    #container_infoExpo{
        --container_regardSur_width: calc(var(--content_width) - (var(--lageurVoletFerme) * 4) + (var(--borderWidth) * 4));
        min-width: calc(var(--container_regardSur_width) - var(--margin1)) ;
    }
    #content.noRegardSur #container_infoExpo{
        min-width: calc(var(--container_regardSur_width) - var(--margin1) + var(--lageurVoletFerme)) ;
    }

    #content:not(.seg1-espaces):not(.seg1-documentation):not(.seg1-publications):not(.seg1-regardSur) #section_regardSur{
        transition:
        margin-left var(--timingAnim1) ease-in-out,
        width 0s var(--timingAnim1) ease-in-out,
        min-width var(--timingAnim1) ease-in-out;
    }
    /*.seg1-regardSur #section_regardSur{
        transition:
        margin-left var(--timingAnim1) ease-in-out,
        width 0.2s ease-in-out,
        min-width var(--timingAnim1) ease-in-out;
    }*/


    /*case all sauf ''*/
    .seg1-espaces #lienSection_espaces, .seg1-documentation #lienSection_documentation, .seg1-publications #lienSection_publications, .seg1-regardSur #lienSection_regardSur{
        z-index: -1;
    }
    .seg1-espaces #section_titre_espaces, .seg1-documentation #section_titre_documentation, .seg1-publications #section_titre_publications, .seg1-regardSur #section_titre_regardSur{
        transform:  none;
        text-align : left;
    }


    #content:not(.past-espaces):not(.past-documentation):not(.past-publications):not(.past-regardSur):not(.past-first).seg1-espaces #section_espaces,
    #content:not(.past-espaces):not(.past-documentation):not(.past-publications):not(.past-regardSur):not(.past-first).seg1-documentation #section_documentation,
    #content:not(.past-espaces):not(.past-documentation):not(.past-publications):not(.past-regardSur):not(.past-first).seg1-publications #section_publications,
    #content:not(.past-espaces):not(.past-documentation):not(.past-publications):not(.past-regardSur):not(.past-first).seg1-regardSur #section_regardSur
    {
        transition:
        margin-left var(--timingAnim1) ease-in-out,
        width 0 ease-in-out,
        min-width var(--timingAnim1) ease-in-out;
    }
}






/*image trop petite au survol previsu + regard sur sidenote plus la place*/
@media (max-width: 1200px) {
    #zoneArticle_regardSur {
        transform: translateX( calc(var(--lageurVoletFerme)));
    }
    #container_regardSur{
        display: block;
    }
    #titre_regardSur{
        width: 100%;
    }
    #zoneArticle_regardSur{
        margin: var(--margin3) var(--margin1) auto var(--margin1);/*pas fini*/
        width: calc(100% - var(--margin1)*3)  ;
    }
    .sidenote{
        width: calc(100% + var(--margin1) * 2) ;
        position: absolute;
        left: 0;
        float: none;
        clear: none;
        margin-right: 0;
        margin-left: calc(var(--margin1) * -1) ;
        margin-bottom: 0;
        background-color: white;
        border-top: solid var(--borderWidth);
        border-bottom: solid var(--borderWidth);
        padding: var(--margin1);
    }

    .blocImage_coloneImage{
        transition: width var(--timingAnim1) ease-in-out,
        height var(--timingAnim1) ease-in-out,
        border-bottom-color 0.0s ease 0s, padding var(--timingAnim1) 0s ease-in-out,
        opacity 0s var(--timingAnim1) !important;
    }
    .blocImage_coloneImage{
        opacity: 0;
    }
    .seg1-espaces .blocImage_coloneImage_espaces, .seg1-documentation .blocImage_coloneImage_documentation, .seg1-publications .blocImage_coloneImage_publications{
        opacity: 1;

        transition: width var(--timingAnim1) ease-in-out,
        height var(--timingAnim1) ease-in-out,
        border-bottom-color 0.0s ease 0s, padding var(--timingAnim1) 0s ease-in-out,
        opacity var(--timingAnim1) 0s !important;
    }

    .bloc_info_grandPanneau {
        grid-template-columns: /*auto auto auto*/ 3fr 5fr;
    }
    .none1200{
        display: none;
    }
    .block1200{
        display: block;
    }
    .inline1200{
         display: inline;
    }
    .bloc_image_grandPanneau{
        padding: var(--margin2) calc(var(--margin2) + 4px) var(--margin2) var(--margin2);
    }
    .is-active{
        display: block;
    }
}

/*plus que une colone pour les info des ressource visuelle*/
@media (max-width: 1000px) {
    .conataineurGandPanneaus {
        opacity: 0;
        transition: opacity var(--timingAnim1) ease-in-out !important;
    }
    .coloneImages{
        display: none;
    }
    .grandPanneau {
        width: 100%;
    }
    .bloc_image_grandPanneau{
        display: none;
    }
    .bloc_image_grandPanneau_phone{
        display: flex;
        flex-direction: column;
        height: min(100vw, 73dvh);
        min-height: min(100vw, 73dvh);
        /* height: calc(100% - 250px) ; old*/
        /* min-height: calc(100% - 250px) ; old*/
        border-bottom: solid var(--borderWidth) rgba(255, 0, 0, 0);
    }
    .navDansImage{
        width: 100%;
        display: flex;
        justify-content: center;
        gap: var(--margin1);
        margin-bottom: var(--margin1);
    }
    .blockAvecPadding2{
        padding: var(--margin1) var(--margin1) calc(var(--margin1) + var(--margin1) * 0.8) var(--margin1);
        height: calc(100% - var(--margin2));
    }
    .flechePrevious_navDansImage{
        transform: rotate(180deg);
    }
    /*.bloc_info_grandPanneau {
        grid-template-columns: 1fr;
    }*/
    .grandPanneau {
        overflow-y: auto;
        transition: none ;
    }


    .seg1-espaces #conataineurGandPanneaus_espaces, .seg1-documentation #conataineurGandPanneaus_documentation, .seg1-publications #conataineurGandPanneaus_publications, .seg1-regardSur #conataineurGandPanneaus_regardSur{
        opacity: 1;
    }
}

@media (max-width: 916px) {
    *{
        --couleurText2: var(--couleurFond1);
    }
    .section_titre {
        display: none;
    }
    #content{
        flex-direction: column;
    }
    #containeurSectionDroite{
        width: 100% !important;
        display: none;
    }
    .bloc_info_grandPanneau {
        grid-template-columns: 1fr;
    }
    .section{
        border-left: none !important;
    }



    #content:not(.seg1-espaces):not(.seg1-documentation):not(.seg1-publications):not(.seg1-regardSur) ~ #containeurNavBottom{
        display: block;
        color: var(--couleurText2);
    }

    /*all sauf case ''*/
    .seg1-espaces #containeurSectionDroite,  .seg1-documentation #containeurSectionDroite,  .seg1-publications #containeurSectionDroite,  .seg1-regardSur #containeurSectionDroite{
        display: block;
    }
    .seg1-espaces #section_infoExpo,  .seg1-documentation #section_infoExpo,  .seg1-publications #section_infoExpo,  .seg1-regardSur #section_infoExpo{
        display: none;
    }



    .seg1-espaces .section:not(#section_espaces){
        display: none;
    }
    .seg1-documentation .section:not(#section_documentation){
        display: none;
    }
    .seg1-publications .section:not(#section_publications){
        display: none;
    }
    .seg1-regardSur .section:not(#section_regardSur){
        display: none;
    }



    /*image*/
    .zoneTexteLabeur figure{
        grid-template-columns: 100% ;
        gap: var(--margin1);

    }
    .zoneTexteLabeur figure img{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
            object-fit: contain;
    }
    .zoneTexteLabeur figure figcaption{
        grid-column: 1 / 2;
        grid-row: 2 / 3; 
    }

    #titre_page{
        margin-bottom: var(--margin1);
    }
    #bloc_infoExpo_1{
        margin-bottom: var(--margin2);
    }
    blockquote{
        margin-left: 0;
    }
    #zoneArticle_regardSur {
        margin: var(--margin1) var(--margin1) auto var(--margin1);
        width: calc(100% - var(--margin1)*2)  ;
    }
}