/* Publicités Quiz infernal et Planimonde (couleurs de chaque marque, d'où ce fichier à part). Reprise de Physalis Design (escales.css).
   Large écran : colonne à droite du contenu, hors du conteneur, qui défile avec la page (jamais fixe : Mathieu, 2026-10-16). Sinon : bandeau horizontal juste avant le pied de page. */
.escale { display: grid; gap: 0.8rem; max-width: 75rem; margin: 2.5rem auto 0; padding: 0 1.1rem; }
.escale-lien { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.2rem; border-radius: 1rem; background: #fff8dc; border: 0.1rem solid #FDD018; color: #31038A; text-decoration: none; }
.escale-lien:hover { background: #fff2b8; }
.escale-lien:focus-visible { outline: 0.2rem solid #31038A; outline-offset: 0.2rem; }
.escale img { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; }
.escale-texte { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.2rem; line-height: 1.4; font-size: 0.9375rem; }
.escale-etiquette { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.escale-bouton { flex: 0 0 auto; padding: 0.55rem 1.1rem; border-radius: 2rem; background: #31038A; color: #fff; font-weight: 700; }
/* Planimonde : marine et safran de son logo. */
.escale-lien--plan { background: #202a4c; border-color: #f9a712; color: #ffffff; }
.escale-lien--plan:hover { background: #2a3763; }
.escale-lien--plan:focus-visible { outline-color: #202a4c; }
.escale-lien--plan .escale-bouton { background: #f9a712; color: #1a2030; }
.escale-lien--plan .escale-etiquette { opacity: 0.85; }
.escale-lien--plan img { border-radius: 0.5rem; }
/* The Wild Swim Society : sable, nuit, sarcelle et bouée de son logo. */
.escale-lien--swim { background: #f8efe6; border-color: #4a5f82; color: #3b2a22; }
.escale-lien--swim:hover { background: #f0d7c3; }
.escale-lien--swim:focus-visible { outline-color: #4a5f82; }
.escale-lien--swim .escale-bouton { background: #9f5833; color: #fff; }
.escale-lien--swim img { border-radius: 50%; }
@media (max-width: 36rem) {
  .escale-lien { flex-wrap: wrap; }
  .escale-texte { flex-basis: 60%; }
  .escale-bouton { margin-left: auto; }
}
/* Assez de marge à droite du contenu (1200 px centré) pour une colonne discrète de 11 rem, à la hauteur du haut du contenu (le script pose « top »). */
/* Sur grand écran, la pub commence sous le premier écran (Mathieu, 2026-10-19). */
@media (min-width: 100rem) {
  .escale { position: absolute; top: 100vh; top: 100svh; left: calc(50% + 600px + 1.25rem); z-index: 5; width: 11rem; margin: 0; padding: 0; }
  .escale-lien { flex-direction: column; align-items: center; gap: 0.8rem; padding: 1.2rem 0.9rem 1.1rem; text-align: center; opacity: 0.92; }
  .escale-lien:hover { opacity: 1; }
  .escale img { width: 4rem; height: 4rem; }
  .escale-texte { font-size: 0.8125rem; gap: 0.35rem; }
}
/* Espace offert aux organismes communautaires : un coupon à découper (pointillés, ciseaux, tampon « Gratuit »). C'est un bouton : il ouvre la fenêtre de contact. */
@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"); }
.escale-lien--org { position: relative; width: 100%; margin-top: 0.5rem; 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; }
.escale-lien--org:hover { background: #fff8ec; }
.escale-lien--org:focus-visible { outline-color: #491703; }
.escale-lien--org::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; }
.escale-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; }
.escale-ico { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; color: #BF5810; }
.escale-lien--org strong { display: block; margin-bottom: 0.7rem; font-size: 1.4rem; line-height: 1.15; }
.escale-lien--org .escale-bouton { background: #491703; color: #FFEDCC; border-radius: 0.3rem; }
/* Dans la colonne, sous Quiz infernal : sans mégaphone (le tampon suffit), texte resserré pour tenir dans l'écran. */
@media (min-width: 100rem) {
  .escale-lien--org { gap: 0.6rem; padding: 1.5rem 0.6rem 1rem; text-align: center; }
  .escale-ico { display: none; }
  .escale-tampon { top: -0.75rem; right: -0.5rem; transform: rotate(10deg); }
  .escale-lien--org .escale-texte { font-size: 0.75rem; line-height: 1.35; }
  .escale-lien--org strong { margin-bottom: 0.6rem; font-size: 1.1rem; }
  .escale-lien--org .escale-bouton { padding: 0.5rem 0.7rem; font-size: 0.8125rem; }
}
@media print { .escale { display: none; } }