/*
 * Bandeau et préférences cookies de la vitrine (templates/components/_cookie_consent.html.twig).
 * Mobile d'abord, dès 320 px. Palette nuit du site (#070a12, #eaf0ff, #acb8c3), turquoise #4cc3bd, Plus Jakarta Sans.
 *
 * États pilotés par analytics-consent.js sur [data-cookie-banner] et [data-cookie-dialog] (attribut data-state) :
 * - enter : glissement amorti (0,8 s), contenu en cascade toutes les 100 ms, lueur turquoise qui fait le tour du contour,
 *   puis le cookie se pose sur sa facture et se fait croquer (miettes) ;
 * - confirm / toast : les boutons laissent place à la confirmation, seconde bouchée et coche qui se dessine ;
 * - leave : sortie vers le bas ; open / closing : fenêtre de préférences.
 * Micro-interactions 160–240 ms, courbe cubic-bezier(.2, .7, .2, 1), aucune boucle permanente.
 * Toutes les animations et transitions vivent sous prefers-reduced-motion: no-preference :
 * en mouvement réduit, l'état final s'affiche directement.
 */
@property --ck-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.ck {
    --ck-night: #070a12;
    --ck-night-2: #0d1826;
    --ck-text: #eaf0ff;
    --ck-muted: #acb8c3;
    --ck-primary: #4cc3bd;
    --ck-primary-hover: #63d3cd;
    --ck-mint: #8fe3dd;
    --ck-line: rgba(234, 240, 255, .12);
    --ck-ease: cubic-bezier(.2, .7, .2, 1);
    --ck-font: var(--font-body, 'Plus Jakarta Sans', sans-serif);
}

html.cookie-dialog-open { overflow: hidden; }

.ck-banner,
.ck-banner *,
.ck-dialog,
.ck-dialog * { box-sizing: border-box; }

.ck-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Bandeau ---------- */
.ck-banner {
    position: fixed;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: calc(12px + env(safe-area-inset-left));
    z-index: 1200;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
        "art head"
        "body body"
        "actions actions";
    align-items: center;
    gap: 12px 14px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
    border: 1px solid rgba(76, 195, 189, .26);
    border-radius: 24px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(76, 195, 189, .17), transparent 48%),
        linear-gradient(160deg, var(--ck-night-2) 0%, var(--ck-night) 72%);
    color: var(--ck-text);
    font-family: var(--ck-font);
    box-shadow: 0 24px 60px rgba(3, 6, 12, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
    isolation: isolate;
}

.ck-banner[hidden] { display: none; }

/* Lueur turquoise qui parcourt le contour à l'entrée. */
.ck-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--ck-angle), transparent 0deg 220deg, rgba(76, 195, 189, .9) 290deg, #d6fbf8 320deg, transparent 350deg);
    opacity: 0;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.ck-banner__art { grid-area: art; width: 56px; height: 56px; }
.ck-art { display: block; width: 100%; height: 100%; overflow: visible; }
.ck-art__halo { fill: rgba(76, 195, 189, .14); }
.ck-art__paper { fill: #f4fbfa; stroke: rgba(76, 195, 189, .5); stroke-width: 1; }
.ck-art__lines { fill: none; stroke: var(--ck-primary); stroke-width: 2.4; stroke-linecap: round; }
.ck-art__dough { fill: #e3ad62; stroke: #c48a43; stroke-width: 2; }
.ck-art__shine { fill: none; stroke: #f6d197; stroke-width: 2.6; stroke-linecap: round; }
.ck-art__chip { fill: #4a2c1b; }
.ck-art__speck { fill: #b47a36; }
.ck-art__crumb { fill: #e3ad62; opacity: 0; }
.ck-art__badge { fill: var(--ck-primary); stroke: var(--ck-night); stroke-width: 2.5; }
.ck-art__tick { fill: none; stroke: #04110f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }
.ck-art__receipt,
.ck-art__cookie,
.ck-art__bite,
.ck-art__crumb,
.ck-art__check,
.ck-art__halo { transform-box: fill-box; transform-origin: center; }
.ck-art__bite--second,
.ck-art__check { transform: scale(0); }

.ck-banner__head { grid-area: head; min-width: 0; }
.ck-kicker {
    margin: 0 0 4px;
    color: var(--ck-mint);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ck-banner__title {
    margin: 0;
    color: var(--ck-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.ck-banner__body { grid-area: body; min-width: 0; }
.ck-banner__body p {
    margin: 0 0 6px;
    color: var(--ck-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.ck-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--ck-mint);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(143, 227, 221, .45);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.ck-banner__actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ck-banner__actions .ck-btn--quiet { grid-column: 1 / -1; }

.ck-banner__confirm {
    grid-area: actions;
    display: none;
    align-self: center;
    min-width: 0;
}
.ck-banner__confirm strong {
    display: block;
    color: var(--ck-text);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.ck-banner__confirm span {
    display: block;
    margin-top: 2px;
    color: var(--ck-muted);
    font-size: 14px;
    line-height: 1.5;
}

.ck-banner:is([data-state="confirm"], [data-state="toast"], [data-state="leave"]) .ck-banner__actions { visibility: hidden; }
.ck-banner:is([data-state="confirm"], [data-state="toast"], [data-state="leave"]) .ck-banner__confirm { display: block; }
.ck-banner:is([data-state="confirm"], [data-state="toast"], [data-state="leave"]) :is(.ck-art__bite--second, .ck-art__check) { transform: none; }
.ck-banner:is([data-state="confirm"], [data-state="toast"], [data-state="leave"]) .ck-art__tick { stroke-dashoffset: 0; }

/* Confirmation seule, quand le choix vient de « Gérer mes cookies ». */
.ck-banner.is-compact {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "art actions";
}
.ck-banner.is-compact :is(.ck-banner__head, .ck-banner__body) { display: none; }
.ck-banner.is-compact .ck-banner__actions { display: none; }

/* ---------- Boutons ---------- */
.ck-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--ck-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ck-btn--primary {
    background: var(--ck-primary);
    color: #04110f;
    box-shadow: 0 10px 24px rgba(76, 195, 189, .26), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ck-btn--outline {
    border-color: rgba(234, 240, 255, .36);
    background: rgba(234, 240, 255, .06);
    color: var(--ck-text);
}
.ck-btn--quiet {
    min-height: 44px;
    padding: 8px 14px;
    background: transparent;
    color: var(--ck-mint);
}
.ck-btn__icon {
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
.ck-btn__icon circle { fill: var(--ck-night); }

@media (hover: hover) {
    .ck-btn--primary:hover {
        background: var(--ck-primary-hover);
        box-shadow: 0 14px 30px rgba(76, 195, 189, .38), inset 0 1px 0 rgba(255, 255, 255, .4);
        transform: translateY(-2px);
    }
    .ck-btn--outline:hover {
        border-color: rgba(234, 240, 255, .62);
        background: rgba(234, 240, 255, .12);
        transform: translateY(-2px);
    }
    .ck-btn--quiet:hover { background: rgba(76, 195, 189, .1); color: #c2f4f0; }
    .ck-btn--quiet:hover .ck-btn__icon circle:first-of-type { transform: translateX(-6px); }
    .ck-btn--quiet:hover .ck-btn__icon circle:last-of-type { transform: translateX(6px); }
    .ck-link:hover { text-decoration-color: currentColor; }
}
.ck-btn:active { transform: scale(.97); }

.ck :is(button, a):focus-visible,
.ck-dialog :is(button, a):focus-visible {
    outline: 3px solid var(--ck-mint);
    outline-offset: 3px;
}

/* ---------- Fenêtre de préférences ---------- */
.ck-dialog {
    position: fixed;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 12px);
    margin: auto 0 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(76, 195, 189, .28);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(76, 195, 189, .16), transparent 60%),
        linear-gradient(170deg, var(--ck-night-2) 0%, var(--ck-night) 70%);
    color: var(--ck-text);
    font-family: var(--ck-font);
    box-shadow: 0 -20px 60px rgba(3, 6, 12, .5);
}
.ck-dialog[open] { display: flex; flex-direction: column; }
.ck-dialog::backdrop { background: rgba(7, 10, 18, .68); backdrop-filter: blur(6px); }

.ck-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ck-line);
    border-radius: 999px;
    background: rgba(234, 240, 255, .06);
    cursor: pointer;
}
.ck-close::before,
.ck-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--ck-text);
    transform: translate(-50%, -50%) rotate(45deg);
}
.ck-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) {
    .ck-close:hover { border-color: rgba(76, 195, 189, .6); background: rgba(76, 195, 189, .12); transform: rotate(90deg); }
}

.ck-dialog__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 16px 16px;
}
.ck-dialog__header { padding-right: 52px; }
.ck-dialog__header .ck-link { margin-top: 4px; }
.ck-dialog__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.03em;
}
.ck-dialog__header p:not(.ck-kicker),
.ck-category p {
    margin: 0;
    color: var(--ck-muted);
    font-size: 14px;
    line-height: 1.6;
}

.ck-categories {
    display: grid;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.ck-category {
    padding: 16px;
    border: 1px solid var(--ck-line);
    border-radius: 18px;
    background: rgba(234, 240, 255, .035);
}
.ck-category--optional:has(input:checked) {
    border-color: rgba(76, 195, 189, .5);
    background: rgba(76, 195, 189, .07);
    box-shadow: 0 0 0 4px rgba(76, 195, 189, .07);
}
.ck-category__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 6px;
}
.ck-category h3 {
    margin: 0;
    color: var(--ck-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
.ck-category__list {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    color: var(--ck-muted);
    font-size: 13px;
    line-height: 1.55;
}
.ck-category__list li {
    position: relative;
    padding-left: 16px;
    overflow-wrap: anywhere;
}
.ck-category__list li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ck-primary);
}
.ck-category__list strong { color: var(--ck-text); font-weight: 700; }

/* Interrupteurs */
.ck-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
}
.ck-switch input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}
.ck-switch__track {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 30px;
    border: 1px solid rgba(234, 240, 255, .26);
    border-radius: 999px;
    background: rgba(234, 240, 255, .12);
}
.ck-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(3, 6, 12, .35);
}
.ck-switch__thumb::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 8px;
    width: 5px;
    height: 10px;
    border: solid #2c8f8a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
}
.ck-switch input:checked + .ck-switch__track {
    border-color: transparent;
    background: var(--ck-primary);
    box-shadow: 0 0 0 4px rgba(76, 195, 189, .16), 0 0 18px rgba(76, 195, 189, .35);
}
.ck-switch input:checked + .ck-switch__track .ck-switch__thumb { transform: translateX(22px); }
.ck-switch input:checked + .ck-switch__track .ck-switch__thumb::after { transform: rotate(45deg) scale(1); }
.ck-switch input:not(:disabled):active + .ck-switch__track .ck-switch__thumb { width: 28px; }
.ck-switch input:checked:not(:disabled):active + .ck-switch__track .ck-switch__thumb { transform: translateX(16px); }
.ck-switch input:focus-visible + .ck-switch__track { outline: 3px solid var(--ck-mint); outline-offset: 3px; }
.ck-switch__state { color: var(--ck-muted); font-size: 13px; font-weight: 700; }
.ck-switch input:checked ~ .ck-switch__state { color: var(--ck-mint); }
.ck-switch input:checked ~ .ck-switch__state .ck-switch__off,
.ck-switch input:not(:checked) ~ .ck-switch__state .ck-switch__on { display: none; }
.ck-switch--locked { cursor: not-allowed; }
.ck-switch--locked input:checked + .ck-switch__track { background: rgba(76, 195, 189, .5); box-shadow: none; }

.ck-dialog__footer {
    display: grid;
    flex-shrink: 0;
    gap: 8px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ck-line);
    background: rgba(7, 10, 18, .55);
}
.ck-dialog__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ck-dialog__actions [data-cookie-save] { grid-column: 1 / -1; }

/* ---------- Petits écrans (moins de 360 px) : le bandeau laisse la page visible ---------- */
@media (max-width: 359px) {
    .ck-banner { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; padding: 16px; border-radius: 20px; }
    .ck-banner__art { width: 44px; height: 44px; }
    .ck-banner .ck-kicker { display: none; }
    .ck-banner__title { font-size: 16px; }
    .ck-banner__body p { margin-bottom: 2px; font-size: 13px; line-height: 1.55; }
    .ck-banner__actions { gap: 8px; }
    .ck-banner .ck-btn { padding: 8px 12px; font-size: 14px; }
    .ck-banner .ck-btn--quiet { min-height: 44px; }
    .ck-dialog__scroll { padding: 20px 14px 14px; }
    .ck-category { padding: 14px; }
    .ck-dialog__footer { padding-right: 14px; padding-left: 14px; }
    .ck-dialog__actions { gap: 8px; }
    .ck-dialog__actions .ck-btn { padding: 8px 10px; font-size: 14px; }
}

/* ---------- Tablette ---------- */
@media (min-width: 600px) {
    .ck-banner {
        grid-template-columns: 80px minmax(0, 1fr);
        grid-template-areas:
            "art head"
            "art body"
            "actions actions";
        gap: 6px 20px;
        padding: 22px 24px;
    }
    .ck-banner__art { width: 80px; height: 80px; align-self: start; }
    .ck-banner__title { font-size: 20px; }
    .ck-banner__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
    .ck-banner__actions .ck-btn--quiet { grid-column: auto; }
    .ck-banner.is-compact {
        left: auto;
        width: min(440px, calc(100% - 24px));
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .ck-banner.is-compact .ck-banner__art { width: 64px; height: 64px; align-self: center; }

    .ck-dialog {
        width: min(720px, calc(100% - 48px));
        max-height: calc(100dvh - 48px);
        margin: auto;
        border-bottom: 1px solid rgba(76, 195, 189, .28);
        border-radius: 28px;
        box-shadow: 0 32px 90px rgba(3, 6, 12, .55);
    }
    .ck-close { top: 18px; right: 18px; }
    .ck-dialog__scroll { padding: 30px 30px 20px; }
    .ck-dialog__title { font-size: 26px; }
    .ck-categories { gap: 14px; }
    .ck-category { padding: 18px; }
    .ck-dialog__footer { padding: 16px 30px 18px; }
    .ck-dialog__actions { grid-template-columns: repeat(3, auto); justify-content: end; }
    .ck-dialog__actions [data-cookie-save] { grid-column: auto; }
}

/* ---------- Bureau ---------- */
@media (min-width: 1000px) {
    .ck-banner {
        right: max(24px, calc((100% - 1120px) / 2));
        bottom: 24px;
        left: max(24px, calc((100% - 1120px) / 2));
        grid-template-columns: 92px minmax(0, 1fr) minmax(300px, 340px);
        grid-template-areas:
            "art head actions"
            "art body actions";
        gap: 4px 24px;
        padding: 24px 28px;
        border-radius: 28px;
    }
    .ck-banner__art { width: 92px; height: 92px; align-self: center; }
    .ck-banner__title { font-size: 22px; }
    .ck-banner__actions { grid-template-columns: 1fr 1fr; margin-top: 0; }
    .ck-banner__actions .ck-btn--quiet { grid-column: 1 / -1; }
    .ck-banner__confirm { padding-left: 4px; }
    .ck-banner.is-compact {
        right: 24px;
        left: auto;
        width: 440px;
    }
}

/* ---------- Chorégraphie (mouvement autorisé uniquement) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .ck-btn,
    .ck-close,
    .ck-link,
    .ck-category,
    .ck-switch__track,
    .ck-btn__icon circle {
        transition:
            transform .2s var(--ck-ease),
            background-color .2s var(--ck-ease),
            border-color .2s var(--ck-ease),
            box-shadow .2s var(--ck-ease),
            color .2s var(--ck-ease),
            text-decoration-color .2s var(--ck-ease);
    }
    .ck-btn:active { transition-duration: .16s; }
    .ck-close { transition-duration: .24s; }
    .ck-switch__thumb { transition: transform .24s var(--ck-ease), width .16s var(--ck-ease); }
    .ck-switch__thumb::after { transition: transform .2s var(--ck-ease) .04s; }

    /* Entrée du bandeau */
    .ck-banner[data-state="enter"] { animation: ck-banner-in .8s var(--ck-ease) both, ck-glow 1.8s var(--ck-ease) .25s both; }
    .ck-banner[data-state="enter"]::before { animation: ck-ring 1.5s var(--ck-ease) .3s both; }
    .ck-banner[data-state="enter"] :is(.ck-banner__art, .ck-banner__head, .ck-banner__body, .ck-banner__actions .ck-btn) {
        animation: ck-rise .6s var(--ck-ease) both;
    }
    .ck-banner[data-state="enter"] .ck-banner__art { animation-name: ck-art-in; animation-delay: .16s; }
    .ck-banner[data-state="enter"] .ck-banner__head { animation-delay: .26s; }
    .ck-banner[data-state="enter"] .ck-banner__body { animation-delay: .36s; }
    .ck-banner[data-state="enter"] .ck-banner__actions .ck-btn:nth-child(1) { animation-delay: .46s; }
    .ck-banner[data-state="enter"] .ck-banner__actions .ck-btn:nth-child(2) { animation-delay: .56s; }
    .ck-banner[data-state="enter"] .ck-banner__actions .ck-btn:nth-child(3) { animation-delay: .66s; }

    /* Le cookie se pose sur sa facture, puis se fait croquer. */
    .ck-banner[data-state="enter"] .ck-art__halo { animation: ck-halo 1.2s var(--ck-ease) .2s both; }
    .ck-banner[data-state="enter"] .ck-art__receipt { animation: ck-receipt .7s var(--ck-ease) .34s both; }
    .ck-banner[data-state="enter"] .ck-art__cookie { animation: ck-cookie .8s var(--ck-ease) .2s both; }
    .ck-banner[data-state="enter"] .ck-art__bite--first { animation: ck-bite .2s var(--ck-ease) 1.05s both; }
    .ck-banner[data-state="enter"] .ck-art__crumb { animation: ck-crumb .7s var(--ck-ease) 1.08s both; }
    .ck-art__crumb--a { --ck-dx: 9px; --ck-dy: 14px; }
    .ck-art__crumb--b { --ck-dx: 12px; --ck-dy: 22px; }
    .ck-art__crumb--c { --ck-dx: 4px; --ck-dy: 26px; }

    /* Confirmation : la confirmation remplace les boutons, seconde bouchée et coche dessinée. */
    .ck-banner:is([data-state="confirm"], [data-state="toast"]) .ck-banner__confirm { animation: ck-rise .42s var(--ck-ease) .08s both; }
    .ck-banner:is([data-state="confirm"], [data-state="toast"]) .ck-art__bite--second { animation: ck-bite .2s var(--ck-ease) .12s both; }
    .ck-banner:is([data-state="confirm"], [data-state="toast"]) .ck-art__crumb { animation: ck-crumb .6s var(--ck-ease) .14s both; }
    .ck-banner:is([data-state="confirm"], [data-state="toast"]) .ck-art__check { animation: ck-pop .42s var(--ck-ease) .3s both; }
    .ck-banner:is([data-state="confirm"], [data-state="toast"]) .ck-art__tick { animation: ck-draw .36s var(--ck-ease) .5s both; }
    .ck-banner[data-state="confirm"] .ck-art__cookie { animation: ck-chomp .3s var(--ck-ease) .1s both; }
    .ck-banner[data-state="toast"] { animation: ck-banner-in .6s var(--ck-ease) both; }

    /* Sortie */
    .ck-banner[data-state="leave"] { animation: ck-banner-out .46s var(--ck-ease) both; }

    /* Fenêtre de préférences */
    .ck-dialog[data-state="open"] { animation: ck-sheet-in .5s var(--ck-ease) both; }
    .ck-dialog[data-state="open"]::backdrop { animation: ck-fade .3s var(--ck-ease) both; }
    .ck-dialog[data-state="open"] :is(.ck-dialog__header, .ck-category, .ck-dialog__footer) { animation: ck-rise .5s var(--ck-ease) both; }
    .ck-dialog[data-state="open"] .ck-dialog__header { animation-delay: .08s; }
    .ck-dialog[data-state="open"] .ck-category:nth-child(1) { animation-delay: .16s; }
    .ck-dialog[data-state="open"] .ck-category:nth-child(2) { animation-delay: .24s; }
    .ck-dialog[data-state="open"] .ck-dialog__footer { animation-delay: .32s; }
    .ck-dialog[data-state="closing"] { animation: ck-sheet-out .24s var(--ck-ease) both; }
    .ck-dialog[data-state="closing"]::backdrop { animation: ck-fade .24s var(--ck-ease) reverse both; }

    @media (min-width: 600px) {
        .ck-dialog[data-state="open"] { animation-name: ck-dialog-in; }
        .ck-dialog[data-state="closing"] { animation-name: ck-dialog-out; }
    }
}

@keyframes ck-banner-in {
    0% { opacity: 0; transform: translateY(calc(100% + 40px)); }
    55% { opacity: 1; }
    72% { transform: translateY(-7px); }
    100% { opacity: 1; transform: none; }
}
@keyframes ck-banner-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(calc(100% + 40px)); }
}
@keyframes ck-glow {
    0% { box-shadow: 0 24px 60px rgba(3, 6, 12, .42), inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 0 rgba(76, 195, 189, 0); }
    40% { box-shadow: 0 24px 60px rgba(3, 6, 12, .42), inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 46px 2px rgba(76, 195, 189, .38); }
    100% { box-shadow: 0 24px 60px rgba(3, 6, 12, .42), inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 0 rgba(76, 195, 189, 0); }
}
@keyframes ck-ring {
    0% { --ck-angle: 0deg; opacity: 0; }
    12% { opacity: 1; }
    80% { opacity: 1; }
    100% { --ck-angle: 360deg; opacity: 0; }
}
@keyframes ck-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes ck-art-in {
    from { opacity: 0; transform: translateY(14px) scale(.7) rotate(-14deg); }
    to { opacity: 1; transform: none; }
}
@keyframes ck-halo {
    0% { opacity: 0; transform: scale(.4); }
    55% { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: none; }
}
@keyframes ck-receipt {
    from { opacity: 0; transform: translate(10px, 16px) rotate(8deg); }
    to { opacity: 1; transform: none; }
}
@keyframes ck-cookie {
    0% { transform: translateY(-18px) rotate(-70deg) scale(.6); }
    70% { transform: translateY(2px) rotate(6deg) scale(1.03); }
    100% { transform: none; }
}
@keyframes ck-chomp {
    0%, 100% { transform: none; }
    45% { transform: scale(.94) rotate(-4deg); }
}
@keyframes ck-bite {
    from { transform: scale(0); }
    to { transform: none; }
}
@keyframes ck-crumb {
    0% { opacity: 0; transform: none; }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--ck-dx), var(--ck-dy)) rotate(120deg); }
}
@keyframes ck-pop {
    0% { transform: scale(0); }
    65% { transform: scale(1.15); }
    100% { transform: none; }
}
@keyframes ck-draw {
    from { stroke-dashoffset: 20; }
    to { stroke-dashoffset: 0; }
}
@keyframes ck-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ck-sheet-in {
    from { transform: translateY(100%); }
    to { transform: none; }
}
@keyframes ck-sheet-out {
    from { transform: none; }
    to { transform: translateY(100%); }
}
@keyframes ck-dialog-in {
    from { opacity: 0; transform: translateY(28px) scale(.96); }
    to { opacity: 1; transform: none; }
}
@keyframes ck-dialog-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(16px) scale(.97); }
}