/* Teamazo · Fenêtres au style commun : Partager une image, Partenaires & Centres ; barres de boutons. */

/* --- Partager une image : grand aperçu, pastilles, 2 actions principales, le reste en discret --- */
#share-studio {
  width: min(1120px, calc(100vw - 20px));
}
#share-studio .share-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  align-items: start;
  gap: 22px;
}
#share-studio .share-preview {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 380px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--soft), transparent 75%),
    repeating-linear-gradient(90deg, #ffffff05 0 40px, transparent 40px 80px), var(--input);
}
#share-studio .share-preview {
  max-height: none;
  overflow: visible;
}
#share-studio .share-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0;
  max-height: min(62vh, 640px);
  border-radius: 10px;
  box-shadow:
    0 24px 50px -22px #000,
    0 0 0 1px #ffffff17;
}
#share-studio .share-preview img:not([src]) {
  visibility: hidden;
  min-height: 300px;
}
.share-size {
  margin: 0;
  color: var(--muted);
  font: 600 12px/1.2 var(--font);
}
.share-side {
  display: grid;
  min-width: 0;
}
#share-studio [aria-labelledby='share-kind-label'] {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#share-studio [aria-labelledby='share-kind-label'] .ui-pill {
  justify-content: flex-start;
  min-height: 44px;
  border-radius: 12px;
  white-space: normal;
  text-align: left;
}
.share-main-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 2px 0 16px;
}
#share-studio .share-main-actions :is(.primary-btn, .outline-btn) {
  min-height: 50px;
  font-size: 15px;
}
.share-more {
  display: grid;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.share-more .ui-label {
  margin-bottom: 4px;
}
#share-studio .share-more .subtle-btn {
  justify-content: flex-start;
  min-height: 38px;
  padding: 0 10px;
  font-weight: 600;
}
@media (max-width: 760px) {
  #share-studio .share-studio-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #share-studio .share-preview {
    min-height: 0;
    padding: 12px;
  }
  #share-studio .share-preview img {
    max-height: 44vh;
  }
  #share-studio .share-preview img:not([src]) {
    min-height: 200px;
  }
}

/* --- Partenaires & Centres : mêmes cartes, titres et boutons que le reste --- */
#pro-dialog .pro-layout {
  gap: 16px;
}
#pro-dialog :is(.pro-editor, .partner-live-preview, .activation-panel, .partner-assets) {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--raised);
}
#pro-dialog h3,
#pro-dialog .partner-assets summary {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 800 italic 18px/1.15 var(--display);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
#pro-dialog :is(h3, summary) > .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--lime);
}
#pro-dialog .partner-preview-heading span {
  color: var(--muted);
  font: 700 11px/1 var(--font);
  letter-spacing: 1.4px;
}
#pro-dialog .partner-preview-field {
  border-radius: 12px;
}
#pro-dialog .brand-input-row .form-field > span {
  white-space: nowrap;
}
#pro-dialog .sponsor-editor {
  border: 1px solid var(--line);
  border-radius: 12px;
}
#pro-dialog .sponsor-editor legend {
  color: var(--muted);
  font: 700 12px/1 var(--font);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
#pro-dialog .pricing-heading {
  margin-top: 22px;
}
#pro-dialog .pricing-grid {
  gap: 12px;
}
#pro-dialog .price-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--raised);
}
#pro-dialog .price-card.popular {
  border-color: var(--lime);
  background: linear-gradient(160deg, var(--soft), var(--raised) 60%);
  box-shadow:
    0 0 0 1px var(--lime),
    0 20px 44px -28px var(--lime);
}
#pro-dialog .plan-tag {
  align-self: flex-start;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input);
  color: var(--muted);
  font: 800 italic 11px/1 var(--display);
  letter-spacing: 0.9px;
  transform: skewX(-10deg);
}
#pro-dialog .popular .plan-tag {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--accent-ink, #15200e);
}
#pro-dialog .plan-price {
  margin: 0;
  font: 800 italic 42px/1 var(--display);
}
#pro-dialog .plan-price small {
  margin-left: 6px;
  color: var(--muted);
  font: 600 13px/1 var(--font);
}
#pro-dialog .price-card ul {
  display: grid;
  flex: 1;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#pro-dialog .price-card li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.4;
}
#pro-dialog .price-card li::before {
  content: '';
  position: absolute;
  top: 0.42em;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--lime);
  transform: skewX(-12deg);
}
#pro-dialog .plan-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--input);
  font: 700 13px/1.2 var(--font);
  cursor: pointer;
}
#pro-dialog .plan-choice:has(input:checked) {
  border-color: var(--lime);
  background: var(--soft);
}
#pro-dialog .plan-choice input {
  accent-color: var(--lime);
}
#pro-dialog .price-card :is(.primary-btn, .outline-btn) {
  width: 100%;
}
#pro-dialog .activation-panel {
  margin-top: 16px;
}
#pro-dialog .partner-assets {
  margin-top: 12px;
}
#pro-dialog .partner-assets summary {
  cursor: pointer;
}

/* --- Barres de boutons : même hauteur, même contour, icône + texte (ou icône seule avec infobulle) --- */
.intro-actions :is(.outline-btn, .primary-btn),
.coach-tools .coach-tool,
.field-toolbar-actions :is(.outline-btn, .primary-btn) {
  height: var(--bar-h);
  min-height: var(--bar-h);
  padding: 0 14px;
  border-radius: var(--ui-r);
  font: 700 13px/1 var(--font);
  gap: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.intro-actions .outline-btn,
.coach-tools .coach-tool,
.field-toolbar-actions .outline-btn {
  border: 1px solid var(--line);
  background: var(--raised);
  box-shadow: none;
  color: var(--white);
}
.intro-actions :is(.outline-btn, .primary-btn) .icon,
.coach-tools .coach-tool .icon,
.field-toolbar-actions :is(.outline-btn, .primary-btn) .icon {
  flex: none;
  width: 16px;
  height: 16px;
}
/* Icône seule ou icône + texte : toujours centrées dans le bouton (l’historique était calé à gauche). */
.intro-actions :is(.outline-btn, .primary-btn),
.coach-tools .coach-tool,
.field-toolbar-actions :is(.outline-btn, .primary-btn) {
  justify-content: center;
}
#activity-local-open,
#reset-field {
  width: var(--bar-h);
  padding: 0;
  gap: 0;
}
/* Pastilles des compos : la liste défile en largeur, donc elle coupe tout ce qui dépasse en hauteur. Elle prend
   une marge intérieure (compensée par une marge négative, la barre ne bouge pas) assez grande pour le contour
   à l’accent, la petite montée au survol, l’ombre et l’anneau de focus ; l’ombre de la compo active est réduite. */
.compo-slots {
  margin: -6px -6px -10px;
  padding: 6px 6px 10px;
}
.compo-slot.active {
  box-shadow:
    0 0 0 1px var(--lime),
    0 3px 6px #0005;
}
:is(.compo-slot-new, .coach-tool, .field-toolbar-actions button):focus-visible,
.compo-slot:has(:focus-visible) {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
/* Le focus est sur un bouton intérieur de la pastille (nom ou ⋯) : l’anneau est celui de la pastille entière. */
.compo-slot :focus-visible {
  outline: none;
}
@media (min-width: 1100px) {
  body:not(.field-expanded) .compo-slots {
    margin: -4px;
    padding: 4px;
  }
  body:not(.field-expanded) .compo-slot:hover {
    transform: none;
  }
  body:not(.field-expanded) .compo-slot.active {
    box-shadow:
      0 0 0 1px var(--lime),
      0 1px 3px #0006;
  }
}
/* « Terrain & tactique » : la tuile coupe ce qui dépasse ; l’anneau de focus est donc tracé à l’intérieur. */
.tactic-panel > summary:focus-visible {
  border-radius: inherit;
  outline: 2px solid var(--lime);
  outline-offset: -4px;
}
@media (hover: hover) {
  .intro-actions .outline-btn:hover:not(:disabled),
  .coach-tools .coach-tool:hover:not(:disabled),
  .field-toolbar-actions .outline-btn:hover:not(:disabled) {
    border-color: var(--lime);
    background: var(--raised);
  }
}
/* En-tête : langue, sons et Salon Live au même contour (plus de bouton vert à part). */
.app-header #online-launcher,
.app-header .sound-toggle,
.app-header .lang-switch {
  border: 1px solid var(--line);
  background: var(--raised);
  box-shadow: none;
}
.app-header #online-launcher {
  min-height: 40px;
  border-radius: var(--ui-r);
}
.app-header .sound-toggle[aria-pressed='true'] {
  color: var(--lime);
}
.app-header .sound-toggle:not([aria-pressed='true']) {
  color: var(--muted);
}
@media (hover: hover) {
  .app-header #online-launcher:hover,
  .app-header .sound-toggle:hover,
  .app-header .lang-switch:hover {
    border-color: var(--lime);
  }
}
@media (max-width: 760px) {
  :root {
    --bar-h: 40px;
  }
}
/* Ordinateur : les pastilles des compos prennent la même hauteur ; écran bas : barre de 40 px, tout à 32. */
@media (min-width: 1100px) {
  body:not(.field-expanded) :is(.compo-slot, .compo-slot-new) {
    height: var(--bar-h);
  }
}
@media (min-width: 1100px) and (max-height: 760px) {
  :root {
    --bar-h: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-pill,
  #online-dialog .lobby-switch input,
  #online-dialog .lobby-switch input::before {
    transition: none;
  }
}