/* ═══════════════════════════════════════════════════════════════════════════
   LE KIT DE PUBLICATION — la feuille du panneau « Partager ».

   Chargée DEPUIS les partials (partials/partage_classement.php et
   partials/partage_journee.php), même motif que fil.css et les p-*.css : la
   page qui n'a pas de bouton de partage ne télécharge pas cette feuille.

   Elle n'invente aucune couleur : tous les aplats, toutes les encres et tous
   les traits viennent des jetons du socle (app.css § 2 et § 3). Le seul
   ajout est de la MISE EN PLACE.

   Trois principes tenus ici :

     • Rien ne bouge pendant qu'on lit ou qu'on copie (commandement 7). La
       seule transition du fichier porte sur l'ouverture du panneau, et sur
       transform/opacity uniquement.
     • Le panneau est un <dialog> NATIF : le voile, le piège de focus et la
       touche Échap viennent du navigateur, pas d'un script. Sans JavaScript,
       le panneau reste ouvrable — voir le repli <details> des partials.
     • Cibles de 48 px : le joueur médian a plus de cinquante-cinq ans et
       tient son téléphone d'une main, debout, au bord d'un terrain.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────── LE DÉCLENCHEUR ────────── */

.pt-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r3);
  margin-block: var(--r4);
}

.pt-barre .pt-dire {
  margin: 0;
  color: var(--encre-2);
  font-size: .88rem;
  max-width: 46ch;
}

/* Le bouton reprend .bouton/.bouton-vide du socle : on ne redéfinit ici que
   l'alignement du signe et la hauteur de touche. */
.pt-declencheur {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
}

.pt-declencheur svg { flex: none; }

/* ───────────────────────────────────────────────── LE PANNEAU ─────────── */

.pt-panneau {
  width: min(560px, calc(100vw - 2 * var(--gouttiere)));
  max-height: min(88dvh, 900px);
  padding: 0;
  border: 1px solid var(--trait);
  border-radius: var(--arrondi-2);
  background: var(--carte);
  color: var(--encre);
  box-shadow: var(--ombre-3);
  overflow: hidden;
}

.pt-panneau::backdrop {
  background: color-mix(in oklch, var(--marine-950) 72%, transparent);
}

/* L'arrivée du panneau : opacité et translation, jamais une hauteur. Le
   @starting-style et transition-behavior font l'ouverture ET la fermeture
   sans une ligne de script ; là où ils ne sont pas connus, le panneau
   apparaît d'un coup, ce qui n'a jamais gêné personne. */
@media (prefers-reduced-motion: no-preference) {
  .pt-panneau {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--duree-3) var(--sortant),
      transform var(--duree-3) var(--sortant),
      overlay var(--duree-3) allow-discrete,
      display var(--duree-3) allow-discrete;
  }
  .pt-panneau:not([open]) { opacity: 0; transform: translateY(12px); }
  @starting-style {
    .pt-panneau[open] { opacity: 0; transform: translateY(12px); }
  }
}

.pt-corps {
  display: grid;
  gap: var(--r4);
  max-height: min(88dvh, 900px);
  padding: var(--r5) var(--r5) var(--r4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pt-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--r3);
}

.pt-tete h2 {
  margin: 0;
  font-family: var(--titre);
  font-size: 1.6rem;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--encre-accent);
}

.pt-tete p {
  margin: .35rem 0 0;
  color: var(--encre-2);
  font-size: .86rem;
}

.pt-fermer {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -.35rem -.35rem 0 0;
  border: 0;
  border-radius: var(--arrondi);
  background: transparent;
  color: var(--encre-2);
  cursor: pointer;
}

.pt-fermer:hover { background: var(--sol-2); color: var(--encre); }

/* ───────────────────────────────────────────────── L'AFFICHE ──────────── */

/* L'aperçu montre EXACTEMENT le fichier qui partira : c'est la même adresse
   que le lien « Ouvrir l'affiche ». Un aperçu redessiné en HTML mentirait
   tôt ou tard. Fond marine posé sous l'image : pendant le chargement, le
   cadre a déjà la bonne couleur, donc rien ne saute (CLS). */
.pt-affiche {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--r4);
  padding: var(--r3);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  background: var(--sol-2);
}

.pt-affiche img {
  display: block;
  width: 108px;
  height: 135px;          /* 4:5, la place est réservée avant le chargement */
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  background: var(--bleu-nuit);
  box-shadow: var(--ombre-1);
}

.pt-affiche-texte { min-width: 0; }

.pt-affiche-texte p {
  margin: 0 0 .4rem;
  font-size: .86rem;
  color: var(--encre-2);
}

.pt-affiche-texte .pt-lien {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 40px;
  font-weight: 700;
  color: var(--lien);
}

.pt-affiche-texte .pt-lien:hover { color: var(--lien-survol); }

/* ─────────────────────────────────────── LES BLOCS PRÊTS À COLLER ─────── */

.pt-bloc {
  display: grid;
  gap: var(--r2);
}

.pt-bloc > .etiquette { margin: 0; }

.pt-zone {
  width: 100%;
  min-height: 8.5rem;
  padding: .7rem .8rem;
  font: 400 .88rem/1.5 var(--texte);
  color: var(--encre);
  background: var(--sol-2);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  resize: vertical;
  white-space: pre-wrap;
}

.pt-zone:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.pt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2);
}

.pt-actions .bouton { min-height: 48px; }

/* Le retour de la copie : une phrase, pas une bulle qui vole. Elle occupe sa
   place même vide — sinon le panneau se décale au premier clic. */
.pt-etat {
  margin: 0;
  min-height: 1.25rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--vert-texte, var(--encre-2));
}

.pt-etat:empty::before { content: "\00a0"; }

/* ────────────────────────────────────────────────── LE PIED ───────────── */

.pt-pied {
  margin: 0;
  padding-top: var(--r3);
  border-top: 1px solid var(--trait);
  font-size: .8rem;
  color: var(--encre-3);
}

/* ────────────────────────── LE REPLI SANS JAVASCRIPT ──────────────────── */

/* Sans script, le <dialog> ne s'ouvre pas : le partial rend alors un
   <details> qui contient exactement le même contenu. Il n'est visible que
   dans ce cas — le script le retire dès qu'il prend la main. */
.pt-repli > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--lien);
}

.pt-repli[open] > summary { margin-bottom: var(--r3); }

.pt-repli .pt-corps {
  max-height: none;
  padding: 0;
  overflow: visible;
}

/* ─────────────────────────────────────────────────── MOBILE ───────────── */

@media (max-width: 480px) {
  .pt-panneau {
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    margin: auto auto 0;                     /* le panneau monte du bas */
    border-radius: var(--arrondi-2) var(--arrondi-2) 0 0;
  }
  .pt-corps { padding: var(--r4) var(--r4) var(--r5); }
  .pt-affiche { grid-template-columns: 1fr; justify-items: start; }
  .pt-affiche img { width: 132px; height: 165px; }
  .pt-actions .bouton { flex: 1 1 12rem; justify-content: center; }
}

/* ──────────────────────────────────────────────── IMPRESSION ──────────── */

/* Une feuille punaisée au mur de la buvette n'a que faire d'un bouton de
   partage. Le panneau, lui, n'existe pas à l'impression. */
@media print {
  .pt-barre,
  .pt-panneau,
  .pt-repli { display: none !important; }
}