/* ═══════════════════════════════════════════════════════════════════════════
   Star-Pigeons Manager — LA FICHE PIGEON (v1.0.0 — 2026-08-28)

   QUATRIÈME couche, purement additive, chargée APRÈS system.css.
   Elle habille le SEUL écran de la fiche pigeon, et rien d'autre :
   tout est scopé sous « .spm-fp », une classe qui n'existait pas avant.

   POURQUOI CETTE REFONTE
   La fiche déroulait 17 blocs sur ~5 500 px, sans dire lequel regarder :
   12 tuiles de chiffres d'affilée dont 7 à zéro, 11 boutons visibles
   d'emblée, « Notes » écrit deux fois, « Dernier concours » trois fois,
   et trois panneaux entiers pour annoncer trois fois « aucun ».
   Ici : un en-tête calme, 4 chiffres, 5 onglets, et le vide dit en une ligne.

   RÈGLES RESPECTÉES (les mêmes que system.css)
     1. aucune couleur en dur : tout passe par les jetons --sy-*, sinon
        Night Loft et Aero White deviennent illisibles ;
     2. l'ambre --sy-a reste réservé à la PERFORMANCE, jamais à un bouton ;
     3. le rouge --sy-r garde son sens « santé », le bleu --sy-b « concours » ;
     4. aucune information supprimée : ce qui ne tient plus à l'écran est
        derrière un onglet ou un menu, jamais jeté ;
     5. réversible : retirer wp_enqueue_style('spm-fiche', …) rend la
        fiche à son état antérieur, les classes historiques étant intactes.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
   1 · L'EN-TÊTE
   Trois colonnes : le portrait, l'identité, les actions. Auparavant la
   colonne d'actions passait SOUS le cadre photo et le chevauchait ; ici
   chacune a sa piste et le formulaire d'envoi ne s'ouvre qu'à la demande.
   ────────────────────────────────────────────────────────────────────────── */
body.spm-app-mode .spm-fp{ display:block; }

body.spm-app-mode .spm-fp__entete{
  display:grid; grid-template-columns:168px minmax(0,1fr) auto; gap:26px;
  padding:22px; background:var(--sy-pap);
  border:1px solid var(--sy-brd); border-radius:var(--sy-r3);
  box-shadow:0 1px 2px rgba(15,26,22,.05);
}
/* Au téléphone, le portrait garde une taille de vignette et reste À CÔTÉ de
   l'identité : passé en pleine largeur, il occupait 400 px de haut avant même
   qu'on lise la bague. Les actions, elles, prennent toute la largeur dessous. */
@media (max-width:900px){
  body.spm-app-mode .spm-fp__entete{
    grid-template-columns:112px minmax(0,1fr); gap:16px; padding:16px;
  }
  body.spm-app-mode .spm-fp__actions{ grid-column:1 / -1; min-width:0; }
  body.spm-app-mode .spm-fp__bague{ font-size:1.5rem; }
}

/* le portrait — photo réelle ou silhouette */
body.spm-app-mode .spm-fp__portrait{ min-width:0; }
body.spm-app-mode .spm-fp__cadre{
  aspect-ratio:1; border-radius:var(--sy-r2); overflow:hidden;
  background:var(--sy-pap3); border:1px solid var(--sy-brd);
  display:grid; place-items:center;
}
body.spm-app-mode .spm-fp__cadre img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* La silhouette vient du gabarit de pose de Star-Pigeons Studio, vectorisée.
   Elle est peinte en currentColor : elle suit donc le thème, y compris
   Night Loft, là où un PNG noir aurait disparu dans le fond. */
body.spm-app-mode .spm-fp__cadre--vide{ color:var(--sy-t3); }
body.spm-app-mode .spm-fp__cadre--vide svg{
  width:70%; height:70%; opacity:.42;
}
body.spm-app-mode .spm-fp__photo-bt{
  display:block; width:100%; margin-top:8px; padding:7px;
  background:transparent; border:1px dashed var(--sy-brd);
  border-radius:var(--sy-r1); color:var(--sy-t3);
  font-size:.8rem; font-family:inherit; cursor:pointer;
}
body.spm-app-mode .spm-fp__photo-bt:hover{ border-color:var(--sy-v); color:var(--sy-v); }
body.spm-app-mode .spm-fp__photo-zone{ display:none; margin-top:10px; }
body.spm-app-mode .spm-fp__photo-zone[data-ouvert="1"]{ display:block; }

/* l'identité */
body.spm-app-mode .spm-fp__sur{
  font-size:.68rem; font-weight:650; letter-spacing:.15em;
  text-transform:uppercase; color:var(--sy-t3);
}
body.spm-app-mode .spm-fp__bague{
  font-size:2rem; font-weight:700; letter-spacing:-.035em;
  margin:2px 0; color:var(--sy-t1); font-variant-numeric:tabular-nums;
}
body.spm-app-mode .spm-fp__nom{
  color:var(--sy-t2); font-size:1.05rem; margin:0 0 12px;
}
body.spm-app-mode .spm-fp__jetons{ display:flex; flex-wrap:wrap; gap:6px; }
body.spm-app-mode .spm-fp__jeton{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:6px; font-size:.8rem; font-weight:500;
  background:var(--sy-pap3); border:1px solid var(--sy-brd); color:var(--sy-t2);
}
body.spm-app-mode .spm-fp__jeton--fort{
  background:var(--sy-vp); border-color:var(--sy-vp); color:var(--sy-v); font-weight:650;
}

/* éleveur / propriétaire / joueur — une ligne, plus un panneau entier */
body.spm-app-mode .spm-fp__gens{
  margin-top:14px; padding-top:13px; border-top:1px solid var(--sy-brd);
  display:flex; flex-wrap:wrap; gap:6px 22px; font-size:.88rem; color:var(--sy-t2);
}
body.spm-app-mode .spm-fp__gens b{ color:var(--sy-t1); font-weight:650; }
body.spm-app-mode .spm-fp__gens .spm-fp__rien{ color:var(--sy-t3); font-style:italic; }

/* les actions */
body.spm-app-mode .spm-fp__actions{
  display:flex; flex-direction:column; gap:8px; align-items:stretch; min-width:176px;
}
body.spm-app-mode .spm-fp__actions form{ margin:0; }
body.spm-app-mode .spm-fp__actions .spm-btn{ width:100%; justify-content:center; }

body.spm-app-mode .spm-fp__plus{ position:relative; }
body.spm-app-mode .spm-fp__plus-liste{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:238px;
  padding:6px; background:var(--sy-pap); border:1px solid var(--sy-brd);
  border-radius:var(--sy-r2); box-shadow:0 10px 30px rgba(12,31,63,.14);
  display:none;
}
body.spm-app-mode .spm-fp__plus-liste[data-ouvert="1"]{ display:block; }
body.spm-app-mode .spm-fp__plus-liste form{ display:block; }
body.spm-app-mode .spm-fp__plus-liste .spm-btn,
body.spm-app-mode .spm-fp__plus-liste button,
body.spm-app-mode .spm-fp__plus-liste a{
  display:flex; width:100%; align-items:center; gap:9px; padding:8px 10px;
  background:none; border:0; border-radius:var(--sy-r1); box-shadow:none;
  font-size:.88rem; font-weight:500; text-align:left; color:var(--sy-t1);
  text-decoration:none; justify-content:flex-start; cursor:pointer;
}
body.spm-app-mode .spm-fp__plus-liste .spm-btn:hover,
body.spm-app-mode .spm-fp__plus-liste button:hover,
body.spm-app-mode .spm-fp__plus-liste a:hover{ background:var(--sy-pap3); }


/* ──────────────────────────────────────────────────────────────────────────
   2 · LES QUATRE CHIFFRES
   Quatre, pas douze. Les autres mesures vivent dans l'onglet Palmarès :
   elles n'ont pas disparu, elles ont cessé d'occuper l'entrée.
   ────────────────────────────────────────────────────────────────────────── */
body.spm-app-mode .spm-fp__chiffres{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px;
}
@media (max-width:760px){
  body.spm-app-mode .spm-fp__chiffres{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
body.spm-app-mode .spm-fp__chiffre{
  padding:13px 15px; background:var(--sy-pap);
  border:1px solid var(--sy-brd); border-radius:var(--sy-r2); min-width:0;
}
/* l'ambre, et seulement pour la performance — règle du § 17 de system.css */
body.spm-app-mode .spm-fp__chiffre--perf{ background:var(--sy-ap); border-color:var(--sy-abd); }
body.spm-app-mode .spm-fp__chiffre-nom{
  display:flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:650; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sy-t3);
}
body.spm-app-mode .spm-fp__chiffre--perf .spm-fp__chiffre-nom{ color:var(--sy-a); }
body.spm-app-mode .spm-fp__chiffre-val{
  font-size:1.75rem; font-weight:700; letter-spacing:-.03em; line-height:1.15;
  font-variant-numeric:tabular-nums; margin-top:3px; color:var(--sy-t1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.spm-app-mode .spm-fp__chiffre--perf .spm-fp__chiffre-val{ color:var(--sy-a); }
body.spm-app-mode .spm-fp__chiffre-note{
  font-size:.78rem; color:var(--sy-t3); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


/* ──────────────────────────────────────────────────────────────────────────
   3 · LES ONGLETS
   Cinq écrans au lieu d'un rouleau. Le compteur dit d'avance ce qu'on y
   trouvera — on n'ouvre plus un onglet pour découvrir qu'il est vide.
   ────────────────────────────────────────────────────────────────────────── */
body.spm-app-mode .spm-fp__onglets{
  display:flex; gap:3px; margin:22px 0 0; padding:4px;
  background:var(--sy-pap3); border:1px solid var(--sy-brd);
  border-radius:var(--sy-r2); overflow-x:auto;
}
body.spm-app-mode .spm-fp__onglet{
  flex:1; min-width:max-content; padding:9px 16px; border:0;
  border-radius:var(--sy-r1); background:transparent; color:var(--sy-t2);
  font-family:inherit; font-size:.92rem; font-weight:500; white-space:nowrap;
  cursor:pointer;
}
body.spm-app-mode .spm-fp__onglet:hover{ color:var(--sy-t1); }
/* L'onglet actif porte un filet : sur Night Loft, la carte et son socle sont
   deux gris voisins et le seul fond ne suffisait pas à le désigner. */
body.spm-app-mode .spm-fp__onglet[aria-selected="true"]{
  background:var(--sy-pap); color:var(--sy-v); font-weight:650;
  box-shadow:0 1px 2px rgba(15,26,22,.05); border:1px solid var(--sy-brd);
  padding:8px 15px;
}
body.spm-app-mode .spm-fp__compte{
  display:inline-block; margin-left:6px; padding:0 6px; border-radius:20px;
  background:var(--sy-pap2); color:var(--sy-t3);
  font-size:.74rem; font-weight:650; font-variant-numeric:tabular-nums;
}
body.spm-app-mode .spm-fp__onglet[aria-selected="true"] .spm-fp__compte{
  background:var(--sy-vp); color:var(--sy-v);
}

body.spm-app-mode .spm-fp__volet{ display:none; padding-top:20px; }
body.spm-app-mode .spm-fp__volet[data-actif="1"]{ display:block; }

/* la phrase d'accueil de chaque onglet — l'aide de base, toujours là */
body.spm-app-mode .spm-fp__intro{
  display:flex; gap:11px; align-items:flex-start; margin-bottom:18px;
  padding:11px 14px; background:var(--sy-pap3); border-radius:var(--sy-r2);
  color:var(--sy-t2); font-size:.9rem;
}
body.spm-app-mode .spm-fp__intro svg{
  flex:none; width:17px; height:17px; margin-top:2px; color:var(--sy-v);
}
body.spm-app-mode .spm-fp__intro b{ color:var(--sy-t1); }


/* ──────────────────────────────────────────────────────────────────────────
   4 · LES CARTES DE CONTENU
   ────────────────────────────────────────────────────────────────────────── */
body.spm-app-mode .spm-fp__grille{ display:grid; gap:14px; }
body.spm-app-mode .spm-fp__grille--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
body.spm-app-mode .spm-fp__grille--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){
  body.spm-app-mode .spm-fp__grille--2,
  body.spm-app-mode .spm-fp__grille--3{ grid-template-columns:1fr; }
}
body.spm-app-mode .spm-fp__carte{
  padding:17px 19px; background:var(--sy-pap);
  border:1px solid var(--sy-brd); border-radius:var(--sy-r3);
  box-shadow:0 1px 2px rgba(15,26,22,.05); min-width:0;
}
body.spm-app-mode .spm-fp__carte-tete{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:13px; flex-wrap:wrap;
}
body.spm-app-mode .spm-fp__carte-titre{
  font-size:1rem; font-weight:650; color:var(--sy-t1);
  display:flex; align-items:center; gap:6px; margin:0;
}

body.spm-app-mode .spm-fp__paires{ display:grid; gap:9px; margin:0; }
body.spm-app-mode .spm-fp__paire{
  display:flex; justify-content:space-between; gap:14px; font-size:.92rem;
}
body.spm-app-mode .spm-fp__paire dt{ color:var(--sy-t3); }
body.spm-app-mode .spm-fp__paire dd{
  margin:0; text-align:right; font-weight:500; color:var(--sy-t1); min-width:0;
}
body.spm-app-mode .spm-fp__paire dd.spm-fp__rien{ color:var(--sy-t3); font-weight:400; }

/* les parents, cliquables */
body.spm-app-mode .spm-fp__parent{
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  background:var(--sy-pap2); border:1px solid var(--sy-brd);
  border-radius:var(--sy-r2); text-decoration:none; color:inherit;
}
body.spm-app-mode .spm-fp__parent:hover{ border-color:var(--sy-v); }
body.spm-app-mode .spm-fp__parent-role{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:.9rem;
  background:var(--sy-vp); color:var(--sy-v);
}
body.spm-app-mode .spm-fp__parent-role--f{ background:var(--sy-rp); color:var(--sy-r); }
body.spm-app-mode .spm-fp__parent-bague{
  display:block; font-weight:650; font-size:.93rem;
  font-variant-numeric:tabular-nums; color:var(--sy-t1);
}
body.spm-app-mode .spm-fp__parent-nom{ display:block; font-size:.8rem; color:var(--sy-t3); }

body.spm-app-mode .spm-fp__note{ font-size:.9rem; color:var(--sy-t2); line-height:1.65; }
body.spm-app-mode .spm-fp__note p{ margin:0 0 8px; }
body.spm-app-mode .spm-fp__note-source{
  display:inline-block; margin-bottom:8px; padding:2px 8px; border-radius:5px;
  background:var(--sy-pap3); color:var(--sy-t3);
  font-size:.72rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
}


/* ──────────────────────────────────────────────────────────────────────────
   5 · LE PALMARÈS
   Un seul tableau. « Meilleurs résultats » et « Derniers concours »
   montraient les mêmes courses dans deux colonnes voisines.
   ────────────────────────────────────────────────────────────────────────── */
body.spm-app-mode .spm-fp__tableau{
  overflow-x:auto; border:1px solid var(--sy-brd); border-radius:var(--sy-r2);
  background:var(--sy-pap);
}
body.spm-app-mode .spm-fp__tableau table{
  width:100%; border-collapse:collapse; font-size:.9rem; margin:0;
}
body.spm-app-mode .spm-fp__tableau th{
  padding:9px 13px; text-align:left; background:var(--sy-pap3);
  font-size:.72rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sy-t3); white-space:nowrap; border:0;
}
body.spm-app-mode .spm-fp__tableau td{
  padding:11px 13px; border-top:1px solid var(--sy-brd);
  border-left:0; border-right:0; border-bottom:0; vertical-align:middle;
  color:var(--sy-t1);
}
body.spm-app-mode .spm-fp__tableau tbody tr:hover{ background:var(--sy-pap2); }
body.spm-app-mode .spm-fp__num{ text-align:right; font-variant-numeric:tabular-nums; }
body.spm-app-mode .spm-fp__rang{
  display:inline-grid; place-items:center; min-width:34px; height:26px; padding:0 7px;
  border-radius:6px; background:var(--sy-pap3); color:var(--sy-t1);
  font-weight:700; font-variant-numeric:tabular-nums; font-size:.9rem;
}
/* une victoire se voit : l'ambre de performance, pas une couleur de plus */
body.spm-app-mode .spm-fp__rang--or{ background:var(--sy-ac); color:var(--sy-h1); }
body.spm-app-mode .spm-fp__rang--haut{ background:var(--sy-bp); color:var(--sy-b); }
body.spm-app-mode .spm-fp__lieu{ font-weight:500; }
body.spm-app-mode .spm-fp__lieu small{
  display:block; color:var(--sy-t3); font-weight:400; font-size:.78rem;
}


/* ──────────────────────────────────────────────────────────────────────────
   6 · LA DESCENDANCE
   ────────────────────────────────────────────────────────────────────────── */
body.spm-app-mode .spm-fp__petits{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px;
}
body.spm-app-mode .spm-fp__petit{
  display:block; padding:11px 13px; text-decoration:none; color:inherit;
  background:var(--sy-pap); border:1px solid var(--sy-brd);
  border-radius:var(--sy-r2); min-width:0;
}
body.spm-app-mode .spm-fp__petit:hover{ border-color:var(--sy-v); }
body.spm-app-mode .spm-fp__petit-bague{
  display:block; font-weight:650; font-variant-numeric:tabular-nums;
  font-size:.92rem; color:var(--sy-t1);
}
body.spm-app-mode .spm-fp__petit-meta{
  display:block; font-size:.79rem; color:var(--sy-t3); margin-top:2px;
}


/* ──────────────────────────────────────────────────────────────────────────
   7 · LA SANTÉ
   Le vide tient en une ligne. Trois panneaux pour annoncer trois fois
   « aucun », c'était trois fois rien qui prenait toute la place.
   ────────────────────────────────────────────────────────────────────────── */
body.spm-app-mode .spm-fp__calme{
  display:flex; align-items:center; gap:13px; padding:17px 19px;
  background:var(--sy-pap); border:1px solid var(--sy-brd); border-radius:var(--sy-r3);
}
body.spm-app-mode .spm-fp__pastille{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:var(--sy-vp); color:var(--sy-v);
}
body.spm-app-mode .spm-fp__calme--alerte .spm-fp__pastille{
  background:var(--sy-rp); color:var(--sy-r);
}
body.spm-app-mode .spm-fp__calme-t{ font-weight:650; color:var(--sy-t1); }
body.spm-app-mode .spm-fp__calme-s{ font-size:.88rem; color:var(--sy-t2); }
body.spm-app-mode .spm-fp__compteurs{
  display:flex; flex-wrap:wrap; gap:7px; margin-top:13px;
}
body.spm-app-mode .spm-fp__compteur{
  padding:5px 11px; border-radius:20px; background:var(--sy-pap3);
  border:1px solid var(--sy-brd); font-size:.83rem; color:var(--sy-t2);
}
body.spm-app-mode .spm-fp__compteur b{ font-variant-numeric:tabular-nums; color:var(--sy-t1); }
body.spm-app-mode .spm-fp__compteur--alerte{
  background:var(--sy-rp); border-color:var(--sy-rbd); color:var(--sy-r);
}
body.spm-app-mode .spm-fp__compteur--alerte b{ color:var(--sy-r); }
body.spm-app-mode .spm-fp__rang-bt{ display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
body.spm-app-mode .spm-fp__apres{ margin-top:13px; font-size:.86rem; color:var(--sy-t3); }


/* ──────────────────────────────────────────────────────────────────────────
   8 · L'AIDE
   Rien n'expliquait « Colonie réelle », « Pedigree seul » ni « Régularité
   Top 10 » — des termes du métier qu'un nouveau venu ne devine pas.
   L'explication s'ouvre à côté du mot, pas dans une page d'aide ailleurs.
   ────────────────────────────────────────────────────────────────────────── */
body.spm-app-mode .spm-fp__aide{
  flex:none; width:16px; height:16px; padding:0; border-radius:50%;
  border:1px solid var(--sy-brd); background:var(--sy-pap3); color:var(--sy-t3);
  font-family:inherit; font-size:.66rem; font-weight:700; line-height:1;
  display:inline-grid; place-items:center; vertical-align:middle; cursor:pointer;
}
body.spm-app-mode .spm-fp__aide:hover{
  background:var(--sy-v); border-color:var(--sy-v); color:var(--sy-ht);
}
.spm-fp-bulle{
  position:fixed; z-index:9999; max-width:290px; padding:11px 13px;
  background:var(--sy-pap,#fff); border:1px solid var(--sy-brd,#DBE0EC);
  border-radius:12px; box-shadow:0 10px 30px rgba(12,31,63,.18);
  font-size:.86rem; line-height:1.55; color:var(--sy-t2,#4E576D);
  display:none;
}
.spm-fp-bulle[data-ouvert="1"]{ display:block; }
.spm-fp-bulle b{ display:block; color:var(--sy-t1,#151B2B); margin-bottom:3px; }


/* ──────────────────────────────────────────────────────────────────────────
   9 · CE QUI VIENT D'AILLEURS
   Le pedigree au format du métier, l'historique des casiers et les blocs
   santé gardent leur propre habillage : on se contente de leur donner de
   l'air et d'empêcher l'arbre de pousser la page sur le côté.
   ────────────────────────────────────────────────────────────────────────── */
body.spm-app-mode .spm-fp__hote{ overflow-x:auto; }
body.spm-app-mode .spm-fp__hote > .spm-panel{ margin:0; }
body.spm-app-mode .spm-fp__volet .spm-panel + .spm-panel{ margin-top:14px; }

/* la note qui explique le statut — une phrase, pas un jeton */
body.spm-app-mode .spm-fp__age{
  margin:8px 0 0; font-size:.82rem; color:var(--sy-t3);
}


/* ──────────────────────────────────────────────────────────────────────────
   10 · LE FORMULAIRE DU PIGEON
   Dix-sept champs se suivaient au même niveau : pour corriger une année, il
   fallait traverser la photo, les notes et trois répéteurs de personnes.
   Ici : un socle avec ce qu'on remplit à chaque fois, puis quatre volets.
   Un volet qui contient déjà quelque chose s'ouvre tout seul — on range,
   on n'escamote pas.
   ────────────────────────────────────────────────────────────────────────── */
body.spm-app-mode .spm-ff{ display:grid; gap:12px; }

body.spm-app-mode .spm-ff__socle{
  padding:18px; background:var(--sy-pap2);
  border:1px solid var(--sy-brd); border-radius:var(--sy-r3);
}
body.spm-app-mode .spm-ff__grille{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
}
@media (max-width:900px){
  body.spm-app-mode .spm-ff__grille{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  body.spm-app-mode .spm-ff__grille{ grid-template-columns:1fr; }
}
body.spm-app-mode .spm-ff__champ{ min-width:0; }
/* deux pistes pour ce qui a besoin de place : bague, nom, bagues des parents */
body.spm-app-mode .spm-ff__champ--large{ grid-column:span 2; }
@media (max-width:560px){
  body.spm-app-mode .spm-ff__champ--large{ grid-column:span 1; }
}
body.spm-app-mode .spm-ff__champ label{
  display:block; margin-bottom:5px;
  font-size:.78rem; font-weight:650; letter-spacing:.04em; color:var(--sy-t2);
}
body.spm-app-mode .spm-ff__champ .spm-input{ width:100%; }
body.spm-app-mode .spm-ff__oblig{ color:var(--sy-r); }
body.spm-app-mode .spm-ff__lot{ margin-top:14px; }

/* les volets */
body.spm-app-mode .spm-ff__volet{
  background:var(--sy-pap); border:1px solid var(--sy-brd);
  border-radius:var(--sy-r2); overflow:hidden;
}
body.spm-app-mode .spm-ff__titre{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:13px 16px; cursor:pointer; list-style:none;
  font-weight:650; color:var(--sy-t1);
}
body.spm-app-mode .spm-ff__titre::-webkit-details-marker{ display:none; }
/* le chevron, tourné quand le volet est ouvert */
body.spm-app-mode .spm-ff__titre::before{
  content:'▸'; flex:none; color:var(--sy-t3); font-size:.9rem;
  transition:transform .15s;
}
body.spm-app-mode .spm-ff__volet[open] > .spm-ff__titre::before{ transform:rotate(90deg); }
body.spm-app-mode .spm-ff__titre:hover{ background:var(--sy-pap3); }
body.spm-app-mode .spm-ff__quoi{
  font-size:.82rem; font-weight:400; color:var(--sy-t3);
}
body.spm-app-mode .spm-ff__volet[open] > .spm-ff__titre{
  border-bottom:1px solid var(--sy-brd);
}
body.spm-app-mode .spm-ff__volet > *:not(summary){ margin:14px 16px; }
body.spm-app-mode .spm-ff__volet > *:last-child{ margin-bottom:16px; }

body.spm-app-mode .spm-ff__aide{
  font-size:.85rem; color:var(--sy-t3); line-height:1.55;
}
body.spm-app-mode .spm-ff__champ .spm-ff__aide{ margin:6px 0 0; }

body.spm-app-mode .spm-ff__pied{
  display:flex; flex-wrap:wrap; gap:8px; padding-top:4px;
}
@media (prefers-reduced-motion:reduce){
  body.spm-app-mode .spm-ff__titre::before{ transition:none; }
}


/* ──────────────────────────────────────────────────────────────────────────
   11 · L'ÉCRAN RÉSULTATS
   ────────────────────────────────────────────────────────────────────────── */

/* 🔴 CORRIGÉ le 29/08/2026 — quatre encarts illisibles.
   « Le plus classé », « Le plus victorieux », « Le plus régulier », « Le plus
   rentable » sont peints dans frontend.css pour un fond SOMBRE : valeur en
   #fff, nom en #d9e2f1, fond en rgba(255,255,255,.03). Sur le fond clair de
   l'application, « 2 résultats », « 100% Top 10 » ou « 54,27 pts » sortaient
   en blanc sur blanc — présents à l'écran, invisibles à l'œil.
   On repasse par les jetons : lisible dans les six thèmes, sombre compris. */
body.spm-app-mode .spm-results-pigeon-highlight-card{
  background:var(--sy-pap2) !important;
  border-color:var(--sy-brd) !important;
}
body.spm-app-mode .spm-results-pigeon-highlight-label,
body.spm-app-mode .spm-results-pigeon-highlight-meta,
body.spm-app-mode .spm-results-pigeon-highlight-empty{ color:var(--sy-t3) !important; }
body.spm-app-mode .spm-results-pigeon-highlight-name{ color:var(--sy-t2) !important; }
body.spm-app-mode .spm-results-pigeon-highlight-main{ color:var(--sy-t1) !important; }
/* la valeur est une PERFORMANCE : elle prend l'ambre, comme partout ailleurs */
body.spm-app-mode .spm-results-pigeon-highlight-value{ color:var(--sy-a) !important; }

/* la barre d'actions, sans titre ni badge */
body.spm-app-mode .spm-results-actions{
  padding:14px 16px; background:var(--sy-pap);
  border:1px solid var(--sy-brd); border-radius:var(--sy-r2);
}

/* les onglets d'un écran gardent l'air de la fiche */
body.spm-app-mode [data-spm-onglets] > .spm-fp__onglets{ margin-top:0; }

/* la base officielle, ouverte depuis l'onglet Officiels */
body.spm-app-mode .spm-results-officiels{
  margin-top:16px; padding:17px 19px; background:var(--sy-pap);
  border:1px solid var(--sy-brd); border-radius:var(--sy-r3);
}
/* l'interface du plugin Résultats apporte son propre habillage, cloisonné
   sous #sprfcb : on lui laisse la place et on borne seulement sa largeur. */
body.spm-app-mode .spm-results-officiels #sprfcb{ max-width:100%; overflow-x:auto; }

/* 🔴 CORRIGÉ le 29/08/2026 — le survol rendait la ligne illisible.
   Le tableau « Vos classements officiels » est posé sur le bandeau VERT
   FONCÉ : son texte est clair, et system.css lui donne le bon survol
   — un blanc à 6 %. Mais une règle plus générale du même fichier,
       body.spm-app-mode .spm-app-shell table tbody tr:hover
           { background:var(--sy-pap2) !important; }
   est plus spécifique ET porte !important : elle gagnait, posant un fond
   CRÈME sous un texte BLANC. La ligne survolée devenait illisible —
   exactement celle qu'on est en train de lire.
   On rétablit ici le survol clair-sur-sombre, et on fixe les couleurs de
   texte pour qu'aucune règle générale ne puisse plus les emporter. */
body.spm-app-mode .spm-app-shell .sy-rfcb__table tbody tr:hover,
body.spm-app-mode .sy-rfcb__table tbody tr:hover{
  background:rgba(255,255,255,.10) !important;
}
body.spm-app-mode .sy-rfcb__table tbody tr:hover td{
  color:var(--sy-ht) !important;
}
/* la vitesse et les valeurs mises en avant gardent leur ambre au survol */
body.spm-app-mode .sy-rfcb__table tbody tr:hover td.strong{
  color:var(--sy-a1) !important;
}

/* ⭐ 29/08/2026 — la silhouette du Studio dans le rail.
   Les icônes du rail sont au TRAIT : system.css leur impose fill:none et
   un stroke. La silhouette, elle, est un aplat — sans cette règle elle
   n'apparaîtrait pas du tout. */
body.spm-app-mode .sy-nav__icon svg.spm-icone-pigeon{
  fill:currentColor !important; stroke:none !important;
}