/* Média Channel — design system repris de l'application React (feuilles theme / layout / media / home), isolé sous .mc-app */

/* ===== theme.css ===== */
.mc-app{--color-primary: #16A34A;
  --color-primary-dark: #15803D;
  --color-primary-light: #DCFCE7;
  --color-accent: #F59E0B;
  --color-danger: #DC2626;

  
  --color-text: #172033;
  --color-text-soft: #667085;
  --color-text-muted: #98A2B3;
  --color-background: #F5F7FA;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F8FAFC;
  --color-border: #E4E7EC;
  --color-border-strong: #D0D5DD;

  
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 4px 12px rgba(16, 24, 40, .07);
  --shadow-md: 0 10px 30px rgba(16, 24, 40, .09);
  --shadow-lg: 0 18px 50px rgba(16, 24, 40, .12);

  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --content-width: 1180px;

  
  --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;}
.mc-app[data-theme='red']{--color-primary: #DC2626;
  --color-primary-dark: #991B1B;
  --color-primary-light: #FEE2E2;}
.mc-app[data-theme='yellow']{--color-primary: #CA8A04;
  --color-primary-dark: #854D0E;
  --color-primary-light: #FEF9C3;}
.mc-app *,
.mc-app *::before,
.mc-app *::after{box-sizing: border-box;}
.mc-app{min-height: 100%;
  scroll-behavior: smooth;}
.mc-app{margin: 0;
  min-height: 100vh;
  font-family: var(--font-family-base);
  color: var(--color-text);
  background:
    radial-gradient(circle at 0% 0%, rgba(22, 163, 74, .06), transparent 28rem),
    radial-gradient(circle at 100% 10%, rgba(245, 158, 11, .05), transparent 24rem),
    var(--color-background);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;}
.mc-app::selection{background: var(--color-primary-light);
  color: var(--color-primary-dark);}
.mc-app button,
.mc-app input,
.mc-app select,
.mc-app textarea{font: inherit;}
.mc-app button{border: 0;}
.mc-app button,
.mc-app a{-webkit-tap-highlight-color: transparent;}
.mc-app a{color: var(--color-primary-dark);}
.mc-app img{max-width: 100%;
  display: block;}
.mc-app h1,
.mc-app h2,
.mc-app h3,
.mc-app h4,
.mc-app h5,
.mc-app h6{margin-top: 0;
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: -.02em;}
.mc-app h1{margin-bottom: .7rem;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;}
.mc-app h2{font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 750;}
.mc-app h3{font-size: 1.12rem;
  font-weight: 700;}
.mc-app p{margin-top: 0;
  color: var(--color-text-soft);}
.mc-app ::placeholder{color: #A1A9B8;}
.mc-app #root{min-height: 100vh;}
.mc-app .page{width: min(calc(100% - 32px), var(--content-width));
  margin: 0 auto;
  padding: 2.25rem 0 4rem;}
.mc-app .page > h1{position: relative;
  padding-bottom: .9rem;
  margin-bottom: 1.6rem;
  color: var(--color-text);}
.mc-app .page > h1::after{content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: .65rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));}
.mc-app .page > h2{margin-top: 2rem;
  margin-bottom: 1rem;}
.mc-app .section{margin: 3rem 0;}
.mc-app .section-title{margin-bottom: .35rem;}
.mc-app .section-subtitle{max-width: 720px;
  margin-bottom: 1.5rem;
  color: var(--color-text-soft);}
.mc-app .page-wide{width: min(calc(100% - 32px), 1280px);}
.mc-app header,
.mc-app .site-header,
.mc-app .app-header{position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .90);
  border-bottom: 1px solid rgba(228, 231, 236, .8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);}
.mc-app .site-header,
.mc-app .app-header{box-shadow: var(--shadow-xs);}
.mc-app .site-header-inner,
.mc-app .app-header-inner,
.mc-app header > nav{width: min(calc(100% - 32px), var(--content-width));
  min-height: 72px;
  margin: 0 auto;}
.mc-app nav{display: flex;
  align-items: center;}
.mc-app nav a{color: var(--color-text-soft);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease, transform .2s ease;}
.mc-app nav a:hover,
.mc-app nav a.active{color: var(--color-primary);}
.mc-app .logo,
.mc-app .brand,
.mc-app .site-brand{font-weight: 800;
  letter-spacing: -.03em;
  color: var(--color-text);
  text-decoration: none;}
.mc-app .logo img,
.mc-app .brand img,
.mc-app .site-brand img{max-height: 44px;
  width: auto;}
.mc-app .hero{position: relative;
  overflow: hidden;
  min-height: 420px;
  display: grid;
  align-items: center;
  margin: -2.25rem auto 2rem;
  padding: 4.5rem 0;
  color: #fff;
  background:
    linear-gradient(115deg, rgba(8, 24, 16, .90), rgba(12, 72, 40, .66) 48%, rgba(8, 24, 16, .35)),
    linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-lg);}
.mc-app .hero::before{content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .20;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 18px,
      rgba(255,255,255,.14) 19px 20px
    );}
.mc-app .hero::after{content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -100px;
  top: -120px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  box-shadow:
    -120px 230px 0 -55px rgba(255,255,255,.06);}
.mc-app .hero-content{position: relative;
  z-index: 1;
  width: min(calc(100% - 32px), var(--content-width));
  margin: 0 auto;}
.mc-app .hero h1,
.mc-app .hero h2,
.mc-app .hero h3,
.mc-app .hero p{color: #fff;}
.mc-app .hero h1{max-width: 760px;
  font-size: clamp(2.35rem, 5vw, 4.6rem);}
.mc-app .hero p{max-width: 680px;
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;}
.mc-app .hero-card{position: relative;
  z-index: 2;
  margin-top: 1.75rem;
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 45px rgba(0,0,0,.18);}
.mc-app .btn,
.mc-app .button,
.mc-app button[type="submit"],
.mc-app .form button,
.mc-app .actions button,
.mc-app .admin-table button{display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  padding: .72rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;}
.mc-app .btn:hover,
.mc-app .button:hover,
.mc-app button[type="submit"]:hover,
.mc-app .form button:hover,
.mc-app .actions button:hover,
.mc-app .admin-table button:hover{transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(16, 24, 40, .12);}
.mc-app .btn:active,
.mc-app .button:active,
.mc-app button[type="submit"]:active,
.mc-app .form button:active{transform: translateY(0);}
.mc-app .btn-primary,
.mc-app .button-primary,
.mc-app .form button,
.mc-app .actions button,
.mc-app .admin-table button{color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));}
.mc-app .btn-primary:hover,
.mc-app .button-primary:hover,
.mc-app .form button:hover,
.mc-app .actions button:hover,
.mc-app .admin-table button:hover{filter: brightness(.98);}
.mc-app .btn-secondary,
.mc-app .button-secondary{color: var(--color-text);
  background: #fff;
  border-color: var(--color-border-strong);}
.mc-app .btn-secondary:hover,
.mc-app .button-secondary:hover{background: var(--color-surface-soft);}
.mc-app .btn-danger,
.mc-app .actions .btn-danger{background: linear-gradient(135deg, #EF4444, var(--color-danger)) !important;
  color: #fff;}
.mc-app .btn-ghost{color: var(--color-primary-dark);
  background: transparent;
  border-color: transparent;}
.mc-app .btn-ghost:hover{background: var(--color-primary-light);
  box-shadow: none;}
.mc-app .actions{display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.25rem 0;}
.mc-app .card,
.mc-app .profile-card,
.mc-app .stat-card,
.mc-app .notification-list li,
.mc-app .match-list li,
.mc-app .reject-form{background: rgba(255,255,255,.94);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);}
.mc-app .card{padding: 1.25rem;
  border-radius: var(--radius-lg);}
.mc-app .card:hover,
.mc-app .stat-card:hover,
.mc-app .match-list li:hover{border-color: rgba(22, 163, 74, .25);
  box-shadow: var(--shadow-md);}
.mc-app .profile-card{position: relative;
  overflow: hidden;
  padding: 1.25rem;
  margin: 1.25rem 0;
  border-radius: var(--radius-lg);}
.mc-app .profile-card::before{content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));}
.mc-app .match-card{position: relative;
  overflow: hidden;
  padding: 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;}
.mc-app .match-card:hover{transform: translateY(-3px);
  box-shadow: var(--shadow-md);}
.mc-app .match-card::before{content: "";
  display: block;
  height: 4px;
  margin: -1.2rem -1.2rem 1.1rem;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));}
.mc-app .match-card .teams,
.mc-app .match-teams{display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .7rem;}
.mc-app .match-card .team,
.mc-app .match-team{display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  text-align: center;
  font-weight: 750;}
.mc-app .match-card .team img,
.mc-app .match-team img{width: 54px;
  height: 54px;
  object-fit: contain;}
.mc-app .match-card .vs{display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  font-size: .75rem;
  font-weight: 800;}
.mc-app .match-meta,
.mc-app .match-card-meta{display: flex;
  flex-wrap: wrap;
  gap: .5rem .85rem;
  margin-top: 1rem;
  color: var(--color-text-soft);
  font-size: .86rem;}
.mc-app .match-date,
.mc-app .match-location,
.mc-app .match-program{display: inline-flex;
  align-items: center;
  gap: .4rem;}
.mc-app .match-actions{display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--color-border);}
.mc-app .form{display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-sm);}
.mc-app .form fieldset{margin: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  background: var(--color-surface-soft);}
.mc-app .form legend{padding: 0 .5rem;
  color: var(--color-primary-dark);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;}
.mc-app .form label{display: block;
  margin-bottom: .35rem;
  color: var(--color-text);
  font-size: .88rem;
  font-weight: 650;}
/* ---- Alignement robuste des champs mot de passe dans les thèmes WordPress ---- */
.mc-app .form input[type="password"] {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  margin-inline: 0 !important;
  padding-left: .9rem !important;
  padding-right: .9rem !important;
  float: none !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  text-indent: 0 !important;
  vertical-align: middle !important;
}

.mc-app .form input,
.mc-app .form select,
.mc-app .form textarea{width: 100%;
  padding: .78rem .9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--color-text);
  outline: none;
  font-size: .95rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;}
.mc-app .form input:hover,
.mc-app .form select:hover,
.mc-app .form textarea:hover{border-color: #B7BECA;}
.mc-app .form input:focus,
.mc-app .form select:focus,
.mc-app .form textarea:focus{border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 4px var(--color-primary-light);}
.mc-app .form textarea{min-height: 120px;
  resize: vertical;}
.mc-app .form button{align-self: flex-start;}
.mc-app .form .form-row,
.mc-app .form-row{display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;}
.mc-app .alert{position: relative;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 600;}
.mc-app .alert-error{background: #FFF1F2;
  color: #9F1239;
  border-color: #FECDD3;}
.mc-app .alert-success{background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-color: rgba(22,163,74,.22);}
.mc-app .alert-warning{background: #FFFBEB;
  color: #92400E;
  border-color: #FDE68A;}
.mc-app .alert-info{background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;}
.mc-app .badge{display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: .2rem .68rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;}
.mc-app .badge-pending{background: #FEF3C7;
  color: #92400E;}
.mc-app .badge-approved{background: var(--color-primary-light);
  color: var(--color-primary-dark);}
.mc-app .badge-rejected{background: #FEE2E2;
  color: #991B1B;}
.mc-app .badge-suspended{background: #EEF2F6;
  color: #475467;}
.mc-app .admin-nav{display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin: 1.5rem 0;}
.mc-app .admin-nav a{display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: .8rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  font-weight: 700;
  transition: .2s ease;}
.mc-app .admin-nav a:hover,
.mc-app .admin-nav a.active{color: var(--color-primary-dark);
  border-color: rgba(22,163,74,.28);
  background: var(--color-primary-light);
  transform: translateY(-1px);}
.mc-app .tabs{display: flex;
  gap: .5rem;
  padding: .35rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: rgba(255,255,255,.78);}
.mc-app .tab{color: var(--color-text-soft);
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: .55rem .9rem;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: .18s ease;}
.mc-app .tab:hover{color: var(--color-text);
  background: var(--color-surface-soft);}
.mc-app .tab.active{color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: var(--shadow-xs);}
.mc-app .admin-table-wrapper{overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);}
.mc-app .admin-table{width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .88rem;
  background: #fff;}
.mc-app .admin-table th,
.mc-app .admin-table td{text-align: left;
  padding: .85rem .9rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;}
.mc-app .admin-table th{color: #475467;
  background: #F8FAFC;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;}
.mc-app .admin-table tr:last-child td{border-bottom: 0;}
.mc-app .admin-table tbody tr{transition: background .15s ease;}
.mc-app .admin-table tbody tr:hover{background: #F8FAFC;}
.mc-app .admin-table button{min-height: 34px;
  padding: .45rem .72rem;
  font-size: .78rem;}
.mc-app .stat-grid{display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;}
.mc-app .stat-card{position: relative;
  overflow: hidden;
  min-height: 126px;
  padding: 1.15rem;
  border-radius: 16px;
  text-align: left;}
.mc-app .stat-card::before{content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));}
.mc-app .stat-value{font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.04em;
  color: var(--color-text);}
.mc-app .stat-label{font-size: .78rem;
  color: var(--color-text-soft);
  margin-top: .55rem;
  font-weight: 650;}
.mc-app .notification-list{list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;}
.mc-app .notification-list li{position: relative;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  font-size: .9rem;}
.mc-app .notification-list li.unread{border-color: rgba(22,163,74,.30);
  background: linear-gradient(90deg, var(--color-primary-light), #fff);}
.mc-app .notification-list li.unread::before{content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 17px;
  left: 12px;
  border-radius: 50%;
  background: var(--color-primary);}
.mc-app .notification-list li.unread{padding-left: 2rem;}
.mc-app .notification-list small{display: block;
  margin-top: .3rem;
  color: var(--color-text-muted);}
.mc-app .notification-list button{display: inline-flex;
  margin-top: .55rem;
  padding: 0;
  color: var(--color-primary-dark);
  background: none;
  border: none;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;}
.mc-app .match-list{list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;}
.mc-app .match-list li{overflow: hidden;
  padding: 0;
  border-radius: 15px;
  transition: .2s ease;}
.mc-app .match-list li a{position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 120px;
  padding: 1rem;
  color: inherit;
  text-decoration: none;}
.mc-app .match-list li a::before{content: "";
  width: 42px;
  height: 4px;
  margin-bottom: .2rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));}
.mc-app .match-list li a:hover{background: #FCFDFD;}
.mc-app .match-list li a strong{font-size: .98rem;}
.mc-app .match-list li a span{font-size: .82rem;
  color: var(--color-text-soft);}
.mc-app .reject-form{padding: 1.1rem;
  margin-top: 1rem;
  border-color: #FECACA;
  border-radius: 14px;
  background: #FFF8F8;}
.mc-app .reject-form textarea{width: 100%;
  min-height: 110px;
  box-sizing: border-box;
  padding: .72rem .8rem;
  margin-bottom: .7rem;
  border: 1px solid #FECACA;
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  resize: vertical;
  outline: none;}
.mc-app .reject-form textarea:focus{border-color: var(--color-danger);
  box-shadow: 0 0 0 4px #FEE2E2;}
.mc-app .link-button{display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 0;
  margin-bottom: 1rem;
  color: var(--color-primary-dark);
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;}
.mc-app .scanner-box{display: grid;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, #FFFFFF, #F8FAFC);
  box-shadow: var(--shadow-sm);}
.mc-app .scanner-box video,
.mc-app .scanner-box canvas{width: 100%;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #0F172A;
  box-shadow: var(--shadow-md);}
.mc-app .checkin-result{border-radius: 16px;
  padding: 1.2rem 1.3rem;
  margin-top: 1rem;
  box-shadow: var(--shadow-sm);}
.mc-app .checkin-result.valid{background: linear-gradient(135deg, var(--color-primary-light), #FFFFFF);
  border: 2px solid var(--color-primary);}
.mc-app .checkin-result.invalid{background: linear-gradient(135deg, #FEE2E2, #FFFFFF);
  border: 2px solid var(--color-danger);}
.mc-app .checkin-result h2{margin: 0 0 .45rem;}
.mc-app .profile-header{display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;}
.mc-app .profile-avatar{width: 72px;
  height: 72px;
  flex: 0 0 72px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--color-primary-light), #fff);
  border: 1px solid var(--color-border);}
.mc-app .profile-avatar img{width: 100%;
  height: 100%;
  object-fit: cover;}
.mc-app .profile-details{display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1rem;}
.mc-app .profile-detail{padding: .8rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-soft);}
.mc-app .profile-detail small{display: block;
  margin-bottom: .15rem;
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;}
.mc-app .partners-grid{display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .9rem;}
.mc-app .partner-card{min-height: 100px;
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow-xs);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.mc-app .partner-card:hover{transform: translateY(-2px);
  border-color: rgba(22,163,74,.22);
  box-shadow: var(--shadow-sm);}
.mc-app .partner-card img{max-width: 120px;
  max-height: 54px;
  object-fit: contain;}
.mc-app footer,
.mc-app .site-footer,
.mc-app .app-footer{margin-top: 4rem;
  border-top: 1px solid var(--color-border);
  background: #101828;
  color: rgba(255,255,255,.75);}
.mc-app .site-footer a,
.mc-app .app-footer a,
.mc-app footer a{color: rgba(255,255,255,.85);
  text-decoration: none;}
.mc-app .site-footer a:hover,
.mc-app .app-footer a:hover,
.mc-app footer a:hover{color: #fff;}
.mc-app .site-footer-inner,
.mc-app .app-footer-inner,
.mc-app footer > div{width: min(calc(100% - 32px), var(--content-width));
  margin: 0 auto;
  padding: 2rem 0;}
.mc-app .surface{background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);}
.mc-app .muted{color: var(--color-text-soft);}
.mc-app .text-center{text-align: center;}
.mc-app .divider{height: 1px;
  margin: 1.5rem 0;
  background: var(--color-border);}
.mc-app .empty-state{padding: 2.5rem 1.25rem;
  border: 1px dashed var(--color-border-strong);
  border-radius: 16px;
  background: rgba(255,255,255,.6);
  text-align: center;}
.mc-app .loading{color: var(--color-text-soft);
  text-align: center;
  padding: 2rem;}
@media (max-width: 980px){.mc-app .stat-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
.mc-app .partners-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}}
@media (max-width: 760px){.mc-app .page,
.mc-app .page-wide{width: min(calc(100% - 22px), var(--content-width));
    padding-top: 1.35rem;}
.mc-app .hero{min-height: 500px;
    margin-top: -1.35rem;
    border-radius: 0 0 18px 18px;
    padding: 3.5rem 0;}
.mc-app .hero h1{font-size: 2.35rem;}
.mc-app .form-row,
.mc-app .profile-details{grid-template-columns: 1fr;}
.mc-app .match-list{grid-template-columns: 1fr;}
.mc-app .partners-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
.mc-app .admin-table-wrapper{margin-left: -0.2rem;
    margin-right: -0.2rem;}}
@media (max-width: 560px){.mc-app{font-size: 14px;}
.mc-app h1{font-size: 2rem;}
.mc-app .page{width: min(calc(100% - 18px), var(--content-width));}
.mc-app .card,
.mc-app .form,
.mc-app .profile-card,
.mc-app .scanner-box{padding: 1rem;
    border-radius: 14px;}
.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 .stat-grid{grid-template-columns: 1fr 1fr;
    gap: .65rem;}
.mc-app .stat-card{min-height: 110px;
    padding: .9rem;}
.mc-app .match-card .teams,
.mc-app .match-teams{grid-template-columns: 1fr 34px 1fr;}
.mc-app .match-card .team img,
.mc-app .match-team img{width: 44px;
    height: 44px;}
.mc-app .partners-grid{grid-template-columns: 1fr 1fr;}
.mc-app .profile-header{align-items: flex-start;}}
@media (max-width: 390px){.mc-app .stat-grid{grid-template-columns: 1fr;}
.mc-app .partners-grid{grid-template-columns: 1fr;}
.mc-app .match-card .team{flex-direction: column;
    font-size: .82rem;}}
.mc-app :focus-visible{outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;}
@media (prefers-reduced-motion: reduce){.mc-app{scroll-behavior: auto;}
.mc-app *,
.mc-app *::before,
.mc-app *::after{animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;}}
.mc-app main.page:has(.profile-card){max-width: 1080px;
  padding-bottom: 5rem;}
.mc-app main.page:has(.profile-card) > h1{margin-bottom: .85rem;
  font-size: clamp(2.15rem, 4vw, 3.1rem);}
.mc-app main.page:has(.profile-card) > p:first-of-type{display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1.25rem;
  padding: .6rem .85rem;
  border: 1px solid rgba(22, 163, 74, .14);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-xs);}
.mc-app main.page:has(.profile-card) > p:first-of-type a{color: var(--color-primary-dark);
  font-weight: 750;
  text-decoration: none;}
.mc-app main.page:has(.profile-card) > p:first-of-type a:hover{color: var(--color-primary);}
.mc-app main.page:has(.profile-card) > p:nth-of-type(2){position: relative;
  margin: .25rem 0 .5rem;
  padding: 1.15rem 1.35rem 1.15rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245,158,11,.10), transparent 13rem),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow: var(--shadow-sm);}
.mc-app main.page:has(.profile-card) > p:nth-of-type(2)::before{content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));}
.mc-app main.page:has(.profile-card) > p:nth-of-type(2) strong{color: var(--color-text);
  font-size: 1.12rem;
  font-weight: 800;}
.mc-app main.page:has(.profile-card) > p:nth-of-type(3){display: inline-flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 1.35rem;}
.mc-app main.page:has(.profile-card) > p:nth-of-type(3)::first-letter{text-transform: uppercase;}
.mc-app main.page:has(.profile-card) .profile-card{position: relative;
  overflow: hidden;
  margin: 1.15rem 0 2rem;
  padding: 1.5rem;
  border: 1px solid rgba(208,213,221,.88);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow: 0 18px 44px rgba(16,24,40,.10);}
.mc-app main.page:has(.profile-card) .profile-card::before{content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark), var(--color-accent));}
.mc-app main.page:has(.profile-card) .profile-card::after{content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -110px;
  top: -110px;
  border-radius: 50%;
  background: rgba(22,163,74,.045);
  pointer-events: none;}
.mc-app main.page:has(.profile-card) .profile-card img{position: relative;
  z-index: 1;
  width: 138px;
  height: 138px;
  margin: .25rem 0 1.35rem;
  object-fit: cover;
  border: 5px solid #fff;
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(16,24,40,.14);}
.mc-app main.page:has(.profile-card) .profile-card p{position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  margin: 0;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(228,231,236,.82);
  color: var(--color-text);}
.mc-app main.page:has(.profile-card) .profile-card p:last-child{border-bottom: 0;}
.mc-app main.page:has(.profile-card) .profile-card p::first-line{color: var(--color-text-soft);}
.mc-app main.page:has(.profile-card) .profile-card p strong{color: var(--color-text);}
.mc-app main.page:has(.profile-card) > h2{margin-top: 2.4rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;}
.mc-app main.page:has(.profile-card) > button{margin-top: 1.4rem;
  min-height: 46px;
  padding-inline: 1.25rem;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-danger), #991B1B);
  box-shadow: 0 10px 24px rgba(220,38,38,.16);
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;}
.mc-app main.page:has(.profile-card) > button:hover{transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(220,38,38,.20);
  filter: brightness(.98);}
.mc-app main.page:has(.profile-card) .notification-list{gap: .85rem;}
.mc-app main.page:has(.profile-card) .notification-list li{position: relative;
  overflow: hidden;
  padding: 1.1rem 1.15rem 1.05rem 1.2rem;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.mc-app main.page:has(.profile-card) .notification-list li:hover{transform: translateY(-2px);
  box-shadow: var(--shadow-md);}
.mc-app main.page:has(.profile-card) .notification-list li.unread{padding-left: 1.35rem;
  border-color: rgba(22,163,74,.28);
  background: linear-gradient(105deg, rgba(220,252,231,.92), #fff 72%);}
.mc-app main.page:has(.profile-card) .notification-list li.unread::before{top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  border-radius: 16px 0 0 16px;}
.mc-app main.page:has(.profile-card) .notification-list li.unread::after{content: "NOUVELLE";
  position: absolute;
  top: .9rem;
  right: .9rem;
  padding: .24rem .5rem;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .06em;}
.mc-app main.page:has(.profile-card) .notification-list li > strong{display: block;
  margin-bottom: .35rem;
  padding-right: 5rem;
  color: var(--color-text);
  font-size: .98rem;
  font-weight: 800;}
.mc-app main.page:has(.profile-card) .notification-list li p{margin-bottom: .55rem;
  line-height: 1.58;}
.mc-app main.page:has(.profile-card) .notification-list li small{font-size: .75rem;}
.mc-app main.page:has(.profile-card) .notification-list li button{margin-top: .75rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(22,163,74,.20);
  border-radius: 9px;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: .78rem;
  font-weight: 800;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;}
.mc-app main.page:has(.profile-card) .notification-list li button:hover{transform: translateY(-1px);
  border-color: rgba(22,163,74,.35);
  background: var(--color-primary-light);}
.mc-app main.page:has(.match-list){max-width: 1180px;
  padding-bottom: 5rem;}
.mc-app main.page:has(.match-list) > h1{margin-bottom: 1.5rem;}
.mc-app main.page:has(.match-list) .match-list{grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  margin-top: 1.15rem;}
.mc-app main.page:has(.match-list) .match-list > li{position: relative;
  overflow: hidden;
  min-height: 255px;
  padding: 1.35rem;
  border: 1px solid rgba(208,213,221,.9);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245,158,11,.07), transparent 12rem),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,250,252,.96));
  box-shadow: 0 12px 34px rgba(16,24,40,.075);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.mc-app main.page:has(.match-list) .match-list > li::before{content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));}
.mc-app main.page:has(.match-list) .match-list > li::after{content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -90px;
  bottom: -100px;
  border-radius: 50%;
  background: rgba(22,163,74,.04);
  pointer-events: none;}
.mc-app main.page:has(.match-list) .match-list > li:hover{transform: translateY(-3px);
  border-color: rgba(22,163,74,.24);
  box-shadow: 0 18px 42px rgba(16,24,40,.11);}
.mc-app main.page:has(.match-list) .match-list > li > strong{display: block;
  margin: .2rem 0 .6rem;
  padding-right: 7.5rem;
  color: var(--color-text);
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 850;}
.mc-app main.page:has(.match-list) .match-list > li > span:not(.badge){display: block;
  margin-bottom: .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(228,231,236,.88);
  color: var(--color-text-soft);
  font-size: .86rem;
  line-height: 1.55;}
.mc-app main.page:has(.match-list) .match-list > li > .badge{position: absolute;
  top: 1.05rem;
  right: 1.1rem;
  z-index: 2;
  min-height: 30px;
  padding: .28rem .72rem;
  font-size: .68rem;
  box-shadow: 0 4px 10px rgba(16,24,40,.06);}
.mc-app main.page:has(.match-list) .match-list > li > p{position: relative;
  z-index: 1;
  margin: .55rem 0;
  padding: .75rem .85rem;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: rgba(248,250,252,.84);
  font-size: .84rem;}
.mc-app main.page:has(.match-list) .match-list > li > p code{display: inline-block;
  margin-left: .25rem;
  padding: .28rem .5rem;
  border: 1px solid rgba(22,163,74,.18);
  border-radius: 7px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .03em;}
.mc-app main.page:has(.match-list) .match-list > li > p + p{border: 0;
  padding: 0;
  background: transparent;}
.mc-app main.page:has(.match-list) .match-list > li > p + p a{display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .7rem 1rem;
  border: 1px solid rgba(22,163,74,.14);
  border-radius: 11px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(22,163,74,.15);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;}
.mc-app main.page:has(.match-list) .match-list > li > p + p a::after{content: "↗";
  font-size: 1rem;
  line-height: 1;}
.mc-app main.page:has(.match-list) .match-list > li > p + p a:hover{transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(22,163,74,.20);
  filter: brightness(.99);}
.mc-app main.page:has(.match-list) .match-list > li > button{position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  margin-top: .2rem;
  padding: .7rem 1rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-size: .84rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(22,163,74,.15);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;}
.mc-app main.page:has(.match-list) .match-list > li > button:hover:not(:disabled){transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(22,163,74,.20);
  filter: brightness(.99);}
.mc-app main.page:has(.match-list) .match-list > li > button:disabled{opacity: .65;
  cursor: wait;
  box-shadow: none;}
.mc-app main.page:has(.match-list) .badge-approved{background: linear-gradient(135deg, #DCFCE7, #ECFDF3);
  color: var(--color-primary-dark);
  border: 1px solid rgba(22,163,74,.18);}
.mc-app main.page:has(.match-list) .badge-pending{background: linear-gradient(135deg, #FEF3C7, #FFFBEB);
  color: #92400E;
  border: 1px solid rgba(245,158,11,.18);}
.mc-app main.page:has(.match-list) .badge-rejected{background: linear-gradient(135deg, #FEE2E2, #FFF1F2);
  color: #991B1B;
  border: 1px solid rgba(220,38,38,.16);}
.mc-app main.page:has(.match-list) .badge-cancelled{background: linear-gradient(135deg, #EEF2F6, #F8FAFC);
  color: #475467;
  border: 1px solid rgba(71,84,103,.15);}
.mc-app main.page:has(.match-list) > p:not(.section-subtitle){color: var(--color-text-soft);}
.mc-app main.page:has(.match-list) .alert{border-radius: 14px;
  box-shadow: var(--shadow-xs);}
@media (max-width: 820px){.mc-app main.page:has(.match-list) .match-list{grid-template-columns: 1fr;}
.mc-app main.page:has(.profile-card) .profile-card p{grid-template-columns: 1fr;
    gap: .2rem;}}
@media (max-width: 560px){.mc-app main.page:has(.profile-card) > p:first-of-type{border-radius: 14px;}
.mc-app main.page:has(.profile-card) > p:nth-of-type(2){padding: 1rem 1rem 1rem 1.2rem;
    border-radius: 16px;}
.mc-app main.page:has(.profile-card) .profile-card,
.mc-app main.page:has(.match-list) .match-list > li{padding: 1rem;
    border-radius: 17px;}
.mc-app main.page:has(.profile-card) .profile-card img{width: 112px;
    height: 112px;
    border-radius: 18px;}
.mc-app main.page:has(.match-list) .match-list > li > strong{padding-right: 0;
    margin-top: .65rem;}
.mc-app main.page:has(.match-list) .match-list > li > .badge{position: static;
    margin-bottom: .65rem;}
.mc-app main.page:has(.profile-card) .notification-list li.unread::after{display: none;}}

/* ===== layout.css ===== */
.mc-app .public-layout{min-height: 100vh;
  display: flex;
  flex-direction: column;}
.mc-app .public-layout__content{flex: 1;
  min-width: 0;}
.mc-app .site-header{position: sticky;
  top: 0;
  z-index: 100;

  width: 100%;

  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(228, 231, 236, .85);

  box-shadow:
    0 1px 0 rgba(16, 24, 40, .02),
    0 6px 24px rgba(16, 24, 40, .045);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);}
.mc-app .site-header__container{width: min(calc(100% - 32px), var(--content-width));
  min-height: 76px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;}
.mc-app .site-header__brand{min-width: 0;

  display: inline-flex;
  align-items: center;
  gap: .8rem;

  color: var(--color-text);
  text-decoration: none;

  transition:
    transform .2s ease,
    opacity .2s ease;}
.mc-app .site-header__brand:hover{transform: translateY(-1px);
  opacity: .96;}
.mc-app .site-header__logo{width: auto;
  height: 46px;
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  overflow: visible;}
.mc-app .site-header__logo-image{display: block;
  width: auto;
  height: 46px;
  max-width: 46px;
  object-fit: contain;
  padding: 0;}
.mc-app .site-header__logo-fallback{width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  color: var(--color-primary);
  background: transparent;

  font-size: 1.1rem;
  font-weight: 850;}
.mc-app .site-header__identity{min-width: 0;

  display: flex;
  flex-direction: column;
  gap: .04rem;}
.mc-app .site-header__federation{max-width: 330px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--color-text);

  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;}
.mc-app .site-header__federation--full{display: block;}
.mc-app .site-header__federation--short{display: none;}
.mc-app .site-header__product{color: var(--color-primary-dark);

  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .16em;}
.mc-app .site-header__nav{display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: .25rem;}
.mc-app .site-header__link{position: relative;

  display: inline-flex;
  align-items: center;

  min-height: 42px;
  padding: .55rem .72rem;

  color: var(--color-text-soft);
  text-decoration: none;

  border-radius: 9px;

  font-size: .86rem;
  font-weight: 700;

  transition:
    color .18s ease,
    background-color .18s ease;}
.mc-app .site-header__link::after{content: "";

  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 3px;

  height: 3px;

  border-radius: 999px;

  background: var(--color-primary);

  transition:
    left .2s ease,
    right .2s ease;}
.mc-app .site-header__link:hover{color: var(--color-primary-dark);
  background: var(--color-primary-light);}
.mc-app .site-header__link.active{color: var(--color-primary-dark);
  background: rgba(236, 253, 245, .72);}
.mc-app .site-header__link.active::after{left: .72rem;
  right: .72rem;}
.mc-app .site-header__actions{display: flex;
  align-items: center;
  gap: .55rem;

  margin-left: .45rem;}
.mc-app .site-header__login{display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;
  padding: .55rem .8rem;

  color: var(--color-text-soft);
  text-decoration: none;

  font-size: .84rem;
  font-weight: 750;

  border-radius: 9px;

  transition:
    color .18s ease,
    background-color .18s ease;}
.mc-app .site-header__login:hover{color: var(--color-primary-dark);
  background: var(--color-primary-light);}
.mc-app .site-header__cta{display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: .62rem 1rem;

  color: #fff;
  text-decoration: none;

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      var(--color-primary),
      var(--color-primary-dark)
    );

  box-shadow:
    0 6px 16px rgba(22, 163, 74, .18);

  font-size: .84rem;
  font-weight: 800;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;}
.mc-app .site-header__cta:hover{color: #fff;

  transform: translateY(-1px);

  box-shadow:
    0 9px 22px rgba(22, 163, 74, .24);

  filter: brightness(.99);}
.mc-app .site-header__loading{color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 650;}
.mc-app .site-header__profile{display: inline-flex;
  align-items: center;
  gap: .55rem;

  min-height: 42px;
  padding: .35rem .55rem;

  color: var(--color-text);
  text-decoration: none;

  border-radius: 10px;

  transition:
    background-color .18s ease;}
.mc-app .site-header__profile:hover{background: var(--color-surface-soft);}
.mc-app .site-header__avatar{width: 33px;
  height: 33px;
  flex: 0 0 33px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--color-primary),
      var(--color-primary-dark)
    );

  font-size: .76rem;
  font-weight: 850;}
.mc-app .site-header__profile-text{min-width: 0;

  display: flex;
  flex-direction: column;}
.mc-app .site-header__profile-text strong{max-width: 130px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--color-text);

  font-size: .76rem;
  font-weight: 800;}
.mc-app .site-header__profile-text small{color: var(--color-text-muted);

  font-size: .65rem;
  font-weight: 650;}
.mc-app .site-header__logout{min-height: 38px;
  padding: .5rem .68rem;

  color: var(--color-text-soft);
  background: transparent;

  border: 1px solid var(--color-border);

  border-radius: 9px;

  cursor: pointer;

  font-size: .72rem;
  font-weight: 700;

  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease;}
.mc-app .site-header__logout:hover{color: var(--color-danger);
  background: #FFF7F7;
  border-color: #FECACA;}
.mc-app .site-header__menu-toggle{display: none;

  width: 42px;
  height: 42px;

  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;

  padding: 0;

  border: 1px solid var(--color-border);
  border-radius: 10px;

  color: var(--color-text);

  background: #fff;

  cursor: pointer;}
.mc-app .site-header__menu-toggle span{display: block;

  width: 18px;
  height: 2px;

  border-radius: 999px;

  background: currentColor;

  transition:
    transform .2s ease,
    opacity .2s ease;}
.mc-app .site-header__menu-toggle.is-open span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.mc-app .site-header__menu-toggle.is-open span:nth-child(2){opacity: 0;}
.mc-app .site-header__menu-toggle.is-open span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
.mc-app .site-footer{position: relative;

  overflow: hidden;

  margin-top: 0;

  color: rgba(255,255,255,.76);

  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(22, 163, 74, .18),
      transparent 21rem
    ),
    radial-gradient(
      circle at 5% 100%,
      rgba(245, 158, 11, .08),
      transparent 18rem
    ),
    #0B1220;

  border-top: 1px solid rgba(255,255,255,.06);}
.mc-app .site-footer__glow{position: absolute;

  width: 420px;
  height: 420px;

  top: -280px;
  left: 50%;

  transform: translateX(-50%);

  border-radius: 50%;

  background: rgba(22, 163, 74, .08);

  filter: blur(18px);

  pointer-events: none;}
.mc-app .site-footer__container{position: relative;
  z-index: 1;

  width: min(calc(100% - 32px), var(--content-width));

  margin: 0 auto;

  padding: 3.1rem 0 1.2rem;}
.mc-app .site-footer__top{display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr);
  gap: 4rem;
  align-items: start;}
.mc-app .site-footer__brand-block{max-width: 560px;}
.mc-app .site-footer__brand{display: inline-flex;
  align-items: center;
  gap: .75rem;

  color: #fff;
  text-decoration: none;}
.mc-app .site-footer__brand-mark{width: auto;
  height: 46px;
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  overflow: visible;

  color: #fff;
  background: transparent;}
.mc-app .site-footer__brand-mark img{display: block;
  width: auto;
  height: 46px;
  max-width: 46px;
  object-fit: contain;
  padding: 0;}
.mc-app .site-footer__brand span:last-child{display: flex;
  flex-direction: column;
  gap: .05rem;}
.mc-app .site-footer__brand strong{color: #fff;

  font-size: .94rem;
  font-weight: 800;
  letter-spacing: -.02em;}
.mc-app .site-footer__brand small{color: rgba(255,255,255,.48);

  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .16em;}
.mc-app .site-footer__tagline{margin: 1.15rem 0 .5rem;

  color: rgba(255,255,255,.84);

  font-size: .9rem;
  font-weight: 700;}
.mc-app .site-footer__description{max-width: 520px;
  margin: 0;

  color: rgba(255,255,255,.56);

  font-size: .82rem;
  line-height: 1.7;}
.mc-app .site-footer__columns{display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2rem;}
.mc-app .site-footer__column{display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;}
.mc-app .site-footer__column h3{margin: 0 0 .25rem;

  color: #fff;

  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;}
.mc-app .site-footer__column a,
.mc-app .site-footer__column span{color: rgba(255,255,255,.58);

  text-decoration: none;

  font-size: .8rem;
  line-height: 1.5;

  transition:
    color .18s ease;}
.mc-app .site-footer__column a:hover{color: #fff;}
.mc-app .site-footer__column span{max-width: 240px;}
.mc-app .site-footer__divider{width: 100%;
  height: 1px;

  margin: 2.4rem 0 1rem;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.13),
      transparent
    );}
.mc-app .site-footer__bottom{display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  color: rgba(255,255,255,.42);

  font-size: .72rem;
  text-align: center;}
.mc-app .site-footer__bottom-separator{color: var(--color-accent);}
@media (max-width: 980px){.mc-app .site-header__container{min-height: 70px;}
.mc-app .site-header__nav{gap: .05rem;}
.mc-app .site-header__link{padding-left: .55rem;
    padding-right: .55rem;
    font-size: .8rem;}
.mc-app .site-header__profile-text{display: none;}
.mc-app .site-header__profile{padding: .3rem;}
.mc-app .site-footer__top{gap: 2.5rem;}}
@media (max-width: 760px){.mc-app .site-header__container{min-height: 66px;}
.mc-app .site-header__menu-toggle{display: inline-flex;
    flex: 0 0 auto;}
.mc-app .site-header__nav{position: absolute;

    top: calc(100% + 1px);
    left: 0;
    right: 0;

    width: 100%;

    display: none;

    flex-direction: column;
    align-items: stretch;

    gap: .35rem;

    padding: .8rem;

    background: rgba(255,255,255,.98);

    border-bottom: 1px solid var(--color-border);

    box-shadow:
      0 15px 35px rgba(16, 24, 40, .10);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);}
.mc-app .site-header__nav.is-open{display: flex;}
.mc-app .site-header__link{width: 100%;
    min-height: 44px;

    justify-content: flex-start;

    padding: .65rem .8rem;}
.mc-app .site-header__link::after{display: none;}
.mc-app .site-header__actions{width: 100%;

    margin: .25rem 0 0;
    padding-top: .65rem;

    border-top: 1px solid var(--color-border);

    display: grid;
    grid-template-columns: 1fr auto;}
.mc-app .site-header__login{justify-content: center;
    border: 1px solid var(--color-border);}
.mc-app .site-header__cta{min-width: 120px;}
.mc-app .site-header__profile{justify-content: flex-start;}
.mc-app .site-header__profile-text{display: flex;}
.mc-app .site-header__logout{justify-self: end;}
.mc-app .site-footer__top{grid-template-columns: 1fr;
    gap: 2rem;}
.mc-app .site-footer__columns{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 560px){.mc-app .site-header__container{width: min(calc(100% - 18px), var(--content-width));}
.mc-app .site-header__identity{max-width: calc(100vw - 100px);}
.mc-app .site-header__federation--full{display: none;}
.mc-app .site-header__federation--short{display: block;
    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: .9rem;
    font-weight: 850;}
.mc-app .site-header__product{font-size: .55rem;}
.mc-app .site-header__logo{height: 42px;}
.mc-app .site-header__logo-image{height: 42px;
    max-width: 42px;}
.mc-app .site-header__logo-fallback{width: 42px;
    height: 42px;}
.mc-app .site-footer__brand-mark{height: 42px;}
.mc-app .site-footer__brand-mark img{height: 42px;
    max-width: 42px;}
.mc-app .site-footer__container{width: min(calc(100% - 20px), var(--content-width));
    padding-top: 2.4rem;}
.mc-app .site-footer__columns{grid-template-columns: 1fr;
    gap: 1.5rem;}
.mc-app .site-footer__bottom{flex-wrap: wrap;}}
@media (prefers-reduced-motion: reduce){.mc-app .site-header__brand,
.mc-app .site-header__link,
.mc-app .site-header__cta,
.mc-app .site-header__login,
.mc-app .site-header__logout,
.mc-app .site-header__profile,
.mc-app .site-header__menu-toggle span{transition: none;}}

/* ===== media.css ===== */
.mc-app .image-picker{display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: .4rem 0;}
.mc-app .image-picker__hint,
.mc-app .image-picker__pending{color: var(--color-text-soft);}
.mc-app .image-picker__body{display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;}
.mc-app .image-picker__preview{width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: .75rem;
  text-align: center;
  overflow: hidden;}
.mc-app .image-picker__preview img{max-width: 100%;
  max-height: 100%;
  object-fit: contain;}
.mc-app .image-picker__actions{display: flex;
  gap: .5rem;
  flex-wrap: wrap;}
.mc-app .media-modal__backdrop{position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(16, 24, 40, .55);}
.mc-app .media-modal{width: min(760px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.2rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);}
.mc-app .media-modal__header{display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .8rem;}
.mc-app .media-modal__header h2{margin: 0;
  font-size: 1.1rem;}
.mc-app .media-grid{list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .8rem;}
.mc-app .media-grid__item,
.mc-app .media-card{display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 100%;
  padding: .6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;}
.mc-app .media-grid__item{cursor: pointer;}
.mc-app .media-grid__item:hover{border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);}
.mc-app .media-grid__item img,
.mc-app .media-card img{width: 100%;
  height: 90px;
  object-fit: contain;
  background: var(--color-surface-soft);
  border-radius: var(--radius-sm);}
.mc-app .media-grid__item span,
.mc-app .media-card__name{width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  color: var(--color-text-soft);}
.mc-app .media-card small{color: var(--color-text-muted);}

/* ===== home.css ===== */
.mc-app .home-page{width: 100%;
  overflow: hidden;}
.mc-app .home-container{width: min(calc(100% - 32px), 1180px);
  margin: 0 auto;}
.mc-app .home-hero{position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 650px;

  color: #fff;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(245, 158, 11, .20),
      transparent 24rem
    ),
    linear-gradient(
      135deg,
      #06170e 0%,
      #0b3821 48%,
      #082015 100%
    );}
.mc-app .home-hero--with-match{background-image:
    linear-gradient(
      110deg,
      rgba(4, 15, 9, .95) 0%,
      rgba(5, 35, 20, .88) 42%,
      rgba(5, 24, 15, .68) 100%
    ),
    var(--home-hero-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;}
.mc-app .home-hero__overlay{position: absolute;
  z-index: -3;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(4, 15, 9, .88),
      rgba(4, 15, 9, .42)
    );}
.mc-app .home-hero__grid{position: absolute;
  z-index: -2;
  inset: 0;

  opacity: .13;

  background-image:
    linear-gradient(
      rgba(255,255,255,.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.12) 1px,
      transparent 1px
    );

  background-size: 56px 56px;

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,.8),
    transparent 90%
  );}
.mc-app .home-hero__circle{position: absolute;
  z-index: -1;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;

  pointer-events: none;}
.mc-app .home-hero__circle--one{width: 560px;
  height: 560px;
  right: -240px;
  top: -170px;}
.mc-app .home-hero__circle--two{width: 330px;
  height: 330px;
  right: -100px;
  top: -55px;}
.mc-app .home-hero__container{position: relative;
  z-index: 2;

  min-height: 650px;

  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, .82fr);
  align-items: center;

  gap: 4.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;}
.mc-app .home-hero__content{max-width: 650px;}
.mc-app .home-kicker{display: inline-flex;
  align-items: center;
  gap: .55rem;

  min-height: 34px;
  padding: .42rem .75rem;

  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;

  background: rgba(255,255,255,.07);
  backdrop-filter: blur(10px);

  color: rgba(255,255,255,.82);

  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .10em;}
.mc-app .home-kicker__dot{width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: #4ADE80;

  box-shadow:
    0 0 0 5px rgba(74, 222, 128, .13),
    0 0 15px rgba(74, 222, 128, .40);}
.mc-app .home-hero__tagline{margin: 1.4rem 0 .55rem;

  color: rgba(255,255,255,.70);

  font-size: 1rem;
  font-weight: 650;}
.mc-app .home-hero__title{margin: 0;

  color: #fff;

  font-size: clamp(3.2rem, 6vw, 5.9rem);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.065em;}
.mc-app .home-hero__lede{max-width: 650px;
  margin: 1.45rem 0 0;

  color: rgba(255,255,255,.80);

  font-size: clamp(1rem, 1.45vw, 1.15rem);
  line-height: 1.75;}
.mc-app .home-hero__lede strong{color: #fff;
  font-weight: 800;}
.mc-app .home-hero__trust{display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.1rem;

  margin-top: 1.65rem;}
.mc-app .home-hero__trust > span{display: inline-flex;
  align-items: center;
  gap: .45rem;

  color: rgba(255,255,255,.68);

  font-size: .78rem;
  font-weight: 700;}
.mc-app .home-hero__trust-check{display: inline-grid;
  place-items: center;

  width: 20px;
  height: 20px;

  border-radius: 50%;

  color: #fff;
  background: rgba(22,163,74,.55);

  font-size: .7rem;
  font-weight: 900;}
.mc-app .home-featured-wrap{display: flex;
  justify-content: flex-end;}
.mc-app .home-featured-card{position: relative;

  width: min(100%, 510px);

  padding: 1.55rem;

  border: 1px solid rgba(255,255,255,.17);
  border-radius: 24px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.14),
      rgba(255,255,255,.07)
    );

  box-shadow:
    0 24px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);}
.mc-app .home-featured-card::before{content: "";

  position: absolute;

  top: 0;
  left: 28px;
  right: 28px;

  height: 3px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--color-accent),
      #fff,
      var(--color-primary)
    );}
.mc-app .home-featured-card__top{display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 1.05rem;}
.mc-app .home-status{display: inline-flex;
  align-items: center;
  gap: .45rem;

  min-height: 31px;
  padding: .4rem .65rem;

  border: 1px solid rgba(74,222,128,.28);
  border-radius: 999px;

  background: rgba(22,163,74,.18);

  color: #DCFCE7;

  font-size: .7rem;
  font-weight: 850;
  white-space: nowrap;}
.mc-app .home-status__dot{width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #4ADE80;

  box-shadow: 0 0 0 4px rgba(74,222,128,.12);}
.mc-app .home-status--muted{border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.70);}
.mc-app .home-status--small{min-height: 26px;
  padding: .28rem .52rem;
  font-size: .65rem;}
.mc-app .home-featured-card__label{color: rgba(255,255,255,.45);

  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .12em;}
.mc-app .home-featured-card__competition{margin-bottom: 1.15rem;

  color: rgba(255,255,255,.64);

  font-size: .76rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .08em;}
.mc-app .home-matchup{display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;

  gap: .75rem;}
.mc-app .home-team{display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;

  min-width: 0;

  text-align: center;}
.mc-app .home-team--right{text-align: center;}
.mc-app .home-team-logo{width: 72px;
  height: 72px;

  object-fit: contain;
  display: block;}
.mc-app .home-team-logo--fallback{display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;

  color: rgba(255,255,255,.80);

  background: rgba(255,255,255,.06);}
.mc-app .home-team-logo--fallback svg{width: 48px;
  height: 48px;}
.mc-app .home-team strong{max-width: 155px;

  color: #fff;

  font-size: 1rem;
  line-height: 1.25;
  font-weight: 850;}
.mc-app .home-matchup__vs{display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;

  background: rgba(255,255,255,.06);}
.mc-app .home-matchup__vs span{color: var(--color-accent);

  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;}
.mc-app .home-featured-card__details{display: grid;
  gap: .65rem;

  margin-top: 1.45rem;
  padding-top: 1.05rem;

  border-top: 1px solid rgba(255,255,255,.10);}
.mc-app .home-detail{display: flex;
  align-items: flex-start;
  gap: .7rem;}
.mc-app .home-detail__icon{width: 32px;
  height: 32px;

  flex: 0 0 32px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color: #DCFCE7;
  background: rgba(22,163,74,.16);

  font-size: .86rem;
  font-weight: 900;}
.mc-app .home-detail div{min-width: 0;

  display: flex;
  flex-direction: column;
  gap: .08rem;}
.mc-app .home-detail small{color: rgba(255,255,255,.44);

  font-size: .65rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .07em;}
.mc-app .home-detail strong{color: rgba(255,255,255,.88);

  font-size: .80rem;
  line-height: 1.45;
  font-weight: 700;}
.mc-app .home-actions{display: flex;
  flex-wrap: wrap;
  gap: .65rem;

  margin-top: 1.35rem;}
.mc-app .home-actions--loading{align-items: center;}
.mc-app .home-actions__note{align-self: center;

  color: rgba(255,255,255,.55);

  font-size: .72rem;
  font-weight: 650;}
.mc-app .home-button{display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  min-height: 46px;

  padding: .7rem 1rem;

  border: 1px solid transparent;
  border-radius: 11px;

  text-decoration: none;

  font-size: .84rem;
  font-weight: 800;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease;}
.mc-app .home-button svg{width: 17px;
  height: 17px;
  flex: 0 0 17px;}
.mc-app .home-button:hover{transform: translateY(-1px);}
.mc-app .home-button--primary{color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--color-primary),
      var(--color-primary-dark)
    );

  box-shadow: 0 10px 25px rgba(22,163,74,.24);}
.mc-app .home-button--primary:hover{box-shadow: 0 13px 30px rgba(22,163,74,.30);}
.mc-app .home-button--light{color: var(--color-text);

  background: #fff;
  border-color: rgba(255,255,255,.42);

  box-shadow: 0 8px 20px rgba(0,0,0,.12);}
.mc-app .home-button--accent{color: #18200d;
  background: var(--color-accent);
  box-shadow: 0 10px 25px rgba(245,158,11,.22);}
.mc-app .home-loading-bar{width: 145px;
  height: 46px;

  border-radius: 11px;

  background: rgba(255,255,255,.10);

  animation: homePulse 1.4s ease-in-out infinite;}
.mc-app .home-loading-bar--small{width: 110px;}
@keyframes homePulse{
  0%, 100% { opacity: .45; }
  50% { opacity: .85; }
}
.mc-app .home-featured-card--empty{padding: 2rem;}
.mc-app .home-featured-card__empty-icon{width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  margin-bottom: 1rem;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;

  background: rgba(255,255,255,.07);

  color: #fff;

  font-size: .9rem;
  font-weight: 900;}
.mc-app .home-featured-card--empty h2{margin: 1rem 0 .65rem;

  color: #fff;

  font-size: 1.55rem;
  font-weight: 850;}
.mc-app .home-featured-card--empty p{max-width: 390px;

  margin: 0;

  color: rgba(255,255,255,.62);

  font-size: .86rem;
  line-height: 1.65;}
.mc-app .home-featured-card--empty .home-button{margin-top: 1.25rem;}
.mc-app .home-skeleton{border-radius: 10px;

  background: rgba(255,255,255,.09);

  animation: homePulse 1.4s ease-in-out infinite;}
.mc-app .home-skeleton--title{width: 50%;
  height: 18px;}
.mc-app .home-skeleton--line{width: 100%;
  height: 12px;
  margin-top: 1rem;}
.mc-app .home-skeleton--short{width: 72%;}
.mc-app .home-skeleton--button{width: 190px;
  height: 46px;
  margin-top: 1.4rem;}
.mc-app .home-main{background:
    radial-gradient(
      circle at 0% 0%,
      rgba(22,163,74,.045),
      transparent 30rem
    ),
    var(--color-background);}
.mc-app .home-section{padding: 5rem 0;}
.mc-app .home-section--intro{padding-top: 4.6rem;}
.mc-app .home-section--matches{padding-top: 1rem;}
.mc-app .home-section--partners{padding-bottom: 5.5rem;}
.mc-app .home-section-heading{display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 2rem;

  margin-bottom: 2rem;}
.mc-app .home-section-heading > div{min-width: 0;}
.mc-app .home-section-heading__eyebrow,
.mc-app .home-cta__eyebrow{display: block;

  margin-bottom: .55rem;

  color: var(--color-primary-dark);

  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .13em;}
.mc-app .home-section-heading h2{margin: 0;

  color: var(--color-text);

  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.1;
  font-weight: 880;
  letter-spacing: -.035em;}
.mc-app .home-section-heading > p{max-width: 460px;

  margin: 0;

  color: var(--color-text-soft);

  font-size: .92rem;
  line-height: 1.7;
  text-align: right;}
.mc-app .home-section-heading--center{display: block;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;

  text-align: center;}
.mc-app .home-section-heading--center p{max-width: 550px;
  margin: .8rem auto 0;

  text-align: center;}
.mc-app .home-steps{display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.15rem;}
.mc-app .home-step{position: relative;

  min-height: 255px;

  padding: 1.55rem;

  border: 1px solid var(--color-border);
  border-radius: 20px;

  background: rgba(255,255,255,.88);

  box-shadow: var(--shadow-sm);

  overflow: hidden;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;}
.mc-app .home-step:hover{transform: translateY(-3px);

  border-color: rgba(22,163,74,.22);

  box-shadow: var(--shadow-md);}
.mc-app .home-step::after{content: "";

  position: absolute;

  right: -45px;
  bottom: -55px;

  width: 140px;
  height: 140px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      var(--color-primary-light),
      transparent 70%
    );

  opacity: .7;}
.mc-app .home-step__number{color: var(--color-text-muted);

  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em;}
.mc-app .home-step__icon{width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  margin-top: 1.25rem;

  border-radius: 14px;

  color: var(--color-primary-dark);
  background: var(--color-primary-light);}
.mc-app .home-step__icon svg{width: 23px;
  height: 23px;}
.mc-app .home-step h3{position: relative;
  z-index: 1;

  margin: 1rem 0 .45rem;

  color: var(--color-text);

  font-size: 1.05rem;
  font-weight: 820;}
.mc-app .home-step p{position: relative;
  z-index: 1;

  max-width: 310px;

  margin: 0;

  color: var(--color-text-soft);

  font-size: .84rem;
  line-height: 1.65;}
.mc-app .home-match-grid{display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;}
.mc-app .home-match-card{display: block;

  padding: 1.3rem;

  border: 1px solid var(--color-border);
  border-radius: 18px;

  background: #fff;

  color: inherit;
  text-decoration: none;

  box-shadow: var(--shadow-sm);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;}
.mc-app .home-match-card:hover{transform: translateY(-3px);

  border-color: rgba(22,163,74,.24);

  box-shadow: var(--shadow-md);}
.mc-app .home-match-card__top{display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  padding-bottom: .95rem;

  border-bottom: 1px solid var(--color-border);}
.mc-app .home-match-card__date{color: var(--color-text-muted);

  font-size: .72rem;
  font-weight: 800;}
.mc-app .home-match-card__teams{display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);

  align-items: center;

  gap: .65rem;

  padding: 1.2rem 0;}
.mc-app .home-match-card__teams > div{display: flex;
  flex-direction: column;
  gap: .18rem;}
.mc-app .home-match-card__teams strong{color: var(--color-text);

  font-size: .97rem;
  line-height: 1.3;
  font-weight: 820;}
.mc-app .home-match-card__teams span{color: var(--color-text-muted);

  font-size: .68rem;
  font-weight: 700;}
.mc-app .home-match-card__opponent{text-align: right;}
.mc-app .home-match-card__vs{width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--color-primary-dark);
  background: var(--color-primary-light);

  font-size: .67rem !important;
  font-weight: 900 !important;}
.mc-app .home-match-card__footer{display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;

  gap: .8rem;

  padding-top: .9rem;

  border-top: 1px solid var(--color-border);

  color: var(--color-text-soft);

  font-size: .72rem;
  font-weight: 700;}
.mc-app .home-match-card__footer span:nth-child(2){overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;}
.mc-app .home-match-card__arrow{color: var(--color-primary);

  font-size: 1.05rem;}
.mc-app .home-section--cta{padding-top: 0;}
.mc-app .home-cta{display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 2.5rem;

  padding: 2.1rem 2.2rem;

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(255,255,255,.11),
      transparent 18rem
    ),
    linear-gradient(
      135deg,
      var(--color-primary-dark),
      #0B5D2C
    );

  box-shadow:
    0 20px 45px rgba(22,163,74,.16);}
.mc-app .home-cta__eyebrow{color: rgba(255,255,255,.58);}
.mc-app .home-cta h2{max-width: 710px;

  margin: 0;

  color: #fff;

  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.15;
  font-weight: 850;}
.mc-app .home-cta p{max-width: 660px;

  margin: .65rem 0 0;

  color: rgba(255,255,255,.68);

  font-size: .84rem;
  line-height: 1.65;}
.mc-app .home-cta__actions{display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  gap: .65rem;

  flex: 0 0 auto;}
.mc-app .home-partners{display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: .8rem;}
.mc-app .home-partner{min-height: 120px;

  display: grid;
  place-items: center;

  padding: 1.1rem;

  border: 1px solid var(--color-border);
  border-radius: 16px;

  background: rgba(255,255,255,.80);

  text-decoration: none;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;}
.mc-app .home-partner:hover{transform: translateY(-2px);

  border-color: rgba(22,163,74,.20);

  box-shadow: var(--shadow-sm);}
.mc-app .home-partner img{width: auto;
  max-width: 145px;
  max-height: 62px;

  object-fit: contain;}
.mc-app .home-partner span{color: var(--color-text-soft);

  text-align: center;

  font-size: .78rem;
  font-weight: 750;}
@media (max-width: 1050px){.mc-app .home-hero__container{grid-template-columns: minmax(0, 1fr) minmax(380px, .78fr);
    gap: 2.5rem;}
.mc-app .home-partners{grid-template-columns: repeat(4, minmax(0, 1fr));}}
@media (max-width: 900px){.mc-app .home-hero{min-height: auto;}
.mc-app .home-hero__container{min-height: auto;

    grid-template-columns: 1fr;

    padding-top: 3.6rem;
    padding-bottom: 3.8rem;}
.mc-app .home-hero__content{max-width: 760px;}
.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-step{min-height: auto;}
.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));}}
@media (max-width: 680px){.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(2.8rem, 15vw, 4.3rem);}
.mc-app .home-hero__lede{font-size: .95rem;}
.mc-app .home-hero__trust{display: grid;
    grid-template-columns: 1fr 1fr;

    gap: .55rem;}
.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-matchup__vs{width: 46px;
    height: 46px;}
.mc-app .home-actions{display: grid;
    grid-template-columns: 1fr;}
.mc-app .home-actions .home-button{width: 100%;}
.mc-app .home-match-grid{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));}}
@media (max-width: 460px){.mc-app .home-section{padding: 3.6rem 0;}
.mc-app .home-hero__trust{grid-template-columns: 1fr;}
.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;}}
@media (prefers-reduced-motion: reduce){.mc-app .home-button,
.mc-app .home-step,
.mc-app .home-match-card,
.mc-app .home-partner{transition: none;}
.mc-app .home-loading-bar,
.mc-app .home-skeleton{animation: none;}}


/* Image personnalisée du héros, sélectionnée dans les réglages Media Channel. */
.mc-app .home-hero--has-custom-bg{
  background-image:linear-gradient(110deg,rgba(4,15,9,.88) 0%,rgba(5,35,20,.72) 48%,rgba(5,24,15,.58) 100%),var(--home-hero-bg);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
@media (max-width:600px){
  .mc-app .home-hero--has-custom-bg{background-position:center center;}
}

/* Image personnalisée : afficher uniquement la photo, sans dégradé ni décor circulaire. */
.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;
}