/* ============================================================
   LexJob — Section "Actualités" (page /blog → /avenuedudroit)
   Registre éditorial / presse juridique, sobre. Utilise les
   variables de main.css (couleur bordeaux #930022).
   ============================================================ */

/* Sélecteur composé (.container.blog), pas juste .blog : WordPress ajoute
   automatiquement la classe "blog" au <body> sur la page d'accueil du blog
   (body_class()) — un simple ".blog" appliquait donc aussi ce padding au
   <body> tout entier (44px en haut, 64px en bas), créant un espace blanc
   au-dessus du header et en dessous du footer. ".container.blog" ne cible
   que le vrai conteneur (<div class="container blog">), qui n'existe que
   dans templates/page-blog.php et tag.php. */
.container.blog { padding-top: 44px; padding-bottom: 64px; }

/* ── Palette d'étiquettes de rubrique (plate, pas de dégradé) ── */
.blog-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 5px 10px;
  position: absolute;
  top: 14px;
  left: 14px;
  pointer-events: none;
}
.blog-tag--sm { font-size: 10px; padding: 4px 8px; top: 10px; left: 10px; }
.blog-tag--maroon  { background: #930022; }
.blog-tag--ink     { background: #1f2937; }
.blog-tag--forest  { background: #1e5631; }
.blog-tag--mustard { background: #7a5b12; }
.blog-tag-text--maroon  { color: #930022; }
.blog-tag-text--ink     { color: #1f2937; }
.blog-tag-text--forest  { color: #1e5631; }
.blog-tag-text--mustard { color: #7a5b12; }

/* ── Lien "couverture" invisible : rend toute la vignette cliquable
   sans imbriquer de <a> (les étiquettes ci-dessous restent cliquables
   séparément car elles sont peintes après lui dans le DOM). ── */
.blog-cover { position: absolute; inset: 0; }

/* ── Étiquettes de matière, en haut à droite de la vignette ─── */
.blog-tags-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 72%;
}
.blog-tags-overlay--sm { top: 10px; right: 10px; }
.blog-tags-overlay__item {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: var(--tag-color, var(--color-primary));
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  transition: opacity .15s ease;
}
.blog-tags-overlay--sm .blog-tags-overlay__item { font-size: 9.5px; padding: 3px 8px; }
.blog-tags-overlay__item:hover,
.blog-tags-overlay__item.is-active {
  opacity: .82;
  color: #fff;
}

/* ── En-tête de rubrique, centré ────────────────────────────── */
.blog-masthead { max-width: 640px; margin: 0 auto 30px; text-align: center; }
.blog-masthead__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0;
}
.blog-masthead__rule {
  width: 36px;
  height: 2px;
  background: var(--color-primary);
  opacity: .7;
  margin: 14px auto;
}
.blog-masthead__subtitle {
  font-size: 15px;
  color: var(--color-text-light);
  margin: 0;
}

/* ── Étiquette de groupe au-dessus de chaque rangée de filtre ── */
.blog-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.blog-filter-label__hint { font-weight: 400; text-transform: none; letter-spacing: normal; }
.blog-filter-label + .blog-topics { margin-top: 0; }

/* ── Matières : pastilles colorées, toujours sur une seule ligne ── */
/* nowrap + overflow-x:auto plutôt qu'un retour à la ligne : avec 8
   matières, un wrap donnerait une 2e ligne de longueur imprévisible selon
   le nom le plus long affiché ; le défilement horizontal ne casse jamais
   la mise en page, y compris sur un écran plus étroit qu'un desktop. */
.blog-topics {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 36px;
}
.blog-topics__link {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tag-color, var(--color-primary));
  background: var(--tag-bg, transparent);
  white-space: nowrap;
  padding: 9px 20px;
  border-radius: 24px;
  transition: background .15s ease, color .15s ease;
}
.blog-topics__link:hover,
.blog-topics__link.is-active {
  background: var(--tag-color, var(--color-primary));
  color: #fff;
}
.blog-topics__link.is-active { font-weight: 700; }
.blog-topics__link.is-active svg { margin-left: 6px; vertical-align: -1px; }

/* ── À la une + colonne secondaire ──────────────────────────── */
.blog-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 28px;
  margin-bottom: 44px;
}
.blog-feature__image {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: #ececec;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.blog-feature__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-feature__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}
.blog-feature__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  pointer-events: none;
}
.blog-feature__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 6px;
}
.blog-cover:hover ~ .blog-feature__caption .blog-feature__title { text-decoration: underline; }
.blog-feature__meta { font-size: 12.5px; color: rgba(255,255,255,.82); margin: 0; }

/* .blog-top a une seule ligne de grille : par défaut (align-items:stretch),
   .blog-side est donc automatiquement étiré à la même hauteur que .blog-feature.
   flex:1 sur chaque item répartit ensuite cette hauteur en 2 parts égales,
   et l'image (flex:1) absorbe l'espace restant sous le titre/la date. */
.blog-side { display: flex; flex-direction: column; gap: 18px; }
.blog-side__item {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.blog-side__item:hover { border-color: #c4c4c4; }
/* Un seul article en colonne (2 articles au total sur le hub) : sans
   cette règle, flex:1 1 0 ci-dessus l'étire pour occuper toute la hauteur
   disponible (celle de l'article à la une), donnant une vignette bien
   plus grande que d'habitude. On le limite à la moitié de cette hauteur —
   la taille qu'il aurait s'il partageait la colonne avec un second
   article — le reste de la colonne restant simplement vide en dessous.
   Desktop uniquement (.blog-side est en colonne à partir de 861px) : en
   dessous, .blog-side passe en ligne (flex-direction:row) et "50%"
   prendrait alors la moitié de la LARGEUR au lieu de la hauteur — la
   spécificité de :only-child l'emporterait sinon sur la règle mobile
   .blog-side__item{flex:1 1 260px} malgré la media query, rétrécissant la
   vignette au lieu de la laisser pleine largeur comme avant. */
@media (min-width: 861px) {
  .blog-side__item:only-child { flex: 0 1 50%; }
}
.blog-side__image { position: relative; flex: 1 1 auto; min-height: 70px; overflow: hidden; background: #ececec; }
.blog-side__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-side__textlink { display: block; color: inherit; padding: 10px 14px 14px; }
.blog-side__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0 0 4px;
  /* 2 lignes maximum, puis "…" : un long titre ne réduit plus l'image de la
     carte à une fine bande (l'image prend toute la hauteur restante). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.blog-side__textlink:hover .blog-side__title { color: var(--color-primary); }
.blog-side__meta { font-size: 12px; color: var(--color-text-muted); margin: 0; }

/* ── Grille éditoriale ───────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px 24px;
  padding-top: 8px;
  margin-bottom: 40px;
}
/* Carte à part entière : bordure fine autour de tout l'article, l'image
   collée au cadre (pas de marge blanche autour d'elle, ses coins carrés
   sont recoupés en arrondi par le overflow:hidden du cadre), seul le texte
   en dessous (.blog-item__body) a du padding. Même principe que les cartes
   de la colonne à côté de l'article à la une (.blog-side__item) et du
   portfolio auteur (.author-grid). */
.blog-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.blog-item:hover { border-color: #c4c4c4; }
/* Même format que l'image d'un article (1200×630, cf. lexjob-blog-featured) :
   l'image apparaît entière, jamais recadrée en bandeau. */
.blog-item__image { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; background: #ececec; }
.blog-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* flex:1 + meta en margin-top:auto (plus bas) : la grille étire chaque
   carte à la hauteur de la plus grande de sa ligne (comportement par
   défaut de CSS Grid) — sans ceci, un titre court laissait la date/temps
   de lecture "flotter" juste sous le titre, plus haut que sur les cartes
   voisines à titre plus long. Toujours ancré en bas du cadre désormais,
   quelle que soit la longueur du titre. */
.blog-item__body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.blog-item__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
/* Catégorie en texte au-dessus du titre : uniquement pour la carte "à la
   une" et la colonne latérale, et uniquement sur mobile (voir @media 860px)
   — sur ordinateur elles gardent leur pastille sur l'image. */
.blog-mobile-eyebrow { display: none; }
.blog-item__textlink { display: block; color: inherit; }
.blog-item__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.32;
  color: #1a1a1a;
  margin: 0 0 6px;
}
.blog-item__textlink:hover .blog-item__title { color: var(--color-primary); }
.blog-item__excerpt { font-size: 13.5px; color: var(--color-text-light); line-height: 1.55; margin: 0 0 10px; }
.blog-item__meta { font-size: 12px; color: var(--color-text-muted); margin: 0; margin-top: auto; padding-top: 10px; }

/* ── État vide ───────────────────────────────────────────────── */
.blog-empty {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 44px 0;
  margin-bottom: 44px;
}
.blog-empty__title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; }
.blog-empty__text { font-size: 14px; color: var(--color-text-light); margin: 0; }

/* ── Newsletter : encart avec accent bordeaux, pas de bloc plein ── */
.blog-newsletter {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: #fbf3f5;
  border-left: 3px solid var(--color-primary);
  padding: 28px 32px;
}
.blog-newsletter__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.blog-newsletter__text { flex: 1 1 260px; }
.blog-newsletter__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin: 0 0 6px;
}
.blog-newsletter__title { font-size: 17px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.blog-newsletter__subtitle { font-size: 13.5px; color: var(--color-text-light); margin: 0; }
.blog-newsletter__notice { font-size: 13px; margin: 8px 0 0; font-weight: 600; }
.blog-newsletter__notice--success { color: #1e7b4b; }
.blog-newsletter__notice--error { color: var(--color-error); }
.blog-newsletter__form { display: flex; flex-direction: column; gap: 12px; flex: 1 1 320px; }
.blog-newsletter__form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.blog-newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.blog-newsletter__topics-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-light);
  margin: 0 0 8px;
}
.blog-newsletter__topics-hint { font-weight: 400; }
.blog-newsletter__topics-list { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-newsletter__topic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tag-color, var(--color-primary));
  background: var(--tag-bg, transparent);
  padding: 7px 14px;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.blog-newsletter__topic input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.blog-newsletter__topic:has(input:checked) { background: var(--tag-color, var(--color-primary)); color: #fff; }
.blog-newsletter__topic:has(input:disabled):not(:has(input:checked)) { opacity: .4; cursor: not-allowed; }

/* ── Sélecteur de thèmes newsletter en menu déroulant (single.php, page-blog.php) ── */
.blog-newsletter__topics-field { position: relative; }
.blog-newsletter__topics-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 11px 14px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius);
  background: #fff;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--color-text);
  text-align: left;
}
.blog-newsletter__topics-toggle svg { flex-shrink: 0; transition: transform .15s ease; color: var(--color-text-light); }
.blog-newsletter__topics-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.blog-newsletter__topics-panel {
  position: absolute;
  z-index: 20;
  /* Ouvre vers le bas. Sa hauteur max est recalculée en JS à chaque
     ouverture (initNewsletterTopics, assets/js/main.js) pour tenir dans
     l'espace restant jusqu'en bas de l'écran visible — jamais au-delà —
     avec défilement interne si les 8 thèmes ne rentrent pas tous. La
     valeur ci-dessous n'est qu'un filet de sécurité si le JS ne s'exécute
     pas encore au moment de l'ouverture. */
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: min(320px, 60vh);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.blog-newsletter__topic-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
  user-select: none;
}
.blog-newsletter__topic-check:hover { background: var(--color-bg-alt, #f7f7f9); }
.blog-newsletter__topic-check:has(input:disabled):not(:has(input:checked)) { opacity: .4; cursor: not-allowed; }
.blog-newsletter__topic-check:has(input:disabled):not(:has(input:checked)):hover { background: none; }
.blog-newsletter__topic-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.blog-newsletter__input {
  min-width: 240px;
  padding: 11px 14px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius);
  font-size: 13.5px;
  outline: none;
  background: #fff;
}
.blog-newsletter__input:focus { border-color: var(--color-primary); }
.blog-newsletter__submit {
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 11px 22px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.blog-newsletter__submit:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }

/* ── Pagination : réutilise .lexjob-pagination de main.css ──── */
.blog-pagination { display: flex; justify-content: center; margin: 8px 0 40px; }

/* ── Article (single.php) ───────────────────────────────────── */
.blog-article { max-width: 740px; padding-top: 36px; padding-bottom: 64px; }
.blog-article__header { margin-bottom: 26px; }
/* Texte saisi par les auteurs (titres, extraits, contenu) : un mot très
   long sans espace ne doit jamais faire déborder son cadre. */
.blog-article__title,
.blog-feature__title,
.blog-side__title,
.blog-item__title,
.blog-item__excerpt {
  overflow-wrap: break-word;
  word-break: break-word;
}
.blog-article__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0 0 14px;
}
.blog-article__meta { font-size: 13.5px; color: var(--color-text-muted); margin: 0 0 14px; }
.blog-article__header .blog-tags-overlay {
  position: static;
  justify-content: flex-start;
  max-width: none;
  margin-bottom: 14px;
}
.blog-article__image { margin: 0; background: #ececec; position: relative; }
.blog-article__image img { width: 100%; height: auto; display: block; }
/* Incrusté sur la photo (bas gauche) — uniquement sur la page de l'article,
   jamais sur les vignettes des listes/cartes avant d'avoir cliqué dessus. */
.blog-article__photo-credit {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 11.5px;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.45);
  padding: 3px 8px;
  border-radius: 3px;
  line-height: 1.4;
}

/* ── Icônes de partage (entre la photo et le contenu) ────────── */
.blog-share {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 24px 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
/* Registre "flat" : pas de contour ni de fond au repos, l'icône est déjà
   dans la couleur propre au réseau — un halo léger, dans cette même
   couleur, apparaît seulement au survol. */
.blog-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.blog-share__btn:hover { transform: translateY(-1px); }
.blog-share__btn--email,
.blog-share__btn--copy,
.blog-share__btn--pdf   { color: var(--color-primary); }
.blog-share__btn--whatsapp { color: #25d366; }
.blog-share__btn--linkedin { color: #0a66c2; }
.blog-share__btn--facebook { color: #1877f2; }
.blog-share__btn--x        { color: #000; }
.blog-share__btn--email:hover,
.blog-share__btn--copy:hover,
.blog-share__btn--pdf:hover   { background: #fbeef1; }
.blog-share__btn--whatsapp:hover { background: #e3f8ea; }
.blog-share__btn--linkedin:hover { background: #e3f1fc; }
.blog-share__btn--facebook:hover { background: #e6eefd; }
.blog-share__btn--x:hover        { background: #eee; }
.blog-share__feedback {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e7b4b;
  margin-left: 4px;
}
/* Boutons "Modifier"/"Supprimer" sur l'article — visibles uniquement par son
   propre auteur, poussés à droite de la rangée de partage. */
.blog-article__owner-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.blog-article__owner-stats { font-size: 12.5px; color: var(--color-text-muted); white-space: nowrap; }
@media (max-width: 560px) {
  .blog-share { flex-wrap: wrap; row-gap: 10px; }
  .blog-article__owner-actions { margin-left: 0; width: 100%; }
}
.blog-article__body {
  font-size: 17px;
  line-height: 1.75;
  color: #262626;
  /* Un mot très long sans espace (URL collée, texte sans espaces...) ne
     doit jamais faire déborder le contenu hors de son cadre. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.blog-article__body p { margin: 0 0 20px; }
.blog-article__body h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 700;
  margin: 36px 0 14px;
}
.blog-article__body h3 { font-size: 19px; font-weight: 700; margin: 28px 0 12px; }
.blog-article__body img { max-width: 100%; height: auto; margin: 8px 0; }
.blog-article__body a { color: var(--color-primary); text-decoration: underline; }
.blog-article__body blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: 18px;
  margin: 24px 0;
  font-style: italic;
  color: var(--color-text-light);
}
/* Listes : main.css remet à zéro marges, retraits et puces pour tout le
   site (ul { list-style: none; }) — on les rétablit dans le corps des
   articles pour que les listes saisies dans l'éditeur s'affichent. */
.blog-article__body ul,
.blog-article__body ol { margin: 0 0 20px; padding-left: 1.6em; }
.blog-article__body ul { list-style: disc; }
.blog-article__body ol { list-style: decimal; }
.blog-article__body li { margin-bottom: 8px; }
.blog-article__body li > ul,
.blog-article__body li > ol { margin: 8px 0 0; }
.blog-article__newsletter { margin-top: 48px; }

/* ── Mention légale (sous le contenu, avant les sources) ─────────── */
.blog-disclaimer {
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* ── Formulaire de publication (page-publier-article.php) ───── */
.blog-publish { max-width: 760px; padding-top: 36px; padding-bottom: 64px; }
.blog-publish__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.blog-publish__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.blog-publish__back { font-size: 13px; font-weight: 600; color: var(--color-text-light); }
.blog-publish__back:hover { color: var(--color-primary); }
.blog-publish__current-image {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--color-text-light);
}
.blog-publish__current-image img { width: 90px; height: 56px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; }
.blog-publish__denied {
  border: 1px solid var(--color-border);
  padding: 32px;
  text-align: center;
}
.blog-publish__denied p { margin: 0 0 16px; color: var(--color-text-light); }
.blog-publish__notice { font-size: 13.5px; font-weight: 600; margin: 0 0 18px; }
.blog-publish__notice--error { color: var(--color-error); }
.blog-publish__notice--success { color: #1e7b4b; }

/* Bandeau "Co-écriture" (page Publier un article) : filets fins haut/bas,
   pas de boîte grise — même vocabulaire éditorial que le reste de la Tribune. */
.blog-coauthor-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 0 0 24px; padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.blog-coauthor-bar__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.blog-coauthor-bar__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--color-primary);
}
.blog-coauthor-bar__line { font-size: 15px; font-weight: 400; color: #1a1a1a; }
.blog-coauthor-bar__line strong { font-weight: 700; }
.blog-coauthor-bar__meta { color: var(--color-text-light); font-size: 13.5px; }
.blog-publish__notice--warning {
  font-weight: 400; font-size: 14px; line-height: 1.5;
  background: #fffbeb; border: 1px solid #fcd34d; color: #78350f;
  border-radius: 10px; padding: 16px 20px;
}
.blog-publish__notice--warning p { margin: 0 0 10px; }
.blog-publish__notice--warning p:last-child { margin-bottom: 0; }
.blog-publish__legifrance-list { margin: 0 0 10px; padding-left: 20px; }
.blog-publish__legifrance-list li { margin-bottom: 4px; }
.blog-publish__legifrance-list a { color: #78350f; text-decoration: underline; }
.blog-publish__legifrance-status {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  background: #fef3c7; border-radius: 999px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.blog-publish__form { display: flex; flex-direction: column; gap: 22px; }
.blog-publish__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.blog-publish__field { display: flex; flex-direction: column; gap: 8px; }
.blog-publish__label { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.blog-publish__optional { font-weight: 400; color: var(--color-text-muted); text-transform: none; }
.blog-publish__input,
.blog-publish__textarea,
.blog-publish__select {
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.blog-publish__input:focus,
.blog-publish__textarea:focus,
.blog-publish__select:focus { border-color: var(--color-primary); }
.blog-publish__textarea { resize: vertical; }

/* ── Sélecteur de thèmes (pastilles à cocher) ──────────────────── */
.blog-publish__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-publish__tag-option { cursor: pointer; }
.blog-publish__tag-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.blog-publish__tag-option span {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tag-color, var(--color-primary));
  background: var(--tag-bg, transparent);
  border: 1px solid var(--tag-color, var(--color-border-dark));
  padding: 8px 16px;
  border-radius: 20px;
  transition: background .15s ease, color .15s ease;
}
.blog-publish__tag-option input:checked + span {
  background: var(--tag-color, var(--color-primary));
  color: #fff;
}
.blog-publish__tag-option input:focus-visible + span {
  outline: 2px solid var(--tag-color, var(--color-primary));
  outline-offset: 2px;
}
.blog-publish__tag-option input:disabled + span { opacity: .4; }
.blog-publish__tag-option:has(input:disabled) { cursor: not-allowed; }
/* Le champ natif est masqué visuellement (mais garde le focus clavier) —
   c'est le <label> ci-dessous, stylé en bouton, qui ouvre le sélecteur de
   fichier au clic. Impossible de styler joliment le bouton natif du champ
   file en CSS pur, d'où ce contournement classique. */
.blog-publish__file-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.blog-publish__file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.blog-publish__file-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 8px;
  transition: background .15s ease;
  white-space: nowrap;
}
.blog-publish__file-btn:hover { background: var(--color-primary-dark); }
.blog-publish__file:focus-visible + .blog-publish__file-btn { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.blog-publish__file-name { font-size: 13px; color: var(--color-text-muted); }
.blog-publish__hint { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }

/* ── Sources manuelles d'un article : un champ libre par ligne ─── */
#lexjob-sources-rows { display: flex; flex-direction: column; gap: 10px; }
.blog-source-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.blog-source-row__remove {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.blog-source-row__remove:hover { border-color: var(--color-primary); color: var(--color-primary); }
#lexjob-sources-add { align-self: flex-start; margin-top: 4px; }
.blog-publish__submit { align-self: flex-start; }
.blog-publish__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.blog-publish__schedule-current { font-size: 13px; color: var(--color-text-light); margin: -8px 0 0; }
.blog-publish__schedule-panel {
  border: 1px solid var(--color-border);
  background: var(--color-bg-light);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Tableau de bord Actualités (page-blog-dashboard.php) ────── */
.blog-dashboard { max-width: 860px; padding-top: 36px; padding-bottom: 64px; }
.blog-dashboard__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.blog-dashboard__header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.blog-dashboard__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.blog-dashboard__notice {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e7b4b;
  background: #eef8f2;
  padding: 10px 14px;
  margin: 0 0 22px;
}
.blog-dashboard__section { margin-bottom: 40px; }

/* ── Carte "Profil auteur" (templates/page-profil-auteur.php) ─── */
.blog-profile-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 36px 40px;
}
.blog-profile-card .form-section + .form-section { margin-top: 30px; }
.blog-profile-card .form-row { gap: 24px; }
.blog-profile-card .form-row--civilite { grid-template-columns: 120px 1fr 1fr; }
.blog-profile-card .settings-label { margin-bottom: 8px; }
.blog-profile-card .btn--primary { margin-top: 34px; }
@media (max-width: 640px) {
  .blog-profile-card { padding: 26px 22px; }
  .blog-profile-card .form-row--civilite { grid-template-columns: 1fr; }
}
.blog-dashboard__section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
  margin: 0 0 12px;
}
.blog-dashboard__section-empty {
  font-size: 13.5px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  margin: 0;
}
.blog-dashboard__badge--scheduled { color: #7a5b12; background: #fdf3e0; }
.blog-dashboard__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.blog-dashboard__filter {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-light);
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  padding: 6px 14px;
}
.blog-dashboard__filter:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blog-dashboard__filter.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.blog-dashboard__list { border-top: 1px solid var(--color-border); }
.blog-dashboard__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.blog-dashboard__thumb {
  width: 70px;
  height: 46px;
  flex-shrink: 0;
  background: #ececec;
  overflow: hidden;
  border-radius: var(--radius);
}
.blog-dashboard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-dashboard__info { flex: 1; min-width: 0; }
.blog-dashboard__row-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.blog-dashboard__badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-bg-grey);
  padding: 2px 7px;
  border-radius: 20px;
}
.blog-dashboard__row-meta { font-size: 12.5px; color: var(--color-text-muted); margin: 0; }
.blog-dashboard__row-stats { color: var(--color-primary); font-weight: 500; }
.blog-dashboard__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.blog-dashboard__delete-form { display: contents; }
.blog-dashboard__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.blog-dashboard__link:hover { color: var(--color-primary); text-decoration: underline; }
.blog-dashboard__link--danger:hover { color: var(--color-error); }

/* ── Profil auteur (tableau de bord Actualités) ─────────────────── */
.blog-dashboard__profile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 32px;
  background: var(--color-bg-grey);
}
.blog-dashboard__profile-summary {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
}
.blog-dashboard__profile[open] .blog-dashboard__profile-summary { margin-bottom: 16px; }
.blog-dashboard__profile form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }

/* ── Auteur : nom cliquable (en-tête d'article) ─────────────────── */
.blog-article__author-link { color: var(--color-primary); text-decoration: underline; }

/* ── Carte auteur (fin d'article) : rectangle arrondi, photo ronde
   à gauche, nom + bio empilés à droite ────────────────────────── */
.blog-author-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin: 40px auto 0;
  padding: 18px 20px;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  background: #f7f7f7;
  transition: border-color .15s ease;
}
.blog-author-card:has(.blog-cover:hover) {
  border-color: #94102f;
}
.blog-author-card__photo {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.blog-author-card__info { min-width: 0; max-width: 460px; display: flex; flex-direction: column; gap: 4px; }
.blog-author-card__name { font-weight: 700; font-size: 16px; color: #1a1a1a; margin: 0; line-height: 1.3; transition: color .15s ease; }
.blog-author-card:has(.blog-cover:hover) .blog-author-card__name { color: var(--color-primary); }
.blog-author-card__role { font-size: 13px; font-weight: 600; color: var(--color-primary); margin: 0; line-height: 1.4; }
.blog-author-card__bio { font-size: 13.5px; color: var(--color-text-muted); margin: 0; line-height: 1.5; }
.blog-author-card__links { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.blog-author-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.blog-author-card__link:hover { text-decoration: underline; }
.blog-author-card__link--linkedin { color: #0a66c2; }

/* ── Bouton "×" sur une référence Légifrance auto-détectée, aperçu
   uniquement (voir lexjob_legifrance_ignore_button_html() dans
   inc/legifrance.php) ────────────────────────────────────────────── */
.blog-legal-ref__ignore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  vertical-align: super;
}
.blog-legal-ref__ignore:hover { background: #fecaca; }

/* ── Sources citées (fin de contenu, avant la carte auteur) ─────── */
.blog-sources {
  margin: 32px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-bg-light);
}
.blog-sources__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  cursor: pointer;
  list-style: none; /* Firefox : cache le triangle par défaut d'un <summary> */
}
.blog-sources__title::-webkit-details-marker { display: none; } /* Chrome/Safari : idem */
.blog-sources[open] > .blog-sources__title { margin-bottom: 10px; }
.blog-sources__arrow { flex-shrink: 0; transition: transform .2s ease; }
.blog-sources[open] .blog-sources__arrow { transform: rotate(180deg); }
.blog-sources__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.blog-sources__item { font-size: 13.5px; line-height: 1.5; }
.blog-sources__item a { color: var(--color-primary); text-decoration: underline; word-break: break-word; }
.blog-sources__group-title {
  font-size: 12.5px; font-weight: 700; color: #1a1a1a;
  margin: 14px 0 6px;
}
.blog-sources__group-title:first-of-type { margin-top: 0; }

/* ── Ressources abrogées : sous-bloc distinct dans le même accordéon ─── */
.blog-sources__abrogated {
  margin-top: 18px;
  padding: 14px 16px 4px;
  border-top: 1px dashed var(--color-border-dark);
  background: #fffbeb;
  border-radius: var(--radius);
}
.blog-sources__group-title--abrogated {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.blog-sources__abrogated .blog-sources__group-title,
.blog-sources__abrogated .blog-sources__item a { color: #78350f; }

/* ── À lire aussi (fin d'article, avant la newsletter) ──────────── */
.blog-related { margin-top: 48px; }
.blog-related__title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

/* ── Carrousel "À lire aussi" (même mécanique que le carrousel
   partenaires du pied de page : piste translatée en JS) ─────────── */
.blog-carousel {
  overflow: hidden;
  width: 100%;
}
.blog-carousel__track {
  display: flex;
  align-items: stretch;
  will-change: transform;
}
.blog-carousel__item {
  /* largeur posée en JS = largeur visible / nb de vignettes */
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 10px 4px;
}
.blog-carousel__item .blog-item { border-top: none; padding-top: 0; }
/* Cartes compactes : 3 vignettes tiennent dans la colonne article (740px) */
.blog-carousel__item .blog-item__image { margin-bottom: 10px; }
.blog-carousel__item .blog-item__title { font-size: 14px; line-height: 1.35; }
.blog-carousel__item .blog-item__eyebrow { font-size: 10px; }
.blog-carousel__item .blog-item__meta { font-size: 11.5px; }

/* ── Carte d'invitation auteur (templates/page-devenir-auteur.php) ─ */
.blog-invite { max-width: 520px; padding-top: 8px; padding-bottom: 64px; }
.blog-invite-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  padding: 36px 40px;
}
.blog-invite-card .blog-publish__header { display: block; margin-bottom: 6px; }
.blog-invite-card .blog-publish__title { font-size: 22px; }
.blog-invite-card__intro { font-size: 14.5px; color: var(--color-text-light); line-height: 1.6; margin: 0 0 28px; }
.blog-invite-card__intro strong { color: #1a1a1a; }
.blog-invite-card .blog-publish__denied { border: none; padding: 0; text-align: left; }
.blog-invite-card .blog-publish__actions { margin-top: 4px; }
.blog-invite-card .blog-publish__submit { width: 100%; text-align: center; justify-content: center; }
@media (max-width: 560px) {
  .blog-invite-card { padding: 28px 24px; }
}

/* ── Lien de retour au hub (archives category.php / tag.php / author.php) ── */
.blog-back-hub { margin: 8px 0 40px; text-align: center; }
.blog-back-hub a { font-size: 13px; font-weight: 600; color: var(--color-text-light); }
.blog-back-hub a:hover { color: var(--color-primary); }

/* ── Portfolio auteur (author.php) ─────────────────────────────── */
.author-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding-bottom: 32px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--color-border);
}
.author-hero__photo {
  width: 130px;
  height: 130px;
  min-width: 130px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Téléphone : taille d'origine, déjà bien proportionnée sur un petit écran. */
@media (max-width: 640px) {
  .author-hero__photo { width: 104px; height: 104px; min-width: 104px; }
}
.author-hero__info { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.author-hero__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.25;
}
.author-hero__role { font-size: 14px; font-weight: 600; color: var(--color-primary); margin: 0; }
/* Pleine largeur de la page, comme la grille d'articles en dessous. */
.author-hero__bio { font-size: 14.5px; color: var(--color-text-light); line-height: 1.6; margin: 4px 0 0; }
.author-hero__bio--long { align-self: stretch; text-align: left; margin-top: 10px; }
.author-hero__foot { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.author-hero__count { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.author-hero__links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.author-hero__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.author-hero__link:hover { text-decoration: underline; }
.author-hero__link--linkedin { color: #0a66c2; }
.author-hero__add-btn { margin-top: 14px; }
.author-archives-toggle { margin: 24px 0 4px; }

/* Grille 2 colonnes, cartes toutes de même taille (pas de traitement "à la
   une" contrairement à .blog-grid du hub) — réutilise le composant .blog-item
   (image/eyebrow/titre/extrait/date) pour rester visuellement cohérent avec
   le reste du site. */
.author-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 32px;
  padding-top: 4px;
  margin-bottom: 8px;
}
/* .blog-item (base, ci-dessus) fournit déjà le cadre, l'image collée et le
   padding du texte — seule la hauteur d'image et le padding diffèrent ici. */
.author-grid .blog-item__body { padding: 16px 18px 18px; }

.author-pagination { display: flex; justify-content: flex-end; margin: 24px 0 40px; }
.author-pagination .lexjob-pagination { justify-content: flex-end; margin: 0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Même espace (20px) entre toutes les cartes : à la une / colonne latérale,
     cartes latérales entre elles, dernière carte latérale / grille, et
     cartes de la grille entre elles. */
  .blog-top { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
  .blog-grid { gap: 20px; padding-top: 0; }

  /* Article à la une : sur ordinateur, le titre est superposé à l'image
     (registre "une de presse") — sur mobile, un long titre déborde souvent
     de la zone assombrie (scrim) et se retrouve illisible sur une image
     claire ou chargée. Même registre que les autres vignettes à partir
     d'ici : image en haut, titre/date en dessous sur fond blanc. */
  /* Cartes du hub identiques sur mobile : "à la une", colonne latérale et
     grille partagent le même cadre (bordure + coins arrondis), la même
     zone image 1200×630 (format des images d'article) dans laquelle l'image est affichée ENTIÈRE
     (object-fit:contain, jamais rognée — un fond gris comble un éventuel
     vide) et la même hauteur de texte (catégorie, titre sur 3 lignes
     maximum, date). Ainsi toutes les cartes ont exactement la même taille,
     quelle que soit l'image ou la longueur du titre. */
  .blog-top .blog-feature {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
  }
  .blog-feature__image {
    height: auto;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: none;
  }
  .blog-feature__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: contain;
    background: #ececec;
    border: none;
    border-radius: 0;
  }
  .blog-feature__scrim { display: none; }
  .blog-feature__caption {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
  }
  .blog-cover:hover ~ .blog-feature__caption .blog-feature__title { text-decoration: none; }

  .blog-side { flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .blog-side__item { flex: 1 1 260px; }
  .blog-side__image { flex: none; aspect-ratio: 1200 / 630; min-height: 0; }
  .blog-side__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .blog-side__textlink { display: flex; flex-direction: column; flex: 1; padding: 12px 14px; }

  .blog-grid .blog-item__body { padding: 12px 14px; }
  .blog-grid .blog-item__image { height: auto; aspect-ratio: 1200 / 630; }
  .blog-grid .blog-item__image img {
    position: absolute;
    inset: 0;
    object-fit: contain;
  }

  /* Texte : mêmes polices, interlignes et réserve de hauteur pour les 3 types. */
  .blog-top .blog-tag { display: none; }
  .blog-mobile-eyebrow { display: block; }
  .blog-top .blog-item__eyebrow,
  .blog-grid .blog-item__eyebrow { line-height: 1.4; }
  .blog-feature__title,
  .blog-side__title,
  .blog-grid .blog-item__title {
    color: #1a1a1a;
    font-size: 15px;
    line-height: 1.3;
    min-height: 3.9em;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .blog-feature__meta,
  .blog-side__meta,
  .blog-grid .blog-item__meta {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
    margin: 0;
    margin-top: auto;
    padding-top: 6px;
  }
  .author-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .blog-newsletter { flex-direction: column; align-items: flex-start; padding: 22px 20px; gap: 14px; }
  .blog-newsletter__text { flex: none; }
  .blog-newsletter__form { width: 100%; flex: none; }
  .blog-newsletter__input { flex: 1; min-width: 0; }
  .blog-publish__row { grid-template-columns: 1fr; }
  .blog-dashboard__row { flex-wrap: wrap; }
  .blog-dashboard__actions { width: 100%; padding-left: 86px; }
  .author-pagination { justify-content: center; }
  .author-pagination .lexjob-pagination { justify-content: center; }
}

/* ── Recherche — bouton "Rechercher" (header.php, avec libellé texte pour
   qu'on comprenne que c'est une recherche, pas juste une icône isolée).
   Même typographie que .site-nav__link ("À propos" juste à côté) — les
   deux doivent se lire comme une seule paire de liens utilitaires, pas
   comme deux styles différents accolés au hasard. ──────────────────────── */
.header-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  border-radius: var(--radius);
  background: none;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
}
.header-search-toggle span { white-space: nowrap; }
.header-search-toggle:hover { color: var(--color-primary); }

/* Version mobile : icône seule (pas de place pour le libellé à côté du
   hamburger), aria-label porte le nom accessible à la place du <span>. */
.header-search-toggle--mobile {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  color: #000000;
}
.header-search-toggle--mobile:hover { background: #f2f2f2; }
/* Loupe + hamburger : mêmes boîtes de 34px centrées (le hamburger seul fait
   20px de haut pour une icône de 26px, qui dépassait vers le bas et se
   retrouvait plus bas que la loupe) et un espace entre les deux. */
.header-search-toggle--mobile { margin-right: 6px; }
.header-search-toggle--mobile + .mobile-account-toggle {
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
}
.header-search-toggle--mobile + .mobile-account-toggle .mobile-account-notif { top: -2px; right: -4px; }

/* Séparateur entre le groupe utilitaire (Rechercher, À propos — liens
   discrets) et le groupe d'actions (Espace auteur, Devenir auteur —
   boutons pleins) : sans lui, les 4 éléments se lisaient comme une rangée
   plate sans hiérarchie, malgré des styles différents. */
.header-actions__divider {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Recherche — overlay (header.php, ouvert via initSearchOverlay) ──────── */
.tribune-search-overlay { align-items: flex-start; }
.tribune-search-overlay .modal__overlay { background: rgba(15, 15, 15, .6); }
.tribune-search-overlay .modal__box.modal__box--search {
  max-width: 680px;
  width: 92%;
  margin-top: 12vh;
  padding: 36px 40px 26px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
.tribune-search-overlay__form {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 14px;
}
.tribune-search-overlay__icon { color: var(--color-primary); flex-shrink: 0; }
.tribune-search-overlay__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  color: var(--color-text);
}
.tribune-search-overlay__input::placeholder { color: var(--color-text-muted); font-style: italic; }
.tribune-search-overlay__hint { margin: 14px 0 0; font-size: 12px; color: var(--color-text-muted); }
.tribune-search-overlay__hint kbd {
  font-family: inherit;
  background: #f2f2f2;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
}
@media (max-width: 640px) {
  .tribune-search-overlay .modal__box.modal__box--search { margin-top: 8vh; padding: 30px 22px 22px; }
  .tribune-search-overlay__input { font-size: 18px; }
}

/* ── Recherche — aperçu en direct pendant la frappe (dans l'overlay) ─────── */
.search-preview {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
  max-height: 60vh;
  overflow-y: auto;
}
.search-preview__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 6px;
  border-radius: 6px;
  color: inherit;
  transition: background .12s ease;
}
.search-preview__item:hover { background: #f7f7f7; }
.search-preview__thumb {
  flex-shrink: 0;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 5px;
  overflow: hidden;
  background: #ececec;
  border: 1px solid var(--color-border);
}
.search-preview__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-preview__body { min-width: 0; }
.search-preview__title {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 2px;
}
.search-preview__meta { display: block; font-size: 12px; color: var(--color-text-muted); }
.search-preview__hint { margin: 10px 6px; font-size: 13px; color: var(--color-text-muted); }
.search-preview__more {
  display: block;
  text-align: center;
  margin-top: 4px;
  padding: 12px 6px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  border-top: 1px solid var(--color-border);
}
.search-preview__more:hover { text-decoration: underline; }

/* ── Recherche — page de résultats (search.php) ──────────────────────────── */
.search-page__form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 36px;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 10px;
}
.search-page__icon { color: var(--color-primary); flex-shrink: 0; }
.search-page__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  color: var(--color-text);
}
.search-page__submit {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: none;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-light);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.search-page__submit:hover { border-color: var(--color-primary); color: var(--color-primary); }
.search-page__hint { text-align: center; color: var(--color-text-muted); font-size: 14px; }

.tribune-search-results {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: border-color .15s ease;
}
.search-result:hover { border-color: #c4c4c4; }
.search-result__thumb {
  flex-shrink: 0;
  display: block;
  width: 140px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  background: #ececec;
}
.search-result__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-result__body { flex: 1; min-width: 0; }
.search-result__title-link { display: block; color: inherit; }
.search-result__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.32;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.search-result__title-link:hover .search-result__title { color: var(--color-primary); }
.search-result__snippet { font-size: 14px; line-height: 1.55; color: var(--color-text-light); margin: 0 0 8px; }
.search-result mark,
.search-page__hint mark,
.search-preview mark {
  background: transparent;
  color: var(--color-primary);
  font-weight: 700;
}
@media (max-width: 600px) {
  .search-result { flex-direction: column; }
  .search-result__thumb { width: 100%; height: 170px; }
}

/* ── Impression / "Enregistrer en PDF" (bouton dans .blog-share, single.php) ──
   Le bouton déclenche window.print() — c'est la boîte de dialogue d'impression
   du navigateur (option "Enregistrer en PDF") qui fait le travail, pas de
   génération PDF côté serveur. On masque ici tout ce qui n'a de sens qu'à
   l'écran (navigation, partage, newsletter, actions propriétaire) pour ne
   garder que l'article lui-même. */
@media print {
  .site-header,
  .breadcrumb,
  .site-footer,
  .blog-share,
  .blog-article__owner-actions,
  .blog-related,
  .blog-article__newsletter {
    display: none !important;
  }
  .blog-article { max-width: none; padding: 0; }
  .blog-article__body { font-size: 12pt; }
  .blog-disclaimer { border-top: 1px solid #ccc; }
  /* Le JS (initSourcesPrintExpand) déplie l'accordéon avant impression —
     la flèche n'a plus de sens sur un PDF statique. */
  .blog-sources__arrow { display: none; }
  .blog-sources__title { cursor: default; }
}

/* ══════════════════════════════════════════════════════════════════════════
   En-tête des pages de thème (Tribune du Droit)
   ══════════════════════════════════════════════════════════════════════════ */

/* Page d'un thème (tag.php) : le nom du thème est désormais le vrai <h1> de la
   page (avant, un "Tribune du Droit" masqué) — même apparence qu'auparavant. */
h1.blog-masthead__subtitle { font-weight: 400; line-height: 1.5; }
.blog-masthead__intro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 10px auto 0;
  max-width: 560px;
}

/* ── Charte des auteurs : fenêtre modale (inc/tribune-charter.php) ─────────── */
.charter-modal__box { max-width: 760px; padding: 28px 32px 22px; }
.charter-modal__body { font-size: 14.5px; line-height: 1.65; color: var(--color-text); }
.charter-modal__body h2 { font-size: 17px; margin: 22px 0 8px; color: var(--color-primary); }
.charter-modal__body h3 { font-size: 15px; margin: 16px 0 4px; }
.charter-modal__body p  { margin: 0 0 10px; }
.charter-modal__body a  { color: var(--color-primary); text-decoration: underline; }
.charter-modal__footer  { position: sticky; bottom: -22px; margin: 18px -32px -22px; padding: 14px 32px; background: #fff; border-top: 1px solid #e5e7eb; text-align: right; }
@media (max-width: 600px) {
  .charter-modal__box { width: 94%; padding: 22px 18px 18px; }
  .charter-modal__footer { margin: 18px -18px -18px; padding: 12px 18px; bottom: -18px; }
}

/* ── Partage d'un article par son auteur sur LinkedIn ───────────── */
.blog-dashboard__link--linkedin { color: #0a66c2; display: inline-flex; align-items: center; white-space: nowrap; }
.blog-dashboard__share-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin-bottom: 20px;
  border: 1px solid #b6d4f2;
  border-left: 4px solid #0a66c2;
  border-radius: 8px;
  background: #f3f8fd;
}
.blog-dashboard__share-prompt-title { font-weight: 700; margin: 0 0 2px; }
.blog-dashboard__share-prompt-text { margin: 0; font-size: 14px; color: var(--color-text-light); }
.blog-dashboard__share-prompt .btn { background: #0a66c2; border-color: #0a66c2; display: inline-flex; align-items: center; }

/* ── Accueil de la Tribune : dernières offres LexJob ───────────────
   Mêmes cartes que sur lexjob.fr (.listings-grid / .listing-card, main.css),
   en version compacte : bande de logo réduite, titre sur 2 lignes, sans les
   badges détaillés ni la date d'ajout (tout est sur l'offre elle-même). */
/* Fond gris très clair sur tout le bloc : on voit qu'il s'agit d'autre chose
   que la Tribune (les offres de LexJob), les cartes blanches s'en détachent. */
.tribune-jobs {
  margin: 40px 0 32px;
  padding: 32px 28px 28px;
  background: #f5f5f6;
  border-radius: 14px;
}
@media (max-width: 560px) {
  .tribune-jobs { padding: 24px 14px 20px; border-radius: 10px; }
}
.tribune-jobs .section__title { font-size: 20px; margin-bottom: 8px; }
.tribune-jobs .section__divider { margin-bottom: 14px; }
.tribune-jobs__intro { text-align: center; color: var(--color-text-light); margin: 0 auto 18px; font-size: 14px; }
.tribune-jobs__intro a { color: var(--color-primary); font-weight: 600; }
.tribune-jobs .listings-grid { gap: 16px; }
.tribune-jobs .listing-card__image { height: 112px; border-bottom: 1px solid #f0f0f0; }
.tribune-jobs .listing-card { border-color: #e6e6e8; }
.tribune-jobs .listing-card__image img { padding: 10px 24px; }
.tribune-jobs .listing-card__placeholder { width: 56px; height: 56px; font-size: 22px; }
.tribune-jobs .listing-card__body { padding: 12px 14px 14px; gap: 6px; }
.tribune-jobs .badge { align-self: flex-start; padding: 3px 8px; font-size: 10px; }
.tribune-jobs .listing-card__title {
  font-size: 14px;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tribune-jobs .listing-card__badges,
.tribune-jobs .listing-card__footer { display: none; }
.tribune-jobs .listing-card__location { margin-top: auto; font-size: 12.5px; }
.tribune-jobs__more { text-align: center; margin: 18px 0 0; }
.tribune-jobs .btn--outline { background: #fff; }
.tribune-jobs .btn--outline:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }