/* Média Channel — compléments au design system React (navigation, scan, intégration au thème WordPress) */

/* Le thème WordPress garde son en-tête et son pied de page ; le titre de page du thème est masqué
   car le portail affiche ses propres titres. */
body.mc-page { overflow-x: hidden; }
.mc-page .entry-header,
.mc-page .page-header,
.mc-page .wp-block-post-title,
.mc-page h1.entry-title,
.mc-page .post-thumbnail { display: none; }
.mc-page .entry-content,
.mc-page .wp-block-post-content,
.mc-page .site-main,
.mc-page article { max-width: none !important; padding-left: 0; padding-right: 0; }

/* Le portail reste dans la largeur réellement attribuée par WordPress.
   Il ne s'échappe jamais du conteneur de contenu, notamment en présence
   d'une sidebar. */
.mc-app {
	width: 100%;
	max-width: 100%;
	margin: 0;
	min-height: 0;
	line-height: 1.5;
	overflow-x: clip;
	container-type: inline-size;
	container-name: media-channel;
	box-sizing: border-box;
}
.mc-app,
.mc-app *,
.mc-app *::before,
.mc-app *::after { box-sizing: border-box; }
.mc-app a { text-decoration: none; }
.mc-app .page a:not(.btn):not(.home-button) { text-decoration: underline; text-underline-offset: 2px; }
.mc-app ul { margin: 0; }

/* Espace entre le header du site et le portail : le portail ne colle plus au header. */
.mc-app.mc-app { margin-top: clamp(28px, 5vw, 64px); }

/* ---- En-tête d'espace Media Channel : grand titre + onglets (aucun hamburger) ---- */
.mcx-hub { position: relative; z-index: 20; width: 100%; }

.mcx-hub__banner {
	position: relative;
	overflow: hidden;
	color: var(--mcx-on-primary, #fff);
	background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
	border-bottom: 4px solid var(--color-accent, #e4c84a);
}
.mcx-hub__banner::before,
.mcx-hub__banner::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.07); }
.mcx-hub__banner::before { width: 300px; height: 300px; right: -70px; top: -110px; }
.mcx-hub__banner::after { width: 200px; height: 200px; right: 170px; bottom: -120px; background: rgba(255,255,255,.05); }

.mcx-hub__inner {
	position: relative;
	z-index: 1;
	width: min(calc(100% - 32px), var(--content-width, 1180px));
	margin: 0 auto;
	padding: 16px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: nowrap;
}
.mcx-hub__identity { display: flex; align-items: center; gap: clamp(6px, 1.5vw, 14px); flex: 1 1 auto; min-width: 0; color: inherit !important; text-decoration: none !important; }
.mcx-hub__logo { flex: 0 0 auto; width: clamp(30px, 5vw, 56px); height: clamp(30px, 5vw, 56px); padding: 4px; object-fit: contain; border-radius: 12px; background: #fff; border: 2px solid var(--color-accent, #e4c84a); }
.mcx-hub__text { display: flex; flex-direction: column; min-width: 0; }
.mcx-hub__brand { font-size: clamp(1rem, 2.8vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; }
.mcx-hub__account { display: flex; align-items: center; justify-content: flex-end; gap: clamp(4px, 1vw, 10px); flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; }
.mcx-hub__hello { font-size: .92rem; opacity: .95; white-space: nowrap; }

.mcx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 8px 18px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s, border-color .15s, filter .15s;
}
.mcx-btn--ghost { color: var(--mcx-on-primary, #fff) !important; border-color: currentColor; background: rgba(255,255,255,.08); }
.mcx-btn--ghost:hover { background: rgba(255,255,255,.2); }
.mcx-btn--accent { color: var(--mcx-on-accent, #111827) !important; background: var(--color-accent, #e4c84a); }
.mcx-btn--accent:hover { filter: brightness(1.06); }

.mcx-tabs {
	position: relative;
	background: var(--color-surface, #fff);
	border-bottom: 1px solid var(--color-border, #e4e7ec);
	box-shadow: var(--shadow-xs, 0 1px 2px rgba(16,24,40,.05));
}
.mcx-tabs__inner { position: relative; width: min(calc(100% - 32px), var(--content-width, 1180px)); margin: 0 auto; }
.mcx-tabs__list {
	position: relative;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: stretch;
	gap: 2px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}
.mcx-tabs__list::-webkit-scrollbar { display: none; }
.mcx-tabs__list > li { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; list-style: none !important; scroll-snap-align: center; }
.mcx-tabs a.mcx-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 16px;
	margin-bottom: -1px;
	border-bottom: 3px solid transparent;
	color: var(--color-text-soft, #475467);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .15s, background .15s, border-color .15s;
}
.mcx-tabs a.mcx-tab:hover { color: var(--color-primary-dark); background: var(--color-primary-light); }
.mcx-tabs a.mcx-tab.is-active { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); font-weight: 800; }
.mcx-tabs__sep { align-self: stretch; width: 1px; margin: 12px 10px !important; background: var(--color-border, #e4e7ec); }
.mcx-tabs__account { display: flex !important; align-items: center; gap: 8px; margin-left: auto !important; padding-left: 14px !important; }
.mcx-tabs__account .mcx-hub__hello { color: var(--color-text, #172033); white-space: nowrap; }
.mcx-tabs__account .mcx-btn { min-height: 38px; padding: 6px 15px; }
.mcx-tabs__account .mcx-btn--ghost { color: var(--color-primary-dark) !important; background: #fff; border-color: var(--color-border, #d0d5dd); }
.mcx-tabs__account .mcx-btn--ghost:hover { background: var(--color-primary-light); }

/* Dégradés aux extrémités : signalent qu'on peut faire défiler les onglets (ajoutés par le script). */
.mcx-tabs__inner::before,
.mcx-tabs__inner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .15s; }
.mcx-tabs__inner::before { left: 0; background: linear-gradient(to right, var(--color-surface, #fff), rgba(255,255,255,0)); }
.mcx-tabs__inner::after { right: 0; background: linear-gradient(to left, var(--color-surface, #fff), rgba(255,255,255,0)); }
.mcx-tabs__inner.has-left::before,
.mcx-tabs__inner.has-right::after { opacity: 1; }

.mcx-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-danger, #dc2626); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1; }

.mcx-btn:focus-visible,
.mcx-tabs a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.mcx-hub__banner a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Petits écrans (largeur réelle du portail, même dans une colonne étroite) */
@container media-channel (max-width: 640px) {
	.mcx-hub__inner { width: calc(100% - 20px); padding: 12px 0; gap: 8px; }
	.mcx-hub__logo { width: clamp(28px, 8vw, 42px); height: clamp(28px, 8vw, 42px); padding: 3px; border-radius: 9px; }
	.mcx-hub__brand { font-size: clamp(.9rem, 4.2vw, 1.5rem); letter-spacing: -.04em; }
	.mcx-hub__hello { display: none; }
	.mcx-hub__account { width: auto; margin-left: auto; gap: 5px; }
	.mcx-btn { min-height: 34px; padding: 5px clamp(7px, 2vw, 12px); font-size: clamp(.68rem, 2.7vw, .82rem); }
	.mcx-tabs__inner { width: calc(100% - 16px); }
	.mcx-tabs a.mcx-tab { min-height: 48px; padding: 0 14px; font-size: .9rem; }
	.mcx-tabs__account .mcx-hub__hello { display: none; }
}
@container media-channel (max-width: 400px) {
	.mcx-hub__inner { width: calc(100% - 14px); gap: 5px; }
	.mcx-hub__identity { gap: 5px; }
	.mcx-hub__logo { width: 28px; height: 28px; padding: 2px; border-width: 1px; }
	.mcx-hub__brand { font-size: clamp(.78rem, 4vw, .95rem); }
	.mcx-hub__account { width: auto; flex: 0 0 auto; gap: 4px; }
	.mcx-btn { min-height: 31px; padding: 4px 6px; font-size: clamp(.62rem, 2.5vw, .7rem); border-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
	.mcx-btn, .mcx-tabs a.mcx-tab, .mcx-tabs__inner::before, .mcx-tabs__inner::after { transition: none; }
	.mcx-tabs__list { scroll-behavior: auto; }
}

/* ---- Messages ---- */
.mcx-flash { max-width: var(--content-width, 1180px); margin: 16px auto 0; }
.mc-app .mcx-flash { width: calc(100% - 40px); }

/* ---- Divers ---- */
.mcx-organizer { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: var(--color-text-soft, #667085); font-size: .85rem; }
.mcx-organizer img { height: 34px; width: auto; max-width: 90px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; border: 1px solid var(--color-border, #e4e7ec); }
.mcx-pager { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.mc-app .btn.is-disabled { opacity: .45; pointer-events: none; }
.mcx-hint { color: var(--color-text-soft, #667085); font-size: .88rem; }
.mcx-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

/* ---- Contrôle d'accès ---- */
.mcx-scan { max-width: 560px; }
.mcx-scan label { display: block; font-weight: 600; margin: 12px 0 4px; }
.mcx-scan input[type=text] { width: 100%; }
.mcx-scan__video video { width: 100%; max-width: 420px; border-radius: var(--radius-lg, 18px); background: #000; }
.mcx-result { margin-top: 18px; padding: 18px; border-radius: var(--radius-lg, 18px); border: 2px solid; }
.mcx-result.is-valid { background: #ecfdf3; border-color: #16a34a; color: #14532d; }
.mcx-result.is-used { background: #fffaeb; border-color: #f59e0b; color: #78350f; }
.mcx-result.is-invalid { background: #fef3f2; border-color: #dc2626; color: #7f1d1d; }
.mcx-result h2 { margin: 0 0 6px; font-size: 1.25rem; }
.mcx-result dl { margin: 10px 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.mcx-result dt { font-weight: 600; }
.mcx-result dd { margin: 0; }

/* ---- Adaptation du contenu à la largeur de la colonne WordPress ---- */
@container media-channel (max-width: 980px) {
	.mc-app .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc-app .home-hero__container { grid-template-columns: 1fr; min-height: auto; }
	.mc-app .home-hero { min-height: auto; }
	.mc-app .home-featured-wrap { justify-content: flex-start; }
	.mc-app .home-featured-card { width: min(100%, 620px); }
	.mc-app .home-section-heading { display: block; }
	.mc-app .home-section-heading > p { margin-top: .75rem; text-align: left; }
	.mc-app .home-steps { grid-template-columns: 1fr; }
	.mc-app .home-cta { flex-direction: column; align-items: flex-start; }
	.mc-app .home-cta__actions { justify-content: flex-start; }
	.mc-app .home-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container media-channel (max-width: 680px) {
	.mc-app .page,
	.mc-app .page-wide,
	.mc-app .home-container { width: min(calc(100% - 22px), 1180px); }
	.mc-app .home-hero__container { padding-top: 3rem; padding-bottom: 3rem; }
	.mc-app .home-hero__title { font-size: clamp(2rem, 11cqw, 4.3rem); }
	.mc-app .home-hero__lede { font-size: .95rem; }
	.mc-app .home-featured-card { padding: 1.15rem; border-radius: 19px; }
	.mc-app .home-team-logo { width: 60px; height: 60px; }
	.mc-app .home-team strong { font-size: .88rem; }
	.mc-app .home-matchup { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); }
	.mc-app .home-match-grid,
	.mc-app .match-list { grid-template-columns: 1fr; }
	.mc-app .actions { display: grid; grid-template-columns: 1fr; }
	.mc-app .actions button,
	.mc-app .actions .btn,
	.mc-app .form button { width: 100%; }
	.mc-app .profile-details,
	.mc-app .form-row { grid-template-columns: 1fr; }
	.mc-app .home-cta { padding: 1.55rem; }
	.mc-app .home-cta__actions { width: 100%; display: grid; grid-template-columns: 1fr; }
	.mc-app .home-cta__actions .home-button { width: 100%; }
	.mc-app .home-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container media-channel (max-width: 460px) {
	.mc-app { font-size: 14px; }
	.mc-app h1 { font-size: 2rem; }
	.mc-app .page { width: min(calc(100% - 18px), 1180px); }
	.mc-app .home-section { padding: 3.6rem 0; }
	.mc-app .home-featured-card__top { align-items: flex-start; flex-direction: column; }
	.mc-app .home-team strong { max-width: 110px; }
	.mc-app .home-match-card__teams { grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); }
	.mc-app .home-match-card__vs { width: 38px; height: 38px; }
	.mc-app .home-match-card__footer { grid-template-columns: 1fr auto; gap: .45rem; }
	.mc-app .home-match-card__footer span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
	.mc-app .home-match-card__arrow { grid-column: 2; grid-row: 1; }
	.mc-app .home-partners { grid-template-columns: 1fr 1fr; }
	.mc-app .stat-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
	.mc-app .match-card .teams,
	.mc-app .match-teams { grid-template-columns: 1fr 34px 1fr; }
}
@container media-channel (max-width: 390px) {
	.mc-app .stat-grid { grid-template-columns: 1fr; }
	.mc-app .home-partners { grid-template-columns: 1fr; }
	.mc-app .match-card .team { flex-direction: column; font-size: .82rem; }
}

/* ---- Garde-fous d'intégration WordPress ---- */
.mc-app .home-hero__container > *,
.mc-app .home-match-grid > *,
.mc-app .home-match-card__teams > *,
.mc-app .card,
.mc-app .form,
.mc-app .surface,
.mc-app .home-featured-card { min-width: 0; max-width: 100%; }

.mc-app input,
.mc-app select,
.mc-app textarea,
.mc-app button { max-width: 100%; }

.mc-app img,
.mc-app video,
.mc-app iframe { max-width: 100%; }

.mc-app h1,
.mc-app h2,
.mc-app h3,
.mc-app h4,
.mc-app p,
.mc-app strong,
.mc-app span,
.mc-app a { overflow-wrap: anywhere; }

.mc-app table { max-width: 100%; }
.mc-app .admin-table-wrapper { max-width: 100%; overflow-x: auto; }

/* ---- Sécurité : contrôle anti-robot ---- */
.mc-app .mc-security-challenge { display:grid; gap:.45rem; margin:.75rem 0 1rem; padding:.8rem .9rem; border:1px solid rgba(0,0,0,.10); border-radius:10px; background:rgba(0,0,0,.025); }
.mc-app .mc-security-challenge label { font-size:.9rem; font-weight:600; }
.mc-app .mc-security-challenge input { max-width:180px; }

/* En-tête Media Channel : conserver logo, titre et actions sur une seule ligne. */
@media (max-width: 480px) {
 .mcx-hub__inner { width: calc(100% - 14px); gap: 5px; flex-wrap: nowrap; }
 .mcx-hub__identity { gap: 5px; flex: 1 1 0; }
 .mcx-hub__logo { width: clamp(26px, 7.5vw, 36px); height: clamp(26px, 7.5vw, 36px); padding: 2px; border-width: 1px; }
 .mcx-hub__brand { font-size: clamp(.76rem, 3.8vw, 1.1rem); }
 .mcx-hub__account { flex-wrap: nowrap; gap: 4px; }
 .mcx-hub__account .mcx-btn { min-height: 30px; padding: 4px clamp(5px, 1.5vw, 9px); font-size: clamp(.6rem, 2.5vw, .72rem); }
}


/* ===== Ajustements visuels de l'accueil : couleurs configurées + contraste ===== */
.mc-app .home-hero {
  background:
    radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--color-accent, #f5b800) 30%, transparent), transparent 25rem),
    radial-gradient(circle at 8% 100%, color-mix(in srgb, var(--color-primary, #16834a) 42%, transparent), transparent 34rem),
    linear-gradient(125deg, var(--color-primary-dark, #07552f) 0%, var(--color-primary, #16834a) 58%, color-mix(in srgb, var(--color-primary-dark, #07552f) 82%, #071b12) 100%);
}
.mc-app .home-hero.home-hero--with-match {
  background-image:
    linear-gradient(110deg,
      color-mix(in srgb, var(--color-primary-dark, #07552f) 96%, #06130c) 0%,
      color-mix(in srgb, var(--color-primary, #16834a) 84%, #06130c) 52%,
      color-mix(in srgb, var(--color-primary-dark, #07552f) 66%, transparent) 100%),
    var(--home-hero-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.mc-app .home-hero__overlay {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-primary-dark, #07552f) 88%, #06130c),
    color-mix(in srgb, var(--color-primary, #16834a) 52%, transparent));
}
.mc-app .home-hero__trust-check {
  background: var(--color-accent, #f5b800);
  color: var(--mcx-on-accent, #182018);
}
.mc-app .home-featured-card::before {
  background: linear-gradient(90deg, var(--color-accent, #f5b800), #fff, var(--color-primary, #16834a));
}
/* Les cartes de matchs sont blanches : le statut ouvert doit donc avoir un texte foncé. */
.mc-app .home-match-card .home-status,
.mc-app .home-match-card .home-status--small {
  color: var(--color-primary-dark, #07552f) !important;
  background: color-mix(in srgb, var(--color-primary, #16834a) 12%, #fff) !important;
  border-color: color-mix(in srgb, var(--color-primary, #16834a) 28%, #fff) !important;
}
.mc-app .home-match-card .home-status__dot {
  background: var(--color-primary, #16834a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #16834a) 14%, transparent);
}

/* Image personnalisée du héros : photo seule, sans dégradés ni cercles décoratifs. */
.mc-app .home-hero.home-hero--has-custom-bg,
.mc-app .home-hero.home-hero--has-custom-bg.home-hero--with-match {
  background-image: var(--home-hero-bg) !important;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.mc-app .home-hero--has-custom-bg > .home-hero__overlay,
.mc-app .home-hero--has-custom-bg > .home-hero__grid,
.mc-app .home-hero--has-custom-bg > .home-hero__circle {
  display: none !important;
}

/* ======================================================================
   Pleine largeur : le plugin occupe toute la largeur de la zone de contenu
   du thème (colonne latérale respectée), sans marges ni plafond de largeur.
   ====================================================================== */
.mc-app.mc-app {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Pages : plus de gouttière latérale ni de largeur maximale. */
.mc-app .page,
.mc-app .page-wide,
.mc-app main.page:has(.profile-card),
.mc-app main.page:has(.match-list),
.mc-app .mcx-flash,
.mc-app .home-container {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Bandeaux de couleur (en-tête, onglets, pied) : pleine largeur, avec un léger retrait interne
   pour que le texte et les logos ne touchent pas le bord de la bande colorée. */
.mc-app .mcx-hub__inner,
.mc-app .mcx-tabs__inner,
.mc-app .site-header__container,
.mc-app .site-footer__container {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
}

/* Bloc d'accueil sur fond coloré : même retrait interne. */
.mc-app .home-hero__container {
	padding-left: 18px !important;
	padding-right: 18px !important;
}

/* ================================================================
   Correctif ciblé du mode sombre WordPress — Média Channel
   Le héros conserve son design d'origine. Le reste du portail adopte
   une palette sombre lorsque le thème expose un indicateur courant.
   Aucun changement PHP, données ou logique métier.
   ================================================================ */

/* Le héros est une zone visuelle autonome : préserver son fond et ses textes. */
.mc-app .home-hero,
.mc-app .home-hero.home-hero--with-match,
.mc-app .home-hero.home-hero--empty {
  color: #fff !important;
  background-color: #082015;
  -webkit-text-fill-color: initial;
}
.mc-app .home-hero h1,
.mc-app .home-hero h2,
.mc-app .home-hero h3,
.mc-app .home-hero p,
.mc-app .home-hero span,
.mc-app .home-hero strong,
.mc-app .home-hero a:not(.home-button),
.mc-app .home-hero__title,
.mc-app .home-hero__lede,
.mc-app .home-hero__tagline {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
.mc-app .home-hero .home-button--primary { color: #fff !important; }

/* Couleurs de base du contenu hors héros. */
.mc-app {
  color-scheme: light;
}
.mc-app .home-section,
.mc-app .home-page,
.mc-app main.page,
.mc-app .page,
.mc-app .surface,
.mc-app .card,
.mc-app .media-card,
.mc-app .profile-card,
.mc-app .form-card,
.mc-app .match-card,
.mc-app .home-featured-card,
.mc-app .home-match-card,
.mc-app .home-cta,
.mc-app .mcx-tabs {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Indicateurs de mode sombre couramment utilisés par les thèmes WordPress.
   La portée est limitée au wrapper .mc-app afin de ne pas recolorer le site. */
:where(html, body).dark .mc-app,
:where(html, body).dark-mode .mc-app,
:where(html, body).darkmode .mc-app,
:where(html, body).is-dark .mc-app,
:where(html, body).theme-dark .mc-app,
:where(html, body).mode-dark .mc-app,
:where(html, body)[data-theme="dark"] .mc-app,
:where(html, body)[data-color-scheme="dark"] .mc-app,
:where(html, body)[data-mode="dark"] .mc-app,
:where(html, body)[data-bs-theme="dark"] .mc-app,
html[data-dark-mode="true"] .mc-app,
body.wp-dark-mode-active .mc-app,
body.wp-dark-mode .mc-app,
body.dark-theme .mc-app,
body.dark-theme-enabled .mc-app,
body.elementor-dark-mode .mc-app {
  --color-text: #edf2f7;
  --color-text-soft: #c0cad6;
  --color-text-muted: #9aa8b8;
  --color-background: #111820;
  --color-surface: #1a2530;
  --color-surface-soft: #202d39;
  --color-border: #344353;
  --color-border-strong: #46586a;
  --color-primary-light: #173c2b;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.22);
  --shadow-sm: 0 4px 12px rgba(0,0,0,.25);
  --shadow-md: 0 10px 30px rgba(0,0,0,.3);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.34);
  color: var(--color-text) !important;
  background-color: var(--color-background);
  color-scheme: dark;
}

:where(html, body).dark .mc-app,
:where(html, body).dark-mode .mc-app,
:where(html, body).darkmode .mc-app,
:where(html, body).is-dark .mc-app,
:where(html, body).theme-dark .mc-app,
:where(html, body).mode-dark .mc-app,
:where(html, body)[data-theme="dark"] .mc-app,
:where(html, body)[data-color-scheme="dark"] .mc-app,
:where(html, body)[data-mode="dark"] .mc-app,
:where(html, body)[data-bs-theme="dark"] .mc-app,
html[data-dark-mode="true"] .mc-app,
body.wp-dark-mode-active .mc-app,
body.wp-dark-mode .mc-app,
body.dark-theme .mc-app,
body.dark-theme-enabled .mc-app,
body.elementor-dark-mode .mc-app {
  background-image: none;
}

/* Surfaces qui avaient un blanc codé en dur dans le design system. */
:where(html, body).dark .mc-app :is(.home-section, .surface, .card, .media-card, .profile-card, .form-card, .match-card, .home-featured-card, .home-match-card, .home-cta, .mcx-tabs, .tab-panel, .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card),
:where(html, body).dark-mode .mc-app :is(.home-section, .surface, .card, .media-card, .profile-card, .form-card, .match-card, .home-featured-card, .home-match-card, .home-cta, .mcx-tabs, .tab-panel, .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card),
:where(html, body).darkmode .mc-app :is(.home-section, .surface, .card, .media-card, .profile-card, .form-card, .match-card, .home-featured-card, .home-match-card, .home-cta, .mcx-tabs, .tab-panel, .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card),
:where(html, body).is-dark .mc-app :is(.home-section, .surface, .card, .media-card, .profile-card, .form-card, .match-card, .home-featured-card, .home-match-card, .home-cta, .mcx-tabs, .tab-panel, .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card),
:where(html, body)[data-theme="dark"] .mc-app :is(.home-section, .surface, .card, .media-card, .profile-card, .form-card, .match-card, .home-featured-card, .home-match-card, .home-cta, .mcx-tabs, .tab-panel, .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card),
:where(html, body)[data-color-scheme="dark"] .mc-app :is(.home-section, .surface, .card, .media-card, .profile-card, .form-card, .match-card, .home-featured-card, .home-match-card, .home-cta, .mcx-tabs, .tab-panel, .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card),
:where(html, body)[data-mode="dark"] .mc-app :is(.home-section, .surface, .card, .media-card, .profile-card, .form-card, .match-card, .home-featured-card, .home-match-card, .home-cta, .mcx-tabs, .tab-panel, .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card),
:where(html, body)[data-bs-theme="dark"] .mc-app :is(.home-section, .surface, .card, .media-card, .profile-card, .form-card, .match-card, .home-featured-card, .home-match-card, .home-cta, .mcx-tabs, .tab-panel, .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card),
body.wp-dark-mode-active .mc-app :is(.home-section, .surface, .card, .media-card, .profile-card, .form-card, .match-card, .home-featured-card, .home-match-card, .home-cta, .mcx-tabs, .tab-panel, .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card),
body.wp-dark-mode .mc-app :is(.home-section, .surface, .card, .media-card, .profile-card, .form-card, .match-card, .home-featured-card, .home-match-card, .home-cta, .mcx-tabs, .tab-panel, .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card),
body.dark-theme .mc-app :is(.home-section, .surface, .card, .media-card, .profile-card, .form-card, .match-card, .home-featured-card, .home-match-card, .home-cta, .mcx-tabs, .tab-panel, .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card) {
  color: var(--color-text) !important;
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  background-image: none;
}

/* Lisibilité des éléments internes, sans toucher au héros ni aux boutons colorés. */
:where(html, body).dark .mc-app :is(p, li, label, small, dt, dd, .muted, .text-muted, .form-hint, .help-text),
:where(html, body).dark-mode .mc-app :is(p, li, label, small, dt, dd, .muted, .text-muted, .form-hint, .help-text),
:where(html, body).darkmode .mc-app :is(p, li, label, small, dt, dd, .muted, .text-muted, .form-hint, .help-text),
:where(html, body).is-dark .mc-app :is(p, li, label, small, dt, dd, .muted, .text-muted, .form-hint, .help-text),
:where(html, body)[data-theme="dark"] .mc-app :is(p, li, label, small, dt, dd, .muted, .text-muted, .form-hint, .help-text),
:where(html, body)[data-color-scheme="dark"] .mc-app :is(p, li, label, small, dt, dd, .muted, .text-muted, .form-hint, .help-text),
:where(html, body)[data-mode="dark"] .mc-app :is(p, li, label, small, dt, dd, .muted, .text-muted, .form-hint, .help-text),
:where(html, body)[data-bs-theme="dark"] .mc-app :is(p, li, label, small, dt, dd, .muted, .text-muted, .form-hint, .help-text),
body.wp-dark-mode-active .mc-app :is(p, li, label, small, dt, dd, .muted, .text-muted, .form-hint, .help-text),
body.wp-dark-mode .mc-app :is(p, li, label, small, dt, dd, .muted, .text-muted, .form-hint, .help-text),
body.dark-theme .mc-app :is(p, li, label, small, dt, dd, .muted, .text-muted, .form-hint, .help-text) {
  color: var(--color-text-soft) !important;
  -webkit-text-fill-color: currentColor;
}

:where(html, body).dark .mc-app :is(input, select, textarea),
:where(html, body).dark-mode .mc-app :is(input, select, textarea),
:where(html, body).darkmode .mc-app :is(input, select, textarea),
:where(html, body).is-dark .mc-app :is(input, select, textarea),
:where(html, body)[data-theme="dark"] .mc-app :is(input, select, textarea),
:where(html, body)[data-color-scheme="dark"] .mc-app :is(input, select, textarea),
:where(html, body)[data-mode="dark"] .mc-app :is(input, select, textarea),
:where(html, body)[data-bs-theme="dark"] .mc-app :is(input, select, textarea),
body.wp-dark-mode-active .mc-app :is(input, select, textarea),
body.wp-dark-mode .mc-app :is(input, select, textarea),
body.dark-theme .mc-app :is(input, select, textarea) {
  color: var(--color-text) !important;
  background-color: var(--color-surface-soft) !important;
  border-color: var(--color-border-strong) !important;
  -webkit-text-fill-color: var(--color-text);
  color-scheme: dark;
}

/* Préserver les couleurs et les textes des bandes de marque du portail. */
:where(html, body).dark .mc-app :is(.mcx-hub__banner, .mcx-btn--ghost, .mcx-btn--accent),
:where(html, body).dark-mode .mc-app :is(.mcx-hub__banner, .mcx-btn--ghost, .mcx-btn--accent),
:where(html, body).darkmode .mc-app :is(.mcx-hub__banner, .mcx-btn--ghost, .mcx-btn--accent),
:where(html, body).is-dark .mc-app :is(.mcx-hub__banner, .mcx-btn--ghost, .mcx-btn--accent),
:where(html, body)[data-theme="dark"] .mc-app :is(.mcx-hub__banner, .mcx-btn--ghost, .mcx-btn--accent),
:where(html, body)[data-color-scheme="dark"] .mc-app :is(.mcx-hub__banner, .mcx-btn--ghost, .mcx-btn--accent),
:where(html, body)[data-mode="dark"] .mc-app :is(.mcx-hub__banner, .mcx-btn--ghost, .mcx-btn--accent),
:where(html, body)[data-bs-theme="dark"] .mc-app :is(.mcx-hub__banner, .mcx-btn--ghost, .mcx-btn--accent),
body.wp-dark-mode-active .mc-app :is(.mcx-hub__banner, .mcx-btn--ghost, .mcx-btn--accent),
body.wp-dark-mode .mc-app :is(.mcx-hub__banner, .mcx-btn--ghost, .mcx-btn--accent),
body.dark-theme .mc-app :is(.mcx-hub__banner, .mcx-btn--ghost, .mcx-btn--accent) {
  color: inherit;
}




/* === Média Channel Dark Mode v2 ===
   Palette neutre noire, étendue à toutes les pages du portail.
   Le héros / bandeau de marque est volontairement exclu.
   Les sélecteurs couvrent les indicateurs courants utilisés par les thèmes
   et extensions WordPress; le sélecteur exact du thème peut nécessiter un ajout.
*/

html.dark .mc-app, body.dark .mc-app,
html.dark-mode .mc-app, body.dark-mode .mc-app,
html.darkmode .mc-app, body.darkmode .mc-app,
html.is-dark .mc-app, body.is-dark .mc-app,
html.theme-dark .mc-app, body.theme-dark .mc-app,
html.mode-dark .mc-app, body.mode-dark .mc-app,
html[data-theme="dark"] .mc-app, body[data-theme="dark"] .mc-app,
html[data-color-scheme="dark"] .mc-app, body[data-color-scheme="dark"] .mc-app,
html[data-mode="dark"] .mc-app, body[data-mode="dark"] .mc-app,
html[data-bs-theme="dark"] .mc-app, body[data-bs-theme="dark"] .mc-app,
html[data-dark-mode="true"] .mc-app,
body.wp-dark-mode-active .mc-app, body.wp-dark-mode .mc-app,
body.dark-theme .mc-app, body.dark-theme-enabled .mc-app,
body.elementor-dark-mode .mc-app
 {
  --color-text: #f5f5f5 !important;
  --color-text-soft: #e2e2e2 !important;
  --color-text-muted: #bdbdbd !important;
  --color-background: #080808 !important;
  --color-surface: #151515 !important;
  --color-surface-soft: #202020 !important;
  --color-border: #3b3b3b !important;
  --color-border-strong: #555555 !important;
  --color-primary-light: #242424 !important;
  color: var(--color-text) !important;
  background-color: #080808 !important;
  background-image: none;
  color-scheme: dark;
}

/* Uniformiser les arrière-plans sur toutes les pages Média Channel,
   en laissant le héros et les boutons de marque dans leurs couleurs originales. */

html.dark .mc-app, body.dark .mc-app,
html.dark-mode .mc-app, body.dark-mode .mc-app,
html.darkmode .mc-app, body.darkmode .mc-app,
html.is-dark .mc-app, body.is-dark .mc-app,
html.theme-dark .mc-app, body.theme-dark .mc-app,
html.mode-dark .mc-app, body.mode-dark .mc-app,
html[data-theme="dark"] .mc-app, body[data-theme="dark"] .mc-app,
html[data-color-scheme="dark"] .mc-app, body[data-color-scheme="dark"] .mc-app,
html[data-mode="dark"] .mc-app, body[data-mode="dark"] .mc-app,
html[data-bs-theme="dark"] .mc-app, body[data-bs-theme="dark"] .mc-app,
html[data-dark-mode="true"] .mc-app,
body.wp-dark-mode-active .mc-app, body.wp-dark-mode .mc-app,
body.dark-theme .mc-app, body.dark-theme-enabled .mc-app,
body.elementor-dark-mode .mc-app
 :is(
  .mc-app__content, .mc-content, .mc-page, .mc-page-content,
  .portal-content, .portal-page, .portal-main, main,
  .home-section, .section, .section-inner, .surface,
  .card, .media-card, .profile-card, .form-card, .match-card,
  .home-featured-card, .home-match-card, .home-cta,
  .mcx-tabs, .mcx-tab, .tab-panel, .panel, .panel-body,
  .admin-nav, .admin-table, .notification-card, .ticket-card, .badge-card,
  .match-item, .event-card, .event-item, .match-row, .event-row,
  .accreditation-card, .accreditation-item, .profile-section,
  .form-section, .form-container, .table-responsive,
  .list-group-item, .accordion-item, .accordion-body,
  .modal-content, .dropdown-menu, .pagination, .page-link
):not(.mcx-hub__banner):not(.mcx-hero):not(.mc-hero):not(.hero):not(.hero *) {
  color: #f0f0f0 !important;
  background-color: #151515 !important;
  border-color: #3b3b3b !important;
  background-image: none !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.22);
}

/* Corriger les surfaces imbriquées qui gardent un fond clair, sans recolorer
   le héros ni les boutons d'accent. */

html.dark .mc-app, body.dark .mc-app,
html.dark-mode .mc-app, body.dark-mode .mc-app,
html.darkmode .mc-app, body.darkmode .mc-app,
html.is-dark .mc-app, body.is-dark .mc-app,
html.theme-dark .mc-app, body.theme-dark .mc-app,
html.mode-dark .mc-app, body.mode-dark .mc-app,
html[data-theme="dark"] .mc-app, body[data-theme="dark"] .mc-app,
html[data-color-scheme="dark"] .mc-app, body[data-color-scheme="dark"] .mc-app,
html[data-mode="dark"] .mc-app, body[data-mode="dark"] .mc-app,
html[data-bs-theme="dark"] .mc-app, body[data-bs-theme="dark"] .mc-app,
html[data-dark-mode="true"] .mc-app,
body.wp-dark-mode-active .mc-app, body.wp-dark-mode .mc-app,
body.dark-theme .mc-app, body.dark-theme-enabled .mc-app,
body.elementor-dark-mode .mc-app
 .mc-app :is(
  .card *, .media-card *, .profile-card *, .form-card *, .match-card *,
  .home-featured-card *, .home-match-card *, .tab-panel *,
  .panel *, .panel-body *, .admin-table *, .notification-card *,
  .ticket-card *, .badge-card *, .match-item *, .event-card *,
  .event-item *, .accreditation-card *, .profile-section *,
  .form-section *, .modal-content *, .dropdown-menu *
):not(.mcx-hub__banner):not(.mcx-btn--accent):not(.mcx-btn--ghost) {
  color: #eeeeee;
}

/* Titres, liens, légendes et données tabulaires restent lisibles. */

html.dark .mc-app, body.dark .mc-app,
html.dark-mode .mc-app, body.dark-mode .mc-app,
html.darkmode .mc-app, body.darkmode .mc-app,
html.is-dark .mc-app, body.is-dark .mc-app,
html.theme-dark .mc-app, body.theme-dark .mc-app,
html.mode-dark .mc-app, body.mode-dark .mc-app,
html[data-theme="dark"] .mc-app, body[data-theme="dark"] .mc-app,
html[data-color-scheme="dark"] .mc-app, body[data-color-scheme="dark"] .mc-app,
html[data-mode="dark"] .mc-app, body[data-mode="dark"] .mc-app,
html[data-bs-theme="dark"] .mc-app, body[data-bs-theme="dark"] .mc-app,
html[data-dark-mode="true"] .mc-app,
body.wp-dark-mode-active .mc-app, body.wp-dark-mode .mc-app,
body.dark-theme .mc-app, body.dark-theme-enabled .mc-app,
body.elementor-dark-mode .mc-app
 .mc-app :is(
  h1, h2, h3, h4, h5, h6, p, li, label, small, strong, em, dt, dd,
  th, td, caption, .muted, .text-muted, .form-hint, .help-text,
  .match-title, .event-title, .profile-name, .meta, .description
):not(.mcx-hub__banner):not(.mcx-hub__banner *) {
  color: #f0f0f0 !important;
  -webkit-text-fill-color: currentColor;
}

/* Champs de formulaires et recherche sur toutes les pages. */

html.dark .mc-app, body.dark .mc-app,
html.dark-mode .mc-app, body.dark-mode .mc-app,
html.darkmode .mc-app, body.darkmode .mc-app,
html.is-dark .mc-app, body.is-dark .mc-app,
html.theme-dark .mc-app, body.theme-dark .mc-app,
html.mode-dark .mc-app, body.mode-dark .mc-app,
html[data-theme="dark"] .mc-app, body[data-theme="dark"] .mc-app,
html[data-color-scheme="dark"] .mc-app, body[data-color-scheme="dark"] .mc-app,
html[data-mode="dark"] .mc-app, body[data-mode="dark"] .mc-app,
html[data-bs-theme="dark"] .mc-app, body[data-bs-theme="dark"] .mc-app,
html[data-dark-mode="true"] .mc-app,
body.wp-dark-mode-active .mc-app, body.wp-dark-mode .mc-app,
body.dark-theme .mc-app, body.dark-theme-enabled .mc-app,
body.elementor-dark-mode .mc-app
 .mc-app :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select, textarea
) {
  color: #f5f5f5 !important;
  background: #202020 !important;
  border-color: #555555 !important;
  -webkit-text-fill-color: #f5f5f5 !important;
  color-scheme: dark;
}

html.dark .mc-app, body.dark .mc-app,
html.dark-mode .mc-app, body.dark-mode .mc-app,
html.darkmode .mc-app, body.darkmode .mc-app,
html.is-dark .mc-app, body.is-dark .mc-app,
html.theme-dark .mc-app, body.theme-dark .mc-app,
html.mode-dark .mc-app, body.mode-dark .mc-app,
html[data-theme="dark"] .mc-app, body[data-theme="dark"] .mc-app,
html[data-color-scheme="dark"] .mc-app, body[data-color-scheme="dark"] .mc-app,
html[data-mode="dark"] .mc-app, body[data-mode="dark"] .mc-app,
html[data-bs-theme="dark"] .mc-app, body[data-bs-theme="dark"] .mc-app,
html[data-dark-mode="true"] .mc-app,
body.wp-dark-mode-active .mc-app, body.wp-dark-mode .mc-app,
body.dark-theme .mc-app, body.dark-theme-enabled .mc-app,
body.elementor-dark-mode .mc-app
 .mc-app :is(input, textarea)::placeholder {
  color: #b8b8b8 !important;
  opacity: 1;
}

/* Tables, listes, lignes de matchs et événements : enlever les fonds clairs
   souvent hérités de styles de thème ou de bibliothèques CSS. */

html.dark .mc-app, body.dark .mc-app,
html.dark-mode .mc-app, body.dark-mode .mc-app,
html.darkmode .mc-app, body.darkmode .mc-app,
html.is-dark .mc-app, body.is-dark .mc-app,
html.theme-dark .mc-app, body.theme-dark .mc-app,
html.mode-dark .mc-app, body.mode-dark .mc-app,
html[data-theme="dark"] .mc-app, body[data-theme="dark"] .mc-app,
html[data-color-scheme="dark"] .mc-app, body[data-color-scheme="dark"] .mc-app,
html[data-mode="dark"] .mc-app, body[data-mode="dark"] .mc-app,
html[data-bs-theme="dark"] .mc-app, body[data-bs-theme="dark"] .mc-app,
html[data-dark-mode="true"] .mc-app,
body.wp-dark-mode-active .mc-app, body.wp-dark-mode .mc-app,
body.dark-theme .mc-app, body.dark-theme-enabled .mc-app,
body.elementor-dark-mode .mc-app
 .mc-app :is(
  table, thead, tbody, tfoot, tr, th, td,
  .table, .table thead, .table tbody, .table tr,
  .list-group, .list-group-item, .match-row, .event-row,
  .match-list, .event-list, .accreditation-list
):not(.mcx-hub__banner):not(.mcx-hub__banner *) {
  color: #eeeeee;
  background-color: #151515;
  border-color: #383838;
}

/* Conserver explicitement le héros dans son style d'origine. */

html.dark .mc-app, body.dark .mc-app,
html.dark-mode .mc-app, body.dark-mode .mc-app,
html.darkmode .mc-app, body.darkmode .mc-app,
html.is-dark .mc-app, body.is-dark .mc-app,
html.theme-dark .mc-app, body.theme-dark .mc-app,
html.mode-dark .mc-app, body.mode-dark .mc-app,
html[data-theme="dark"] .mc-app, body[data-theme="dark"] .mc-app,
html[data-color-scheme="dark"] .mc-app, body[data-color-scheme="dark"] .mc-app,
html[data-mode="dark"] .mc-app, body[data-mode="dark"] .mc-app,
html[data-bs-theme="dark"] .mc-app, body[data-bs-theme="dark"] .mc-app,
html[data-dark-mode="true"] .mc-app,
body.wp-dark-mode-active .mc-app, body.wp-dark-mode .mc-app,
body.dark-theme .mc-app, body.dark-theme-enabled .mc-app,
body.elementor-dark-mode .mc-app
 .mc-app :is(.mcx-hub__banner, .mcx-hero, .mc-hero, .hero) {
  background-color: revert !important;
  background-image: revert !important;
  color: revert !important;
  border-color: revert !important;
}

html.dark .mc-app, body.dark .mc-app,
html.dark-mode .mc-app, body.dark-mode .mc-app,
html.darkmode .mc-app, body.darkmode .mc-app,
html.is-dark .mc-app, body.is-dark .mc-app,
html.theme-dark .mc-app, body.theme-dark .mc-app,
html.mode-dark .mc-app, body.mode-dark .mc-app,
html[data-theme="dark"] .mc-app, body[data-theme="dark"] .mc-app,
html[data-color-scheme="dark"] .mc-app, body[data-color-scheme="dark"] .mc-app,
html[data-mode="dark"] .mc-app, body[data-mode="dark"] .mc-app,
html[data-bs-theme="dark"] .mc-app, body[data-bs-theme="dark"] .mc-app,
html[data-dark-mode="true"] .mc-app,
body.wp-dark-mode-active .mc-app, body.wp-dark-mode .mc-app,
body.dark-theme .mc-app, body.dark-theme-enabled .mc-app,
body.elementor-dark-mode .mc-app
 .mc-app :is(.mcx-hub__banner, .mcx-hero, .mc-hero, .hero) :is(h1,h2,h3,h4,p,span,strong,small,a) {
  color: revert !important;
  -webkit-text-fill-color: revert !important;
}


/* Média Channel — correctif Dark Mode v3
   Les sélecteurs de mode sombre sont regroupés AVANT .mc-app afin que les règles
   s'appliquent bien aux composants intérieurs, pas seulement au conteneur racine.
   Le bandeau de navigation et le héros d'accueil sont volontairement préservés. */

:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app {
  --color-text: #f1f1f1 !important;
  --color-text-soft: #c4c4c4 !important;
  --color-text-muted: #a5a5a5 !important;
  --color-background: #080808 !important;
  --color-surface: #151515 !important;
  --color-surface-soft: #1d1d1d !important;
  --color-border: #383838 !important;
  --color-border-strong: #505050 !important;
  color: #f1f1f1 !important;
  background: #080808 !important;
  color-scheme: dark;
}

/* Surfaces de contenu réellement utilisées dans le plugin : accueil, listes,
   profil, formulaires, notifications, tableaux, accréditations et événements. */
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app :is(
  .page, .page-wide, .surface, .card, .media-card, .profile-card,
  .profile-detail, .profile-details, .profile-header, .stat-card,
  .home-step, .home-featured-card, .home-match-card, .home-partner,
  .partner-card, .match-card, .match-list > li, .notification-list > li,
  .admin-table-wrapper, .admin-table, .table-responsive, .form-row,
  .form, .form-section, .form-container, .scanner-box, .checkin-result,
  .media-modal, .media-modal__header, .empty-state, .accordion-item,
  .accordion-body, .modal-content, .dropdown-menu, .list-group-item,
  .match-program, .match-meta, .match-card-meta, .match-location,
  .match-date, .mcx-result, .mcx-hint, .mcx-pager, .mcx-flash,
  .alert, .notification-card, .ticket-card, .badge-card,
  .accreditation-card, .accreditation-item, .event-card, .event-item,
  .match-item, .match-row, .event-row, .tab-panel, .panel, .panel-body,
  .section:not(.home-section), .section-inner
):not(.mcx-hub__banner):not(.home-hero):not(.mcx-hero):not(.mc-hero) {
  color: #f1f1f1 !important;
  background-color: #151515 !important;
  border-color: #383838 !important;
  background-image: none;
}

/* Les cartes de liste sont souvent des liens ou des <li> qui ont un fond blanc
   défini en dur dans mc-app.css : cibler aussi leur contenu direct. */
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app :is(
  .home-step *, .home-featured-card *, .home-match-card *, .home-partner *,
  .match-card *, .match-list > li *, .notification-list > li *,
  .profile-card *, .profile-details *, .profile-detail *, .stat-card *,
  .admin-table *, .form-row *, .scanner-box *, .checkin-result *,
  .mcx-result *, .mcx-hint *, .match-program *, .match-meta *,
  .match-location *, .match-date *, .empty-state *
):not(.mcx-btn):not(.mcx-btn *):not(.home-button):not(.home-button *) {
  color: #eeeeee;
}

/* Titres, textes et liens à l'intérieur des surfaces ; les boutons gardent
   leurs couleurs de marque pour conserver les états d'action existants. */
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app :is(p, li, label, small, dt, dd, th, td, .muted, .section-subtitle, .section-title):not(.home-hero *):not(.mcx-hub__banner *) {
  color: #d8d8d8;
}
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  color: #f1f1f1 !important;
  background-color: #202020 !important;
  border-color: #4a4a4a !important;
  box-shadow: none;
}
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app :is(input, textarea)::placeholder {
  color: #a8a8a8 !important;
  opacity: 1;
}
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app :is(.notification-list > li.unread, .notification-list > li.read) {
  background-color: #151515 !important;
  border-color: #383838 !important;
}



/* Média Channel — correctifs ciblés Dark Mode v4
   Corrige uniquement les éléments dont le texte et le fond perdaient leur contraste.
   Les règles sont limitées au portail et activées uniquement en mode sombre. */
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app {
  /* Boutons clairs de la carte du dernier match : garder un contraste net. */
  --mc-dark-button-bg: #242424;
  --mc-dark-button-text: #ffffff;
}
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app .home-featured-card .home-button--light,
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app .home-featured-card .home-button--light:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #242424 !important;
  border-color: #666666 !important;
}

/* Bouton Connexion/Se connecter dans les blocs du portail. */
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app .mcx-btn--ghost {
  color: #f5f5f5 !important;
  -webkit-text-fill-color: #f5f5f5 !important;
  background-color: #242424 !important;
  border-color: #555555 !important;
}

/* Statuts : conserver les couleurs sémantiques lisibles au lieu d'appliquer
   le texte clair générique des cartes aux badges pastel. */
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app .badge-approved {
  color: #14532d !important;
  -webkit-text-fill-color: #14532d !important;
  background: #dcfce7 !important;
  border-color: #86efac !important;
}
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app .badge-pending {
  color: #78350f !important;
  -webkit-text-fill-color: #78350f !important;
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
}
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app .badge-rejected {
  color: #7f1d1d !important;
  -webkit-text-fill-color: #7f1d1d !important;
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
}

/* Code d'autorisation dans Mes accréditations : fond et texte assortis. */
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app main.page:has(.match-list) .match-list > li > p code {
  color: #d1fae5 !important;
  -webkit-text-fill-color: #d1fae5 !important;
  background: #173326 !important;
  border-color: #286347 !important;
}
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app main.page:has(.match-list) .match-list > li > p {
  background: #1c1c1c !important;
  border-color: #383838 !important;
}


/* Média Channel — correctifs ciblés Dark Mode v5
   Derniers réglages demandés : boutons « Se connecter » et identité du profil.
   Ne modifie pas le mode clair et ne recolore pas le bandeau héros lui-même. */
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app :is(.home-featured-card, .home-cta) .home-button--light,
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app .home-cta__actions .home-button--light {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #242424 !important;
  background-image: none !important;
  border: 1px solid #666666 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app :is(.home-featured-card, .home-cta) .home-button--light:is(:hover, :focus, :focus-visible, :active) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #303030 !important;
  background-image: none !important;
  border-color: #858585 !important;
  outline-color: #bdbdbd !important;
}

/* Dans Mon profil, le paragraphe qui contient le nom (strong) et l'e-mail
   doit avoir sa propre surface sombre : le fond de la page ne suffit pas. */
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app main.page > p:has(> strong) {
  color: #f3f3f3 !important;
  -webkit-text-fill-color: #f3f3f3 !important;
  background: #181818 !important;
  background-image: none !important;
  border: 1px solid #3d3d3d !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}
:is(
  html.dark, body.dark, html.dark-mode, body.dark-mode,
  html.darkmode, body.darkmode, html.is-dark, body.is-dark,
  html.theme-dark, body.theme-dark, html.mode-dark, body.mode-dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"],
  html[data-mode="dark"], body[data-mode="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-dark-mode="true"], body.wp-dark-mode-active,
  body.wp-dark-mode, body.dark-theme, body.dark-theme-enabled,
  body.elementor-dark-mode
) .mc-app main.page > p:has(> strong) strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}