/*
 * Styles du widget "Sélecteur de teinte", scopés sous .tsl-teinte pour ne
 * jamais entrer en conflit avec d'autres styles du thème. Les variables
 * --red/--text/... sont déclarées ici en fallback : si le thème The7 les
 * définit déjà globalement, ces valeurs identiques n'ont aucun effet visuel ;
 * sinon, le widget reste fonctionnel de façon autonome (même logique que
 * tousalon-coups-de-coeur).
 */
.tsl-teinte {
	--red: #AC132F;
	--text: #111212;
	--text-2: #3f3f3f;
	--muted: #686e6e;
	--border: #e6e6e6;
	--sans: 'DM Sans', system-ui, sans-serif;
	font-family: var(--sans);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.tsl-teinte, .tsl-teinte *{box-sizing:border-box}
.tsl-teinte img{display:block;max-width:100%}
.tsl-teinte a{text-decoration:none}

.tsl-teinte-txt{display:flex;flex-direction:column}

.tsl-teinte-eyebrow{
	font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
	color:var(--red);margin-bottom:14px;
}
.tsl-teinte-title{
	font-size:clamp(1.8rem,2.4vw,2.6rem);font-weight:800;line-height:1.1;
	margin-bottom:16px;color:var(--text);
}
.tsl-teinte-desc{
	font-size:14px;color:var(--text-2);line-height:1.8;margin-bottom:28px;
}

/* Pastilles : ronds cliquables, anneau (outline) autour de la pastille active
   plutôt qu'une bordure pleine, pour ne pas réduire la surface de couleur
   visible au clic (même logique que .swatch dans la maquette). */
.tsl-teinte-swatches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.tsl-teinte-swatch{
	width:36px;height:36px;border-radius:50%;cursor:pointer;padding:0;
	border:none;outline:2px solid transparent;outline-offset:3px;
	transition:outline-color .2s,transform .2s;
}
.tsl-teinte-swatch:hover{transform:scale(1.15)}
.tsl-teinte-swatch:focus-visible{outline-color:var(--text)}
.tsl-teinte-swatch.is-active{outline-color:var(--text)}

.tsl-teinte-selected{font-size:13px;color:var(--muted);margin-bottom:24px}
.tsl-teinte-selected-name{color:var(--text);font-weight:700}

/* Bouton CTA : styles par défaut repris de .btn-outline dans la maquette ;
   entièrement surchargés par les contrôles de style du widget (fond, texte,
   bordure, radius) via {{WRAPPER}} dans la classe PHP du widget. */
.tsl-teinte-cta{
	display:inline-flex;align-items:center;flex-wrap:nowrap;gap:8px;align-self:flex-start;
	border:1.5px solid var(--text);color:var(--text);background:transparent;
	font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	padding:12px 26px;border-radius:4px;
	transition:background .2s,color .2s,opacity .2s;
}
.tsl-teinte-cta:hover{opacity:.75}

/* Icône du CTA : Icons_Manager::render_icon() peut sortir soit une police
   d'icônes (<i class="fas fa-...">), soit un <svg> inline selon la config
   Elementor ("Improved Icon Loading"). Dans les deux cas on fixe une taille
   fixe de 1em (= hauteur d'une ligne de texte du bouton) plutôt que de
   laisser le SVG s'afficher à sa taille intrinsèque (souvent bien plus
   grande que le texte), et flex-shrink:0 pour qu'elle ne s'écrase pas.
   line-height:1 évite qu'elle gonfle la hauteur de la ligne de texte. */
.tsl-teinte-cta i,
.tsl-teinte-cta svg{
	flex-shrink:0;
	width:1em;height:1em;
	max-width:1em;max-height:1em;
	font-size:1em;line-height:1;
}

.tsl-teinte-img-wrap{overflow:hidden;border-radius:4px}
.tsl-teinte-img{
	width:100%;max-height:480px;object-fit:cover;display:block;
	transition:opacity .35s ease;
}

/* Message discret, visible uniquement dans l'éditeur Elementor, quand aucune
   teinte n'est encore configurée. */
.tsl-teinte-editor-notice{
	font-size:12px;color:var(--muted);font-style:italic;
	padding:24px;text-align:center;
	border:1px dashed var(--border);border-radius:4px;
}

@media(max-width:860px){
	.tsl-teinte{grid-template-columns:1fr;gap:24px}
	.tsl-teinte-img-wrap{order:-1}
}