:root {
    --botlink-primary-color:#00f0d4;
    --botlink-secondary-color:#566868;
}
.article-main {
    font-family:inherit;color:var(--botlink-secondary-color);line-height:1.4;font-size:1rem;margin:0 auto;max-width:50rem;padding-inline:2rem;border-radius:.5rem;transition:all 0.3s ease;
    & article {
        margin-bottom:6rem;
        & h1, & h2, & h3 {
            text-align:center;margin-top:2rem;margin-bottom:2rem;width:100%;text-align:center;
        }
        & h2, & h3 {
            margin-bottom:10px;color:var(--botlink-primary-color);padding-inline:0;margin-inline:auto;font-weight:700;line-height:1.2;text-transform:uppercase;
        }
        & h1 {
            font-size:1.8rem;margin-bottom:10px;color:var(--botlink-secondary-color);font-weight:700;text-transform:uppercase;
        }
        & h2 {
            font-size:1.6rem;margin:3rem 0 1rem 0;
        }
        & h3 {
            font-size:1.4rem;
        }
        & p {
            margin-bottom:1rem;color:var(--botlink-secondary-color);
            & a {
                color:var(--botlink-primary-color);
            }
        }
        & ul, & ol {
            margin-bottom:1rem;padding-left:2rem;
            & li {
                margin-bottom:.5rem;
            }
        }
        & ul {
            list-style-type: disc;
        }
        & ol {
            list-style-type: decimal;
        }
        & hr {display:none;}
        & img {
            max-width:100%;display:block;margin:2rem auto;border-radius:1rem;aspect-ratio:16 / 9;object-fit:cover;object-position:center;
            &:has(+p.image-credit) {
                margin-bottom:0;
            }
        }
        & p.image-credit {
            font-size:.8rem;color:var(--botlink-primary-color);text-align:left;margin:0;margin-left:1rem;margin-bottom:1rem;font-style:italic;
        }
        & footer {
            margin-top:2rem;background:none;
            & p {
                text-align:left;width:100%;
            }
            & a.cta {
                background:var(--botlink-primary-color);color:white;padding:1rem 2rem;border-radius:2rem;display:inline-block;margin:0 auto 0 0;text-transform:uppercase;font-weight:700;
                &:hover {
                    background:var(--botlink-secondary-color);color:white;
                }
            }
        }
    }
}

.botlink-summary {
    background: color-mix(in srgb, var(--botlink-primary-color) 30%, transparent);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;

    & .botlink-summary-label {
        font-weight: 700;
        text-transform: uppercase;
        font-size: .85rem;
        color: var(--botlink-primary-color);
        margin-bottom: .5rem;
    }

    & p:last-child {
        margin-bottom: 0;
    }
}

body:has([aria-label="Formulaire de contact"]) {
    & a.cta[href*="contact"] {
        display:none;
    }
}


.article-main {
    display:flex;flex-direction:row;max-width:85vw;flex-wrap:wrap;
    & article {
        position:relative;display:flex;align-items:flex-start;justify-content:stretch;flex-direction:column;padding-right:400px!important;
        & h1, & h2, & h3 {
            text-align:left;
        }
        & .encart-contact {
            display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;margin-top:2rem;border-radius:1rem;background-color:var(--botlink-secondary-color);color:var(--botlink-primary-color);position:absolute;bottom:0;right:calc(0rem - 2rem + 6px);width:380px;
            & p {
                font-size:1.2rem;font-weight:700;margin-bottom:1rem;color:white;
            }
            & a.btn {
                background:white;color:var(--botlink-secondary-color);padding:.75rem 1.5rem;border-radius:2rem;display:inline-block;text-transform:uppercase;font-weight:700;
                &:hover {
                    background:var(--botlink-primary-color);color:white;
                }
            }
        }
        & table {
            border-collapse:collapse;width:100%;margin-bottom:1rem;
            & th, & td {
                border:1px solid var(--botlink-primary-color);padding:.5rem;
            }
            & th {
                background-color: var(--botlink-primary-color);color: var(--botlink-secondary-color);
            }
        }
    }
    & aside:has(.stickyPanel) {
        width:380px;position:fixed;right:7.5%;z-index:2;
        & .stickyPanel {
            display:flex;flex-direction:column;color:var(--botlink-secondary-color);
            &>div {
                padding:1.5rem;margin-bottom:1rem;border-radius:1rem;background-color:var(--botlink-primary-color);color:var(--botlink-secondary-color);
            }
            & p, & a {
                color:var(--botlink-secondary-color);
            }
        }
    }

    & .otherPost, & .anchor-container {
        display:flex;flex-direction:column;align-items:flex-start;
        & p {
            display:inline-block;font-size:1rem;margin-bottom:.5rem;text-transform:uppercase;font-weight:700;width:100%;max-width:100%;
        }
        & a {
            margin:.3rem 0;font-size:1rem;font-weight:500;text-decoration:underline;margin-left:1rem;line-height:1.1;
        }
    }

    & .anchor-container {
        justify-content:center;
        & p {
            margin-top:0;
        }
        & a {
            margin:.25rem 0;display:flex;align-items:flex-start;justify-content:flex-start;text-decoration:none;
            & strong {
                font-weight:400;
            }
            & i {
                width:1rem;height:1rem;min-width:1rem;margin-top:3px;margin-right:.5rem;transform:translateX(0);transition:transform 0.2s ease-in-out;
            }
            & svg {
                width:100%;
                & path, & circle {
                    fill:none;stroke-linecap:round;stroke-width:2px;stroke:var(--botlink-secondary-color);
                }
            }
        }
    }
}

.botlink-faq {
    padding: 0;
    width: 100%;
}
.botlink-faq-title {
    margin-bottom: 1.5rem;
}
.botlink-faq-item {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    background-color: var(--botlink-primary-color);
    color: var(--botlink-secondary-color);
}
.botlink-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    padding-right: .5rem;
    font-weight:bold;
}
.botlink-faq-question::-webkit-details-marker {
    display: none; /* Safari ancien */
}
.botlink-faq-question h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
}
.botlink-faq-question::after {
    content: "";
    flex: 0 0 .6rem;
    width: .6rem;
    height: .6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.botlink-faq-item[open] .botlink-faq-question::after {
    transform: rotate(-135deg);
}
.botlink-faq-answer p {
    margin: 0;
}
.botlink-faq-question:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.botlink-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: -.5rem 0 2rem;
    font-size: .875rem;
    opacity: .75;
}
.botlink-byline-sep {
    margin: 0 .5rem;
}

section.article-interaction {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5vw;
    padding: 0;
    background: color-mix(in srgb, white 10%, transparent);
    width: 100%;
    padding: 1.5rem;
    margin-top: 1rem;
    border-radius: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

.botlink-rating {
    margin: 0;
    text-align: left;
    padding: 0;
}
.botlink-rating-label {
    margin-bottom: .5rem;
    font-weight: 600;
}
.botlink-rating-stars {
    display: inline-flex;
    gap: .25rem;
}
.botlink-star {
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.75rem;
    line-height: 1;
    color: rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}
.botlink-star.is-active { color:var(--botlink-secondary-color); }
.botlink-star:hover     { transform: scale(1.1); }
.botlink-rating.has-voted .botlink-star {
    cursor: default;
    pointer-events: none;
}
.botlink-rating-summary {
    margin-top: .5rem;
    font-size: .875rem;
    opacity: .75;
    min-height: 1.25em; /* évite le saut de mise en page au chargement */
}

.botlink-share {
    margin: 0;
    text-align: left;
    padding: 0;
}
.botlink-share-label {
    margin-bottom: .75rem;
    font-weight: 600;
}
.botlink-share-links {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}
.botlink-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
    background: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.botlink-share-link:hover {
    background: rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .3);
}
.botlink-share-status {
    margin-top: .5rem;
    font-size: .875rem;
    opacity: .75;
    min-height: 1.25em;
}

.botlink-author {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 1.5rem 0;
    padding: 1.25rem;
    border-radius:1rem;
    background:color-mix(in srgb, white 10%, transparent);
    justify-content: flex-start;
    width: 100%;
}
.botlink-author-avatar {
    flex: 0 0 100px;
    border-radius: 50%!important;
    width: 100px!important;
    aspect-ratio:1!important;
    margin:0!important;
    object-fit: cover !important;
}
.botlink-author-name {
    margin: 0 0 .25rem;
    font-weight: 600;
}
.botlink-author-bio {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.5;
}
@media (max-width: 480px) {
    .botlink-author {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.botlink-author-links {
    margin: .5rem 0 0;
}
.botlink-author-linkedin {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    text-decoration: none!important;
    color: inherit;
    opacity: .8;
    transition: opacity .15s ease;
    & span {
        text-decoration:underline;
    }
}
.botlink-author-linkedin:hover {
    opacity: 1;
    & span {
        text-decoration:none;
    }
}

.botlink-good-to-know {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 2.5rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    border-left: 4px solid var(--botlink-primary-color);
    background: color-mix(in srgb, var(--botlink-primary-color) 12%, transparent);

    & .botlink-gtk-icon {
        flex: 0 0 auto;
        font-size: 1.4rem;
        line-height: 1.3;
        color: var(--botlink-primary-color);
    }
    & .botlink-gtk-body { flex: 1 1 auto; }
    & .botlink-gtk-label {
        display: block;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        opacity: .65;
        margin-bottom: .35rem;
    }
    & .botlink-gtk-title {
        margin: 0 0 .4rem;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
        text-align: left;
    }
    & p {
        margin: 0;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .botlink-good-to-know {
        padding: 1rem;
        & .botlink-gtk-icon { display: none; }
    }
}

@media screen and (max-width:1500px) {
    .article-main {
        max-width:90%;
        article {
            padding-right:300px!important;
            & .encart-contact {
                width:280px;right:-2rem;
                & p {
                    font-size:1rem;
                }
            }
        }
        & aside:has(.stickyPanel) {
            width:280px;right:5%;
        }
    }
}

@media screen and (max-width:1200px) {
    section.article-interaction {
        gap:2rem;
    }
}

@media screen and (max-width:980px) {
    .article-main {
        max-width:100%;
        & aside:has(.stickyPanel) {
            position:static;width:100%;margin-top:2rem;order:2;
        }
        & .anchor-container {
            padding:1.5rem;width:100%;margin-bottom:2rem;border-radius:1rem;background-color:var(--botlink-primary-color);color:var(--botlink-secondary-color);
            & a, & p {
                color:var(--botlink-secondary-color);width:100%;
            }
        }
        & article {
            order:1;padding-right:0!important;margin-bottom:0;
            & .cta-all-links {
                display:none!important;
            }
            & footer.article-footer {
                padding:1rem 0;width:100%;
            }
            & .encart-contact {
                position:static;width:100%;margin-top:2rem;order:3;
            }
        }
    }
}

@media screen and (max-width:640px) {
    section.article-interaction {
        flex-direction:column;align-items:flex-start;
    }
}

@media screen and (max-width:480px) {
    .botlink-byline {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: flex-start;
        gap: .3rem 0;
        & .botlink-byline-sep{
            display: none;
        }
    }
}
@media screen and (max-width:400px) {
    .botlink-share-links {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        flex-wrap: nowrap;
    }
    .botlink-share-link {
        width: 3.5rem;
        height: 3.5rem;
    }
}