/* Le Journal Officieux : la page en papier, l'envers du site (fond clair, encre, serif de journal). */
.journal-page {
  position: relative; color: var(--encre); padding: clamp(32px, 5vw, 64px) 0 clamp(64px, 8vw, 110px);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .35), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(120, 95, 50, .12), transparent 60%),
    var(--papier);
}
.journal-page::before { /* fibres du papier */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .6' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
.journal-page .conteneur { position: relative; max-width: 1180px; }
.journal-page a { color: var(--rouge); }

/* La une */
.une { text-align: center; border-top: 4px double var(--encre); border-bottom: 4px double var(--encre); padding: 10px 0 0; margin-bottom: clamp(40px, 6vw, 72px); }
.une__haut, .une__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font: 700 11px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #4d473e; }
.une__haut { padding-bottom: 10px; border-bottom: 1px solid var(--encre); }
.une__bas { padding: 10px 0; border-top: 1px solid var(--encre); margin-top: 18px; }
.une__republique { margin: 22px 0 0; font: 700 clamp(12px, 1.3vw, 15px)/1 var(--f-mono); letter-spacing: .5em; text-transform: uppercase; }
.une__titre { margin: 8px 0 0; font: 900 clamp(52px, 10.5vw, 150px)/.92 var(--f-journal); letter-spacing: -.02em; }
.une__sous { margin: 12px auto 0; max-width: 760px; font: italic 400 clamp(16px, 1.8vw, 21px)/1.4 var(--f-journal); color: #3d372f; }

/* Rubriques */
.rubrique { padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--encre); }
.rubrique__tete { max-width: 760px; margin-bottom: 30px; }
.rubrique__tete--ligne { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.rubrique__tete--ligne > div { max-width: 760px; }
.rubrique__num { display: inline-block; margin-bottom: 10px; color: var(--rouge); font: 700 12px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; }
.rubrique h2 { margin: 0; font: 900 clamp(32px, 4.4vw, 56px)/1.02 var(--f-journal); letter-spacing: -.015em; }
.rubrique__tete p { margin: 12px 0 0; font: 400 18px/1.55 var(--f-journal); color: #3d372f; }
.rubrique--deux { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.rubrique--deux .rubrique__tete { margin-bottom: 0; }
.boutons-ligne { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.bouton.encre { color: var(--encre); border-color: var(--encre); }
.bouton.encre:hover { background: var(--encre); color: var(--papier); }
.papier .trad__face { background: #F1EBDD; }

/* Le communiqué */
.communique { padding: clamp(24px, 3vw, 36px); background: #FBF8F1; border: 1px solid rgba(26, 23, 20, .25); box-shadow: 0 1px 0 rgba(26, 23, 20, .08), 8px 10px 0 rgba(26, 23, 20, .08); transform: rotate(.4deg); }
.communique__tete { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--encre); font: 700 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.communique__ministere small { font-weight: 500; color: #6d665a; }
.communique__texte { min-height: 7.5em; margin: 22px 0; font: 400 clamp(19px, 2vw, 24px)/1.5 var(--f-journal); }
.communique__texte.tape { animation: encre .7s ease both; }
@keyframes encre { from { opacity: 0; filter: blur(3px); } }
.communique__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding-top: 16px; border-top: 1px dashed rgba(26, 23, 20, .4); }
.jauge span { display: block; color: #6d665a; font: 700 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.jauge b { font: 400 32px/1.1 var(--f-titre); }
.communique .tampon { margin-left: auto; font-size: 12px; }

/* Le caviardeur */
.reglage-cav { margin-top: 26px; display: grid; gap: 10px; font: 700 12px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.reglage-cav b { color: var(--rouge); }
.reglage-cav input[type="range"] { accent-color: var(--rouge); width: 100%; }
.caviardeur textarea { width: 100%; padding: 16px 18px; border: 1px solid rgba(26, 23, 20, .35); background: #FBF8F1; color: var(--encre); font: 400 17px/1.55 var(--f-journal); resize: vertical; }
.caviardeur textarea:focus { outline: 2px solid var(--rouge); outline-offset: 2px; }
.caviardeur__sortie { margin-top: 14px; padding: 22px 22px; min-height: 120px; background: #FBF8F1; border: 1px solid rgba(26, 23, 20, .25); font: 400 19px/1.75 var(--f-journal); }
.caviardeur__sortie .barre { background: var(--encre); color: transparent; padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; user-select: none; }
.caviardeur__note { margin: 10px 0 0; color: #6d665a; font: 500 12px/1.5 var(--f-mono); }

/* Le bingo */
.bingo { display: grid; grid-template-columns: repeat(5, 1fr); border: 2px solid var(--encre); background: var(--encre); gap: 2px; }
.bingo__case { position: relative; min-height: 112px; padding: 12px; border: 0; background: #FBF8F1; color: var(--encre); cursor: pointer; font: 400 clamp(13px, 1.25vw, 16px)/1.3 var(--f-journal); transition: background .15s; }
.bingo__case:hover { background: #F1EBDD; }
.bingo__case.coche::after {
  content: ""; position: absolute; inset: 14%; border: 4px solid var(--rouge); border-radius: 50%; opacity: .85; transform: rotate(-8deg);
  animation: coche .25s ease-out both;
}
@keyframes coche { from { transform: scale(1.4) rotate(-8deg); opacity: 0; } }
.bingo__case.libre { background: var(--encre); color: var(--papier); cursor: default; font-weight: 700; }
.bingo__case.libre::after { border-color: var(--rouge); }
.bingo.gagne { animation: gagne .6s ease 2; }
@keyframes gagne { 50% { box-shadow: 0 0 0 8px rgba(215, 25, 42, .35); } }

/* Le Code à l'envers */
.articles-code { columns: 2 340px; column-gap: 48px; column-rule: 1px solid rgba(26, 23, 20, .3); }
.articles-code p { break-inside: avoid; margin: 0 0 18px; font: 400 18px/1.6 var(--f-journal); text-align: justify; hyphens: auto; }
.articles-code b { font-weight: 900; }

/* Les annonces */
.annonces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 0; border-top: 1px solid var(--encre); border-left: 1px solid var(--encre); }
.annonces p { margin: 0; padding: 18px 18px; border-right: 1px solid var(--encre); border-bottom: 1px solid var(--encre); font: 400 16px/1.5 var(--f-journal); }
.annonces b { display: block; margin-bottom: 4px; font: 400 22px/1 var(--f-titre); text-transform: uppercase; letter-spacing: .02em; }

.avertissement-satire { display: flex; align-items: center; gap: 24px; margin-top: 48px; padding: 22px 24px; border: 2px solid var(--encre); }
.avertissement-satire p { margin: 0; font: 400 16px/1.55 var(--f-journal); }
.avertissement-satire .tampon { flex: none; mix-blend-mode: multiply; }

@media (max-width: 900px) {
  .rubrique--deux { grid-template-columns: 1fr; }
  .bingo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bingo__case { min-height: 84px; padding: 6px; font-size: 11.5px; }
}
@media (max-width: 560px) {
  .bingo__case { min-height: 72px; font-size: 10px; padding: 4px; }
  .avertissement-satire { flex-direction: column; align-items: flex-start; }
  .communique__tete { flex-direction: column; }
}
body.papier::after { background: radial-gradient(ellipse at 50% 40%, transparent 60%, rgba(40, 28, 10, .22) 100%); }
body.papier::before { opacity: .05; }