:root {
	--mot-ink: #18202a;
	--mot-muted: #66717e;
	--mot-blue: #125f8f;
	--mot-blue-bright: #2b91bd;
	--mot-aura-blue: rgba(43, 145, 189, .2);
	--mot-aura-cyan: rgba(87, 199, 211, .2);
	--mot-aura-coral: rgba(242, 139, 112, .14);
	--mot-aura-gold: rgba(240, 190, 91, .12);
	--mot-paper: #f2f5f7;
	--mot-surface: #ffffff;
	--mot-line: rgba(24, 32, 42, .11);
}

body {
	position: relative;
	isolation: isolate;
	color: var(--mot-ink);
	background:
		radial-gradient(circle at 15% 0, rgba(68, 148, 169, .12), transparent 32rem),
		var(--mot-paper);
}

/*
 * Ces halos évoquent des idées qui circulent et se rencontrent. Leur mouvement
 * reste lent et hors du plan de lecture afin de donner du relief sans distraire.
 */
body::before,
body::after {
	position: fixed;
	z-index: -1;
	content: "";
	pointer-events: none;
	will-change: transform;
}

body::before {
	top: -34rem;
	right: -28rem;
	width: clamp(52rem, 82vw, 76rem);
	aspect-ratio: 1;
	background:
		radial-gradient(ellipse at 28% 70%, var(--mot-aura-blue) 0 12%, transparent 42%),
		radial-gradient(ellipse at 65% 28%, var(--mot-aura-coral) 0 10%, transparent 40%),
		conic-gradient(from 198deg at 52% 48%, transparent 0 15%, var(--mot-aura-cyan) 24%, transparent 35% 48%, var(--mot-aura-gold) 59%, transparent 72% 100%);
	border-radius: 43% 57% 61% 39% / 54% 43% 57% 46%;
	-webkit-mask-image: radial-gradient(circle, #000 0 44%, rgba(0, 0, 0, .72) 58%, transparent 76%);
	mask-image: radial-gradient(circle, #000 0 44%, rgba(0, 0, 0, .72) 58%, transparent 76%);
	animation: mot-aura-drift 30s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}

body::after {
	bottom: -28rem;
	left: -23rem;
	width: clamp(44rem, 68vw, 64rem);
	aspect-ratio: 1;
	background:
		radial-gradient(ellipse at 64% 34%, var(--mot-aura-blue) 0 9%, transparent 38%),
		conic-gradient(from 24deg at 48% 54%, transparent 0 26%, var(--mot-aura-coral) 36%, transparent 48% 66%, var(--mot-aura-cyan) 75%, transparent 88% 100%);
	border-radius: 62% 38% 46% 54% / 40% 55% 45% 60%;
	-webkit-mask-image: radial-gradient(circle, #000 0 38%, rgba(0, 0, 0, .68) 55%, transparent 74%);
	mask-image: radial-gradient(circle, #000 0 38%, rgba(0, 0, 0, .68) 55%, transparent 74%);
	animation: mot-aura-drift-secondary 36s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}

@keyframes mot-aura-drift {
	0% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.96); }
	52% { transform: translate3d(-5vw, 4vh, 0) rotate(9deg) scale(1.04); }
	100% { transform: translate3d(-2vw, 9vh, 0) rotate(18deg) scale(.99); }
}

@keyframes mot-aura-drift-secondary {
	0% { transform: translate3d(0, 0, 0) rotate(6deg) scale(.98); }
	55% { transform: translate3d(6vw, -5vh, 0) rotate(-9deg) scale(1.05); }
	100% { transform: translate3d(2vw, -10vh, 0) rotate(-17deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after {
		animation: none;
		will-change: auto;
	}
}

body > .container {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	padding-inline: clamp(14px, 3vw, 34px) !important;
}

a { color: var(--mot-blue); }
a:hover { color: #0a466c; }

.editorial-home {
	padding-top: 14px;
}

.home-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
	gap: clamp(28px, 6vw, 78px);
	align-items: center;
	min-height: 460px;
	margin: 10px 0 44px;
	padding: clamp(34px, 6vw, 78px);
	overflow: hidden;
	color: #f7fbfd;
	background: radial-gradient(circle at 86% 18%, rgba(52, 168, 208, .3), transparent 25rem), linear-gradient(135deg, #121a24, #172d3b 65%, #123c51);
	border-radius: 30px;
	box-shadow: 0 30px 80px rgba(17, 30, 42, .18);
}

.home-hero h1 {
	max-width: 780px;
	margin: 8px 0 20px;
	color: #f7fbfd !important;
	font-size: clamp(42px, 6vw, 78px);
	font-weight: 760;
	line-height: .98;
	letter-spacing: -.045em;
}

.home-hero-copy > p:not(.section-kicker) {
	max-width: 660px;
	margin-bottom: 28px;
	color: rgba(247, 251, 253, .76);
	font-size: clamp(17px, 2vw, 21px);
	line-height: 1.55;
}

.section-kicker {
	margin: 0 0 7px;
	color: var(--mot-blue-bright);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.home-hero .section-kicker { color: #76cae9; }

.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-hero-actions .btn { padding: 13px 22px; border-radius: 12px; font-weight: 700; }
.home-hero-actions .btn-primary { background: #f7fbfd; border-color: #f7fbfd; color: #152735; }
.home-hero-actions .btn-outline-dark { border-color: rgba(255,255,255,.4); color: white; }

.home-hero-mark {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 12px;
	align-items: center;
	justify-content: center;
}

.home-hero-mark img {
	grid-column: 1 / -1;
	width: min(220px, 70%);
	margin: 0 auto 20px;
	filter: drop-shadow(0 24px 25px rgba(0,0,0,.34));
}

.home-hero-mark span {
	padding: 7px 11px;
	color: rgba(255,255,255,.72);
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}

.section-heading {
	display: flex;
	gap: 24px;
	align-items: end;
	justify-content: space-between;
	margin-bottom: 22px;
}

.section-heading h2,
.related-articles > h2 {
	margin: 0;
	font-size: clamp(28px, 4vw, 43px);
	font-weight: 740;
	letter-spacing: -.03em;
}

.section-heading p:not(.section-kicker) { max-width: 720px; margin: 8px 0 0; color: var(--mot-muted); }
.section-link { flex: 0 0 auto; padding-bottom: 5px; font-weight: 750; }

.editorial-books {
	margin: 0 0 58px;
}

.editorial-book-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.editorial-book {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	min-height: 210px;
	padding: 20px;
	color: var(--mot-ink);
	background: var(--mot-surface);
	border-top: 3px solid var(--book-accent);
	border-radius: 18px;
	box-shadow: 0 16px 45px rgba(25, 35, 45, .07);
	transition: transform .2s ease, box-shadow .2s ease;
}

.editorial-book:hover { color: var(--mot-ink); text-decoration: none; transform: translateY(-4px); box-shadow: 0 22px 55px rgba(25,35,45,.12); }
.editorial-book-cover img { display: block; width: 100%; border-radius: 4px; box-shadow: 0 14px 24px rgba(16,25,35,.24); }
.editorial-book-copy { display: flex; min-width: 0; flex-direction: column; }
.editorial-book-copy strong { font-size: 18px; line-height: 1.17; }
.editorial-book-copy small { margin: 9px 0 12px; color: var(--mot-muted); line-height: 1.4; }
.editorial-book-copy em { color: var(--book-accent); font-size: 13px; font-style: normal; font-weight: 800; }

.home-articles { scroll-margin-top: 110px; }
.home-sidebar { padding-left: 24px; }
.sidebar-library {
	position: sticky;
	top: 110px;
	margin-bottom: 24px;
	padding: 28px;
	color: #edf6fa;
	background: linear-gradient(145deg, #18232d, #183c50);
	border-radius: 20px;
	box-shadow: 0 18px 45px rgba(22,33,43,.13);
}
.sidebar-library img { width: 62px; margin-bottom: 22px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
.sidebar-library h2 { margin: 0 0 13px; font-size: 27px; line-height: 1.08; }
.sidebar-library p:not(.section-kicker) { color: rgba(237,246,250,.7); line-height: 1.55; }
.sidebar-library a { color: #75cbea; font-weight: 750; }

.editorial-home .adsbygoogle,
.article_details .adsbygoogle {
	min-height: 90px !important;
	max-height: 180px !important;
	overflow: hidden;
}

.editorial-home div:has(> .adsbygoogle),
.article_details div:has(> .adsbygoogle) {
	max-height: 180px;
	overflow: hidden;
}

.editorial-ad-slot {
	max-height: 180px;
	overflow: hidden;
}

.editorial-ad-frame {
	display: grid;
	grid-template-rows: minmax(0, 180px);
	max-height: 180px;
	overflow: hidden;
}

.editorial-ad-frame > .editorial-ad-slot {
	min-height: 0;
}

.editorial-home .adsbygoogle[data-ad-status="unfilled"],
.article_details .adsbygoogle[data-ad-status="unfilled"] {
	display: none !important;
}

.navbar {
	top: 12px;
	min-height: 70px;
	margin-top: 12px;
	padding: 10px 18px;
	border: 1px solid var(--mot-line);
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(25, 35, 45, .08) !important;
}

.navbar-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mot-ink) !important;
	font-weight: 700 !important;
}

.navbar-brand img {
	border-radius: 14px;
}

.nav-item a.nav-link {
	padding: 9px 13px !important;
	border-radius: 999px;
	color: var(--mot-muted) !important;
	font-size: 15px;
	font-weight: 650 !important;
}

.nav-item a.nav-link:hover {
	color: white !important;
	background: var(--mot-blue);
}

.search-form {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px !important;
	margin: 24px 0 30px !important;
	padding: 10px !important;
	border: 1px solid var(--mot-line);
	border-radius: 18px !important;
	box-shadow: 0 15px 45px rgba(27, 42, 54, .07) !important;
}

.search-form .form-control {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding-inline: 16px !important;
	border: 0 !important;
	background: #f7f8f9;
	border-radius: 12px !important;
}

.search-form .btn {
	min-height: 48px;
	padding-inline: 24px !important;
	background: var(--mot-ink) !important;
	border-radius: 12px !important;
	font-weight: 650;
}

.article-list-item {
	align-items: center;
	margin: 0 0 18px !important;
	padding: 18px;
	background: var(--mot-surface);
	border: 1px solid var(--mot-line) !important;
	border-radius: 20px;
	box-shadow: 0 12px 38px rgba(25, 35, 45, .055);
	transition: transform .2s ease, box-shadow .2s ease;
}

.article-list-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 48px rgba(25, 35, 45, .09);
}

.article-list-item .img-thumbnail {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	margin: 0 !important;
	padding: 0;
	border: 0;
	border-radius: 14px;
}

.article-list-item h4,
.article-list-item h2 {
	margin: 0 0 6px;
	color: var(--mot-ink);
	font-size: clamp(20px, 2.2vw, 29px);
	font-weight: 700;
	line-height: 1.16;
}

.article-list-item legend {
	color: var(--mot-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.article-list-item p {
	margin-bottom: 0;
	color: var(--mot-muted);
	font-size: 15px;
	line-height: 1.55;
}

.article_details {
	margin-top: 24px;
	padding: clamp(22px, 4vw, 52px) !important;
	background: var(--mot-surface);
	border: 1px solid var(--mot-line);
	border-radius: 24px;
	box-shadow: 0 18px 55px rgba(25, 35, 45, .065);
}

.article_details > h1 {
	margin-top: 0 !important;
	color: var(--mot-ink);
	font-size: clamp(34px, 5vw, 62px);
	font-weight: 720;
	line-height: 1.04;
	letter-spacing: -.035em;
}

.article-breadcrumb { display: flex; gap: 8px; margin-bottom: 18px; color: var(--mot-muted); font-size: 13px; font-weight: 700; }
.article-lead-image { width: 100%; max-height: 540px; margin: 20px 0 30px; object-fit: cover; border-radius: 18px; }
.article_details .editorial-books { margin: 52px 0; padding-top: 38px; border-top: 1px solid var(--mot-line); }
.article_details .editorial-book-grid { grid-template-columns: 1fr; }
.article_details .editorial-book { grid-template-columns: 84px minmax(0,1fr); min-height: 160px; }
.related-articles { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--mot-line); }
.related-articles > h2 { margin-bottom: 24px; }

.article_body {
	color: #343c45;
	font-size: 18px;
	line-height: 1.76;
}

.article_body h2,
.article_body h3 {
	margin-top: 1.5em;
	color: var(--mot-ink);
	font-weight: 700;
}

footer.border-top {
	padding: 26px !important;
	border: 1px solid var(--mot-line) !important;
	border-radius: 20px;
}

@media (max-width: 767px) {
	body::before { opacity: .82; animation-duration: 40s; }
	body::after { display: none; }
	.navbar { top: 6px; margin-top: 6px; border-radius: 14px; }
	.article-list-item { padding: 12px; }
	.article-list-item .col-md-9 { padding: 14px 4px 4px; }
	.article_details { border-radius: 18px; }
	.home-hero { grid-template-columns: 1fr; min-height: 0; padding: 32px 24px; border-radius: 22px; }
	.home-hero h1 { font-size: 43px; }
	.home-hero-mark { display: none; }
	.section-heading { align-items: start; flex-direction: column; }
	.editorial-book-grid { grid-template-columns: 1fr; }
	.editorial-book { grid-template-columns: 86px minmax(0, 1fr); min-height: 170px; padding: 16px; }
	.home-sidebar { padding-left: 15px; }
	.sidebar-library { position: static; }
	.pagination {
		flex-wrap: wrap;
		gap: 5px;
	}
	.pagination-lg .page-link {
		padding: 8px 12px;
		font-size: 16px;
		border-radius: 9px;
	}
	.editorial-home div:has(> .adsbygoogle),
	.article_details div:has(> .adsbygoogle),
	.editorial-ad-slot,
	.editorial-ad-frame { max-height: 150px; }
	.editorial-ad-frame { grid-template-rows: minmax(0, 150px); }
}

@media (max-width: 520px) {
	.search-form { grid-template-columns: minmax(0, 1fr); }
	.search-form .btn { width: 100%; }
}

@media (min-width: 768px) and (max-width: 1100px) {
	.home-hero { grid-template-columns: 1fr .45fr; }
	.editorial-book-grid { grid-template-columns: 1fr; }
}
