/*
Theme Name: Lebrief MA (Arabe)
Theme URI: https://ar.lebrief.ma
Author: Lebrief
Description: Thème Arabic RTL pour ar.lebrief.ma
Version: 1.0.1
Text Domain: lebriefma
Tags: rtl, arabic, news
*/
/* ar-website.css — UI kit styles, RTL */
/* Lebrief Arabe (ar.lebrief.ma) — Design tokens
* RTL by default. Pair with .
*/
:root {
/* ---------- COLORS ---------- */
--bg: #FFFFFF;
--bg-alt: #F7F7F7;
--bg-ad: #F0F0F0;
--bg-dossier: #2C2C2C;
--bg-inverse: #1A1A1A;
--fg: #1A1A1A;
--fg-muted: #666666;
--fg-faint: #999999;
--fg-on-dark: #FFFFFF;
--fg-on-dark-muted: #cccccc; /* secondary text on dark bg */
--fg-on-accent: #1A1A1A; /* text on --accent (yellow) */
--accent: #FFCB21;
--accent-spec: #F5A623;
--accent-hover: #E6B408;
--border: #E5E5E5;
--border-strong: #D1D1D1;
--border-inverse: #2a2a2a; /* dividers on dark backgrounds */
--footer-legal-bg: #0d0d0d;
--social-whatsapp: #25D366;
--social-facebook: #1877F2;
--social-x: #000000;
/* ---------- TYPE ---------- */
--font-display: "Cairo", "Tajawal", "Arabic Typesetting", system-ui, sans-serif;
--font-body: "Noto Naskh Arabic", "Cairo", "Traditional Arabic", serif;
--font-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fs-h1: 32px; --lh-h1: 1.25;
--fs-h2: 20px; --lh-h2: 1.35;
--fs-h3: 18px; --lh-h3: 1.4;
--fs-section: 22px; /* section/block headings */
--fs-body: 17px; --lh-body: 1.8;
--fs-md: 16px; /* sub-headings, drawer links */
--fs-sm: 14px; /* secondary UI text, excerpts */
--fs-meta: 13px; --lh-meta: 1.5;
--fs-tiny: 12px;
--fs-xs: 11px; /* badge counts, ad labels, category chips */
/* ---------- SPACING ---------- */
--container-max: 1300px;
--gutter: 24px;
--pad-container: 24px;
--pad-container-mobile: 16px;
--space-1: 4px;
--space-2: 8px;
--space-2b: 10px; /* between space-2 and space-3; used for list row gaps */
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* ---------- RADIUS ---------- */
--radius-card: 4px;
--radius-badge: 2px;
--radius-pill: 999px;
/* ---------- ELEVATION ---------- */
--shadow-1: 0 1px 2px rgba(0,0,0,.04);
--shadow-2: 0 2px 6px rgba(0,0,0,.08);
--shadow-hover: 0 4px 14px rgba(0,0,0,.12);
/* ---------- TRANSITION ---------- */
--t-fast: 120ms ease-out;
--t-base: 200ms ease-out;
/* ---------- LAYOUT ---------- */
--header-h: 96px;
--subnav-h: 40px;
}
@media (max-width: 767px) {
:root {
--fs-h1: 24px;
--fs-h2: 18px;
--fs-h3: 16px;
--fs-body: 16px;
--pad-container: var(--pad-container-mobile);
--header-h: 64px;
}
}
/* ============ RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html[dir="rtl"], [dir="rtl"] { text-align: right; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg);
background: var(--bg);
}
h1, .h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-h1);
color: var(--fg);
letter-spacing: -0.01em;
}
h2, .h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h2);
line-height: var(--lh-h2);
color: var(--fg);
}
h3, .h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
color: var(--fg);
}
p, .body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.meta {
font-family: var(--font-body);
font-size: var(--fs-meta);
line-height: var(--lh-meta);
color: var(--fg-muted);
}
.label-latin {
font-family: var(--font-latin);
font-size: var(--fs-meta);
text-transform: uppercase;
letter-spacing: 0.04em;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-hover); }
/* ============ PRIMITIVES ============ */
.lb-badge {
display: inline-block;
padding: 3px var(--space-2);
background: var(--accent);
color: var(--fg-on-accent);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-tiny);
border-radius: var(--radius-badge);
line-height: 1.4;
}
.lb-badge--dark {
background: var(--bg-inverse);
color: var(--fg-on-dark);
}
.lb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-2b) 20px;
background: var(--accent);
color: var(--fg-on-accent);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-sm);
border: none;
border-radius: var(--radius-card);
cursor: pointer;
transition: background var(--t-fast);
}
.lb-btn:hover { background: var(--accent-hover); }
.lb-card {
background: var(--bg);
border-radius: var(--radius-card);
overflow: hidden;
}
.lb-divider {
height: 1px;
background: var(--border);
border: 0;
}
.lb-container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--pad-container);
}
/* Les emplacements publicitaires sont définis dans la section AD, plus bas. */
/* ============ HEADER ============ */
.lb-header { position: sticky; top: 0; z-index: 50; background: var(--bg); }
/* Topbar (black) */
.lb-topbar { background: var(--bg-inverse); color: var(--fg-on-dark-muted); font-size: var(--fs-tiny); }
.lb-topbar__inner { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--pad-container); gap: var(--space-3); }
.lb-topbar__links { display: none; }
.lb-topbar__links li { list-style: none; }
.lb-topbar__count { background: var(--accent); color: var(--fg-on-accent); padding: 0 5px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; margin-right: var(--space-1); }
.lb-lang-switch { border: 1px solid var(--accent); color: var(--accent); padding: 1px var(--space-2); font-family: var(--font-latin); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .04em; }
/* Logo */
.lb-logo { display: inline-flex; align-items: center; text-decoration: none; margin-top: 5px; margin-bottom: 5px; }
.lb-logo img { display: block; height: 65px; width: auto; }
@media (min-width: 768px) { .lb-logo { margin-top: 8px; margin-bottom: 8px; } }
/* Icon buttons */
.lb-iconbtn { background: transparent; border: 0; padding: 6px; cursor: pointer; color: var(--fg); display: flex; align-items: center; justify-content: center; }
.lb-iconbtn--inverse { color: var(--fg-on-dark); }
.lb-iconbtn:hover { color: var(--accent); }
.lb-hamburger { display: flex; }
.lb-search-mobile { display: flex; }
/* Desktop nav row — hidden on mobile */
.lb-nav { display: none; }
.lb-nav__cats, .lb-nav__cats li { list-style: none; margin: 0; padding: 0; }
/* Mobile drawer */
.lb-drawer { position: fixed; top: 50px; right: 0; left: 0; bottom: 0; background: var(--bg-inverse); color: var(--fg-on-dark); z-index: 100; overflow-y: auto; }
.lb-drawer__scroll { padding: var(--space-4); padding-top: var(--space-8); position: relative; }
.lb-drawer__close { position: absolute; top: var(--space-4); left: var(--space-4); color: var(--fg-on-dark); background: var(--bg-inverse); border: 1px solid var(--border-inverse); border-radius: var(--radius-pill); }
.lb-drawer__close:hover { color: var(--accent); }
.lb-drawer__section { margin-bottom: var(--space-5); }
.lb-drawer__heading { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-tiny); letter-spacing: .08em; color: var(--accent); text-transform: uppercase; margin: 0 0 var(--space-2); }
.lb-drawer__list { list-style: none; padding: 0; margin: 0; }
.lb-drawer__list li { border-bottom: 1px solid var(--border-inverse); }
.lb-drawer__list a { display: block; padding: 14px var(--space-1); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--fg-on-dark); }
.lb-drawer__list a.is-active { color: var(--accent); }
.lb-drawer__lang { display: inline-block; margin-top: var(--space-2); color: var(--accent); font-family: var(--font-latin); font-size: var(--fs-sm); padding: var(--space-2b) 0; }
/* Search overlay */
.lb-search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 110; display: none; align-items: flex-start; padding-top: 120px; }
.lb-search-overlay.is-open { display: flex; }
.lb-search-input { width: 100%; padding: 18px 20px; border: 0; background: var(--bg); font-size: var(--fs-h3); font-family: var(--font-body); border-radius: var(--radius-card); }
/* Desktop (≥768px) */
@media (min-width: 768px) {
.lb-hamburger { display: none; }
.lb-search-mobile { display: none; }
.lb-drawer { display: none; }
.lb-topbar__inner { padding-top: 6px; padding-bottom: 6px; }
.lb-topbar__links { display: flex; gap: var(--space-4); align-items: center; }
.lb-topbar__links a { color: var(--fg-on-dark-muted); }
.lb-topbar__links a:hover { color: var(--accent); }
.lb-nav { display: block; background: var(--bg); border-bottom: 1px solid var(--border); }
.lb-nav__inner { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-2); padding-bottom: var(--space-2); gap: var(--space-3); }
.lb-nav__cats { display: flex; gap: 18px; overflow-x: auto; flex: 1; list-style: none; padding: 0; margin: 0; }
.lb-nav__cats li { list-style: none; }
.lb-nav__item { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-meta); color: var(--fg); padding: var(--space-1) 2px; white-space: nowrap; text-decoration: none; }
.lb-nav__item.is-active { border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.lb-nav__item:hover { color: var(--accent-hover); }
.lb-nav__utility { display: flex; gap: var(--space-4); align-items: center; }
.lb-nav__utility ul { display: flex; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.lb-nav__utility li { list-style: none; }
.lb-nav__utility a { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-meta); color: var(--fg); text-decoration: none; white-space: nowrap; }
.lb-nav__utility a:hover { color: var(--accent-hover); }
}
/* ============ PAGE LAYOUT ============ */
#page-wrap { margin-top: 15px; }
.lb-page { padding: 0 0 var(--space-7); background: var(--bg); }
.lb-leaderboard { margin: 0 0 var(--space-4); display: flex; justify-content: center; }
/* ============ HOME HERO ============ */
.lb-hp-hero { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gutter); align-items: start; margin-bottom: var(--gutter); }
.lb-hp-hero__side { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); }
.lb-hp-hero3 {
display: grid;
grid-template-columns: 1fr;
gap: var(--gutter);
margin-bottom: var(--gutter);
}
.lb-hp-hero3__big { display: flex; flex-direction: column; min-width: 0; }
.lb-hp-hero3__big .lb-card { display: flex; flex-direction: column; }
.lb-hp-hero3__big .lb-card__thumb { aspect-ratio: 16/10; }
.lb-hp-hero3__big .lb-card__title { font-size: var(--fs-md); line-height: 1.3; }
.lb-hp-hero3__pair { display: grid; grid-template-rows: auto auto; gap: 18px; }
.lb-hp-hero3__pair .lb-card { display: grid; grid-template-rows: 1fr auto; }
.lb-hp-hero3__pair .lb-card__thumb { aspect-ratio: 16/10; }
.lb-hp-hero3__pair .lb-card__title { font-size: var(--fs-md); line-height: 1.3; }
.lb-hp-hero3__pair .lb-card__body { padding: var(--space-2); }
.lb-hp-hero3__side { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px; }
.lb-hp-hero3__side .lb-side-list { overflow: hidden; }
.lb-hp-hero3__side .lb-side-list li { padding: 6px 0; font-size: var(--fs-meta); }
/* Mobile-only ad inside hero grid */
.lb-hp-hero3__mobile-ad { display: flex; justify-content: center; }
@media (min-width: 768px) {
.lb-hp-hero3__mobile-ad { display: none; }
}
@media (min-width: 768px) {
.lb-hp-hero3 {
grid-template-columns: 1fr 2.2fr 1fr;
align-items: stretch;
}
.lb-hp-hero3__big { grid-column: 2; min-height: 0; }
.lb-hp-hero3__pair { grid-column: 1; grid-row: 1; min-height: 0; }
.lb-hp-hero3__side { grid-column: 3; grid-row: 1; min-height: 0; overflow: hidden; }
.lb-hp-hero3__big .lb-card { height: 100%; }
.lb-hp-hero3__big .lb-card__thumb { flex: 1 1 auto; aspect-ratio: 16/10; min-height: 0; }
.lb-hp-hero3__big .lb-card__title { font-size: 22px; }
.lb-hp-hero3__pair .lb-card { height: 100%; min-height: 0; }
.lb-hp-hero3__pair .lb-card__thumb { height: 100%; min-height: 0; }
.lb-hp-hero3__pair .lb-card__title { font-size: var(--fs-sm); }
.lb-hp-hero3__side .lb-side-list { flex: 1 1 auto; min-height: 0; }
}
.lb-hp-hero3__main { display: none; }
.lb-side-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); margin: 0 0 var(--space-3); padding: 0 0 var(--space-2); border-bottom: 2px solid var(--accent); display: inline-block; }
.lb-side-list { list-style: none; padding: 0; margin: 0; }
.lb-side-list li { display: flex; gap: var(--space-2b); padding: var(--space-2b) 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.lb-side-list li:last-child { border: 0; }
.lb-side-time { font-family: var(--font-latin); font-weight: 700; font-size: var(--fs-tiny); color: var(--accent-hover); flex-shrink: 0; }
.lb-side-list a { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5; color: var(--fg); }
.lb-side-list a:hover { color: var(--accent-hover); }
.lb-side-more { display: inline-block; margin-top: var(--space-3); background: var(--bg-inverse); color: var(--fg-on-dark); padding: var(--space-2) var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-meta); border-radius: var(--radius-card); }
/* ============ ARTICLE CARDS ============ */
.lb-card { display: block; text-decoration: none; color: inherit; transition: transform var(--t-base); }
.lb-card__thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; border-radius: var(--radius-card); }
/* Image d'illustration en balise ![]()
: remplit son conteneur comme un background cover */
.lb-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-badge--cat { position: absolute; top: 10px; right: 10px; background: var(--accent); color: var(--fg-on-accent); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-tiny); padding: 3px var(--space-2); border-radius: var(--radius-badge); }
.lb-card__body { padding: var(--space-3) 14px var(--space-4); }
.lb-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.4; margin: 0 0 var(--space-2); color: var(--fg); }
.lb-card__excerpt { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0 0 var(--space-2); line-height: 1.6; }
.lb-card__meta { font-size: var(--fs-tiny); color: var(--fg-muted); }
.lb-card:hover .lb-card__title { color: var(--accent-hover); }
.lb-card--hero .lb-card__title { font-size: 26px; line-height: 1.3; }
.lb-card--hero .lb-card__thumb { aspect-ratio: 16/10; }
.lb-card--grid { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.lb-card--mini { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.lb-card--mini .lb-card__thumb-sm { aspect-ratio: 4/3; border-radius: var(--radius-card); }
.lb-card--mini:last-child { border: 0; }
.lb-card__thumb-sm { aspect-ratio: 16/9; position: relative; overflow: hidden; border-radius: var(--radius-card); }
.lb-card__body-sm { padding: 0; }
.lb-card__title-sm { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); line-height: 1.4; margin: var(--space-1) 0 0; color: var(--fg); }
.lb-card__excerpt-sm { font-size: var(--fs-meta); color: var(--fg-muted); margin: var(--space-1) 0 0; line-height: 1.5; }
.lb-cat-line { font-family: var(--font-latin); font-size: var(--fs-xs); font-weight: 700; color: var(--accent-hover); letter-spacing: .04em; }
.lb-card--list { display: grid; grid-template-columns: 60px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.lb-time { font-family: var(--font-latin); font-weight: 700; font-size: var(--fs-meta); color: var(--accent-hover); }
/* ============ CATEGORY BLOCK ============ */
.lb-cat-block { margin: var(--space-6) 0; padding-top: var(--space-5); border-top: 2px solid var(--fg); }
.lb-cat-block__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-4); }
.lb-cat-block__title { font-family: var(--font-display); font-weight: 800; font-size: 24px; margin: 0; }
.lb-cat-block__more { font-size: var(--fs-meta); color: var(--fg-muted); }
.lb-cat-block__grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gutter); align-items: start; }
.lb-cat-block__list { display: flex; flex-direction: column; }
/* ============ DOSSIER BAND ============ */
.lb-dossier-block { background: var(--bg-dossier); color: var(--fg-on-dark); padding: var(--space-6) 0 var(--space-5); margin: var(--space-6) 0; }
.lb-dossier-block__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.lb-dossier-block__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-section); margin: 0; color: var(--accent); }
.lb-dossier-block__more { color: var(--fg-on-dark-muted); font-size: var(--fs-meta); }
.lb-dossier-block__more:hover { color: var(--accent); }
.lb-dossier-block__row {
display: flex;
gap: var(--space-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--space-3);
scrollbar-width: thin;
scrollbar-color: var(--accent) rgba(255,255,255,.12);
}
.lb-dossier-block__row::-webkit-scrollbar { height: 4px; }
.lb-dossier-block__row::-webkit-scrollbar-track { background: rgba(255,255,255,.12); border-radius: var(--radius-badge); }
.lb-dossier-block__row::-webkit-scrollbar-thumb { background: var(--accent); border-radius: var(--radius-badge); }
.lb-dossier-card {
position: relative;
flex: 0 0 calc(25% - 12px);
aspect-ratio: 7/10;
border-radius: var(--radius-card);
overflow: hidden;
display: block;
text-decoration: none;
scroll-snap-align: start;
}
@media (max-width: 767px) {
.lb-dossier-card { flex: 0 0 72vw; }
}
.lb-dossier-card__img { position: absolute; inset: 0; overflow: hidden; transition: transform 300ms ease; }
.lb-dossier-card:hover .lb-dossier-card__img { transform: scale(1.03); }
.lb-dossier-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 20%); }
/* ============ NEWSLETTER ============ */
.lb-newsletter { background: var(--accent); padding: 18px 20px; border-radius: var(--radius-card); margin: var(--space-6) 0; display: flex; flex-direction: column; gap: 14px; }
.lb-newsletter__copy-wrap { flex: 1; }
.lb-newsletter__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); margin: 0 0 var(--space-1); color: var(--fg-on-accent); }
.lb-newsletter__copy { font-size: var(--fs-tiny); color: var(--fg); margin: 0; }
.lb-newsletter__form { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; min-width: 0; }
.lb-newsletter__field { display: flex; background: var(--bg); border-radius: var(--radius-card); padding: 2px; gap: 2px; }
.lb-newsletter__field input { flex: 1; border: 0; padding: var(--space-2b) var(--space-4); outline: 0; font-family: var(--font-body); background: transparent; text-align: right; border-radius: var(--radius-card); min-width: 100px; }
.lb-newsletter__field button { background: var(--bg-inverse); color: var(--fg-on-dark); border: 0; padding: var(--space-2b) 20px; border-radius: var(--radius-card); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-meta); cursor: pointer; flex-shrink: 0; }
.lb-newsletter__consent { display: flex; align-items: flex-start; gap: 8px; }
.lb-newsletter__consent input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; accent-color: var(--bg-inverse); }
.lb-newsletter__consent label { font-size: var(--fs-tiny); color: var(--fg-on-accent); line-height: 1.4; }
.lb-newsletter__consent label a { color: var(--fg-on-accent); text-decoration: underline; }
@media (min-width: 768px) {
.lb-newsletter { flex-direction: row; align-items: center; }
.lb-newsletter__form { flex-basis: 360px; }
}
/* ============ AD ============ */
/* Emplacements publicitaires.
Aucune hauteur ni display imposés sur le slot : GPT le dimensionne selon la
création servie et le replie lui-même s'il est invendu (collapseEmptyDivs).
Une règle display ou min-height ici s'opposerait au display:none inline qu'il
pose, et laisserait un trou blanc.
Contrepartie assumée : sans réservation d'espace, la page se décale quand la
publicité arrive.
Le centrage combine deux règles, jamais flex : text-align couvre l'iframe
d'une création classique (élément en ligne), margin auto couvre un conteneur
en bloc — GPT rend l'un ou l'autre selon le type de création. */
.lb-ad-wrap { max-width: 100%; }
.lb-ad { max-width: 100%; text-align: center; }
.lb-ad > div,
.lb-ad > iframe { margin-inline: auto; }
/* Espacement sous un emplacement.
Posé sur le slot et non sur l'enveloppe : le display:none de GPT emporte
alors la marge avec lui, et un emplacement invendu ne laisse aucun blanc.
Pas de marge en colonne latérale, où l'espacement vient du gap de la pile. */
.lb-ad { margin-block: 0 20px; }
.lb-ad-wrap--sidebar .lb-ad { margin-block: 0; }
/* Colonne latérale — centrée, et suit la lecture sur desktop.
.lb-article-sidebar est un conteneur flex en colonne : sans align-self,
l'emplacement s'étire sur toute la largeur de la colonne. « center » le
ramène à sa largeur propre tout en le centrant — indispensable aussi au
sticky, qui n'aurait aucune course sur un élément étiré. */
.lb-ad-wrap--sidebar { align-self: center; }
/* Seuil calé sur celui de .lb-article-layout (max-width: 900px, section
RESPONSIVE) : au-delà, la colonne latérale existe vraiment et l'emplacement
peut suivre la lecture. En deçà, elle est empilée sous l'article et un sticky
ferait suivre la publicité sur toute la fin de page.
.lb-article-layout porte align-items: start, donc la colonne s'arrête après
son contenu et un sticky n'y aurait aucune course : on l'étire à la hauteur
de l'article, et c'est l'emplacement qui défile à l'intérieur. */
@media (min-width: 901px) {
.lb-article-layout > .lb-article-sidebar { align-self: stretch; }
.lb-ad-wrap--sidebar {
position: sticky;
top: calc(var(--header-h) + var(--space-3));
}
}
/* Player vidéo outstream Brid.tv (régie distincte de Google Ad Manager).
Les deux règles ci-dessous viennent du tag fourni par la régie : elles
dégagent le bas de l'écran sous 1100px, où le player passe en mode collant. */
@media (max-width: 1100px) {
.brid-sticky { margin-bottom: 160px !important; }
.brid-close { margin-bottom: 200px !important; }
}
/* Bloc gris de réserve, affiché tant que AD_NETWORK_ROOT vaut sa valeur par
défaut : GPT n'intervient pas, une hauteur peut donc être fixée sans risque. */
.lb-ad--placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 90px;
background: var(--bg-ad);
color: var(--fg-faint);
font-size: var(--fs-xs);
letter-spacing: .1em;
}
.lb-ad--placeholder::before { content: "إعلان"; }
/* Le corps d'article est dans [data-reader-scope] : sans cette règle, le
sélecteur de taille de police agrandirait aussi le libellé de l'emplacement. */
.lb-article__content .lb-ad-wrap,
.lb-dossier__content .lb-ad-wrap { font-size: var(--fs-xs); line-height: normal; }
/* ============ 404 ============ */
.lb-404 { text-align: center; padding: var(--space-8) 0 var(--space-7); max-width: 560px; margin: 0 auto; }
.lb-404__code {
display: block;
font-family: var(--font-display);
font-weight: 900;
font-size: 120px;
line-height: 1;
color: var(--accent);
-webkit-text-stroke: 2px var(--fg);
}
.lb-404__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); margin: var(--space-3) 0 var(--space-3); }
.lb-404__text { color: var(--fg-muted); font-size: var(--fs-body); margin: 0 0 var(--space-6); }
.lb-404__search { max-width: 420px; margin: 0 auto var(--space-5); background: var(--bg-alt); border-radius: var(--radius-card); }
.lb-404__home { text-decoration: none; }
.lb-404__suggestions { border-top: 1px solid var(--border); padding-top: var(--space-6); margin-bottom: var(--space-6); }
@media (max-width: 767px) {
.lb-404 { padding: var(--space-6) 0 var(--space-5); }
.lb-404__code { font-size: 80px; }
}
/* ============ CATEGORY PAGE ============ */
.lb-cat-header { padding: var(--space-5) 0; border-bottom: 2px solid var(--fg); margin-bottom: var(--space-5); }
.lb-cat-header__title { font-family: var(--font-display); font-weight: 900; font-size: 36px; margin: 0; }
.lb-cat-header__sub { color: var(--fg-muted); font-size: var(--fs-sm); margin: var(--space-2) 0 0; }
.lb-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-bottom: var(--space-6); }
.lb-author-header { display: flex; align-items: center; gap: var(--space-4); }
.lb-author-header__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lb-author-header__info { min-width: 0; }
.lb-author-header .lb-cat-header__title { font-size: var(--fs-h2); margin-bottom: var(--space-1); }
.lb-author-header__bio { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.7; margin: var(--space-2) 0 0; }
.lb-pagination { display: flex; gap: var(--space-2); justify-content: center; padding: var(--space-5) 0; }
.lb-page-btn { background: var(--bg); border: 1px solid var(--border); padding: var(--space-2) 14px; font-family: var(--font-latin); font-size: var(--fs-meta); font-weight: 700; cursor: pointer; }
.lb-page-btn--active { background: var(--accent); border-color: var(--accent); }
/* ============ ARTICLE PAGE ============ */
.lb-breadcrumb { display: flex; gap: var(--space-2); font-size: var(--fs-tiny); color: var(--fg-muted); padding: var(--space-4) 0; }
.lb-breadcrumb a { color: var(--fg-muted); }
.lb-breadcrumb a:hover { color: var(--accent-hover); }
.lb-article-layout { display: grid; grid-template-columns: 56px 1fr 320px; gap: var(--gutter); align-items: start; }
/* Pages simples : pas de rail de partage ni de sidebar, article pleine largeur */
.lb-static-page .lb-article-layout { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
/* Un item de grille a min-width:auto par defaut : il refuse de passer sous la
largeur de son contenu. Sans ca, un contenu large (tableau, ) elargit la
colonne au lieu de defiler dans son propre conteneur. */
.lb-article-layout > * { min-width: 0; }
.lb-article-rail { position: sticky; top: 200px; }
.lb-share { display: flex; flex-direction: column; gap: var(--space-2); }
.lb-share__btn { width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-card); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Le bouton de partage natif est un