@supports (scrollbar-gutter: stable) {
    html { scrollbar-gutter: stable; }
}

@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}

/*
 * Elementor peut placer un widget dans un wrapper en largeur intrinsèque.
 * Quand une réponse plus longue devient visible, ce wrapper pouvait alors
 * s'élargir et déplacer toute la FAQ, y compris la flèche. Le wrapper et son
 * conteneur sont donc explicitement étirés avant de dimensionner la FAQ.
 */
.elementor-widget-biotik-faq-01,
.biotik-faq-host {
    width: 100% !important;
    inline-size: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    max-inline-size: 100%;
    align-self: stretch !important;
    justify-self: stretch !important;
}

.elementor-widget-biotik-faq-01 > .elementor-widget-container,
.biotik-faq-host > .elementor-widget-container {
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
}

.biotik-faq-01.elementskit-accordion.accoedion-primary {
    --biotik-faq-duration: var(--bs-global-faq-animation-duration, 260ms);
    --biotik-faq-icon-size: var(--bs-global-faq-icon-size, 22px);
    --biotik-faq-icon-box-size: var(--bs-global-faq-icon-box-size, 32px);
    --biotik-faq-icon-gap: var(--bs-global-faq-icon-gap, 20px);
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: var(--bs-global-faq-max-width, 1100px);
    margin-inline: auto;
    contain: inline-size;
}

.biotik-faq-01__header {
    max-width: var(--bs-global-faq-header-max-width, 780px);
    margin: 0 0 var(--bs-global-faq-header-gap, 48px);
}

.biotik-faq-01__eyebrow {
    margin: 0 0 12px;
    color: var(--bs-global-faq-eyebrow-color, #3e6642);
    font-family: var(--bs-global-faq-eyebrow-font-family, inherit);
    font-size: var(--bs-global-faq-eyebrow-size, 12px);
    font-weight: var(--bs-global-faq-eyebrow-weight, 700);
    font-style: var(--bs-global-faq-eyebrow-style, normal);
    line-height: var(--bs-global-faq-eyebrow-line-height, 1.35);
    letter-spacing: var(--bs-global-faq-eyebrow-letter-spacing, .11em);
    text-align: var(--bs-global-faq-eyebrow-align, left);
    text-decoration: var(--bs-global-faq-eyebrow-decoration, none);
    text-transform: var(--bs-global-faq-eyebrow-transform, uppercase);
}

.biotik-faq-01__title {
    margin: 0;
    color: var(--bs-global-faq-title-color, #183126);
    font-family: var(--bs-global-faq-title-font-family, inherit);
    font-size: var(--bs-global-faq-title-size, 54px);
    font-weight: var(--bs-global-faq-title-weight, 650);
    font-style: var(--bs-global-faq-title-style, normal);
    line-height: var(--bs-global-faq-title-line-height, 1.08);
    letter-spacing: var(--bs-global-faq-title-letter-spacing, -.035em);
    text-align: var(--bs-global-faq-title-align, left);
    text-decoration: var(--bs-global-faq-title-decoration, none);
    text-transform: var(--bs-global-faq-title-transform, none);
}

.biotik-faq-01__intro {
    margin-top: 18px;
    color: var(--bs-global-faq-intro-color, #50575e);
    font-family: var(--bs-global-faq-intro-font-family, inherit);
    font-size: var(--bs-global-faq-intro-size, 17px);
    font-weight: var(--bs-global-faq-intro-weight, 400);
    font-style: var(--bs-global-faq-intro-style, normal);
    line-height: var(--bs-global-faq-intro-line-height, 1.65);
    letter-spacing: var(--bs-global-faq-intro-letter-spacing, 0);
    text-align: var(--bs-global-faq-intro-align, left);
    text-decoration: var(--bs-global-faq-intro-decoration, none);
    text-transform: var(--bs-global-faq-intro-transform, none);
}

.biotik-faq-01__intro > :first-child,
.biotik-faq-01__answer-inner > :first-child { margin-top: 0; }
.biotik-faq-01__intro > :last-child,
.biotik-faq-01__answer-inner > :last-child { margin-bottom: 0; }

.biotik-faq-01__items {
    display: grid;
    inline-size: 100%;
    min-inline-size: 0;
    gap: var(--bs-global-faq-items-gap, 12px);
}

.biotik-faq-01__item {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    overflow: clip;
    border-width: var(--bs-global-faq-border-width, 1px);
    border-style: var(--bs-global-faq-border-style, solid);
    border-color: var(--bs-global-faq-border-color, #dfe6dc);
    border-radius: var(--bs-global-faq-radius, 14px);
    background: var(--bs-global-faq-item-background, #ffffff);
    box-shadow: 0 var(--bs-global-faq-shadow-y, 8px) var(--bs-global-faq-shadow-blur, 24px) var(--bs-global-faq-shadow, rgba(0,0,0,0));
    transition: background-color var(--biotik-faq-duration) ease, border-color var(--biotik-faq-duration) ease, box-shadow var(--biotik-faq-duration) ease;
}

.biotik-faq-01__item.is-open {
    border-color: var(--bs-global-faq-open-border-color, #afc5ac);
    background: var(--bs-global-faq-item-open-background, #eef3e3);
}

.biotik-faq-01__heading {
    inline-size: 100%;
    min-inline-size: 0;
    margin: 0;
}

.biotik-faq-01__question {
    appearance: none;
    position: relative;
    display: block;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    margin: 0;
    padding-block-start: var(--biotik-faq-local-question-padding-top, var(--bs-global-faq-question-padding-y, 24px));
    padding-block-end: var(--biotik-faq-local-question-padding-bottom, var(--bs-global-faq-question-padding-y, 24px));
    padding-inline-start: var(--biotik-faq-local-question-padding-left, var(--bs-global-faq-question-padding-x, 28px));
    padding-inline-end: calc(
        var(--biotik-faq-local-question-padding-right, var(--bs-global-faq-question-padding-x, 28px))
        + var(--biotik-faq-local-icon-box-size, var(--biotik-faq-icon-box-size))
        + var(--biotik-faq-local-icon-gap, var(--biotik-faq-icon-gap))
    );
    border: 0;
    background: transparent;
    color: var(--bs-global-faq-question-color, #183126);
    font-family: var(--bs-global-faq-question-font-family, inherit);
    font-size: var(--bs-global-faq-question-size, 21px);
    font-weight: var(--bs-global-faq-question-weight, 650);
    font-style: var(--bs-global-faq-question-style, normal);
    line-height: var(--bs-global-faq-question-line-height, 1.35);
    letter-spacing: var(--bs-global-faq-question-letter-spacing, 0);
    text-align: var(--bs-global-faq-question-align, left);
    text-decoration: var(--bs-global-faq-question-decoration, none);
    text-transform: var(--bs-global-faq-question-transform, none);
    cursor: pointer;
}

.biotik-faq-01__question:hover { color: var(--bs-global-faq-question-hover-color, #3e6642); }

.biotik-faq-01__question:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--bs-global-faq-icon-color, #3e6642) 38%, transparent);
    outline-offset: -4px;
}

.biotik-faq-01__question-text {
    display: block;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.biotik-faq-01.elementskit-accordion .biotik-faq-01__icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--biotik-faq-local-question-padding-right, var(--bs-global-faq-question-padding-x, 28px));
    display: grid;
    place-items: center;
    box-sizing: border-box;
    inline-size: var(--biotik-faq-local-icon-box-size, var(--biotik-faq-icon-box-size));
    min-inline-size: var(--biotik-faq-local-icon-box-size, var(--biotik-faq-icon-box-size));
    max-inline-size: var(--biotik-faq-local-icon-box-size, var(--biotik-faq-icon-box-size));
    block-size: var(--biotik-faq-local-icon-box-size, var(--biotik-faq-icon-box-size));
    min-block-size: var(--biotik-faq-local-icon-box-size, var(--biotik-faq-icon-box-size));
    max-block-size: var(--biotik-faq-local-icon-box-size, var(--biotik-faq-icon-box-size));
    margin: 0;
    padding: 0;
    color: var(--bs-global-faq-icon-color, #3e6642);
    line-height: 1;
    pointer-events: none;
    transform: translate3d(0, -50%, 0) !important;
    transform-origin: 50% 50%;
    transition: color var(--biotik-faq-duration) ease;
    contain: strict;
}

.biotik-faq-01.elementskit-accordion .biotik-faq-01__item.is-open .biotik-faq-01__icon {
    color: var(--bs-global-faq-icon-open-color, #3e6642);
}

/*
 * Les deux états occupent exactement le même cadre. Seule l'opacité change :
 * aucune largeur, marge, translation ou métrique de police ne peut déplacer
 * la zone réservée à l'icône.
 */
.biotik-faq-01__icon-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    padding: 0;
    color: inherit;
    opacity: 1;
    visibility: visible;
    transform: none !important;
    transition: opacity var(--biotik-faq-duration) ease, visibility 0s linear 0s;
    will-change: opacity;
}

.biotik-faq-01__icon-state--open {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--biotik-faq-duration) ease, visibility 0s linear var(--biotik-faq-duration);
}

.biotik-faq-01__item.is-open .biotik-faq-01__icon-state--closed {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--biotik-faq-duration) ease, visibility 0s linear var(--biotik-faq-duration);
}

.biotik-faq-01__item.is-open .biotik-faq-01__icon-state--open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--biotik-faq-duration) ease, visibility 0s linear 0s;
}

.biotik-faq-01.elementskit-accordion .biotik-faq-01__icon-state > i,
.biotik-faq-01.elementskit-accordion .biotik-faq-01__icon-state > svg,
.biotik-faq-01.elementskit-accordion .biotik-faq-01__icon-state .elementor-icon {
    position: static !important;
    display: grid !important;
    place-items: center;
    box-sizing: border-box;
    inline-size: var(--biotik-faq-local-icon-size, var(--biotik-faq-icon-size));
    block-size: var(--biotik-faq-local-icon-size, var(--biotik-faq-icon-size));
    min-inline-size: var(--biotik-faq-local-icon-size, var(--biotik-faq-icon-size));
    min-block-size: var(--biotik-faq-local-icon-size, var(--biotik-faq-icon-size));
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
    font-size: var(--biotik-faq-local-icon-size, var(--biotik-faq-icon-size));
    line-height: 1 !important;
    fill: currentColor;
    transform: none !important;
    translate: none !important;
}

.biotik-faq-01.elementskit-accordion .biotik-faq-01__icon-state > i::before {
    position: static !important;
    display: block;
    inline-size: auto;
    block-size: auto;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center;
    transform: none !important;
    translate: none !important;
}

.biotik-faq-01.elementskit-accordion .biotik-faq-01__icon-state svg {
    display: block;
    overflow: visible;
}

.biotik-faq-01__answer {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    height: auto;
    overflow: hidden;
    transition: height var(--biotik-faq-duration) cubic-bezier(.2,.7,.2,1);
}

.biotik-faq-01__answer[hidden] { display: none; }

.biotik-faq-01__answer-inner {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    padding: 0 var(--bs-global-faq-answer-padding-x, 28px) var(--bs-global-faq-answer-padding-bottom, 28px);
    color: var(--bs-global-faq-answer-color, #50575e);
    font-family: var(--bs-global-faq-answer-font-family, inherit);
    font-size: var(--bs-global-faq-answer-size, 16px);
    font-weight: var(--bs-global-faq-answer-weight, 400);
    font-style: var(--bs-global-faq-answer-style, normal);
    line-height: var(--bs-global-faq-answer-line-height, 1.72);
    letter-spacing: var(--bs-global-faq-answer-letter-spacing, 0);
    text-align: var(--bs-global-faq-answer-align, left);
    text-decoration: var(--bs-global-faq-answer-decoration, none);
    text-transform: var(--bs-global-faq-answer-transform, none);
}

.biotik-faq-01__answer-inner a {
    color: var(--bs-global-faq-icon-color, #3e6642);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.biotik-faq-01--compact .biotik-faq-01__question {
    padding-block: max(12px, calc(var(--bs-global-faq-question-padding-y, 24px) - 6px));
}
.biotik-faq-01--compact .biotik-faq-01__answer-inner {
    padding-bottom: max(12px, calc(var(--bs-global-faq-answer-padding-bottom, 28px) - 6px));
}

@media (prefers-reduced-motion: reduce) {
    .biotik-faq-01__item,
    .biotik-faq-01__icon-state,
    .biotik-faq-01__answer { transition-duration: 1ms !important; }
}
