/* ==========================================================================
   Bandeau de consentement (moteur). Les couleurs viennent des variables du site
   (assets/css/main.css) ; à défaut, les valeurs de repli ci-dessous s'appliquent.
   Pour personnaliser : redéfinir les variables --cc-* dans le CSS du site.
   ========================================================================== */
:root {
    --cc-primary: var(--color-primary, #1f3a5f);
    --cc-primary-hover: var(--color-primary-hover, #152a46);
    --cc-on-primary: var(--color-on-primary, #ffffff);
    --cc-surface: var(--color-surface, #f4f4f2);
    --cc-text: var(--color-text, #1a1a1a);
    --cc-muted: var(--color-muted, #5c5f66);
    --cc-bg: var(--color-bg, #ffffff);
    --cc-focus: var(--color-focus, #2b6cd9);
    --cc-container: var(--container, 1280px);
    --cc-gutter: var(--gutter, 20px);
    --cc-radius: var(--radius, 4px);
    --cc-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));
    --cc-speed: var(--speed, .25s);
    --cc-shadow: var(--shadow, 0 10px 30px -12px rgb(0 0 0 / .25));
}
.cc-banner .icon, .cc-dialog .icon { display: block; flex: none; }
.cc-dialog .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cc-banner {
    position: fixed; inset: auto 0 0 0; z-index: 900;
    background: #14171c; color: #e9eaec; box-shadow: 0 -10px 30px -10px rgb(0 0 0 / .35);
    animation: cc-in .4s var(--cc-ease);
}
.cc-banner[hidden] { display: none; }
.cc-banner__inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
    max-width: calc(var(--cc-container) + var(--cc-gutter) * 2); margin-inline: auto; padding: 24px var(--cc-gutter);
}
.cc-banner__text { flex: 1 1 520px; font-size: .925rem; }
.cc-banner__title { font-size: 1.05rem; margin-bottom: .35em; color: #fff; }
.cc-banner a { color: inherit; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 44px; padding: .6em 1.25em; border-radius: var(--cc-radius);
    background: #fff; color: #14171c; font-weight: 600; font-size: .925rem;
    transition: background-color var(--cc-speed) var(--cc-ease), color var(--cc-speed) var(--cc-ease), transform var(--cc-speed) var(--cc-ease);
}
.cc-btn:hover { background: var(--cc-primary); color: var(--cc-on-primary); }
.cc-btn:active { transform: translateY(1px); }
.cc-btn .icon { width: 18px; height: 18px; }
.cc-btn--link { background: transparent; color: inherit; text-decoration: underline; text-underline-offset: .25em; }
.cc-btn--link:hover { background: rgb(255 255 255 / .08); color: #fff; }
.cc-btn--ghost { background: var(--cc-surface); color: var(--cc-text); }

.cc-dialog {
    width: min(640px, calc(100% - 32px)); max-height: min(85vh, 760px); margin: auto; padding: 0;
    border: 0; border-radius: 8px; background: var(--cc-bg); color: var(--cc-text); box-shadow: var(--cc-shadow);
}
.cc-dialog[open] { display: flex; flex-direction: column; animation: cc-in .3s var(--cc-ease); }
.cc-dialog::backdrop { background: rgb(10 12 16 / .55); }
.cc-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px 12px; }
.cc-dialog__head h2 { font-size: 1.35rem; }
.cc-dialog__close { display: inline-flex; padding: 6px; border-radius: var(--cc-radius); transition: background-color var(--cc-speed); }
.cc-dialog__close:hover { background: var(--cc-surface); }
.cc-dialog__body { overflow-y: auto; padding: 0 28px 8px; font-size: .925rem; }
.cc-dialog__body > p { color: var(--cc-muted); margin-bottom: 16px; }
.cc-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 16px 28px 24px; }
.cc-dialog__foot .cc-btn:last-child { background: var(--cc-primary); color: var(--cc-on-primary); }
.cc-dialog__foot .cc-btn:last-child:hover { background: var(--cc-primary-hover); }
.cc-dialog__foot .cc-btn--ghost:hover { background: #e6e6e2; color: var(--cc-text); }

.cc-cats { display: grid; gap: 10px; padding: 0; list-style: none; }
.cc-cat { padding: 16px 18px; border-radius: 6px; background: var(--cc-surface); }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.cc-cat__label { font-weight: 600; cursor: pointer; }
.cc-cat__state { font-size: .8rem; font-weight: 600; color: var(--cc-muted); }
.cc-cat p { color: var(--cc-muted); }
.cc-cat__services { margin-top: 4px; font-size: .825rem; }

.cc-switch { position: relative; flex: none; width: 46px; height: 26px; }
.cc-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cc-switch__track { position: absolute; inset: 0; border-radius: 13px; background: #b9bcc2; transition: background-color var(--cc-speed) var(--cc-ease); }
.cc-switch__track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform var(--cc-speed) var(--cc-ease);
}
.cc-switch input:checked + .cc-switch__track { background: var(--cc-primary); }
.cc-switch input:checked + .cc-switch__track::after { transform: translateX(20px); }
.cc-switch input:focus-visible + .cc-switch__track { outline: 2px solid var(--cc-focus); outline-offset: 2px; }

@keyframes cc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
    .cc-actions, .cc-dialog__foot { width: 100%; }
    .cc-actions .cc-btn, .cc-dialog__foot .cc-btn { flex: 1 1 auto; }
    .cc-dialog__head, .cc-dialog__body, .cc-dialog__foot { padding-inline: 20px; }
}