/* ══════════════════════════════════════════════════════════════════════
   Publier — design « Frenchy Site · Publier », Claude Design

   Une page a part, et non l'encadre coince au milieu du fil. Ce qu'on
   publie merite la place de l'ecran : le compositeur du fil obligeait a
   ecrire dans une boite de six lignes, sans voir ce qu'on fabriquait.

   Prefixe pb- : la page charge aussi tokens.css, layout.css, nav.css et
   fil.css, tous partages.
   ══════════════════════════════════════════════════════════════════════ */

/* Sans cette regle, ni le fond ni la couleur du texte n'etaient poses :
   le navigateur peignait du blanc et ecrivait en noir, et la page
   s'affichait en cartes sombres sur fond clair. Les autres pages
   avaient chacune leur <style> local ; celle-ci n'en a pas. */
body {
  background: var(--fy-nuit, #07071a);
  color: var(--fy-encre, #f2f1f7);
  font-family: var(--font-body, 'Instrument Sans', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.pb-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 32px 100px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 56px;
  align-items: start;
}

.pb-titre {
  margin: 0 0 8px;
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400; font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.04; letter-spacing: -.015em;
}
.pb-chapo { margin: 0 0 36px; max-width: 56ch; font-size: 1.03rem; line-height: 1.6; color: var(--fy-gris, #a5a3bc); }

/* ── Les quatre types ────────────────────────────────────────────────── */
.pb-types { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.pb-type {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 11px;
  background: none; color: var(--fy-corps, #d6d4e4);
  font-family: inherit; font-size: .91rem; font-weight: 500;
  padding: 11px 17px; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.pb-type:hover { border-color: rgba(255, 255, 255, .3); }
/* Le type retenu s'inverse : c'est le seul element clair de la page, donc
   impossible a confondre avec un simple survol. */
.pb-type[aria-pressed="true"] {
  background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a);
  border-color: var(--fy-clair, #f4f2ee); font-weight: 600;
}

/* ── Les cartes ──────────────────────────────────────────────────────── */
.pb-carte {
  background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px; padding: 24px; margin-bottom: 16px;
}
.pb-carte-tete {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.pb-etiq {
  font-family: var(--font-mono, monospace); font-size: .655rem;
  font-weight: 500; letter-spacing: .12em; color: var(--fy-sourd, #6e6c88);
  margin-bottom: 18px;
}
.pb-compte { margin-left: auto; font-family: var(--font-mono, monospace); font-size: .69rem; color: var(--fy-faible, #4a4866); }
.pb-compte.pb-trop { color: #ff6b6b; }

.pb-texte {
  width: 100%; box-sizing: border-box; min-height: 132px; resize: vertical;
  background: none; border: 0; outline: none;
  color: #e6e4f0; font-family: inherit; font-size: 1.06rem; line-height: 1.6;
}
.pb-texte::placeholder { color: var(--fy-faible, #4a4866); }

/* ── Le depot de fichier ─────────────────────────────────────────────── */
.pb-depot {
  border: 1px dashed rgba(255, 255, 255, .18); border-radius: 18px;
  padding: 44px 24px; text-align: center; margin-bottom: 16px;
}
.pb-depot[hidden] { display: none; }
.pb-depot-rond {
  width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 13px;
  background: rgba(139, 123, 255, .14);
  display: flex; align-items: center; justify-content: center;
}
.pb-depot-titre { font-size: 1.03rem; font-weight: 600; margin-bottom: 7px; }
.pb-depot-aide { margin: 0 0 18px; font-size: .875rem; line-height: 1.55; color: var(--fy-sourd, #6e6c88); }
/* Les deux boutons sont de meme hauteur et de meme rayon : ils offrent deux
   chemins vers la meme chose, seule leur teinte dit lequel est propose en
   premier. Ils passent l'un sous l'autre en dessous de 420 px plutot que de
   se serrer sous la taille tactile minimale. */
.pb-depot-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: center;
}
.pb-bouton-sobre, .pb-bouton-vif {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; min-height: 44px; padding: 0 18px;
  font-family: inherit; font-size: .875rem; font-weight: 500;
  cursor: pointer; box-sizing: border-box;
}
.pb-bouton-sobre {
  border: 1px solid rgba(255, 255, 255, .16);
  background: none; color: var(--fy-encre, #f2f1f7);
}
.pb-bouton-sobre:hover { background: rgba(255, 255, 255, .06); }
.pb-bouton-vif {
  border: 0; font-weight: 600;
  background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a);
}
.pb-bouton-vif:hover { filter: brightness(1.07); }
.pb-bouton-sobre:disabled, .pb-bouton-vif:disabled { opacity: .5; cursor: not-allowed; }
.pb-bouton-vif[hidden] { display: none; }

.pb-depot-etat {
  margin: 14px 0 0; font-size: .82rem; line-height: 1.5;
  color: var(--fy-sourd, #6e6c88); min-height: 1.2em;
}
.pb-depot-etat.pb-ko { color: #ff8f8f; }

.pb-apercu-media { max-width: 100%; border-radius: 13px; margin-bottom: 14px; display: block; }
.pb-apercu-media[hidden] { display: none; }
video.pb-apercu-media { width: 100%; background: #000; }

/* ── Les quatre natures d'un direct ──────────────────────────────────── */
.pb-natures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; }
.pb-nature {
  text-align: left; border: 1px solid rgba(255, 255, 255, .09);
  background: var(--fy-nuit, #07071a); border-radius: 12px; padding: 15px;
  font-family: inherit; color: var(--fy-encre, #f2f1f7); cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.pb-nature:hover { border-color: rgba(255, 255, 255, .22); }
.pb-nature[aria-pressed="true"] { background: rgba(139, 123, 255, .12); border-color: rgba(139, 123, 255, .5); }
.pb-nature:disabled { opacity: .45; cursor: not-allowed; }
.pb-nature-pastille { display: block; width: 11px; height: 11px; border-radius: 3px; margin-bottom: 11px; }
.pb-nature-nom { display: block; font-size: .94rem; font-weight: 600; }
.pb-nature-quoi { display: block; font-size: .81rem; color: var(--fy-gris, #a5a3bc); margin-top: 4px; line-height: 1.4; }

.pb-quand { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pb-champ-titre { font-size: .84rem; color: var(--fy-gris, #a5a3bc); margin-bottom: 9px; }
.pb-champ {
  width: 100%; box-sizing: border-box;
  background: var(--fy-nuit, #07071a); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px; padding: 13px 15px;
  font-family: var(--font-mono, monospace); font-size: .91rem; font-weight: 500;
  color: #e6e4f0; outline: none;
}
.pb-champ:focus { border-color: rgba(139, 123, 255, .5); }

/* ── Le produit lie ──────────────────────────────────────────────────── */
.pb-produit-tete { display: flex; align-items: center; gap: 14px; }
.pb-produit-corps { flex: 1; min-width: 0; }
.pb-produit-nom { font-size: .97rem; font-weight: 600; }
.pb-produit-quoi { font-size: .84rem; color: var(--fy-sourd, #6e6c88); margin-top: 3px; }
.pb-choisir {
  flex: none; border: 0; border-radius: 9px;
  background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a);
  font-family: inherit; font-size: .84rem; font-weight: 600;
  padding: 10px 16px; cursor: pointer;
}
.pb-choisir.pb-choisi { background: rgba(255, 255, 255, .08); color: var(--fy-gris, #a5a3bc); }
.pb-liste-produits {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.pb-liste-produits[hidden] { display: none; }
.pb-produit {
  display: flex; align-items: center; gap: 13px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .09); background: var(--fy-nuit, #07071a);
  border-radius: 12px; padding: 12px; font-family: inherit;
  color: var(--fy-encre, #f2f1f7); cursor: pointer;
}
.pb-produit[aria-pressed="true"] { background: rgba(139, 123, 255, .12); border-color: rgba(139, 123, 255, .5); }
.pb-produit-image {
  width: 46px; height: 46px; flex: none; border-radius: 10px; overflow: hidden;
  background: repeating-linear-gradient(135deg, #191940 0 6px, #212148 6px 12px);
}
.pb-produit-image img { width: 100%; height: 100%; object-fit: cover; }
.pb-prix { font-family: var(--font-mono, monospace); font-size: .84rem; font-weight: 500; color: var(--fy-cyan, #5cd6e8); margin-top: 3px; }
.pb-coche { font-family: var(--font-mono, monospace); font-size: .69rem; color: var(--fy-violet, #8b7bff); }

/* ── Les interrupteurs ───────────────────────────────────────────────── */
.pb-reglage {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 15px 0; display: flex; align-items: center; gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, .07); font-family: inherit;
}
.pb-reglage:last-child { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pb-reglage-nom { display: block; font-size: .94rem; font-weight: 500; color: var(--fy-encre, #f2f1f7); }
.pb-reglage-quoi { display: block; font-size: .81rem; color: var(--fy-sourd, #6e6c88); margin-top: 3px; line-height: 1.45; }
.pb-bascule {
  flex: none; width: 44px; height: 26px; border-radius: 13px;
  background: rgba(255, 255, 255, .14); position: relative; transition: background .18s ease;
}
.pb-bascule::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--fy-sourd, #6e6c88); transition: transform .18s ease, background .18s ease;
}
.pb-reglage[aria-pressed="true"] .pb-bascule { background: var(--fy-cyan, #5cd6e8); }
.pb-reglage[aria-pressed="true"] .pb-bascule::after { transform: translateX(18px); background: var(--fy-nuit, #07071a); }

.pb-audience { display: flex; gap: 9px; margin-bottom: 24px; flex-wrap: wrap; }
.pb-aud {
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 100px;
  background: none; color: var(--fy-corps, #d6d4e4);
  font-family: inherit; font-size: .875rem; font-weight: 500;
  padding: 10px 16px; cursor: pointer;
}
.pb-aud[aria-pressed="true"] { background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a); border-color: var(--fy-clair, #f4f2ee); }

/* ── L'apercu, a droite ──────────────────────────────────────────────── */
.pb-cote { position: sticky; top: 24px; }
.pb-apercu-vide { color: var(--fy-faible, #4a4866); }

/* ── L'ecran de confirmation ─────────────────────────────────────────── */
.pb-fini { max-width: 640px; margin: 0 auto; padding: 120px 32px; text-align: center; }
.pb-fini[hidden] { display: none; }
.pb-fini h1 {
  margin: 0; font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.06;
}
.pb-fini p { margin: 18px auto 34px; max-width: 44ch; font-size: 1.03rem; line-height: 1.6; color: var(--fy-gris, #a5a3bc); }
.pb-fini-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ── Le bouton de la barre ───────────────────────────────────────────── */
.pb-envoyer {
  border: 0; border-radius: 10px; padding: 11px 20px;
  font-family: inherit; font-size: .91rem; font-weight: 600; cursor: pointer;
  background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a);
  transition: background .18s ease;
}
.pb-envoyer:hover:not(:disabled) { background: var(--fy-violet-vif, #a395ff); }
/* Eteint tant qu'il n'y a rien a publier : le bouton dit ce qui manque au
   lieu de laisser partir une publication vide et d'expliquer apres. */
.pb-envoyer:disabled { background: rgba(255, 255, 255, .08); color: var(--fy-faible, #4a4866); cursor: not-allowed; }

.pb-fil-ariane { display: flex; align-items: center; gap: 20px; }
.pb-fil-ariane .fy-mono { color: var(--fy-faible, #4a4866); }
.pb-fil-ariane span:last-child { font-size: .94rem; color: var(--fy-gris, #a5a3bc); }

/* ── Adaptations ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* L'apercu passe SOUS le formulaire plutot que de disparaitre : c'est la
     meilleure idee du design, on ne la sacrifie pas au premier retrecissement. */
  .pb-page { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pb-cote { position: static; }
}
@media (max-width: 700px) {
  .pb-page { padding: 28px 20px 90px; }
  .pb-natures, .pb-quand { grid-template-columns: 1fr; }
  .pb-carte { padding: 18px; }
  .pb-fini { padding: 72px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}