/* Les brèves — la rubrique courte du blog.
 *
 * Elle partage le gabarit du blog (blog_layout.css : en-tête, pied, boutons) mais
 * s'en distingue par une couleur : les articles de fond gardent le violet, les
 * brèves prennent l'ambre. C'est volontaire — les deux formats ne se lisent pas
 * de la même façon et il ne faut pas une seconde pour savoir lequel on a sous
 * les yeux. Trois pages l'utilisent : la liste des récaps, un numéro, une brève.
 */

:root {
  --brief: #b96a10;         /* texte et liens : contraste tenu sur fond clair */
  --brief-strong: #f0913d;  /* aplats et pastilles */
  --brief-soft: #fdf1e1;    /* fonds */
  --brief-line: #f2dcc0;    /* filets */
}

/* ----- Boutons de la rubrique ----- */
.btn.brief-btn { background: var(--brief-strong); color: #2a1804; }
.btn.brief-btn:hover { background: #e08628; }
.btn.ghost { border: 1.5px solid var(--border); background: #fff; color: var(--ink-soft); }
.btn.ghost:hover { border-color: var(--brief-strong); color: var(--brief); }

/* ----- En-tête ambre, commun à la liste et aux numéros ----- */
.brief-head { background: radial-gradient(900px 460px at 50% -30%, #3a2a15 0%, #151722 62%); color: #fff; padding: 58px 0 50px; text-align: center; }
.brief-head .pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(240,145,61,.15); border: 1px solid rgba(240,145,61,.45); color: #f0b070; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 5px 13px; border-radius: 999px; }
.brief-head h1 { font-size: 38px; letter-spacing: -.025em; margin: 14px 0 10px; }
.brief-head p { color: #b4b0a4; font-size: 16.5px; max-width: 640px; margin: 0 auto; }
.brief-head .dates { color: #b4b0a4; font-size: 16px; }
.brief-head .rules { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 24px; font-size: 12.5px; color: #8c8c9c; font-weight: 600; }
.brief-head .rules span { display: inline-flex; align-items: center; gap: 7px; }
.brief-head .rules b { color: #f0b070; }
.issue-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.issue-stats span { background: rgba(255,255,255,.06); border: 1px solid #4a4030; border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 700; color: #d8d2c6; }
.issue-stats b { color: #f0b070; }
.week-nav { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.week-nav a { font-size: 12.5px; font-weight: 700; color: #b4b0a4; border: 1px solid #4a4030; border-radius: 9px; padding: 8px 14px; }
.week-nav a:hover { color: #fff; border-color: var(--brief-strong); }

/* ================================================================
   LISTE DES RÉCAPS — un bloc par semaine, avec son sommaire
   ================================================================ */
/* Liste des récaps : le contenu à gauche, la colonne d'appoint à droite.
   Un numéro inverse le rapport (.cols.summary-left) — c'est le sommaire qui
   accompagne la lecture, il passe donc devant et prend la colonne étroite. */
.cols { display: grid; grid-template-columns: 1fr 300px; gap: 46px; padding: 40px 0 76px; align-items: start; }
.cols.summary-left { grid-template-columns: 274px 1fr; }
.year { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin: 6px 0 14px; display: flex; align-items: center; gap: 12px; }
.year::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.issue { border: 1px solid var(--brief-line); border-radius: 18px; overflow: hidden; margin-bottom: 20px; transition: box-shadow .12s ease, transform .12s ease; }
.issue:hover { box-shadow: 0 16px 40px rgba(185,106,16,.10); transform: translateY(-2px); }
.issue.latest { border-color: var(--brief-strong); box-shadow: 0 10px 30px rgba(240,145,61,.14); }
.i-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; background: #fffaf3; border-bottom: 1px solid var(--brief-line); }
.i-head .l { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.i-no { font-family: "SF Mono", Consolas, monospace; font-size: 12px; font-weight: 700; color: #2a1804; background: var(--brief-strong); border-radius: 8px; padding: 3px 9px; }
.i-head h2 { font-size: 19px; letter-spacing: -.02em; }
.i-head h2 a:hover { color: var(--brief); }
.i-head .dates { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }
.i-head .count { font-size: 11.5px; font-weight: 800; color: var(--brief); background: var(--brief-soft); border: 1px solid var(--brief-line); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.i-latest-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #2a1804; background: var(--brief-strong); border-radius: 999px; padding: 3px 10px; }
.i-intro { padding: 16px 22px 4px; color: var(--ink-soft); font-size: 14px; }
.i-intro b { color: var(--ink); }
.i-list { list-style: none; padding: 10px 22px 6px; }
.i-list li { border-top: 1px dashed var(--brief-line); }
.i-list li:first-child { border-top: none; }
.i-list a { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; }
.i-list .ic { font-size: 19px; line-height: 1; }
.i-list .t { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.i-list a:hover .t { color: var(--brief); }
.i-list .m { font-family: "SF Mono", Consolas, monospace; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.i-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 22px 16px; border-top: 1px solid var(--brief-line); }
.i-foot .src { font-size: 12px; color: var(--ink-faint); }
.i-foot a.open { font-size: 13px; font-weight: 800; color: var(--brief); }
.i-foot a.open:hover { text-decoration: underline; }

/* ----- Colonne latérale ----- */
.side { position: sticky; top: 88px; display: grid; gap: 18px; }
.box { border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; }
.box.amber { border-color: var(--brief-line); background: #fffaf3; }
.box h4 { font-size: 14px; margin-bottom: 8px; }
.box p { font-size: 13px; color: var(--ink-soft); }
.box ul { list-style: none; margin-top: 10px; display: grid; gap: 9px; }
.box li { font-size: 12.5px; color: var(--ink-soft); display: flex; gap: 8px; }
.box .k { color: var(--brief); font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.box input { width: 100%; border: 1.5px solid var(--border); border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 13.5px; background: #fff; margin-top: 10px; }
.box input:focus { outline: none; border-color: var(--brief-strong); }
.box .btn { width: 100%; justify-content: center; margin-top: 10px; }
.box .rgpd { font-size: 11px; color: var(--ink-faint); margin-top: 9px; text-align: center; }

/* ================================================================
   UN NUMÉRO — sommaire latéral collant + les brèves à la suite
   ================================================================ */
.toc { position: sticky; top: 78px; }
.toc .toc-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 12px; }
.toc ol { list-style: none; counter-reset: b; border-left: 2px solid var(--border); }
.toc li { counter-increment: b; }
.toc ol a { display: grid; grid-template-columns: 22px 1fr; gap: 9px; padding: 10px 12px 10px 14px; margin-left: -2px; border-left: 2px solid transparent; align-items: start; }
.toc ol a::before { content: counter(b); font-family: "SF Mono", Consolas, monospace; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); background: var(--bg); border-radius: 6px; width: 22px; height: 22px; display: grid; place-items: center; margin-top: 1px; }
.toc ol a .t { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink-soft); }
.toc ol a .m { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-top: 3px; }
.toc ol a:hover { background: #fffaf3; }
.toc ol a:hover .t { color: var(--ink); }
.toc ol a.on { border-left-color: var(--brief-strong); background: var(--brief-soft); }
.toc ol a.on .t { color: var(--ink); font-weight: 700; }
.toc ol a.on::before { background: var(--brief-strong); color: #2a1804; }
.toc ol a.on .m { color: var(--brief); }
.toc .toc-foot { margin-top: 16px; padding: 14px; border: 1px solid var(--brief-line); background: #fffaf3; border-radius: 13px; }
.toc .toc-foot p { font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; }
.toc .toc-foot .btn { width: 100%; justify-content: center; font-size: 13px; padding: 9px 14px; }

.intro { border: 1px solid var(--brief-line); background: #fffaf3; border-radius: 16px; padding: 20px 22px; margin-bottom: 12px; }
.intro h2 { font-size: 15px; margin-bottom: 6px; }
.intro p { font-size: 14px; color: var(--ink-soft); }

.b-item { padding: 34px 0 30px; border-bottom: 1px solid var(--border); scroll-margin-top: 84px; }
.b-item:last-of-type { border-bottom: none; }
.b-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.b-num { font-family: "SF Mono", Consolas, monospace; font-size: 11px; font-weight: 700; color: #2a1804; background: var(--brief-strong); border-radius: 7px; width: 24px; height: 24px; display: grid; place-items: center; }
.b-date { font-family: "SF Mono", Consolas, monospace; font-size: 11px; font-weight: 700; color: var(--brief); text-transform: uppercase; letter-spacing: .06em; }
.b-tag { font-size: 11px; font-weight: 800; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.b-len { font-size: 11px; font-weight: 700; color: var(--ink-faint); }
.b-title { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; }
.b-title .tile { width: 54px; height: 54px; border-radius: 15px; background: var(--brief-soft); border: 1px solid var(--brief-line); display: grid; place-items: center; font-size: 26px; }
.b-item h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.018em; }
.b-item h3 a:hover { color: var(--brief); }
.b-item .body { margin-left: 70px; }
.b-item .body p { color: #2c2f3f; font-size: 15.5px; line-height: 1.7; margin-top: 12px; }
.b-item .body strong { color: var(--ink); }
.src-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 11px 14px; border: 1px solid var(--brief-line); background: #fffaf3; border-radius: 11px; }
.src-line .s { font-size: 12.5px; color: var(--ink-soft); }
.src-line .s b { color: var(--ink); }
.src-line a { font-size: 12.5px; font-weight: 700; color: var(--brief); white-space: nowrap; }
.src-line a:hover { text-decoration: underline; }
.back-top { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 11.5px; font-weight: 700; color: var(--ink-faint); }
.back-top:hover { color: var(--brief); }

.issue-end { margin-top: 34px; border: 1px solid var(--brief-line); border-radius: 18px; overflow: hidden; }
.issue-end .top { background: #fffaf3; padding: 24px 26px; }
.issue-end h2 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 6px; }
.issue-end p { color: var(--ink-soft); font-size: 14px; }
.issue-end .form { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.issue-end input { flex: 1; min-width: 230px; border: 1.5px solid var(--brief-line); border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px; background: #fff; }
.issue-end input:focus { outline: none; border-color: var(--brief-strong); }
.issue-end .bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 26px; border-top: 1px solid var(--brief-line); }
.issue-end .bottom span { font-size: 13px; color: var(--ink-soft); }

/* ================================================================
   UNE BRÈVE — colonne étroite, pas de couverture, source obligatoire
   ================================================================ */
.brief-rule { height: 3px; background: linear-gradient(90deg, var(--brief-strong), #f0c23d); }
.narrow { max-width: 648px; margin: 0 auto; padding: 0 24px; }
.b-head { padding: 40px 24px 0; }
.b-glyph { width: 64px; height: 64px; border-radius: 18px; background: var(--brief-soft); border: 1px solid var(--brief-line); display: grid; place-items: center; font-size: 32px; margin-bottom: 20px; }
.badge-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.pill-brief { display: inline-flex; align-items: center; gap: 6px; background: var(--brief-soft); color: var(--brief); border: 1px solid var(--brief-line); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 5px 12px; border-radius: 999px; }
.b-head h1 { font-size: 31px; line-height: 1.2; letter-spacing: -.024em; }
.b-body { padding: 26px 24px 0; }
.b-body p { color: #2c2f3f; font-size: 16.5px; line-height: 1.72; margin: 0 0 18px; }
.b-body p.lead { font-size: 18px; color: var(--ink); font-weight: 500; }
.b-body strong { color: var(--ink); }

.source-box { border: 1px solid var(--brief-line); background: #fffaf3; border-radius: 14px; padding: 18px 20px; margin: 26px 0 20px; display: flex; gap: 14px; align-items: flex-start; }
.source-box .ic { font-size: 20px; line-height: 1.2; }
.source-box h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--brief); font-weight: 800; margin-bottom: 5px; }
.source-box p { font-size: 14px; color: var(--ink-soft); margin: 0; }
.source-box a { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--brief); }
.source-box a:hover { text-decoration: underline; }

.unknown { border-left: 3px solid var(--border); padding: 4px 0 4px 18px; margin: 24px 0; }
.unknown h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); font-weight: 800; margin-bottom: 7px; }
.unknown ul { list-style: none; display: grid; gap: 7px; }
.unknown li { font-size: 14px; color: var(--ink-soft); position: relative; padding-left: 18px; }
.unknown li::before { content: "?"; position: absolute; left: 0; color: var(--brief); font-weight: 800; }

.b-foot { margin-top: 26px; padding: 20px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.b-foot .tag { color: var(--brief); background: var(--brief-soft); border-color: var(--brief-line); }
.b-foot .share a:hover { border-color: var(--brief-strong); color: var(--brief); }
.nav-briefs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px auto 0; max-width: 648px; padding: 0 24px; }
.nav-briefs a { border: 1px solid var(--brief-line); border-radius: 14px; padding: 14px 16px; background: #fffdfa; }
.nav-briefs a:hover { border-color: var(--brief-strong); }
.nav-briefs .dir { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--brief); }
.nav-briefs h2 { font-size: 13.5px; line-height: 1.35; margin-top: 5px; font-weight: 700; }
.nav-briefs a.right { text-align: right; }

/* ----- CTA ambre, en pied de brève et de numéro ----- */
.cta.brief-cta { background: radial-gradient(800px 400px at 50% -40%, #3a2a15 0%, #151722 62%); }
.cta.brief-cta p { color: #b4b0a4; }
.cta.brief-cta input { border-color: #4a4030; background: #1d1c22; }
.cta.brief-cta input:focus { border-color: var(--brief-strong); }

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; gap: 30px; }
  .side, .toc { position: static; }
  .brief-head h1 { font-size: 28px; }
  .b-item .body { margin-left: 0; }
  .i-list a { grid-template-columns: 26px 1fr; }
  .i-list .m { display: none; }
  .b-head h1 { font-size: 25px; }
  .nav-briefs { grid-template-columns: 1fr; }
  .nav-briefs a.right { text-align: left; }
}