/* =====================================================================
   VISION PME — Portail partenaire (js/views/partner.js)

   Tout est préfixé « pt- » : ce portail est le seul écran d'un rôle qui
   n'a ni le menu membre ni le menu d'équipe, et rien ici ne doit
   déteindre sur le reste de l'application. Les composants communs
   (.card, .badge, .table, .field, .mode-banner, .empty-state) viennent
   de base.css et app.css — on ne les redéfinit pas, on les compose.

   Chargé après styles/app.css (voir index.html).
   ===================================================================== */

/* ---------- Sections ---------- */
.pt-bloc { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.pt-bloc-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pt-bloc-head h2 { font: 700 1.15rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.pt-bloc-head small { color: var(--text-subtle); font-size: var(--fs-xs); }

/* ---------- Le relevé : quatre totaux ----------
   Le montant brut, la retenue et la part nette doivent se lire d'un
   coup d'œil comme UNE addition : même gabarit, la retenue en négatif,
   la part nette soulignée de vert. Aucun de ces chiffres n'est estimé —
   ils viennent tous de `expert_sessions`. */
.pt-totaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-4); }
.pt-tot {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: 4px;
  border-top: 3px solid var(--border-strong);
}
.pt-tot .label { font: 600 var(--fs-2xs)/1.4 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-subtle); }
.pt-tot .value { font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.pt-tot .sous { font-size: var(--fs-2xs); color: var(--text-subtle); }
.pt-tot.retenue { border-top-color: var(--warn); }
.pt-tot.retenue .value { color: var(--warn); }
.pt-tot.net { border-top-color: var(--green); }
.pt-tot.net .value { color: var(--green-text); }

.pt-carte-releve { padding: 0; overflow: hidden; }
.pt-carte-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border);
}
.pt-carte-head h3 { font-size: 1rem; }
.pt-carte-head small { color: var(--text-subtle); font-size: var(--fs-xs); }
.pt-carte-releve .table-wrap { border: none; border-radius: 0; }

/* Colonnes d'argent : alignées à droite, chiffres tabulaires — sinon
   trois montants de longueurs différentes ne se comparent pas. */
.pt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-num small { display: block; font-size: var(--fs-2xs); color: var(--text-subtle); font-weight: 400; }
.pt-carte-releve tfoot td { padding: 14px 16px; border-top: 2px solid var(--border-strong); background: var(--surface-2); }
/* Une date de séance ne se coupe pas en trois lignes : la colonne reste
   d'un bloc, c'est la table qui défile (.table porte déjà min-width). */
.pt-carte-releve .table td:first-child { white-space: nowrap; }
/* Une séance remboursée ou annulée reste visible mais ne compte pas. */
.pt-hors-total td { opacity: 0.55; }

/* ---------- Notes et avis ---------- */
.pt-note { font-size: 0.82rem; line-height: 1.6; color: var(--text-muted); max-width: 88ch; }
.pt-note a { color: var(--green-text); text-decoration: underline; }

.pt-avis {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5) var(--s-6); border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  margin-bottom: var(--s-8);
}
.pt-avis > .icon { flex: none; width: 20px; height: 20px; color: var(--text-muted); margin-top: 2px; }
.pt-avis b { font: 600 0.92rem/1.4 var(--font-body); }
.pt-avis p { font-size: 0.82rem; line-height: 1.6; color: var(--text-muted); margin-top: 5px; max-width: 88ch; }
.pt-avis a { color: var(--green-text); text-decoration: underline; }
.pt-avis.compact { padding: var(--s-4); margin-bottom: 0; }

/* ---------- Aperçu marketplace ----------
   La carte de gauche montre au partenaire exactement ce qu'un membre
   voit ; elle reprend donc les proportions de .cours-card. */
.pt-apercu { padding: var(--s-6); display: grid; gap: var(--s-4); align-content: start; }
.pt-apercu-head { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.pt-apercu-head .nm { font: 600 1rem/1.3 var(--font-display); }
.pt-apercu-head .ct { font-size: 0.76rem; color: var(--text-subtle); }
.pt-offre { font-size: 0.9rem; line-height: 1.6; color: var(--text); }
.pt-offre.vide { color: var(--text-subtle); font-style: italic; }
.pt-desc { font-size: 0.84rem; line-height: 1.6; color: var(--text-muted); }

/* ---------- Fiches en lecture seule ---------- */
.pt-fiche { padding: var(--s-6); display: grid; gap: var(--s-4); align-content: start; }
.pt-fiche h3 { font-size: 1rem; }

.pt-kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 10px var(--s-4); align-items: baseline; }
.pt-kv dt { font: 600 var(--fs-2xs)/1.4 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-subtle); }
.pt-kv dd { font-size: 0.88rem; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pt-kv .mono { font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--green-text); }
.pt-vide { color: var(--text-subtle); font-style: italic; font-size: 0.82rem; }

/* ---------- Formulaire ---------- */
/* Même gabarit que .profil-card côté membre : les champs respirent, le
   bouton d'envoi reste collé au bas de la carte quelle que soit la
   hauteur de la colonne voisine. */
.pt-formulaire { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-8); }
.pt-formulaire h3 { font-size: 1.05rem; }
.pt-formulaire .form-row { gap: var(--s-5); }
.pt-formulaire > .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Un lien dans un bandeau ----------
   `.mode-banner` vient d'app.css et n'habille pas ses liens : sans ça,
   « Ouvrir ma boîte de réception » ressemble à du texte. Classe dédiée
   plutôt que `.mode-banner a`, pour ne rien changer aux bandeaux du
   reste de l'application. */
.pt-lien { text-decoration: underline; cursor: pointer; color: inherit; }

/* ---------- La boîte de réception d'expert ----------
   Une demande = un membre qui a payé et qui attend. Le délai d'attente
   est donc l'information la plus grosse de la carte, avant le montant :
   c'est lui qui dit s'il y a urgence. Au-delà de 48 h, la carte entière
   bascule en rouge — un liseré à gauche, visible en survolant la page
   sans lire une ligne. */
.pt-demande { padding: var(--s-6); display: grid; gap: var(--s-4); border-left: 3px solid var(--warn); }
.pt-demande + .pt-demande { margin-top: var(--s-4); }
.pt-demande.urgente { border-left-color: var(--danger); }

.pt-demande-head { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
/* Enfant DIRECT : le badge « Simulée » vit dans .pt-demande-type, et un
   sélecteur descendant lui aurait collé le `margin-left: auto` destiné au
   badge de format — il serait parti seul à droite de sa ligne. */
.pt-demande-head > .badge { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.pt-demande-head > .badge .icon { width: 13px; height: 13px; }
.pt-demande-type { display: flex; align-items: center; gap: 7px; font: 600 0.95rem/1.3 var(--font-display); }
.pt-demande-type .icon { width: 17px; height: 17px; color: var(--text-muted); }

.pt-attente { font: 700 1.05rem/1.3 var(--font-display); color: var(--warn); margin-top: 3px; }
.pt-attente.urgente { color: var(--danger); }

/* La question du membre, telle qu'il l'a écrite. Retrait et fond distincts
   du reste de la carte : ce n'est pas la voix de la plateforme. */
.pt-question {
  /* `blockquote` garde la marge du navigateur (1em 40px) : tokens.css ne
     remet à zéro que body, h1-h4 et p. Sans ce `margin: 0`, la question du
     membre serait décalée de 40 px à gauche ET à droite dans sa carte. */
  margin: 0;
  font-size: 0.9rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--s-4) var(--s-5);
  max-width: 88ch;
}

.pt-demande-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ---------- L'envoi d'un média ----------
   Une barre de progression, et pas un simple « Envoi… » : un fichier de
   plusieurs mégaoctets part en dizaines de secondes sur un lien
   d'entreprise moyen, et sans repère visible c'est la fenêtre qu'on
   ferme au milieu de l'envoi. La barre ne mesure QUE le téléversement —
   la vérification du type et la clôture de la séance se font ensuite,
   côté serveur, et l'état sous la barre le dit en toutes lettres plutôt
   que de laisser 100 % passer pour « livré ». */
.pt-envoi { display: grid; gap: 8px; }
.pt-envoi-barre {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--border);
}
.pt-envoi-barre > span {
  display: block; height: 100%; width: 0; background: var(--green);
  border-radius: 999px; transition: width 0.18s linear;
}
.pt-envoi-etat {
  font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums;
}

/* ---------- Le lecteur d'un média de séance ----------
   Ouvert par une URL signée de dix minutes (voir `urlSigneeMedia`). Le
   fond sombre vaut pour les deux thèmes : une vidéo verticale filmée au
   téléphone laisse deux bandes de chaque côté, et du gris clair les
   ferait passer pour un défaut d'affichage. */
.pt-lecteur {
  background: #000; border-radius: var(--r-lg); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pt-lecteur video { width: 100%; max-height: 62vh; display: block; }
.pt-lecteur audio { width: 100%; margin: var(--s-5); }

/* ---------- Téléphone : rien ne dépasse ----------
   Mesuré à 375 px : `document.scrollWidth` valait 420 sur /app/partenaire
   ET sur /app/partenaire/offre — la page entière défilait latéralement.

   Trois causes qui se cumulent, toutes du même genre : un plancher de
   largeur qu'aucun ancêtre ne peut réduire.

     1. `.badge` porte `white-space: nowrap` (base.css) et « Premium —
        déverrouillage en VisionCoins » mesure 314 px d'un seul tenant.
        Comme .pt-fiche, .cols-13 et .page sont des grilles à piste
        `auto`, ce plancher remonte intact jusqu'au corps de la page :
        314 + 40 (retrait `dd`) + 48 (marge intérieure de la carte)
        + 2 (bordures) = 404, soit 420 avec la marge de .page.
        Sur un écran de 375 px un libellé indéformable ne peut pas
        tenir : ici, et ici seulement, le badge se replie sur deux
        lignes. Ailleurs le nowrap de base.css reste la règle.
     2. `dd` garde le retrait de 40 px du navigateur alors que la liste
        est passée à une colonne — 40 px volés à un écran qui n'en a
        que 375, sans rien apporter puisque le dt est déjà au-dessus.
     3. `1fr` vaut `minmax(auto, 1fr)` : son minimum automatique est le
        min-content du contenu, donc il ne protège de rien. Il faut
        `minmax(0, 1fr)` pour que la piste puisse vraiment rétrécir.

   `.pt-totaux` (repeat(auto-fit, minmax(190px, 1fr))) était une victime
   plutôt qu'une cause — dans 404 px il tenait deux colonnes de 194.
   Il est ramené à une colonne ici pour ne plus jamais l'être. */
@media (max-width: 720px) {
  .pt-formulaire { padding: var(--s-6); }
  .pt-totaux { grid-template-columns: minmax(0, 1fr); }
  .pt-kv { grid-template-columns: minmax(0, 1fr); gap: 3px var(--s-3); }
  .pt-kv dd { margin-bottom: 8px; margin-inline-start: 0; }
  .pt-apercu-head .badge,
  .pt-kv dd .badge { white-space: normal; }
  /* Même cause qu'au-dessus : « Réponse vocale » et compagnie portent le
     `white-space: nowrap` de .badge, et le badge de format est poussé à
     droite par `margin-left: auto`. Sur 375 px il repasse à la ligne, au
     lieu d'imposer un plancher de largeur à la carte entière. */
  .pt-demande { padding: var(--s-5); }
  .pt-demande-head > .badge { margin-left: 0; white-space: normal; }
  .pt-demande-actions .btn { width: 100%; justify-content: center; }
}