/* ============================================================
   Journal "Phénoménal" — charte journal (bleu/rouge/noir).
   Unités en mm : la préview éditeur et le PDF puppeteer partagent
   exactement ces styles (fidélité préview = print).
   ============================================================ */

:root {
  --jr-blue: #1f4ea1;
  --jr-red: #e8332a;
  --jr-black: #111111;
  --jr-grey: #e9e9e9;
  --jr-serif: "PlayfairDisplay", Georgia, serif;
  --jr-cond: "Anton", "Arial Narrow", sans-serif;
  --jr-cond2: "BarlowCondensed", "Arial Narrow", sans-serif;
  --jr-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --jr-body: "Georgia", "Times New Roman", serif;
}

/* ---- Page A5 ---- */
.a5page {
  width: 148.5mm;
  height: 210mm;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  padding: 6mm 7mm 7mm;
  font-family: var(--jr-body);
  font-size: 3.2mm;
  line-height: 1.35;
  color: var(--jr-black);
}
.a5page * {
  box-sizing: border-box;
}

/* ---- Face A4 paysage (2 pages A5) ---- */
.sheet {
  width: 297mm;
  height: 210mm;
  display: flex;
  overflow: hidden;
  background: #fff;
  page-break-after: always;
  break-after: page;
}
.sheet .a5page:first-child {
  border-right: 0.2mm solid #ccc;
}

@page {
  size: 297mm 210mm;
  margin: 0;
}

@media print {
  body {
    margin: 0;
  }
}

/* ---- Manchette (une) ---- */
.jr-masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 0.6mm solid var(--jr-black);
  padding-bottom: 2mm;
  min-height: 32mm;
}
.jr-masthead-logo img {
  max-height: 22mm;
  max-width: 26mm;
  object-fit: contain;
}
.jr-logo-placeholder {
  font-family: var(--jr-cond);
  font-size: 5mm;
  max-width: 28mm;
}
.jr-masthead-title {
  text-align: center;
  flex: 1;
  padding: 0 3mm;
}
.jr-masthead-overline {
  display: inline-block;
  background: var(--jr-black);
  color: #fff;
  font-family: var(--jr-sans);
  font-weight: 700;
  font-size: 3.4mm;
  padding: 0.5mm 2.5mm;
  border-radius: 1mm;
}
.jr-masthead-title h1 {
  font-family: var(--jr-serif);
  font-style: italic;
  font-weight: 900;
  font-size: 13mm;
  line-height: 1;
  margin: 0.5mm 0;
  color: var(--jr-blue);
  letter-spacing: -0.3mm;
}
.jr-masthead-tagline {
  display: inline-block;
  background: var(--jr-black);
  color: #fff;
  font-family: var(--jr-sans);
  font-weight: 600;
  font-size: 2.9mm;
  padding: 0.4mm 2mm;
}
.jr-masthead-date {
  font-size: 2.9mm;
  margin: 1.5mm auto 0;
  border: 0.2mm solid var(--jr-black);
  display: block;
  width: fit-content;
  padding: 0.4mm 1.5mm;
}
.jr-masthead-brand {
  text-align: center;
  width: 26mm;
}
.jr-s2f-logo {
  max-height: 16mm;
  max-width: 24mm;
}
.jr-masthead-url {
  font-size: 2.6mm;
  margin-top: 1mm;
  font-family: var(--jr-sans);
}

/* ---- Folio pages intérieures ---- */
.jr-folio {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 0.4mm solid var(--jr-black);
  padding-bottom: 1.2mm;
  margin-bottom: 3mm;
  font-family: var(--jr-sans);
  font-size: 2.7mm;
}
.jr-folio-num {
  font-family: var(--jr-cond);
  font-size: 5.5mm;
  font-weight: 700;
  margin-right: 1.5mm;
}
.jr-folio-site {
  text-align: right;
  font-size: 2.5mm;
  line-height: 1.3;
}
.jr-folio-left .jr-folio-site {
  text-align: right;
}
.jr-folio-right .jr-folio-site {
  text-align: left;
}
.jr-folio-center {
  font-family: var(--jr-cond);
  font-size: 4.2mm;
  letter-spacing: 0.2mm;
  text-transform: uppercase;
}

/* ---- Bandeau de section ---- */
.jr-section-chip {
  display: inline-block;
  transform: skewX(-12deg);
  padding: 1.2mm 6mm;
  margin: 0 0 3mm 1mm;
  color: #fff;
  font-family: var(--jr-sans);
  font-weight: 700;
  font-style: italic;
  font-size: 4.2mm;
}
.jr-section-chip span {
  display: inline-block;
  transform: skewX(12deg);
}
.jr-chip-blue {
  background: var(--jr-blue);
}
.jr-chip-red {
  background: var(--jr-red);
}

/* ---- Titres & articles ---- */
.jr-headline {
  font-family: var(--jr-sans);
  font-weight: 800;
  font-size: 5.6mm;
  line-height: 1.15;
  margin: 2mm 0;
}
.jr-page-team .jr-headline {
  font-size: 4.4mm;
  margin: 1mm 0 1.5mm;
}
.jr-article-body p {
  margin: 0 0 1.8mm;
  text-align: justify;
}
.jr-cols-3 {
  column-count: 3;
  column-gap: 4mm;
}
.jr-cols-2 {
  column-count: 2;
  column-gap: 4mm;
}
.jr-lineup {
  font-size: 3mm;
  margin-top: 2mm;
}

/* ---- Photos ---- */
.jr-photo {
  margin: 0;
}
.jr-photo img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.jr-photo figcaption {
  font-size: 2.6mm;
  color: #444;
  margin-top: 0.8mm;
}
.jr-photo-empty {
  background: var(--jr-grey);
  min-height: 40mm;
  border: 0.3mm dashed #bbb;
}
.jr-photo-wide img {
  height: 78mm;
}
.jr-photo-wide.jr-photo-empty {
  min-height: 78mm;
}

/* ---- Une ---- */
.jr-page-une {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.jr-une-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 2mm;
}
.jr-une-hero-photos {
  position: relative;
  display: flex;
  gap: 1mm;
}
.jr-une-hero-photo {
  flex: 1;
}
.jr-une-hero-photo img,
.jr-une-hero-photo.jr-photo-empty {
  height: 82mm;
}
.jr-une-hero-photos {
  margin-top: 3mm;
}
.jr-une-headline {
  white-space: pre-line;
  position: absolute;
  right: 3mm;
  bottom: 4mm;
  text-align: right;
  color: #fff;
  font-family: var(--jr-cond);
  font-size: 7.5mm;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 0 2mm rgba(0, 0, 0, 0.85);
}
.jr-une-bottom {
  display: flex;
  gap: 3mm;
  margin-top: 3mm;
  flex: 1;
}
.jr-une-teaser {
  flex: 1.2;
}
.jr-une-teaser h3 {
  font-family: var(--jr-sans);
  font-weight: 700;
  font-size: 4mm;
  margin: 0 0 1.5mm;
}
.jr-une-teaser-photo img,
.jr-une-teaser-photo.jr-photo-empty {
  height: 58mm;
}

/* ---- Publicités ---- */
/* Lien sponsor (règle additive : le wrapper <a> occupe toute la pub). */
.jr-ad a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.jr-ad {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jr-ad img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.jr-ad-empty {
  background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 4mm, #ececec 4mm, #ececec 8mm);
  border: 0.3mm dashed #ccc;
}
.jr-ad-banner {
  position: absolute;
  left: 7mm;
  right: 7mm;
  bottom: 7mm;
  height: 30mm;
  background: #fff;
}
.jr-ad-banner-tall {
  position: static;
  height: 34mm;
  margin-top: 4mm;
}
.jr-ad-column {
  flex: 1;
  min-height: 58mm;
}
.jr-ad-fullpage {
  position: absolute;
  top: 14mm;
  left: 7mm;
  right: 7mm;
  bottom: 7mm;
}
/* Titre optionnel de la pub pleine page (sponsor.adTitle) — règles
   additives : quand le titre est présent, la pub descend pour lui laisser
   la place. */
.jr-ad-title {
  font-family: var(--jr-cond);
  font-size: 7mm;
  line-height: 1.05;
  text-transform: uppercase;
  text-align: center;
  margin: 2mm 0 0;
  position: relative;
  z-index: 1;
}
/* Avec titre, la pub commence sous lui au lieu de recouvrir le haut. */
.jr-ad-title ~ .jr-ad-fullpage {
  top: 27mm;
}
.jr-ad-block {
  height: 26mm;
  margin-bottom: 3mm;
}
.jr-ad-text {
  padding: 3mm;
  text-align: center;
}
.jr-ad-name {
  font-family: var(--jr-cond);
  font-size: 6mm;
}
.jr-ad-body {
  font-size: 3mm;
}

/* ---- Page équipe ---- */
.jr-page-team {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 40mm;
}
.jr-team-top {
  display: flex;
  gap: 4mm;
}
.jr-team-article {
  flex: 1.1;
}
.jr-team-article .jr-article-body {
  font-size: 2.9mm;
}
.jr-team-photo-col {
  flex: 1;
}
.jr-team-photo img,
.jr-team-photo.jr-photo-empty {
  height: 54mm;
}
.jr-score-chip {
  display: flex;
  font-family: var(--jr-cond2);
  font-weight: 700;
  font-size: 3.4mm;
  margin-bottom: 1mm;
}
.jr-score-team {
  padding: 0.8mm 2.5mm;
  color: #fff;
  text-transform: uppercase;
}
.jr-score-team-b {
  background: #f5d800;
  color: var(--jr-black);
}
.jr-score-value {
  padding: 0.8mm 2mm;
  background: var(--jr-black);
  color: #fff;
}
.jr-coach-quote {
  text-align: center;
  margin: 2mm 0;
}
.jr-coach-quote-title {
  font-family: var(--jr-sans);
  font-weight: 800;
  font-size: 4.2mm;
}
.jr-coach-quote-text {
  font-family: var(--jr-sans);
  font-weight: 600;
  font-size: 3.2mm;
  margin-top: 0.8mm;
}
.jr-team-tables {
  display: flex;
  gap: 4mm;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Résultats du championnat */
.jr-results {
  flex: 1.3;
}
.jr-results-title {
  display: inline-block;
  background: var(--jr-red);
  color: #fff;
  transform: skewX(-12deg);
  font-family: var(--jr-sans);
  font-weight: 700;
  font-size: 3mm;
  padding: 0.8mm 4mm;
  margin-bottom: 1.5mm;
  text-transform: uppercase;
}
.jr-results table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--jr-cond2);
  font-size: 3mm;
}
.jr-results td {
  background: var(--jr-grey);
  padding: 0.7mm 1.5mm;
  border-bottom: 0.5mm solid #fff;
}
.jr-res-team-a {
  text-align: right;
  font-weight: 700;
  width: 42%;
}
.jr-res-score {
  text-align: center;
  font-weight: 700;
  width: 12%;
}
.jr-res-team-b {
  font-weight: 700;
}

/* Classement général */
.jr-standings {
  flex: 1;
}
.jr-standings-header {
  text-align: center;
  font-family: var(--jr-sans);
  font-weight: 800;
  font-size: 3.2mm;
  text-transform: uppercase;
  margin-bottom: 1mm;
}
.jr-standings-sub {
  background: var(--jr-black);
  color: #fff;
  text-align: center;
  font-family: var(--jr-cond2);
  font-size: 2.8mm;
  padding: 0.8mm;
}
.jr-standings table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--jr-cond2);
  font-size: 2.4mm;
  line-height: 1.15;
}
.jr-standings th {
  font-size: 2.2mm;
  text-align: right;
  padding: 0.3mm 1mm;
}
.jr-standings td {
  padding: 0.35mm 1mm;
  border-bottom: 0.2mm solid #ddd;
}
.jr-standing-rank {
  width: 6mm;
  font-weight: 700;
}
.jr-standing-pts,
.jr-standing-diff {
  text-align: right;
  width: 8mm;
}

/* ---- Article libre ---- */
.jr-page-free {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 40mm;
}
.jr-free-body {
  display: flex;
  gap: 4mm;
  flex: 1;
}
.jr-free-body .jr-article-body {
  flex: 1;
}
.jr-free-photos {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  gap: 2mm;
}
.jr-free-photo img,
.jr-free-photo.jr-photo-empty {
  height: 48mm;
}

/* ---- Visage / Actus ---- */
.jr-page-visage,
.jr-page-actus {
  padding-bottom: 42mm;
}

/* ---- Agenda ---- */
.jr-agenda {
  margin-top: 2mm;
}
.jr-agenda-day {
  margin-bottom: 3.5mm;
}
.jr-agenda-day-label {
  font-family: var(--jr-cond2);
  font-weight: 700;
  font-size: 3.6mm;
  text-transform: uppercase;
  margin-bottom: 1mm;
}
.jr-agenda-match {
  display: flex;
  align-items: center;
  gap: 1.5mm;
  background: var(--jr-grey);
  border-radius: 3mm;
  padding: 0.8mm 2mm;
  margin-bottom: 1mm;
  font-family: var(--jr-cond2);
  font-size: 3.1mm;
}
.jr-agenda-time {
  border: 0.3mm solid var(--jr-black);
  border-radius: 2.5mm;
  background: #fff;
  padding: 0.3mm 2mm;
  font-weight: 700;
}
.jr-agenda-team {
  flex: 1;
  text-align: right;
  text-transform: uppercase;
  font-weight: 700;
}
.jr-agenda-team + .jr-agenda-vs + .jr-agenda-team {
  text-align: left;
}
.jr-agenda-club {
  color: var(--jr-blue);
}
.jr-agenda-vs {
  font-weight: 800;
  font-size: 2.6mm;
}

/* ---- Annonces ---- */
.jr-annonces {
  display: flex;
  gap: 4mm;
}
.jr-annonces-cols {
  flex: 2;
  column-count: 2;
  column-gap: 4mm;
}
.jr-annonce {
  break-inside: avoid;
  margin-bottom: 3.5mm;
}
.jr-annonce-cat {
  background: var(--jr-red);
  color: #fff;
  font-family: var(--jr-sans);
  font-weight: 700;
  font-size: 3mm;
  padding: 0.8mm 2mm;
  margin-bottom: 1.2mm;
}
.jr-annonce-title {
  font-family: var(--jr-sans);
  font-weight: 800;
  font-size: 3.2mm;
  text-transform: uppercase;
  margin-bottom: 0.8mm;
}
.jr-annonce-text p {
  margin: 0 0 1mm;
  font-size: 2.9mm;
  text-align: justify;
}
.jr-annonces-ads {
  flex: 1;
}

/* ---- Préview éditeur ---- */
.jr-preview-frame {
  transform-origin: top left;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}