/*
 * Bandeau de consentement — INDIBA Deep Beauty.
 *
 * Charte du site : noir encre #1f222b, blanc, Montserrat, boutons en pilule.
 * Contrastes (à vérifier au banc, voir README) :
 *   - texte #1f222b sur fond blanc ................ 16,5:1
 *   - blanc sur noir encre #1f222b ................ 16,5:1
 *   - texte doux #4a4e58 sur fond blanc ........... 8,6:1
 *
 * Spécificité : les thèmes habillent souvent tout élément `button`. Les règles ci-dessous sont portées par le
 * conteneur du module, pour l'emporter sans recourir à `!important`.
 */

.tbweb-consentement,
.tbweb-externe,
.tbweb-consentement-retrait {
	--tbweb-fond: #ffffff;
	--tbweb-texte: #1f222b;
	--tbweb-texte-doux: #4a4e58;
	--tbweb-action: #1f222b;
	--tbweb-bordure: #e5e5e5;
	--tbweb-police: var(--police-titre, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	--tbweb-police-ui: var(--police-ui, var(--tbweb-police));
}

.tbweb-consentement {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 99999;
	background: var(--tbweb-fond);
	color: var(--tbweb-texte);
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -10px 40px rgba(15, 18, 28, 0.22);
	font-family: var(--tbweb-police);
	font-size: 15px;
	line-height: 1.55;
	max-height: 85vh;
	overflow-y: auto;
	color-scheme: light;
}

.tbweb-consentement[hidden] { display: none; }

/* Texte réservé aux lecteurs d'écran (annonce du bandeau, précision d'un lien). */
.tbweb-masque {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Tant que le bandeau est affiché, la page réserve sa hauteur en bas : il ne masque ni le pied de page ni l'élément qui prend le focus.
   La hauteur est mesurée par le script (variable --tbweb-hauteur). */
.tbweb-actif body { padding-bottom: var(--tbweb-hauteur, 0); }
.tbweb-actif { scroll-padding-bottom: var(--tbweb-hauteur, 0); }

.tbweb-consentement__contenu {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 24px 28px;
}

.tbweb-consentement__titre {
	margin: 0 0 8px;
	font-family: var(--tbweb-police);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	color: var(--tbweb-texte);
}

.tbweb-consentement__texte {
	margin: 0 0 18px;
	max-width: 80ch;
	color: var(--tbweb-texte);
}

.tbweb-consentement__texte a {
	color: var(--tbweb-action);
	text-decoration: underline;
}

/* « Tout accepter » et « Tout refuser » sont strictement identiques :
   même largeur minimale, même couleur, même graisse. Seul le libellé diffère. */
.tbweb-consentement__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.tbweb-consentement .tbweb-consentement__bouton,
.tbweb-consentement-retrait .tbweb-consentement__bouton,
.tbweb-externe .tbweb-consentement__bouton {
	min-width: 190px;
	padding: 13px 26px;
	border: 1px solid var(--tbweb-action);
	border-radius: 50px;
	background: var(--tbweb-action);
	color: #ffffff;
	font-family: var(--tbweb-police-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: opacity 0.2s;
}

.tbweb-consentement .tbweb-consentement__bouton:hover,
.tbweb-externe .tbweb-consentement__bouton:hover { opacity: 0.88; }

.tbweb-consentement .tbweb-consentement__lien,
.tbweb-consentement-retrait .tbweb-consentement__lien,
.tbweb-externe .tbweb-consentement__lien {
	padding: 12px 6px;
	border: 0;
	background: none;
	color: var(--tbweb-action);
	font-family: var(--tbweb-police);
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.tbweb-consentement__bouton:focus-visible,
.tbweb-consentement__lien:focus-visible,
.tbweb-consentement input:focus-visible {
	outline: 3px solid var(--tbweb-action);
	outline-offset: 3px;
}

.tbweb-consentement__detail {
	margin-top: 20px;
	border-top: 1px solid var(--tbweb-bordure);
	padding-top: 18px;
}

.tbweb-consentement__detail[hidden] { display: none; }

.tbweb-consentement__groupe {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.tbweb-consentement__legende {
	padding: 0;
	margin-bottom: 12px;
	font-weight: 600;
}

.tbweb-consentement__finalite {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	margin-bottom: 16px;
}

.tbweb-consentement__finalite input {
	width: 24px;
	height: 24px;
	margin: 2px 0 0;
	accent-color: var(--tbweb-action);
}

.tbweb-consentement__finalite label {
	font-weight: 600;
	cursor: pointer;
}

.tbweb-consentement__description {
	grid-column: 2;
	margin: 0;
	color: var(--tbweb-texte-doux);
	font-size: 14px;
}

/* Point de retrait permanent des pages classiques (les gabarits « code pur » le portent dans leur pied de page). */
.tbweb-consentement-retrait {
	margin: 0;
	padding: 10px 20px;
	text-align: center;
	background: #f7f7f7;
}

/* Contenu externe en attente de consentement : l'invite occupe la place du contenu, au même format (16/9 par défaut). */
.tbweb-externe {
	width: 100%;
}

.tbweb-externe iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.tbweb-externe iframe[hidden] { display: none; }

.tbweb-externe__invite {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 16px;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 280px;
	padding: 28px 24px;
	box-sizing: border-box;
	background: #f2f2f2;
	border-radius: var(--rayon-carte, 20px);
	color: var(--tbweb-texte);
	font-family: var(--tbweb-police);
	text-align: center;
}

.tbweb-externe__invite[hidden] { display: none; }

.tbweb-externe__message {
	margin: 0;
	max-width: 52ch;
	font-size: 15px;
	line-height: 1.55;
}

.tbweb-externe__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

@media (max-width: 600px) {
	.tbweb-consentement__contenu { padding: 20px 16px 24px; }
	.tbweb-consentement .tbweb-consentement__bouton {
		min-width: 0;
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tbweb-consentement .tbweb-consentement__bouton,
	.tbweb-externe .tbweb-consentement__bouton { transition: none; }
}

/* Contraste forcé de Windows : les contours remplacent les fonds, le focus reste visible. */
@media (forced-colors: active) {
	.tbweb-consentement { border: 2px solid CanvasText; }
	.tbweb-consentement .tbweb-consentement__bouton,
	.tbweb-externe .tbweb-consentement__bouton { border: 2px solid ButtonText; }
}