/* mod_motscompostes — mise en page du cadre du jeu.
   Reprend les variables du site (--ce-green-*, --ce-radius) quand elles existent. */
.ce-mc {
  --ce-mc-vert: var(--ce-green-700, #3d5a3a);
  --ce-mc-vert-fonce: var(--ce-green-800, #2e4630);
  --ce-mc-vert-clair: var(--ce-green-100, #eef4e3);
  --ce-mc-bord: var(--ce-green-200, #c9dcbc);
  --ce-mc-rayon: var(--ce-radius, 14px);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: var(--ce-mc-largeur, 680px);
  margin-inline: auto;
}
.ce-mc__titre { margin: 0; color: var(--ce-mc-vert); text-align: center; }
.ce-mc__intro p:last-child { margin-bottom: 0; }
.ce-mc__cadre {
  border: 1px solid var(--ce-mc-bord);
  border-radius: var(--ce-mc-rayon);
  overflow: hidden;
  background: #f4efe3;
  box-shadow: 0 2px 10px rgba(40, 50, 30, .12);
}
.ce-mc__cadre iframe {
  display: block;
  width: 100%;
  height: min(var(--ce-mc-hauteur, 860px), calc(100vh - 2rem));
  height: min(var(--ce-mc-hauteur, 860px), calc(100svh - 2rem));
  border: 0;
}
.ce-mc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
/* Boutons : couleurs fixées aussi au survol, au focus et au clic.
   Les règles .btn:hover de Bootstrap ou du gabarit (Helix), chargées après ce fichier,
   rendaient sinon le fond transparent et le texte blanc invisible. */
.ce-mc .ce-mc__actions .ce-mc__btn {
  border-radius: var(--ce-mc-rayon);
  padding: .55rem 1.1rem;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  opacity: 1;
  visibility: visible;
}
.ce-mc .ce-mc__actions .ce-mc__btn--plein {
  --bs-btn-bg: var(--ce-mc-vert); --bs-btn-color: #fff; --bs-btn-border-color: var(--ce-mc-vert);
  --bs-btn-hover-bg: var(--ce-mc-vert-fonce); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--ce-mc-vert-fonce);
  --bs-btn-active-bg: var(--ce-mc-vert-fonce); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--ce-mc-vert-fonce);
  background: var(--ce-mc-vert);
  border: 1px solid var(--ce-mc-vert);
  color: #fff;
}
.ce-mc .ce-mc__actions .ce-mc__btn--plein:hover,
.ce-mc .ce-mc__actions .ce-mc__btn--plein:focus,
.ce-mc .ce-mc__actions .ce-mc__btn--plein:focus-visible,
.ce-mc .ce-mc__actions .ce-mc__btn--plein:active {
  background: var(--ce-mc-vert-fonce) !important;
  border-color: var(--ce-mc-vert-fonce) !important;
  color: #fff !important;
}
.ce-mc .ce-mc__actions .ce-mc__btn--apk {
  --bs-btn-bg: var(--ce-mc-vert-clair); --bs-btn-color: var(--ce-mc-vert); --bs-btn-border-color: var(--ce-mc-bord);
  --bs-btn-hover-bg: var(--ce-mc-vert-clair); --bs-btn-hover-color: var(--ce-mc-vert); --bs-btn-hover-border-color: var(--ce-mc-vert);
  --bs-btn-active-bg: var(--ce-mc-vert-clair); --bs-btn-active-color: var(--ce-mc-vert); --bs-btn-active-border-color: var(--ce-mc-vert);
  background: var(--ce-mc-vert-clair);
  border: 1px solid var(--ce-mc-bord);
  color: var(--ce-mc-vert);
}
.ce-mc .ce-mc__actions .ce-mc__btn--apk:hover,
.ce-mc .ce-mc__actions .ce-mc__btn--apk:focus,
.ce-mc .ce-mc__actions .ce-mc__btn--apk:focus-visible,
.ce-mc .ce-mc__actions .ce-mc__btn--apk:active {
  background: var(--ce-mc-vert-clair) !important;
  border-color: var(--ce-mc-vert) !important;
  color: var(--ce-mc-vert) !important;
}
.ce-mc .ce-mc__actions .ce-mc__btn:focus-visible { outline: 2px solid var(--ce-mc-vert); outline-offset: 2px; }
.ce-mc__note { font-size: .875rem; opacity: .8; text-align: center; margin: 0; }