/**
 * RS-Blog — design reproduisant la page « Customer Stories » de référence.
 * Page blanche, cartes #F7F7F7 avec léger ombrage. Conteneur aligné sur le
 * hero de la page (max 1280px, padding 60/40/20px).
 */

.rsb {
	--rsb-card: #f7f7f7;
	--rsb-heading: #1e293b;
	--rsb-muted: #64748b;
	--rsb-outline: #94a3b8;
	--rsb-blue: #2563eb;
	--rsb-chip: #ececec;
	--rsb-meta: #334155;
	--rsb-border: #e2e8f0;
	--rsb-radius: 4px;

	max-width: 1280px;
	margin: 0 auto;
	padding: 0 60px;
	color: var(--rsb-heading);
	box-sizing: border-box;
}

.rsb *,
.rsb *::before,
.rsb *::after { box-sizing: border-box; }

/* ---------- Titre (optionnel, masqué par défaut) ---------- */
.rsb-title {
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 32px;
	color: var(--rsb-heading);
}

/* ---------- Barre de filtres ---------- */
.rsb-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 48px;
	max-width: 736px;
}

.rsb-select { position: relative; flex: 1 1 220px; min-width: 200px; }

.rsb-filter {
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 40px 0 14px;
	border: 1px solid var(--rsb-outline);
	border-radius: var(--rsb-radius);
	background: #fff;
	color: var(--rsb-muted);
	font-size: 16px;
	line-height: 50px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.rsb-filter:hover { border-color: #334155; }
.rsb-filter:focus { outline: 2px solid var(--rsb-blue); outline-offset: -1px; }

.rsb-chev {
	position: absolute;
	right: 14px;
	top: 50%;
	width: 14px;
	height: 9px;
	transform: translateY(-50%);
	color: var(--rsb-outline);
	pointer-events: none;
}

.rsb-searchbox {
	display: flex;
	align-items: center;
	height: 50px;
	flex: 1 1 240px;
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--rsb-outline);
	border-radius: var(--rsb-radius);
	overflow: hidden;
}

.rsb-searchbox:hover { border-color: #334155; }

/* Champ de saisie : bordure interne transparente (on garde celle du conteneur),
   y compris au survol/focus où le thème (Astra) tente d'en réafficher une. */
.rsb .rsb-search,
.rsb .rsb-search:hover,
.rsb .rsb-search:focus,
.rsb .rsb-search:focus-visible {
	flex: 1;
	height: 100%;
	margin: 0;
	border: 1px solid transparent;
	outline: 0;
	box-shadow: none;
	padding: 0 16px;
	font-size: 16px;
	color: var(--rsb-muted);
	background: transparent;
}

/* Réinitialise le style de bouton du thème (Astra) : pas de fond orange. */
.rsb .rsb-search-btn,
.rsb .rsb-search-btn:hover,
.rsb .rsb-search-btn:focus {
	width: 48px;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--rsb-muted);
	cursor: pointer;
	outline: none;
}

.rsb .rsb-search-btn svg { width: 20px; height: 20px; }

/* ---------- Grille de cartes ---------- */
.rsb-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: stretch;
}

.rsb-card {
	display: flex;
	flex-direction: column;
	background: var(--rsb-card);
	border-radius: var(--rsb-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.rsb-card:hover {
	box-shadow: 0 14px 28px rgba(16, 24, 40, 0.14);
	transform: translateY(-2px);
}

.rsb-card-figure {
	margin: 0;
	height: 204px;
	background: #e2e8f0;
}

.rsb-card-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rsb-card-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 18px 20px;
}

.rsb-card-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	color: var(--rsb-heading);
}

.rsb-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rsb-card-tags li {
	background: var(--rsb-chip);
	color: var(--rsb-muted);
	font-size: 13px;
	padding: 2px 10px;
	border-radius: 2px;
}

.rsb-empty {
	grid-column: 1 / -1;
	color: var(--rsb-muted);
	text-align: center;
	padding: 48px 0;
}

/* ---------- Variante « Reliability Blog » : libellés + auteur/date ---------- */
.rsb-card--meta {
	background: #fff;
	border: 1px solid var(--rsb-border);
	box-shadow: none;
}

.rsb-card--meta:hover {
	box-shadow: 0 14px 28px rgba(16, 24, 40, 0.12);
	border-color: #cbd5e1;
}

/* Corps : padding uniforme 18px ; l'espacement vertical est géré par les
   marges explicites des éléments (gap neutralisé). Occupe la hauteur restante
   pour pouvoir pousser la méta en bas. */
.rsb-card--meta .rsb-card-body {
	flex: 1 1 auto;
	gap: 0;
	padding: 18px 18px 0; /* bas géré par la marge de la méta (= 22px) */
}

/* Libellés : alignés à gauche (sans retrait de liste), espacés du titre. */
.rsb-card--meta .rsb-card-tags {
	padding-left: 0;
	margin-top: 4px;
	margin-bottom: 20px;
}

/* Titre : au moins 20px sous le titre (la méta peut descendre plus bas
   via margin-top:auto, mais jamais à moins de 20px du titre). */
.rsb-card--meta .rsb-card-title {
	margin-bottom: 20px;
}

/* Auteur + date sur une même ligne, épinglés au bas de la carte. */
.rsb-card--meta .rsb-card-meta {
	margin: 0;
	margin-top: auto;
	margin-bottom: 22px;
	font-size: 14px;
	font-weight: 500;
	color: var(--rsb-meta);
}

.rsb-card--meta .rsb-card-meta .rsb-sep {
	margin: 0 6px;
	color: var(--rsb-muted);
}

/* ---------- Variante carte « Case Studies » ----------
   Ordre : photo → titre → logo (emplacement réservé) → bulles (épinglées en bas).
   Pas d'auteur/date. */
.rsb-card--cs .rsb-card-body { padding-bottom: 18px; }

.rsb-card--cs .rsb-card-logo {
	min-height: 48px; /* réservé même sans logo : cartes de hauteur homogène */
	display: flex;
	align-items: center;
	margin: 0; /* aligné à gauche */
	margin-top: auto; /* logo épinglé en bas de la carte */
}
.rsb-card--cs .rsb-card-logo img {
	max-height: 48px;
	width: auto;
	height: auto;
	max-width: 200px;
	display: block;
}

/* Bulles Case Studies : fond gris clair #F7F7F7 (position au-dessus du titre,
   marges héritées de .rsb-card--meta .rsb-card-tags). */
.rsb-card--cs .rsb-card-tags li { background: #f7f7f7; }

/* ---------- Bouton « voir plus » ---------- */
.rsb-more-wrap { display: flex; justify-content: center; margin-top: 32px; }

.rsb-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	color: #1d4ed8;
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
}

.rsb-more:hover { filter: brightness(1.25); }
.rsb-more svg { width: 20px; height: 20px; }

/* ---------- Pagination numérotée ---------- */
.rsb-pagination-wrap { display: flex; justify-content: center; margin-top: 40px; }

.rsb-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.rsb .rsb-page,
.rsb .rsb-page:hover,
.rsb .rsb-page:focus {
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rsb-border);
	border-radius: var(--rsb-radius);
	background: #fff;
	color: var(--rsb-heading);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.rsb .rsb-page:hover:not(:disabled):not(.is-current) { border-color: #334155; }

.rsb .rsb-page.is-current {
	background: var(--rsb-heading);
	border-color: var(--rsb-heading);
	color: #fff;
	cursor: default;
}

.rsb .rsb-page:disabled {
	opacity: 0.4;
	cursor: default;
}

.rsb-page-prev svg,
.rsb-page-next svg { width: 14px; height: 14px; display: block; }

.rsb-page-ellipsis {
	min-width: 24px;
	text-align: center;
	color: var(--rsb-muted);
	user-select: none;
}

/* ---------- Chargement ---------- */
.rsb-results { transition: opacity 0.15s ease; }
.rsb-results.is-loading { opacity: 0.45; pointer-events: none; }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
	.rsb-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.rsb-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	.rsb { padding: 0 40px; }
}

@media (max-width: 767px) {
	.rsb { padding: 0 20px; }
	.rsb-filters { flex-direction: column; max-width: none; }
	.rsb-select, .rsb-searchbox { width: 100%; flex-basis: auto; min-width: 0; }
}

/* =========================================================================
 *  Gabarit d'article (Reliability Blog)
 * ====================================================================== */

/* Barre de progression de lecture, fixée juste sous le méga-menu (le JS
   calcule --rsb-readbar-top selon la hauteur de l'en-tête collant). */
.rsb-readbar {
	position: fixed;
	left: 0;
	top: var(--rsb-readbar-top, 0px);
	z-index: 999;
	width: 100%;
	height: 4px;
	background: transparent;
	pointer-events: none;
}
.rsb-readbar-fill {
	display: block;
	height: 100%;
	width: 0;
	background: #26334a;
	transition: width 0.05s linear;
}

/* Conteneur : le gutter latéral + la largeur max sont gérés par le .ast-container
   du thème (identique aux autres pages). Ici on ne pose que l'espacement vertical
   (80px au-dessus pour aérer le hero du méga-menu, 64px en bas). */
.rsb-article-wrap { padding: 80px 0 64px; }

/* Fond blanc sur tout le body des articles (desktop + tablette + mobile). */
body.rsb-article-page,
body.rsb-article-page #page,
body.rsb-article-page #content,
body.rsb-article-page .site-content { background-color: #fff !important; }

.rsb-article { font-family: 'Poppins', sans-serif; }
.rsb-article *, .rsb-article *::before, .rsb-article *::after { box-sizing: border-box; }

/* Hero */
.rsb-hero {
	display: flex;
	align-items: stretch;
	background: #26334a;
	color: #fff;
	border-radius: 10px;
	overflow: hidden;
	margin: 0 0 44px;
}
.rsb-hero-text {
	flex: 1 1 auto;
	padding: 44px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.rsb-hero-title { margin: 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; line-height: 1.14; color: #fff; }
.rsb-hero-author { margin-top: 16px; font-size: 15px; font-weight: 600; color: #fff; }
.rsb-hero-meta { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.rsb-hero-sep { margin: 0 8px; }

/* Hero « Case Studies » : fond blanc, titre + durée en #26334A, logo au-dessus
   si présent, pas d'auteur/date, pas de bordure. */
.rsb-hero--cs {
	background: #fff;
	border-radius: 0;
	overflow: visible;
}
.rsb-hero--cs .rsb-hero-text { padding: 0 0 8px; }
.rsb-hero--cs .rsb-hero-logo { margin-bottom: 20px; }
.rsb-hero--cs .rsb-hero-logo img {
	max-height: 60px;
	width: auto;
	height: auto;
	max-width: 240px;
	display: block;
}
.rsb-hero--cs .rsb-hero-title { color: #26334a; }
.rsb-hero--cs .rsb-hero-meta { color: #26334a; margin-top: 10px; }

/* Corps : table des matières + contenu */
.rsb-article-body { display: grid; grid-template-columns: 250px 1fr; gap: 56px; margin-bottom: 40px; }

.rsb-toc { position: sticky; top: var(--rsb-sticky-top, 100px); align-self: start; }
.rsb-toc-title { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: #1e293b; }
.rsb-toc-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid #e2e8f0; }
.rsb-toc-list a {
	display: block;
	padding: 9px 0 9px 18px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: #64748b;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.rsb-toc-list a.is-active { color: #26334a; border-left-color: #ef7d22; font-weight: 700; }

/* Contenu (zone éditeur WordPress) */
.rsb-article-content h2 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	margin: 40px 0 14px;
	color: #1e293b;
	scroll-margin-top: var(--rsb-sticky-top, 120px);
}
.rsb-article-content h2:first-child { margin-top: 0; }
.rsb-article-content p { font-size: 16.5px; line-height: 1.7; margin: 0 0 18px; color: #334155; }

/* Masque le titre natif du thème sur ces articles (secours au filtre Astra). */
.rsb-article-page .ast-single-post .entry-title,
.rsb-article-page .entry-header .entry-title { display: none; }

/* Même point de bascule que les pages du site (1023px) : hero et colonnes
   empilés (sommaire au-dessus du texte). Le gutter latéral reste géré par Astra. */
@media (max-width: 1023px) {
	.rsb-article-body { grid-template-columns: 1fr; gap: 28px; }
	.rsb-toc { position: static; }
}

/* =========================================================================
 *  Hero « post mis en avant » — shortcode [rs_blog_featured].
 *  Fond blanc, carte alignée sur le style des cartes .rsb-card
 *  (rayon 4px, filet, léger ombrage, soulèvement au survol), cliquable.
 * ====================================================================== */
.rsbf { width: 100%; background: #fff; font-family: 'Poppins', sans-serif; }
.rsbf *, .rsbf *::before, .rsbf *::after { box-sizing: border-box; }
/* padding-top 110px : aligne le H1 sur celui de la page Reliability Blog
   (section 80px + surtitre ~30px). Ramené à 0 sous 1024px (voir plus bas). */
.rsbf-wrap { max-width: 1280px; margin: 0 auto; padding: 110px 60px 48px; }

.rsbf-h1 {
	font-size: clamp(24px, 2.5vw, 40px);
	font-weight: 700;
	line-height: 1.1;
	color: #26334a;
	margin: 0 0 28px;
}

.rsbf-card {
	display: flex;
	align-items: stretch;
	background: #fff;
	color: inherit;
	text-decoration: none;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.rsbf-card:hover { box-shadow: 0 14px 28px rgba(16, 24, 40, 0.14); transform: translateY(-2px); }

.rsbf-text {
	flex: 1 1 44%;
	padding: 44px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.rsbf-title {
	font-size: clamp(20px, 2vw, 27px);
	font-weight: 700;
	line-height: 1.22;
	color: #26334a;
	margin: 0 0 16px;
}
.rsbf-excerpt { font-size: 15.5px; line-height: 1.65; color: #5b6472; margin: 0 0 24px; }
.rsbf-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-size: 14px;
	font-weight: 600;
	color: #f78f2d;
	transition: color 0.15s ease;
}
.rsbf-link span { transition: transform 0.15s ease; }
.rsbf-card:hover .rsbf-link { color: #c35428; }
.rsbf-card:hover .rsbf-link span { transform: translateX(4px); }

.rsbf-media {
	flex: 1 1 56%;
	position: relative;
	min-height: 380px;
	background: #26334a;
	overflow: hidden;
}
.rsbf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.rsbf-quote {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	max-width: 340px;
	background: #fff;
	border-radius: 8px;
	padding: 22px 24px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.20);
	margin: 0;
}
.rsbf-quote blockquote { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: #26334a; }
.rsbf-figc { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rsbf-author { font-size: 13.5px; font-weight: 700; color: #26334a; line-height: 1.3; }
.rsbf-role { font-size: 12.5px; color: #7a8190; line-height: 1.3; }
.rsbf-logo { height: 26px; width: auto; max-width: 120px; }

/* Responsive — seuils alignés sur le bloc .rsb du site (1024px / 767px).
   ≥1024px (grande tablette + ordinateur) : carte côte-à-côte, padding-top 110px.
   ≤1023px (petite tablette + cellulaire)  : carte masquée, seul le H1, padding 28px haut / 24px bas. */
@media (max-width: 1024px) {
	.rsbf-wrap { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 1023px) {
	.rsbf-card { display: none; }
	.rsbf-wrap { padding-top: 28px; padding-bottom: 24px; }
	.rsbf-h1 { margin-bottom: 0; }
}
@media (max-width: 767px) {
	.rsbf-wrap { padding-left: 20px; padding-right: 20px; }
}