/* Le coupon des organismes communautaires (layouts/simple.php, .scoupon) : l'espace que Pouding chômeur offre gratuitement aux organismes
   du Québec. Un coupon à découper (pointillés, ciseaux, tampon « Gratuit ») ; c'est un bouton : il ouvre la fenêtre de contact. Sous le
   contenu sur petit écran ; sur grand écran, une colonne discrète à droite du contenu, placée par simple.js, jamais fixe. Seul dans la
   colonne depuis le 2026-10-29 (les annonces vers les autres sites de Mathieu sont retirées). */
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/designs/courier-prime.woff2") format("woff2"); }
.scoupon { display: grid; gap: 0.8rem; max-width: 75rem; margin: 2.5rem auto 0; padding: 0 1.1rem; }
.scoupon__lien { position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; margin-top: 0.5rem; padding: 0.9rem 1.2rem; font: inherit; font-family: "Courier Prime", ui-monospace, monospace; text-align: left; cursor: pointer; background: #fff; border: 0.125rem dashed #491703; border-radius: 0.4rem; color: #491703; text-decoration: none; }
.scoupon__lien:hover { background: #fff8ec; }
.scoupon__lien:focus-visible { outline: 0.2rem solid #491703; outline-offset: 0.2rem; }
.scoupon__lien::before { content: "✂"; position: absolute; top: -0.8rem; left: 1.1rem; padding: 0 0.25rem; background: var(--color-ground, #FAF9F6); color: #491703; font-size: 1.15rem; line-height: 1; }
.scoupon__tampon { position: absolute; top: -0.75rem; right: 1rem; transform: rotate(8deg); padding: 0.3rem 0.45rem; border: 0.15rem solid #BF5810; background: #fff; color: #BF5810; font: 700 0.75rem/1 "Courier Prime", ui-monospace, monospace; letter-spacing: 0.15em; text-transform: uppercase; }
.scoupon__ico { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; color: #BF5810; }
.scoupon__texte { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.2rem; line-height: 1.4; font-size: 0.9375rem; }
.scoupon__etiquette { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.scoupon__lien strong { display: block; margin-bottom: 0.7rem; font-size: 1.4rem; line-height: 1.15; }
.scoupon__bouton { flex: 0 0 auto; padding: 0.55rem 1.1rem; border-radius: 0.3rem; background: #491703; color: #FFEDCC; font-weight: 700; }
@media (max-width: 36rem) {
  .scoupon__lien { flex-wrap: wrap; }
  .scoupon__texte { flex-basis: 60%; }
  .scoupon__bouton { margin-left: auto; }
}
/* Assez de marge à droite du contenu (1200 px centré) pour une colonne de 11 rem ; elle commence sous le premier écran (Mathieu,
   2026-10-19), le script pose « top ». Sans mégaphone (le tampon suffit), texte resserré pour tenir dans l'écran. */
@media (min-width: 100rem) {
  .scoupon { position: absolute; top: 100vh; top: 100svh; left: calc(50% + 600px + 1.25rem); z-index: 5; width: 11rem; margin: 0; padding: 0; }
  .scoupon__lien { flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.5rem 0.6rem 1rem; text-align: center; opacity: 0.92; }
  .scoupon__lien:hover { opacity: 1; }
  .scoupon__ico { display: none; }
  .scoupon__tampon { top: -0.75rem; right: -0.5rem; transform: rotate(10deg); }
  .scoupon__texte { font-size: 0.75rem; line-height: 1.35; gap: 0.35rem; }
  .scoupon__lien strong { margin-bottom: 0.6rem; font-size: 1.1rem; }
  .scoupon__bouton { padding: 0.5rem 0.7rem; font-size: 0.8125rem; }
}
@media print { .scoupon { display: none; } }