/* =========================================================
   CLUBIM, le journal : page Actualités et articles
   Chaque article prend la forme d'un objet du quotidien.
   ========================================================= */
:root {
  --j-red: #BE3A48;
  --j-wine: #A93744;
  --j-wine-deep: #8F2C38;
  --j-cream: #F6EEE9;
  --j-ink: #2B2B2B;
  --j-muted: #6B6B6B;
  --j-paper: #FFFFFF;
  --j-line: #ECE8E6;
  --j-soft: #F6F3F1;
}

/* ---------- En-tête du journal ---------- */
.j-masthead { padding: 56px 0 28px; border-bottom: 1px solid var(--j-line); }
.j-masthead .breadcrumb { margin-bottom: 18px; }
.j-masthead h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; max-width: 14ch; }
.j-masthead h1 strong { font-weight: 500; }
.j-masthead p.j-lede { max-width: 56ch; color: var(--j-muted); margin-top: 16px; font-size: 1.05rem; }
.j-edition { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font-size: 0.88rem; color: var(--j-muted); }
.j-edition b { color: var(--j-ink); font-weight: 500; }

/* ---------- Grille du hub ---------- */
.j-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; padding: 40px 0 72px; }
.j-tile { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; background: var(--j-soft); min-height: 300px; transition: transform .25s ease; }
.j-tile:hover { transform: translateY(-3px); }
.j-tile:focus-visible { outline: 3px solid var(--j-red); outline-offset: 3px; }
.j-tile .j-obj { flex: 1; display: flex; align-items: center; justify-content: center; padding: 26px; }
.j-tile .j-cap { padding: 18px 24px 24px; }
.j-tile .j-cap h2 { font-size: 1.25rem; font-weight: 500; line-height: 1.25; margin: 4px 0 6px; }
.j-tile .j-cap p { font-size: .93rem; color: var(--j-muted); }
.j-tile .j-kind { font-size: .82rem; color: var(--j-red); font-weight: 500; }
.j-t-wide { grid-column: span 4; }
.j-t-side { grid-column: span 2; }
.j-t-third { grid-column: span 2; }
.j-t-half { grid-column: span 3; }
.j-tile.is-wine { background: linear-gradient(160deg, var(--j-wine), var(--j-wine-deep)); color: var(--j-cream); }
.j-tile.is-wine .j-cap p { color: #E9D5D3; }
.j-tile.is-wine .j-kind { color: #F3C9CD; }
@media (max-width: 900px) {
  .j-board { grid-template-columns: 1fr 1fr; }
  .j-t-wide, .j-t-half { grid-column: span 2; }
  .j-t-side, .j-t-third { grid-column: span 1; }
}
@media (max-width: 560px) {
  .j-board { grid-template-columns: 1fr; }
  .j-t-wide, .j-t-half, .j-t-side, .j-t-third { grid-column: span 1; }
}

/* mini objets du hub */
.mini-count { display: flex; gap: 10px; }
.mini-count span { display: grid; place-items: center; width: 74px; height: 92px; border-radius: 12px; background: rgba(0,0,0,.18); font-size: 2.6rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.mini-count small { display: block; text-align: center; font-size: .75rem; margin-top: 6px; color: #F3C9CD; }
.mini-weather { font-size: 3.6rem; line-height: 1; }
.mini-weather b { display: block; font-size: 1.6rem; font-weight: 500; margin-top: 8px; text-align: center; }
.mini-tv { width: 190px; aspect-ratio: 16/10; border: 6px solid var(--j-ink); border-radius: 18px; display: grid; place-items: center; background: var(--j-ink); color: var(--j-cream); font-size: .95rem; text-align: center; padding: 10px; position: relative; }
.mini-tv::after { content: ""; position: absolute; bottom: -18px; left: 50%; width: 60px; height: 10px; background: var(--j-ink); transform: translateX(-50%); border-radius: 0 0 8px 8px; }
.mini-calc { width: 150px; background: var(--j-ink); border-radius: 16px; padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-calc .scr { grid-column: span 3; background: #DCE5D3; color: var(--j-ink); border-radius: 6px; text-align: right; padding: 6px 8px; font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.mini-calc i { height: 22px; border-radius: 5px; background: #4A4A4A; }
.mini-calc i.r { background: var(--j-red); }
.mini-receipt { width: 170px; background: #fff; box-shadow: 0 10px 25px rgba(43,43,43,.12); padding: 14px 14px 22px; font-family: "Courier Prime", ui-monospace, monospace; font-size: .78rem; line-height: 1.5; transform: rotate(-3deg); -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0/14px 100% repeat-x; mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0/14px 100% repeat-x; }
.mini-receipt div { display: flex; justify-content: space-between; }
.mini-quiz { display: flex; gap: 10px; }
.mini-quiz span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; font-weight: 500; background: #fff; box-shadow: 0 6px 16px rgba(43,43,43,.08); }
.mini-quiz span.ok { background: var(--j-red); color: #fff; }

/* ---------- Article : gabarit commun ---------- */
.j-article-head { padding: 52px 0 26px; }
.j-article-head .breadcrumb { margin-bottom: 18px; }
.j-article-head h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; max-width: 20ch; }
.j-article-head .j-meta { margin-top: 14px; color: var(--j-muted); font-size: .9rem; }
.j-article-head .j-chapo { margin-top: 20px; font-size: 1.12rem; max-width: 60ch; }
.j-prose { max-width: 66ch; padding: 10px 0 30px; }
.j-prose h2 { font-size: 1.4rem; font-weight: 500; margin: 38px 0 12px; }
.j-prose p { margin-bottom: 14px; }
.j-prose ul { margin: 0 0 16px 1.2em; }
.j-prose li { margin-bottom: 6px; }
.j-aside { background: var(--j-soft); border-radius: 18px; padding: 22px 24px; margin: 26px 0; max-width: 66ch; }
.j-aside h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 6px; }
.j-sources { border-top: 1px solid var(--j-line); padding: 22px 0 10px; font-size: .86rem; color: var(--j-muted); max-width: 66ch; }
.j-sources h2 { font-size: .95rem; font-weight: 500; color: var(--j-ink); margin-bottom: 8px; }
.j-sources li { margin: 0 0 4px 1.1em; }
.j-sources a { color: var(--j-muted); }
.j-next { display: flex; flex-wrap: wrap; gap: 12px; padding: 18px 0 70px; }
.j-stage { margin: 18px 0 30px; }

/* ---------- 1. Compte à rebours ---------- */
.cd-board { background: linear-gradient(160deg, var(--j-wine), var(--j-wine-deep)); color: var(--j-cream); border-radius: 28px; padding: 34px clamp(20px, 4vw, 48px); }
.cd-board h2 { font-size: 1.1rem; font-weight: 400; margin-bottom: 18px; color: #F3C9CD; }
.cd-digits { display: flex; flex-wrap: wrap; gap: 14px; }
.cd-digits div { text-align: center; }
.cd-digits b { display: grid; place-items: center; min-width: 96px; height: 116px; padding: 0 12px; border-radius: 16px; background: rgba(0,0,0,.2); font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 300; font-variant-numeric: tabular-nums; }
.cd-digits small { display: block; margin-top: 8px; font-size: .85rem; color: #F3C9CD; }
.cd-steps { list-style: none; margin-top: 30px; display: grid; gap: 0; }
.cd-steps li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(246,238,233,.25); }
.cd-steps li time { font-weight: 500; }
.cd-steps li.is-next { color: #fff; }
.cd-steps li.is-next time::after { content: " ●"; color: #F3C9CD; }
@media (max-width: 560px) { .cd-steps li { grid-template-columns: 1fr; gap: 2px; } .cd-digits b { min-width: 72px; height: 92px; } }

/* ---------- 2. Météo des taux ---------- */
.wx { background: linear-gradient(180deg, #E9EEF2 0%, #F6F3F1 100%); border-radius: 28px; padding: 30px clamp(18px, 4vw, 40px); }
.wx-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.wx-head h2 { font-size: 1.15rem; font-weight: 500; }
.wx-head span { color: var(--j-muted); font-size: .9rem; }
.wx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wx-card { background: #fff; border-radius: 20px; padding: 22px; text-align: center; }
.wx-card .ic { font-size: 3rem; line-height: 1; }
.wx-card h3 { font-size: 1rem; font-weight: 500; margin-top: 10px; }
.wx-card .t { font-size: 2.4rem; font-weight: 300; font-variant-numeric: tabular-nums; margin: 4px 0; }
.wx-card .d { font-size: .88rem; color: var(--j-red); font-weight: 500; }
.wx-card .was { font-size: .82rem; color: var(--j-muted); }
.wx-alert { margin-top: 18px; background: #fff; border-left: 4px solid var(--j-red); border-radius: 12px; padding: 14px 18px; font-size: .95rem; }
@media (max-width: 640px) { .wx-grid { grid-template-columns: 1fr; } }

/* ---------- 3. Feuilleton ---------- */
.tv-recap { background: var(--j-ink); color: var(--j-cream); border-radius: 28px; padding: 30px clamp(18px, 4vw, 40px); }
.tv-recap .prev { font-style: italic; color: #CFCFCF; margin-bottom: 18px; }
.tv-eps { display: grid; gap: 14px; }
.tv-ep { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: start; background: #353535; border-radius: 18px; padding: 18px; }
.tv-ep .num { aspect-ratio: 1; border-radius: 14px; background: var(--j-wine); display: grid; place-items: center; text-align: center; font-size: .78rem; line-height: 1.2; }
.tv-ep .num b { display: block; font-size: 1.8rem; font-weight: 300; }
.tv-ep h3 { font-size: 1.08rem; font-weight: 500; margin-bottom: 4px; }
.tv-ep p { font-size: .95rem; color: #DDD; }
.tv-ep.is-cliff { outline: 2px dashed #E9707C; outline-offset: -6px; }
.tv-next { margin-top: 18px; font-size: .95rem; color: #F3C9CD; }
@media (max-width: 560px) { .tv-ep { grid-template-columns: 64px 1fr; } }

/* ---------- 4. Calculatrice IRL ---------- */
.calc { max-width: 430px; background: var(--j-ink); border-radius: 32px; padding: 24px; color: var(--j-cream); box-shadow: 0 24px 50px rgba(43,43,43,.18); }
.calc-screen { background: #DCE5D3; color: var(--j-ink); border-radius: 14px; padding: 16px 18px; text-align: right; min-height: 118px; }
.calc-screen small { display: block; font-size: .8rem; color: #4E5A44; }
.calc-screen output { display: block; font-size: 2.4rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.calc-screen .plus { font-size: .95rem; }
.calc label { display: block; margin: 18px 4px 8px; font-size: .92rem; }
.calc input { width: 100%; font: inherit; font-size: 1.3rem; padding: 12px 14px; border-radius: 12px; border: 0; background: #3E3E3E; color: #fff; font-variant-numeric: tabular-nums; }
.calc input:focus-visible { outline: 3px solid #E9707C; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.calc-keys button { font: inherit; padding: 12px 0; border: 0; border-radius: 12px; background: #4A4A4A; color: #fff; cursor: pointer; }
.calc-keys button.eq { background: var(--j-red); }
.calc-keys button:focus-visible { outline: 3px solid #E9707C; }
.calc-note { font-size: .8rem; color: #BDBDBD; margin-top: 14px; }
.j-split { display: grid; grid-template-columns: minmax(0, 430px) 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .j-split { grid-template-columns: 1fr; } }

/* ---------- 5. Ticket de caisse ---------- */
.receipt { max-width: 380px; margin: 10px auto; background: #fff; padding: 30px 28px 44px; font-family: "Courier Prime", ui-monospace, monospace; font-size: .98rem; line-height: 1.55; box-shadow: 0 18px 45px rgba(43,43,43,.12); -webkit-mask: radial-gradient(circle 9px at 50% 100%, transparent 98%, #000) 0 0/20px 100% repeat-x; mask: radial-gradient(circle 9px at 50% 100%, transparent 98%, #000) 0 0/20px 100% repeat-x; }
.receipt .c { text-align: center; }
.receipt hr { border: 0; border-top: 1px dashed #9A9A9A; margin: 12px 0; }
.receipt .l { display: flex; justify-content: space-between; gap: 12px; }
.receipt .l span:last-child { white-space: nowrap; }
.receipt .s { font-size: .82rem; color: #6B6B6B; padding-left: 1em; }
.receipt .tot { font-weight: 700; font-size: 1.1rem; }
.receipt-wrap { background: var(--j-soft); border-radius: 28px; padding: 34px 16px; }

/* ---------- 6. Quiz ---------- */
.quiz { display: grid; gap: 18px; max-width: 760px; }
.qz { background: var(--j-soft); border-radius: 22px; padding: 22px 24px; border: 0; }
.qz legend { float: left; width: 100%; font-weight: 500; font-size: 1.08rem; margin-bottom: 12px; }
.qz .opts { clear: both; display: flex; flex-wrap: wrap; gap: 10px; }
.qz button { font: inherit; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--j-ink); background: #fff; cursor: pointer; }
.qz button:focus-visible { outline: 3px solid var(--j-red); outline-offset: 2px; }
.qz button[aria-pressed="true"].good { background: #2E6B4E; border-color: #2E6B4E; color: #fff; }
.qz button[aria-pressed="true"].bad { background: var(--j-red); border-color: var(--j-red); color: #fff; }
.qz .why { display: none; margin-top: 12px; font-size: .95rem; }
.qz.done .why { display: block; }
.quiz-score { position: sticky; bottom: 16px; justify-self: start; background: var(--j-ink); color: #fff; border-radius: 999px; padding: 10px 20px; font-size: .95rem; }

@media (prefers-reduced-motion: reduce) { .j-tile { transition: none; } .j-tile:hover { transform: none; } }

/* correctifs de contraste et largeur */
.j-tile.is-wine h2, .j-tile.is-wine .j-cap h2 { color: var(--j-cream); }
.mini-quiz span { color: var(--j-ink); }
.mini-quiz span.ok { color: #fff; }
.j-t-full { grid-column: 1 / -1; flex-direction: row; min-height: 0; }
.j-t-full .j-obj { flex: 0 0 auto; padding: 26px 34px; }
.j-t-full .j-cap { align-self: center; }
@media (max-width: 560px) { .j-t-full { flex-direction: column; } }
.tv-ep h3 { color: var(--j-cream); }
.cd-board h2, .j-tile.is-wine .j-kind { color: #F3C9CD; }