/* En ce moment : styles des modules. Couleurs pilotables par variables. */
:root {
  --mag-accent: #c1121f;
  --mag-ink: #1a1f2b;
  --mag-mut: #5a6270;
  --mag-line: #e3e6ec;
  --mag-bg: #f6f7f9;
  --mag-radius: 12px;
}

/* En ce moment */
.mag-box { margin: 24px 0; padding: 14px 16px; border: 1px solid var(--mag-line); border-left: 4px solid var(--mag-accent); border-radius: var(--mag-radius); background: var(--mag-bg); }
.mag-title, .mag-mostread-title, .mag-related-title, .mag-tldr-title { font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mag-accent); margin-bottom: 10px; }
.mag-list, .mag-related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mag-link, .mag-related-link { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--mag-ink); font-weight: 600; line-height: 1.35; }
.mag-link:hover .mag-text, .mag-related-link:hover .mag-related-text { color: var(--mag-accent); }
.mag-thumb, .mag-related-thumb { width: 96px; height: 64px; flex: 0 0 96px; object-fit: cover; border-radius: 8px; }

/* Les plus lus */
.mag-mostread { margin: 24px 0; padding: 14px 16px; border: 1px solid var(--mag-line); border-radius: var(--mag-radius); background: #fff; }
.mag-mostread-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.mag-mostread-item { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--mag-line); }
.mag-mostread-item:first-child { border-top: 0; }
.mag-mostread-rank { font-weight: 900; font-size: 1.4rem; color: var(--mag-accent); min-width: 1.2em; line-height: 1; }
.mag-mostread-item a { color: var(--mag-ink); font-weight: 600; text-decoration: none; line-height: 1.35; }
.mag-mostread-item a:hover { color: var(--mag-accent); }

/* Sur le même sujet */
.mag-related { margin: 28px 0; }

/* Blocs éditoriaux */
.mag-express { display: block; margin: 0 0 16px; padding: 12px 14px; background: var(--mag-bg); border-radius: var(--mag-radius); line-height: 1.5; }
.mag-express-label { font-weight: 800; color: var(--mag-accent); margin-right: 4px; }
.mag-tldr { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--mag-line); border-radius: var(--mag-radius); }
.mag-tldr-list { margin: 0; padding-left: 1.2em; }
.mag-tldr-list li { margin: 6px 0; line-height: 1.45; }
.mag-keystat { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid var(--mag-accent); }
.mag-keystat-n { font-size: 1.8rem; font-weight: 900; color: var(--mag-ink); line-height: 1.1; }
.mag-keystat-label { color: var(--mag-mut); font-size: .92rem; }
.mag-faq { margin: 28px 0; }
.mag-faq-item { border-top: 1px solid var(--mag-line); padding: 10px 0; }
.mag-faq-q { cursor: pointer; font-weight: 700; }
.mag-faq-a { margin-top: 8px; color: var(--mag-mut); }

/* Preuve sociale */
.mag-social { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .85rem; color: var(--mag-mut); }
.mag-social-dot { width: 8px; height: 8px; border-radius: 50%; background: #1a9e4b; animation: mag-pulse 1.6s infinite; }
@keyframes mag-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Favoris et synchronisation */
.mag-bm { margin: 0 0 14px; padding: 6px 12px; border: 1px solid var(--mag-line); border-radius: 999px; background: #fff; color: var(--mag-ink); font-size: .85rem; cursor: pointer; }
.mag-bm.is-saved { background: #fff4d6; border-color: #e8c65a; }
.mag-saved, .mag-foryou { margin: 24px 0; padding: 14px 16px; border: 1px solid var(--mag-line); border-radius: var(--mag-radius); }
.mag-saved-empty { color: var(--mag-mut); font-size: .9rem; }
.mag-reco-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.mag-reco-cards a { display: block; color: var(--mag-ink); text-decoration: none; font-weight: 600; line-height: 1.35; }
.mag-reco-cards img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.mag-sync { margin-top: 12px; font-size: .85rem; }
.mag-sync button { padding: 4px 10px; border: 1px solid var(--mag-line); border-radius: 6px; background: #fff; cursor: pointer; }
.mag-sync-ok { color: #1a9e4b; font-weight: 700; }
.mag-sync-code { display: inline-block; margin: 6px 0; font: 700 1.4rem/1 monospace; letter-spacing: .2em; }
.mag-sync-in { width: 8em; text-transform: uppercase; letter-spacing: .15em; }

/* Partage */
.mag-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0; }
.mag-share-label { font-weight: 700; margin-right: 4px; }
.mag-share-btn { padding: 6px 12px; border: 1px solid var(--mag-line); border-radius: 999px; background: #fff; color: var(--mag-ink); text-decoration: none; font-size: .85rem; cursor: pointer; }
.mag-share-btn:hover { border-color: var(--mag-accent); color: var(--mag-accent); }

/* Progression et retour en haut */
.mag-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--mag-accent); z-index: 99999; transition: width .1s linear; }
.mag-backtop { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mag-ink); color: #fff; font-size: 20px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 9999; }
.mag-backtop.show { opacity: .85; pointer-events: auto; }

/* Lecture continue */
.mag-cont-article { margin-top: 40px; }
.mag-cont-sep { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--mag-mut); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.mag-cont-sep::before, .mag-cont-sep::after { content: ""; flex: 1; height: 1px; background: var(--mag-line); }
.mag-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fdecec; color: var(--mag-accent); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.mag-cont-title { margin: 10px 0 6px; }
.mag-cont-title a { color: var(--mag-ink); text-decoration: none; }
.mag-cont-meta { color: var(--mag-mut); font-size: .85rem; margin-bottom: 12px; }
.mag-cont-img { width: 100%; height: auto; border-radius: var(--mag-radius); margin-bottom: 16px; }

/* Questions fréquentes */
.mag-faq { margin: 34px 0 10px; padding-top: 22px; border-top: 3px solid var(--dc-accent, #8a5a2b); }
.mag-faq-title { font-size: 1.35rem; margin: 0 0 16px; }
.mag-faq-item { padding: 14px 0; border-bottom: 1px solid #e7e2da; }
.mag-faq-q { font-size: 1.02rem; margin: 0 0 6px; font-weight: 700; }
.mag-faq-a { margin: 0; color: #4a4a4a; }

/* Entités liées */
.mag-ent { margin: 26px 0; padding: 16px 18px; border: 1px solid #e7e2da; border-radius: 12px; background: #faf7f2; }
.mag-ent-title { text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; color: var(--dc-accent, #8a5a2b); font-weight: 700; margin-bottom: 10px; }
.mag-ent-list { list-style: none; margin: 0; padding: 0; }
.mag-ent-list li { margin: 0 0 7px; line-height: 1.45; }
.mag-ent-list a { font-weight: 600; }
.mag-ent-desc { color: #6b6b6b; font-size: .88rem; }