/* =============================================================
 *  Skilldesign Cards — carrousel de cartes, defilement natif.
 *
 *  Feuille volontairement neutre : elle pose la mecanique (piste qui
 *  defile, largeur des cartes, fleches) et un habillage minimal que le
 *  theme surcharge (voir .skilldesign-card* plus bas).
 *
 *  Nombre de cartes visibles : le shortcode ecrit --sd-cards-visibles-lg,
 *  -md, -sm et -xs en style inline, et c'est CETTE feuille qui choisit
 *  laquelle s'applique. --sd-cards-visibles ne doit jamais etre pose en
 *  inline : une declaration de l'attribut style battrait les media queries.
 * ============================================================= */

.skilldesign-cards {
	--sd-cards-gap: 30px;
	--sd-cards-visibles: var(--sd-cards-visibles-lg, 4);
	position: relative;
}

@media screen and (max-width: 1199px) {
	.skilldesign-cards { --sd-cards-visibles: var(--sd-cards-visibles-md, 3.5); }
}

@media screen and (max-width: 899px) {
	.skilldesign-cards { --sd-cards-visibles: var(--sd-cards-visibles-sm, 2.5); }
}

@media screen and (max-width: 600px) {
	.skilldesign-cards { --sd-cards-visibles: var(--sd-cards-visibles-xs, 1.5); }
}

/* --- La piste ------------------------------------------------------- */

.skilldesign-cards__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--sd-cards-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* la barre de defilement ferait sauter la mise en page : on navigue au
	   doigt, au pave tactile ou avec les fleches */
	scrollbar-width: none;
}

.skilldesign-cards__track::-webkit-scrollbar { display: none; }

.skilldesign-cards__item {
	flex: 0 0 calc((100% - (var(--sd-cards-visibles) - 1) * var(--sd-cards-gap)) / var(--sd-cards-visibles));
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
}

/* --- La carte (habillage minimal, prevu pour etre surcharge) --------- */

.skilldesign-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}

.skilldesign-card__media {
	overflow: hidden;
}

.skilldesign-card__img {
	display: block;
	width: 100%;
	height: auto;
}

.skilldesign-card__title {
	margin: 14px 0 8px;
}

.skilldesign-card__text {
	margin: 0;
}

/* --- Fleches --------------------------------------------------------- */

.skilldesign-cards__nav {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 30px;
}

.skilldesign-cards__nav[hidden] { display: none; }

.skilldesign-cards__arrow {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .25s, color .25s, opacity .25s;
}

.skilldesign-cards__arrow[disabled] {
	opacity: .3;
	cursor: default;
}