/*
 * article_engagement.css
 * Styles pour le bundle P0 engagement articles : compteurs meta,
 * boutons share enrichis (WhatsApp / Email / Copy / Native), toast.
 */

/* === P0.4 + polish 2026-05-18 — Typographie & layout article === */

/* La card principale est limitée à une vraie colonne lecture et centrée
   dans son cellule grid → tous les blocs (summary, content, related,
   newsletter, comments) partagent la même mesure → bords alignés. */
.article-main-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 2.25rem 2.5rem !important;
}

/* Body de l'article : tokens (--article-*, définis dans style.css :root).
   Plus de measure spécifique sur .article-content puisque le parent
   .article-main-content le contraint déjà. */
.article-content {
  font-size: var(--article-body-size, 1.125rem);
  line-height: var(--article-line-height, 1.65);
  max-width: 100%;
}

.article-content p {
  margin-top: 0;
  margin-bottom: 1.2em;
}

/* Hiérarchie de titres : breathing serré (Medium-like, on évite de casser
   le rythme de lecture). */
.article-content h2 {
  font-family: var(--title-font-family);
  font-size: 1.7rem !important;
  line-height: 1.25 !important;
  margin-top: 1.15em !important;
  margin-bottom: 0.45em !important;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text-color, #1f2937);
}

.article-content h3 {
  font-family: var(--title-font-family);
  font-size: 1.3rem !important;
  line-height: 1.32 !important;
  margin-top: 0.95em !important;
  margin-bottom: 0.35em !important;
  font-weight: 700;
  letter-spacing: -0.008em;
}

.article-content h4 {
  font-family: var(--title-font-family);
  font-size: 1.1rem !important;
  line-height: 1.35 !important;
  margin-top: 0.8em !important;
  margin-bottom: 0.35em !important;
  font-weight: 600;
}

/* Si un heading est le tout premier enfant du content (ex: l'article démarre
   directement par un h2), pas d'espace supérieur — collé à l'image hero / summary. */
.article-content > h2:first-child,
.article-content > h3:first-child,
.article-content > h4:first-child {
  margin-top: 0 !important;
}

/* Summary "lead paragraph" Medium-like — discret, sans background
   intrusif, sans guillemets décoratifs. Centré sur la même colonne. */
.article-summary {
  font-family: var(--title-font-family) !important;
  font-style: italic !important;
  font-size: 1.28rem !important;
  line-height: 1.5 !important;
  color: var(--secondary-color, #4b5563) !important;
  background: transparent !important;
  border-left: 3px solid #e5e7eb !important;
  padding: 0.15rem 0 0.15rem 1.4rem !important;
  margin: 0 0 1.75rem 0 !important;
  border-radius: 0 !important;
}

/* Les icônes guillemets `<i class="fa-quote-*">` du summary sont
   décoratives et "old school" — on les masque pour un rendu plus moderne. */
.article-summary > i.fas {
  display: none !important;
}

/* Image principale : margin propre */
.article-main-image {
  margin: 0 0 1.5rem 0 !important;
}

/* Liens (hors glossary auto-link, hors share-btn) : moins intrusif
   que le bleu d'origine, plus moderne. */
.article-content a:not(.article-glossary-link):not(.section-quote__tweet) {
  color: #ff4000 !important;
  border-bottom: 1px solid rgba(255, 64, 0, 0.3) !important;
  background-color: transparent !important;
}

.article-content a:not(.article-glossary-link):not(.section-quote__tweet):hover {
  color: #cc3300 !important;
  border-bottom-color: #ff4000 !important;
  background-color: rgba(255, 64, 0, 0.04) !important;
}

/* === Compteurs meta (vues / commentaires) === */
.article-meta .article-views,
.article-meta .article-comments-jump {
  margin-left: 0.75rem;
  color: var(--article-secondary-color, #6c757d);
  font-size: 0.95rem;
}

.article-meta .article-comments-jump {
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

.article-meta .article-comments-jump:hover {
  color: var(--vefa-primary, #3498db);
}

.article-meta .article-views i,
.article-meta .article-comments-jump i {
  margin-right: 0.25rem;
}

/* === Conteneur partage desktop : flex wrap propre (7 boutons) === */
.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.article-share h3 {
  /* Le titre occupe toute la première ligne — boutons en dessous */
  flex-basis: 100%;
  margin-bottom: 0.25rem !important;
}

/* Reset complet du share-btn pour annuler tous les héritages parasites
   (line-height: 40px, margin, padding, text-decoration) et centrer l'icône
   en flexbox stricte. font-size icône réduit de 1.1rem → 1rem pour donner
   plus d'air dans le cercle de 40px (~17.6 px ne respirait pas). */
.article-share .share-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  outline: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
}

.article-share .share-btn i {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  vertical-align: baseline;
}

/* === Nouveaux boutons partage (desktop) === */
.share-btn.whatsapp { background-color: #25D366; }
.share-btn.email    { background-color: #6c757d; }

.share-btn.copy,
.share-btn.native {
  /* Boutons d'action — pas un réseau social, donc neutres */
  background-color: #ffffff;
  color: #3498db;
  border: 1px solid #3498db;
  cursor: pointer;
  padding: 0;
}

.share-btn.copy:hover,
.share-btn.native:hover {
  background-color: #3498db;
  color: #ffffff;
}

/* État "succès" après copie */
.share-btn.copy.is-copied {
  background-color: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}

/* Mobile bar — couleurs des nouveaux boutons */
@media (max-width: 768px) {
  .article-detail-mobile-share-button.whatsapp { background-color: #25D366; }
  .article-detail-mobile-share-button.email    { background-color: #6c757d; }

  .article-detail-mobile-share-button.copy,
  .article-detail-mobile-share-button.native {
    background-color: #ffffff;
    color: #3498db;
    border: 1px solid #3498db;
    cursor: pointer;
    padding: 0;
  }

  .article-detail-mobile-share-button.copy:hover,
  .article-detail-mobile-share-button.native:hover {
    background-color: #3498db;
    color: #ffffff;
  }

  .article-detail-mobile-share-button.copy.is-copied {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
  }

  /* Permet le wrap si on a 7 boutons sur mobile */
  .article-detail-mobile-share-buttons {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }
}

/* === Toast feedback (copy link succès / erreur) === */
.article-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1f2937;
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-family: var(--ui-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.article-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.article-toast.is-error {
  background: #dc2626;
}

.article-toast i {
  font-size: 1rem;
}

/* === Cartes « À lire aussi » (P1.1 — related auto enrichi) === */
/* Override progressif du markup BEM, cohabite avec les styles `.related-article-card h3`
   définis dans style.css. */

.related-article-card {
  display: flex;
  flex-direction: column;
}

.related-article-card__img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.related-article-card__body {
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

.related-article-card__category {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.related-article-card__title {
  /* Surcharge le `.related-article-card h3` de style.css (padding 1rem) */
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1.02rem;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--text-color, #1f2937);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-article-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-size: 0.82rem;
  color: var(--article-secondary-color, #6c757d);
  margin-top: auto;
}

.related-article-card__meta i {
  margin-right: 0.25rem;
}

/* Badge discret « Suggestions automatiques » sur le bloc fallback */
.related-articles--auto > h2::after {
  content: "Suggestions";
  display: inline-block;
  margin-left: 0.65rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  vertical-align: middle;
}

/* Variation mobile : grille single-column, image plus courte */
.related-articles--mobile {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.related-articles--mobile .related-articles-grid {
  grid-template-columns: 1fr;
}

.related-articles--mobile .related-article-card__img {
  height: 180px;
}

@media (min-width: 480px) and (max-width: 767px) {
  .related-articles--mobile .related-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .related-articles--mobile .related-article-card__img {
    height: 130px;
  }
}

/* === P1.2 — Sections éditoriales riches === */

/* --- Pull-quote --- */
.section-quote {
  position: relative;
  margin: 2.25rem 0;
  padding: 1.5rem 1.5rem 1.25rem 2.25rem;
  border-left: 4px solid #ff4000; /* accent VefaConnect */
  background: linear-gradient(90deg, rgba(255, 64, 0, 0.04) 0%, transparent 100%);
  border-radius: 0 8px 8px 0;
}

.section-quote::before {
  content: "\201C"; /* guillemet anglais ouvrant typo */
  position: absolute;
  top: -0.4rem;
  left: 0.45rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(255, 64, 0, 0.25);
}

.section-quote__body {
  font-family: var(--title-font-family, Georgia, "Times New Roman", serif);
  font-size: 1.5rem;
  line-height: 1.42;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text-color, #1f2937);
  margin: 0;
}

.section-quote__body p:last-child { margin-bottom: 0; }

.section-quote__author {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  color: var(--secondary-color, #6c757d);
  font-style: normal;
  letter-spacing: 0.02em;
}

.section-quote__tweet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.section-quote__tweet:hover,
.section-quote__tweet:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}

.section-quote--mobile {
  margin: 1.75rem 0;
  padding: 1.15rem 1.15rem 1rem 1.75rem;
}

.section-quote--mobile .section-quote__body {
  font-size: 1.18rem;
}

/* --- Callouts (4 variantes : info / tip / warning / danger) --- */
.section-callout {
  display: flex;
  gap: 0.9rem;
  margin: 1.75rem 0;
  padding: 1rem 1.15rem;
  border-radius: 10px;
  border: 1px solid;
  background: #f8fafc;
}

.section-callout__icon {
  flex: 0 0 1.6rem;
  font-size: 1.25rem;
  line-height: 1.4;
}

.section-callout__body {
  flex: 1;
  min-width: 0;
}

.section-callout__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: inherit;
  letter-spacing: -0.005em;
}

.section-callout__body p:last-child { margin-bottom: 0; }
.section-callout__body p:first-child { margin-top: 0; }

.section-callout--info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
}
.section-callout--info .section-callout__icon { color: #2563eb; }

.section-callout--tip {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #064e3b;
}
.section-callout--tip .section-callout__icon { color: #059669; }

.section-callout--warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #78350f;
}
.section-callout--warning .section-callout__icon { color: #d97706; }

.section-callout--danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}
.section-callout--danger .section-callout__icon { color: #dc2626; }

.section-callout--mobile {
  margin: 1.4rem 0;
  padding: 0.85rem 1rem;
}

/* --- FAQ (Q/R native via <details>) --- */
.section-faq {
  margin: 0.9rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  transition: box-shadow 0.18s ease;
}

.section-faq + .section-faq {
  margin-top: 0.55rem;
}

.section-faq[open] {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.section-faq__question {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1.1rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text-color, #1f2937);
  letter-spacing: -0.005em;
}

.section-faq__question::-webkit-details-marker { display: none; }

.section-faq__question::after {
  content: "\f078"; /* fa-chevron-down */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--secondary-color, #6c757d);
  transition: transform 0.18s ease;
}

.section-faq[open] .section-faq__question::after {
  transform: rotate(180deg);
}

.section-faq__question > i {
  color: #2563eb;
  font-size: 1.05rem;
}

.section-faq__answer {
  padding: 0 1.1rem 1rem 2.7rem;
  color: var(--text-color, #1f2937);
  line-height: 1.6;
}

.section-faq__answer p:last-child { margin-bottom: 0; }

.section-faq--mobile .section-faq__question {
  padding: 0.85rem 0.95rem;
  font-size: 0.98rem;
}

.section-faq--mobile .section-faq__answer {
  padding: 0 0.95rem 0.9rem 2.4rem;
}

/* --- Embed (YouTube / Vimeo) --- */
.section-embed {
  margin: 1.75rem 0;
}

.section-embed__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.section-embed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.section-embed__caption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--secondary-color, #6c757d);
  text-align: center;
}

.section-embed--mobile { margin: 1.4rem 0; }

/* === P1.3 — Lien glossaire auto-linké === */
/* Style discret type Wikipedia : underline pointillé légèrement coloré,
   forte conservation de la lisibilité éditoriale. Le tooltip est natif
   (attribut title) — pas de JS requis pour MVP. */

.article-glossary-link {
  /* Casse les éventuels styles agressifs de .article-content a (style.css) */
  color: inherit !important;
  text-decoration: none;
  background-color: transparent !important;
  font-weight: inherit !important;
  border-bottom: 1px dashed rgba(37, 99, 235, 0.55) !important;
  padding-bottom: 0 !important;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  cursor: help;
}

.article-glossary-link:hover,
.article-glossary-link:focus-visible {
  color: #2563eb !important;
  border-bottom-color: #2563eb !important;
  background-color: rgba(37, 99, 235, 0.06) !important;
  outline: none;
}

/* Sur mobile, conserve le même style mais reset le `color: #3498db` global
   de .article-detail-mobile-content a (article_detail.css). */
.article-detail-mobile-content .article-glossary-link {
  color: inherit !important;
  border-bottom: 1px dashed rgba(37, 99, 235, 0.55) !important;
  background-color: transparent !important;
}

.article-detail-mobile-content .article-glossary-link:hover,
.article-detail-mobile-content .article-glossary-link:active {
  color: #2563eb !important;
  border-bottom-color: #2563eb !important;
  background-color: rgba(37, 99, 235, 0.06) !important;
}

/* Pas de marqueur "lien externe" Font Awesome — ce lien reste interne. */
.article-content .article-glossary-link[href^="http"]:not([href*="vefaconnect.com"])::after {
  content: none !important;
}

/* === P1.4 — Sticky bottom share bar (mobile uniquement) === */
/* Masquée par défaut sur tous viewports. Activée seulement <768px par le JS
   (qui ajoute .is-visible quand l'utilisateur scrolle dans le corps de l'article). */

.article-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none; /* dépend du viewport + classe is-visible */
  align-items: stretch;
  justify-content: space-around;
  gap: 0;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.08);
  z-index: 950;
  /* Safe-area iOS / Android (notch bar) */
  padding: 0.45rem 0.4rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

/* Activé sur mobile, JS gère l'apparition / disparition */
@media (max-width: 768px) {
  .article-sticky-bar {
    display: flex;
  }
}

.article-sticky-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.article-sticky-bar__btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.45rem 0.3rem;
  background: transparent;
  border: 0;
  color: #1f2937;
  font-family: var(--ui-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.article-sticky-bar__btn i {
  font-size: 1.25rem;
  line-height: 1;
}

.article-sticky-bar__btn:active {
  background-color: rgba(15, 23, 42, 0.06);
}

.article-sticky-bar__btn--whatsapp { color: #128C7E; }
.article-sticky-bar__btn--whatsapp:active { background-color: rgba(18, 140, 126, 0.1); }

.article-sticky-bar__btn--copy { color: #2563eb; }
.article-sticky-bar__btn--copy:active { background-color: rgba(37, 99, 235, 0.1); }
.article-sticky-bar__btn--copy.is-copied { color: #16a34a; }
.article-sticky-bar__btn--copy.is-copied i::before { content: "\f00c"; } /* fa-check */

.article-sticky-bar__btn--native { color: #2563eb; }
.article-sticky-bar__btn--native:active { background-color: rgba(37, 99, 235, 0.1); }

.article-sticky-bar__btn--comment { color: #ff4000; }
.article-sticky-bar__btn--comment:active { background-color: rgba(255, 64, 0, 0.08); }

.article-sticky-bar__label {
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Décale le contenu de la page pour éviter que la bar masque la fin de l'article. */
@media (max-width: 768px) {
  .article-detail-mobile-container {
    /* Réserve un espace en bas équivalent à la hauteur estimée de la bar (~62px + safe-area) */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* === P1.5 — Highlight-to-share popover (desktop only via JS) === */
/* Apparaît au-dessus (ou en dessous si pas la place) de la sélection texte
   dans l'article. Style Medium-like : pill sombre, texte blanc, ombre forte. */

.article-highlight-popover {
  position: absolute;
  z-index: 1000;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: #111827;
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  font-family: var(--ui-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.82rem;
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}

.article-highlight-popover.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.article-highlight-popover::after {
  /* Flèche pointant vers la sélection */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #111827;
}

/* Variante : popover en-dessous de la sélection (espace insuffisant au-dessus) */
.article-highlight-popover--below::after {
  top: -5px;
  bottom: auto;
}

.article-highlight-popover__btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0.55rem 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color 0.14s ease;
  white-space: nowrap;
}

.article-highlight-popover__btn:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.article-highlight-popover__btn:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }

.article-highlight-popover__btn + .article-highlight-popover__btn {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.article-highlight-popover__btn:hover,
.article-highlight-popover__btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  outline: none;
}

.article-highlight-popover__btn i {
  font-size: 0.95rem;
}

/* === P2.1 — Newsletter inline (capture + double opt-in) === */

.article-newsletter {
  display: flex;
  gap: 1rem;
  margin: 2.5rem 0;
  padding: 1.5rem 1.6rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(255, 64, 0, 0.05) 100%);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.article-newsletter__icon {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #2563eb;
  border-radius: 50%;
  font-size: 1.1rem;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}

.article-newsletter__body {
  flex: 1;
  min-width: 0;
}

.article-newsletter__title {
  margin: 0 0 0.35rem 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111827;
  font-family: var(--ui-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.article-newsletter__lead {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #374151;
}

.article-newsletter__form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.article-newsletter__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.65rem 0.95rem;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #ffffff;
  color: #111827;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.article-newsletter__input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.article-newsletter__submit {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 0.65rem 1.3rem;
  background: #ff4000;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 10px;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.article-newsletter__submit:hover {
  background-color: #e63800;
}

.article-newsletter__submit:active {
  transform: translateY(1px);
}

.article-newsletter__spinner {
  display: inline-flex;
  align-items: center;
}

.article-newsletter__legal,
.article-newsletter__hint {
  margin: 0;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.45;
}

.article-newsletter__hint {
  margin-top: 0.5rem;
  font-style: italic;
}

/* État success — fond vert clair */
.article-newsletter--success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(34, 197, 94, 0.05) 100%);
  border-color: rgba(16, 185, 129, 0.2);
}
.article-newsletter--success .article-newsletter__icon { color: #059669; }

/* État error — fond rouge clair */
.article-newsletter--error {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(239, 68, 68, 0.05) 100%);
  border-color: rgba(220, 38, 38, 0.2);
}
.article-newsletter--error .article-newsletter__icon { color: #dc2626; }

@media (max-width: 600px) {
  .article-newsletter {
    flex-direction: column;
    padding: 1.2rem;
    gap: 0.6rem;
  }
  .article-newsletter__form {
    flex-direction: column;
    gap: 0.55rem;
  }
  .article-newsletter__submit {
    width: 100%;
    justify-content: center;
  }
}

/* Carte page confirm/unsubscribe */
.newsletter-confirm-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  border: 1px solid #e5e7eb;
}

.newsletter-confirm-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: 1.8rem;
  margin: 0 auto 1.25rem;
}

.newsletter-confirm-card__icon--success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.newsletter-confirm-card__icon--error {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.newsletter-confirm-card__title {
  margin: 0 0 1rem 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #111827;
  font-family: var(--ui-font-family, sans-serif);
}

.newsletter-confirm-card__lead {
  font-size: 1.02rem;
  line-height: 1.55;
  color: #374151;
  margin: 0 0 1rem 0;
}

.newsletter-confirm-card__hint {
  font-size: 0.88rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

/* === P2.2 — Bouton bookmark (sidebar share desktop + top share mobile) === */

.article-bookmark-btn {
  appearance: none;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #6b7280;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  padding: 0;
}

.article-bookmark-btn:hover {
  border-color: #ff4000;
  color: #ff4000;
}

.article-bookmark-btn:active {
  transform: scale(0.93);
}

.article-bookmark-btn.is-bookmarked {
  background: #ff4000;
  color: #ffffff;
  border-color: #ff4000;
}

.article-bookmark-btn.is-bookmarked:hover {
  background: #e63800;
  border-color: #e63800;
}

.article-bookmark-btn i {
  font-size: 1rem;
  line-height: 1;
}

/* Dans .article-share (desktop) : ajout automatique du gap par flex parent */
.article-share .article-bookmark-btn {
  margin-right: 0 !important;
}

/* === Page « Mes articles sauvegardés » — empty state === */

.my-bookmarks__title {
  font-family: var(--ui-font-family, sans-serif);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #111827;
  margin: 0 0 0.4rem 0;
}

.my-bookmarks__title i {
  color: #ff4000;
}

.my-bookmarks__empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 2px dashed #e5e7eb;
  border-radius: 14px;
  background: #fafafa;
  max-width: 520px;
  margin: 2rem auto;
}

.my-bookmarks__empty-icon {
  font-size: 3rem;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.my-bookmarks__empty-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.75rem 0;
}

.my-bookmarks__empty-lead {
  font-size: 0.95rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.55;
}

.my-bookmarks__empty-lead i {
  color: #ff4000;
  margin: 0 0.15rem;
}

/* === P2.4 — CTA programme contextuel (« Programmes en lien ») === */
.article-program-cta {
  margin: 2.5rem 0 0 0;
  padding: 1.5rem 1.6rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 64, 0, 0.06) 0%, rgba(37, 99, 235, 0.05) 100%);
  border: 1px solid rgba(255, 64, 0, 0.15);
}

.article-program-cta__header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
}

.article-program-cta__icon {
  font-size: 1.1rem;
  color: #ff4000;
}

.article-program-cta__title {
  font-family: var(--ui-font-family, -apple-system, sans-serif) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  margin: 0 !important;
  color: #111827;
  line-height: 1.3 !important;
}

.article-program-cta__lead {
  margin: 0 0 1.1rem 0;
  font-size: 0.9rem;
  color: #6b7280;
  line-height: 1.5;
}

.article-program-cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

.article-program-cta__card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid #e5e7eb;
}

.article-program-cta__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

.article-program-cta__card-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.article-program-cta__card-body {
  padding: 0.7rem 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.article-program-cta__card-city {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: #ff4000;
}

.article-program-cta__card-title {
  font-family: var(--ui-font-family, sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.005em;
  margin: 0 !important;
  color: #111827;
  /* Clamp 2 lignes */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-program-cta__card-developer {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.3;
}

.article-program-cta__footer {
  text-align: center;
}

.article-program-cta__cta-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #ff4000;
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}

.article-program-cta__cta-all:hover {
  background-color: rgba(255, 64, 0, 0.08);
  color: #cc3300;
}

@media (max-width: 600px) {
  .article-program-cta {
    padding: 1.2rem 1rem;
  }
  .article-program-cta__grid {
    grid-template-columns: 1fr;
  }
  .article-program-cta__card-img {
    height: 140px;
  }
}

/* === P2.3 — Refactor responsive : 1 seul markup pour desktop + mobile === */
/* Le wrapper `.d-block d-md-none article-detail-mobile-container` a été supprimé
   le 2026-05-18. Tout le rendu passe désormais par `partials/article_main_content.html`
   avec les classes desktop. Les media queries suivantes adaptent ce rendu pour
   les écrans < 768px. */

@media (max-width: 768px) {
  /* Layout container : passe d'une grille 1fr 3fr 1fr à une seule colonne */
  .article-container {
    grid-template-columns: 1fr;
    padding: 0.5rem;
    gap: 0;
  }

  /* La sidebar desktop (share + TOC) est cachée — la sticky bar mobile prend le relais
     pour le partage (+ menu OS natif via Web Share API). */
  .article-sidebar {
    display: none;
  }

  /* Carte main-content : visuellement plus discrète sur mobile (pas d'ombre, padding réduit) */
  .article-main-content {
    padding: 1.25rem 1rem !important;
    max-width: 100% !important;
    box-shadow: none;
    border-radius: 0;
  }

  /* Hiérarchie titres mobile : font-size réduit pour éviter qu'un h2 prenne 2 lignes */
  .article-content h2 {
    font-size: 1.5rem !important;
    margin-top: 2em !important;
  }
  .article-content h3 {
    font-size: 1.2rem !important;
  }

  /* Summary plus compact sur mobile */
  .article-summary {
    font-size: 1.15rem !important;
    padding: 0.15rem 0 0.15rem 1.1rem !important;
    margin-bottom: 1.75rem !important;
  }

  /* Titre plus compact */
  .article-title {
    font-size: 1.85rem !important;
    line-height: 1.22 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 1rem !important;
  }

  /* Le measure desktop (65ch) n'est pas adapté à un écran 360px → on libère */
  .article-content {
    max-width: 100%;
  }

  /* Images de section flottantes → empilées pleine largeur */
  .article-image-left,
  .article-image-right {
    float: none !important;
    width: 100% !important;
    margin: 1.2rem 0 !important;
  }

  /* Hero image : ratio 16/9 standard sur mobile */
  .article-main-image {
    aspect-ratio: 16 / 9;
  }

  /* Le bandeau « Sommaire » et la progress bar restent desktop-only */
  .progress-container {
    display: none;
  }

  /* Meta header : wrap propre sur mobile */
  .article-meta {
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    font-size: 0.88rem;
  }

  .article-meta .article-author,
  .article-meta .article-date,
  .article-meta .article-category,
  .article-meta .article-read-time,
  .article-meta .article-views,
  .article-meta .article-comments-jump {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
  }

  /* Tags : pills compactes */
  .article-tags .tag {
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
  }

  /* Section quote : moins de padding interne sur mobile */
  .section-quote {
    margin: 1.75rem 0;
    padding: 1.15rem 1.15rem 1rem 1.75rem;
  }
  .section-quote .section-quote__body {
    font-size: 1.18rem;
  }

  /* Callout : padding réduit */
  .section-callout {
    margin: 1.4rem 0;
    padding: 0.85rem 1rem;
  }

  /* Related articles : grille single-col */
  .related-articles-grid {
    grid-template-columns: 1fr;
  }
}