@charset "utf-8";

:root {
	--bg-body: #0a0908;
	--bg-page: #141110;
	--bg-header: #1a1614;
	--bg-panel: rgba(20, 17, 16, 0.85);
	--bg-panel-solid: #1c1917;
	--bg-panel-light: #ffffff;
	--text-main: #ececec;
	--text-dark: #1a1614;
	--text-muted: #b8b0a8;
	--accent: #d97328;
	--accent-hot: #ff8a3d;
	--accent-deep: #8a3a12;
	--border-soft: rgba(217, 115, 40, 0.35);
	--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.6);
	--radius: 8px;
	--font-title: 'Oswald', 'Happy Monkey', Impact, sans-serif;
	--font-body: 'Inter', 'Segoe UI', Verdana, Geneva, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
}

body {
	background: var(--bg-body);
	background-image:
		radial-gradient(ellipse at 20% 0%, rgba(217, 115, 40, 0.12) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 100%, rgba(138, 58, 18, 0.15) 0%, transparent 50%),
		linear-gradient(180deg, #0a0908 0%, #141110 100%);
	background-attachment: fixed;
	color: var(--text-main);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	min-height: 100vh;
}

a {
	color: var(--accent-hot);
	text-decoration: none;
	transition: color 0.2s ease;
}
a:hover {
	color: var(--accent);
	text-decoration: underline;
}
img {
	border: none;
	max-width: 100%;
	height: auto;
}

#global {
	position: relative;
	margin: 0 auto;
	max-width: 1100px;
	background: var(--bg-page);
	background-image:
		linear-gradient(180deg, rgba(20, 17, 16, 0.85) 0%, rgba(20, 17, 16, 0.95) 100%),
		url(img/pochette-elaim.jpg);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	border: 1px solid rgba(217, 115, 40, 0.25);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}

/**************/
/* NAVIGATION */
/**************/

#header {
	position: relative;
	background: linear-gradient(180deg, #000000 0%, #1a1614 100%);
	border-bottom: 2px solid var(--accent);
	padding: 15px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}
#header #titre {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
#header #titre a {
	display: inline-block;
}
#header #titre img {
	height: 55px;
	width: auto;
	display: block;
}
#header #titre div {
	display: none;
}
#header #menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	flex: 1 1 auto;
	justify-content: center;
	font-family: var(--font-title);
}
#header #menu li {
	list-style: none;
}
#header #menu li a {
	display: block;
	padding: 8px 12px;
	color: var(--text-main);
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.2s ease;
}
#header #menu li a:hover,
#header #menu li.on a {
	background: linear-gradient(180deg, var(--accent-deep) 0%, var(--accent) 100%);
	color: #fff;
	text-decoration: none;
}
#header #lang-selection {
	flex: 0 0 auto;
	display: flex;
	gap: 6px;
}
#header #lang-selection a {
	display: inline-block;
	width: 22px;
	height: 15px;
	text-indent: -9999px;
	overflow: hidden;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}
#header #lang-selection a:hover { opacity: 1; }
#header #lang-selection #btn-fr {
	background: transparent url(/img/picto_drapeau_fr.gif) 0 0 no-repeat;
}
#header #lang-selection #btn-en {
	background: transparent url(/img/picto_drapeau_en.gif) 0 0 no-repeat;
}

/**********/
/* FOOTER */
/**********/

#footer {
	background: linear-gradient(180deg, #1a1614 0%, #000 100%);
	border-top: 2px solid var(--accent);
	padding: 20px;
	text-align: center;
	font-family: var(--font-title);
	letter-spacing: 1px;
}
#footer a {
	color: var(--text-main);
	font-size: 14px;
	margin: 0 12px;
	text-transform: uppercase;
}
#footer a:hover {
	color: var(--accent-hot);
}
#footer #social {
	margin-bottom: 12px;
}

/************/
/* HOMEPAGE */
/************/

#home-hero {
	padding: 40px 30px 20px;
	text-align: center;
}
#home-hero h1 {
	font-family: var(--font-title);
	font-size: 60px;
	letter-spacing: 8px;
	margin: 0 0 8px;
	color: #fff;
	text-shadow: 0 2px 20px rgba(217, 115, 40, 0.5);
	text-transform: uppercase;
}
#home-hero h2 {
	font-family: var(--font-title);
	font-size: 20px;
	letter-spacing: 4px;
	color: var(--accent-hot);
	margin: 0;
	text-transform: uppercase;
	font-weight: 400;
}

#home-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 20px;
	padding: 20px 30px 30px;
}

.panel {
	background: var(--bg-panel);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(217, 115, 40, 0.2);
	border-radius: var(--radius);
	padding: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.panel-title {
	font-family: var(--font-title);
	font-size: 22px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--accent-hot);
	margin: 0 0 15px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border-soft);
}

#intro-accueil p {
	margin: 0 0 12px;
	color: var(--text-main);
}

/* Socials & streaming icons (homepage widget replacing Jamendo) */
.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid var(--border-soft);
}
.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-soft);
	color: var(--text-main);
	transition: all 0.25s ease;
}
.social-links a:hover {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent-hot);
	transform: translateY(-2px);
	text-decoration: none;
}
.social-links svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.social-links .label {
	position: absolute;
	left: -9999px;
}

/* News block */
#news-accueil article {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px dashed rgba(217, 115, 40, 0.2);
}
#news-accueil article:last-of-type {
	border-bottom: none;
}
#news-accueil .date {
	color: var(--accent-hot);
	font-size: 12px;
	margin-bottom: 4px;
	font-family: var(--font-title);
	letter-spacing: 1px;
}
#news-accueil .news-title {
	font-weight: bold;
	margin-bottom: 6px;
	color: #fff;
}
#news-accueil img {
	float: left;
	margin: 0 10px 8px 0;
	max-width: 80px;
	border-radius: 4px;
}
#news-accueil a.more {
	display: inline-block;
	margin-top: 8px;
	color: var(--accent-hot);
	font-family: var(--font-title);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 12px;
}

/* Agenda */
#agenda-accueil ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#agenda-accueil li {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px dashed rgba(217, 115, 40, 0.2);
}
#agenda-accueil li:last-child { border-bottom: none; }
#agenda-accueil strong {
	display: block;
	color: var(--accent-hot);
	font-family: var(--font-title);
	letter-spacing: 1px;
	font-size: 14px;
	margin-bottom: 4px;
}
#agenda-accueil span.place {
	font-weight: bold;
	color: #fff;
	display: block;
	margin-bottom: 3px;
}

/************/
/* CONTENUS */
/************/

#contenu {
	margin: 20px;
	padding: 25px 30px;
	background: rgba(20, 17, 16, 0.85);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(217, 115, 40, 0.2);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	color: var(--text-main);
}
#contenu h1 {
	font-family: var(--font-title);
	font-size: 32px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--accent);
}
#contenu h2 {
	font-family: var(--font-title);
	font-size: 22px;
	color: var(--accent-hot);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 20px 0 10px;
}
#contenu h3 {
	font-family: var(--font-title);
	font-size: 17px;
	color: var(--text-main);
	letter-spacing: 1px;
	margin: 15px 0 8px;
}
#contenu p {
	color: var(--text-main);
}
#contenu a {
	color: var(--accent-hot);
}
#contenu a:hover {
	color: var(--accent);
}

#contenu .item {
	display: block;
	margin: 35px 0;
	padding: 0;
	overflow: hidden;
}
/* Salle et adresse d'un concert, sous la ligne « date : ville » */
#contenu .item .lieu {
	color: var(--text-muted);
	font-size: 0.9em;
}
#contenu div.item img {
	float: left;
	margin: 0 20px 15px 0;
	border-radius: 6px;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);
	/* Les visuels ne débordent jamais et gardent leurs proportions,
	   quelle que soit la taille du fichier envoyé depuis l'admin. */
	max-width: 100%;
	height: auto;
}
/* ---------------------------------------------------------------------
   Cadres d'affichage des vignettes.

   Chaque famille d'images tient dans un gabarit fixe : les proportions
   du fichier sont conservées, mais rien ne peut déborder, même si une
   image envoyée depuis l'administration est plus grande que prévu.
   « width/height: auto » laisse le navigateur partir des proportions
   réelles, que max-width et max-height ramènent ensuite au gabarit.
   --------------------------------------------------------------------- */

/* Pochettes d'album : toutes au même format carré */
#contenu div.item img.cover {
	width: 250px;
	max-width: 100%;
	height: auto;
}

/* Portraits des musiciens : portrait ou paysage, dans un carré de 250 */
#contenu div.item img.portrait {
	width: auto;
	height: auto;
	max-width: 250px;
	max-height: 250px;
}

/* Affiches de concert */
#contenu div.item img.poster {
	width: auto;
	height: auto;
	max-width: 250px;
	max-height: 320px;
}

/* Logos des sites amis */
#contenu div.item img.link-visual {
	width: auto;
	height: auto;
	max-width: 225px;
	max-height: 190px;
}

/* Vignettes de la liste des galeries */
#contenu div.item img.gallery-thumb {
	width: auto;
	height: auto;
	max-width: 184px;
	max-height: 135px;
}
#contenu div.item img.right {
	float: right;
	margin-left: 20px;
	margin-right: 0;
}
#contenu div.item img.noborder {
	box-shadow: none;
	border-radius: 0;
}
#contenu div.item h2 a,
#contenu div.item h3 a {
	color: var(--accent-hot);
	text-decoration: none;
}
#contenu div.item h2 a:hover,
#contenu div.item h3 a:hover {
	color: var(--accent);
}

#contenu a.back {
	display: inline-block;
	font-family: var(--font-title);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background-color: rgba(217, 115, 40, 0.15);
	color: var(--text-main);
	margin: 3px 3px 15px 0;
	padding: 6px 12px;
	border: 1px solid var(--border-soft);
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.2s ease;
}
#contenu a.back:hover,
#contenu a.back.on {
	background-color: var(--accent);
	color: #fff;
	border-color: var(--accent-hot);
}

#contenu form {
	margin: 30px 0;
	padding: 25px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
}
#contenu form p {
	margin: 12px 0;
	overflow: hidden;
}
#contenu form label {
	display: block;
	float: left;
	width: 180px;
	color: var(--text-main);
	padding-top: 6px;
}
#contenu form label.required::after {
	content: " *";
	color: var(--accent-hot);
}
/* Tous les champs de saisie, quel que soit leur type (text, email, tel,
   url, number, date…), à l'exception des boutons et des cases. */
#contenu form input:not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
#contenu form select,
#contenu form textarea {
	width: calc(100% - 190px);
	max-width: 380px;
	padding: 6px 10px;
	border: 1px solid var(--border-soft);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-main);
	border-radius: 4px;
	font-family: inherit;
	font-size: 14px;
}
#contenu form input:not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
#contenu form select:focus,
#contenu form textarea:focus {
	outline: none;
	border-color: var(--accent);
	background: rgba(255, 255, 255, 0.08);
}
/* Le remplissage automatique du navigateur impose sinon un fond blanc */
#contenu form input:-webkit-autofill,
#contenu form input:-webkit-autofill:hover,
#contenu form input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text-main);
	-webkit-box-shadow: 0 0 0 1000px var(--bg-panel-solid) inset;
	caret-color: var(--text-main);
}
#contenu form input[type=submit],
#contenu form input[type=reset] {
	cursor: pointer;
	margin: 15px 8px;
	padding: 10px 24px;
	background: var(--accent);
	color: #fff;
	font-family: var(--font-title);
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	border: none;
	border-radius: 4px;
	transition: background 0.2s ease;
}
#contenu form input[type=submit]:hover,
#contenu form input[type=reset]:hover {
	background: var(--accent-hot);
}

/* Fancybox on dark background - keep pictures readable */
.fancybox img,
a.fancybox img {
	cursor: zoom-in;
}

/***********/
/* CLASSES */
/***********/

.clear {
	clear: both;
}
.errMsg {
	border: 2px solid #ff5544;
	background: rgba(255, 85, 68, 0.1);
	color: #ff8877;
	font-weight: bold;
	font-size: 16px;
	margin: 20px 0;
	padding: 15px;
	text-align: center;
	border-radius: var(--radius);
}
.float-right { float: right; margin: 0 0 15px 15px; }
.overflow { overflow: auto; }

/* Legacy hidden elements */
#lagrosseradio-accueil,
#infogroupe-accueil,
#liens-social,
#widget {
	display: none;
}

/*****************/
/* RESPONSIVE     */
/*****************/

@media (max-width: 900px) {
	body { font-size: 14px; }
	#global { margin: 0; border-radius: 0; border-left: none; border-right: none; }
	#header {
		flex-direction: column;
		gap: 10px;
		padding: 12px 15px;
	}
	#header #titre img { height: 45px; }
	#header #menu {
		width: 100%;
		justify-content: center;
	}
	#header #menu li a {
		font-size: 13px;
		padding: 6px 8px;
		letter-spacing: 0.5px;
	}
	#header #lang-selection {
		position: absolute;
		top: 15px;
		right: 15px;
	}
	#home-grid {
		grid-template-columns: 1fr;
		padding: 15px;
	}
	#home-hero { padding: 25px 15px 10px; }
	#home-hero h1 { font-size: 42px; letter-spacing: 5px; }
	#home-hero h2 { font-size: 16px; letter-spacing: 3px; }
	#contenu { margin: 15px; padding: 20px; }
	#contenu h1 { font-size: 24px; }
	#contenu div.item img {
		float: none;
		display: block;
		margin: 0 auto 15px;
	}
	#contenu div.item img.right { float: none; }
	#contenu form label {
		float: none;
		width: 100%;
		padding-top: 0;
		margin-bottom: 4px;
	}
	#contenu form input:not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
	#contenu form select,
	#contenu form textarea {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	#header #menu li a {
		font-size: 12px;
		padding: 5px 6px;
	}
	#home-hero h1 { font-size: 34px; letter-spacing: 3px; }
	.social-links a { width: 38px; height: 38px; }
	.social-links svg { width: 18px; height: 18px; }
	#contenu { margin: 10px; padding: 15px; }
	#contenu h1 { font-size: 20px; letter-spacing: 2px; }
	#contenu h2 { font-size: 18px; }
	#footer a { display: inline-block; margin: 4px 8px; }
}

/* =====================================================================
   Ajouts liés à la mise en base des contenus
   ===================================================================== */

/* Grille des galeries photos : hauteur fixe, largeur selon la photo.
   Sélecteur volontairement aussi précis que la règle générique
   « #contenu div.item img », qui sinon l'emporterait. */
.img-galerie {
	float: left;
	height: 165px;
	margin: 0 6px 6px 0;
}
#contenu div.item .img-galerie img {
	height: 165px;
	width: auto;
	max-width: none;
	display: block;
	float: none;
	margin: 0;
}

/* Vidéos YouTube intégrées, adaptées à la largeur disponible */
.galerie-videos {
	margin: 20px 0;
}
.video-embed {
	position: relative;
	float: left;
	width: 420px;
	max-width: 100%;
	margin: 0 12px 12px 0;
	padding-bottom: 236px; /* 16/9 pour 420px */
	height: 0;
	overflow: hidden;
	background: #000;
}
.video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Présentation facultative d'un musicien */
#contenu .musician-bio {
	font-size: 14px;
}

/* Mention légale sous le formulaire de contact */
#contenu .legal-note p {
	font-size: 12px;
	color: var(--text-muted);
}

/* Champ piège du formulaire de contact : invisible pour les visiteurs */
.hp-field {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 700px) {
	.img-galerie { height: 120px; }
	#contenu div.item .img-galerie img { height: 120px; }
	.video-embed {
		float: none;
		width: 100%;
		margin: 0 0 12px;
		padding-bottom: 56.25%;
	}
}

/* Captcha « preuve de travail » du formulaire de contact */
.captcha {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	align-items: center;
	margin: 18px 0;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	max-width: 460px;
}
.captcha-mark {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-top-color: var(--accent);
	animation: captcha-spin 0.9s linear infinite;
}
.captcha-status { font-size: 14px; }
.captcha-note {
	grid-column: 2;
	font-size: 12px;
	color: var(--text-muted);
}
.captcha[data-state="done"] .captcha-mark {
	animation: none;
	border-color: #3fae5a;
	background: #3fae5a;
	position: relative;
}
.captcha[data-state="done"] .captcha-mark::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.captcha[data-state="failed"] .captcha-mark {
	animation: none;
	border-color: #c8102e;
	background: #c8102e;
}
@keyframes captcha-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.captcha-mark { animation: none; }
}


/* =====================================================================
   Bandeau et panneau de consentement (tarteaucitron.js)

   La feuille de tarteaucitron est injectée dans la page APRÈS celle-ci.
   À spécificité égale, c'est donc elle qui l'emporte : d'où le préfixe
   « html body » sur chaque sélecteur, qui passe systématiquement devant
   les siens, et le !important sur les déclarations reprises.

   Elle impose notamment « #tarteaucitronRoot * { color:#333 } » et de
   nombreux « background:#fff ». Tout est ramené ici en texte clair sur
   fond sombre, aux couleurs du site.

   « Tout accepter » et « Tout refuser » gardent volontairement la même
   taille, la même graisse et la même lisibilité, comme le demande la
   CNIL : seule la teinte les distingue, dans la palette du site.
   ===================================================================== */

/* --- Texte : clair partout ---------------------------------------- */
html body #tarteaucitronRoot *,
html body #tarteaucitronRoot .tarteaucitronH1,
html body #tarteaucitronRoot .tarteaucitronH2,
html body #tarteaucitronRoot .tarteaucitronH3,
html body #tarteaucitronRoot .tarteaucitronName .tacCurrentStatus,
html body #tarteaucitronRoot .tarteaucitronName .tarteaucitronReadmoreSeparator,
html body #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronName .tarteaucitronListCookies {
	color: var(--text-main) !important;
	font-family: var(--font-body);
}
html body #tarteaucitronRoot .tarteaucitronCross::before,
html body #tarteaucitronRoot .tarteaucitronCheck::before,
html body #tarteaucitronRoot .tarteaucitronPlus::before {
	color: #fff !important;
}
html body #tarteaucitronRoot a {
	color: var(--accent-hot) !important;
}

/* --- Bandeau du bas ----------------------------------------------- */
html body #tarteaucitronRoot #tarteaucitronAlertBig,
html body #tarteaucitronRoot #tarteaucitronAlertSmall {
	background: var(--bg-header) !important;
	border-top: 2px solid var(--accent) !important;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.55) !important;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
	color: var(--text-main) !important;
	font-size: 14px !important;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig div.tarteaucitronPartnersList {
	background: var(--bg-panel-solid) !important;
}

/* --- Boutons du bandeau : dessin des boutons du site --------------- */
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
	font-family: var(--font-title) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	padding: 10px 24px !important;
	margin: 0 6px !important;
	border: none !important;
	border-radius: 4px !important;
	color: #fff !important;
	cursor: pointer;
	transition: background 0.2s ease;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2 {
	background: var(--accent) !important;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
	background: var(--accent-deep) !important;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2:hover,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2:hover {
	background: var(--accent-hot) !important;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrlDialog {
	background: transparent !important;
	color: var(--text-muted) !important;
	font-size: 13px !important;
	text-decoration: underline !important;
	border: none !important;
	cursor: pointer;
}

/* --- Panneau « Personnaliser » ------------------------------------ */
html body #tarteaucitronRoot #tarteaucitronBack {
	background: #000 !important;
}
/* Lien vers les mentions légales, à l'intérieur du panneau */
html body #tarteaucitron #tarteaucitronPrivacyUrl,
html body #tarteaucitron #tarteaucitronPrivacyUrlDialog {
	background: transparent !important;
	color: var(--accent-hot) !important;
	text-decoration: underline !important;
	border: none !important;
	cursor: pointer;
}
html body #tarteaucitron .tarteaucitronBorder,
html body #tarteaucitronRoot #tarteaucitron {
	background: var(--bg-panel-solid) !important;
	border-color: var(--border-soft) !important;
}
html body #tarteaucitron #tarteaucitronInfo,
html body #tarteaucitron #tarteaucitronServices .tarteaucitronDetails,
html body #tarteaucitron #tarteaucitronServices .tarteaucitronDetails:not(.tarteaucitronDetailsInline),
html body #tarteaucitron #tarteaucitronServices .tarteaucitronTitle + [id^=tarteaucitronDetails],
html body #tarteaucitronRoot .asCatToggleBtn {
	background: var(--bg-panel-solid) !important;
	color: var(--text-main) !important;
}
html body #tarteaucitron #tarteaucitronServices .tarteaucitronLine,
html body #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine {
	background: rgba(255, 255, 255, 0.04) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body #tarteaucitron #tarteaucitronServices .tarteaucitronLine:hover,
html body #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine:hover {
	background: rgba(255, 255, 255, 0.09) !important;
}

/* Intitulés de rubrique : typographie des titres du site */
html body #tarteaucitron #tarteaucitronServices .tarteaucitronTitle button,
html body #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName button {
	background: transparent !important;
	color: var(--accent-hot) !important;
	font-family: var(--font-title) !important;
	font-size: 16px !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	border: none !important;
	cursor: pointer;
}

/* Bouton de fermeture du panneau */
html body #tarteaucitron #tarteaucitronClosePanel {
	background: var(--accent) !important;
	color: #fff !important;
	border: none !important;
	font-family: var(--font-title) !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	cursor: pointer;
}
html body #tarteaucitron #tarteaucitronClosePanel:hover {
	background: var(--accent-hot) !important;
}

/* --- Autoriser / Interdire ---------------------------------------- */
html body #tarteaucitronRoot .tarteaucitronAllow,
html body #tarteaucitronRoot .tarteaucitronDeny,
html body #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow,
html body #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny,
html body .tac_activate .tarteaucitronAllow {
	font-family: var(--font-title) !important;
	font-size: 13px !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	padding: 8px 16px !important;
	border: none !important;
	border-radius: 4px !important;
	color: #fff !important;
	opacity: 1 !important;
	cursor: pointer;
}
html body #tarteaucitronRoot .tarteaucitronAllow,
html body #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow,
html body .tac_activate .tarteaucitronAllow {
	background: var(--accent) !important;
}
html body #tarteaucitronRoot .tarteaucitronDeny,
html body #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny {
	background: var(--accent-deep) !important;
}
html body #tarteaucitronRoot .tarteaucitronAllow:hover,
html body #tarteaucitronRoot .tarteaucitronDeny:hover {
	background: var(--accent-hot) !important;
}
/* Choix retenu : liseré blanc, lisible sur les deux teintes */
html body #tarteaucitronRoot .tarteaucitronIsSelected {
	box-shadow: 0 0 0 2px #fff !important;
}

/* --- Barre « Enregistrer » ---------------------------------------- */
html body #tarteaucitronRoot div#tarteaucitronSave {
	background: var(--bg-panel-solid) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body #tarteaucitronRoot div#tarteaucitronSave button {
	background: var(--accent) !important;
	color: #fff !important;
	font-family: var(--font-title) !important;
	font-size: 15px !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	padding: 10px 24px !important;
	border: none !important;
	border-radius: 4px !important;
	cursor: pointer;
}
html body #tarteaucitronRoot div#tarteaucitronSave button:hover {
	background: var(--accent-hot) !important;
}

/* Crédit de la bibliothèque : conservé, mais discret sur fond sombre.
   Pour le retirer complètement, passer removeCredit à true dans la
   configuration de tarteaucitron (views/layout/header.php). */
html body #tarteaucitronRoot a.tarteaucitronSelfLink img {
	opacity: 0.3 !important;
	filter: grayscale(100%) !important;
	transition: opacity 0.2s ease;
}
html body #tarteaucitronRoot a.tarteaucitronSelfLink:hover img {
	opacity: 0.65 !important;
}

/* --- Emplacement d'une vidéo non autorisée ------------------------ */
html body .tac_activate {
	background: var(--bg-panel-solid) !important;
	border: 1px dashed var(--border-soft) !important;
}
html body .tac_activate .tac_float,
html body .tac_activate .tac_float strong {
	color: var(--text-main) !important;
}

@media (max-width: 700px) {
	html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
	html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
		display: block !important;
		width: 100% !important;
		margin: 6px 0 !important;
	}
}