/*
 * Styles du widget "Nos coups de cœur" — extraits à l'identique de la maquette,
 * scopés sous .tsl-ccc 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 ;
 * si ce n'est pas le cas, le widget reste fonctionnel de façon autonome.
 */
.tsl-ccc {
	--red: #AC132F;
	--red-dk: #8a0e25;
	--text: #111212;
	--text-2: #3f3f3f;
	--muted: #686e6e;
	--white: #ffffff;
	--light: #f7f7f7;
	--border: #e6e6e6;
	--sans: 'DM Sans', system-ui, sans-serif;
	font-family: var(--sans);
}
.tsl-ccc, .tsl-ccc *{box-sizing:border-box}
.tsl-ccc img{display:block;max-width:100%}
.tsl-ccc a{text-decoration:none;color:inherit}

.tsl-ccc.section{padding:72px 5%}
.tsl-ccc.section--light{background:var(--white)}
.tsl-ccc .section-head{
	display:flex;justify-content:space-between;align-items:flex-end;
	margin-bottom:36px;
}
.tsl-ccc .section-head h2{
	font-size:clamp(1.6rem,2.4vw,2.4rem);font-weight:800;
	color:var(--text);line-height:1.1;margin-top:8px;
}
.tsl-ccc .eyebrow{
	font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
	color:var(--red);
}
.tsl-ccc .see-all{
	font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	color:var(--text);display:flex;align-items:center;gap:6px;
	border-bottom:1.5px solid var(--text);padding-bottom:1px;
	transition:color .2s,border-color .2s;white-space:nowrap;
}
.tsl-ccc .see-all:hover{color:var(--red);border-color:var(--red)}

.tsl-ccc .tabs-bar{
	display:flex;gap:0;border-bottom:1px solid var(--border);
	margin-bottom:36px;
}
.tsl-ccc .tab-btn{
	padding:12px 24px;
	font-size:13px;font-weight:700;letter-spacing:.04em;
	color:var(--muted);cursor:pointer;
	border-bottom:2px solid transparent;margin-bottom:-1px;
	transition:color .2s,border-color .2s;background:none;
	border-top:none;border-left:none;border-right:none;
	font-family:inherit;
}
.tsl-ccc .tab-btn.active{color:var(--text);border-bottom-color:var(--text)}
.tsl-ccc .tab-btn:hover{color:var(--text)}
.tsl-ccc .tab-panel{display:none}
.tsl-ccc .tab-panel.active{display:block}

/* Grille : la mise en page (colonnes/carousel) reste propre à ce widget,
   mais les cartes elles-mêmes (.tsln-pc...) sont celles du plugin "Catégorie
   Produit" (voir templates/card-product.php + assets/css/grid.css), incluses
   telles quelles pour un rendu identique aux grilles de catégorie. */
.tsl-ccc .prod-grid{display:grid;grid-template-columns:repeat(var(--tsl-cols, 3),minmax(0,1fr));gap:32px 20px}
.tsl-ccc .prod-grid > .tsln-pc{width:100%;min-width:0}

/* Message discret, visible uniquement dans l'éditeur Elementor, quand un
   onglet n'a pas encore de catégorie de produits configurée. */
.tsl-ccc .tsl-ccc-editor-notice{
	grid-column:1/-1;
	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){
	/* Nos coups de cœur : carousel 1 carte visible, identique à la maquette.
	   align-items:flex-start évite que le comportement flex par défaut
	   (stretch) n'étire les cartes courtes à la hauteur de la plus grande
	   quand le prix et/ou la description sont activés dans les réglages. */
	.tsl-ccc .prod-grid{display:flex;align-items:flex-start;gap:16px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding-bottom:4px}
	.tsl-ccc .prod-grid::-webkit-scrollbar{display:none}
	.tsl-ccc .prod-grid .tsln-pc{flex-shrink:0;width:80vw;scroll-snap-align:start}

	/* Indicateur de swipe : léger dégradé sur le bord droit du carousel,
	   suggérant qu'il y a d'autres cartes à découvrir en glissant vers la
	   gauche. Porté par .tab-panel (non scrollable) et non par .prod-grid
	   lui-même, pour qu'il reste fixe au bord visible au lieu de défiler
	   avec le contenu. Masqué automatiquement par la classe .tsl-scroll-end,
	   ajoutée/retirée par coups-de-coeur.js selon la position de scroll. */
	.tsl-ccc .tab-panel{position:relative}
	.tsl-ccc .tab-panel::after{
		content:'';
		position:absolute;top:0;right:0;bottom:0;
		width:48px;
		background:linear-gradient(to right, rgba(255,255,255,0), var(--white) 80%);
		pointer-events:none;
		opacity:1;
		transition:opacity .25s ease;
	}
	.tsl-ccc .tab-panel.tsl-scroll-end::after{opacity:0}

	/* Onglets utilisables au doigt : hauteur de zone cliquable ≥44px, et
	   défilement horizontal léger si les 3 libellés ne tiennent pas sur une
	   ligne, plutôt qu'un retour à la ligne qui casserait la barre d'onglets
	   ou un débordement/troncature de texte. */
	.tsl-ccc .tabs-bar{
		overflow-x:auto;flex-wrap:nowrap;
		-webkit-overflow-scrolling:touch;scrollbar-width:none;
	}
	.tsl-ccc .tabs-bar::-webkit-scrollbar{display:none}
	.tsl-ccc .tab-btn{
		flex-shrink:0;
		display:flex;align-items:center;justify-content:center;
		min-height:44px;
		white-space:nowrap;
	}
}
@media(max-width:600px){
	.tsl-ccc.section{padding:48px 5%}
	.tsl-ccc .section-head{flex-direction:column;align-items:flex-start;gap:12px}

	/* Le texte du lien "Voir tous les modèles" est configurable dans les
	   réglages du widget : sur très petit écran, on autorise le retour à la
	   ligne pour éviter tout débordement horizontal si un texte plus long
	   est saisi (le white-space:nowrap de la maquette n'a de sens qu'en
	   ligne avec le titre, ce qui n'est plus le cas une fois empilé). */
	.tsl-ccc .see-all{white-space:normal}

	/* Sous 600px, "Déstockage" (le libellé le plus contraignant) déborde avec
	   le padding/la taille de police desktop pour 3 onglets côte à côte
	   (vérifié sur un écran de référence à 360px). On réduit padding et
	   font-size uniquement ici ; le style desktop n'est pas touché. Le
	   scroll horizontal + white-space:nowrap hérités du palier ≤860px
	   restent en filet de sécurité si un texte de badge/onglet plus long
	   était saisi malgré tout. */
	.tsl-ccc .tab-btn{padding:10px 12px;font-size:12px}
	.tsl-ccc .prod-grid .tsln-pc{width:88vw}
}