/**
 * Ferry — bandeau cookies compact (Phosphore).
 * Palette = ui/src/tokens/ferryPalette.js (--ferry-cc-* ci-dessous).
 */

:root,
html.cc--darkmode,
#cc-main,
#cc-main.cc--darkmode {
	--ferry-cc-bg: #101218;
	--ferry-cc-elevated: #16181f;
	--ferry-cc-code: #050608;
	--ferry-cc-border: #2a2e38;
	--ferry-cc-ink: #eef0f4;
	--ferry-cc-muted: #8b919c;
	--ferry-cc-btn-dark: #16181f;
	--ferry-cc-accent: #58f0a8;
	--ferry-cc-accent-hover: #7af5bb;
	--ferry-cc-accent-ink: #08090c;
	--cc-z-index: 99999;
	--cc-modal-margin: 16px;
	--cc-modal-border-radius: 4px;
	--cc-btn-border-radius: 4px;
	--cc-font-family: inherit;
	--cc-bg: var(--ferry-cc-bg);
	--cc-primary-color: var(--ferry-cc-ink);
	--cc-secondary-color: var(--ferry-cc-muted);
	--cc-btn-primary-bg: var(--ferry-cc-accent);
	--cc-btn-primary-color: var(--ferry-cc-accent-ink);
	--cc-btn-primary-border-color: var(--ferry-cc-accent);
	--cc-btn-primary-hover-bg: var(--ferry-cc-accent-hover);
	--cc-btn-primary-hover-color: var(--ferry-cc-accent-ink);
	--cc-btn-primary-hover-border-color: var(--ferry-cc-accent-hover);
	--cc-btn-secondary-bg: var(--ferry-cc-btn-dark);
	--cc-btn-secondary-color: var(--ferry-cc-ink);
	--cc-btn-secondary-border-color: var(--ferry-cc-btn-dark);
	--cc-btn-secondary-hover-bg: var(--ferry-cc-elevated);
	--cc-btn-secondary-hover-color: var(--ferry-cc-ink);
	--cc-btn-secondary-hover-border-color: var(--ferry-cc-border);
	--cc-separator-border-color: transparent;
	--cc-footer-bg: var(--ferry-cc-bg);
	--cc-footer-border-color: transparent;
	--cc-overlay-bg: rgba(11, 18, 32, 0.72);
	--cc-link-color: var(--ferry-cc-muted);
	/* Sections / toggles modale préférences (Phosphore) */
	--cc-toggle-on-bg: var(--ferry-cc-accent);
	--cc-toggle-off-bg: #2a3140;
	--cc-toggle-on-knob-bg: var(--ferry-cc-accent-ink);
	--cc-toggle-off-knob-bg: #ffffff;
	--cc-toggle-enabled-icon-color: var(--ferry-cc-accent-ink);
	--cc-toggle-disabled-icon-color: var(--ferry-cc-bg);
	--cc-toggle-readonly-bg: #2a3140;
	--cc-toggle-readonly-knob-bg: #6b7280;
	--cc-toggle-readonly-knob-icon-color: #2a3140;
	--cc-section-category-border: rgba(255, 255, 255, 0.08);
	--cc-cookie-category-block-bg: var(--ferry-cc-elevated);
	--cc-cookie-category-block-border: rgba(255, 255, 255, 0.1);
	--cc-cookie-category-block-hover-bg: var(--ferry-cc-bg);
	--cc-cookie-category-block-hover-border: rgba(255, 255, 255, 0.16);
	--cc-cookie-category-expanded-block-bg: var(--ferry-cc-elevated);
	--cc-cookie-category-expanded-block-hover-bg: rgba(255, 255, 255, 0.18);
	--cc-webkit-scrollbar-bg: rgba(255, 255, 255, 0.12);
}

.cc--darkmode,
html.cc--darkmode #cc-main {
	--cc-toggle-on-bg: var(--ferry-cc-accent);
	--cc-toggle-off-bg: #2a3140;
	--cc-cookie-category-block-bg: var(--ferry-cc-elevated);
	--cc-cookie-category-block-border: rgba(255, 255, 255, 0.1);
	--cc-cookie-category-block-hover-bg: var(--ferry-cc-bg);
	--cc-cookie-category-block-hover-border: rgba(255, 255, 255, 0.16);
}

#cc-main {
	color-scheme: dark;
	font-size: 14px;
}

#cc-main .cm {
	width: auto !important;
	max-width: 360px !important;
	background: var(--ferry-cc-bg) !important;
	color: var(--ferry-cc-ink) !important;
	border: none !important;
	border-radius: 4px !important;
	box-shadow: inset 0 0 0 1px var(--ferry-cc-border) !important;
}

#cc-main .cm--left {
	left: 16px !important;
	bottom: 16px !important;
	margin: 0 !important;
}

#cc-main .cm__texts {
	padding: 0 !important;
}

#cc-main .cm__title {
	display: none !important;
}

#cc-main .cm__desc {
	padding: 16px 16px 0 !important;
	margin: 0 !important;
	max-height: none !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	color: var(--ferry-cc-ink) !important;
}

#cc-main .cm__desc a {
	color: var(--ferry-cc-muted) !important;
	text-decoration: none !important;
	background-image: none !important;
	font-weight: 400 !important;
}

#cc-main .cm__desc a:hover {
	color: var(--ferry-cc-accent) !important;
}

#cc-main .cm__btns {
	padding: 16px !important;
	border-top: none !important;
	background: transparent !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
}

#cc-main .cm__btn-group {
	display: flex !important;
	flex-flow: row wrap !important;
	flex-direction: row !important;
	gap: 10px !important;
	grid-auto-columns: unset !important;
	grid-auto-flow: unset !important;
	min-width: unset !important;
}

#cc-main .cm__btn {
	flex: 0 1 auto !important;
	min-height: unset !important;
	min-width: unset !important;
	width: auto !important;
	padding: 8px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	border-radius: 4px !important;
	border: none !important;
}

#cc-main .cm__btn[data-role="accept-necessary"] {
	order: 1;
	background: var(--ferry-cc-btn-dark) !important;
	color: var(--ferry-cc-ink) !important;
	border-color: var(--ferry-cc-btn-dark) !important;
}

#cc-main .cm__btn[data-role="show-preferencesModal"] {
	order: 2;
	background: var(--ferry-cc-btn-dark) !important;
	color: var(--ferry-cc-ink) !important;
	border-color: var(--ferry-cc-btn-dark) !important;
}

#cc-main .cm__btn[data-role="accept-all"] {
	order: 3;
	background: var(--ferry-cc-accent) !important;
	color: var(--ferry-cc-accent-ink) !important;
	border-color: var(--ferry-cc-accent) !important;
}

#cc-main .cm__btn--secondary {
	background: var(--ferry-cc-btn-dark) !important;
	color: var(--ferry-cc-ink) !important;
	border-color: var(--ferry-cc-btn-dark) !important;
}

#cc-main .cm__btn[data-role="accept-necessary"]:hover,
#cc-main .cm__btn[data-role="show-preferencesModal"]:hover,
#cc-main .cm__btn--secondary:hover {
	background: #1a1a1a !important;
	color: var(--ferry-cc-ink) !important;
	border-color: #1a1a1a !important;
}

#cc-main .cm__btn[data-role="accept-all"]:hover {
	background: var(--ferry-cc-accent-hover) !important;
	color: var(--ferry-cc-accent-ink) !important;
	border-color: var(--ferry-cc-accent-hover) !important;
}

#cc-main .cm__btn-group + .cm__btn-group {
	margin-top: 0 !important;
	margin-left: 0 !important;
}

#cc-main .cm__btn-group .cm__btn + .cm__btn {
	margin-left: 0 !important;
}

#cc-main .cm__btn--close {
	display: none !important;
}

#cc-main .cm__footer,
#cc-main .cm__links {
	display: none !important;
}

#cc-main .pm {
	background: var(--ferry-cc-bg) !important;
	color: var(--ferry-cc-ink) !important;
	box-shadow: inset 0 0 0 1px var(--ferry-cc-border) !important;
	border-radius: 4px !important;
}

#cc-main .pm__header,
#cc-main .pm__footer {
	border-color: var(--ferry-cc-border) !important;
}

#cc-main .pm__section-desc,
#cc-main .pm__section-desc-wrapper {
	color: var(--ferry-cc-muted) !important;
}

#cc-main .pm__btn--secondary,
#cc-main .pm__close-btn {
	background: var(--ferry-cc-btn-dark) !important;
	border-color: var(--ferry-cc-border) !important;
	color: var(--ferry-cc-ink) !important;
}

#cc-main .pm__btn:not(.pm__btn--secondary) {
	background: var(--ferry-cc-accent) !important;
	border-color: var(--ferry-cc-accent) !important;
	color: var(--ferry-cc-accent-ink) !important;
}

/* Modale préférences — accordéons catégories */
#cc-main .pm__title {
	color: var(--ferry-cc-ink) !important;
	font-family: inherit !important;
}

#cc-main .pm__section--toggle {
	background: transparent !important;
	border-radius: 0 !important;
}

#cc-main .pm__section--toggle .pm__section-title {
	color: var(--ferry-cc-ink) !important;
	font-family: inherit !important;
	background: var(--ferry-cc-btn-dark) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 0 !important;
}

#cc-main .pm__section--toggle .pm__section-title:hover {
	background: var(--ferry-cc-bg) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
}

#cc-main .pm__section--toggle.is-expanded .pm__section-title {
	border-color: rgba(255, 255, 255, 0.18) !important;
}

#cc-main .pm__section--toggle .pm__section-desc-wrapper {
	background: var(--ferry-cc-code) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-top: none !important;
	border-radius: 0 !important;
	color: var(--ferry-cc-muted) !important;
}

#cc-main .pm__section-desc-wrapper > :not(:last-child) {
	border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#cc-main .pm__section:first-child {
	color: var(--ferry-cc-muted) !important;
}

#cc-main .pm__section:not(:first-child) {
	border-color: rgba(255, 255, 255, 0.08) !important;
}

#cc-main .pm__section:not(:first-child):hover {
	background: var(--ferry-cc-elevated) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
}

#cc-main .pm__badge {
	display: flex !important;
	background: rgba(61, 214, 198, 0.12) !important;
	color: var(--ferry-cc-accent) !important;
	font-family: inherit !important;
	border-radius: 0 !important;
}

#cc-main .pm__section--expandable .pm__section-arrow {
	background: rgba(255, 255, 255, 0.1) !important;
}

#cc-main .pm__section--expandable .pm__section-arrow svg {
	stroke: var(--ferry-cc-ink) !important;
}

#cc-main .section__toggle:checked ~ .toggle__icon {
	background: var(--ferry-cc-accent) !important;
	box-shadow: 0 0 0 1px var(--ferry-cc-accent) !important;
}

#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
	background-color: var(--ferry-cc-accent-ink) !important;
}

#cc-main .toggle__icon {
	background: var(--cc-toggle-off-bg) !important;
	box-shadow: 0 0 0 1px var(--cc-toggle-off-bg) !important;
	border-radius: 0 !important;
}

#cc-main .toggle__icon-circle {
	border-radius: 0 !important;
}

#cc-main .section__toggle:checked:disabled ~ .toggle__icon {
	background: var(--cc-toggle-readonly-bg) !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

#cc-main .section__toggle:checked:disabled ~ .toggle__icon .toggle__icon-circle {
	background: var(--cc-toggle-readonly-knob-bg) !important;
}

#cc-main .service-item {
	color: var(--ferry-cc-ink) !important;
}

#cc-main .pm__table-th,
#cc-main .pm__table-td {
	color: var(--ferry-cc-muted) !important;
}

@media screen and (max-width: 640px) {
	#cc-main .cm--left {
		left: 16px !important;
		right: 16px !important;
		max-width: calc(100vw - 32px) !important;
	}

	#cc-main .cm__btns {
		flex-direction: row !important;
		justify-content: flex-start !important;
		border-top: none !important;
		background: transparent !important;
	}

	#cc-main .cm__btn-group {
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}

	#cc-main .cm__btn {
		flex: 0 1 auto !important;
	}

	#cc-main .cm__btn + .cm__btn,
	#cc-main .cm__btn-group + .cm__btn-group {
		margin: 0 !important;
	}
}