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

 
        
        
.lien-bouton { /* from HF */
    text-align: center; 
    cursor:pointer; margin:.25rem .5rem;
    display:inline-block !important;
    background:var(--mainColor); color:black;
    border-radius:2rem;
    padding:.4rem .8rem;
    font-family:'obviously';
    font-weight:400;
    text-decoration:none;
    text-transform:uppercase;
    font-size:.7rem; line-height: .8rem;
}  
.lien-bouton:hover { color: white; background:black }


.lien-bouton_inverse { /* from HF */
    text-align: center; 
    cursor:pointer; margin:.25rem .5rem;
    display:inline-block !important;
    background:black; color:var(--mainColor);
    border-radius:2rem;
    padding:.4rem .8rem;
    font-family:'obviously';
    font-weight:400;
    text-decoration:none;
    text-transform:uppercase;
    font-size:.7rem; line-height: .8rem;
}  
.lien-bouton_inverse:hover { color: black; background:white }


 .ama-item-container { width:85%;margin:.75rem 5%;padding:1rem .5% .75rem 4.5%;border-bottom:1px solid black;margin-bottom:1.25rem;border-radius: 2rem 0 0 0; }
    .ama-item-container:hover { margin-left:7.5%;margin-right:0; border-color:var(--mainColor); 
        background-color:#eeeeee;
        }
    




.cercle {  text-indent:0; 
    transition: transform 0s;  
    display:inline-block;
    font-size: 0.9rem; font-family:'obviously';
    font-weight:400; 
    width: 1.1rem; padding-top:.06rem;
    height: 1.04rem; 
    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;  
}
.lien-outline {    
    cursor:pointer;
    line-height: 1.1rem !important; font-size: .9rem;
    text-decoration:none; color:black; text-indent:-1.5rem; margin-left:2rem;  
    font-family:'lores-12',Courier; display: block !important; padding-bottom:.05rem; margin-bottom:.5rem;   border-bottom: 1px dashed transparent;   } 
.lien-outline:hover > span { border-bottom: 1px dashed black;  }

.lien-outline:hover > .cercle,
ul > a:hover > .cercle {
  transition: transform .4s ease-in; 
      animation: horizontal-shaking .65s infinite;
}
 
 .lien-outline:hover { margin-left:2.25rem;  margin-right:-.25rem }

 @keyframes horizontal-shaking {
 0% { transform: translateX(0) }
 25% { transform: translateX(-1px) }
 50% { transform: translateX(-5px) }
 75% { transform: translateX(-1px) }
 100% { transform: translateX(0) }
} 


.titre-filtre {   color:black; text-decoration:none; 
    display:block; width:107%;
    padding:.6rem 0rem .3rem .3rem ;  
    text-transform:uppercase;
      font-family:'agrandirBold';font-size:.9rem;
} 

.podcast-ligne {
    border-bottom:1px solid #CCC;
}
.podcast-ligne:hover { 
            background:#eee; margin-left:-.5rem;margin-right:.5rem; }
.podcast-image { background-size:cover;background-position:center;height:6rem;width:100%;border-radius: 25px 0 0 0; }
.gray-link { color:var(--mainColor);text-decoration:none;display:inline-block;margin-left:.35rem;margin-right:.35rem; font-size:1.2rem; }
.gray-link:hover { color:black }

.titre-agrandir { display:block; color:black;text-decoration:none;
            font-family:'agrandirBold'; padding-bottom:4px;
         border-bottom: 1px solid var(--mainColor);
        }
        .titre-agrandir  > b { display:inline-block;color:#eee;font-family:Arial;
            -webkit-transition: 0.10s ease; 
            -moz-transition: 0.10s ease; 
            transition: 0.10s ease;}
        .titre-agrandir:hover > b { margin-left:.25rem; color:var(--mainColor);  display: inline-block }
        .breve-header { 
            border-radius: 25px 0 0 0;
            font-family:'agrandirBold';
            width:95%;padding:2.5%;
            background:var(--mainColor);
        }
        .breve-ligne {
            font-family:'Arial';
            width:90%;padding:1rem 5%;
            background:white;font-size:.85rem;  
            -webkit-transition: 0.10s ease; 
            -moz-transition: 0.10s ease; 
            transition: 0.10s ease;
            color:black; text-decoration: none;
            display: block;
            border-bottom: 1px solid #ccc;
        }
         .breve-ligne:hover {
            background:#fff;
            margin-left:-.5rem;margin-right:.5rem;
        }
        h6 {
            padding:0;margin:0;margin-bottom:.4rem;line-height: 1.15rem ! important;
            display:inline-block;font-weight:bold;font-size:1.1rem;
        }
        .breve-texte {
            display:block;font-size:.75rem;margin-top:.05rem;margin-bottom:.25rem;font-style: oblique; text-align: left;
        }
        .breve-image {
            background-size:cover;
            background-position: center;
            height:7rem;width:100%;margin-top:.7rem;
            border-radius: 0 0 25px 0;
        }
        .focus-image /* dans focus-texte */ {
            display: block;
            background-size:cover;
            background-position: center; margin-top:-1rem;
            height:34vh;width:111.5%; margin-left:-5.5%; 
            border-radius: 25px 0 0 0;
            margin-bottom:.9rem;
            -webkit-transition: 0.10s ease; 
            -moz-transition: 0.10s ease; 
            transition: 0.10s ease;
        }
        .focus-texte {
            display: block; text-align: left;
            font-family: Arial;
            font-size: .9rem; line-height: 1.1rem;
            width:94%;padding:1rem 3%;
            background-color: white;
            color:black; text-decoration:none; 
            border-radius: 25px 0 0 0;
            -webkit-transition: 0.10s ease; 
            -moz-transition: 0.10s ease; 
            transition: 0.10s ease;
            border-right: 1px solid #ccc;
            overflow: hidden;
        } 
        .focus-texte:hover { 
            background:#eee;
        }
        .focus-texte:hover .focus-image {
            transform: scale(1.05);
            transform-origin: top(-0.05);
        }
        .offre-bloc { 
            -webkit-transition: 0.10s ease; 
            -moz-transition: 0.10s ease; 
            transition: 0.10s ease;
            display:block;color:white;text-decoration:none;background:black;border-radius:25px 0 0 0;  font-family:'Arial'; width:85%; padding:1rem 7.5%;  border-bottom:  3px solid var(--mainColor); }
        .offre-bloc:hover { background:gray; border-bottom:  3px solid black;  } /*
.appels-back:hover { background-color:white !important;border-color:var(--mainColor)}
        .appels-back { background-color:#eee;border-top:1px solid black;border-radius:  0 0 0 25px; margin-bottom:1.75rem; } */
           .deadline { display:inline-block; margin-bottom:.4rem; text-align:right;font-weight:normal;background:var(--mainColor);color:black;font-style:normal;font-size:.65rem;margin-bottom:-.3rem;padding:3px 5px;border:1px solid var(--mainColor);border-radius:10px; }
        .date-fonce-hover:hover > b > .deadline { background:black !important; border-color:black !important; color:white }
        

.date-table .theLaDate { display:inline-block;margin-top:-.25rem; color:black;
            -webkit-transition: 0.10s ease; 
            -moz-transition: 0.10s ease; 
            transition: 0.10s ease;  }
        .date-table:hover .theLaDate { color:black }
        .date-back { display: block; color:black;text-decoration:none }
         .date-table:hover .date-back { background-color:black;
            border-radius: 25px 0 0 0; }  
        .date-table:hover { margin-left:2.5%; margin-right:-2.5%; border-bottom: 4px solid white }
        .date-table { border-bottom: 4px solid transparent; 
            -webkit-transition: 0.10s ease; 
            -moz-transition: 0.10s ease; 
            transition: 0.10s ease; }
        .rdv-type { display:inline-block;margin-bottom:.3rem;font-family:'agrandirBold';font-size:.8rem;text-transform:lowercase; 
            -webkit-transition: 0.10s ease; 
            -moz-transition: 0.10s ease; 
            transition: 0.10s ease; }
        .date-table:hover .rdv-type { color:white}
    .deuxmillevingttrois {  display: block;width:90%;margin-left:auto;margin-right:auto; }
        .col-inside { display: block;width:92%;margin-left:auto;margin-right:auto;  }
 .col-inside-less { display: block;width:96%;margin-left:auto;margin-right:auto;  }
        #deuxmilleverttrois { display: block;width:90%;padding-left:5%;padding-right:5%; background-color:var(--mainColor); position:relative; }
        
        .home-rond { color:black;text-decoration:none;display: block; max-width:100%;background-color:var(--mainColor);
             min-width:28vh;min-height:28vh;
            width:15vw;height:15vw;border-radius:10vw;padding:0; margin-left:auto;margin-right:auto; }
                .home-rond:hover  { transform: scale(1.1) } 
        .home-rond:hover > img { transform: rotate(6deg) }
        .home-rond:hover >  .titre-agrandir { transform: scale(1.1) ;  padding-left: 10%;padding-right:-10% }
        
        .revue-image { background-size:cover;background-position:center;width:100%;border-radius:25px 0 0 0;height:7rem }
        .revue-back { background-color:transparent !important;
            -webkit-transition: 0.10s ease; 
            -moz-transition: 0.10s ease; 
            transition: 0.10s ease; }
        .revue-back:hover { background-color:white !important; }