/*
	Theme Name: Caue 76
	Theme URI: https://www.caue76.fr
	Description: Un thème WordPress éco-conçu, mettant en avant un design épuré et écologique. Offrant une expérience utilisateur fluide, il intègre des fonctionnalités durables pour promouvoir la responsabilité environnementale.
	Author: Caue 76
	Author URI:
	Version: 1.0.0
	Stable tag: 1.0.0
	Requires at least: 6.0
	Tested up to: 6.4
	Requires PHP: 7.3
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: caue-76
	Tags: eco-design, accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/
@import url("https://fonts.googleapis.com/css?family=Questrial:400,300,700");
@import url("https://fonts.googleapis.com/css?family=League+Gothic:400,300,700");

h1, .tribe-events-single-event-title {
    text-transform: uppercase;
    font-size: 50px;
}

h1, h3 {
    font-family: 'League Gothic', sans-serif !important;
}

h2, h4, h5 {
    font-family: 'Questrial', sans-serif !important;
}

.btn, .wp-block-button__link {
    border-radius: 25px !important;
}

.custom-logo {
    max-width: revert !important;
}

.has-h3-font-and-size {
    font-family: 'League Gothic', sans-serif !important;
    font-size: 1.75rem;
    text-transform: uppercase;
}

/*gutenberg builder only*/
.has-primary-background-color {
    background-color:#0099A8;
    transition: background-color 0.3s;
}

.has-primary-background-color:hover {
    background-color:#161615;
}

.has-secondary-background-color {
    background-color:#161615;
    border: solid 1px #161615;
    color:#f8f9fa !important;
    transition: color 0.3s, background-color 0.3s;
}

.has-secondary-background-color a {
    color:#f8f9fa !important;
    transition: color 0.3s;
}

.has-info-background-color {
    background-color:#B9E0E5 !important;
    color:#161615;
    transition: color 0.3s, background-color 0.3s;
}

.has-info-background-color:hover, .btn-info:hover {
    background-color:#161615 !important;
    color:#f8f9fa !important;
}

.btn-info a {
    transition: color 0.3s;
}

.btn-info:hover a {
    color: #f8f9fa !important;
}

.has-secondary-background-color:hover, footer .btn-secondary:hover {
    background-color:white !important;
    color:#0099A8 !important;
    border: solid 1px #0099A8 !important;
}

.has-secondary-background-color:hover a {
    color:#0099A8 !important;
}

.has-light-background-color {
    background-color:#E8E8E8;
    transition: background-color 0.3s;
}

.wp-block-media-text {
    margin-bottom:1rem;
}

.wp-block-media-text__media {
    height: 100%;
}

.wp-block-media-text__media > img {
    height: 100%;
}

.has-zigzag {
    position: relative;
}

.has-zigzag::before {
    content: "";
    display: block !important;
    position: absolute;
    width: 175px;
    height: 15px;
    top: -30px;
    background-image: url('./assets/img/icons/zigzag.svg');
    background-repeat: no-repeat;
}
.has-zigzag.has-text-align-right::before {
    right: 0;
}

.prendre-rdv-button {
    position: relative;
}

.prendre-rdv-button > .wp-block-button__link {
    padding: 15px 25px 17px 70px !important;
    border-radius: 50px !important;
}

.prendre-rdv-button > .wp-block-button__link::before {
    content: "";
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    left: 25px;
    top: 25%;
    mask-image: url('./assets/img/icons/calendar.svg');
    background-color: #f8f9fa;
    mask-repeat: no-repeat;
    mask-position: left;
}
.breadcrumb-separator {
    margin: 0 10px;
}

/* masque le champs date et lieu des articles du plugin Events Calendar */
.tribe-events-schedule, .tribe-block__venue {
    display: none !important;
}

.home-agenda-entry-details {
    margin-bottom: 0;
}




/*gutenberg builder only*/





img {
    max-width: 100%;
    object-fit: cover;
}

.sub-menu li {
    list-style:none;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: #038491;
}

.logo-vertical-bar {
    display:flex;
    height:1000px;
}

.logo-mini {
    height:100%;
    flex-grow:1;
    margin-top: 300px;
    text-align: right;
}

.vertical-bar {
    height: 100%;
    flex-grow:2;
    border-left: solid 1px #e8e8e8;
    margin-top: 20px;
}

.mob-display {
    display:block;
}

.desk-display, .desk-text {
    display:none;
}

.desk-flex-display {
    display:none;
}

.btn-header {
    height:70px;
    border-radius: 0 !important;

}
.btn-white.border-primary svg {
    color:#0099A8;
}

.thumbnail-div img {
    width:180px;
    height:180px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.30), 0 3px 5px rgba(0,0,0,0.22);
}

.thumbnail-div img:hover {
    width:180px;
    height:180px;
    box-shadow: 0 10px 10px rgba(0,0,0,0.30), 0 10px 10px rgba(0,0,0,0.22);
}

.fit-content {
    width:fit-content;
}

.btn-info {
    border-radius: 25px;
}



footer ul {
    list-style: none;
}

.post-list {
    border-bottom:solid 1px #E8E8E8;
}

.post-list .no-gutters {
    min-height:200px;
}

.menu {
    padding-left:0;
}

.menu a:hover, .address-div a:hover {
   color: #0099A8 !important;
}

.address-div {
    max-width:300px;
}

.card-title {
    font-family: 'Questrial', sans-serif !important;
    font-size: 20px;
}

footer .btn-secondary a {
    color:#f8f9fa;
}

footer .btn-secondary a:hover {
    color:#0099A8;
}

.breadcrumb, .breadcrumb a {
    color:#0099A8;
}

/*form PRENEZ RENDEZ-VOUS EN LIGNE*/

.prendre-rdv {
    background-color: white;
    padding: 20px;
    border: solid 1px #E8E8E8;
}


.prendre-rdv .ginput_container.ginput_container_radio {
    border: solid 1px #E8E8E8;
    border-radius: 20px;
}



.prendre-rdv .gfield_radio .gchoice .gfield-choice-input {
    border: solid 1px #B9E0E5 !important;
    accent-color: #0099a8 !important;
    cursor: pointer;
}


.prendre-rdv input[type="radio"]:before {
    background-color: #0099a8 !important;
}




.prendre-rdv .ginput_container input[type=email], .prendre-rdv .ginput_container input[type=tel], .prendre-rdv .ginput_container input[type=text], .prendre-rdv .ginput_container textarea {
    border: solid 1px #E8E8E8 !important;
    border-radius: 20px !important;
    --gf-local-shadow: none !important;
    padding: 25px !important;

}

.prendre-rdv .ginput_container .chosen-single, .ginput_container input, .ginput_container textarea {
    border: 0px !important;
}

.prendre-rdv .percentbar_blue,  .prendre-rdv .button {
    background-color: #0099a8 !important;

}

.prendre-rdv legend.gfield_label, .prendre-rdv label.gfield_label {
    text-transform: none !important;
    font-family: League Gothic !important;
    font-size: 30px !important;
    font-weight:normal !important;
    color:#0099A8 !important;
}

.prendre-rdv .ginput_container .gform-field-label {
    font-family: Questrial !important;
    font-size: 18px !important;
    font-weight:normal !important;
}

.prendre-rdv .gfield_radio {
    gap:0px !important;
}

.prendre-rdv .gfield_radio .gchoice {
    padding:20px;
    border-bottom: solid 1px #E8E8E8 !important;
}

.prendre-rdv .gfield_radio .gchoice:last-child {
    border-bottom: none !important;
}

/*creneaux*/
.accordion-wrapper {
    border: solid 1px #E8E8E8 !important;
    border-radius: 20px !important;
    --gf-local-shadow: none !important;
    overflow: hidden;
    /*width: 600px;*/
    margin:0 auto;
    font-family: Questrial !important;
    font-size: 18px !important;
    font-weight:normal !important;
}


.accordion {
    width: 100%;
    overflow: hidden;
}
.accordion:last-child{
    margin-bottom: 0;
}
.accordion-label {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px;
    cursor: pointer;
    font-size: 20px;
    border-bottom: 1px solid #e7e9eb;
    align-items: center;
    text-align: left;

}

.accordion-label-open::after {
    content: "\276F";
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 16px;
    height: 16px;
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    color: #707070;
}

.accordion-label-closed::after {
    content: "\276F";
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 16px;
    height: 16px;
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    color: #707070;
}

.accordion-content {
    display:block;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    justify-content: center;
    border-bottom: 1px solid #e7e9eb;
}

.accordion-content .buttons-group {
    display: flex !important;
    margin-top:1rem;
    margin-bottom:1rem;
}
.accordion-content .buttons-group .rdv-heure {
    display:flex !important;
    flex-flow: column !important;
    margin-left: 5px;
}


.accordion-content p{
    margin: 0;
    font-size: 18px;
    padding-top: 10px;

}

.rdv-date{
    padding: 5px;
    flex-grow: 5;
    text-align:left;
}

.rdv-button{
    padding: 5px;
    flex-grow: 1;
    text-align:right;
}

.icon-visio{
    padding-right:10px;
}

.visio{
    background-color: #f2f2f2;
    color: #000000;
    padding: 10px 10px;
    border-radius: 25px;
    font-size: 0.8em;
    text-align: center;
    display: inline-block;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 50px;
}

.time{
    background-color: #cfecef !important;
    color: #000000;
    /* margin-right:5px !important;*/
    /*padding: 15px 30px;*/
    border-radius: 25px;
    font-size: 0.8em;
    text-align: center;
    display: inline-block;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.time:hover{
    background-color: #a8e1e7 !important;
    color: #000000;
    /* margin-right:5px !important;*/
    /* padding: 15px 30px;*/
    border-radius: 25px;
    font-size: 0.9em;
    text-align: center;
    display: inline-block;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.time .gchoice {
    padding:10px !important;

}

.time .gfield-choice-input {
    margin-right: 10px !important;
}

.titre-lieu-permanence {
    font-weight:bold;
}

.icone-permanence {
    float:left;
}
.contenu-lieu-permanence {
    background-color: #cfecef !important;
    color: #000000;
    padding: 15px 30px;
    border-radius: 15px;
    font-size: 1.2em;
    text-align: center;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    margin-top: 10px;
}

.pagination {
    float:right;
}
.page-numbers {
    background-color: #FFFFFF;
    border: solid 2px #E8E8E8;
    border-radius: 50% 50%;
    padding: 6px 11px;
    font-size: 12px;
    margin-right: 0.5rem;
}

.page-numbers.dots {
    background:none;
    border: none;
}

.page-numbers:hover, .pagination-item:active {
    background-color: #0099A8;
    color: #f8f9fa !important;
}

#cancel-success {
    margin-top:10px;
}

.grecaptcha-badge {
    bottom: 100px !important;
}

.gfield--type-captcha {
    visibility: hidden;
}

/*form PRENEZ RENDEZ-VOUS EN LIGNE*/

@media screen and (max-width: 768px) {

    .custom-logo {
        max-width: 90% !important;
        object-fit: contain;
    }

    .col-custom-logo {
        width: 80% !important;
    }

    .col-menu {
        width: 20% !important;
    }

}

@media screen and (min-width: 1024px) {

    .mob-display {
        display:none;
    }

    .desk-display, .desk-text {
        display: block;
    }

    .desk-display input{
        height:70px;
        border:none;
    }

    .desk-flex-display {
        display: flex;
    }
}

@media screen and (min-width: 768px) and (max-width: 1170px) {
    .col-custom-logo, .col-menu {
        width: 50%;
    }
}

@media screen and (max-width: 1475px) {
    .has-zigzag {
        margin-top: 5rem;
    }
}
