/* ==========================================================================
   Bandeau cookies (extension Cookie Notice), habillé en carte flottante à la
   DA Riso Zine : blanc, contour noir, ombre bleue décalée, angles droits.
   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(--g2-white) !important;
	border: var(--g2-bd);
	border-radius: 0;
	box-shadow: 6px 6px 0 var(--g2-blue);
	font-family: var(--g2-font-body);
	text-align: left;
}
#cookie-notice .cookie-notice-container {
	padding: 22px 24px 20px;
	text-align: left;
	color: var(--g2-ink) !important;
}

/* Logo + nom du site */
#cookie-notice .cn-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
#cookie-notice .cn-brand img { width: 30px; height: auto; }
#cookie-notice .cn-brand span {
	font-family: var(--g2-font-display);
	font-size: 17px;
	line-height: 1;
	text-transform: lowercase;
	color: var(--g2-blue);
	text-shadow: 2px 2px 0 var(--g2-pink);
}

/* Titre : <p> et non <hN>, le bandeau s'affiche sur toutes les pages */
#cookie-notice .cn-title {
	margin: 0 0 10px;
	font-family: var(--g2-font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.1;
	text-transform: lowercase;
	color: var(--g2-ink);
}
#cookie-notice .cn-title em { font-style: normal; background: var(--g2-pink); padding: 0 6px; }

#cookie-notice #cn-notice-text {
	display: block;
	margin: 0 0 16px;
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--g2-ink);
}
#cookie-notice #cn-notice-text strong { font-weight: 700; }

/* Boutons */
#cookie-notice #cn-notice-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
#cookie-notice .cn-button {
	margin: 0 !important;
	padding: 10px 16px !important;
	font: 700 13px/1.2 var(--g2-font-body) !important;
	letter-spacing: 0 !important;
	text-transform: lowercase !important;
	color: var(--g2-ink) !important;
	border: var(--g2-bd) !important;
	border-radius: 0 !important;
	box-shadow: none;
	cursor: pointer;
	transition: background .15s, color .15s;
}
#cookie-notice #cn-refuse-cookie { order: 1; background: var(--g2-white) !important; }
#cookie-notice #cn-accept-cookie { order: 2; background: var(--g2-blue) !important; color: #fff !important; box-shadow: 3px 3px 0 var(--g2-pink) !important; }
#cookie-notice #cn-refuse-cookie:hover,
#cookie-notice #cn-accept-cookie:hover { background: var(--g2-ink) !important; color: #fff !important; }
#cookie-notice #cn-more-info {
	order: 3;
	margin-left: auto !important;
	padding: 6px 2px !important;
	background: none !important;
	border: 0 !important;
	font-size: 12px !important;
	color: var(--g2-ink) !important;
	text-decoration: underline;
	text-decoration-color: var(--g2-pink);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}
#cookie-notice #cn-more-info:hover { background: none !important; color: var(--g2-blue) !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: 12px !important; right: auto !important; bottom: 14px !important; width: calc(100% - 30px) !important; }
	#cookie-notice .cookie-notice-container { padding: 18px 16px 16px; }
	#cookie-notice .cn-title { font-size: 20px; }
	#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: 2px 0 0 !important; text-align: center; }
}

/* Une fois les cookies acceptés ou refusés, l'extension ne masque que le
   contenu : #cookie-notice reste en place, vide. Sans ceci, sa bordure et son
   ombre dessinent une barre en bas de l'écran sur toutes les pages. */
#cookie-notice.cookie-notice-hidden {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}