/* --------------------------- Site */
@font-face { font-family: 'cooperHewittHeavy'; src: url('../fonts/cooperhewitt-heavy-webfont.woff2') format('woff2'), url('../fonts/cooperhewitt-heavy-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'MountainsChristmas'; src: url('../fonts/mountainsofchristmas-webfont.woff2') format('woff2'), url('../fonts/mountainsofchristmas-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

.calendrier { font-size: 1.6em; font-family: "cooperHewittHeavy", "Helvetica Neue", sans-serif; line-height: 1.7; background: #f3f3f3; text-align: left; }
.calendrier { padding: 0% 2% 2% 2%; max-width: 2000px; margin: 0 auto; text-align: center; display: flow-root;}

.calendrier .texte-normal { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, "Sans Serif"; }

.calendrier .logo { display: block; width: 200px; position: absolute; top: 30px; left: 40px; }

/*.titre { width: 250px; font-size: 12px; text-align: center; letter-spacing: 3px; text-transform: uppercase; color: #111; margin: 0 auto; padding: 60px 0 65px 0; }*/
.calendrier .titre { font-family: Arial; font-size: 30px; max-width: 2000px; position: relative; background: #056B5C; color: #fff; text-align: center; line-height: 100px; margin: 80px 2% 40px 2%; }
.calendrier .titre_jp {font-size: 24px;}
/*.calendrier .titre:before, .calendrier .titre:after { content: ""; position: absolute; display: block; bottom: -15px; border: 35px solid #248c53; z-index: -1; }
.calendrier .titre:before { left: -45px; border-right-width: 30px; border-left-color: transparent; }
.calendrier .titre:after { right: -45px; border-left-width: 30px; border-right-color: transparent; }
.calendrier .titre .titre-inner:before, .calendrier .titre .titre-inner:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #106837 transparent transparent transparent; bottom: -15px; }
.calendrier .titre .titre-inner:before { left: 0; border-width: 15px 0 0 20px; }
.calendrier .titre .titre-inner:after { right: 0; border-width: 15px 20px 0 0; }*/

.calendrier .partager {float: right; padding-right: 0px;}
.calendrier .partager i { font-size: 40px; display: inline-block; padding-left: 10px; color: #6a6a6a !important;}


.calendrier .date { width: 21%;  padding-top: 21%;  margin: 0 2% 4% 2%; float: left; position: relative; background: #252525; border-radius: 50%; }

.calendrier .date-active { cursor: pointer; transition: all .15s ease-out; }
.calendrier .date-active:hover {transform: translateY(-15px); }

.calendrier .date-inactive .jour { background: #333; color: #fff; border-radius: 50%; box-shadow: 3px 7px 15px rgba(0, 0, 0, 0.35);}

.calendrier .jour { width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; margin: 0 0 0 0; color: #fff; font-size: 25px; border-radius: 0%; display: flex;  justify-content: center; align-items: center; }

.calendrier .info_calendrier {text-align: left;font-size: 16px !important;font-weight:normal; font-family:Helvetica,Roboto,Arial,sans-serif;margin:0px 2% 40px 2%}

/*.calendrier .couleur-01 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/1.png')}
.calendrier .couleur-02 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/2.png')}
.calendrier .couleur-03 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/3.png')}
.calendrier .couleur-04 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/4.png')}
.calendrier .couleur-05 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/5.png')}
.calendrier .couleur-06 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/6.png')}
.calendrier .couleur-07 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/7.png')}
.calendrier .couleur-08 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/8.png')}
.calendrier .couleur-09 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/9.png')}
.calendrier .couleur-10 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/10.png')}
.calendrier .couleur-11 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/11.png')}
.calendrier .couleur-12 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/12.png')}
.calendrier .couleur-13 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/13.png')}
.calendrier .couleur-14 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/14.png')}
.calendrier .couleur-15 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/15.png')}
.calendrier .couleur-16 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/16.png')}
.calendrier .couleur-17 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/17.png')}
.calendrier .couleur-18 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/18.png')}
.calendrier .couleur-19 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/19.png')}
.calendrier .couleur-20 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/20.png')}
.calendrier .couleur-21 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/21.png')}
.calendrier .couleur-22 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/22.png')}
.calendrier .couleur-23 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/23.png')}
.calendrier .couleur-24 { background-image: url('https://<?php echo $_SERVER["HTTP_HOST"];?>/lecalendrier/vignettes2024/24.png')}
*/



/* --------------------------- Modal */
.calendrier .modal { visibility: hidden; opacity: 0; z-index: 500; position: fixed; top: 50px; left: 50%; right: 0; bottom: 0; background: #e3e3e3; overflow-y: auto; padding: 40px 4%; transition: all .2s ease-out; }
.calendrier .modal-open { top: 0; opacity: 1; visibility: visible; }

.calendrier .close-modal { display: none; z-index: 450; position: fixed; top: 0; left: 0; right: 0; bottom: 0; }

.calendrier .disque { max-width: 900px; color: #444; text-align: left; }
.calendrier .close { position: absolute; top: 25px; right: 25px; width: 80px; height: 80px; cursor: pointer; }
.calendrier .close:before, .close:after { transform: rotate(-45deg); content: ''; position: absolute; top: 50%; left: 50%; margin-left: -40px; display: block; height: 3px; width: 80px; background-color: #888; transition: all .2s ease-out; }
.calendrier .close:after { transform: rotate(45deg); }
.calendrier .close:hover:before, .close:hover:after { transform: rotate(0deg); }

.calendrier .date-disque, h1 { font-size: 35px; line-height: 130px; color: #fff; }
.calendrier , .calendrier h2, .calendrier h2 a { line-height: 1.2; color: #111; }
.calendrier { font-size: 34px; margin: 0 0 10px 0; }
.calendrier h2 { font-size: 20px; margin: 0 0 7px 0; letter-spacing: 0px; text-transform: uppercase; position: relative; padding-left: 0px; }
/*.calendrier h2:before { content: ""; position: absolute; top: 45%; left: 0; width: 15px; height: 2px; background: #111; }*/
.calendrier h2 a:hover { line-height: 1.2; color: #e55325; }

.calendrier .vendeur {color: #111; padding-bottom:10px;}
.calendrier .vendeur a { margin-left: 3px; text-transform: uppercase; }
.calendrier .lien-cdandlp { margin: 0 0 20px 0; font-weight: bold; font-size: 20px;}
.calendrier .vendeur span {font-weight: bold;}

.calendrier .lien-cdandlp a, .calendrier .vendeur a, .calendrier a { position: relative; color: #e55325; transition: all .2s ease-out; }
.calendrier .lien-cdandlp a:before, .vendeur a:before { content: ""; position: absolute; top: 50%; left: 0; width: 0; height: 1px; background: #e55325; transition: all .1s ease-out; }
.calendrier .lien-cdandlp a:hover, .vendeur a:hover { padding-left: 21px; }
.calendrier .lien-cdandlp a:hover:before, .vendeur a:hover:before { width: 15px; }

.calendrier .description {
	font-size: 17px;
	line-height: 25px;	 
}

.calendrier .iframe-wrap { position: relative; height: 0; overflow: hidden; padding-bottom: 56.25%; margin: 40px 0; background: #d3d3d3; }
.calendrier .iframe-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 520; }

h3 { font-size: 20px ; }

.bloc_silo_article div.faq-item h3 {
  font-size: 14px;
  font-weight: bold;
  padding: 0 0 0 10px;
}

.bloc_silo_article div.faq-item p {
  padding: 0 0 10px 10px;
}

/* --------------------------- Responsive */
@media screen and (max-width: 1400px) {
    
    .calendrier .date { width: 21%; padding-top: 21%; }
    .calendrier .disque { max-width: 700px; }
    
    .calendrier .modal { left: 30%; }
    
}
@media screen and (max-width: 1200px) {
    
    .calendrier .modal { left: 10%; }
    
}
@media screen and (max-width: 1000px) {
    
    .calendrier .date { width: 29%; padding-top: 29%; }
    
}
@media screen and (max-width: 900px) {
    
    .calendrier .titre { margin: 60px auto 40px auto; line-height: 45px;}
    
    h1 {line-height: 50px;}

    .calendrier .modal { left: 0; }
    
}
@media screen and (max-width: 700px) {
    
    .calendrier .logo { left: 20px; }
    
    .calendrier .date { width: 46%; padding-top: 46%; }
    
    .calendrier .info_calendrier {display: none;}
    
}
@media screen and (max-width: 500px) {
    
    .calendrier .date-active:hover { transform: translateY(-7px); }
    .calendrier .jour { font-size: 16px; }
    
}