/*
 * Palette Versants
 *
 * Les couleurs du site se changent dans le premier bloc (primary, secondary,
 * accent, light, dark). Le second relie les palettes alias du thème à ces
 * couleurs ; seules les valeurs sans correspondance restent en dur.
 * Les couleurs identiques au thème (sage-theme/resources/css/_theme_variables.css)
 * ne sont pas redéfinies.
 *
 * Tailwind place les variables du thème dans @layer theme : cette règle,
 * hors layer, l'emporte peu importe l'ordre de chargement des feuilles.
 */
:root {

    --color-primary : #293C4B;
    --color-primary-200 : #B9D6EE;
    --color-primary-300 : #7D8992;
    --color-primary-400 : #368FE5;
    --color-primary-500 : #246295;
    --color-primary-700 : #18252F;

    --color-secondary: #62768D;
    --color-secondary-300 : #7D8992;
    --color-secondary-700 : #536478;

    --color-accent : #E03E3E;
    --color-accent-300 : #EC8A8A;
    --color-accent-700 : #BF3535;

    --color-light: #F4F5F7;
    --color-light-300 : #F3F8FC;
    --color-light-400 : #E2E5E9;
    --color-light-700 : #D5E4F0;

    --color-dark: #18252F;
    --color-dark-300 : #7D8992;
    --color-dark-700 : #233340;
    --color-dark-900 : #16212B;
}

:root {

    --color-blue-200 : var(--color-primary-200);
    --color-blue-300 : #A0ACBA;
    --color-blue-400 : var(--color-primary-400);
    --color-blue-500 : var(--color-secondary);
    --color-blue-700 : var(--color-secondary-700);

    /* Le thème utilise orange-700 pour le survol de .btn-accent */
    --color-orange-300 : var(--color-accent-300);
    --color-orange-500 : var(--color-accent);
    --color-orange-700 : var(--color-accent-700);

    --tw-prose-links : var(--color-primary-500);
    --tw-prose-quote-borders : var(--color-primary-200);
    --font-display: "Inria Sans", serif;
}

/* Le thème force text-dark sur le bouton du pied de page, illisible sur l'accent */
.btn-accent {
    color: var(--color-white);
}

.bg-primary.lg\:block.hidden {
    background-color: var(--color-dark);
}

/* Versants n'offre pas de connexion : bouton « Se connecter » retiré (en-tête et menu mobile) */
.signup,
.mobile-menu .btn-accent {
    display: none;
}

.editorial-menu {
    & li {
        &.active {
            a {
                border-color: var(--color-accent);
            }
        }
    }
}

.sliding-menu {
    li {
        a {
            &:hover {
                color: var(--color-accent) !important;
            }
        }
    }
}

.secondary-menu {
    h3 {
        font-family: var(--font-body);
    }
    .border-primary-200 {
        border-color: var(--color-gray-500);
    }
    li {
        a {
            &:hover {
                color: var(--color-accent) !important;
            }
        }
    }
}

.list .btn.bg-light {
    background-color: var(--color-light);
    &:hover {
        background-color: var(--color-light-400);
    }
}

footer .bg-navy {
    background-color: var(--color-black);
}

.hover\:text-primary:hover {
    color: var(--color-accent);
    transition: color 0.3s ease;
}

/* Le survol du thème (primary → primary-700, en !important) est imperceptible avec le primary foncé de Versants */
body .prose p a:not(.btn):hover,
body .prose li a:not(.btn):hover {
    color: var(--color-accent) !important;
    transition: color 0.3s ease;
}

.splide .bg-primary {
    background-color: var(--color-dark);
}

.block-archive-block, .block-photo-gallery, .splide .bg-primary {
    .text-h6 {
        font-family: var(--font-body);
    }
}

.block-video-caroussel {
    .bg-light {
        background-color: var(--color-dark);
    }
    background-color: var(--color-dark);
    color: var(--color-white);
    h2 {
        font-family: var(--font-body);
    }

    h3 {
        font-family: var(--font-body);
    }
    a {
        &:hover {
            color: var(--color-gray-500);
        }
    }

    .splide__arrow {
        --color-white: #293C4B;
        --color-primary: #ffffff;
    }
}

.border-light-700 {
    border-color: var(--color-gray-500);
}

.author {
    .bg-light {
        &.hover\:bg-light-700:hover {
            background-color: var(--color-gray-500);
        }
    }
}

.border-b-\[3px\].border-primary {
    border-color: var(--color-gray-500);
    border-bottom-width: 1px;
    position: relative;
    &:before {
        content: '';
        display: block;
        width: 6rem;
        height: .375rem;
        background-color: var(--color-accent);
        position: absolute;
        bottom: -1px;
        left: 0;
    }
}

.fa-bluesky::before {
    content: "";
    display: inline-block;
    width: 1.125em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M407.8 294.7c-3.3-.4-6.7-.8-10-1.3 3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3 61.6-9.4 37.5-1.7 21.6 5.5 3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7 3.3-.5 6.6-.9 10-1.4-3.3 .5-6.6 1-10 1.4-93.9 14-177.3 48.2-67.9 169.9 120.3 124.6 164.8-26.7 187.7-103.4 22.9 76.7 49.2 222.5 185.6 103.4 102.4-103.4 28.1-156-65.8-169.9-3.3-.4-6.7-.8-10-1.3 3.4 .4 6.7 .9 10 1.3 64.1 7.1 133.6-15.1 153.2-80.7 5.9-19.9 15-138.9 15-155.5s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8-66.1 46.6-137.1 141.1-163.2 191.8z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M407.8 294.7c-3.3-.4-6.7-.8-10-1.3 3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3 61.6-9.4 37.5-1.7 21.6 5.5 3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7 3.3-.5 6.6-.9 10-1.4-3.3 .5-6.6 1-10 1.4-93.9 14-177.3 48.2-67.9 169.9 120.3 124.6 164.8-26.7 187.7-103.4 22.9 76.7 49.2 222.5 185.6 103.4 102.4-103.4 28.1-156-65.8-169.9-3.3-.4-6.7-.8-10-1.3 3.4 .4 6.7 .9 10 1.3 64.1 7.1 133.6-15.1 153.2-80.7 5.9-19.9 15-138.9 15-155.5s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8-66.1 46.6-137.1 141.1-163.2 191.8z'/%3E%3C/svg%3E") center / contain no-repeat;
    vertical-align: -0.2em;
}