:root {
    --mainColor: #00ffff; /* HF  00ff4f  vert - 00ffff bleu - original 8ef7bc */
}

    .tag2024 {/* from HF */
            display: inline-block;  position:relative;
    background:white;border:1px solid black; border-radius:2rem;
    font-family:'lores-12'; 
    font-size:.65rem;
    line-height:.9rem !important;
    color:black;line-height:.8rem;height:.8rem;
    padding:.2rem .35rem;
    margin:.25rem .1rem;
    margin-bottom:-.2rem; 
    margin-left:0;
    text-transform: uppercase;
    overflow:hidden; z-index:5;
}
        
.cercle {  text-indent:0; 
    transition: transform 0s;  
    display:inline-block;
    font-size: 0.9rem; font-family:'obviously';
    font-weight:400; 
    width: 1.1rem;
    height: 1.1rem; 
    box-sizing: initial; 
    background: #fff;
    border: 1px solid black;
    color: black;
    text-align: center;
    border-radius: 50%;    
    line-height: 0.8rem;
    box-sizing: content-box;  
}
       

@-webkit-keyframes color-bouge {
    0% { color: white; }
    50% { color: white; }
    100% { color: var(--mainColor); }
}
@-moz-keyframes color-bouge {
    0% { color: white; }
    50% { color: white; }
    100% { color: var(--mainColor); }
}
@-ms-keyframes color-bouge {
    0% { color: white; }
    50% { color: white; }
    100% { color: var(--mainColor); }
}
@-o-keyframes color-bouge {
    0% { color: white; }
    50% { color: white; }
    100% { color: var(--mainColor); }
}
@keyframes color-bouge {
    0% { color: white; }
    50% { color: white; }
    100% { color: var(--mainColor); }
}

 

@-webkit-keyframes color-change {
    0% { color: var(--mainColor); }
    50% { color: var(--mainColor); }
    100% { color: white; }
}
@-moz-keyframes color-change {
    0% { color: var(--mainColor); }
    50% { color: var(--mainColor); }
    100% { color: white; }
}
@-ms-keyframes color-change {
    0% { color: var(--mainColor); }
    50% { color: var(--mainColor); }
    100% { color: white; }
}
@-o-keyframes color-change {
    0% { color: var(--mainColor); }
    50% { color: var(--mainColor); }
    100% { color: white; }
}
@keyframes color-change {
    0% { color: var(--mainColor); }
    50% { color: var(--mainColor); }
    100% { color: white; }
}


#covid { display:block;text-align:center;width:98%;float:left;margin:0 1%;background-color:#000;height:5rem;line-height:5rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem; text-decoration:none;
    box-shadow:4px 4px var(--mainColor);  font-weight:bold;
-webkit-animation: color-change 1s infinite;
    -moz-animation: color-change 1s infinite;
    -o-animation: color-change 1s infinite;
    -ms-animation: color-change 1s infinite;
    animation: color-change 1s infinite;

}
.covDeux {  
-webkit-animation: color-bouge 1s infinite !important;
    -moz-animation: color-bouge 1s infinite !important;
    -o-animation: color-bouge 1s infinite !important;
    -ms-animation: color-bouge 1s infinite !important;
    animation: color-bouge 1s infinite !important;
}
#covid:hover { 
box-shadow:4px 4px gray; 
}
.tbl-compare { table-layout:fixed; font-size:.7rem; margin:0; padding:0; 
  border-collapse: collapse;  text-align:center; background-color:white;
    border: 1px solid black ;  display:inline-table;clear:both
}
.tbl-compare  b {  font-size:.9rem;font-weight: bold }
.tbl-compare  td  { padding:.4rem;border:1px dashed #ddd; }
.tbl-compare  a  { font-size:.6rem !important;  }
.tbl-compare  tr:hover {  background-color:#ddd }
.tbl-compare  thead > tr > td { border-bottom:  1px solid black;  }
.tbl-compare  thead , .tbl-double th 
    { padding:.6rem !important; font-style:italic;font-weight:.65rem;background:var(--mainColor); font-weight: bold}
 
td.hover,
tr.hover { background-color: #ddd; } 



html, body {  height: 100%; }
main 
{    padding-left:30%;
     width:64%;   /* avant 64? */
     padding-top:3.3rem;
    padding-bottom: 4rem;
    overflow: hidden;
}
#main-classique
{
     padding-top:0rem;
     padding-left: 5%;
     padding-right:5%;
         width:88%;
             padding-bottom: 4rem;
    overflow: auto;
}  
#main-fantome
{
     padding-top:0;
     padding-left: 0;
     padding-right:0;
         width:100%;
     padding-bottom: 4rem;
    /* overflow: auto; */
}  

#wrap {
  min-height: 100%;
}
#allo { 
    z-index:7; cursor:pointer;
    -webkit-transition: 0.2s ease; 
    -moz-transition: 0.2s ease; 
    transition: 0.2s ease;
    position:fixed; 
    height:18rem; width:17rem;
    right:-16rem; bottom:-16rem; 
    border-radius:50%;
    background-color:#eee; text-align:center;
    padding-top:6rem;padding-right:7rem;
    font-size:.8rem; opacity:.8; color:#eee;
}
#allo:hover {right:-12rem;bottom:-12rem; opacity:1; color:white;background:black}
#allo > span { display:inline-block;font-family:'agrandirNormalHeavy';font-size:2.2rem; margin-top:-2rem;margin-left:-1rem}
#allo:hover > span { display:none }; 
#allo > a   {font-family:'agrandirNormal';  }


.lexique { background-color: #E0FCED; cursor:help }
.lexique:hover { background-color: none; color: --mainColor }

#top-bord { height:3.25rem;background-color:--mainColor;width:100%;display:block; }


   .tousles { display:inline-block;float:right; text-decoration:none; border-bottom: 1px solid var(--mainColor); color: black; font-size:.85rem ; transform: skewX(10deg); margin-bottom:3px; padding-bottom:1px }
        .tousles:hover {transform: skewX(-10deg); margin-bottom:1px;  padding-bottom:3px}







/* OFFRES D'EMPLOI */
.index-liste-emploi  
{  text-decoration:none; color: white;
    display:block;padding-top:8px;padding-bottom:8px;margin-bottom:1rem;
    padding-left:12px;margin-left:-24px;
     border-left:16px solid transparent;
    padding-right:8px;
}
.index-liste-emploi:hover
{  border-left:16px solid var(--mainColor);
   padding-left:20px;margin-left:-24px;
    padding-right:0px;
}
.index-liste-emploi  > u
{   text-decoration:none;font-size:.85rem;
    text-transform:lowercase;color:var(--mainColor)
}
.index-liste-emploi > b 
{   font-family:'agrandirNormalHeavy';
    font-size:1.1rem
}
.index-liste-emploi-contrat 
{    font-size:.7rem; font-weight:bold;
     padding:.1rem;
     background:var(--mainColor);color:black
}
.index-liste-emploi-structure
{   font-size:.8rem;text-transform:uppercase
}


.megatitremenumobile { border-bottom:1px solid var(--mainColor); margin-top:-1rem !important;}

/* APPELS PROJETS */
.index-total-approjet {
    text-decoration:none;margin-bottom:1.5rem; 
    display:block;
    box-shadow: 5px 5px white;
}
.index-total-approjet:hover > .index-carre-approjet {  
     background-color:#000; color:white !important;
    box-shadow: 5px 5px var(--mainColor);
} 
 
.index-liste-approjet-photo { margin-left:5%;width:90%;padding:2.5%;height:4.5rem; z-index:2;position:relative }
.index-carre-approjet {
    background-color:var(--mainColor);margin-left:5%;width:90%;padding:2.5%;color:black;display:block;  
    padding-bottom:.5rem; z-index:1; position:relative
} 
.index-liste-approjet  
{  text-decoration:none; 
margin-top:.5rem;margin-left:.25rem;margin-bottom:.35rem
}
.index-liste-approjet  > u
{   text-decoration:none;font-size:.85rem;
    text-transform:lowercase; 
}
.index-liste-approjet > b 
{   font-family:'agrandirNormalHeavy';
    font-size:1.1rem ; 
}
.index-liste-approjet-type 
{    font-size:.7rem; font-weight:bold;
     padding:.1rem; display:inline-block;  
     background:black;color:white;margin-bottom:.1rem;
         text-transform:uppercase;
}
.index-liste-approjet-porteurs 
{    font-size:.7rem; font-weight:bold;
     padding:.1rem; display:inline-block; margin-top:-.2rem;padding-bottom:0;margin-bottom:.3rem;
         text-transform:uppercase;
}
.index-liste-approjet-texte
{   font-size:.8rem;  
}




/* FOOTER BAS DE PAGE CENTRALE */
#footer 
{   
    width:96%;  
    background:black;display:block; 
    padding:1.5rem 2% 2rem 2%;
    font-size:.75rem; 
    font-family:'agrandirNormal';
    color:white;
    z-index:5;
    position: relative; clear: both;
  margin-top: -6rem; height:2.5rem;
}
#footer  a { 
     text-decoration:none; color:white; 
    border-bottom: 4px solid black;
     line-height:1.2rem;
}
#footer a:hover { 
    border-bottom: 1px solid var(--mainColor);
}


/* MENU PRINCIPALE ID */


.sousmenu { position:fixed;top:3rem;
    background-color:black; 
z-index:55; display:none;
}
.soussousmenu  { display:block;
    text-decoration:none;color:var(--mainColor); 
    padding:0 2rem;
}
.soussousmenu:hover { 
    background-color:var(--mainColor); color:black; 
    cursor:pointer;
}
/* sous menu mediathqèeu */
#informations:hover > .sousmenu { display:block !important ;  }
#mediatheque:hover > .sousmenu { display:block !important ; }
#informations { cursor:crosshair !important  }
#mediatheque { cursor:crosshair !important  }


 


/* menu smartphone */
@media only screen and (min-width:0px) and (max-width:720px) 
{
    
    .carre-index { }
    .rang-index { }
    
    .video-block { display:block;float:left;margin-left:5%;width:90% }
    
.funfact { display:none !important; }
    
    #menu:not(:target) { display: none; }
    
	#menu:target {  display:block; position:fixed; left:0; top:0; width:100%;height:100% ; background:black;z-index:9999; overflow:scroll
    }
    .menu-titre { display:block; text-align:center;
        width:100%;  font-size:1.75rem; 
        text-decoration:none;
        color:var(--mainColor); font-family:'agrandirNormalHeavy';
        margin: .01rem 0; padding: .2rem 0;padding-top:.5rem;
    }
    .menu-titre:hover { color:black; background:white}
#burger { 
    
    position:fixed; height:6rem; width:13rem;
     border-radius:50%;
 top:-16rem; right:-16rem;
    padding-top:17rem;padding-right:12rem;
    font-size:.8rem; opacity:.9;  
    
    
    display:block; position:fixed; z-index:995; color:white; font-size:2.2rem; background:black;   text-align:center;  
    
    } 
     .phoneHidden { display:none !important; } 
    .deskHidden { }
    .phoneForm { line-height:3rem !important; display:block;padding:1rem 10%;width:80%; }
    .form-menu { height:3rem !important;line-height:3rem !important;font-size:2rem !important; }
    
    
    /* guide accomp */
    .carte-guide-accomp { display:none; }
    .results-guide-accomp { width:99% !important }
    
}
/* ordi */
@media only screen and (min-width:721px) 
{
    .carre-index {
        -webkit-flex: 1;   -ms-flex: 1;   flex: 1; 
    }
    .rang-index { display: -webkit-flex;  display: flex; }
    
        .video-block { display:block;float:left;margin-left:5%;width:45% }
    
    
     #burger { display:none !important; }
    .deskHidden { display:none !important; }
    .phoneHidden { }
#menu 
{   font-family:'agrandirNormalHeavy';
    width:100%;height:3rem; color:var(--mainColor); 
    background:black;position:fixed;z-index:3;line-height:3rem;left:0;top:0; 
    z-index:100; margin:0;padding:0
}
   
.menu-titre { display:inline-block; color:var(--mainColor); text-decoration:none; padding-right:.7rem;
padding-left:.7rem; padding-top:0;padding-bottom: 0; font-size:.95rem; height:3rem; line-height:3rem; margin:0;
}
   
    .menu-titre-selected { color:black; background:var(--mainColor)}
    .menu-titre:hover { color:black; background:white}
    
    
    /* guide accomp */
    .carte-guide-accomp { display:block; }
    .results-guide-accomp {}
    
} /* fin de menu ordi */


.menu-titre-black { display:inline-block; color:white; text-decoration:none; padding-right:.7rem;
padding-left:.7rem; padding-top:0;padding-bottom: 0; font-size:.75rem; height:3rem; line-height:3rem; margin:0;
} 






/* urgences covid */

.urg-block-vert { background-color:black;color:white;box-shadow: 4px 4px #aaa;
}
.urg-block-faq {  background-image:url('https://www.music-hdf.org/img/back-diag-lines.jpg');color:black;box-shadow: 4px 4px black;background-size: cover;background-repeat: no-repeat;
}
.urg-block-noir {  background-color:var(--mainColor);color:black;box-shadow: 4px 4px black
}
.urg-block-gris {  background-color:#ddd;color:black;box-shadow: 4px 4px var(--mainColor)
}
.urg-block-red {  background-color:#ddd;color:black;box-shadow: 4px 4px red
}
.covActu { margin-top:.15rem;margin-bottom:.15rem; width:95%; display:inline-block }
.covActu:hover { margin-left:1%; 
    border-left: 1px solid #ddd; padding-left:.5rem;
}


.newCov {  display:block;  
    text-decoration:none;color:black;width:97%;text-align:left !important;padding-right:.45rem;padding-bottom:.55rem;font-size:.8rem;  padding-left:.5rem;
    border-left: 2px solid transparent; 
}
.newFocus .urg-type { margin-left:-.65rem }
.newInfo  {background:#ddd ; border-left: 2px solid #000;}
.newCov:hover {  
    border-left: 2px solid #666; } 
.newCov > b { font-family:'agrandirNormal';font-size:1.15rem !important; margin-bottom:.25rem; margin-top:.15rem;display: inline-block}
.decret { color:#666;font-weight:normal;font-style:italic;text-decoration:none;font-size:.7rem;font-weight: bold ; border-bottom: 1px solid var(--mainColor) }
.decret:hover { color:black;  border-bottom: 1px solid black }
.newFocus { background:var(--mainColor) }
 

.urg-block-base {
    float:left; display: block;
    text-align:center;text-decoration:none;font-size:.8rem;
    font-family:'agrandirNormal';height:10rem; overflow:hidden;padding:.5rem;width:29%;margin-left:20px;margin-bottom:22px; 
    margin-top:0; padding-top:.8rem}
.urg-block-base b { display:inline-block;padding:.5rem }
.urg-block-base:hover   {
    margin-top:4px;margin-left:24px; margin-bottom:18px;margin-right:-4px; box-shadow: none!important
}

.urg-horod {margin-left:-.65rem;color:black; text-transform:uppercase;font-weight:bold;font-size:.65rem;line-height:.7rem;padding: .25rem .35rem;display:inline-block; background:var(--mainColor);margin-bottom:.35rem}
.urg-type {color:black; text-transform:uppercase;font-size:.65rem;line-height:.7rem;padding: .25rem .35rem;display:inline-block; background:#ddd;margin-bottom:.35rem}
.newInfos .urg-type { background:black;color:white }

 .urg-bloc { text-align:left;width:29%;padding:.5rem;height:10rem;overflow:hidden;float:left;text-decoration:none;color:black;font-size:.8rem;margin-left:20px;margin-bottom:22px; 
    margin-top:0; padding-top:.8rem;
    box-shadow: 4px 4px var(--mainColor);
     background:#eee
}
.urg-bloc:hover {  box-shadow: none!important; margin-top:4px;margin-left:24px; margin-bottom:18px;margin-right:-4px; 
}
.sousSingle { border:1px dashed var(--mainColor) !important;font-size:.75rem;margin:.1rem;padding:.2rem; }
.urg-nota { font-size:.8rem;margin-bottom:.5rem;display:inline-block;border-bottom:1px solid var(--mainColor) }
.showSingle { cursor: crosshair; border:1px solid black;
    padding:.4rem; background-color: #ededed;margin:.2rem; margin-bottom:0; font-size:.85rem;
} .tout { background-color:  black; color:white}
.bckGris:hover { background:#ededed }
.bckGris { min-height:4.6rem;float:left;margin:1.3%;text-align:center;padding:1%;width:44%;border:3px solid var(--mainColor);font-size:.8rem;text-decoration:none;color:black }



h1 { text-indent: -9999px; display: inline-block;line-height:2px; margin:0;padding:0 }

.jumptarget  {
 padding-top: 6rem;
    margin-top: -6rem;
}

/* PAGE INDEX ACCUEIL */

.en-savoir-plus { float:right;font-family:'agrandirNormal'; font-size:.75rem; text-decoration:none;display:inline-block;padding-top:.6rem;padding-top:-.5rem;padding-right:.5rem}
.en-savoir-plus:hover { font-style:italic}

 .publi-liste-square {
    width:100%;min-height:6rem;
    float:left; 
    text-decoration:none;  display:block;
     background:var(--mainColor); color:black;
     text-align:center;
}

.publi-liste-bloc { width:90%;margin-left:5%;margin-right:5%;   position:relative; display:block}
 .boum { background-size:cover;background-repeat:no-repeat;width:45%;height:80%; position:absolute; display:block; left:0;top:0;
}
.publi-liste-bloc:hover  > * > * > * > .boum {
   background-size: contain;
}
 
 .publi-liste-bloc:hover  > * >* >* > .publi-liste-square { background:black;color:white}

 .index-rando-square {
    width:90%; height:100%;
    float:left; padding: 0 5% 1rem 5%;
    text-decoration:none;
     overflow:hidden;
      display:block;
     background:var(--mainColor); color:black;
     text-align:center; 
 }
.index-rando-nomannee { 
    text-transform:uppercase;
    font-weight:normal;
    font-size:.85rem;
    font-style:oblique;
    margin-top:.25rem;
    display:inline-block;  
    border-bottom: 1px solid black
}
 .index-rando-square  > span { 
     font-family:'agrandirNormal'; font-size:.8rem; 
     display:inline-block; margin-bottom:.5rem; width:90%;margin-left:auto;margin-right: auto;
     text-transform: uppercase;
}
 .index-rando-square  > b { line-height:.9rem ; font-size:1.05rem;}
 .index-rando-square:hover {
     background:black; color:white; 
     box-shadow: 6px 6px var(--mainColor);
}  
 .index-rando-square:hover > b {color:var(--mainColor);}
.tilt { transform:rotate(0);  }
.tilt:hover { transform:rotate(-1deg); }


/* LISTE D'EVENEMENTS */
.ev-type { text-transform:uppercase;font-size:.75rem;background-color:var(--mainColor);font-family:Arial;color:black;display:block;padding:.15rem; 

}
.event-liste-container { position: relative;  	color:black;text-decoration:none;
    font-size:.9rem;
    -webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s; }
.event-liste-date { 
float:left;background:black;color:white;width:30%;text-align:center;z-index:5;font-size:1.3rem;padding-top:1rem;
    font-family:'agrandirNormalHeavy';color:var(--mainColor);-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s; 
} 

.event-tablo { cursor:pointer ; overflow:hidden;
    width:100%;padding:0;margin:0;
    padding-bottom:.5rem;
    margin-bottom:1rem;

}
.event-tablo:hover .event-liste-container > .event-liste-txt > .event-liste-img {
    left:30%; 
}
.event-texte-dessous { display:inline-block;clear:both; font-size:.8rem;padding-top:.5rem; }
.event-tablo:hover .event-texte-dessous { color:white ;  }
 .event-liste-container:hover >.event-liste-date { color:white;
}
.event-liste-container:hover > .event-liste-txt > .event-liste-img {
    left:30%;
}
.event-liste-container:hover > .event-liste-date > .ev-type { display:none; }


.event-liste-img { 	
    
    /* box-shadow: 5px 5px #8ef7bc; */
    -webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s; 
position:absolute;left:-100%;top:0;width:70%;
    background:grey;z-index:4; height:180%;
background-size:cover; 
 background-position:50% 50%;
}
.event-liste-txt {   background:white !important;
    left:30%;top:0;width:67%;
    padding-left:3%;overflow:hidden; 
    line-height:.8rem;
    font-size:.75rem; 
    padding-top:.25rem;
}
.event-liste-txt >  b { 
    font-family:'agrandirNormalHeavy';
    font-size:1rem; 
    line-height:.95rem;
    text-transform:uppercase;
}
.event-liste-txt >  span { 
    text-transform:uppercase;
    font-size:.75rem; line-height:1.15rem; 
}
/* MENU NAV CONSEILS FICHES RESSOURCES  */

nav 
{   background:var(--mainColor); width:23%;
    position:fixed; height:95%; 
    font-family:'agrandirNormal';
    padding:1.5%; padding-top:4rem;
    overflow-y: hidden;  /* scroll */
    overflow-x: hidden;
    z-index:6;
}
.nav-entree
{   display:block;
    width:100%;
}
.nav-liste 
{   display:none;
    margin-bottom:1.5rem;
    font-size:.9rem;
    margin-top:-.4rem
}
.nav-entree:hover > .nav-entree-titre {  cursor:crosshair}
.nav-entree:hover > .nav-liste { display:block}
.nav-entree-titre 
{   color:black; text-decoration:none; 
    display:block; width:107%;
    padding:.6rem 0rem .3rem .3rem ;
	font-size:1rem; font-family:'agrandirNormalHeavy';
    text-transform:uppercase;
} 
.nav-entree-titre-selected 
{  color:black;
   background:#f7f6f5; 
}

.nav-liste-selected
{   
}
 .nav-fiche 
{   width:95%; border-bottom:1px solid white;
    display:block; height:2rem; line-height:2.2rem;
    color:black; text-decoration:none;
	overflow:hidden; white-space:nowrap; 
    padding-left:.5rem;
}
.nav-fiche:hover { background:black;color:white;cursor:pointer } 
.nav-fiche-selected { background:#f7f6f5 !important;cursor:normal !important; color:black !important;font-family:'agrandirNormalHeavy';}




.bouton-newsletter { position:relative;float:right;text-transform:uppercase;font-size:.9rem;line-height:1rem;margin-right:1rem;cursor:pointer;background-color:var(--mainColor);color:black;text-align:right;margin-right:1.5rem;display:inline-block;
     box-shadow:3px 3px black;z-index:5;padding:.5rem;padding-bottom:.25rem;margin-top:-5px;font-family:'agrandirNormal'; }

.bouton-newsletter:hover {
     box-shadow:0px 0px transparent;
    margin-top:-2px;margin-right:.85rem;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
 
/* ENTETES INDEX CATEGO */
.index-container { 
}
.index-barre { position:absolute;margin-top:.4rem;width:30%;border:4px solid black; }
.index-titre { position:absolute;display:inline-block;background:white;z-index:4;color:black; }

.form-style
{   font-weight:bold;
    text-transform:uppercase;
    margin-top:1px;
    margin-left:.25rem;
    width:80%; background-color:white;
    border-radius:0;
    padding-left:.25rem;
    line-height:1.25rem;
    border:1px solid black; 
    height:1.25rem;
}
 
select { 
    -webkit-appearance: menulist-button;  
}
select { height:1.6rem !important; 
-webkit-appearance: none;
  -moz-appearance: none; 
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: .1rem;
    width:95% !important;
    text-transform:uppercase;
}  
.form-go 
{   background:black;
    color:var(--mainColor);
    display:block;
    height:3.5rem;
    padding-top:.5rem;
    line-height:1.5rem;
    text-align:center;
    text-decoration:none;
    width:100% !important; 
    margin-left:5px;
    font-size:.8rem;color:white;
    font-family:'agrandirNormalHeavy';
    box-shadow: white 4px 4px ; 
}
.form-go:active
{
    box-shadow: white 1px 1px ;
    margin-top:3px;
    margin-left:8px;
    margin-bottom:-3px;
    margin-right:-3px;
    color:var(--mainColor);
}


/* MENU FILTRE CONTACTS STRUCTURES ANNUAIRE */
.tout-aff { 
    box-shadow: var(--mainColor) 4px 4px ;
    background:black;color:white; font-family:'agrandirNormal'; text-decoration:none;
    padding:1.5%; display:block; width:20%; text-align:center;margin-left:auto;margin-right:auto;
}
.tout-aff:active
{
    box-shadow: black 1px 1px ;
    margin-top:3px; 
    margin-bottom:-3px; 
    color:var(--mainColor);
}
#affiner 
{   width:6rem !important;
    position:fixed;
   background-color:var(--mainColor);
   background:var(--mainColor); 
   text-align:center;font-size:1.66rem; color:black;top:3rem;right:3.75rem;z-index:90;padding-top:1rem;box-shadow: none;
}  
#affiner:hover~#filtre{
     margin-top:0rem !important
}
#affiner:hover { display:none  !important; }
#filtre:hover > #affiner { display:none  !important; }
#filtre:hover { margin-top:0rem !important;  }
#filtre 
{   background:var(--mainColor);  
    position:relative; width:97%; 
    font-family:'agrandirNormal';
    padding:1.5%; padding-top:3.5rem;
    z-index:10;
    overflow-y: hidden; /* scroll */  
    overflow-x: hidden;
    height:9.5rem;overflow:none;
}
.resultats { position:fixed;top:8rem;left:-2.5rem;display:block;width:7rem;padding:.25rem;text-align:center;color:black;z-index:90; transform: rotate(-90deg);

}

/* menu filtre-bottom (mdtq) */
#bottfiltre 
{   position:fixed;
    bottom:0;left:0;
    background:var(--mainColor);  
    width:97%; 
    font-family:'agrandirNormal';
    padding:1.5%; padding-bottom:1rem;
    z-index:10;
    overflow-y: scroll;  
    overflow-x: hidden;
    overflow:none;
     height:4.5rem;
}
#bottfiltre-bottspacer
{
   width:100%;clear:both;display:block; height:6rem;
}
 
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
 



/* LISTE REHCERCHE DES STRUCTURES */
@media only screen and (min-width:0px) and (max-width:859px) 
{
.structure-liste
{   display:block; float:left; position:relative;  
    width:92%;  padding:1.5% ; margin:.5rem 2.5%; height:8rem;
    overflow: hidden; text-decoration:none;
    color:black;
}
}
@media only screen and (min-width:860px) 
{
.structure-liste
{   display:block; float:left; position:relative;  
    width:42%;  padding:1.5%; margin:.5rem 2.5%; height:8rem; padding-top:.7rem;
    overflow: hidden; text-decoration:none;
    color:black;
    border-bottom:1px solid black; margin-bottom:2.2rem;
}
}
.structure-liste:hover
{   
    background-color: #eeeeee;  
    border-radius: 0 2rem 0 0;
    border-bottom:1px solid var(--mainColor);
}
.structure-liste:hover .titrage { border-color:black !important}
.structure-liste-visuel
{   display:block; float:left; position:relative; 
    width:30%; height:100%; 
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%); 
}
.structure-liste-infos, .structure-fiche-infos
{   display:block; float:left; position:relative; 
    width:65%; margin-left:5%;
}
.structure-liste-infos > span 
{   font-size:.8rem;
    color: var(--mainColor); 
    display:block; text-transform:lowercase;
    font-weight:bold; line-height: 1.05rem;
    text-indent: -1rem;margin-left:.8rem 
}

.structure-fiche-infos > span 
{   font-size:.8rem;
    color:black;background:var(--mainColor);
    margin-bottom:.2rem;margin-left:0rem;
    display:inline-block; text-transform:lowercase;
    font-weight:bold; line-height: 1.05rem;
}
.structure-fiche-infos > span:hover { margin-left:.5rem; }
.structure-liste:hover .structure-liste-infos > span  { color: black; }
 
 
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
 
.titrage { border-bottom:5px solid black;padding-bottom:3px;display:inline-block;margin-bottom:.8rem }


.funfact {
    float:right;border-left:4px solid var(--mainColor);width:25%;padding:1rem;padding-top:.3rem;margin:1rem;margin-left:2.5rem;margin-top:1.5rem;color:var(--mainColor);font-weight:bold; display:block;position:relative;
}


/* SQUARE */

.square
{   display:block; float:left;font-size:.75rem;
    width:27%;height:12rem;margin:1%;padding:2%;
    background:black;color:white;  text-decoration:none; 
}
.square:hover
{   background:var(--mainColor); color:black !important;
    cursor:pointer;
}
.square:hover > h5 { color:black; }
h5 
{   display:inline;font-size:1.1rem;
    font-family:'agrandirNormal'; color:var(--mainColor);
}

 .rechercher-conseil {  border-bottom:1px solid black;margin:0;padding:0;padding-bottom:.75rem;    border-radius:0 2REM 0 0;
      background-color:white;
     text-decoration:none !important; display:block;width:80%;margin-left:5%;padding-left:2.5%;padding-right:2.5%; } 
.rechercher-conseil:hover { margin-left:7.5%;margin-right:2.5%;
      background-color:#eeeeee;} 
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


/* FICHE */
#fiche-lien-container
{   display:block; float:left;
    border-left:4px solid black;
    width:24%; padding:.5rem 1rem; 
    margin-top:.75rem; width:100%;
    margin-left:1.5rem;
}
.fiche-lien
{   display:block; 
    margin-bottom:.75rem;  padding-left:3%; width:90%;
}
.fiche-lien:hover
{   padding-left:8%;width:90%;
} 
.fiche-lien-hash 
{   display:block;float:left;padding-right:.3rem;color:black;
}
.fiche-lien > span
{   font-size:1.2rem; line-height:1.2; color:black;
}
.fiche-lien > i
{   width:80%; text-decoration:none; color:black;
    font-weight:bold; line-height:1rem; 
    font-style:normal !important;
    font-size:.95rem; display:block; float:left;
    padding-left:.25rem
} 
.fiche-chapo {
    font-size:1rem;display:inline;border-bottom:1px solid var(--mainColor);
}
h2  /* titre page -  fiche */
{   display:inline-block; 
    font-size:1.4rem; line-height:1.2rem;
    padding-bottom:3px; margin-left:-.75rem;
    border-bottom:4px solid var(--mainColor);
    color:black; font-family:'agrandirNormal'; 
}
 :hover > .titrage > .fil {color:black}
h3  /* tags verts */
{   display:block;width:120%;height:.75rem;line-height:.75rem;color:var(--mainColor);font-size:.75rem;text-transform:uppercase;text-align:left;font-family:'agrandirNormal'; 
}
h4 /* titres paragraphes */
{  font-size:1.3rem;font-family:'agrandirNormal';line-height:1.4rem;text-transform:uppercase;display:inline }
.legende-backets { font-size:0.75rem;color:var(--mainColor);font-weight:bold;text-transform:uppercase }
/* textes lois et référencet */
.reference { padding: .07rem .2rem ; display:inline-block;background:#eee; font-size:.5rem;font-weight:bold;font-style:oblique;text-decoration:none;text-transform:uppercase}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
#mapid {
    position:fixed;
    top:0; left:-71%; width:76%;
    height:100%; margin-top:3.95rem;
}
#mapid:hover { left:0; }
#carte { box-shadow:0 0 white;
    height:2rem;width:2rem !important;position:fixed;bottom:2rem;left:2.5%; z-index:9999; }
#mapid:hover > #carte { left:75%; transform:rotate(180deg) } 

.spacer {
    height:.01rem;line-height:.01rem;font-size:.1rem; margin-top:-.5rem;
}

.liste-styles { display:block;float:left;margin:1px; font-size:.8em;font-family:'agrandirNormal';letter-spacing:-.05rem;line-height:.8em;
}
.a-txt {  color: #000; text-decoration:none; font-weight:bold}
.a-txt:hover {   text-decoration:underline;  }

.indent { margin-left:.7rem;margin-top:.25rem;}

ul { margin:0;margin-left:2.2rem;margin-top:.5rem; padding:0;   margin-right:30%  }
li { display:inline-block;margin-bottom:.5rem;list-style: none; text-indent: -1.5rem; } 
li::before  { content: "\25BA \00a0 \00a0";  font-weight:bold}


.inline-link, .a-lien { 
    
font-weight: bold; font-size:.9rem;
 background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 3px;
  color: #000;
margin-left:1rem; display:inline-block;  margin-bottom:.5rem;
  text-decoration: none;

  } 

.echeances { background:#eee;text-decoration:none; border-radius:10px; display:inline-block; padding:5px; color:black !important;
    font-weight:bold; font-size:.8rem;  }
.echeances:hover { background: var(--mainColor);  }


.breves {
     
    display:inline-block;margin-bottom:.5rem;line-height:.85rem;color:black;text-decoration:none; text-indent: -.9rem;
}
.breves:hover {
    margin-left:.5rem;margin-right:-.5rem;
}


.breve-container { overflow:hidden;   position:relative; 
    clear:both; display:block;
    display: -webkit-flex;  display: flex; 
  flex-direction: row;
    width:95%;
    margin-bottom:1rem;
    color:black;
    text-decoration:none; }

.presse-texte { overflow:hidden;   
   width:50%;float:right; display:block;  
}
.presse-image { 
    width:45%; margin-right:5%; 
    display:block;   float:left; position:relative;  
 background-size: cover !important; background-position:50% 50%;
background-color: gray;
}


.breve-container:hover > * > .inline-link {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%2374fbfd' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;
  text-decoration: none;
} 
.a-interne {  
 background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 3px;
  color: #000;
  display:inline-block; 
  text-decoration: none;
font-weight: bold; font-size:.9rem;
  }
.sous-titre { font-size:.95rem; font-weight: bold;
    font-family:'agrandirNormal';
    background:black;background-color:black;color:white; padding:.4rem .5rem  .25rem  .5rem ; margin-bottom:.5rem; display:inline-block }
.inline-link:hover, .a-lien:hover, .a-interne:hover { 
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%2374fbfd' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;
  text-decoration: none;
	}
/*
 .vid-title { padding:.15rem;width:55%;padding-top:2.25rem; padding-left:0; padding-right:0; }
.vid-tout {  margin-top:-2.25rem;  } 
.vid-tout:hover { margin-top:0;margin-bottom:-2.25rem; }
.vid-tout:hover > .index-container > .vid-title { padding-top:.15rem;display:none; } */.mhdfYT{position:relative;width:100%;height:0;padding-bottom:56.27198%;overflow:hidden}
.mhdfYT iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.mhdfYT .vid-back { width:100%;
    -webkit-transition: 0.25s ease; 
    -moz-transition: 0.25s ease; 
    transition: 0.25s ease;}
.mhdfYT:hover .vid-back { width:105%;margin-left:-2.5%;margin-top:0%}