/* ═══════════════════════════════════════════════════════════════════════════
   TIRES ET POINTES — LA PAGE D'IMPRESSION DE LA CARTE DE MEMBRE.

   Cette feuille était appelée par app/Views/pages/carte_joueur.php et n'avait
   jamais été écrite : le serveur répondait 404, le navigateur refusait le
   fichier (« MIME type text/html »), et la page sortait sans mise en page.
   Personne ne l'avait vu parce qu'un CSS manquant ne casse rien — il laisse
   seulement le HTML nu, ce qui ressemble à une page en cours de chargement.

   Ce qu'elle habille, et rien d'autre :

     .pi-corps    le fond de la page, à l'écran
     .pi-page     la colonne centrée qui porte tout
     .pi-tete     la marque, en haut — écran seulement
     .pi-marque   le lien vers l'accueil
     .pi-cadre    le socle sur lequel le sous-bock est posé
     .pi-actions  les trois boutons — écran seulement
     .pi-note     la phrase qui explique le format — écran seulement
     .sb-tampon-qr / .sb-qr   le tampon à flasher, dans le sous-bock

   Le sous-bock lui-même (tout ce qui est en .fj-*) vient de p-joueur.css, y
   compris son bloc @media print. On ne le redit pas ici : deux feuilles qui
   dessinent le même objet finissent par se contredire, et c'est au moment
   d'imprimer qu'on s'en aperçoit.

   Aucune couleur en dur. Rien que les jetons de app.css, pour que les deux
   thèmes ET le papier suivent sans intervention.
   ═════════════════════════════════════════════════════════════════════════ */

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

  .pi-corps {
    margin: 0;
    min-height: 100dvh;
    background: var(--fond);
    color: var(--encre);
  }

  .pi-page {
    display: grid;
    justify-items: center;
    gap: clamp(1.1rem, 3vh, 2rem);
    max-width: 44rem;
    margin-inline: auto;
    padding: clamp(1.2rem, 4vh, 2.6rem) clamp(1rem, 4vw, 2rem)
             clamp(2rem, 6vh, 3.4rem);
  }

  /* ─────────────────────────────────────────────────────────── LA TÊTE ── */

  .pi-tete {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .pi-marque {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .2rem;
    color: inherit;
    text-decoration: none;
    /* La cible garde ses 44 px : cette page se lit au comptoir, sur un
       téléphone, souvent d'une main. */
    min-height: 44px;
  }

  .pi-marque > span:last-child {
    display: grid;
    font-family: var(--titre, inherit);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.05;
    text-transform: uppercase;
  }

  .pi-marque small {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--encre-2, var(--encre));
    opacity: .72;
    text-transform: uppercase;
  }

  .pi-marque:hover > span:last-child,
  .pi-marque:focus-visible > span:last-child { color: var(--or-800); }

  /* ────────────────────────────────────────────────────────── LE CADRE ── */

  /*
   * Le socle du sous-bock. Il ne dessine PAS la carte — .fj-sous-bock s'en
   * charge dans p-joueur.css — il lui donne seulement de l'air autour et une
   * ombre qui la décolle du fond, comme un carton posé sur une table.
   */
  /* PAS DE CENTRAGE ICI. C'est .fj-carte-cadre, juste dessous, qui centre —
     il est fait pour ca. Un `place-items: center` pose ici rendait ce bloc
     dimensionne par son contenu, et le `width: min(100%, 88mm)` du sous-bock
     se resolvait alors contre une largeur qui dependait de lui : la carte
     tombait a 32 px. Un centrage de trop suffit a casser une chaine de
     dimensionnement, et rien ne le signale. */
  .pi-cadre {
    display: block;
    width: 100%;
    padding: clamp(.8rem, 3vw, 1.6rem) 0;
  }

  /* ─────────────────────────────────────────────────── LES TROIS GESTES ── */

  .pi-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    width: 100%;
  }

  /* ──────────────────────────────────────────────────────── LA LÉGENDE ── */

  .pi-note {
    max-width: 42ch;
    margin: 0;
    font-size: .84rem;
    line-height: 1.6;
    text-align: center;
    text-wrap: pretty;
    color: var(--encre-2, var(--encre));
    opacity: .82;
  }

  /* ──────────────────────────────────────────────────────── LE TAMPON ── */

  /*
   * Le code à flasher, en bas du sous-bock. Il doit rester lisible par un
   * téléphone posé à vingt centimètres : les modules ne se lissent donc pas,
   * et le carré garde sa marge blanche — un QR collé au bord ne se lit pas.
   */
  .sb-tampon-qr {
    display: inline-grid;
    place-items: center;
    padding: 2px;
    background: var(--blanc);
    border-radius: 3px;
  }

  .sb-qr {
    display: block;
    width: 100%;
    height: auto;
    /* Un code-barres ne s'interpole pas : le lissage arrondit les modules et
       fait perdre la lecture aux appareils un peu anciens. */
    image-rendering: pixelated;
    shape-rendering: crispEdges;
  }
}

/* ═══════════════════════════════════════════════════════════ LE PAPIER ══

   Une feuille, une carte, à découper. Tout ce qui sert à naviguer disparaît :
   la marque, les boutons, la légende. p-joueur.css efface déjà .fj-ecran ;
   on efface ici ce qui porte une classe .pi-* et pas de .fj-ecran, pour que
   la règle tienne même si la vue change de main.

   @page vit hors de la couche : une @page imbriquée dans un @layer n'est pas
   appliquée. */

@media print {
  .pi-corps {
    background: #fff;
    color: #000;
  }

  .pi-tete,
  .pi-actions,
  .pi-note {
    display: none !important;
  }

  .pi-page {
    display: block;
    max-width: none;
    padding: 0;
  }

  .pi-cadre {
    padding: 0;
  }

  .sb-tampon-qr {
    background: #fff;
    padding: 1px;
  }
}

@page {
  /* Le carton sort à 88 mm. La marge tient compte des imprimantes qui ne
     savent pas aller au bord : une carte rognée est une carte perdue. */
  margin: 12mm;
}