/* ============================================================
   SKYDO HOME — CSS mobile-first
   ============================================================ */

/* Reset du padding par défaut du theme parent sur la home */
body.home .site-main,
body.home main.site-main,
body.home #main,
body.home .hello-elementor-default .site-main,
body.home .ast-container,
body.home .entry-content { padding: 0 !important; margin: 0 !important; }
body.home article.page > .entry-content { padding: 0 !important; }

/* Mobile uniquement : header NON sticky, seul le bandeau "Livraison gratuite" reste figé */
@media (max-width: 767px) {
	body.home .sk-header {
		position: static !important;
		top: auto !important;
	}
	body.home .sk-topbar {
		position: sticky !important;
		top: 0 !important;
		z-index: 100 !important;
		transition: opacity .25s ease, backdrop-filter .25s ease;
	}
	/* Au scroll : le bandeau devient légèrement transparent + effet glass */
	body.home.is-scrolled .sk-topbar {
		opacity: 0.92;
		backdrop-filter: saturate(180%) blur(8px);
		-webkit-backdrop-filter: saturate(180%) blur(8px);
	}
}

.skydo-home {
	--blue: #1E6BFF; --blue-dark: #1453c4; --blue-pale: #eff6ff;
	--navy: #0A1A3B; --navy-2: #112447;
	--bg: #f9fafc; --bg-promo: #F0F7FF;
	--border: #e5e7eb; --muted: #6b7280; --text: #1f2937;
	--red: #E11D48; --green: #1ABC54;
	--pad-x: 16px;
	--r-card: 14px;
	--r-section: 18px;
	color: var(--text);
}
.skydo-home *, .skydo-home *::before, .skydo-home *::after { box-sizing: border-box; }
.skydo-home a { text-decoration: none; }
.skydo-home button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ========== HERO ========== */
.skydo-home .hero {
	background: linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 100%);
	color: #fff;
	margin: 12px var(--pad-x);
	padding: 28px 24px 26px;
	border-radius: var(--r-section);
	position: relative;
	overflow: hidden;
}
/* Image visuelle du hero : transparente, à droite. Cachée par défaut (mobile-first),
   affichée seulement en desktop où on a la place. */
.skydo-home .hero-visual { display: none; }
.skydo-home .hero-visual img {
	display: block;
	width: 100%; height: auto;
}
.skydo-home .hero::before {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(circle at 90% 30%, rgba(30,107,255,.25), transparent 60%),
				radial-gradient(circle at 10% 90%, rgba(167,139,250,.12), transparent 50%);
	pointer-events: none;
}
.skydo-home .hero-content { position: relative; z-index: 1; }
.skydo-home .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); padding: 5px 12px; border-radius: 99px; font-size: 11.5px; font-weight: 600; margin-bottom: 16px; color: #fff; }
.skydo-home .hero-badge::before { content: '✦'; color: #a78bfa; font-size: 12px; }
.skydo-home .hero h1 { font-size: 28px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 0 0 12px; color: #fff; }
.skydo-home .hero p.lead { font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 20px; line-height: 1.55; }
.skydo-home .hero-actions { display: flex; flex-direction: column; gap: 10px; }
.skydo-home .btn-primary { background: var(--blue); color: #fff; padding: 13px 20px; border-radius: 12px; font-weight: 600; font-size: 14.5px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.skydo-home .btn-primary:hover { background: var(--blue-dark); }
.skydo-home .btn-secondary { background: rgba(255,255,255,.1); color: #fff; padding: 13px 20px; border-radius: 12px; font-weight: 600; font-size: 14.5px; border: 1px solid rgba(255,255,255,.18); display: inline-flex; gap: 6px; align-items: center; justify-content: center; }

/* ========== Blocs communs ========== */
.skydo-home section.block { padding: 0 var(--pad-x); }

/* ========== Header de section — style IDENTIQUE archive product ========== */
.skydo-home .skydo-section-header {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: nowrap;
	padding: 26px var(--pad-x) 14px;
}
.skydo-home .skydo-section-title {
	display: inline-flex; align-items: center; gap: 12px;
	font-size: 20px; font-weight: 800; color: var(--navy);
	letter-spacing: -0.4px; line-height: 1.15;
	font-family: inherit;
	flex: 1 1 auto; min-width: 0;
}
.skydo-home .skydo-section-link { margin-left: auto; flex-shrink: 0; }
.skydo-home .skydo-title-accent {
	display: inline-block;
	width: 4px; height: 22px;
	background: var(--blue); border-radius: 2px;
	flex-shrink: 0;
}
.skydo-home .skydo-section-link {
	color: var(--blue); font-weight: 600; font-size: 13px;
	white-space: nowrap; text-decoration: none;
}
/* En version block (sans padding), on annule le padding du header */
.skydo-home section.block > .skydo-section-header { padding-left: 0; padding-right: 0; }

/* ========== Promotions (slider mobile + desktop) ========== */
.skydo-home .promo-section { background: var(--bg-promo); padding: 22px 0 24px; margin-top: 4px; }
.skydo-home .promo-section .head-wrap { padding: 0 var(--pad-x); }
.skydo-home .promo-empty { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.skydo-home .promo-empty a { color: var(--blue); font-weight: 600; }
.skydo-home .promo-scroll {
	display: flex; overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 10px; padding: 14px var(--pad-x) 8px;
	scrollbar-width: none;
}
.skydo-home .promo-scroll::-webkit-scrollbar { display: none; }
/* Wrapper droite du head : flèches + lien "Voir tout" alignés */
.skydo-home .promo-head-right {
	display: inline-flex; align-items: center; gap: 12px;
	margin-left: auto; flex-shrink: 0;
}
/* Flèches promo : cachées en mobile (scroll au doigt suffit), visibles desktop */
.skydo-home .promo-section .promo-nav { display: none; }
.skydo-home .promo-section .skydo-carousel-btn {
	width: 36px; height: 36px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--border);
	color: var(--navy);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: all .15s;
	font-size: 13px;
}
.skydo-home .promo-section .skydo-carousel-btn:hover:not(:disabled) {
	background: var(--blue); color: #fff; border-color: var(--blue);
}
.skydo-home .promo-section .skydo-carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ========== Cards produits ==========
   Le VISUEL de la carte est désormais la SOURCE UNIQUE dans
   assets/css/product-card.css (rendue par skydo_product_card()).
   On ne garde ICI que le dimensionnement spécifique aux layouts de la home
   (largeurs de slider/grille), géré plus bas dans les media queries.
   ====================================================================== */
.skydo-home .product-card { flex: 0 0 70%; }   /* slider mobile : ~70% de large */
.skydo-home .selection-grid .product-card,
.skydo-home .phares-grid .product-card { flex: initial; }

/* ========== Trust bar (icônes SVG premium, fond bleu Skydo, écriture blanche) ========== */
.skydo-home .trust { padding: 22px var(--pad-x) 0; }
.skydo-home .trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skydo-home .trust-item {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px 12px;
	display: flex; gap: 10px; align-items: center;
	transition: border-color .15s, box-shadow .15s;
}
.skydo-home .trust-item:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgba(10,26,59,.06); }
.skydo-home .trust-item .t-ico {
	width: 36px; height: 36px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--blue) 0%, #0A1A3B 100%);
	color: #fff;
	display: grid; place-items: center;
	flex-shrink: 0;
	box-shadow: 0 4px 10px rgba(30,107,255,.25);
}
.skydo-home .trust-item .t-ico svg { width: 18px; height: 18px; display: block; }
.skydo-home .trust-item strong { display: block; color: var(--navy); font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.skydo-home .trust-item span { color: var(--muted); font-size: 10.5px; line-height: 1.35; display: block; margin-top: 2px; }

/* ========== Nos univers ========== */
.skydo-home .univers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skydo-home .univers-card { background: #fff; border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); transition: all .15s; }
.skydo-home .univers-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(10,26,59,.08); }
.skydo-home .univers-img { aspect-ratio: 4/3; position: relative; display: grid; place-items: center; overflow: hidden; }
.skydo-home .univers-img img { width: 100%; height: 100%; object-fit: cover; }
.skydo-home .univers-img .univers-emoji { font-size: 38px; color: rgba(255,255,255,.85); }
.skydo-home .univers-foot { padding: 11px 12px 12px; display: flex; align-items: center; gap: 8px; }
.skydo-home .univers-foot .info { flex: 1; min-width: 0; }
.skydo-home .univers-foot h3 { font-size: 13.5px; font-weight: 700; color: var(--navy); letter-spacing: -0.2px; line-height: 1.2; margin: 0; }
.skydo-home .univers-foot .sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; line-height: 1.3; }
.skydo-home .univers-foot .arrow { width: 28px; height: 28px; background: var(--blue-pale); color: var(--blue); border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }

/* ========== Bandeau paiement en plusieurs fois (refonte propre, bleu Skydo) ========== */
.skydo-home .paiement-banner {
	background: linear-gradient(135deg, #0264F7 0%, #0A1A3B 100%);
	border-radius: var(--r-section);
	padding: 18px 18px;
	margin: 22px var(--pad-x) 0;
	display: flex; gap: 14px; align-items: center;
	color: #fff;
	position: relative;
	overflow: hidden;
}
/* Décor : halo lumineux subtil pour donner du volume au bandeau */
.skydo-home .paiement-banner::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 85% 30%, rgba(255,255,255,0.12) 0, transparent 40%),
		radial-gradient(circle at 15% 90%, rgba(255,255,255,0.08) 0, transparent 35%);
	pointer-events: none;
}
.skydo-home .paiement-banner > * { position: relative; z-index: 1; }
.skydo-home .paiement-banner .paiement-icon {
	width: 48px; height: 48px;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	flex-shrink: 0;
	backdrop-filter: blur(6px);
}
.skydo-home .paiement-banner .paiement-icon svg { width: 24px; height: 24px; }
.skydo-home .paiement-banner .paiement-text { flex: 1; min-width: 0; }
.skydo-home .paiement-banner h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; margin: 0; }
.skydo-home .paiement-banner p { font-size: 12px; opacity: .85; margin-top: 2px; line-height: 1.45; }
.skydo-home .paiement-banner .paiement-badge {
	display: inline-flex; align-items: center; gap: 4px;
	background: rgba(255,255,255,0.16);
	border: 1px solid rgba(255,255,255,0.25);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -0.01em;
	flex-shrink: 0;
}
.skydo-home .paiement-banner .paiement-badge .sep { opacity: 0.5; font-weight: 500; }
/* Mobile : la pastille 3×·4× passe en dessous si pas assez de largeur */
@media (max-width: 480px) {
	.skydo-home .paiement-banner { flex-wrap: wrap; }
	.skydo-home .paiement-banner .paiement-badge { width: 100%; justify-content: center; padding: 8px; }
}

/* Pastilles (flamme PROMO / Nouveau) : voir product-card.css (source unique). */

/* ========== Phares (style IDENTIQUE archive product .skydo-cat-tab) ========== */
.skydo-home .phares-block {
	padding: 20px;
	margin: 17px var(--pad-x);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--r-section);
}
.skydo-home .phares-block .skydo-cat-tabs-header { padding: 0 0 12px; }

/* === Flèches : visibles AUSSI sur mobile (override category-v2.css) === */
body.home .skydo-cat-tabs .skydo-carousel-nav {
	display: flex !important;
	gap: 6px;
}
@media (max-width: 767px) {
	body.home .skydo-cat-tabs .skydo-carousel-btn {
		width: 34px !important; height: 34px !important;
		font-size: 12px !important;
	}
}

/* === Images carousel : hauteur fixée pour éviter les vides === */
body.home .skydo-cat-tabs .skydo-card-image {
	aspect-ratio: auto !important;
	height: 140px !important;
	padding: 10px !important;
}
@media (min-width: 768px) {
	body.home .skydo-cat-tabs .skydo-card-image {
		height: 180px !important;
		padding: 14px !important;
	}
}
body.home .skydo-cat-tabs .skydo-card-image img {
	max-height: 100% !important;
	width: auto !important;
}
.skydo-home .skydo-cat-tabs-header { padding: 18px 0 8px; }
.skydo-home .skydo-cat-tabs-buttons {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.skydo-home .skydo-cat-tabs-buttons::-webkit-scrollbar { display: none; }
.skydo-home .skydo-cat-tab {
	background: transparent; border: 0;
	padding: 6px 4px 10px;
	cursor: pointer;
	position: relative;
	transition: opacity .15s;
	opacity: 0.45;
	flex-shrink: 0;
	white-space: nowrap;
}
.skydo-home .skydo-cat-tab:hover { opacity: 0.8; }
.skydo-home .skydo-cat-tab.is-active { opacity: 1; }
.skydo-home .skydo-cat-tab .skydo-section-title {
	font-size: 16px;
}
.skydo-home .skydo-cat-tab .skydo-title-accent {
	height: 18px; width: 3px;
	background: #d1d5db;
	transition: background .15s;
}
.skydo-home .skydo-cat-tab.is-active .skydo-title-accent { background: var(--blue); }

.skydo-home .phares-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 0 0; }
.skydo-home .phares-grid .product-card { flex: initial; }
.skydo-home .phares-grid[hidden] { display: none; }

/* ========== Sélection (infinity) ========== */
.skydo-home .selection-block { padding-top: 28px; }
.skydo-home .selection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skydo-home .selection-grid .product-card { flex: initial; }
.skydo-home .selection-grid .product-card.is-loading { opacity: 0; transform: translateY(8px); }
.skydo-home .selection-grid .product-card.is-loaded { opacity: 1; transform: translateY(0); transition: opacity .25s ease, transform .25s ease; }
.skydo-home .selection-loader { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 24px 0; color: var(--muted); font-size: 13px; }
.skydo-home .loader-spinner { width: 22px; height: 22px; border: 2.5px solid var(--border); border-top-color: var(--blue); border-radius: 99px; animation: skydo-spin .7s linear infinite; }
@keyframes skydo-spin { to { transform: rotate(360deg); } }
.skydo-home .selection-end { text-align: center; padding: 28px 0; color: var(--muted); font-size: 13px; }
.skydo-home .selection-end a { color: var(--blue); font-weight: 600; text-decoration: underline; }

/* ========== Bandeau Blog — image hero unique ========== */
.skydo-home .home-blog-cta {
	display: block;
	margin: 24px var(--pad-x) 0;
	border-radius: var(--r-section);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(99,102,241,.18);
	transition: transform .25s, box-shadow .25s;
	aspect-ratio: 1500/844;
	background: linear-gradient(135deg, #3B82F6, #8B5CF6, #EC4899);
}
.skydo-home .home-blog-cta img {
	width: 100%; height: 100%;
	display: block;
	object-fit: cover;
}
.skydo-home .home-blog-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(99,102,241,.28);
}

/* ========== Pro bar ========== */
.skydo-home .pro-bar {
	background: #fff; border: 1px solid var(--border);
	border-left: 3px solid var(--navy);
	border-radius: var(--r-card);
	padding: 16px 18px;
	margin: 22px var(--pad-x) 0;
}
.skydo-home .pro-bar h3 { font-size: 14px; color: var(--navy); font-weight: 700; line-height: 1.3; margin: 0; }
.skydo-home .pro-bar p { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.5; }
.skydo-home .pro-bar .pro-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; margin-top: 12px; width: 100%; }
.skydo-home .pro-bar .pro-cta:hover { background: var(--blue); }

/* ========== Newsletter ========== */
.skydo-home .newsletter {
	background: var(--navy); color: #fff;
	border-radius: var(--r-section);
	padding: 24px 22px;
	margin: 22px var(--pad-x) 40px;
}
.skydo-home .newsletter h2 { font-size: 19px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
.skydo-home .newsletter p { opacity: .8; font-size: 12.5px; margin-bottom: 16px; line-height: 1.5; }
.skydo-home .newsletter-form { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 99px; display: flex; align-items: center; padding: 4px 4px 4px 18px; }
.skydo-home .newsletter-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 13.5px; padding: 9px 0; }
.skydo-home .newsletter-form input::placeholder { color: rgba(255,255,255,.6); }
.skydo-home .newsletter-form button { background: #fff; color: var(--navy); padding: 9px 16px; border-radius: 99px; font-weight: 600; font-size: 13px; flex-shrink: 0; }

/* ============================================================
   TABLET (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {
	.skydo-home { --pad-x: 24px; --r-card: 16px; --r-section: 22px; }
	.skydo-home .hero { padding: 40px 36px 32px; margin: 16px var(--pad-x); }
	.skydo-home .hero h1 { font-size: 36px; letter-spacing: -1.5px; }
	.skydo-home .hero p.lead { font-size: 15px; }
	.skydo-home .hero-actions { flex-direction: row; flex-wrap: wrap; }
	.skydo-home .section-head .titles h2 { font-size: 24px; }
	.skydo-home .section-head .titles p { font-size: 13.5px; }
	.skydo-home .promo-scroll { gap: 14px; padding: 18px var(--pad-x) 10px; }
	.skydo-home .product-card { flex: 0 0 calc(40% - 8px); }
	.skydo-home .product-name { font-size: 13.5px; min-height: 38px; }
	.skydo-home .product-price { font-size: 17px; }
	.skydo-home .trust-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
	.skydo-home .trust-item strong { font-size: 13.5px; }
	.skydo-home .trust-item span { font-size: 11.5px; }
	.skydo-home .univers-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
	.skydo-home .univers-foot h3 { font-size: 15px; }
	.skydo-home .paiement-banner { padding: 26px 30px; margin: 28px var(--pad-x) 0; }
	.skydo-home .paiement-banner h3 { font-size: 19px; }
	.skydo-home .paiement-banner p { font-size: 13px; }
	.skydo-home .phares-grid { grid-template-columns: repeat(4, 1fr); }
	.skydo-home .selection-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
	.skydo-home .pro-bar { display: flex; gap: 16px; align-items: center; padding: 22px 26px; }
	.skydo-home .pro-bar > .info { flex: 1; }
	.skydo-home .pro-bar .pro-cta { margin-top: 0; width: auto; padding: 11px 22px; flex-shrink: 0; }
	.skydo-home .newsletter { padding: 32px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
	.skydo-home .newsletter h2 { font-size: 22px; }
}

/* ============================================================
   DESKTOP (≥ 1024px)
   ============================================================ */
@media (min-width: 1024px) {
	.skydo-home { --pad-x: 32px; }
	/* Toutes les sections "boîtes" sont contraintes à 1400px max et centrées.
	   À viewport > 1400px sinon, hero reste centré pendant que les autres
	   sections prennent toute la largeur → désalignement visible (cf. 1600px). */
	.skydo-home .hero,
	.skydo-home .trust,
	.skydo-home .paiement-banner,
	.skydo-home .phares-block,
	.skydo-home .pro-bar,
	.skydo-home .newsletter { max-width: 1400px; margin-left: auto; margin-right: auto; }
	/* Hero en 2 colonnes : texte à gauche, image transparente à droite */
	.skydo-home .hero {
		padding: 56px 48px 50px;
		display: grid;
		grid-template-columns: 1fr 480px;
		gap: 40px;
		align-items: center;
	}
	.skydo-home .hero-content { position: relative; z-index: 2; }
	.skydo-home .hero h1 { font-size: clamp(36px, 4.5vw, 54px); }
	.skydo-home .hero p.lead { font-size: 16px; max-width: 540px; }
	.skydo-home .hero-visual {
		display: block;
		position: relative; z-index: 1;
	}
	.skydo-home .hero-visual img {
		max-width: 100%;
		filter: drop-shadow(0 20px 40px rgba(0,0,0,.25));
	}
	/* Très grand écran : on peut élargir un peu la colonne visuelle */
	@media (min-width: 1400px) {
		.skydo-home .hero { grid-template-columns: 1fr 560px; }
	}
	.skydo-home section.block { max-width: 1400px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
	.skydo-home .section-head { margin-bottom: 22px; }
	.skydo-home .section-head .titles h2 { font-size: 28px; letter-spacing: -0.6px; }
	.skydo-home .promo-section { padding: 32px 0; }
	.skydo-home .promo-section .head-wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--pad-x); }
	/* Promo reste un slider (avec flèches) plutôt qu'une grille statique,
	   pour respirer et éviter d'avoir 5 cartes étirées plein écran. */
	.skydo-home .promo-scroll {
		max-width: 1400px;
		margin: 0 auto;
		padding: 22px var(--pad-x) 6px;
		gap: 16px;
		scroll-padding-left: var(--pad-x);
	}
	/* Cartes promos : 5 cartes visibles sur grand écran, sans étirement excessif */
	.skydo-home .promo-scroll .product-card {
		flex: 0 0 calc((100% - var(--pad-x) * 2 - 16px * 4) / 5);
		min-width: 200px;
	}
	/* Flèches promo visibles desktop */
	.skydo-home .promo-section .promo-nav { display: inline-flex; gap: 6px; }
	.skydo-home .univers-grid { gap: 16px; }
	.skydo-home .univers-foot h3 { font-size: 16px; }
	.skydo-home .phares-grid { grid-template-columns: repeat(4, 1fr); }
	.skydo-home .selection-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }

	/* Carousel phares (Meilleures ventes / Nouveautés) en pleine largeur :
	   5 cartes visibles, scroll horizontal pour le reste — évite des cartes
	   trop grosses qui paraissent étirées sur grand écran. */
	.skydo-home .phares-block .skydo-carousel-track {
		gap: 16px;
	}
	.skydo-home .phares-block .product-card {
		flex: 0 0 calc((100% - 16px * 4) / 5) !important;
		min-width: 200px;
	}
	/* Sur très grand écran (≥1400), on peut serrer un poil plus pour montrer
	   ~5.5 cards (effet "il y en a d'autres derrière"). */
	@media (min-width: 1400px) {
		.skydo-home .phares-block .product-card {
			flex: 0 0 calc((100% - 16px * 5) / 5.5) !important;
		}
	}
}