/* GE2studio 1.12.10 — corrections cumulatives des scènes réellement auditées.
 * Les scènes occupent souvent une demi-page : leur largeur utile, et non
 * celle de la fenêtre, doit déterminer le nombre de colonnes.
 */

/* Les maquettes restent devant leur photo, mais participent à sa hauteur.
   Un contenu traduit ou agrandi ne doit plus dépasser un cadre absolu. */
.ge2studio-editorial-clarity .ge2-experiences-page :is(.experience-manager-visual, .experience-coach-section .product-scene) {
  padding: 4.5rem clamp(.75rem, 1.8vw, 1.5rem) 1.5rem;
  min-height: 0;
}
.ge2studio-editorial-clarity .ge2-experiences-page :is(.experience-manager-cockpit, .experience-coach-ui) {
  position: relative;
  inset: auto;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}

/* Manager : chaque valeur, puis son objectif, disposent de leur propre ligne.
   Le minimum intrinsèque donne 2 KPI dans le cockpit d'environ 656 px,
   puis 1 quand le composant devient trop étroit. */
.ge2studio-editorial-clarity .ge2-experiences-page .experience-manager-cockpit .cockpit-body {
  display: block !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .experience-manager-cockpit .ui-side {
  display: none !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .experience-manager-cockpit .metric-strip {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important;
  gap: .75rem !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .experience-manager-cockpit .metric-strip > article:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "label" "value" "delta" !important;
  align-content: start;
  gap: .4rem !important;
  min-width: 0;
  padding: .875rem !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .metric-strip > article > :is(small, strong, span) {
  position: static;
  min-width: 0;
  max-width: 100%;
}
.ge2studio-editorial-clarity .ge2-experiences-page .metric-strip > article > strong {
  grid-area: value !important;
  margin: 0;
  font-size: 1.6rem !important;
  line-height: 1.15 !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .metric-strip > article > span.ge2-ui-kpi-delta {
  justify-self: start !important;
  text-align: left !important;
  white-space: normal !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .experience-manager-cockpit .cockpit-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .875rem !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .experience-manager-cockpit .signal-card:not([hidden]) {
  display: block;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-cockpit-priority {
  grid-template-columns: minmax(0, 1fr) !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-cockpit-priority__items {
  grid-template-columns: 1fr !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)) !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-cockpit-priority__items b {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: normal;
}

/* Le graphique et sa légende conservent toute la largeur du cockpit.
   La prévision et le commentaire ne réservent plus de colonne fixe. */
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-revenue-card {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "head" "summary" "chart" "legend" "insight" !important;
  grid-template-rows: auto !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-revenue-card > svg {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 16rem !important;
  aspect-ratio: 420 / 160;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-revenue-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-revenue-insight {
  flex-direction: column;
  align-items: flex-start;
  gap: .65rem;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-revenue-insight > small {
  white-space: normal;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-ai-insight-card .ge2-ai-flow {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-ai-insight-card .ge2-ai-flow span {
  flex: 1 0 6rem;
  max-width: 100%;
  min-height: 2.5rem;
  padding: .5rem;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.3;
}

/* Les bandeaux des deux maquettes ne gardent pas une hauteur fixe. */
.ge2studio-editorial-clarity .ge2-experiences-page :is(.experience-manager-cockpit, .experience-coach-ui) .ui-top {
  display: flex !important;
  flex-wrap: wrap;
  height: auto;
  min-height: 3rem;
  gap: .65rem;
  padding: .875rem !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page :is(.experience-manager-cockpit, .experience-coach-ui) .ui-top > div {
  flex: 1 1 10rem;
  min-width: 0;
}
.ge2studio-editorial-clarity .ge2-experiences-page :is(.experience-manager-cockpit, .experience-coach-ui) .ui-top > .demo-badge {
  max-width: 100%;
  margin: 0;
  white-space: normal;
}
.ge2studio-editorial-clarity .ge2-experiences-page .experience-manager-cockpit .ui-context {
  flex-wrap: wrap;
  gap: .5rem;
}

/* Coach : le briefing est injecté dans la carte Participants. Il doit se
   reformater dans cette carte, même lorsque la fenêtre est très large. */
.ge2studio-editorial-clarity .ge2-experiences-page .experience-coach-ui .coach-body {
  grid-template-columns: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  padding: clamp(.75rem, 1.5vw, 1.25rem);
}
.ge2studio-editorial-clarity .ge2-experiences-page .experience-coach-ui .ge2-coach-brief {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: .875rem;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-coach-brief > * {
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.45;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-coach-brief > span {
  display: block;
}
.ge2studio-editorial-clarity .ge2-experiences-page .ge2-coach-brief > span i {
  display: inline-block;
  margin-right: .5rem;
}
.ge2studio-editorial-clarity .ge2-experiences-page .experience-coach-ui .coach-alert:not([hidden]) {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: .65rem;
}
.ge2studio-editorial-clarity .ge2-experiences-page .coach-next > div,
.ge2studio-editorial-clarity .ge2-experiences-page .coach-participants > :is(div, p) {
  flex-wrap: wrap;
  gap: .5rem 1rem;
}

/* Satisfaction : les labels existent en <small> avant enrichissement JS et
   en .ge2-rating-copy ensuite. Ils restent visibles, y compris sur mobile. */
.ge2studio-editorial-clarity .ge2-experiences-page .satisfaction-score > [role="radiogroup"]:not([hidden]) {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: .55rem !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .satisfaction-score button {
  min-width: 0 !important;
  min-height: 6rem !important;
  padding: .75rem !important;
  align-content: start;
}
.ge2studio-editorial-clarity .ge2-experiences-page .satisfaction-score button :is(small, .ge2-rating-copy) {
  display: block !important;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  font-size: .875rem;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  overflow: visible;
  text-overflow: clip;
}
.ge2studio-editorial-clarity .ge2-experiences-page .satisfaction-score button[aria-checked="true"] {
  color: #fff8ef !important;
  background: #1b1d20 !important;
  border-color: #a53f17 !important;
}
.ge2studio-editorial-clarity .ge2-experiences-page .satisfaction-score .ge2-rating-legend {
  display: none;
}

/* Offre : le numéro, l'icône et le statut sont un en-tête commun ; ils ne
   partagent plus la petite colonne .3fr de l'ancien panneau.
   Le corps contient exactement deux blocs. Leur minimum vaut au moins la
   moitié de la largeur disponible hors espacement : aucune troisième piste
   vide n'est créée, même si l'en-tête et le lien couvrent toute la grille.
   Sous 2 × 22rem + 1.75rem de largeur utile, le contenu passe sur une colonne. */
.ge2studio-editorial-clarity .offer-page .offer-core-panel {
  grid-template-columns: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(22rem, calc(50% - .875rem))), 1fr));
  gap: 1.75rem;
}
.ge2studio-editorial-clarity .offer-page .offer-core-panel > header {
  grid-column: 1 / -1;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.ge2studio-editorial-clarity .offer-page .offer-core-panel > header > :first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}
.ge2studio-editorial-clarity .offer-page .offer-core-panel > header > .product-status {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  font-family: inherit;
  font-size: .75rem;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.ge2studio-editorial-clarity .offer-page .offer-core-panel > header .premium-icon {
  flex: 0 0 3.125rem;
}
.ge2studio-editorial-clarity .offer-page .offer-core-panel > :is(div, ul) {
  grid-column: auto;
  min-width: 0;
}
.ge2studio-editorial-clarity .offer-page .offer-core-panel > a {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  max-width: 100%;
}
.ge2studio-editorial-clarity .offer-page .offer-core-panel > a > svg {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}

/* 1.12.9: participant rows are on white cards. Override the pale paragraph
 * color inherited from the surrounding dark section; keep statuses distinct.
 * Briefing icons are deliberately excluded by these direct-child selectors. */
body.ge2studio-editorial-clarity .ge2-experiences-page .coach-participants > p,
body.ge2studio-editorial-clarity .ge2-experiences-page .coach-participants > p > span {
  color: #4f4b45;
}
body.ge2studio-editorial-clarity .ge2-experiences-page .coach-participants > p > i {
  color: #57534d;
  font-size: .75rem;
  line-height: 1.4;
}
body.ge2studio-editorial-clarity .ge2-experiences-page .coach-participants > p > i.is-present {
  color: #3d6444;
}