.quality-section { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #fbfbfd; }
.quality-heading { display: flex; margin-bottom: 12px; align-items: start; justify-content: space-between; gap: 16px; }
.quality-heading strong { display: block; margin-bottom: 3px; font-size: 13px; }
.quality-heading small { display: block; font-size: 11px; line-height: 1.45; }
.quality-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.quality-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.quality-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.quality-choice-copy { display: flex; min-height: 132px; padding: 14px; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: white; transition: border-color .15s, box-shadow .15s, transform .15s; }
.quality-choice-copy::before { display: grid; width: 25px; height: 25px; margin-bottom: 12px; place-items: center; border-radius: 8px; background: #f2f1f7; color: var(--muted); font-size: 11px; font-weight: 800; content: "○"; }
.quality-choice strong { margin-bottom: 3px; color: var(--foreground); font-size: 12px; }
.quality-choice small { margin-bottom: 9px; color: var(--primary); font-size: 10px; font-weight: 700; }
.quality-choice-copy > span:last-child { color: var(--muted); font-size: 10px; line-height: 1.45; }
.quality-choice:hover .quality-choice-copy { border-color: #c9c4ee; transform: translateY(-1px); }
.quality-choice.selected .quality-choice-copy { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(103,87,214,.09); }
.quality-choice.selected .quality-choice-copy::before { background: var(--primary); color: white; content: "✓"; }
/* Five fixed columns inside the 350px studio column left every caption about
   34px of room, and `label > span` in pc-brand.css (meant for form field
   labels) turned each one into tracked capitals on top of that: "Portrait 3:4"
   rendered as "PORTRAI" with the rest painted over by the next white tile.
   The fix is at the cause — the picker sizes itself to the space it has, the
   caption is not shouted, and a word that still does not fit breaks instead of
   escaping the tile. No overflow:hidden anywhere: clipping IS the fault. */
.aspect-picker { display: grid; grid-template-columns: repeat(auto-fit,minmax(84px,1fr)); gap: 8px; }
.aspect-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.aspect-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.aspect-choice-copy { display: flex; min-width: 0; padding: 9px 8px; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: white; letter-spacing: normal; text-transform: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.aspect-choice strong { margin-bottom: 2px; color: var(--foreground); font-size: 10px; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.aspect-choice small { color: var(--muted); font-size: 9px; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; }
.aspect-choice:hover .aspect-choice-copy { border-color: #c9c4ee; transform: translateY(-1px); }
.aspect-choice.selected .aspect-choice-copy { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(103,87,214,.09); }
.quality-note { margin: 11px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.quality-note strong { color: var(--foreground); }
.quality-badge { background: #f0edff !important; color: var(--primary) !important; font-weight: 700; }
.approval-draft { border-color: #e4e2ee; background: #faf9fd; }
.approval-draft .approval-status { background: #efedf6; color: #747087; }

/* The longest captions ("Widescreen 16:9" / "Breitbild 16:9" /
   "Panoramique 16:9" over "Bannières et en-têtes") set the floor: three across
   on a middling width, two when the column gets narrow. */
@media (max-width: 900px) {
  .aspect-picker { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .quality-picker { grid-template-columns: 1fr; }
  .quality-choice-copy { min-height: 0; }
  .aspect-picker { grid-template-columns: repeat(2,minmax(0,1fr)); }
}