/* Chantier relais : le lien d'un club de supporters (/rejoindre/), son kit relais et son affiche A4 à imprimer. */
.relais-etapes { list-style: none; counter-reset: etape; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.relais-etapes li { counter-increment: etape; background: var(--ardoise); border: 1px solid var(--cadre); border-top: 3px solid var(--club-1); border-radius: var(--r-md); padding: 16px; display: grid; gap: 8px; align-content: start; }
.relais-etapes li::before { content: counter(etape); font: 800 32px/1 var(--f-display); color: var(--or-clair); }
.relais-etapes h2 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.relais-etapes p { margin: 0; }
.relais-action { display: grid; gap: 10px; margin-bottom: 16px; border-left: 3px solid var(--club-1); }
.relais-action h2, .relais-action p { margin: 0; }
.relais-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.relais-grille .panneau, .relais-equipe { display: grid; gap: 10px; align-content: start; min-width: 0; }
.relais-grille h2, .relais-equipe h2, .relais-grille p, .relais-equipe p { margin: 0; }
.relais-copie { display: grid; gap: 6px; justify-items: start; }
.relais-copie input, .relais-copie textarea { width: 100%; font: 15px/1.45 var(--f-texte); }
.relais-visuel { width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--cadre); }
.relais-equipe { border: 1px dashed var(--bronze); margin-bottom: 16px; }

/* L'affiche : une feuille A4 claire, la même à l'écran (aperçu) et à l'impression. */
.affiche-outils { display: grid; gap: 8px; margin-bottom: 16px; color: var(--brume); }
.affiche-outils p { margin: 0; }
.affiche { --encre: #14110C; position: relative; background: #FFFFFF; color: var(--encre); width: min(100%, 210mm); aspect-ratio: 210 / 297; margin: 0 auto 24px;
  padding: 0 9% 6%; display: flex; flex-direction: column; gap: 3.5%; box-sizing: border-box; border-radius: 4px; overflow: hidden; container-type: inline-size; }
.affiche-bande { position: absolute; inset: 0 0 auto; height: 2.6cqi; background: var(--club-1); }
.affiche-accroche { margin: 10cqi 0 0; font: 700 4.4cqi/1.1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #6B4E1E; }
.affiche h1 { margin: 0; font: 800 11cqi/1 var(--f-display); color: var(--encre); overflow-wrap: anywhere; }
.affiche-club { margin: 0; font: 600 4.6cqi/1.2 var(--f-texte); color: #3A3A3A; }
.affiche-corps { flex: 1; display: grid; grid-template-columns: 1fr 42%; gap: 6%; align-items: center; }
.affiche-etapes { margin: 0; padding-left: 1.2em; display: grid; gap: 3cqi; font: 500 4.3cqi/1.3 var(--f-texte); }
.affiche-etapes li::marker { font-family: var(--f-display); font-weight: 800; color: #6B4E1E; }
.affiche-code { margin: 0; display: grid; gap: 2cqi; justify-items: center; text-align: center; font: 3cqi/1.3 var(--f-texte); color: #3A3A3A; }
.affiche-code b { color: var(--encre); overflow-wrap: break-word; }
.affiche-qr { width: 100%; height: auto; display: block; }
.affiche-pied { margin: 0; font: 2.8cqi/1.4 var(--f-texte); color: #3A3A3A; border-top: 1px solid #CCCCCC; padding-top: 2.4cqi; }
@media (max-width: 520px) {
  .affiche { aspect-ratio: auto; gap: 5cqi; }
  .affiche-corps { flex: none; grid-template-columns: 1fr; gap: 6cqi; }
  .affiche-code { justify-self: center; width: 70%; }
}

@page { size: A4 portrait; margin: 0; }
@media print {
  .pied, .flash, .guide-fenetre, .affiche-outils, .relais-copie button { display: none !important; }
  main, main .wrap, .contenu { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; }
  .affiche { width: 210mm; height: 297mm; aspect-ratio: auto; margin: 0; border-radius: 0; break-inside: avoid; }
  .affiche-bande { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}