/* ═══════════════════════════════════════════════════════════════════════════
   PETANQUE BELGE (Pétanque Belge) — LA FICHE JOUEUR.

   Direction EMAIL & ACIER. Aucune couleur en dur : rien que les jetons de
   assets/css/app.css — dont les --chart-* du § 7, qui existent precisement
   parce qu'une couleur de trace a une contrainte que --jaune n'a pas (3:1
   contre la surface qui l'entoure, WCAG 1.4.11).

   Quatre decisions commandent le reste.

   1. UN SEUL CHIFFRE DOMINANT : le RANG, en or sur le marine de la banniere.
      C'est la question qu'on se pose en ouvrant une fiche. Tout le reste de la
      page plafonne a 1,6 rem — les six chiffres a egalite du diagnostic
      (rapport 03 § 3.6) deviennent un chiffre et cinq mesures.

   2. AUCUNE COULEUR N'EST ECRITE DANS UN ATTRIBUT SVG. var() n'est pas compris
      dans une propriete de presentation ; tout passe donc par une classe,
      donc par cette feuille, donc par les deux themes ET par l'impression.
      Corollaire tenu partout ici : la ou la vue pose deja un attribut
      fill="url(#…)" pour une hachure, cette feuille NE DECLARE PAS `fill` —
      une declaration CSS l'emporterait sur l'attribut de presentation et
      effacerait le motif.

   3. RETENUE / ECARTEE SE LIT AU MOTIF, PAS A LA VALEUR. Plein contre hachure.
      En plein soleil sur du gravier d'Ardenne, une difference de clarte ne se
      lit pas ; une difference de trame si — et elle survit au daltonisme
      (rapport 10 § 8, regle 2).

   4. L'IMPRESSION NE SORT QUE LA CARTE. .fj-ecran disparait, .fj-papier reste :
      la fiche imprimee est un sous-bock, pas une page web sur du papier.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Deux jetons locaux, et deux seulement. Ce ne sont pas des couleurs : c'est la
   geometrie du carton du sous-bock, reprise a l'ecran et a l'impression. On la
   nomme une fois plutot que de repeter le meme nombre a six endroits. */
:root {
  --fj-bock: 88mm;      /* le cote du carton — un vrai sous-bock de buvette */
  --fj-bock-cran: 18px; /* le rayon des coins crantes */
}

@layer pages {

  /* ═══════════════════════════════════════════════════ 1. LA BANNIERE ══
     L'identite a gauche, le rang a droite. Le rang est en or sur le marine
     (9,45:1) : c'est l'un des rares endroits du systeme ou l'or a le droit
     d'etre une lettre, parce que le fond ne bascule jamais — le panneau est un
     aplat, pas une encre. */

  .fj-banniere { padding-block: var(--r5) var(--r6); }

  .fj-banniere-corps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--r5);
    flex-wrap: wrap;
  }

  .fj-identite {
    display: flex;
    align-items: flex-start;
    gap: var(--r4);
    min-width: 0;
    flex: 1 1 18rem;
  }
  .fj-identite-texte { min-width: 0; }
  .fj-identite h1 { overflow-wrap: anywhere; }

  .fj-surtitre-nuit {
    color: var(--sur-panneau-2);
    margin-bottom: .35rem;
  }

  .fj-actions { margin: var(--r3) 0 0; }

  /* — LE RANG — le chiffre de la page. */
  .fj-rang {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
    flex: none;
    text-align: right;
    min-width: 0;
  }

  /* Le podium ajoute la boule et le filet : l'information ne repose jamais sur
     la seule couleur. */
  .fj-rang--podium {
    padding-right: var(--r4);
    border-right: 4px solid var(--jaune);
  }

  .fj-rang-chiffre {
    margin: 0;
    font-family: var(--titre);
    font-weight: 900;
    font-size: clamp(3.4rem, 12vw, 5rem);
    line-height: .82;
    letter-spacing: -.022em;
    color: var(--jaune);
    font-variant-numeric: tabular-nums;
  }
  .fj-rang-exposant {
    font-size: .3em;
    vertical-align: super;
    letter-spacing: 0;
  }
  /* Pas de rang : un tiret cadratin, a la meme place et au meme poids. Une
     case vide laisserait croire a un chargement qui n'arrive pas. */
  .fj-rang-chiffre--absent { color: var(--marine-400); }

  .fj-rang-quoi {
    margin: 0;
    max-width: 26ch;
    color: var(--sur-panneau-2);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
  }

  /* — LA BOULE D'ACIER — la recette du socle (--acier), consommee telle
       quelle. Le seul objet de la page qui a le droit de briller. */
  .fj-boule {
    display: inline-block;
    flex: none;
    width: var(--fj-boule, 30px);
    height: var(--fj-boule, 30px);
    border-radius: 50%;
    background: var(--acier);
    box-shadow: var(--acier-ombre), inset 0 0 0 1px rgba(255, 255, 255, .12);
  }
  .fj-boule--22 { --fj-boule: 22px; }
  .fj-boule--30 { --fj-boule: 30px; }

  @media (max-width: 640px) {
    .fj-banniere-corps { gap: var(--r4); }
    .fj-rang { align-items: flex-start; text-align: left; }
    .fj-rang--podium {
      padding: 0 0 0 var(--r4);
      border-right: 0;
      border-left: 4px solid var(--jaune);
    }
  }

  /* ═════════════════════════════════════════ 2. LA RANGEE SECONDAIRE ══
     .stats du socle, resserre. Aucun de ces chiffres ne depasse 1,6 rem : le
     rang reste seul en tete. */

  .fj-chiffres .chiffre {
    font-size: 1.6rem;
    color: var(--encre);
  }
  .fj-chiffres .etiquette { display: block; margin-top: .2rem; }

  /* Le denominateur d'une place — « 6/48 ». Il descend d'un cran : c'est le
     numerateur qu'on lit, le denominateur ne fait que le rendre honnete. */
  .fj-sur {
    font-family: var(--texte);
    font-size: .58em;
    font-weight: 700;
    color: var(--encre-2);
  }

  /* Les journees gagnees : la seule case doree de la rangee, et seulement
     quand au moins une place est connue. On ne peint pas un zero en or. */
  .fj-chiffre-or { color: var(--jaune-profond); }

  .fj-assiduite {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin: var(--r4) 0 0;
    color: var(--encre-2);
    font-size: .95rem;
  }
  .fj-pastille-fidele {
    background: var(--jaune-voile);
    color: var(--jaune-profond);
    letter-spacing: .06em;
  }

  /* ═══════════════════════════════════════════════════ 3. LES TITRES ══ */

  .fj-titre {
    font-family: var(--titre);
    font-weight: 800;
    font-size: clamp(1.7rem, 3.6vw, 2.3rem);
    line-height: .95;
    letter-spacing: -.012em;
    color: var(--encre-accent);
    margin-bottom: var(--r4);
  }

  .fj-note {
    margin: 0;
    max-width: 62ch;
    color: var(--encre-2);
    font-size: .82rem;
    line-height: 1.5;
  }

  .fj-vide {
    color: var(--encre-2);
    line-height: 1.55;
    max-width: 62ch;
  }

  /* ═══════════════════════════════════════════ 4. LE VERRE DE SAISON ══
     La regle qui fait la confiance du circuit — le plafond des douze journees,
     et le point de presence rendu par chaque journee ecartee — cesse d'etre le
     dernier paragraphe d'une page que personne ne finit. Elle est dessinee.

     Le verre est un CONTOUR, jamais une surface qui brille : la seule chose qui
     brille du systeme est la boule (commandement 2). L'or est la matiere, la
     hachure est l'eau, la coupure est la barre des douze. */

  .fj-verre-bloc {
    display: grid;
    gap: var(--r5) var(--r6);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  @media (min-width: 46rem) {
    .fj-verre-bloc { grid-template-columns: auto minmax(0, 1fr); }
  }

  .fj-verre { margin: 0; flex: none; }
  .fj-verre-trace {
    width: 100%;
    max-width: 210px;
    height: auto;
    aspect-ratio: 210 / 300;   /* le SVG n'a pas de dimension intrinseque :
                                  sans ce rapport, height:auto peut l'ecraser */
  }

  /* La paroi : un trait porteur, donc --trait-2 (>= 3:1 dans les deux themes).
     L'arete haute est le liseré de lumiere qui donne l'epaisseur du verre —
     pale et chaude en Plein Cagnard, pale et froide en Buvette : --chart-or-
     voile est le seul jeton qui soit plus clair que la carte des deux cotes. */
  .fj-verre-paroi {
    fill: none;
    stroke: var(--trait-2);
    stroke-width: 2;
  }
  .fj-verre-arete {
    stroke: var(--chart-or-voile);
    stroke-width: 3;
    stroke-linecap: round;
  }

  /* LA DOSE D'OR. Toujours cerclee : l'or fait 1,84:1 sur blanc, il n'est
     jamais le seul porteur d'une information (rapport 10 § 8, regle 3). */
  .fj-or {
    fill: var(--chart-or);
    stroke: var(--chart-or-trait);
    stroke-width: 1.5;
  }

  /* L'EAU — les journees ecartees, ramenees a 1 point de presence.
     Son remplissage est le motif, pose en attribut sur la balise. Aucune regle
     `fill` ici : une declaration CSS l'emporterait sur l'attribut de
     presentation et effacerait la hachure. */
  .fj-eau { stroke: none; }
  .fj-eau-bord {
    fill: none;
    stroke: var(--chart-eau);
    stroke-width: 1.5;
  }
  /* Le trait de la trame, partage par les trois motifs de la page. */
  .fj-hachure {
    stroke: var(--chart-eau);
    stroke-width: 2.2;
  }

  /* Les separations de doses : chaque trait est la limite d'une journee
     retenue. On les voit sans qu'elles decoupent l'or en tranches. */
  .fj-dose {
    stroke: var(--chart-or-trait);
    stroke-width: 1;
    stroke-opacity: .45;
  }

  /* LA COUPURE — la barre des douze. Meme grammaire que le repere de moyenne :
     pointille ambre, parce que c'est un SEUIL et non une mesure. */
  .fj-coupure {
    stroke: var(--chart-repere);
    stroke-width: 2;
    stroke-dasharray: 5 4;
  }
  .fj-coupure-mot {
    fill: var(--chart-repere);
    font-family: var(--texte);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
  }

  /* Le rail des graduations. Le verre est gradue AVANT d'avoir un contenu :
     c'est ce qui lui permet de servir les deux populations d'un seul dessin —
     celui qui depasse le plafond voit la coupure, celui qui ne l'atteint pas
     voit une graduation a atteindre. */
  .fj-cran {
    stroke: var(--chart-grille);
    stroke-width: 2;
    stroke-linecap: round;
  }
  .fj-cran--pleine {
    stroke: var(--chart-or-trait);
    stroke-width: 3;
  }

  .fj-verre-brut {
    fill: var(--chart-axe);
    font-family: var(--texte);
    font-size: 12px;
    font-weight: 700;
  }
  .fj-verre-total {
    fill: var(--encre);
    font-family: var(--titre);
    font-size: 30px;
    font-weight: 900;
  }

  .fj-verre-legende {
    margin-top: .6rem;
    max-width: 210px;
    color: var(--encre-2);
    font-size: .78rem;
    line-height: 1.4;
  }

  /* — LA LECTURE — ce que le dessin dit, en toutes lettres. Le graphe n'est
       jamais seul : il est toujours double d'une etiquette chiffree. */
  .fj-verre-lecture { min-width: 0; }

  .fj-doses {
    list-style: none;
    margin: 0 0 var(--r4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
  .fj-doses li {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    color: var(--encre-2);
    font-size: .95rem;
    line-height: 1.45;
  }
  .fj-doses strong { color: var(--encre); font-weight: 800; }

  /* Les puces de legende. Carrees et cerclees, jamais des ronds pleins : une
     puce doit dire la MATIERE du trace qu'elle annonce. */
  .fj-puce {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    transform: translateY(1px);
  }
  .fj-puce--or {
    background: var(--chart-or);
    border: 1.5px solid var(--chart-or-trait);
  }
  .fj-puce--eau {
    background: var(--chart-eau);
    border: 1.5px solid var(--chart-eau);
  }
  .fj-puce--total {
    background: var(--chart-moi);
    border: 1.5px solid var(--chart-moi);
  }
  .fj-puce--repere {
    background: transparent;
    border: 0;
    border-top: 3px dashed var(--chart-repere);
    height: 0;
    border-radius: 0;
    transform: translateY(-3px);
  }

  .fj-verre-phrase {
    margin: 0 0 var(--r3);
    max-width: 58ch;
    color: var(--encre);
    font-size: 1rem;
    line-height: 1.5;
  }

  /* ══════════════════════════════════════════════ 5. LA LIGNE DE VIE ══
     Des BARRES, jamais une courbe : une journee du circuit est un evenement
     ISOLE, et entre deux dimanches le total ne bouge pas. Une courbe cubique
     interpolerait des points qui n'existent pas.
     L'abscisse suit le calendrier reel : le trou de six semaines de l'ete se
     voit, et la reprise de septembre aussi. */

  .fj-trace-bloc { margin: 0; }

  .fj-trace {
    width: 100%;
    height: auto;
    aspect-ratio: 660 / 200;
    overflow: visible;   /* le pic est chiffre AU-DESSUS de sa barre */
  }

  .fj-barre { fill: var(--chart-or); }

  /* La journee ecartee : hachuree, pas grisee. Son motif est pose en attribut
     sur la balise — d'ou l'absence de `fill` ici, comme pour l'eau du verre.
     Le contour, lui, reste du CSS : c'est lui qui la borne. */
  .fj-barre--eau {
    stroke: var(--chart-eau);
    stroke-width: 1;
  }

  .fj-sol {
    stroke: var(--chart-axe);
    stroke-width: 1.5;
  }
  .fj-grille {
    stroke: var(--chart-grille);
    stroke-width: 1;
  }
  .fj-mois {
    fill: var(--chart-axe);
    font-family: var(--texte);
    font-size: 12px;
    font-weight: 600;
  }

  .fj-repere {
    stroke: var(--chart-repere);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
  }
  .fj-repere-mot {
    fill: var(--chart-repere);
    font-family: var(--texte);
    font-size: 11px;
    font-weight: 700;
  }

  /* Le pic et le creux sont CHIFFRES. Un graphe qu'on ne peut pas lire au
     chiffre pres n'est qu'une ambiance. */
  .fj-valeur {
    fill: var(--encre);
    font-family: var(--titre);
    font-size: 17px;
    font-weight: 900;
  }
  .fj-valeur--creux { fill: var(--encre-2); }

  .fj-trace-legende {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem var(--r4);
    margin-top: var(--r3);
    color: var(--encre-2);
    font-size: .8rem;
  }
  .fj-trace-legende > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
  }

  /* ═════════════════════════════════════════ 6. LE DETAIL DES JOURNEES ══ */

  .fj-deux {
    display: grid;
    gap: var(--r6);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 62rem) {
    .fj-deux { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  }
  .fj-deux > div { min-width: 0; }

  .fj-tableau { width: 100%; }

  .fj-lien-journee {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    min-width: 0;
  }
  .fj-lien-journee:hover { color: var(--lien-survol); text-decoration: underline; }

  /* La ligne d'une journee. Elle est cliquable sur toute sa hauteur — on ouvre
     une journee avec le pouce, dehors, souvent sans lunettes. */
  .fj-ligne > td { vertical-align: middle; }
  .fj-ligne:first-child > td { padding-top: .75rem; }

  /* La ligne ecartee. Meme trame que l'eau du verre et que la barre hachuree :
     un seul motif dit « ecartee » d'un bout a l'autre de la fiche. La ligne
     reste PLEINEMENT lisible — elle est ecartee du calcul, pas de la lecture. */
  .fj-ligne--ecartee > td {
    background-image: repeating-linear-gradient(45deg,
      transparent 0 5px,
      color-mix(in oklch, var(--chart-eau) 16%, transparent) 5px 7px);
  }
  .fj-ligne--ecartee:hover > td { background-color: var(--jaune-voile); }

  .fj-ecartee {
    margin-left: .4rem;
    font-size: .6rem;
    letter-spacing: .06em;
    vertical-align: middle;
  }

  .fj-bafa-plus  { color: var(--vert-texte); font-weight: 700; }
  .fj-bafa-moins { color: var(--rouge-texte); font-weight: 700; }

  /* ══════════════════════════════════════════════ 7. LES PARTENAIRES ══
     La barre de frequence est un background-IMAGE et non un noeud de plus :
     la couleur de survol passe dessous, et une fiche a trente partenaires ne
     gagne pas trente <span>. */

  .fj-partenaires {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--r2);
  }

  .fj-partenaire {
    /* La part est posee en style en ligne par la vue (« --part: 62% »). On la
       declare ici a zero : une carte servie sans elle affiche une barre vide,
       jamais une barre pleine ni une declaration invalide. */
    --part: 0%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    min-height: 48px;          /* on ouvre une fiche avec le pouce, dehors */
    background-image: linear-gradient(to right,
      var(--chart-or-voile) var(--part), transparent 0);
  }
  .fj-partenaire-nom { min-width: 0; flex: 1 1 auto; }
  .fj-partenaire-nom > span { display: block; }
  .fj-partenaire-nom .gras { line-height: 1.2; overflow-wrap: anywhere; }
  .fj-partenaire .pastille { flex: none; }

  .fj-jeton-petit {
    width: 30px;
    height: 30px;
    font-size: .68rem;
  }

  /* ═══════════════════════════════════════════════════ 8. LE SOUS-BOCK ══
     La carte qu'on montre a un copain a l'ecran, et la SEULE chose qui sort de
     l'imprimante. Carton clair, coins crantes, bande de tete, tampon : c'est un
     objet de buvette, pas une capture d'ecran.

     Le carton ne bascule PAS de theme. Un sous-bock est en carton dans les deux
     lieux — c'est une matiere, comme l'email du panneau, pas une encre. D'ou
     --terre-* pris directement dans les primitives, et une encre marine qui
     tient dessus des deux cotes. */

  .fj-carte-cadre {
    display: flex;
    justify-content: center;
    padding-block: var(--r4);
  }

  .fj-sous-bock {
    position: relative;
    isolation: isolate;
    /* Le nom se cale sur la LARGEUR DU CARTON, pas sur celle de la fenetre :
       la carte doit tenir aussi bien dans la page que dans un cadre imprime de
       88 mm. D'ou la requete de conteneur, et les cqi du nom. */
    container-type: inline-size;
    width: min(100%, var(--fj-bock));
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    padding: var(--r4) var(--r4) var(--r3);
    border-radius: var(--fj-bock-cran);
    background: var(--terre-100);
    color: var(--marine-900);
    box-shadow: var(--ombre-2);
    overflow: hidden;
  }

  /* Le grain du carton. Le socle pose deja sa tuile sur toute la page ; ici
     elle est renforcee LOCALEMENT et sans requete — c'est la meme image
     data: URI, a une densite de carton. */
  .fj-sous-bock::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--grain);
    background-repeat: repeat;
    background-size: 128px 128px;
    opacity: .10;
    mix-blend-mode: multiply;
  }

  /* Le cran : l'anneau interieur en pointille du carton decoupe. Le chantier
     « Sous-bock » remplacera ce trace par la vraie decoupe crantee ; d'ici la
     c'est deja un bord de carton, pas un rectangle. */
  .fj-sous-bock::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1.5px dashed var(--terre-300);
    border-radius: calc(var(--fj-bock-cran) - 4px);
    pointer-events: none;
  }

  .fj-sb-tete {
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .fj-sb-marque {
    font-family: var(--titre);
    font-weight: 900;
    font-size: 1.05rem;
    line-height: .9;
    letter-spacing: .01em;
    color: var(--marine-800);
  }
  .fj-sb-marque small {
    display: block;
    font-family: var(--texte);
    font-size: .46rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--terre-700);
  }

  /* La bande — la capsule de la bouteille, seul motif decoratif autorise du
     systeme, et son sixieme emploi : le bord du sous-bock. */
  .fj-sb-bande {
    height: 5px;
    margin: .55rem 0 .7rem;
    border-radius: 2px;
  }

  .fj-sb-nom {
    margin: 0;
    font-family: var(--titre);
    font-weight: 900;
    font-size: clamp(1.4rem, 5.5cqi, 1.9rem);
    line-height: .92;
    letter-spacing: -.015em;
    color: var(--marine-900);
    overflow-wrap: anywhere;
  }
  .fj-sb-club {
    margin: .25rem 0 0;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--terre-700);
  }

  .fj-sb-chiffres {
    display: flex;
    gap: var(--r4);
    margin-top: auto;
    padding-top: var(--r3);
  }
  .fj-sb-nombre {
    margin: 0;
    font-family: var(--titre);
    font-weight: 900;
    font-size: 1.55rem;
    line-height: .9;
    color: var(--marine-800);
    font-variant-numeric: tabular-nums;
  }
  .fj-sb-mot {
    margin: .1rem 0 0;
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--terre-700);
  }

  /* La saison en miniature. Meme peintre, meme grammaire, meme trame : la
     carte dit la meme verite que la page, en plus petit. */
  .fj-sb-trace {
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 58;
    margin-top: .5rem;
  }

  .fj-sb-pied {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--r3);
    margin-top: .6rem;
  }
  .fj-sb-adresse {
    margin: 0;
    font-size: .58rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--marine-800);
    overflow-wrap: anywhere;
  }
  .fj-sb-adresse span {
    display: block;
    font-weight: 600;
    color: var(--terre-700);
  }

  /* Le tampon du circuit : un vrai cachet, pas un carre vide en attendant le
     QR d'activation. La boule y est POSEE, elle n'y flotte pas. */
  .fj-sb-tampon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--terre-300);
  }

  /* Sur le carton, la trame de l'eau doit rester lisible : elle ne peut pas
     dependre des jetons de graphe, qui basculent avec le theme. */
  .fj-sous-bock .fj-barre   { fill: var(--or-600); }
  .fj-sous-bock .fj-hachure { stroke: var(--terre-600); }
  .fj-sous-bock .fj-sol     { stroke: var(--terre-400); }

  /* ═══════════════════════════════════════════════════ 9. SANCTUAIRES ══ */

  @media (prefers-reduced-motion: reduce) {
    /* La fiche n'anime rien d'elle-meme. On coupe le seul deplacement qu'elle
       herite du socle : le survol souleve des cartes de partenaires. */
    .fj-partenaire.carte-lien:hover { transform: none; }
  }

  /* ══════════════════════════════════════════════════ 10. LE PAPIER ══
     « Imprimez cette page : seule la carte sort, au format sous-bock. »
     La promesse est tenue ici, et nulle part ailleurs. */
  @media print {
    .fj-ecran { display: none !important; }

    .fj-papier { padding: 0 !important; }
    .fj-papier .enveloppe { max-width: none; padding-inline: 0; }

    .fj-carte-cadre {
      padding: 0;
      justify-content: flex-start;
    }

    /* Le carton en millimetres, et une seule fois : un sous-bock coupe en deux
       par un saut de page n'est plus un sous-bock. */
    .fj-sous-bock {
      width: var(--fj-bock);
      background: #fff;
      color: #000;
      box-shadow: none;
      border: 1px solid #999;
      break-inside: avoid;
    }
    .fj-sous-bock::after { display: none !important; }
    .fj-sous-bock::before { border-color: #999; }
    .fj-sb-marque,
    .fj-sb-nom,
    .fj-sb-nombre,
    .fj-sb-adresse { color: #000; }
    .fj-sb-marque small,
    .fj-sb-club,
    .fj-sb-mot,
    .fj-sb-adresse span { color: #444; }
    .fj-sb-tampon { border-color: #999; }
    .fj-sous-bock .fj-barre { fill: #000; }
    .fj-sous-bock .fj-sol   { stroke: #666; }
  }
}

/* @page vit hors de la couche : une @page imbriquee dans un @layer est
   theoriquement valable mais inegalement suivie, et c'est le genre de detail
   qui ne se voit qu'a l'impression, chez le secretaire du comite. Elle n'est
   servie que sur la fiche joueur, puisque cette feuille n'est chargee que la. */
@media print {
  @page { margin: 12mm; }
}