/* ═══════════════════════════════════════════════════════════════════════════
   p-sponsors.css — LA PAGE « NOS SPONSORS », ET LES BANDEAUX QUI EN VIENNENT.

   Une règle commande tout le reste : UN LOGO NE SE DÉFORME JAMAIS. Un
   commerçant qui voit son logo étiré sur le site du circuit se souvient de ça
   et de rien d'autre — et c'est justement la personne qu'on remercie. D'où
   `object-fit: contain` partout, un carré blanc derrière, et de l'air autour.

   Deuxième règle : un logo manquant ne laisse pas un trou. Le nom s'écrit en
   grand à sa place, dans la typographie de la maison. Un cadre gris avec une
   croix dedans est pire que pas de logo du tout.

   Aucune couleur en dur : rien que les jetons de app.css, pour que les deux
   thèmes suivent sans intervention.
   ═════════════════════════════════════════════════════════════════════════ */

@layer pages {
  /* ────────────────────────────────────────────────────────── LA GRILLE ── */

  .spo-grille {
    display: grid;
    gap: clamp(.9rem, 2.4vw, 1.6rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    margin-top: 1.1rem;
  }

  /* Les sponsors du circuit ont droit à plus de place : ils soutiennent toute
     la saison, pas une journée. La hiérarchie se lit à la taille, pas à un
     libellé « sponsor principal » que personne ne lit. */
  .spo-grille--grand {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  }

  /* ─────────────────────────────────────────────────────────── LA CARTE ── */

  .spo-carte {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: .85rem;
    padding: clamp(.9rem, 2vw, 1.35rem);
    border: 1px solid var(--trait);
    border-radius: var(--arrondi-2, 16px);
    background: var(--carte);
    color: var(--encre);
    text-decoration: none;
    box-shadow: var(--ombre-1, 0 1px 2px rgb(0 0 0 / .05));
    transition: border-color .18s linear, box-shadow .18s linear,
                transform .18s cubic-bezier(.2, .7, .3, 1);
  }

  a.spo-carte:hover,
  a.spo-carte:focus-visible {
    border-color: var(--or-500);
    box-shadow: var(--ombre-2, 0 6px 20px rgb(0 0 0 / .10));
    transform: translateY(-2px);
  }

  a.spo-carte:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  /* ──────────────────────────────────────────────────────────── LE LOGO ── */

  /*
   * Le carré blanc est délibéré, y compris en thème nuit : la plupart des
   * logos de commerçants sont dessinés pour du papier blanc, et beaucoup
   * disparaissent sur un fond sombre. Un fond neutre les rend tous lisibles
   * sans qu'on ait à demander une version claire à chacun.
   */
  .spo-logo {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    padding: .7rem;
    border-radius: var(--arrondi-1, 12px);
    background: var(--blanc, #fff);
    overflow: hidden;
  }

  .spo-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    /* JAMAIS `cover` : il recadre, et un logo recadré perd son nom. */
    object-fit: contain;
  }

  /* Sans logo, le nom prend la place — dans la typo de titre, en grand. */
  .spo-logo--mot {
    font-family: var(--titre, inherit);
    font-size: clamp(1.1rem, 2.6vw, 1.7rem);
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--marine-800, #1A2452);
    text-wrap: balance;
    padding: 1rem .8rem;
  }

  /* ──────────────────────────────────────────────────────────── LE TEXTE ── */

  .spo-corps {
    display: grid;
    align-content: start;
    gap: .28rem;
  }

  .spo-nom {
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--encre);
  }

  .spo-ville {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--encre-3, var(--encre-2));
  }

  .spo-texte {
    margin-top: .2rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--encre-2);
    text-wrap: pretty;
  }

  .spo-tel {
    margin-top: .25rem;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--lien);
  }

  /* ═══════════════════════════════════ LE BANDEAU DES AUTRES PAGES ══
     Une ligne de logos au bas d'une fiche de journée ou de club. Elle ne doit
     jamais concurrencer le contenu : petite, discrète, et elle défile
     horizontalement plutôt que de pousser la page vers le bas. */

  .spo-bandeau {
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--trait);
  }

  .spo-bandeau-titre {
    margin: 0 0 .7rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--encre-3, var(--encre-2));
  }

  .spo-rangee {
    display: flex;
    gap: .8rem;
    /* Le débordement se fait DANS ce bloc, jamais dans la page : une page qui
       glisse de gauche à droite sur un téléphone est le défaut le plus
       visible qui soit. */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: .35rem;
    scrollbar-width: thin;
  }

  .spo-vignette {
    flex: none;
    scroll-snap-align: start;
    display: grid;
    place-items: center;
    width: 7.5rem;
    aspect-ratio: 16 / 9;
    padding: .5rem;
    border: 1px solid var(--trait);
    border-radius: var(--arrondi-1, 12px);
    background: var(--blanc, #fff);
    text-decoration: none;
  }

  .spo-vignette img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .spo-vignette-mot {
    font-family: var(--titre, inherit);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    color: var(--marine-800, #1A2452);
    text-wrap: balance;
  }

  .spo-vignette:hover { border-color: var(--or-500); }
  .spo-vignette:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
}

/* ═══════════════════════════════════════════════════════ MOUVEMENT RÉDUIT ══ */

@media (prefers-reduced-motion: reduce) {
  .spo-carte { transition: none; }
  a.spo-carte:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════ PAPIER ══
   Une page de sponsors s'imprime pour l'afficher au mur du club. Les liens
   perdent leur soulignement, les ombres disparaissent, rien ne se coupe au
   milieu d'une carte. */

@media print {
  .spo-carte {
    break-inside: avoid;
    box-shadow: none;
    border-color: #999;
  }
  .spo-bandeau { display: none; }
}