/*
* Sabord accueil liste produits
*/

/*
.js .sabord-accueil-liste-prod-cols.panel img {
    opacity:0;
    transform: perspective(80px) rotateX(0) rotateY(0);
    -webkit-transform: perspective(80px) rotateX(0) rotateY(0); 
    transition: 0.8s ease-in-out;
}
.js .sabord-accueil-liste-prod-cols.panel.open img {
    opacity:1;
    transform: perspective(80px) rotateX(0) rotateY(2deg);
    -webkit-transform: perspective(80px) rotateX(0) rotateY(2deg); 
    transition: 1s ease-in-out;
}
*/

:root {
    --couleur-principale: #0066ff;
    --couleur-secondaire: #9966ff;
    --couleur-secondaire-pale: #9966ff22;
}
strong {
    font-weight:600;
}

.sabord-accueil-liste-produits {
    --product-open-color: #f1f1f1;
    padding-top:0;
}

html.dark .sabord-accueil-liste-produits {
    --product-open-color: #a7a7a7;
}
.sabord-accueil-liste-prod-cols {
    display:grid;
    grid-template-columns:25% 70% 5%;
    grid-template-columns:25fr 70fr 5fr;
    align-content: start;
    grid-auto-flow: column;
    grid-gap:40px; 
}

.prod-cols-item.left img {
    border:1px solid rgba(0,0,0,0.1);
    max-width:100%;
    height:auto;
}

.prod-cols-item-short-description p:first-of-type,
.prod-cols-item-book-description p:first-of-type {
    padding-top:0;
    margin-top:0;
}

/*
.prod-cols-item-short-description {

}

.prod-cols-item-book-description {

}
*/

/* marquise */

.sabord-marquise-item {
    float: none!important;
    white-space: nowrap;
    font-weight: 400;
    font-size: 16px;
    line-height: 36px;
    padding: 0;
    overflow: hidden;
    width: 100%;
}
.sabord-marquise-item div {
    /*position: absolute;*/
    display: inline-block;
    color: black;
    line-height: 32px;
    -moz-animation: sabord-marquise 18s linear infinite;
    -webkit-animation: sabord-marquise 18s linear infinite;
    animation: sabord-marquise 18s linear infinite;
}
.sabord-marquise-nouvelle {
    color:#0066FF;
    text-decoration:none;
    transition:0.5s;
}
.sabord-marquise-nouvelle:hover {
    color:black;
    text-decoration:none;
    transition:0.5s;
}
.sabord-marquise-item span.sabord-separateur:after {
    content: '|';
    padding: 0 24px;
}
.sabord-marquise-item:hover div {
    animation-play-state: paused!important;
}
@media screen and (max-width: 768px) {
    .sabord-marquise-item {
        font-size: 14px;
    }
}
@keyframes sabord-marquise {
    0% {
    transform:translateZ(0);
    }
    to {
    transform:translate3d(-50%,0,0);
    }
}


/* aucun produit trouvé */
.sabord-accueil-liste-produits.empty {
    font-family:bold;
    margin: 50px 0;
}

/* accordeon */

/* triangle sur accordeon */
.prod-cols-item.arrow #sabord-triangle {
    fill:var(--couleur-principale);
    width:12px;
    height:12px;
}

.sabord-accueil-liste-prod-cols.accordion .prod-cols-item.arrow #sabord-triangle {
    transform:rotate(180deg);
    transform-origin: center;
    transition:0.4s;
}

.sabord-accueil-liste-prod-cols.accordion.active .prod-cols-item.arrow #sabord-triangle {
    transform:rotate(0deg);
    transform-origin: center;
    transition:0.4s;
}

.sabord-accueil-liste-prod-cols.accordion.active {
    background-color:var(--product-open-color);
    transition:max-height 1s;
}

.sabord-accueil-liste-prod-cols.accordion {
    margin:0;
    padding:16px 12px 42px 12px;
    background-color: white;
    width: 100%;
    border:none;
    border-top: 1px solid rgba(0,0,0,0.1);
    text-align: left;
    outline: none;
}
html.dark .sabord-accueil-liste-prod-cols.accordion {
    background-color:#d1d1d1;
}
.sabord-accueil-liste-prod-cols.accordion.courant {
    padding:16px 12px 16px 12px;
}

.active, .accordion:hover {
    background-color: var(--product-open-color);
    transition:0.3s;
}

.sabord-accueil-liste-prod-cols.panel {
    margin:0;
    padding:0 12px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-out;
}

.sabord-accueil-liste-prod-cols.panel.open {
    background-color: var(--product-open-color);
    transition: max-height 0.8s ease-out;
}

.sabord-accueil-liste-prod-cols.panel .spacer-top {
    height:12px;
}

.sabord-accueil-liste-prod-cols.panel .spacer-bottom {
    height:56px;
}

.prod-cols-item-book-name {
    font-size:18px;
    line-height:1;
}

.sabord-accueil-liste-prod-cols.accordion .prod-cols-item-book-name {
    transition:0.3s;
}

.sabord-accueil-liste-prod-cols.accordion.active .prod-cols-item-book-name {
    color:var(--couleur-principale);
    font-weight:bold;
    transition:0.3s;
}

.sabord-boutons-achat {
    font-size:18px;
    margin-top:40px;
    margin-bottom:12px;
}

.sabord-variation-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
}

.sabord-variation-buttons .button {
    width: 100%;
    text-align: left;
}

.add_to_cart_button.added {
    display:none;
}

.added_to_cart.wc-forward {
    display:block;
}

/* affichage des variations dans le panier */
.variation-details {
    font-size: 0.9em;
    font-style: italic;
    color: #555;
    margin-left: 5px;
}
.woocommerce-cart-form .product-name dl.variation dt {
    float: left;
    margin-right: 5px;
    font-weight: bold;
}
.woocommerce-cart-form .product-name dl.variation dd {
    margin-bottom: 5px;
}


#search-filter-form-341 .sf-count {
    display:none;
}

#sabord-selecteur-revues.active,
#sabord-selecteur-livres.active,
#sabord-selecteur-boutique.active {
    font-weight:bold;
}

@media screen and (max-width:479px) {
    .sabord-accueil-liste-prod-cols.accordion {
        padding: 16px 12px 16px 12px;
    }
    .sabord-accueil-liste-prod-cols.panel {
        grid-auto-flow:row;
        grid-template-columns:1fr;
        padding:12px;
        grid-gap:16px;
    }

    .prod-cols-item {
        grid-column: auto;
        grid-row: auto;
    }

    .prod-cols-item.left img {
        border:1px solid rgba(0,0,0,0.1);
        margin:0 auto;
        max-width:60%;
        height:auto;
    }

}


/* sabord_liste_actualites */

.sabord-item-actualites {
    border-bottom-width: 1px;
    border-bottom-color: #d0d0d0;
    border-bottom-style: solid;
    padding-top: 16px;
    padding-left: 12px;
    padding-bottom: 32px;
    padding-right: 90px;
    flex-direction: row!important;
}

.sabord-item-actualites .ct-new-columns-right h3 {
    color:var(--couleur-principale);
    margin-bottom:0.4em;
}

.sabord-item-actualites .ct-new-columns-right a {
    transition:0.3s;
}

.sabord-item-actualites .ct-new-columns-right a:hover {
    color:#004ec4;
    transition:0.3s;
}

.sabord-item-actualites:last-of-type() {
    border-bottom:none;
}

.sabord-item-actualites .ct-new-columns-left {
    width: 26%;
}

.sabord-item-actualites .ct-new-columns-right {
    width: 74%;
}

.sabord-item-actualites .ct-new-columns-left,
.sabord-item-actualites .ct-new-columns-right {
    display:block;
}

.sabord-item-actualites .ct-new-columns-left p:first-of-type,
.sabord-item-actualites .ct-new-columns-right p:first-of-type {
    margin-top:0;
    padding-top:0;
}

.sabord-item-actualite-image {
    width:100%;
    padding-right:52px;
    margin-top:10px;
}

.sabord-item-actualite-image img {
    width:100%;
    height:auto;
}

@media screen and (max-width:767px) {
    .sabord-item-actualite-image {
        padding-right:24px;
    }
}

@media screen and (max-width:479px) {
    .sabord-item-actualites {
        padding-top: 24px;
        padding-left: 0px;
        padding-bottom: 36px;
        padding-right: 0px;
        flex-direction: column;
    }

    .sabord-item-actualite-image {
        padding-right:0;
    }

    .sabord-item-actualites .ct-new-columns-left {
        width: 100%;
    }

    .sabord-item-actualites .ct-new-columns-right {
        width: 100%;
    }
}


/* espace créatif */

/* couleur de fond sur la page espace créatif */
body.page-id-552 #sabord-conteneur-principal,
body.page-id-552 #inner_content-270-545
{
    background-color:var(--couleur-secondaire);
}
body.page-id-552 {
    background-color:var(--couleur-secondaire);
}
body.js.page-id-552 {
    background-color:white;
}
body.page-id-552 .liens-top-mauve {
    color:white;
}
#div_block-236-545 {
    background-color:white;
}
#sabord-footer-smaller-screens {
    background-color:white;
}
.sabord-footer-partenaires-mobile {
    background-color:white;
}


/* espace créatif */

body.page-id-552, html {
    overflow-x:hidden;
}
#dragzone {
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}
#dragzone.hoveritem .dragitem .dragitemimage {
    opacity:0;
    filter: grayscale(100%);
    transition: opacity 0.25s;
}

@media screen and (max-width:767px) {
    #dragzone.hoveritem .dragitem .dragitemimage {
        opacity:0.3;
    }
}

#dragzone.hoveritem .dragitem.hover .dragitemimage {
    opacity:1;
    filter: grayscale(0);
    transition: opacity 0.25s;
}

.dragitem {
    position: absolute;
    z-index: 9;
    background-color:black;
    text-align: left;
    border: none;
}

.dragitemimage {
    position:relative;
    display:block;
    padding: 0;
    margin:0;
    cursor: move;
    cursor: url(https://lesabord.qc.ca/images/move.svg), auto;
    z-index: 10;
    color:black;
    max-width:720px;
    transition: opacity 0.25s;
}

.dragitem .dragitemdrawer {
    display:block; 
    opacity:0;
    position:absolute;
    left:100%;
    top:0; /* 10px dans le padding */
    width:25vw;
    min-height:90%;
    padding-left:15px;
    background-color:var(--couleur-secondaire);
    padding:10px;
    z-index:5;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.dragitem.hover .dragitemdrawer {
    opacity:1;
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
    transition: opacity 0.75s;
}
.clark-dragitemdrawer-content-title,
.clark-dragitemdrawer-content-artist {
    font-weight:bold;
}

@keyframes slide-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
    100% { -webkit-transform: translateX(0%); }
}
@keyframes slide-down {
    100% { transform: translateY(0%); }
}

@-webkit-keyframes slide-down {
    100% { -webkit-transform: translateY(0%); }
}

@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}


@media screen and (max-width:767px) {
    .dragitem .dragitemdrawer {
        left:0;
        top:100%;
        width:100%;
        padding:10px;
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);

    }
    .dragitem.hover .dragitemdrawer {
        opacity:1;
        z-index:5;
        animation: slide-down 0.5s forwards;
        -webkit-animation: slide-down 0.5s forwards;
        transition: opacity 0.75s;
    }
}

.dragitem.hover {
    z-index:15;
}

.dragitem .dragitemimage.size1 {
    width:25vw;
    height:auto;
}

.dragitem .dragitemimage.size2 {
    width:30vw;
    height:auto;
}

.dragitem .dragitemimage.size3 {
    width:35vw;
    height:auto;
}

.dragitem .dragitemimage.size4 {
    width:40vw;
    height:auto;
}

.dragitem .dragitemimage.size5 {
    width:45vw;
    height:auto;
}

.dragitem .dragitemimage.size6 {
    width:50vw;
    height:auto;
}

.dragitem .dragitemimage.size7 {
    width:55vw;
    height:auto;
}

.dragitem .dragitemimage.size8 {
    width:60vw;
    height:auto;
}

.dragitem .dragitemimage.size9 {
    width:65vw;
    height:auto;
}

.dragitemdrawerlink {
    text-decoration:none;
    color:black;
    transition:0.4s;
}

.dragitemdrawerlink:hover {
    text-decoration:none;
    color:var(--couleur-principale);
    color:white;
    transition:0.4s;
}

@media screen and (max-width: 767px) {
    .dragitem .dragitemimage.size1 {
        width:56vw;
        height:auto;
    }

    .dragitem .dragitemimage.size2 {
        width:60vw;
        height:auto;
    }

    .dragitem .dragitemimage.size3 {
        width:64vw;
        height:auto;
    }

    .dragitem .dragitemimage.size4 {
        width:68vw;
        height:auto;
    }

    .dragitem .dragitemimage.size5 {
        width:72vw;
        height:auto;
    }

    .dragitem .dragitemimage.size6 {
        width:76vw;
        height:auto;
    }

    .dragitem .dragitemimage.size7 {
        width:80vw;
        height:auto;
    }

    .dragitem .dragitemimage.size8 {
        width:84vw;
        height:auto;
    }

    .dragitem .dragitemimage.size9 {
        width:88vw;
        height:auto;
    }

}

/* espace créatif présentation (post) */
.sabord-creatif-extra a,
.sabord-creatif-extra a:hover {
    color:white;
}
.sabord-creatif-titre {
    font-weight:bold;
}
.sabord-espace-creatif-description {
    font-size:1.25em;
}
.poles-open { 
    overflow: hidden; 
}
#sabordPoles {
    width:0vw;
}
#sabordPoles.open {
    width:60vw;
    border-left:1px solid var(--couleur-principale);
}

/* onglets */
[id^="sabordOnglet"] {
    width:0vw;
}
[id^="sabordOnglet"].open {
    width:60vw;
    border-left:1px solid var(--couleur-principale);
}
@media screen and (max-width:991px) {
    #sabordPoles.open,
    [id^="sabordOnglet"].open {
        width:85vw;
    }
}

.sabord-poles {
    height: 100%;
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    background-color: var(--couleur-secondaire);
    color:black;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
.sabord-poles-bio {
    margin-top:5rem;
    padding-top:2.5rem;
    border-top:1px solid #000;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.sabord-poles::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.sabord-poles {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
} 
.sabord-poles-container {
    width:60vw;
    padding:0 52px 52px 52px;
    padding-right:calc(2.4em + 52px);
    overflow-x:hidden;
}
.sabord-poles-container a {
    color:black;
    text-decoration:underline;
    transition:0.4s;
}
.sabord-poles-container a:hover {
    color:white;
    transition:0.4s;
}
.sabord-poles .closebtn {
    position: absolute;
    top: 12px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color:white;
    text-decoration:none;
}
/*
#sabord-poles-button, .sabord-onglet-button {
    position:fixed;
    width:fit-content;
    height:fit-content;
    top:15vh; 
    bottom:0;
    line-height:1.6em;
    padding:0.4em 0.8em 0.4em 0.8em;
    right:1.2em; 
    -webkit-transform-origin: 100% 50%;
        -moz-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
        -o-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
    -webkit-transform: rotate(-90deg) translateY(50%);
        -moz-transform: rotate(-90deg) translateY(50%);
        -ms-transform: rotate(-90deg) translateY(50%);
        -o-transform: rotate(-90deg) translateY(50%);
        transform: rotate(-90deg) translateY(50%);
    transform-origin:top center;
    color:var(--couleur-secondaire);
    border-top:2px solid var(--couleur-secondaire);
    background-color:var(--couleur-secondaire-pale);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index:50;
    transition:0.4s;
}
.sabord-onglet-button {
    top: calc(15vh + 7.2em);
}
*/


#sabord-poles-button, .sabord-onglet-button {
    position:fixed;
    width:fit-content;
    height:fit-content;
    top:15vh;
    bottom:0;
    line-height:1.6em;
    padding:0.4em 0.8em 0.4em 0.8em;
    right:2.5em; 
    -webkit-transform-origin: top right;
        -moz-transform-origin: top right;
        -ms-transform-origin: top right;
        -o-transform-origin: top right;
        transform-origin: top right;
    -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    color:var(--couleur-secondaire);
    border-top:2px solid var(--couleur-secondaire);
    background-color:var(--couleur-secondaire-pale);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index:50;
    transition:0.4s;
}

/* Position spécifique pour chaque bouton */
#sabord-poles-button {
    top: 15vh;
    right: 2.5em;
}

#sabord-onglet-button-1 {
    top: calc(15vh + 6.5em);
    right: 2.5em;
}


#sabordPoles.open #sabord-poles-button {
    background-color:white;
    border-top:2px solid var(--couleur-principale);
    transition:0.4s;
}

#sabordPoles iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}
@media screen and (max-width:991px) {
    #sabordPoles.open,
    [id^="sabordOnglet"].open {
        width:85vw;
    }
    .sabord-poles-container
    {
        width:85vw;
        padding:12px;
        padding-right:calc(2.4em + 12px);
    }

    #sabord-poles-button,
    .sabord-onglet-button {
        position:initial;
        display:inline-block;
        padding:0;
        color:white;
        margin-top:0.8em;
        -webkit-transform: rotate(0deg) translateY(0);
        -moz-transform: rotate(0deg) translateY(0);
        -ms-transform: rotate(0deg) translateY(0);
        -o-transform: rotate(0deg) translateY(0);
        transform: rotate(0deg) translateY(0);
    }
    #sabord-poles-button:hover,
    .sabord-onglet-button:hover {
        text-decoration:underline;
    }
    .sabord-onglet-button {
        margin-top:0;
    }
}


/* equipage */
.sabord-equipage-equipe ul {
    margin:0;
    padding:0;
    list-style-type: none;
    z-index:0;
}
.sabord-equipage-equipe li {
    width: fit-content;
    font-size: 1.5rem;
    position:relative;
    margin-bottom:0.2rem;
}
.sabord-equipage-equipe li.membre-equipage {
    padding-right: 1rem;
}
.sabord-equipage-equipe strong.membre-equipage-nom {
    font-weight:600;
    letter-spacing:1px;
}
.membre-equipage-fiche {
    z-index:1;
    /*display: none;*/
    height:0px;
    overflow:hidden;
    display:flex;
    position:static;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    font-size:1rem;
    margin-bottom:0.5rem;
    margin-top:0.25rem;
}
.membre-equipage-fiche-image {
    width: 66%;
    background-color: var(--couleur-principale);
    aspect-ratio: 1/1;
}
.membre-equipage-fiche-image img {
    display:block;
    width: 100%;
    height:auto;
    opacity:0.9;
}
.membre-equipage-fiche-info {
    background-color:white;
    border:1px solid var(--couleur-principale);
    color: var(--couleur-principale);
    padding: 1rem;
    margin-top: 1rem;
    width: 100%;
}
.membre-equipage-titre {
    font-size: 0.85em;
}

@media screen and (min-width:640px) {
    .membre-equipage-fiche {
        position:absolute;
        top:-3rem;
        left:100%;
        width:30vw;
        min-width:min-content;
        max-width:600px;
        font-size: 0.85rem;
        margin-bottom:1.5rem;
        margin-top:0.5rem;
    }
}

/* menu mobile */
.mobilemenu-open { 
    overflow: hidden; 
}
#sabordMenuMobile {
    width:0vw;
}
#sabordMenuMobile.open {
    width:100vw;
    border:1px solid var(--couleur-principale);
}
.sabord-menu-principal-mobile {
    height: 100%;
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    background-color: white;
    color:black;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 52px;
}
#sabordMenuMobile .sabord-menu-compte {
    display:none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.sabord-menu-principal-mobile::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.sabord-menu-principal-mobile {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
} 
.sabord-menu-principal-mobile-container {
    position:relative;
    width:100vw;
    min-height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:52px;
    overflow-x:hidden;
}
@media screen and (max-height:720px) {
    .sabord-menu-principal-mobile-container {
        padding:24px;
        align-items:flex-start;
    }
}
.mobile-menu-links {
    /*height:calc(100vh - 104px);*/
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.sabord-menu-principal-nav.mobile {
}
.sabord-menu-principal-nav.mobile ul {
    display:flex;
    flex-direction:column;
}
.sabord-menu-principal-nav.mobile li {
    width:100%;
    min-width: auto;
    font-size:1.5rem;
    text-align:center;
}
.sabord-menu-principal-mobile-container a {
    color:black;
    text-decoration:underline;
    transition:0.4s;
}
.sabord-menu-principal-mobile-container a:hover {
    color:var(--couleur-principale);
    transition:0.4s;
}
.sabord-menu-principal-mobile .closebtn {
    position: absolute;
    top: 12px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color:black;
    text-decoration:none;
    z-index:50;
}
.admin-bar .sabord-menu-principal-mobile .closebtn {
    top: 40px;
}
.sabord-menu-principal-mobile-abonnement {
    position: absolute;
    bottom: 12px;
    right: 12px;
    text-decoration:none;
    width:25vw;
    height:25vw;
}
.mobile-menu-social {
    display:flex;
    flex-direction:row;
    margin-top:3rem;
}

.mobile-menu-social .sabord-social-links {
    padding:12px;
    margin-bottom:1em;
}


/* page biographies */
.biographie-publications-relies-title {
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--couleur-principale);
    color: var(--couleur-principale);
}

/* shortcode répertoire */
.sabord-repertoire {
    column-count: 1;
}
.sabord-repertoire-lettre {
    font-weight: bold;
    font-size: 2rem;
    margin-top:2rem;
    margin-bottom: 1rem;
    color: var(--couleur-secondaire);
}
.sabord-repertoire-lettre:first-of-type {
    margin-top:0;
}
.sabord-repertoire-item a {
    color:var(--couleur-principale);
    line-height:1.5em;
    transition:0.4s;
}
.sabord-repertoire-item a:hover {
    color:var(--couleur-secondaire);
    transition:0.4s;
}

@media screen and (min-width:600px) {
    .sabord-repertoire {
        column-count: 2;
    }

}