/* ==========================================================================
   TCC Doinsport SSO — charte La Châtaigneraie
   v1.1 — durcissement contre les surcharges du thème N7 Golf Club (ThemeREX)

   Changements par rapport à la v1.0 :
   · Variables déclarées sur :root (plus de dépendance au conteneur .tcc-sso)
   · Valeur de repli sur chaque var()  → var(--x, #hexa)
   · Bouton œil recentré verticalement et redessiné en SVG (plus d'emoji)
   · Spécificité renforcée sur les champs et les boutons
   ========================================================================== */

:root {
	--tcc-vert-fonce: #2e4743;
	--tcc-vert-fonce-hover: #243834;
	--tcc-vert-pantone: #4e5f5f;
	--tcc-beige: #f5f2eb;
	--tcc-beige-clair: #f9f7f4;
	--tcc-erreur: #a8322d;
}

/* Redéclaration locale : si le CSS est injecté dans un contexte isolé
   (Elementor, iframe d'aperçu), les variables restent disponibles. */
.tcc-sso,
.tcc-sso__card {
	--tcc-vert-fonce: #2e4743;
	--tcc-vert-fonce-hover: #243834;
	--tcc-vert-pantone: #4e5f5f;
	--tcc-beige: #f5f2eb;
	--tcc-beige-clair: #f9f7f4;
	--tcc-erreur: #a8322d;
}

.tcc-sso {
	max-width: 560px;
	margin: 0 auto;
	color: var(--tcc-vert-fonce, #2e4743);
}

.tcc-sso__card {
	background: var(--tcc-beige-clair, #f9f7f4);
	border: 1px solid rgba(46, 71, 67, 0.12);
	border-radius: 6px;
	padding: 2.5rem 2rem;
	box-shadow: 0 2px 18px rgba(46, 71, 67, 0.07);
}

/* --- Titres ------------------------------------------------------------ */

.tcc-sso__card h2.tcc-sso__title {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--tcc-vert-fonce, #2e4743);
}

.tcc-sso__card p.tcc-sso__subtitle {
	margin: 0 0 1.75rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--tcc-vert-pantone, #4e5f5f);
}

.tcc-sso__notice {
	background: var(--tcc-beige, #f5f2eb);
	border-left: 3px solid var(--tcc-vert-pantone, #4e5f5f);
	padding: 0.75rem 1rem;
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
	color: var(--tcc-vert-fonce, #2e4743);
}

/* --- Libellés ---------------------------------------------------------- */

.tcc-sso__form label.tcc-sso__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tcc-vert-fonce, #2e4743);
}

.tcc-sso__label .tcc-sso__hint {
	display: block;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.8rem;
	color: var(--tcc-vert-pantone, #4e5f5f);
}

/* --- Champs de saisie --------------------------------------------------
   Spécificité (0,2,1) : bat `input[type="text"]` (0,1,1) du thème.
   Supprimez ce bloc si vous préférez le style « souligné » de N7 Golf Club.
   ----------------------------------------------------------------------- */

.tcc-sso__form input.tcc-sso__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: auto;
	min-height: 0;
	padding: 0.85rem 1rem;
	margin-bottom: 1.15rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--tcc-vert-fonce, #2e4743);
	background: #fff;
	background-image: none;
	border: 1px solid rgba(46, 71, 67, 0.25);
	border-radius: 4px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tcc-sso__form input.tcc-sso__input:focus {
	outline: none;
	background: #fff;
	border-color: var(--tcc-vert-fonce, #2e4743);
	box-shadow: 0 0 0 3px rgba(78, 95, 95, 0.18);
}

/* --- Bloc mot de passe + bouton œil ------------------------------------
   La marge basse est portée par le conteneur, PAS par le champ :
   le bouton peut ainsi être centré sur la hauteur réelle du champ,
   quelle que soit la hauteur imposée par le thème.
   ----------------------------------------------------------------------- */

.tcc-sso__password {
	position: relative;
	margin-bottom: 1.15rem;
}

.tcc-sso__password input.tcc-sso__input {
	margin-bottom: 0;
	padding-right: 3.25rem; /* réserve la place du bouton œil */
}

.tcc-sso__password button.tcc-sso__toggle {
	position: absolute;
	top: 50%;
	right: 0.4rem;
	transform: translateY(-50%);

	/* Remise à zéro complète du bouton imposé par le thème */
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 2.5rem;
	height: 2.2rem;
	min-width: 0;
	min-height: 0;
	max-width: none;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	text-shadow: none;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1;
	font-size: 0; /* masque l'emoji 👁 du HTML */
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease, background-color 0.15s ease;

	/* Icône « œil ouvert » en SVG, teintée en vert pantone */
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e5f5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5 5 12 5s10.5 7 10.5 7-3.5 7-10.5 7S1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Certains thèmes ThemeREX ajoutent des pseudo-éléments décoratifs. */
.tcc-sso__password button.tcc-sso__toggle::before,
.tcc-sso__password button.tcc-sso__toggle::after {
	display: none;
	content: none;
}

.tcc-sso__password button.tcc-sso__toggle:hover,
.tcc-sso__password button.tcc-sso__toggle:focus {
	opacity: 1;
	background-color: rgba(46, 71, 67, 0.07);
	outline: none;
}

/* Mot de passe visible → icône « œil barré ».
   :has() est pris en charge par tous les navigateurs modernes ;
   en cas de non-prise en charge, l'icône reste simplement inchangée. */
.tcc-sso__password:has(input[type="text"]) button.tcc-sso__toggle {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e4743' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.2A10.4 10.4 0 0 1 12 6c7 0 10.5 6 10.5 6a17.9 17.9 0 0 1-3.7 4.4'/%3E%3Cpath d='M6.5 7.9A17.6 17.6 0 0 0 1.5 12S5 18 12 18a10.3 10.3 0 0 0 4-.8'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
	opacity: 1;
}

/* --- Pot de miel : invisible pour l'humain, visible pour le robot ------- */

.tcc-sso__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Message d'erreur --------------------------------------------------- */

.tcc-sso__error {
	background: rgba(168, 50, 45, 0.08);
	border-left: 3px solid var(--tcc-erreur, #a8322d);
	color: var(--tcc-erreur, #a8322d);
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

/* --- Boutons principaux -------------------------------------------------
   Spécificité (0,2,1) pour passer devant les règles du thème.
   Le bloc « CSS additionnel » ajoute une couche !important en garantie.
   ----------------------------------------------------------------------- */

.tcc-sso__form button.tcc-sso__submit,
.tcc-sso a.tcc-sso__button,
.tcc-sso__card a.tcc-sso__button {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	height: auto;
	min-height: 0;
	padding: 0.95rem 1.5rem;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	color: #ffffff;
	background-color: var(--tcc-vert-fonce, #2e4743);
	background-image: none;
	border: 1px solid var(--tcc-vert-fonce, #2e4743);
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.tcc-sso__form button.tcc-sso__submit::before,
.tcc-sso__form button.tcc-sso__submit::after {
	display: none;
	content: none;
}

.tcc-sso__form button.tcc-sso__submit:hover,
.tcc-sso__form button.tcc-sso__submit:focus,
.tcc-sso a.tcc-sso__button:hover,
.tcc-sso__card a.tcc-sso__button:hover {
	color: #ffffff;
	background-color: var(--tcc-vert-fonce-hover, #243834);
	border-color: var(--tcc-vert-fonce-hover, #243834);
}

.tcc-sso__form button.tcc-sso__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.tcc-sso a.tcc-sso__button,
.tcc-sso__card a.tcc-sso__button {
	width: auto;
}

/* --- Liens secondaires -------------------------------------------------- */

.tcc-sso__links {
	margin: 1.25rem 0 0;
	text-align: center;
	font-size: 0.88rem;
}

.tcc-sso__links a {
	color: var(--tcc-vert-pantone, #4e5f5f);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tcc-sso__links a:hover {
	color: var(--tcc-vert-fonce, #2e4743);
}

/* --- Panneau membre ----------------------------------------------------- */

.tcc-sso--panel {
	max-width: 720px;
}

.tcc-sso__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.9rem;
	margin-top: 1.5rem;
}

.tcc-sso__card a.tcc-sso__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 92px;
	padding: 1rem;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--tcc-vert-fonce, #2e4743);
	background: var(--tcc-beige, #f5f2eb);
	border: 1px solid rgba(46, 71, 67, 0.15);
	border-radius: 5px;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.tcc-sso__card a.tcc-sso__tile:hover {
	background: var(--tcc-vert-fonce, #2e4743);
	color: var(--tcc-beige-clair, #f9f7f4);
	transform: translateY(-2px);
}

.tcc-sso__logout {
	color: var(--tcc-vert-pantone, #4e5f5f);
}

/* --- Iframe ------------------------------------------------------------- */

.tcc-sso__iframe-wrap {
	width: 100%;
	background: var(--tcc-beige-clair, #f9f7f4);
}

.tcc-sso__iframe-wrap iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 600px) {
	.tcc-sso__card {
		padding: 1.75rem 1.25rem;
	}

	.tcc-sso__card h2.tcc-sso__title {
		font-size: 1.45rem;
	}
}

/* --- Iframe Doinsport (v2.0) -------------------------------------------- */

.tcc-sso__frame {
	position: relative;
	width: 100%;
	background: var(--tcc-beige-clair, #f9f7f4);
}

.tcc-sso__frame-iframe {
	display: block;
	width: 100%;
	border: 0;
}

.tcc-sso__frame-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	background: var(--tcc-beige, #f5f2eb);
	border-left: 3px solid var(--tcc-vert-pantone, #4e5f5f);
	color: var(--tcc-vert-fonce, #2e4743);
	font-size: 0.9rem;
}

.tcc-sso__frame-banner.is-error {
	background: rgba(168, 50, 45, 0.08);
	border-left-color: var(--tcc-erreur, #a8322d);
	color: var(--tcc-erreur, #a8322d);
}

.tcc-sso__frame button.tcc-sso__frame-action,
.tcc-sso__frame a.tcc-sso__frame-action {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	padding: 0.5rem 1.1rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.3;
	color: #ffffff;
	background-color: var(--tcc-vert-fonce, #2e4743);
	background-image: none;
	border: 1px solid var(--tcc-vert-fonce, #2e4743);
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
}

.tcc-sso__frame button.tcc-sso__frame-action:hover,
.tcc-sso__frame a.tcc-sso__frame-action:hover {
	background-color: var(--tcc-vert-fonce-hover, #243834);
	border-color: var(--tcc-vert-fonce-hover, #243834);
	color: #ffffff;
}

.tcc-sso__frame button.tcc-sso__frame-action:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* --- Encart « création de compte » (v2.1) ------------------------------- */

.tcc-sso__signup {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(46, 71, 67, 0.14);
}

.tcc-sso__card p.tcc-sso__signup-title {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tcc-vert-fonce, #2e4743);
}

.tcc-sso__card p.tcc-sso__signup-text {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--tcc-vert-pantone, #4e5f5f);
}