/*
 * Marketing studio colorway — Paris-Turf brand.
 * Overrides the default Elysia pink palette from /shared/theme.css.
 *
 * Re-skin scoped to this package only (no edits to the shared theme): the
 * Web Awesome `brand` ramp is remapped to the Paris-Turf signature red
 * (#FF0D00), and the page `aurora` glow is neutralised to a sober editorial
 * background (see paristurf-skin.css for the body override + structural skin).
 *
 * Charte couleurs : Rouge PTF #FF0D00 · Vert PTF #629B40 · Bleu TQQ #296666
 * · Bleu Tweet #47B8FF · Bleu PTF #D5E9F2.  Tons calés pour le mode sombre
 * (l'UI est dark-only).
 */

:root {
  /* Brand ramp → Paris-Turf red. Monochrome rouge PTF : quel que soit le
     niveau pioché par Web Awesome, le composant reste dans le rouge signature
     (50 = #FF0D00 exact). */
  --wa-color-brand-95: #ffe9e7;
  --wa-color-brand-90: #ffd2ce;
  --wa-color-brand-80: #ffa39c;
  --wa-color-brand-70: #ff6b62;
  --wa-color-brand-60: #ff3b30;
  --wa-color-brand-50: #ff0d00; /* Rouge PTF — signature, logo « TURF » */
  --wa-color-brand-40: #d60a00; /* survol / pressé */
  --wa-color-brand-30: #a80c00;
  --wa-color-brand-20: #7a0900;
  --wa-color-brand-10: #470500;
  --wa-color-brand-05: #2a0300;
  --wa-color-brand: #ff0d00;
  --wa-color-brand-on: #ffffff;

  /* Aurora triplets — neutralisés (le fond sobre est posé en dur dans
     paristurf-skin.css). Conservés en teintes froides très discrètes au cas
     où un dérivé les référence. */
  --aurora-1: 255, 13, 0; /* rouge PTF — accent primaire (marqueur, glow) */
  --aurora-2: 41, 102, 102; /* bleu TQQ — lueur secondaire */
  --aurora-3: 117, 133, 148; /* bleu foncé PTF — lueur tertiaire */

  --admin-accent-soft: #ff6b62; /* rouge PTF clair — titre rail / actif */
  --admin-accent-on: #ffffff;
  --admin-accent-card-inset: rgba(255, 13, 0, 0.05);
}

/* ── Réglages IA : curseur QA + pied « Sauvegarder pour tous » (F4) ──
   Tokens réels uniquement (cf. design_handoff_studio_crea/paristurf.css).
   Chiffres en mono tabulaire ; actif = inversion neutre (jamais le rouge,
   réservé à l'action primaire « Générer »). */
.pt-atl-reglage-hint {
  display: block;
  font-size: 11.5px;
  color: var(--pt-ink-4);
}
.pt-atl-reglage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Libellé compact des réglages IA (modèle · effort · skill), au-dessus de la roue dentée. */
.pt-atl-genreglage {
  font-family: var(--pt-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--pt-ink-3);
  text-align: right;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Inventaire « ce qui est chargé » (F7) ──
   Popover lecture seule ancré à DROITE du bouton « Générer » (le bloc
   `.pt-atl-genbtn` est rendu `position:relative` pour servir d'ancre). Deux
   groupes honnêtes : transmis au rendu vs. contexte copilote non transmis.
   Tokens réels uniquement (`--pt-surface-1`/`--pt-ink-1` n'existent pas).
   Chiffres en mono tabulaire, titres de section en display MAJ ; jamais de
   rouge (réservé à l'action primaire « Générer »). */
.pt-atl-genbtn {
  position: relative;
}
.pt-atl-inventaire {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 0.5rem;
  z-index: 30;
  width: min(360px, 80vw);
  background: var(--pt-surface-2);
  border: 1px solid var(--pt-line);
  padding: 0.6rem;
}
.pt-atl-inv__h {
  font-family: var(--pt-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: var(--pt-ink-3);
  margin: 0.2rem 0 0.4rem;
}
.pt-atl-inv__sec--ctx {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--pt-line);
  opacity: 0.85;
}
.pt-atl-inv__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.15rem 0;
  font-size: 0.78rem;
  color: var(--pt-ink-3);
}
.pt-atl-inv__row b {
  color: var(--pt-ink-2);
  text-align: right;
}
/* `.pt-mono` (mono + tabular-nums) est déjà défini dans vendor/paristurf.css. */

/* Modale code source HTML d'un rendu : affiche le `.html` AS TEXT (pas d'iframe). */
/* `--pt-surface-1` n'existe pas dans le design system → boîte sur `--pt-surface-2`. */
.pt-atl-source {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
}
.pt-atl-source__box {
  width: min(900px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--pt-surface-2);
  border: 1px solid var(--pt-line);
}
.pt-atl-source__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--pt-line);
}
.pt-atl-source__t {
  flex: 1;
  font-family: var(--pt-font-mono);
  color: var(--pt-ink-2);
}
.pt-atl-source__x {
  flex: none;
  background: transparent;
  border: 1px solid var(--pt-line);
  color: var(--pt-ink-3);
  width: 26px;
  height: 26px;
  cursor: pointer;
}
.pt-atl-source__x:hover {
  color: var(--pt-ink);
  border-color: var(--pt-line-strong);
}
.pt-atl-source__pre {
  margin: 0;
  padding: 1rem;
  overflow: auto;
  font-family: var(--pt-font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--pt-ink-2);
  white-space: pre;
}

/* Modale Bibliothèque : choisir les images à insérer (parcourt tous les assets).
   Clic = ajoute/retire de la sélection persistée. Dark-only, tokens --pt-*. */
.pt-biblio-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
}
.pt-biblio-modal__box {
  width: min(1040px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--pt-surface-2);
  border: 1px solid var(--pt-line);
}
.pt-biblio-modal__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--pt-line);
}
.pt-biblio-modal__t {
  font-family: var(--pt-font-display);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--pt-ink);
}
.pt-biblio-modal__sel {
  font-size: 11px;
  color: var(--pt-ink-3);
}
.pt-biblio-modal__spacer {
  flex: 1;
}
.pt-biblio-modal__filtres {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--pt-line);
  flex-wrap: wrap;
}
.pt-biblio-modal__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--pt-ink-4);
}
.pt-biblio-modal__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}
.pt-biblio-modal__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--pt-line);
}
.pt-biblio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.pt-biblio-cell {
  position: relative;
  display: block;
  padding: 0;
  background: var(--pt-surface-3);
  border: 1px solid var(--pt-line);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.pt-biblio-cell:hover {
  border-color: var(--pt-line-strong);
}
.pt-biblio-cell--on {
  border: 2px solid var(--pt-blue);
}
.pt-biblio-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pt-biblio-cell__ext {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--pt-font-mono);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--pt-ink-4);
}
.pt-biblio-cell__tags {
  position: absolute;
  left: 3px;
  bottom: 3px;
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  max-width: calc(100% - 6px);
}
.pt-biblio-cell__check {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pt-blue);
  color: #fff;
  font-size: 10px;
}
/* Lien « Choisir dans la bibliothèque » sous la bande des images à insérer. */
.pt-atl-biblio-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  color: var(--pt-blue);
  font-size: 11px;
  cursor: pointer;
}
.pt-atl-biblio-link:hover {
  color: var(--pt-blue-ink);
}