/* Gabarits du blog (liste et articles), d'après le thème HubSpot Brightlane. Chargé seulement sur le blog (inc/blog.php).
   Valeurs relevées sur wannup.com le 20/10/2026 (bureau 1440 px, mobile 390 px).
   Points de rupture HubSpot : mise en page à 768 px, typographie mobile sous 1024 px, menu des filtres sous 1024 px. */

.wb-main {
	--wb-ink: #201d41;
	--wb-cream: #f6f3f1;
	--wb-orange: #f59d19;
	--wb-purple: #45277c;
	--wb-card: #7b77ac;
	--wb-gutter: clamp(1rem, 2.5vw, 3rem);
	color: var(--wb-ink);
	font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.67;
	letter-spacing: normal;
	background: transparent;
}
.wb-main * { box-sizing: border-box; }
.wb-main :is(h1, h2, h3, p, ul, ol, figure) { margin-top: 0; }
.wb-main a { text-decoration: none; }
.wb-main img { max-width: 100%; height: auto; }
.wb-main [hidden] { display: none !important; }
@media (max-width: 1023px) {
	.wb-main { font-size: 14px; }
}

/* ---------- Boutons (.button de HubSpot) ---------- */
.wb-main .wb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px 40px;
	border: 2px solid transparent;
	border-radius: 50px;
	font: 700 16px/20px Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
@media (max-width: 1023px) {
	.wb-main .wb-btn { font-size: 14px; line-height: 17.5px; letter-spacing: 0.35px; }
}
.wb-main .wb-btn--primary,
.wb-main .wb-btn--tertiary {
	background-color: var(--wb-purple);
	background-image: linear-gradient(140deg, var(--wb-purple), var(--wb-orange));
	border-color: rgba(245, 157, 25, 0);
	color: var(--wb-cream);
}
.wb-main .wb-btn--tertiary { color: var(--wb-ink); border-color: rgba(69, 39, 124, 0); }
.wb-main .wb-btn--primary:hover,
.wb-main .wb-btn--primary:focus-visible,
.wb-main .wb-btn--tertiary:hover,
.wb-main .wb-btn--tertiary:focus-visible {
	background-color: var(--wb-ink);
	background-image: linear-gradient(140deg, var(--wb-ink), var(--wb-purple));
	color: var(--wb-cream);
}
.wb-main .wb-btn--secondary {
	background: rgba(69, 39, 124, 0);
	border-color: var(--wb-ink);
	color: var(--wb-ink);
}
.wb-main .wb-btn--secondary:hover,
.wb-main .wb-btn--secondary:focus-visible { background: var(--wb-ink); color: var(--wb-cream); }
.wb-main .wb-btn--tabs {
	background: var(--wb-card);
	border-color: var(--wb-card);
	color: var(--wb-ink);
}
.wb-main .wb-btn--tabs:hover,
.wb-main .wb-btn--tabs:focus-visible {
	background: var(--wb-orange);
	border-color: var(--wb-orange);
	box-shadow: 0 0 30px 0 var(--wb-orange);
}

/* Lien « Lire » (.button--text-link) */
.wb-main .wb-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 700 16px/20px Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--wb-ink);
	text-decoration: underline;
	text-decoration-color: var(--wb-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
@media (max-width: 1023px) {
	.wb-main .wb-link { font-size: 14px; line-height: 17.5px; letter-spacing: 0.35px; }
}

/* Méta de carte (.card-tag) : parties séparées par une puce orange */
.wb-main .wb-card-tag { font-size: 15px; line-height: 25.05px; margin: 0; }
@media (max-width: 1023px) {
	.wb-main .wb-card-tag { font-size: 13.125px; line-height: 21.9188px; }
}
.wb-card-tag__part { display: inline-block; }
.wb-card-tag__part:not(:last-child)::after { content: "\2022"; margin: 0 0.5ex; color: var(--wb-orange); }

/* Icônes de réseaux (ronds de 40 px) */
.wb-main .wb-social { display: flex; align-items: center; }
.wb-main .wb-social__service {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 5px;
	border-radius: 100px;
	background: var(--wb-ink);
	color: var(--wb-cream);
	transition: background-color 0.2s, border-color 0.2s;
}
.wb-main .wb-social__service:hover,
.wb-main .wb-social__service:focus-visible { background: var(--wb-orange); }
.wb-main .wb-social__service svg { display: block; width: 19.2px; height: 19.2px; }

/* =====================================================================
   LISTE DU BLOG (/le-blog)
   ===================================================================== */
.wb-list__hero {
	padding: 200px 0 150px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.wb-list__hero-inner { width: 90%; max-width: 1200px; margin: 0 auto; }
.wb-main .wb-list__hero h1 {
	margin: 0;
	font-family: "Francois One", Impact, sans-serif;
	font-weight: 400;
	font-size: 52px;
	line-height: 62.4px;
	letter-spacing: 0.26px;
	text-transform: uppercase;
	color: var(--wb-ink);
}
@media (max-width: 1023px) {
	.wb-main .wb-list__hero h1 { font-size: 40px; line-height: 0.923; letter-spacing: 0.2px; }
}

.wb-list__body { padding: 90px 0 120px; }
.wb-list__inner { width: 90%; max-width: 1000px; margin: 0 auto; }

/* Filtres : bouton « Tous les articles » et recherche */
.wb-filters {
	margin-bottom: 48px;
	font: 700 18px/30.006px Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: normal;
	text-transform: none;
}
@media (min-width: 768px) {
	.wb-filters { display: flex; align-items: center; justify-content: space-between; text-align: center; }
	.wb-filters__wrapper { display: flex; align-items: center; }
	.wb-search { margin-left: auto; min-width: 250px; width: calc(33.33333% + 1rem - var(--wb-gutter)); }
}
.wb-linknav { position: relative; }
.wb-linknav__options { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; width: 100%; min-width: min-content; text-align: left; }
.wb-linknav__options > li { display: block; margin: 0; padding: 0; }
.wb-linknav__options > li::before { display: none; }
.wb-main .wb-linknav__toggle {
	display: none;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}
.wb-linknav__toggle svg { width: 22px; height: 22px; stroke: var(--wb-ink); vertical-align: middle; }
@media (min-width: 768px) {
	.wb-linknav__options > li { margin-right: 0.5rem; margin-bottom: 0.5rem; }
}
@media (max-width: 1023px) {
	.wb-main .wb-linknav__toggle { display: flex; }
	.wb-linknav__options {
		position: absolute;
		display: block;
		margin-top: 16px;
		padding: 16px;
		background: var(--wb-cream);
		color: var(--wb-cream);
		opacity: 0;
		visibility: hidden;
		z-index: 100;
	}
	.wb-linknav__options.is-open { opacity: 1; visibility: visible; color: var(--wb-ink); }
	.wb-linknav__options .wb-btn { background: transparent; border: 0; box-shadow: none; color: inherit; font-size: inherit; padding: 0; text-transform: none; }
}
@media (max-width: 1023px) {
	.wb-search { display: block; margin: 1em 0; }
}

.wb-search { display: flex; align-items: center; font-weight: 400; letter-spacing: normal; text-align: left; }
.wb-search__inner {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	border-bottom: 1px solid var(--wb-ink);
}
.wb-search__inner:focus-within { border-color: var(--wb-orange); }
.wb-main .wb-search__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 40px;
	margin: 0 1em 0 0;
	padding: 1px 2px;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: inherit;
	font: 400 16px/26.72px Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.wb-main .wb-search__input::placeholder { color: #757575; opacity: 1; }
.wb-search__input::-webkit-search-cancel-button,
.wb-search__input::-webkit-search-decoration { display: none; }
.wb-main .wb-search__submit {
	display: flex;
	align-items: center;
	margin: 0 1em 0 6.667px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wb-ink);
	cursor: pointer;
}
.wb-search__submit:hover,
.wb-search__submit:focus-visible { color: var(--wb-orange); }
.wb-search__submit svg { width: 19.2px; height: 19.2px; }

/* Cartes en zigzag */
.wb-items { margin: 0; padding: 0; list-style: none; }
.wb-main .wb-items > li { display: block; margin: 0; padding: 0; }
.wb-items > li::before { display: none; }
.wb-card {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--wb-card);
	color: var(--wb-ink);
	cursor: pointer;
}
.wb-main .wb-items > .wb-card + .wb-card { margin-top: 60px; }

.wb-card__image { overflow: hidden; }
.wb-card__image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.4s ease; }
.wb-card:hover .wb-card__image img { transform: scale(1.1); }
.wb-card__body { padding: 40px; }
.wb-main .wb-card__tag { margin-bottom: 15px; }
@media (max-width: 1023px) {
	.wb-main .wb-card__tag { margin-bottom: 13.125px; }
}
.wb-main .wb-card__title {
	margin: 0 0 16px;
	font: 700 24px/36px Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 0.24px;
	text-transform: none;
	color: var(--wb-ink);
}
.wb-main .wb-card__title a { color: var(--wb-ink); }
.wb-main .wb-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wb-card__desc { margin: 0 0 32px; }
.wb-card:hover .wb-link,
.wb-card:focus-within .wb-link { color: var(--wb-orange); }
@media (min-width: 768px) {
	.wb-main .wb-items > .wb-card { display: flex; }
	.wb-card:nth-child(2n) { flex-direction: row-reverse; }
	.wb-card__image { flex: 0 0 50%; width: 50%; }
	.wb-card__body { padding: 60px; }
}

.wb-empty { margin: 3rem 0; font-size: 1.1em; text-align: center; }
.wb-more { display: flex; justify-content: center; margin-top: 40px; }
@media (min-width: 768px) {
	.wb-more { margin-top: 90px; }
}

/* =====================================================================
   ARTICLE
   ===================================================================== */
.wb-article { margin: 0; }

/* Grille : rail de partage | colonne centrale (titre, corps) */
.wb-inner { width: 90%; max-width: 1300px; margin: 0 auto; }
@media (min-width: 768px) {
	.wb-inner {
		--wb-post-gutter: 50px;
		display: grid;
		grid-template-columns: 150px var(--wb-post-gutter) minmax(0, 1fr) var(--wb-post-gutter) 150px;
		grid-template-rows: auto 0 auto;
	}
	.wb-hero { grid-column: 2 / span 3; grid-row: 1 / span 2; }
	.wb-share { grid-column: 1; grid-row: 2 / span 2; }
	.wb-body { grid-column: 3; grid-row: 3; }
}
@media (min-width: 1280px) {
	.wb-inner { --wb-post-gutter: 125px; }
}

/* En-tête : titre et temps de lecture (l'image à la une reste masquée) */
.wb-hero { position: relative; padding: 100px 0 60px; }
@media (min-width: 768px) {
	.wb-hero { padding: 150px 0 90px; }
}
.wb-hero__content { max-width: 900px; margin-left: auto; margin-right: auto; text-align: left; }
.wb-main .wb-hero__title {
	margin: 0 0 35px;
	font-family: "Francois One", Impact, sans-serif;
	font-weight: 400;
	font-size: 70px;
	line-height: 84px;
	letter-spacing: 0.35px;
	text-transform: uppercase;
	color: var(--wb-ink);
}
@media (max-width: 1023px) {
	.wb-main .wb-hero__title { line-height: 0.923; }
}
.wb-hero .wb-card-tag { margin-top: 15px; }
@media (max-width: 1023px) {
	.wb-hero .wb-card-tag { margin-top: 13.125px; }
}

/* Rail de partage */
.wb-share { margin-bottom: 2em; }
.wb-share .wb-social { flex-direction: row; justify-content: center; width: auto; }
.wb-share .wb-social__service { margin: 5px 0.5rem; }
@media (min-width: 768px) {
	.wb-share { position: sticky; top: 105px; align-self: start; width: 100px; display: flex; align-items: center; margin-bottom: 32px; }
	.wb-share .wb-social { flex-direction: column; width: 100px; }
	.wb-share .wb-social__service { margin: 5px; }
	.wb-share .wb-social__service + .wb-social__service { margin-top: 16px; }
}

/* Corps du billet : colonne de 746 px */
.wb-content { width: 750px; max-width: 100%; margin: 0 auto; padding-bottom: 4rem; }
.wb-main .wb-content .entry-content { margin: 0; padding: 0; width: auto; max-width: none; }
/* Paragraphes et listes : 1 em au-dessus et en dessous (HubSpot : 16 px en bureau, 14 px sur mobile), collés à la liste qui les précède */
.wb-main .wb-content .entry-content :is(p, ul, ol) { margin-top: 1em; margin-bottom: 1em; }
.wb-main .wb-content .entry-content :is(ul, ol) + p { margin-top: 0; }
/* Images : centrées dans la colonne (HubSpot les centre), 2,5 rem au-dessus et en dessous */
.wb-main .wb-content .entry-content figure.wp-block-image { margin: 2.5rem 0; text-align: center; }
.wb-main .wb-content .entry-content figure.wp-block-image img { margin-left: auto; margin-right: auto; }
.wb-main .wb-content .entry-content > :first-child { margin-top: 0; }
.wb-main .wb-content .entry-content > :last-child { margin-bottom: 0; }
/* Tour 3 (revue finale B) */
/* F13 : tableaux. Cellules sans bordure sauf celles qui en portent une en ligne (style="border:…") ; pas de trait épais sous l'en-tête ;
   le texte d'une cellule n'a pas de marge de paragraphe (HubSpot : lignes de 15 px, pas de 30 px) */
.wb-main .wb-content .entry-content .wp-block-table :is(td, th):not([style*="border"]) { border: 0; }
.wb-main .wb-content .entry-content .wp-block-table :is(thead, tfoot) { border: 0; }
.wb-main .wb-content .entry-content :is(td, th) :is(p, ul, ol) { margin-top: 0; margin-bottom: 0; }
.wb-main .wb-content .entry-content figure.wp-block-table { margin: 0 0 1em; }
/* Titre en tête d'article : marge haute de 33,6 px (HubSpot), sauf le titre qui prend l'apparence d'un h1 (marge 0 en ligne) */
.wb-main .wb-content .entry-content > h2:first-child:not(.wannup-as-h1) { margin-top: 33.6px; }
/* Boutons : texte souligné en ligne, mais d'un trait transparent (aucun effet visible) */
.wb-main .wb-btn { text-decoration: underline; text-decoration-color: transparent; }

/* Bloc auteur */
.wb-person { display: flex; flex-direction: column; padding: 64px 0 32px; position: relative; }
.wb-person__avatar { flex-shrink: 0; width: 116px; height: 116px; margin: 0 0 20px; }
.wb-person__avatar img { display: block; width: 100%; height: 100%; max-width: none; border-radius: 1000px; object-fit: cover; }
.wb-person__bio { font-size: 15px; line-height: 25.05px; text-align: left; }
.wb-main .wb-person__name {
	margin: 0;
	font: 700 18px/25.56px Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 0.27px;
	text-transform: uppercase;
	color: var(--wb-ink);
}
.wb-person__social { margin-top: 22.5px; }
.wb-person__social .wb-social__service { display: inline-flex; }
.wb-person__social { display: block; }
@media (min-width: 1024px) {
	.wb-person { flex-direction: row; padding: 64px 0; }
	.wb-person__avatar { margin: 0 40px 0 0; }
	.wb-main .wb-person__name { font-size: 21px; line-height: 29.82px; letter-spacing: 0.315px; }
}

/* Encadré d'appel à l'action */
.wb-cta-wrap { width: 90%; max-width: 950px; margin: 90px auto 0; }
.wb-cta { position: relative; padding: 60px 40px; }
.wb-cta__bg { position: absolute; inset: 0; border-radius: 10px; background: var(--wb-cream); }
.wb-cta__inner { position: relative; text-align: center; }
.wb-main .wb-cta h2 {
	margin: 0;
	font-family: "Francois One", Impact, sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.19;
	letter-spacing: 0.15px;
	text-transform: none;
	color: var(--wb-ink);
	text-decoration: underline;
	text-decoration-color: #fff;
	text-decoration-thickness: 0.7em;
	text-underline-offset: -0.45em;
	text-decoration-skip-ink: none;
}
.wb-cta__button { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 24px; }
@media (min-width: 768px) {
	.wb-cta { padding: 60px 90px; }
	.wb-cta__inner { display: flex; align-items: center; justify-content: space-between; text-align: left; }
	.wb-cta__text { max-width: 700px; padding-right: 1rem; }
	.wb-cta__button { flex-direction: row; flex-shrink: 0; justify-content: flex-end; margin-top: 0; margin-left: var(--wb-gutter); }
}
@media (min-width: 1024px) {
	.wb-main .wb-cta h2 { font-size: 40px; line-height: 48px; letter-spacing: 0.2px; }
}

/* Autres articles */
.wb-footer { padding: 90px 0; }
.wb-footer__container { width: 90%; max-width: 1200px; margin: 0 auto; }
.wb-related__heading { margin-bottom: 40px; padding-bottom: 32px; text-align: left; }
.wb-main .wb-related__title {
	margin: 0;
	font-family: "Francois One", Impact, sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
	letter-spacing: 0.3px;
	text-transform: none;
	color: var(--wb-ink);
}
.wb-main h3.wb-related__title { font-size: 25px; line-height: 30px; letter-spacing: 0.5px; }
.wb-main .wb-eyebrow { display: flex; align-items: center; margin: 0 0 8px; font-size: 12px; line-height: 20.004px; letter-spacing: 2.4px; text-transform: none; }
@media (min-width: 1024px) {
	.wb-main .wb-related__title { font-size: 40px; line-height: 48px; letter-spacing: 0.4px; }
	.wb-main h3.wb-related__title { font-size: 32px; line-height: 38.4px; letter-spacing: 0.64px; }
	.wb-main .wb-eyebrow { font-size: 15px; line-height: 24px; letter-spacing: 3px; }
}
.wb-related__item { position: relative; display: flex; flex-direction: column; margin: 64px 0 32px; }
.wb-related__image { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.wb-related__image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.4s ease; }
.wb-related__item:hover .wb-related__image img { transform: scale(1.1); }
.wb-related__info { margin: 0; padding: 32px 0 0; text-align: left; }
.wb-main .wb-related__info h3 {
	margin: 0;
	font: 700 20px/30px Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 0.2px;
	text-transform: none;
	color: var(--wb-ink);
}
.wb-main .wb-related__info h3 a {
	color: var(--wb-ink);
	background-image: linear-gradient(var(--wb-ink), var(--wb-ink));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 3px;
	transition: background-size 0.3s ease;
}
.wb-main .wb-related__info h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wb-related__item:hover h3 a,
.wb-related__item:focus-within h3 a { background-size: 100% 3px; }
@media (min-width: 768px) {
	.wb-related__posts { display: flex; flex-wrap: wrap; }
	.wb-related__item { width: calc(33.33% - 40px); margin: 0 0 32px; }
	.wb-related__item:not(:first-child):not(:nth-child(3n+1)) { margin-left: 60px; }
}
@media (min-width: 1024px) {
	.wb-main .wb-related__info h3 { font-size: 24px; line-height: 36px; letter-spacing: 0.24px; }
}

/* Auteur sans photo d'origine (nouvel article) : pastille aux initiales sous l'image (la photo WordPress, ou un pixel transparent, la recouvre) */
.wb-person__avatar { position: relative; }
.wb-person__initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 1000px; background: #7b77ac; color: #f6f3f1; font-weight: 700; font-size: 36px; letter-spacing: 0.04em; }
.wb-person__avatar .wb-person__initials + img { position: relative; }

/* Article sans image à la une : pas de moitié vide dans la liste */
.wb-card--noimage .wb-card__image { display: none; }
.wb-card--noimage .wb-card__body { flex: 1 1 100%; width: 100%; }