/* ==========================================================================
   Bandeau cookies (extension Cookie Notice), habillé en carte flottante
   inspirée de Sokult. Seule l'apparence change : boutons et cookie de
   l'extension sont inchangés. Le HTML (logo, titre, textes par langue)
   est complété par inc/cookies.php.
   Les !important battent les styles inline posés par l'extension.
   ========================================================================== */

#cookie-notice {
	left: 24px !important;
	right: auto !important;
	bottom: 24px !important;
	top: auto !important;
	margin: 0;
	width: min(440px, calc(100% - 32px)) !important;
	min-width: 0 !important;
	background: var(--g3-paper) !important;
	border: var(--g3-border);
	border-radius: 0;
	box-shadow: var(--g3-shadow-6);
	font-family: var(--g3-font-body);
	text-align: left;
}
#cookie-notice .cookie-notice-container {
	padding: 24px 26px 22px;
	text-align: left;
	color: var(--g3-ink) !important;
}

/* Logo (incliné comme dans le header) + nom du site */
#cookie-notice .cn-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 14px;
}
#cookie-notice .cn-brand img { width: auto; height: 26px; transform: rotate(-6deg); }
#cookie-notice .cn-brand span {
	font-family: var(--g3-font-mono);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--g3-ink);
}

/* Titre : <p> et non <hN>, le bandeau s'affiche sur toutes les pages */
#cookie-notice .cn-title {
	margin: 0 0 12px;
	font-family: var(--g3-font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: var(--g3-ink);
}
#cookie-notice .cn-title em { font-style: normal; color: var(--g3-accent); }

#cookie-notice #cn-notice-text {
	display: block;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--g3-ink-soft);
}
#cookie-notice #cn-notice-text strong { color: var(--g3-ink); }

/* Boutons */
#cookie-notice #cn-notice-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
#cookie-notice .cn-button {
	margin: 0 !important;
	padding: 11px 18px !important;
	font: 400 13px/1 var(--g3-font-fat) !important;
	letter-spacing: .02em !important;
	text-transform: uppercase !important;
	color: var(--g3-ink) !important;
	border: var(--g3-border) !important;
	border-radius: 0 !important;
	box-shadow: none;
	cursor: pointer;
	transition: background .12s, color .12s;
}
#cookie-notice .cn-button:hover { background: var(--g3-paper-soft) !important; }
#cookie-notice #cn-refuse-cookie { order: 1; background: var(--g3-paper) !important; }
#cookie-notice #cn-accept-cookie { order: 2; background: var(--g3-ink) !important; color: var(--g3-paper) !important; }
#cookie-notice #cn-accept-cookie:hover { background: var(--g3-accent) !important; border-color: var(--g3-accent) !important; }
#cookie-notice #cn-more-info {
	order: 3;
	margin-left: auto !important;
	padding: 6px 2px !important;
	background: none !important;
	border: 0 !important;
	font: 400 11px/1 var(--g3-font-mono) !important;
	letter-spacing: .06em !important;
	color: var(--g3-ink-soft) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}
#cookie-notice #cn-more-info:hover { background: none !important; color: var(--g3-accent) !important; }

/* La croix de l'extension vaut « accepter » sans le dire : masquée */
#cookie-notice .cn-close-icon { display: none; }

@media (max-width: 600px) {
	#cookie-notice { left: 0 !important; right: 0 !important; bottom: 12px !important; margin: 0 auto; box-shadow: var(--g3-shadow-4); }
	#cookie-notice .cookie-notice-container { padding: 20px 18px 18px; }
	#cookie-notice .cn-title { font-size: 23px; }
	#cookie-notice #cn-refuse-cookie,
	#cookie-notice #cn-accept-cookie { flex: 1 1 0; text-align: center; }
	#cookie-notice #cn-more-info { flex-basis: 100%; margin: 4px 0 0 !important; text-align: center; }
}