/* Variables */

:root{

    /* Colors */
    --main: #000000;
    --secondary: #e6e6e6;
    --secondaryFade: rgba(230, 230, 230, 0.3);
    --secondaryFadeLighter: rgba(230, 230, 230, 0.4);
    --dark-main: #000000;
    --textColor: #000000;
    --white: #ffffff;

    /* Radius */
    --commonRadius: 8px;
    --imgRadius: 2rem;
    /* Button styles */
    --btnBg: #000000;
    --btnColor: #ffffff;
    --btnRadius: 2rem;
    --btnHoverBg: var(--secondary);
    --btnHoverColor: #000000;

    /* Share button styles */
    --shareBtnBorder: var(--secondary);
    --shareBtnColor: var(--main);
    --shareBtnBg: var(--secondary);
    --shareBtnHoverBg: var(--main);
    --shareBtnHoverColor: var(--secondary);

    /* Rating system */
    --starFill : #ffb400;
    --starEmpty : #cbcbcb;
    --error: #ff4d4f;

    /* Icons */
    --tagIcon : url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS10YWdzLWljb24gbHVjaWRlLXRhZ3MiPjxwYXRoIGQ9Ik0xMy4xNzIgMmEyIDIgMCAwIDEgMS40MTQuNTg2bDYuNzEgNi43MWEyLjQgMi40IDAgMCAxIDAgMy40MDhsLTQuNTkyIDQuNTkyYTIuNCAyLjQgMCAwIDEtMy40MDggMGwtNi43MS02LjcxQTIgMiAwIDAgMSA2IDkuMTcyVjNhMSAxIDAgMCAxIDEtMXoiLz48cGF0aCBkPSJNMiA3djYuMTcyYTIgMiAwIDAgMCAuNTg2IDEuNDE0bDYuNzEgNi43MWEyLjQgMi40IDAgMCAwIDMuMTkxLjE5MyIvPjxjaXJjbGUgY3g9IjEwLjUiIGN5PSI2LjUiIHI9Ii41IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=');
    --moveIcon : url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1tb3ZlLXJpZ2h0LWljb24gbHVjaWRlLW1vdmUtcmlnaHQiPjxwYXRoIGQ9Ik0xOCA4TDIyIDEyTDE4IDE2Ii8+PHBhdGggZD0iTTIgMTJIMjIiLz48L3N2Zz4=');
    --accordonIcon : url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1saXN0LWNoZXZyb25zLXVwLWRvd24taWNvbiBsdWNpZGUtbGlzdC1jaGV2cm9ucy11cC1kb3duIj48cGF0aCBkPSJNMyA1aDgiLz48cGF0aCBkPSJNMyAxMmg4Ii8+PHBhdGggZD0iTTMgMTloOCIvPjxwYXRoIGQ9Im0xNSA4IDMtMyAzIDMiLz48cGF0aCBkPSJtMTUgMTYgMyAzIDMtMyIvPjwvc3ZnPg==');
}


@keyframes bounceIt {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(3px)
    }

    100% {
        transform: translateX(0)
    }
}
.wp-block-list {
    margin-left: 0;
    margin-bottom: 1.25rem;
    list-style: disc;
    & li{
        margin: .4rem 0;
    }
}
.bg-blog-article{
    & p{
        margin-bottom: 1.25rem;
        & a{
            color: inherit;
            text-decoration: underline;
        }
    }
}

h1, h2, h3, h4, h5{
    font-weight: 600;
    margin-bottom: 1.25rem;
    line-height: 1.2;
}
h1{
    font-size: 2.5rem;
}
h2{
    font-size: 1.8rem;
}
h3{
    font-size: 1.4rem;
    text-transform: initial;
    letter-spacing: 0;
}
h4{
    font-size: 1.1rem;
    text-transform: initial;
}
h5{
    font-size: 1rem;
    text-transform: initial;
}
.has-large-font-size{
    font-size: 1.8rem !important;
    font-weight: 600;
    margin-bottom: .75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
}
.has-medium-font-size{
    font-size: 1.4rem !important;
    font-weight: 600;
    line-height: 1.2;
}
.wp-block-image{
    margin: 1rem 0;
    & img{
        border-radius: var(--imgRadius);
    }
}
.wp-block-media-text{
    margin: 2rem 0;
    & img{
        border-radius: var(--imgRadius);
    }
}
.wp-block-list{
    padding-left: 1rem;
}
.wp-block-table{
    margin: 2rem 0;
    max-width: 100%;
    & table{
        border-collapse: separate;
        border-color: transparent;
        border-spacing: 10px;
    }
    & thead{
        font-weight: 600;
        border-bottom-width: 1px;
        & th{
            background-color: var(--secondaryFadeLighter);
            border-color: transparent;
            border-radius: calc(var(--commonRadius) / 2);
        }
    }
    & tbody{
        & td{
            border-color: transparent;
            background-color: var(--secondaryFade);
            border-radius: calc(var(--commonRadius) / 2);
        }
    }
}

@media (max-width: 1400px) and (min-width:1201px) {
    .wp-block-table{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        & table{
            min-width: 800px;
            border-collapse: collapse;
            border-spacing: 0;
        }
        & th, td{
            white-space: normal;
            padding: .6rem .75rem;
            vertical-align: top;
            border-radius: 0 !important;
        }
    }
}

.wp-block-buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}
.wp-element-button{
    cursor: pointer;
    border: none;
    border-radius: var(--btnRadius);
    padding: .7rem 2rem;
    font-size: .9rem;
    font-weight: 600;
    background-color: var(--btnBg);
    color: var(--btnColor);
    text-decoration: none;
    transition: color .3s ease, background-color .3s ease;
    &:hover{
        background-color: var(--btnHoverBg);
        color: var(--btnHoverColor);
    }
}

.bg-blog-article{
    > .wp-block-group{
        width: 1500px;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        &.bg-header{
            width: 100%;
        }
        &.bg-flag-cta{
            width: calc(1500px - 10vw);
            max-width: 90%;
        }
    }
}
.bg-header{
    padding: 15rem 0 2rem 0;
    background-color: var(--main);
    position: relative;
    color: var(--white);
    & p{
        margin-bottom: 0;
    }
    & .wp-block-group__inner-container{
        width: 1500px;
        margin: 0 auto;
        max-width: 100%;
        padding: 0 5vw;
    }
    & > * {
        position: relative;
        z-index: 3;
        color: var(--white);
    }
    & .taxonomy-category{
        & a{
            color: var(--white);
        }
        &:before{
            content: '';
            width: 16px;
            height: 16px;
            background-image: var(--tagIcon);
            background-repeat: no-repeat;
            background-size: 16px 16px;
            display: inline-block;
            margin-right: 8px;
            vertical-align: middle;
            margin-top: -2px;
        }
    }
    & h1{
        margin-bottom: .5rem;
        text-wrap: balance;
    }
}

.bg-panel-and-content{
    padding: 0 5%;
    gap: 3rem;
    width: 1500px;
    max-width: 100%;
    margin: 2rem auto 4rem auto;
}

.is-sticky-panel {
	align-self: flex-start;
}

/* Bloc Author */

.bg-author{
	margin: 2rem 0;
	& .wp-block-group__inner-container{
		width: 700px;
		max-width: 100%;
		background-color: var(--secondaryFade);
		border-radius: var(--commonRadius);
		padding: 2rem;
	}
	& .wp-block-post-author{
		align-items: center;
	}
	& .wp-block-post-author__avatar{
		& img{
			border-radius: 50%;
		}
	}
	& .wp-block-post-author__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	& .wp-block-post-author__name{
		margin-bottom: .5rem;
	}
	& .author-linkedin{
		& a{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			&:hover{
				text-decoration: underline;
			}
		}
		& svg{
			fill: var(--textColor);
            width: 20px;
            height: 20px;
		}
		& span{
			margin-left: .3rem;
			color: var(--textColor);
			font-size: .8rem;
		}
	}
}

/* Bloc TOC (Plan de l'article) */
.bg-toc{
    border: 1px solid var(--secondary);
    padding: 1rem 1rem 1rem 1rem;
    border-radius: var(--commonRadius);
	margin-bottom: 1rem;
	& p{
		margin-bottom: .5rem;
	}
	& .bg-toc__list{
		list-style-type: none;
		padding-left: 0;
		margin: 0;
		& li{
			margin-bottom: .5rem;
		}
		& a{
			text-decoration: none;
			padding-left: 26px;
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0.2em;
				width: 16px;
				height: 16px;
				background-image: var(--moveIcon);
				background-repeat: no-repeat;
				background-size: 16px 16px;
			}
			&:hover{
				&::before{
					animation: bounceIt 1s infinite alternate;
				}
			}
		}
	}
}

/* Bloc sidebar banner */
.bg-panel-banner{
	.wp-block-image {
		& img {
			border-radius: var(--commonRadius);
		}
	}
}


/* Bloc résumé */

.bg-resume-wrapper{
	background-color: var(--secondaryFade);
	padding: 2rem;
	border-radius: var(--commonRadius);
	margin: 2rem 0;
	& .wp-block-group__inner-container{
		& > *:last-child{
			margin-bottom: 0;
		}
	}
}

/* Bloc good to know */

.bg-good-to-know{
	border: 1px solid var(--secondary);
	padding: 2rem;
	border-radius: var(--commonRadius);
	margin: 2rem 0;
	& .wp-block-group__inner-container{
		& > *:last-child{
			margin-bottom: 0;
		}
	}
}

/* Partage reseaux. */
.bg-share{
	margin: 2rem 0;
}
.bg-share-links {
	& ul {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
		list-style: none;
		padding: 0;
		margin-top: 1rem;
		margin-bottom: 1rem;
		& li{
			margin: 0;
		}
	}
	& a {
		text-decoration: none;
		border: 1px solid var(--shareBtnBorder);
		border-radius: var(--btnRadius);
		padding: 8px 12px;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--shareBtnColor);
		background-color: var(--shareBtnBg);
		&:hover {
			background-color: var(--shareBtnHoverBg);
			color: var(--shareBtnHoverColor);
		}
	}
	& .bg-share-links__linkedin{
		& svg{
			margin-top: -2px;
		}
	}
}


/* Bloc FAQ */
.bg-gutenberg-faq{
	padding: 2rem 5%;
    width: 1500px;
    margin: 0 auto;
    max-width: 100%;
	& .schema-faq-section{
		padding: 1rem;
		background-color: var(--secondaryFade);
		margin: 1rem 0;
		border-radius: var(--commonRadius);
		cursor: pointer;
		&:hover{
			background-color: var(--secondaryFadeLighter);
		}
		&.is-open .schema-faq-answer {
			display: block;
		}
	}
	& .schema-faq-question {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 600;
		position: relative;
		padding-left: 26px;
        line-height: 1;
		&:before{
			content: '';
			width: 16px;
			height: 16px;
			background-image: var(--accordonIcon);
			background-repeat: no-repeat;
			background-size: 16px 16px;
			position: absolute;
			left: 0;
			top: 0;
		}
		
	}
	& .schema-faq-answer{
		margin: 8px 0;
		padding: 0 0 0 26px;
		display: none;
	}
}

/* Related posts slider */
.bg-other-post{
	width: 100%;
	padding: 2rem 5%;
	width: 1500px;
	margin: 0 auto;
	max-width: 100%;
}
.bg-related-swiper {
	width: 100%;
	position: relative;
	padding-bottom: 4rem;
	margin-top: 1rem;
    &.few-slides{
        padding-bottom: 0;
        & .tranding-slider-control{
            display: none;
        }
    }
}
.bg-related-card {
	border-radius: var(--commonRadius);
	flex: 0 0 auto;
}
.bg-related-thumb {
	width: 100%;
	height: 200px;
	background-size: cover;
	background-position: center;
	border-radius: var(--commonRadius);
	margin-bottom: 8px;
}

.bg-related-title {
	font-size: 1.1rem;
	margin: 0 0 6px 0;
	text-transform: initial;
    letter-spacing: 0;
	text-wrap: balance;
	& a {
		color: inherit;
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
}
.bg-related-date {
	font-size: .9rem;
	color: var(--textColor);
	margin: 0;
}

.tranding-slider-control {
    bottom: .5rem;
	top: auto;
    width: 100%;
    & .swiper-button-next, & .swiper-button-prev {
		opacity: 1;
    }
}

/* Bloc pre-footer CTA */
.bg-flag-cta{
	background-color: var(--dark-main);
	padding: 2rem;
	width: 1500px;
	max-width: 90%;
	margin: 2rem auto;
	border-radius: var(--commonRadius);
    color: var(--white);
    & .wp-element-button {
        background-color: var(--white);
        color: var(--main);
        &:hover{
            background-color: var(--secondary);
            color: var(--main);
        }
    }
}


/* --- Simple star rating --- */
.csr-wrapper {
    display: inline-block;
    padding: 0;
}

.csr-title {
    font-size: 1.4rem;
    text-transform: initial;
    font-weight: bold;
}
.csr-label{
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--textColor);
}

.csr-stars {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.csr-star {
    appearance: none;
    border: none;
    background: transparent;
    width: 28px;
    height: 28px;
    cursor: pointer;
    position: relative;
    transition: transform 120ms ease, opacity 120ms ease;
    color: var(--starEmpty);
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.csr-star:hover,
.csr-star:focus-visible {
    transform: translateY(-1px) scale(1.04);
    outline: none;
    background: transparent;
}

.csr-star.csr-disabled {
    cursor: initial;
    opacity: 0.55;
    &:hover,
    &:focus-visible {
        transform: translateY(0) scale(1);
    }
}

.csr-star-base,
.csr-star-fill {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--starEmpty);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.95 6.07 6.7.56-5.1 4.57 1.54 6.65L12 16.9l-6.09 2.95 1.54-6.65-5.1-4.57 6.7-.56L12 2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.95 6.07 6.7.56-5.1 4.57 1.54 6.65L12 16.9l-6.09 2.95 1.54-6.65-5.1-4.57 6.7-.56L12 2z'/%3E%3C/svg%3E");
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: left;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left;
}

.csr-star-fill {
    background: var(--starFill);
    width: var(--fill, 0%);
    overflow: hidden;
}

.csr-has-votes{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    & div{
        &:first-child{
            &:after{
                content: '-';
                margin-left: .5rem;
            }
        }
    }
}
.csr-feedback {
    font-size: 14px;
    color: var(--textColor);
}

.csr-message {
    margin-top: 6px;
    font-size: 14px;
}

.csr-message.success {
    color: var(--textColor);
}

.csr-message.error {
    color: var(--error);
}

.csr-message.info {
    color: var(--textColor);
}

.csr-trap {
    position: absolute;
    left: -5000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Responsive styles */
@media (max-width: 1200px) {
    h1{
        font-size: 2rem;
    }
    h2{
        font-size: 1.6rem;
    }
    h3, .csr-title{
        font-size: 1.2rem;
    }
    h4, h5{
        font-size: 1rem;
    }
    .has-large-font-size{
        font-size: 1.6rem !important;
    }
    .has-medium-font-size{
        font-size: 1.1rem !important;
    }
    .bg-panel-and-content {
        margin-bottom: 0;
        gap: 0;
        &.wp-block-columns{
            flex-wrap: wrap !important;
        }
        & .wp-block-column {
            flex-basis: 100%!important;
        }
    }
	.is-sticky-panel {
		position: static;
	}
    .bg-panel-banner{
        display: none;
    }
}
@media (max-width: 900px) {
    .wp-block-table{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: auto !important;
        scrollbar-color: var(--textColor) var(--main) !important;
    }

    .wp-block-table table{
        min-width: 800px;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .wp-block-table th,
    .wp-block-table td{
        white-space: normal;
        padding: .6rem .75rem;
        vertical-align: top;
        border-radius: 0 !important;
    }

}
@media (max-width: 600px) {
    .wp-block-media-text>.wp-block-media-text__content {
        margin: 1rem 0;
        padding: 0;
    }
}

@media (max-width: 480px) {
    h1{
        font-size: 1.6rem;
        letter-spacing: 0px;
    }
    h2{
        font-size: 1.4rem;
        letter-spacing: 0px;
    }
    h3, .csr-title{
        font-size: 1.1rem;
        letter-spacing: 0px;
    }
    h4, h5{
        font-size: 1rem;
        letter-spacing: 0px;
    }
    .has-large-font-size{
        font-size: 1.4rem !important;
        letter-spacing: 0px;
    }
    .has-medium-font-size{
        font-size: 1rem !important;
        letter-spacing: 0px;
    }
    .bg-header {
        padding: 10rem 0 1rem 0;
        background-image: var(
        --post-thumbnail-medium,
        url('../../../../themes/aboral_2023/img/header-lite.jpg')
        );
        & .wp-block-group-is-layout-flex {
            gap: .2rem;
            & .wp-block-separator {
                opacity: 0;
                flex-basis: 100%;
                visibility: hidden;
                height: 0;
                border-width: 0px;
            }
        }
    }
    .bg-author {
        & .wp-block-group__inner-container {
            padding: 1rem;
        }
        & .wp-block-post-author__avatar {
            width: 40px;
            margin-right: .75rem;
        }
    }
    .bg-share-links {
        & ul {
            & li {
                & a{
                    width: 40px;
                    height: 40px;
                    padding: 8px;
                    & svg{
                        width: 100%;
                        height: 100%;
                    }
                    & span{
                        display: none;
                    }
                }
            }
        }
    }
}

@media (max-width: 380px){
    .csr-has-votes {
        gap: 0;
        margin-top: .5rem;
        & div {
            width: 100%;
            &:first-child {
                &:after{
                    content: none;
                }
            }
        }
    }
}