/* =====================================================================
   scl-blog.css — Blog Sulli Card Lab
   Style « vitrine dynamique » lavande perle + signature holo.
   Tout est scopé sous .scl-blog (index) et .scl-single (article) :
   aucune fuite vers WooCommerce ni les pages classiques.
   ===================================================================== */

.scl-blog,
.scl-single {
	--scl-bg:        #F4F1FA;
	--scl-ink:       #0a0914;
	--scl-ink-soft:  #4b4660;
	--scl-violet:    #6D28D9;
	--scl-violet-2:  #7c5cff;
	--scl-gold:      #C2740A;
	--scl-gold-2:    #c9a14a;
	--scl-surface:   #ffffff;
	--scl-line:      rgba(109,40,217,.12);
	--scl-shadow:    0 10px 30px -12px rgba(56,30,114,.28);
	--scl-shadow-lg: 0 26px 60px -22px rgba(56,30,114,.45);
	--scl-radius:    18px;

	color: var(--scl-ink);
}

/* ---- Pleine largeur maîtrisée (sort du conteneur Astra) ---- */
.scl-blog__head,
.scl-single__hero {
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Supprime l'écart au-dessus du blog : Astra ajoute marge ET padding
   sur plusieurs conteneurs selon le layout (separate/boxed/full-width). */
body.single-post #primary,
body.blog #primary,
body.archive #primary {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
body.single-post #content .ast-container,
body.blog #content .ast-container,
body.archive #content .ast-container {
	padding-top: 0 !important;
}
body.single-post .site-content,
body.blog .site-content,
body.archive .site-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
/* Layout « separate container » : pas de carton blanc ni de marge autour de l'article */
.ast-separate-container .scl-article,
.ast-separate-container .ast-article-single.scl-article {
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

/* ============================ INDEX BLOG ============================ */

.scl-blog__head {
	position: relative;
	padding: clamp(1.75rem, 4vw, 3rem) 1.25rem clamp(1.75rem, 3.5vw, 2.5rem);
	text-align: center;
	background:
		radial-gradient(120% 140% at 50% -20%, rgba(124,92,255,.18), transparent 60%),
		radial-gradient(80% 120% at 85% 0%, rgba(201,161,74,.16), transparent 55%),
		var(--scl-bg);
	border-bottom: 1px solid var(--scl-line);
	overflow: hidden;
}
.scl-blog__head-inner {
	max-width: 760px;
	margin: 0 auto;
}

.scl-eyebrow {
	margin: 0 0 .65rem;
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--scl-violet);
}
.scl-eyebrow--light { color: rgba(255,255,255,.85); }

.scl-blog__title {
	margin: 0 0 .6rem;
	font-size: clamp(2rem, 5.5vw, 3.4rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -.02em;
}
.scl-blog__subtitle {
	margin: 0 auto;
	max-width: 54ch;
	color: var(--scl-ink-soft);
	font-size: clamp(1rem, 2.2vw, 1.15rem);
	line-height: 1.6;
}

/* Pills de catégories */
.scl-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	justify-content: center;
	margin-top: 1.6rem;
}
.scl-pill {
	display: inline-block;
	padding: .5rem 1rem;
	border-radius: 999px;
	background: rgba(255,255,255,.7);
	border: 1px solid var(--scl-line);
	color: var(--scl-violet);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	backdrop-filter: blur(4px);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.scl-pill:hover {
	transform: translateY(-2px);
	background: #fff;
	box-shadow: var(--scl-shadow);
	color: var(--scl-violet-2);
}
.scl-pill--active {
	background: linear-gradient(120deg, var(--scl-violet), var(--scl-violet-2));
	color: #fff;
	border-color: transparent;
}
.scl-pill--active:hover { color: #fff; background: linear-gradient(120deg, var(--scl-violet), var(--scl-violet-2)); }

/* ---- Grille ---- */
.scl-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 1160px;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding: 0 1.25rem;
}
@media (min-width: 640px) {
	.scl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.scl-grid { grid-template-columns: repeat(3, 1fr); }
	.scl-card--featured { grid-column: span 3; }
}

/* ---- Carte ---- */
.scl-card {
	position: relative;
	background: var(--scl-surface);
	border: 1px solid var(--scl-line);
	border-radius: var(--scl-radius);
	overflow: hidden;
	box-shadow: var(--scl-shadow);
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.scl-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--scl-shadow-lg);
	border-color: rgba(124,92,255,.4);
}
/* Astra applique un padding à ses articles (.ast-article-post) avec une forte spécificité,
   ce qui rentre l'image. On force l'annulation ; le texte garde son retrait via .scl-card__body. */
body.blog .scl-card,
body.archive .scl-card,
body.single .scl-card { padding: 0 !important; }
.scl-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.scl-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, #efeafc, #e7defb);
}
.scl-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.scl-card:hover .scl-card__img { transform: scale(1.06); }

.scl-card__img--placeholder {
	background:
		radial-gradient(120% 120% at 20% 10%, rgba(124,92,255,.35), transparent 55%),
		radial-gradient(120% 120% at 90% 90%, rgba(201,161,74,.35), transparent 55%),
		linear-gradient(135deg, #efeafc, #e7defb);
}

/* Signature : balayage holographique au survol */
.scl-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg,
		transparent 30%,
		rgba(255,255,255,.55) 46%,
		rgba(124,92,255,.30) 50%,
		rgba(201,161,74,.28) 54%,
		transparent 72%);
	transform: translateX(-130%);
	mix-blend-mode: screen;
	pointer-events: none;
}
.scl-card:hover .scl-card__media::after {
	transform: translateX(130%);
	transition: transform .8s ease;
}

/* Badge catégorie */
.scl-badge {
	position: absolute;
	top: .85rem;
	left: .85rem;
	padding: .35rem .75rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(120deg, var(--scl-violet), var(--scl-violet-2));
	box-shadow: 0 6px 16px -6px rgba(109,40,217,.6);
	text-decoration: none;
}
.scl-badge--link:hover { filter: brightness(1.08); }

.scl-card__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .95rem 1.1rem 1.15rem;
	flex: 1;
}
.scl-card__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
}
.scl-tag {
	display: inline-block;
	padding: .22rem .55rem;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.25;
}
.scl-tag--cat  { color: #fff;              background: linear-gradient(120deg, var(--scl-violet), var(--scl-violet-2)); text-transform: uppercase; letter-spacing: .04em; }
.scl-tag--date { color: var(--scl-gold);   background: #fbf3e3; }
.scl-tag--time { color: var(--scl-violet); background: #efeafc; }
.scl-card__title {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--scl-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.scl-card__excerpt {
	margin: 0;
	color: var(--scl-ink-soft);
	font-size: .92rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.scl-card__readmore {
	font-weight: 700;
	color: var(--scl-violet);
	white-space: nowrap;
	transition: color .2s ease;
}
.scl-card:hover .scl-card__readmore { color: var(--scl-violet-2); }

/* Carte vedette */
@media (min-width: 1000px) {
	.scl-card--featured .scl-card__link { flex-direction: row; }
	.scl-card--featured .scl-card__media { aspect-ratio: auto; flex: 0 0 56%; }
	.scl-card--featured .scl-card__body { justify-content: center; padding: 2rem 2.2rem; }
	.scl-card--featured .scl-card__title { font-size: 1.9rem; line-height: 1.15; }
	.scl-card--featured .scl-card__excerpt { font-size: 1.05rem; }
}

/* ---- Pagination ---- */
.scl-blog .scl-pagination,
.scl-blog .navigation.pagination {
	max-width: 1160px;
	margin: 2.5rem auto;
	padding: 0 1.25rem;
}
.scl-blog .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}
.scl-blog .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 .85rem;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--scl-line);
	color: var(--scl-ink);
	text-decoration: none;
	font-weight: 600;
	transition: transform .2s ease, box-shadow .2s ease;
}
.scl-blog .page-numbers:hover { transform: translateY(-2px); box-shadow: var(--scl-shadow); }
.scl-blog .page-numbers.current {
	background: linear-gradient(120deg, var(--scl-violet), var(--scl-violet-2));
	color: #fff;
	border-color: transparent;
}

/* ---- État vide ---- */
.scl-empty {
	max-width: 560px;
	margin: clamp(2rem,6vw,4rem) auto;
	padding: 0 1.25rem;
	text-align: center;
	color: var(--scl-ink-soft);
}
.scl-empty__title { color: var(--scl-ink); margin-bottom: .5rem; }

/* ============================ ARTICLE ============================ */

.scl-single__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(260px, 36vw, 440px);
	padding: clamp(2rem, 5vw, 4rem) 1.25rem clamp(2rem, 4vw, 3rem);
	background:
		radial-gradient(120% 140% at 50% -10%, rgba(124,92,255,.20), transparent 60%),
		var(--scl-bg);
	overflow: hidden;
}
.scl-single__hero.no-thumb {
	align-items: center;
	text-align: center;
	min-height: 0;
	padding-top: clamp(2rem, 5vw, 3.25rem);
	padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.scl-single__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.scl-single__hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(10,9,20,.25) 0%,
		rgba(10,9,20,.45) 40%,
		rgba(10,9,20,.78) 78%,
		rgba(10,9,20,.92) 100%);
}
.scl-single__hero-inner {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	width: 100%;
}
.scl-single__hero.has-thumb .scl-single__hero-inner { color: #fff; }
/* Le badge passe TOUJOURS dans le flux, au-dessus du titre — jamais en absolu */
.scl-single__hero .scl-badge { position: static; display: inline-block; margin-bottom: .9rem; }

.scl-single__title {
	margin: .2rem 0 .8rem;
	font-size: clamp(2rem, 5.5vw, 3.4rem);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -.02em;
}
/* Sur image : violet signature conservé (imposé par scl-chantier1.css en
   !important), avec un liseré blanc très fin + halo sombre pour rester
   lisible quelle que soit la photo derrière. Les !important ici sont
   nécessaires pour l'emporter sur .scl-holo-text de scl-chantier1.css. */
.scl-single__hero.has-thumb .scl-single__title {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	animation: none;
	color: var(--scl-violet-2) !important;
	-webkit-text-fill-color: var(--scl-violet-2) !important;
	text-shadow:
		/* liseré blanc fin, 8 directions pour un contour propre */
		-1px -1px 0 rgba(255,255,255,.92),
		 1px -1px 0 rgba(255,255,255,.92),
		-1px  1px 0 rgba(255,255,255,.92),
		 1px  1px 0 rgba(255,255,255,.92),
		 0 -1px 0 rgba(255,255,255,.92),
		 0  1px 0 rgba(255,255,255,.92),
		-1px 0 0 rgba(255,255,255,.92),
		 1px 0 0 rgba(255,255,255,.92),
		/* léger voile lumineux + ombre portée profonde */
		 0 0 12px rgba(255,255,255,.30),
		 0 12px 34px rgba(10,9,20,.55);
}
.scl-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.1rem;
}
.scl-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .42rem .85rem;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1;
	color: var(--scl-violet);
	background: rgba(255,255,255,.82);
	border: 1px solid var(--scl-line);
	backdrop-filter: blur(6px);
	text-decoration: none;
}
.scl-chip__ico {
	width: 15px; height: 15px;
	fill: none; stroke: currentColor;
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.scl-chip--cat {
	color: #fff;
	background: linear-gradient(120deg, var(--scl-violet), var(--scl-violet-2));
	border-color: transparent;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .78rem;
	box-shadow: 0 6px 16px -6px rgba(109,40,217,.6);
}
.scl-chip--cat:hover { filter: brightness(1.08); color: #fff; }

/* ---- Corps de lecture ---- */
.scl-single__content {
	max-width: 720px;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding: 0 1.25rem;
	font-size: 1.08rem;
	line-height: 1.75;
	color: #1c1830;
}
.scl-single__content > * + * { margin-top: 1.25rem; }

/* Lettrine « magazine » sur le premier paragraphe (uniquement s'il ouvre l'article) */
.scl-single__content > p:first-child::first-letter {
	float: left;
	font-size: 3.2em;
	line-height: .82;
	padding: .08em .14em 0 0;
	font-weight: 800;
	color: var(--scl-violet);
}
/* Couleur de lecture forcée (prime sur les réglages de couleur d'Astra) */
.scl-single .scl-single__content,
.scl-single .scl-single__content p,
.scl-single .scl-single__content li { color: #1c1830; }
.scl-single__content h2 {
	margin-top: 2.4rem;
	font-size: 1.7rem;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--scl-ink);
}
.scl-single__content h3 {
	margin-top: 1.9rem;
	font-size: 1.32rem;
	font-weight: 700;
	color: var(--scl-ink);
}
.scl-single__content a {
	color: var(--scl-violet);
	text-decoration: underline;
	text-decoration-color: rgba(124,92,255,.4);
	text-underline-offset: 3px;
}
.scl-single__content a:hover { text-decoration-color: var(--scl-violet); }
.scl-single__content img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 68vh;            /* une photo portrait ne mange plus tout l'écran */
	margin-inline: auto;
	border-radius: var(--scl-radius);
	box-shadow: var(--scl-shadow);
}
/* Légendes d'images (champ « légende » de l'éditeur) */
.scl-single__content figure { margin-inline: auto; text-align: center; }
.scl-single__content figcaption,
.scl-single__content .wp-caption-text {
	margin-top: .6rem;
	font-size: .9rem;
	font-style: italic;
	color: var(--scl-ink-soft);
}
.scl-single__content blockquote {
	margin: 1.8rem 0;
	padding: .4rem 0 .4rem 1.4rem;
	border-left: 4px solid var(--scl-violet-2);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--scl-ink);
}
.scl-single__content ul,
.scl-single__content ol { padding-left: 1.3rem; }
.scl-single__content li + li { margin-top: .4rem; }
.scl-single__content code {
	background: #efeafc;
	padding: .15em .45em;
	border-radius: 6px;
	font-size: .92em;
}

/* --- Encadrés réutilisables (classe à ajouter sur un bloc dans l'éditeur) --- */
.scl-single__content .scl-note,
.scl-single__content .scl-tip {
	margin: 1.9rem 0;
	padding: 1.1rem 1.3rem 1.1rem 1.4rem;
	border-radius: 14px;
	border-left: 4px solid var(--scl-violet-2);
	background: #efeafc;
	color: #1c1830;
	line-height: 1.6;
}
.scl-single__content .scl-note strong { color: var(--scl-violet); }
.scl-single__content .scl-tip {
	border-left-color: var(--scl-gold);
	background: #fbf3e3;
}
.scl-single__content .scl-tip strong { color: var(--scl-gold); }

/* --- Tableaux comparatifs --- */
/* La boîte arrondie est portée par la figure (clippe proprement, pas de carré fantôme) */
.scl-single__content figure.wp-block-table {
	margin: 1.9rem 0;
	border: 1px solid var(--scl-line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--scl-shadow);
	background: #fff;
}
.scl-single__content figure.wp-block-table table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: .97rem;
}
.scl-single__content figure.wp-block-table thead th {
	background: linear-gradient(120deg, var(--scl-violet), var(--scl-violet-2));
	color: #fff;
	font-weight: 700;
	text-align: left;
}
.scl-single__content figure.wp-block-table th,
.scl-single__content figure.wp-block-table td {
	padding: .72rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--scl-line);
}
.scl-single__content figure.wp-block-table tbody tr:nth-child(even) td { background: #faf8ff; }
.scl-single__content figure.wp-block-table tbody tr:last-child td { border-bottom: 0; }

/* Tags */
.scl-single__tags { max-width: 720px; margin: 2rem auto 0; padding: 0 1.25rem; }
.scl-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.scl-tags a {
	display: inline-block;
	padding: .35rem .8rem;
	border-radius: 999px;
	background: #efeafc;
	color: var(--scl-violet);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
}
.scl-tags a:hover { background: #e6ddfb; }

/* ---- Bloc CTA conversion ---- */
.scl-cta {
	position: relative;
	max-width: 820px;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding: clamp(2rem, 4vw, 3rem);
	border-radius: 24px;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(125deg, #2a1463 0%, var(--scl-violet) 45%, #4a1ea8 100%);
	box-shadow: var(--scl-shadow-lg);
	text-align: center;
}
.scl-cta__glow {
	position: absolute;
	top: -28%;
	right: -8%;
	width: 42%;
	height: 95%;
	background: radial-gradient(closest-side, rgba(201,161,74,.40), transparent 72%);
	pointer-events: none;
	z-index: 0;
}
.scl-cta__body { position: relative; z-index: 1; }
/* !important requis : style.css impose h1-h6 { color: var(--scl-white) !important }
   qui vaut #17122B (encre foncée) en thème clair → titre illisible sur le violet. */
.scl-cta__title { margin: .3rem 0 .6rem; font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 800; color: #fff !important; }
.scl-cta__text { margin: 0 auto 1.4rem; max-width: 48ch; color: rgba(255,255,255,.92) !important; line-height: 1.6; }

/* ---- Boutons ---- */
.scl-btn {
	display: inline-block;
	padding: .85rem 1.6rem;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	background: linear-gradient(120deg, var(--scl-violet), var(--scl-violet-2));
	color: #fff;
	box-shadow: 0 12px 26px -12px rgba(109,40,217,.7);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.scl-btn:hover { transform: translateY(-2px); filter: brightness(1.05); color: #fff; }
.scl-btn--gold {
	background: linear-gradient(120deg, var(--scl-gold), var(--scl-gold-2));
	box-shadow: 0 12px 26px -12px rgba(194,116,10,.7);
	color: #0a0914;
}
.scl-btn--ghost {
	background: #fff;
	color: var(--scl-violet);
	border: 1px solid var(--scl-line);
	box-shadow: var(--scl-shadow);
}
.scl-btn--ghost:hover { color: var(--scl-violet-2); }

/* ---- Articles liés ---- */
.scl-related {
	max-width: 1160px;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	padding: 0 1.25rem;
}
.scl-related__title {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 800;
	margin-bottom: 1.4rem;
	letter-spacing: -.01em;
}
.scl-related__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: .5rem;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--scl-violet), var(--scl-gold-2));
}
.scl-grid--related { padding: 0; margin-top: 0; }
@media (min-width: 1000px) {
	.scl-grid--related .scl-card--featured { grid-column: auto; }
}

/* ---- Retour + commentaires ---- */
.scl-backlink { text-align: center; margin: clamp(2.5rem,5vw,3.5rem) auto; }
.scl-comments { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem; }

/* ---- Barre de progression de lecture (article uniquement) ---- */
.scl-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 99999;
	pointer-events: none;
}
.scl-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--scl-violet), var(--scl-violet-2) 55%, var(--scl-gold-2));
	box-shadow: 0 0 12px rgba(124,92,255,.55);
}

/* ---- Texte holo (signature) ---- */
.scl-holo-text {
	background: linear-gradient(100deg, var(--scl-violet) 0%, var(--scl-violet-2) 32%, var(--scl-gold-2) 64%, var(--scl-gold) 100%);
	background-size: 180% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
	.scl-holo-text {
		animation: scl-holo-shift 7s ease-in-out infinite;
	}
	@keyframes scl-holo-shift {
		0%, 100% { background-position: 0% 50%; }
		50%      { background-position: 100% 50%; }
	}
}

/* ---- Accessibilité : mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
	.scl-card,
	.scl-card__img,
	.scl-card__media::after,
	.scl-card__cta,
	.scl-btn,
	.scl-pill { transition: none !important; }
	.scl-card__media::after { display: none; }
}

/* ---- Focus clavier visible (qualité) ---- */
.scl-blog a:focus-visible,
.scl-single a:focus-visible {
	outline: 3px solid var(--scl-violet-2);
	outline-offset: 3px;
	border-radius: 6px;
}

/*
 * Snippets CSS à ajouter dans sullicardlab-child-v3/scl-blog.css
 * Objectif : styler les nouveaux blocs générés par Composeur SCL Pro v2.
 * Ajoute ce bloc à la fin du fichier scl-blog.css du thème enfant.
 */

.scl-single__content .scl-image-todo {
	margin: 1.9rem 0;
	padding: 1rem 1.2rem;
	border: 1px dashed var(--scl-line);
	border-radius: 14px;
	background: #fbfaff;
	color: var(--scl-ink-soft);
	font-style: italic;
}

.scl-single__content .scl-toc {
	margin: 1.9rem 0;
	padding: 1.15rem 1.3rem;
	border-radius: 16px;
	background: #f6f2ff;
	border: 1px solid var(--scl-line);
	box-shadow: var(--scl-shadow);
}

.scl-single__content .scl-toc p {
	margin-top: 0;
	font-weight: 700;
	color: var(--scl-ink);
}

.scl-single__content .scl-toc ul {
	margin-bottom: 0;
}

.scl-single__content .scl-toc a {
	font-weight: 700;
}

.scl-single__content .scl-warning,
.scl-single__content .scl-takeaways,
.scl-single__content .scl-faq-block,
.scl-single__content .scl-before-after {
	margin: 1.9rem 0;
	padding: 1.1rem 1.3rem;
	border-radius: 14px;
	border: 1px solid var(--scl-line);
	background: #fff;
	box-shadow: var(--scl-shadow);
}

.scl-single__content .scl-warning {
	border-left: 4px solid #d97706;
	background: #fff7ed;
}

.scl-single__content .scl-warning strong {
	color: #b45309;
}

.scl-single__content .scl-takeaways {
	border-left: 4px solid var(--scl-violet-2);
	background: #f6f2ff;
}

.scl-single__content .scl-takeaways p:first-child {
	margin-top: 0;
}

.scl-single__content .scl-takeaways ul {
	margin-bottom: 0;
}

.scl-single__content .scl-product-callout {
	position: relative;
	margin: 2.2rem 0;
	padding: clamp(1.3rem, 3vw, 1.8rem);
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(125deg, #2a1463 0%, var(--scl-violet) 48%, #4a1ea8 100%);
	box-shadow: var(--scl-shadow-lg);
	color: #fff;
}

.scl-single__content .scl-product-callout::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -12%;
	width: 48%;
	height: 120%;
	background: radial-gradient(closest-side, rgba(201,161,74,.36), transparent 72%);
	pointer-events: none;
}

.scl-single__content .scl-product-callout > * {
	position: relative;
	z-index: 1;
}

.scl-single__content .scl-product-callout,
.scl-single__content .scl-product-callout p,
.scl-single__content .scl-product-callout h3,
.scl-single__content .scl-product-callout a:not(.scl-btn) {
	color: #fff !important;
}

.scl-single__content .scl-product-callout__eyebrow {
	margin-top: 0;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.78) !important;
}

.scl-single__content .scl-product-callout h3 {
	margin-top: .35rem;
	font-size: clamp(1.35rem, 3vw, 1.7rem);
}

.scl-single__content .scl-faq-block h2 {
	margin-top: 0;
}

.scl-single__content .scl-faq-block details {
	padding: .85rem 0;
	border-top: 1px solid var(--scl-line);
}

.scl-single__content .scl-faq-block details:first-of-type {
	border-top: 0;
}

.scl-single__content .scl-faq-block summary {
	font-weight: 800;
	color: var(--scl-violet);
	cursor: pointer;
}

.scl-single__content .scl-faq-block summary::marker {
	color: var(--scl-gold);
}

.scl-single__content .scl-before-after .before-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem;
}

.scl-single__content .scl-before-after .before-grid > div {
	padding: .9rem;
	border: 1px dashed var(--scl-line);
	border-radius: 12px;
	background: #fbfaff;
}

.scl-single__content .scl-before-after .before-grid strong {
	color: var(--scl-violet);
}

@media (max-width: 640px) {
	.scl-single__content .scl-before-after .before-grid {
		grid-template-columns: 1fr;
	}
}