:root {
  --gpge-navy: #0B2265;
  --gpge-red: #E41A1A;
  --gpge-gold: #FFB81C;
  --gpge-silver: #A5ACAF;
  --gpge-bg: #020617;
  --gpge-panel: #0f172a;
  --gpge-text: #e5e7eb;
  --gpge-muted: #9ca3af;
  --gpge-bleu-clair: #7BC2FF;
  --radius-lg: 1rem;
  --shadow-soft: 0 12px 30px rgba(0,0,0,0.35);
  --gpge-bonus-perfect:  #ef4444; /* +10 : rouge chaud, très intense */
  --gpge-bonus-total:    #f97316; /* +5 : orange chaud */
  --gpge-bonus-diff1:    #eab308; /* +4 : jaune doré */
  --gpge-bonus-diff2_3:  #22c55e; /* +3 : vert énergie */
  --gpge-bonus-diff4_6:  #0ea5e9; /* +2 : bleu froid */
  --gpge-bonus-diff7_9:  #6366f1; /* +1 : indigo froid */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(circle at top, #0b1120 0, var(--gpge-bg) 60%);
  color: var(--gpge-text);
  line-height: 1.6;
}

/* =========================
   Typographie globale GPGE
   ========================= */

h1, h2, h3, h4 {
  font-family: inherit;
  line-height: 1.25;
  margin: 0 0 0.6rem;
}

/* H1 — Titre principal de page */
h1 {
  color: #f3f4f6;              /* blanc doux, moins dur que #fff */
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.7rem;
}

/* H2 — Rouge NFL atténué (sections principales) */
h2 {
  color: rgba(255, 184, 28, 0.90); /* or subtil */
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 1.4rem;
  margin-bottom: 0.6rem;
}

/* H3 — Argent NFL (sous-sections) */
h3 {
  color: var(--gpge-bleu-clair);
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.1rem;
  margin-bottom: 0.45rem;
}

/* H4 — Or NFL doux (petits sous-titres / notes) */
h4 {
  color: rgba(213, 10, 10, 0.88);  /* #D50A0A adouci */ 
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.35rem;
}

/* Paragraphes et listes */
p {
  margin: 0 0 0.8rem;
}

ul,
ol {
  margin: 0 0 0.9rem 1.4rem;
  padding: 0;
}

/* Citation mise en valeur (ex. « piastre sur la TV ») */
.quote-callout {
  margin: 1.1rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--gpge-gold);
  font-style: italic;
  color: var(--gpge-silver);
}


/* --------------- Layout --------------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem;
}

/* --------------- Header & nav --------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: linear-gradient(to right, var(--gpge-red), #7f0000);
  border-bottom: 1px solid rgba(148,163,184,0.3);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo {
  width: 52px;
  height: auto;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.brand-subtitle {
  font-size: 0.8rem;
  color: var(--gpge-silver);
}

/* Burger */

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.6);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #e5e7eb;
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-label span::before {
  top: -5px;
}

.nav-toggle-label span::after {
  top: 5px;
}

/* Nav */

.site-nav {
  position: fixed;
  inset: 60px 0 auto 0;
  background: rgba(213,10,10,0.97); /* rouge NFL */
  border-bottom: 1px solid rgba(148,163,184,0.3);
  transform: translateY(-120%);
  transition: transform .2s ease-out;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0.75rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.site-nav a {
  display: block;
  padding: 0.4rem 0.2rem;
  text-decoration: none;
  color: var(--gpge-text);
  font-size: 0.95rem;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--gpge-gold);
}

/* toggle open */

.nav-toggle:checked ~ .site-nav {
  transform: translateY(0);
}

.nav-toggle:checked + .nav-toggle-label span {
  transform: rotate(45deg);
}

.nav-toggle:checked + .nav-toggle-label span::before {
  transform: rotate(90deg);
  top: 0;
}

.nav-toggle:checked + .nav-toggle-label span::after {
  opacity: 0;
}

/* --------------- Hero --------------- */

.hero {
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}

.hero-inner {
  display: grid;
  gap: 1.5rem;
}

/* le bloc texte peut s'étirer sur toute la largeur de sa colonne */
.hero-inner > div:first-child {
  max-width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(148,163,184,0.5);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gpge-silver);
}

.hero-logo {
  width: 120px;
  max-width: 40vw;
}

.hero-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0.75rem 0 0.4rem;
}

.hero-lead {
  margin: 0;
  font-size: 0.98rem;
  color: var(--gpge-muted);
}

.hero-ctas {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* --------------- Buttons GPGE --------------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .95rem;
  margin: 0.25rem 0.4rem; /* vertical | horizontal */
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.95);
  color: var(--gpge-text);
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: all .18s ease;
}

/* Hover / focus de base */
.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  outline: none;
}

/* === Nouveau PRIMARY — Style moderne, sans dégradé === */
.button-primary {
  background: var(--gpge-red);
  border: 1px solid rgba(255,255,255,0.18);
  color: #ffffff;
  font-weight: 600;
  border-radius: 999px;
  padding: .6rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.button-primary:hover,
.button-primary:focus-visible {
  background: #ff3d3d; /* rouge légèrement plus clair au hover */
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(213, 10, 10, 0.35);
}

/* === SECONDARY — Silver NFL === */

.button-secondary {
  background: rgba(165, 172, 175, 0.22);    /* argent léger */
  border: 1px solid rgba(165,172,175,0.55); /* contour silver */
  color: #d1d5db;
  font-weight: 500;
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: rgba(165,172,175,0.35);
  border-color: rgba(165,172,175,0.85);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(165,172,175,0.35);
}


/* === GOLD — Accent GPGE (pour actions importantes) === */

.button-gold {
  background: linear-gradient(135deg, var(--gpge-gold), #ffd34f);
  border: 1px solid rgba(251,191,36,0.9);
  color: #111827;
  font-weight: 600;
}

.button-gold:hover,
.button-gold:focus-visible {
  background: linear-gradient(135deg, #ffea7a, var(--gpge-gold));
  border-color: #facc15;
  box-shadow: 0 8px 20px rgba(250, 204, 21, 0.45);
}


/* Variante compacte si tu l’utilises encore */
.button-pill {
  font-size: 0.8rem;
  padding: .4rem .75rem;
}

/* --------------- Cards (sections) --------------- */

.section {
  padding-bottom: 1.5rem;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.section-subtitle {
  font-size: 0.85rem;
  color: var(--gpge-muted);
}

.card-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .card-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Force la grille 50% / 50% pour la page Prédictions */
.card-grid--two {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .card-grid--two {
    grid-template-columns: 1fr 1fr !important;
  }
}


.card {
  background: radial-gradient(circle at top left, #111827, var(--gpge-panel));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148,163,184,0.4);
  box-shadow: var(--shadow-soft);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  overflow: hidden;
}

.card-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gpge-silver);
}

/* Titre de carte – même look sur mobile et desktop */
.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gpge-gold);   /* explicite plutôt que d'hériter simplement de h2 */
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}


.card-text {
  font-size: 0.9rem;
  color: var(--gpge-muted);
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.45;
}

.card-meta {
  font-size: 0.8rem;
  color: var(--gpge-silver);
}

.card-actions {
  margin-top: 0.4rem;
}

/* variations */
.card--red {
  border-color: rgba(220,38,38,0.8);
  box-shadow: 0 18px 40px rgba(185,28,28,0.55);
}

.card--navy {
  border-color: rgba(37,99,235,0.7);
}

.card--gold {
  border-color: rgba(251,191,36,0.8);
}

.card--silver {
  border-color: rgba(156,163,175,0.9);
}

/* Puces NFL dorées pour les listes dans les cartes */
.card .list {
  list-style: none;   /* enlève les puces rondes */
  margin: 0;
  padding: 0;
}

.card .list li {
  position: relative;
  padding-left: 1.1rem;  /* espace entre la barre et le texte */
  margin: 0.15rem 0;
}

/* Petite barre verticale dorée type NFL */
.card .list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;           /* ajustement vertical */
  width: 3px;
  height: 0.9em;
  border-radius: 999px;
  background: var(--gpge-gold);
}

/* Version globale de .list pour les pages de texte (hors .card) */
.list {
  list-style: none;
  margin: 0 0 0.9rem 0;
  padding: 0;
}

.list li {
  position: relative;
  padding-left: 1.1rem;
  margin: 0.15rem 0;
}

.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 3px;
  height: 0.9em;
  border-radius: 999px;
  background: var(--gpge-gold);
}

/* --------------- News list --------------- */

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.news-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.news-label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: .12em;
  color: var(--gpge-silver);
}

/* --------------- Footer GPGE --------------- */

.site-footer {
  margin-top: auto;
  padding: 1.5rem 0;
  background: var(--gpge-panel);
  color: var(--gpge-muted);
  border-top: 1px solid rgba(148,163,184,0.3);
  font-size: 0.85rem;
}

.site-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-footer a {
  color: var(--gpge-gold);
  text-decoration: underline;
}

/* Hover or sur le lien du footer */
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--gpge-silver) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

/* Footer : logo + texte alignés sur la même ligne */
.footer-madeby {
  display: flex;
  align-items: center;
  gap: 0.6rem; /* espace entre le logo et le texte */
  white-space: nowrap; /* pour éviter le saut de ligne entre “par” et “Gaétan Dupont” */
}
/* Conteneur du logo en bas de page */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Logo 40px */
.footer-logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gpge-gold);
  box-shadow: 0 0 6px rgba(0,0,0,0.35);
}

/* Layout du footer */
.site-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap; /* Permet un passage en colonne sur mobile */
}

/* Mobile : on repasse en colonne, mais le logo reste à gauche du texte */
@media (max-width: 700px) {
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-madeby {
    justify-content: center;
  }
}

/* Mobile : footer centré */
@media (max-width: 700px) {
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-logo img {
    margin-top: .8rem;
  }
}


/* --------------- Page intérieure --------------- */

.page-hero {
  padding: 1.4rem 0 0.7rem;
}

.page-hero-title {
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.page-main {
  padding-bottom: 1.5rem;
}

.page-panel {
  background: radial-gradient(circle at top left, #111827, var(--gpge-panel));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148,163,184,0.4);
  box-shadow: var(--shadow-soft);
  padding: 1rem;
  overflow-x: auto;
}

/* --------------- Responsive --------------- */

@media (min-width: 640px) {
  .hero-inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 2.5rem;
  }

  .hero-logo-wrap {
    justify-content: flex-end;
    display: flex;
  }
}

@media (min-width: 768px) {
  .nav-toggle-label {
    display: none;
  }

  .site-nav {
    position: static;
    transform: none;
    background: transparent;
    border-bottom: none;
  }

  .site-nav ul {
    padding: 0;
    flex-direction: row;
    gap: 1.2rem;
  }

  .site-nav a {
    font-size: 0.88rem;
    padding: 0.2rem 0;
  }

  .hero {
    padding-top: 1.75rem;
    padding-bottom: 2rem;
  }

  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-grid--wide {
    grid-template-columns: 2fr 1.4fr;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 2.7rem;
  }

  .section {
    padding-bottom: 2rem;
  }
}

/* === Gagnants : version compacte === */

.card-winner-inline {
  margin-top: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.card--red .card-winner-inline {
  background: rgba(127, 17, 17, 0.9);
}

.card--navy .card-winner-inline {
  background: rgba(15, 23, 42, 0.95);
}

.card--gold .card-winner-inline {
  background: rgba(76, 46, 10, 0.95);
}

.card--silver .card-winner-inline {
  background: rgba(30, 41, 59, 0.95);
}

/* Enlever les puces dans les cartes GPGE */
.card ul,
.card li {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.winner-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gpge-muted);
  margin-bottom: 0.2rem;
}

.winner-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.winner-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(148, 163, 184, 0.9);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}

.winner-text {
  display: flex;
  flex-direction: column;
}

.winner-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.winner-meta {
  font-size: 0.75rem;
  color: var(--gpge-muted);
}

.card-links {
  margin: 0.5rem 0;
}

.card-links li {
  margin: 0.2rem 0;
}

@media (max-width: 768px) {
  .hero-logo-wrap {
    display: none !important;
  }
}

/* =========================
   Haut de page GPGE
   ========================= */

.participants-hero {
  background:
    radial-gradient(circle at top left, rgba(255, 184, 28, 0.16), transparent 55%),
    radial-gradient(circle at bottom right, rgba(213, 10, 10, 0.18), transparent 55%),
    var(--gpge-panel);
  border-bottom: 1px solid rgba(15, 23, 42, 0.9);
  padding: 1.75rem 1.25rem 1.5rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
}

.participants-hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem;
  color: var(--gpge-text);
}

.section-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gpge-silver);
  margin: 0 0 0.15rem;
}

.participants-hero h1 {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin: 0 0 0.35rem;
}

.section-lead {
  margin: 0;
  max-width: 40rem;
  font-size: 0.95rem;
  color: var(--gpge-muted);
}

.participants-stats {
  display: flex;
  align-items: flex-end;
}

.participants-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.9rem;
  background: var(--gpge-red);   /* Rouge GPGE */
  color: #ffffff;
  font-weight: 600;

  /* Enlève l'effet “bouton pill” */
  border: none;
  border-radius: 0.5rem;         /* Moins rond → moins “bouton” */
  box-shadow: none;
}

/* Haut de page GPGE - Section principale */

.participants-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  color: var(--gpge-text);
}

.participants-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: flex-end;
  margin-bottom: 1.75rem;
}

.participants-header h2 {
  margin: 0;
  font-size: 1.3rem;
}

.participants-header p {
  margin: 0;
  max-width: 36rem;
  font-size: 0.95rem;
  color: var(--gpge-muted);
}

/* =========================
   Participants — Grille & Cartes (PUNCH)
   (remplace les anciens blocs .participants-grid / .participant-card / .participant-photo img / meta)
   ========================= */

/* Grille */
.participants-grid{
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 980px){
  .participants-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px){
  .participants-grid{
    grid-template-columns: 1fr;
  }
}

/* Carte */
.participant-card{
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr; /* adapte au format photo actuel */
  gap: .95rem;
  padding: 1rem;
  border-radius: 1.1rem;
  background: var(--gpge-panel);
  border: 1px solid rgba(148, 163, 184, 0.30);
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

/* Accent rouge GPGE */
.participant-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background: rgba(213, 10, 10, 0.95);
  opacity:.75;
}

.participant-card:hover{
  transform: translateY(-3px);
  border-color: rgba(213, 10, 10, 0.35);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* Photo (cadre premium) */
.participant-photo{
  width: 96px;
  aspect-ratio: 3 / 4;
  border-radius: .9rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(2,6,23,.25);
}

.participant-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

/* Texte */
.participant-info{
  min-width: 0;
}

.participant-name{
  margin: 0 0 .4rem 0;
  line-height: 1.15;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: .2px;
}

.participant-meta{
  margin: .25rem 0;
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  font-size: .9rem;
}


/* Mobile et petites largeurs */
@media (max-width: 720px) {

  .participants-hero {
    padding-inline: 1rem;
  }

  .participants-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .participants-stats {
    align-self: flex-start;
  }

  .participants-section {
    padding-inline: 1rem;
  }

  .participant-card{
    grid-template-columns: 84px 1fr;
  }

  .participant-photo{
    width: 84px;
  }
}

/* Très petits écrans */
@media (max-width: 480px) {
  .participants-grid {
    grid-template-columns: 1fr;
  }
}



/* =========================
   Page Règlements GPGE
   ========================= */

.rules-section {
  /* profite déjà de .participants-section pour le max-width et les paddings */
}

.rules-block {
  background: var(--gpge-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.rules-block h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.rules-block h3 {
  margin-top: 1.3rem;
  margin-bottom: 0.4rem;
  font-size: 1.02rem;
}

.rules-block p {
  margin: 0.3rem 0;
}

.rules-block ul,
.rules-block ol {
  margin: 0.3rem 0 0.75rem;
  padding-left: 1.2rem;
}

/* Petits rappels visuels pour les anciennes classes déjà utilisées dans le texte */

.rules-block .surnom {
  color: var(--gpge-gold);
  font-weight: 600;
}

.rules-block .gras_noir {
  font-weight: 700;
}

.rules-block .equipe_visiteur {
  margin-top: 0.75rem;
  font-style: italic;
}

/* Liens texte GPGE — version AAA */


/* Hover doré seulement pour les boutons */
.gpge-main .button:hover,
.gpge-main .button:focus-visible {
  color: #ffe08a;
  text-decoration-thickness: 3px;
}


/* ====== Séries éliminatoires / Super Bowl ====== */

/* Image dans la colonne de gauche */
.hero-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.hero-illustration .image-responsive {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: var(--shadow-soft, 0 12px 30px rgba(0,0,0,0.35));
}

/* Petit séparateur avant le gros tableau */
.section-divider {
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
  margin: 2.5rem 0 1.5rem;
}

/* Bloc barème des points – version compacte pour les pages avec .page-panel (ex: séries) */
.page-panel .rules-block {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.page-panel .rules-block h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.page-panel .rules-block ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
}

/* ===== Barème des points : disposition horizontale ===== */

/* Mobile : liste normale (une colonne) */
.rules-block--scoring .rules-points-list {
  list-style: none;
  padding-left: 0; /* on enlève le retrait des puces */
}

/* Tablette : 2 colonnes */
@media (min-width: 768px) {
  .rules-block--scoring .rules-points-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 0.35rem;
    margin-top: 0.6rem;
  }

  .rules-block--scoring .rules-points-list li {
    margin: 0;              /* on enlève le spacing vertical inutile */
  }
}

/* Grand écran : 3 colonnes (hauteur encore plus réduite) */
@media (min-width: 1024px) {
  .rules-block--scoring .rules-points-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Navigation entre rondes (pastilles) */
.pill-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.pill-label {
  font-weight: 600;
  color: var(--gpge-muted);
  margin-right: 0.25rem;
}

.pill-link,
.pill-current {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.pill-link {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.4);
  color: var(--gpge-text);
  text-decoration: none;
}

.pill-link:hover {
  background: rgba(30, 64, 175, 0.85);
  border-color: rgba(129, 140, 248, 0.8);
}

.pill-current {
  background: var(--gpge-gold);
  color: #020617;
  font-weight: 600;
}

.pill-sep {
  color: var(--gpge-muted);
}

/* Table des prédictions Super Bowl */
.sb-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.sb-matrix td {
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(15, 23, 42, 0.9);
  vertical-align: middle;
}

/* On s'assure que les logos ne cassent pas tout */
.sb-matrix img {
  max-width: 64px;
  height: auto;
}

/* Anciennes classes réutilisées pour la refonte */
.sb-matrix .gras_blanc {
  font-weight: 600;
  color: #ffffff;
}

.sb-matrix .gris {
  color: #e5e7eb;
}

.sb-matrix .jaunevert {
  font-weight: 600;
  color: var(--gpge-gold);
}

.sb-matrix .Style61 {
  font-size: 0.9rem;
}

/* =========================
   TABLEAUX GPGE MODERNES
   ========================= */

/* Base commune à tous les tableaux GPGE */
.gpge-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(15, 23, 42, 0.96);
  color: var(--gpge-text);
  font-size: 0.9rem;
}

/* Bordures de toutes les cellules (grille continue) */
.gpge-table th,
.gpge-table td {
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* En-tête rouge dégradé avec bordures complètes */
.gpge-table thead th {
  padding: 0.55rem 0.75rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  white-space: nowrap;

  background: linear-gradient(to bottom, #d50a0a, #7f0000);
  color: #f9fafb;

  /* Bordures identiques à celles du tbody */
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  border-bottom: 1px solid rgba(148, 163, 184, 0.6);
  border-left: 1px solid rgba(148, 163, 184, 0.35);
  border-right: 1px solid rgba(148, 163, 184, 0.35);
}


/* Rang = col. 1 centré, Noms = col. 2 à gauche */
.gpge-table thead th:first-child,
.gpge-table tbody td:first-child {
  text-align: center;
  width: 4rem;
}

.gpge-table thead th:nth-child(2),
.gpge-table tbody td:nth-child(2) {
  text-align: left;
}

/* Les autres colonnes centrées (points, semaines, etc.) */
.gpge-table tbody td:not(:first-child):not(:nth-child(2)) {
  text-align: center;
}

/* Lignes alternées */
.gpge-table tbody tr:nth-child(odd) {
  background: rgba(15, 23, 42, 0.98);
}

.gpge-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.92);
}

.gpge-table tbody td {
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
}

/* Version compacte pour certains tableaux (ex.: cumulatifs) */
.gpge-table--compact thead th,
.gpge-table--compact tbody td {
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}

/* Alignement numérique pratique */
.gpge-table td.num {
  text-align: right;
  white-space: nowrap;
}

/* Un peu plus compact sur petit écran */
@media (max-width: 640px) {
  .gpge-table {
    font-size: 0.8rem;
  }

  .gpge-table thead th {
    font-size: 0.72rem;
    padding: 0.45rem 0.55rem;
  }

  .gpge-table tbody td {
    padding: 0.35rem 0.55rem;
  }
}

/* =============== VARIANTES SPÉCIFIQUES =============== */

/* Table de séries 2025 : largeur minimale + petits paddings */
.gpge-table--series-2025 {
  width: 100%;
  min-width: 860px;     /* au lieu de 960 */
  table-layout: fixed;  /* important */
}

.gpge-table--series-2025 th,
.gpge-table--series-2025 td {
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
}

/* Autoriser la compaction des en-têtes (sinon le nowrap global gagne) */
.gpge-table--series-2025 thead th {
  white-space: normal;
}

/* ==========================================================
   SÉRIES 2025 — COMPACTION + LOOK MODERNE
   ========================================================== */

/* En-têtes empilés */
.gpge-table--series-2025 thead th.th-stack {
  padding: 0.4rem 0.3rem;
}

.gpge-table--series-2025 .gpge-th-main,
.gpge-table--series-2025 .gpge-th-sub {
  display: block;
  text-align: center;
}

.gpge-table--series-2025 .gpge-th-main {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.gpge-table--series-2025 .gpge-th-sub {
  font-size: 0.68rem;
  opacity: 0.95;
}

/* Largeurs contrôlées */
.gpge-table--series-2025 thead th:first-child,
.gpge-table--series-2025 tbody td:first-child {
  width: 3.4rem;
}

.gpge-table--series-2025 thead th:nth-child(2),
.gpge-table--series-2025 tbody td:nth-child(2) {
  width: 12.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gpge-table--series-2025 thead th:nth-child(n+3),
.gpge-table--series-2025 tbody td:nth-child(n+3) {
  width: 2.8rem;
}

/* Sticky header */
.gpge-table--series-2025 thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Sticky colonnes Rang + Noms */
.gpge-table--series-2025 thead th:first-child,
.gpge-table--series-2025 tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 6;
  background: rgba(15, 23, 42, 0.98);
}

.gpge-table--series-2025 thead th:nth-child(2),
.gpge-table--series-2025 tbody td:nth-child(2) {
  position: sticky;
  left: 3.4rem;
  z-index: 6;
  background: rgba(15, 23, 42, 0.98);
}

/* Noms : largeur plus courte, responsive, avec ellipsis */
.gpge-table--series-2025 thead th:nth-child(2),
.gpge-table--series-2025 tbody td:nth-child(2) {
  width: clamp(9rem, 16vw, 10rem); /* ajuste au besoin */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* IMPORTANT: si tu as le sticky Noms, garde le left synchronisé avec la col Rang */
.gpge-table--series-2025 thead th:nth-child(2),
.gpge-table--series-2025 tbody td:nth-child(2) {
  left: 3.4rem; /* doit matcher la largeur de la col 1 */
}

/* ===== Fix colonne TOTAL qui casse ===== */
table.gpge-table.gpge-table--series-2025 thead th:last-child{
  white-space: nowrap !important;  /* empêche TOTAL de se couper */
  word-break: normal !important;
  overflow-wrap: normal !important;
  font-size: 0.74rem;              /* un poil plus petit si nécessaire */
  letter-spacing: 0.06em;
}

/* Donne un peu plus de largeur à TOTAL */
table.gpge-table.gpge-table--series-2025 thead th:last-child,
table.gpge-table.gpge-table--series-2025 tbody td:last-child{
  width: 4.2rem !important;        /* ajuste: 4.0 à 4.6rem */
}

/* ===== FIX bleed-through mobile (sticky + scroll) ===== */

/* Rang + Noms : fond 100 % opaque */
.gpge-table--series-2025 tbody td:first-child,
.gpge-table--series-2025 tbody td:nth-child(2),
.gpge-table--series-2025 thead th:first-child,
.gpge-table--series-2025 thead th:nth-child(2) {
  background-color: #0f172a !important; /* couleur pleine, PAS rgba */
}

.gpge-table--series-2025 td,
.gpge-table--series-2025 th {
  background-clip: padding-box;
}

@media (max-width: 768px) {
  .gpge-table--series-2025 th,
  .gpge-table--series-2025 td {
    border: none !important;
  }
}

@media (max-width: 768px) {
  .gpge-table--series-2025 th,
  .gpge-table--series-2025 td {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  }
}

@media (max-width: 768px) {
  .gpge-table--series-2025 tr.day-row td {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  }
}

/* ==========================================================
   HEBDO 2024 — même style que Séries (compact + moderne)
   ========================================================== */
/* Table hebdo 2024 */
.gpge-table--hebdo-2024 {
  width: 100%;
  min-width: 960px;
}

.gpge-table--hebdo-2024 th,
.gpge-table--hebdo-2024 td {
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
}


table.gpge-table.gpge-table--hebdo-2024{
  width: 100%;
  min-width: 980px;             /* Hebdo a 21 colonnes: on garde un peu plus large */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

/* Header sticky */
table.gpge-table.gpge-table--hebdo-2024 thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  white-space: nowrap;          /* #1, #2… restent sur une ligne */
}

/* Sticky Rang */
table.gpge-table.gpge-table--hebdo-2024 thead th:first-child,
table.gpge-table.gpge-table--hebdo-2024 tbody td:first-child{
  position: sticky;
  left: 0;
  z-index: 6;
  background: rgba(15, 23, 42, 0.98);
  width: 3.8rem;
}

/* Sticky Noms */
table.gpge-table.gpge-table--hebdo-2024 thead th:nth-child(2),
table.gpge-table.gpge-table--hebdo-2024 tbody td:nth-child(2){
  position: sticky;
  left: 3.8rem;                 /* doit matcher la largeur Rang */
  z-index: 6;
  background: rgba(15, 23, 42, 0.98);
  width: clamp(10rem, 18vw, 12rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Colonnes semaines compactes (#1 à #18) */
table.gpge-table.gpge-table--hebdo-2024 thead th:nth-child(n+3):nth-child(-n+20),
table.gpge-table.gpge-table--hebdo-2024 tbody td:nth-child(n+3):nth-child(-n+20){
  width: 2.6rem;
  text-align: center;
}

/* Total (dernière colonne) */
table.gpge-table.gpge-table--hebdo-2024 thead th:last-child,
table.gpge-table.gpge-table--hebdo-2024 tbody td:last-child{
  width: 4.2rem;
  font-weight: 800;
}

/* Hover ligne */
table.gpge-table.gpge-table--hebdo-2024 tbody tr:hover td{
  background: rgba(148, 163, 184, 0.08);
}

/* Top 1-2-3 (col Rang) — force par-dessus sticky */
table.gpge-table.gpge-table--hebdo-2024 tbody td:first-child.is-season-winner{
  background: rgba(234, 179, 8, 0.28) !important;
  border: 1px solid rgba(234, 179, 8, 0.75) !important;
}
table.gpge-table.gpge-table--hebdo-2024 tbody td:first-child.is-season-second{
  background: rgba(148, 163, 184, 0.22) !important;
  border: 1px solid rgba(148, 163, 184, 0.70) !important;
}
table.gpge-table.gpge-table--hebdo-2024 tbody td:first-child.is-season-third{
  background: rgba(249, 115, 22, 0.22) !important;
  border: 1px solid rgba(249, 115, 22, 0.70) !important;
}

/* =========================================================
   ARCHIVES — Saisons antérieures (anterieures.php)
   ========================================================= */

/* Wrapper scroll horizontal propre (au lieu de min-width forcé partout) */
.table-wrapper{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.9rem;
}

/* Optionnel: léger cadre autour du bloc scrollable */
.table-wrapper .gpge-table{
  margin: 0;
}

/* Accordéon par saison */
.gpge-season{
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 1rem;
  background: rgba(15,23,42,.55);
  margin: 1rem 0;
  overflow: hidden;
}

.gpge-season > summary{
  cursor: pointer;
  list-style: none;
  padding: .9rem 1rem;
  font-weight: 700;
  color: #f8fafc;
  background: linear-gradient(to bottom, rgba(213,10,10,.95), rgba(127,0,0,.95));
  border-bottom: 1px solid rgba(148,163,184,.22);
}

.gpge-season > summary::-webkit-details-marker{ display: none; }

.gpge-season[open] > summary{
  border-bottom-color: rgba(148,163,184,.35);
}

.gpge-season .gpge-season-body{
  padding: 1rem;
}

/* Variante : archive “Rang / Noms / Total / %” */
.gpge-table--archive thead th{
  white-space: nowrap;
}
.gpge-table--archive tbody td:nth-child(1),
.gpge-table--archive tbody td:nth-child(3),
.gpge-table--archive tbody td:nth-child(4){
  text-align: center;
  white-space: nowrap;
}
.gpge-table--archive tbody td:nth-child(2){
  text-align: left;
}

/* Ancien span “surnom” dans tes archives : garder lisible */
.gpge-table .surnom{
  color: var(--gpge-gold);
  font-weight: 700;
  white-space: nowrap;
}

/* Formulaire de séries : réutilise .gpge-table mais avec typo un peu plus petite */
.gpge-form-table {
  font-size: 0.88rem;
}

.gpge-form-table thead th {
  text-align: center;
}

.gpge-form-table th:first-child,
.gpge-form-table td:first-child {
  width: 3rem;
  text-align: center;
}

/* Ligne de séparation par journée */
.playoff-form-round td {
  background: rgba(15, 23, 42, 0.98);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--gpge-gold);
}

/* Cellules Score / Total plus lisibles */
.score-cell,
.total-cell {
  white-space: nowrap;
}

.score-cell input,
.total-cell input {
  width: 2.5rem;
  text-align: center;
}

.score-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 0.25rem;
  color: var(--gpge-muted);
}

.score-sep {
  margin: 0 0.25rem;
}

/* Pied de formulaire */
.playoff-form-footer {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.playoff-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Un peu plus compact sur mobile pour le formulaire */
@media (max-width: 640px) {
  .gpge-form-table {
    font-size: 0.8rem;
  }

  .score-cell input,
  .total-cell input {
    width: 2.2rem;
  }

  .playoff-form-footer {
    margin-top: 1.25rem;
  }
}

/* =========================
   Formulaire séries GPGE
   ========================= */

.playoff-form {
  margin-top: 1rem;
}

/* On réutilise la base .gpge-table mais on adapte un peu */
.gpge-form-table {
  font-size: 0.88rem;
}

.gpge-form-table thead th {
  text-align: center;
}

.gpge-form-table th:first-child,
.gpge-form-table td:first-child {
  width: 3rem;
  text-align: center;
}



/* Ligne de séparation par journée */
.playoff-form-round td {
  background: rgba(15, 23, 42, 0.98);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--gpge-gold);
}

/* Cellules Score / Total plus lisibles */
.score-cell,
.total-cell {
  white-space: nowrap;
}

.score-cell input,
.total-cell input {
  width: 2.5rem;
  text-align: center;
}

.score-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 0.25rem;
  color: var(--gpge-muted);
}

.score-sep {
  margin: 0 0.25rem;
}

/* Pied de formulaire */
.playoff-form-footer {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Style de base du select (ta version) */
.playoff-form-participant select {
  margin-top: 0.3rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: var(--gpge-gold);   /* OR par défaut */
  color: #000;
  font-weight: 600;
  transition: 0.2s ease;
}

/* Quand une option est sélectionnée → bouton vert */
.playoff-form-participant select.selected {
  background: #3ccf4e;  /* même vert que le TOTAL */
  border-color: #2aa73a;
  color: #000;
}


.playoff-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Un peu plus compact sur mobile */
@media (max-width: 640px) {
  .gpge-form-table {
    font-size: 0.8rem;
  }

  .score-cell input,
  .total-cell input {
    width: 2.2rem;
  }

  .playoff-form-footer {
    margin-top: 1.25rem;
  }
}

/* Coloration automatique du total dans le formulaire séries */
.playoff-total-ok {
  background: rgba(34, 197, 94, 0.35); /* vert plus lumineux */
  border: 2px solid #4ade80 !important; /* vert lime vif */
  color: #ffffff !important; /* texte blanc */
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Honeypot anti-robots (champ caché) */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hp input {
  position: absolute;
  left: -9999px;
}

.page-hero .section-lead {
  max-width: none;
}

/* =========================
   Sous-navigation classements & blocs
   ========================= */

.gpge-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.gpge-subnav-link {
  font-size: 0.9rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--gpge-muted);
  text-decoration: none;
}

.gpge-subnav-link:hover,
.gpge-subnav-link:focus-visible {
  border-color: rgba(148, 163, 184, 0.7);
  color: var(--gpge-text);
}

.gpge-subnav-link--active {
  background: var(--gpge-red);
  border-color: var(--gpge-red);
  color: #ffffff;
}

/* Sous-menu classements : version mobile */
@media (max-width: 640px) {
  .gpge-subnav {
    flex-direction: column;      /* empile les liens */
    align-items: stretch;
    gap: 0.4rem;
    border-radius: 1rem;         /* moins “œuf” sur mobile */
  }

  .gpge-subnav-link,
  .gpge-subnav-link--active {
    display: block;
    text-align: center;
    width: 100%;                 /* chaque lien prend toute la largeur */
  }
}

/* Blocs de section pour les pages de classements */

.gpge-section-block {
  margin-top: 1.75rem;
}

.gpge-section-block:first-of-type {
  margin-top: 1.25rem;
}

.section-intro {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  color: var(--gpge-muted);
}

.panel-note {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--gpge-muted);
  font-style: italic;
}

/* =========================
   Variantes de tableaux & légende
   ========================= */

/* Version compacte des tableaux (ex.: cumulatifs) */
.gpge-table--compact thead th,
.gpge-table--compact tbody td {
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}

/* Alignement numérique pratique */
.gpge-table td.num {
  text-align: right;
  white-space: nowrap;
}

/* Surlignages logiques pour les cumulatifs – version plus contrastée */
.cell-total {
  background: #fbbf24;                       /* or doré franc */
  color: #111827;                             /* texte foncé pour le contraste */
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #f59e0b;       /* léger cadre doré */
}

.cell-best {
  background: #16a34a;                       /* vert bien visible */
  color: #ecfdf5;                             /* texte très clair */
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #22c55e;       /* léger cadre vert */
}

/* Ancien·nes participants – plus doux, sans nuire aux autres cellules */
.row-legacy {
  background: rgba(148, 163, 184, 0.15);
  color: var(--gpge-text);
  opacity: 1;
}


/* Légende des tableaux */
.table-legend {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--gpge-muted);
}

.legend-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.legend-list li {
  display: inline-flex;
  align-items: center;
}

.legend-swatch {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  margin-right: 0.35rem;
}

.legend-swatch-total {
  background: rgba(255, 184, 28, 0.6);
}

.legend-swatch-best {
  background: rgba(48, 231, 131, 0.7);
}

.legend-swatch-legacy {
  background: rgba(148, 163, 184, 0.5);
}

/* Wrapper commun pour tous les gros tableaux (GPGE & SB) */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/* =========================
   Liens AAA à l'intérieur des cartes GPGE
   ========================= */

.card a:not(.button) {
  color: #7BC2FF !important;   /* bleu clair AAA */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 500;
}

.card a:not(.button):hover,
.card a:not(.button):focus-visible {
  color: #A8D8FF !important;   /* encore AAA et contrasté */
}

/* =========================
   Liens texte AAA dans le contenu
   (dans <main>, hors boutons)
   ========================= */

main a:not(.button) {
  color: #7BC2FF !important;  /* bleu clair très lisible sur fond GPGE */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 500;
}

main a:not(.button):hover,
main a:not(.button):focus-visible {
  color: #A8D8FF !important;  /* encore plus clair au survol, contraste conservé */
}

/* =========================
   Puces dorées verticales dans les blocs de règlements
   ========================= */

.rules-block ul {
  list-style: none;
  margin: 0 0 0.9rem 0;
  padding: 0;
}

.rules-block ul li {
  position: relative;
  padding-left: 1.1rem;   /* espace entre la barre et le texte */
  margin: 0.15rem 0;
}

/* Petite barre verticale dorée, style NFL */
.rules-block ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 3px;
  height: 0.9em;
  border-radius: 999px;
  background: var(--gpge-gold);
}

/* === Empiler les boutons pour certains blocs d'actions === */
.card-actions--stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-actions--stack .button {
  width: 100%;
  justify-content: center;
  margin: 0;              /* on enlève le petit margin horizontal */
}

/* =========================
   Sous-navigation GPGE — Actif gold + boutons gris
   ========================= */

.gpge-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* --- Liens cliquables : boutons GRIS NFL --- */
.gpge-subnav a.gpge-subnav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: #4B5563;                 /* gris NFL */
  border: 1px solid #4B5563;
  color: #ffffff !important;           /* texte blanc */
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .18s ease;
}

/* Hover / rollover gris plus clair */
.gpge-subnav a.gpge-subnav-link:hover,
.gpge-subnav a.gpge-subnav-link:focus-visible {
  background: #6B7280;                 /* gris clair */
  border-color: #6B7280;
  box-shadow: 0 6px 16px rgba(107, 114, 128, 0.35);
  transform: translateY(-1px);
}

/* --- Élément actif : flèche gold, pas un bouton --- */
.gpge-subnav-link--active {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gpge-silver) !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding-left: 0.2rem;
  background: transparent !important;
  border: none !important;
  cursor: default;
  position: relative;
}

/* Flèche dorée ➜ */
.gpge-subnav-link--active::before {
  content: "🏈";
  font-weight: 700;
  font-size: 1rem;
  color: var(--gpge-gold);
  position: relative;
  top: 0.5px;
}

/* --- CSS Tableau des séries--- */

.sb-team-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
}

@media (max-width: 900px) {
  .sb-team-cards {
    grid-template-columns: 1fr;
  }
}

.sb-team-card {
  border-radius: 1rem;
  padding: 1.1rem 1.3rem 1.25rem;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}


/* =====================================================
   COULEURS PAR ÉQUIPE — FOND UNI (NFL OFFICIEL APPROX.)
   ===================================================== */

/* ===== AFC OUEST ===== */

.sb-team-card--broncos {
  background-color: #002244;   /* bleu Broncos */
  border-color: #FB4F14;       /* orange */
}

.sb-team-card--raiders {
  background-color: #000000;   /* noir Raiders */
  border-color: #A5ACAF;       /* argent */
}

.sb-team-card--chargers {
 background-color: #0080C6;   /* Bolt Blue (2020 branding) */
  border-color: #FFC20E;       /* Sunshine Gold */
}

.sb-team-card--chiefs {
  background-color: #E31837;   /* rouge Chiefs */
  border-color: #FFB81C;       /* or */
}


/* ===== AFC NORD ===== */

.sb-team-card--ravens {
  background-color: #241773;   /* violet Ravens */
  border-color: #9E7C0C;       /* or */
}

.sb-team-card--bengals {
  background-color: #000000;   /* noir Bengals */
  border-color: #FB4F14;       /* orange */
}

.sb-team-card--browns {
  background-color: #311D00;   /* brun Browns */
  border-color: #FF3C00;       /* orange */
}

.sb-team-card--steelers {
  background-color: #101820;   /* noir Steelers */
  border-color: #FFB612;       /* jaune */
}


/* ===== AFC SUD ===== */

.sb-team-card--texans {
  background-color: #03202F;   /* bleu pétrole Texans */
  border-color: #A71930;       /* rouge */
}

.sb-team-card--colts {
  background-color: #003A70;   /* bleu Colts */
  border-color: #FFFFFF;       /* blanc */
}

.sb-team-card--jaguars {
  background-color: #006778;   /* teal Jags */
  border-color: #D7A22A;       /* or */
}

.sb-team-card--titans {
  background-color: #0C2340;   /* bleu foncé Titans */
  border-color: #4B92DB;       /* bleu clair */
}


/* ===== AFC EST ===== */

.sb-team-card--bills {
  background-color: #00338D;   /* bleu Bills */
  border-color: #C60C30;       /* rouge */
}

.sb-team-card--dolphins {
  background-color: #008E97;   /* aqua Dolphins */
  border-color: #FC4C02;       /* orange */
}

.sb-team-card--patriots {
  background-color: #002244;   /* bleu Pats */
  border-color: #C60C30;       /* rouge */
}

.sb-team-card--jets {
  background-color: #125740;   /* vert Jets */
  border-color: #FFFFFF;       /* blanc */
}


/* ===== NFC EST ===== */

.sb-team-card--cowboys {
  background-color: #041E42;   /* bleu Cowboys */
  border-color: #869397;       /* argent */
}

.sb-team-card--giants {
  background-color: #0B2265;   /* bleu Giants */
  border-color: #A71930;       /* rouge */
}

.sb-team-card--eagles {
  background-color: #004C54;   /* vert Eagles */
  border-color: #A5ACAF;       /* argent */
}

.sb-team-card--commanders {
  background-color: #5A1414;   /* bourgogne Commanders */
  border-color: #FFB612;       /* or */
}


/* ===== NFC NORD ===== */

.sb-team-card--bears {
  background-color: #0B162A;   /* bleu Bears */
  border-color: #C83803;       /* orange */
}

.sb-team-card--lions {
  background-color: #0076B6;   /* bleu Lions */
  border-color: #B0B7BC;       /* argent */
}

.sb-team-card--packers {
  background-color: #203731;   /* vert Packers */
  border-color: #FFB612;       /* jaune */
}

.sb-team-card--vikings {
  background-color: #4F2683;   /* violet Vikings */
  border-color: #FFC62F;       /* or */
}


/* ===== NFC SUD ===== */

.sb-team-card--falcons {
  background-color: #A71930;   /* rouge Falcons */
  border-color: #000000;       /* noir */
}

.sb-team-card--panthers {
  background-color: #0085CA;   /* bleu Panthers */
  border-color: #000000;       /* noir */
}

.sb-team-card--saints {
  background-color: #101820;   /* noir Saints */
  border-color: #D3BC8D;       /* or pâle */
}

.sb-team-card--buccaneers {
  background-color: #D50A0A;   /* rouge Bucs */
  border-color: #FF7900;       /* orange */
}


/* ===== NFC OUEST ===== */

.sb-team-card--cardinals {
  background-color: #97233F;   /* rouge Cards */
  border-color: #000000;       /* noir */
}

.sb-team-card--rams {
  background-color: #003594;   /* bleu Rams */
  border-color: #FFA300;       /* jaune */
}

.sb-team-card--niners {
  background-color: #AA0000;   /* rouge 49ers */
  border-color: #B3995D;       /* or */
}

.sb-team-card--seahawks {
  background-color: #002244;   /* bleu Hawks */
  border-color: #69BE28;       /* vert fluo */
}

/* Conteneur global des affrontements */
.sb-matchups {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Un affrontement (ex. Chargers vs Jaguars) */
.sb-matchup {
  padding-top: 1rem;
  border-top: 1px solid rgba(248, 250, 252, 0.12);
}

/* Titre au-dessus des deux cartes */
.sb-matchup-title {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(226, 232, 240, 0.85);
}

/* Ligne avec les 2 cartes d’équipes */
.sb-matchup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

/* Sur écrans plus larges, on met les deux cartes côte à côte */
@media (min-width: 900px) {
  .sb-matchup-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Bloc barème des points – version "scoreboard" */

.rules-block--scoring {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.rules-block--scoring h3 {
  margin-bottom: 0.35rem;
}

.rules-block--scoring p {
  margin: 0;
}

/* Mise en avant du 5 points de base */
.rules-main-points {
  font-weight: 700;
  color: #facc15; /* or/gold GPGE */
}

/* Pilule principale "Victoire" */
.rules-main-pill {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(250, 204, 21, 0.7);
  font-size: 0.85rem;
}

.rules-main-pill-points {
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: #facc15;
  color: #111827;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Liste des bonis */

.rules-points-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rules-points-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Jeton de points à gauche */
.rules-points-badge {
  min-width: 3.2rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #e5e7eb;
}

/* Légère mise en avant du +10 */
.rules-points-badge--top {
  background: linear-gradient(135deg, #f97316, #facc15);
  color: #111827;
  border-color: transparent;
}

.rules-points-text {
  font-size: 0.9rem;
}

/* Base pour pouvoir colorer la barre par item */
.rules-block--scoring .rules-points-item {
  position: relative;
}

/* Si ta barre jaune est un ::before global sur la liste ou sur les li, 
   on la surcharge ici, par item */
.rules-block--scoring .rules-points-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 70%;
  border-radius: 999px;
}

/* === +10 : score parfait === */
.rules-block--scoring .rules-points-item--perfect::before {
  background-color: var(--gpge-bonus-perfect) !important;
}
.rules-block--scoring .rules-points-badge--perfect {
  background-color: var(--gpge-bonus-perfect) !important;
  border-color: var(--gpge-bonus-perfect) !important;
}

/* === +5 : total des points exact === */
.rules-block--scoring .rules-points-item--total::before {
  background-color: var(--gpge-bonus-total) !important;
}
.rules-block--scoring .rules-points-badge--total {
  background-color: var(--gpge-bonus-total) !important;
  border-color: var(--gpge-bonus-total) !important;
}

/* === +4 : 1 point de différence === */
.rules-block--scoring .rules-points-item--diff1::before {
  background-color: var(--gpge-bonus-diff1) !important;
}
.rules-block--scoring .rules-points-badge--diff1 {
  background-color: var(--gpge-bonus-diff1) !important;
  border-color: var(--gpge-bonus-diff1) !important;
}

/* === +3 : 2 ou 3 points de différence === */
.rules-block--scoring .rules-points-item--diff2_3::before {
  background-color: var(--gpge-bonus-diff2_3) !important;
}
.rules-block--scoring .rules-points-badge--diff2_3 {
  background-color: var(--gpge-bonus-diff2_3) !important;
  border-color: var(--gpge-bonus-diff2_3) !important;
}

/* === +2 : 4, 5 ou 6 points de différence === */
.rules-block--scoring .rules-points-item--diff4_6::before {
  background-color: var(--gpge-bonus-diff4_6) !important;
}
.rules-block--scoring .rules-points-badge--diff4_6 {
  background-color: var(--gpge-bonus-diff4_6) !important;
  border-color: var(--gpge-bonus-diff4_6) !important;
}

/* === +1 : 7, 8 ou 9 points de différence === */
.rules-block--scoring .rules-points-item--diff7_9::before {
  background-color: var(--gpge-bonus-diff7_9) !important;
}
.rules-block--scoring .rules-points-badge--diff7_9 {
  background-color: var(--gpge-bonus-diff7_9) !important;
  border-color: var(--gpge-bonus-diff7_9) !important;
}

/* Responsive : un peu plus compact sur mobile */
@media (max-width: 600px) {
  .rules-main-pill {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }

  .rules-points-text {
    font-size: 0.85rem;
  }
}


/* Assurer la lisibilité du texte sur ces fonds */
.sb-team-card[class*="sb-team-card--"] {
  color: #ffffff;
}
.sb-team-card[class*="sb-team-card--"] .sb-team-card-name,
.sb-team-card[class*="sb-team-card--"] .sb-team-card-scoreline {
  color: #ffffff;
}


/* Optionnel : garantir le texte blanc sur toutes les cartes d'équipe */
.sb-team-card[class*="sb-team-card--"] {
  color: #ffffff;
}
.sb-team-card[class*="sb-team-card--"] .sb-team-card-name,
.sb-team-card[class*="sb-team-card--"] .sb-team-card-scoreline {
  color: #ffffff;
}


.sb-team-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sb-team-card-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.sb-team-card-logo {
  width: 60px;
  height: auto;
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.35);
  padding: 0.2rem;
}

.sb-team-card-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sb-team-card-scoreline {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  color: rgba(226, 232, 240, 0.9);
}

.sb-team-card-score {
  font-weight: 800;
  font-size: 1rem;
}

/* Liste des prédictions */

.sb-team-card-subtitle {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(226, 232, 240, 0.9);
}

.sb-picks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sb-pick {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.88rem;
}

.sb-pick-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.35);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #f1f5f9;
  font-size: 0.78rem;
}

.sb-pick-text {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.sb-pick-bonus {
  background: rgba(16, 185, 129, 0.25);
  color: #bbf7d0;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Ajustements petits écrans */
@media (max-width: 600px) {
  .sb-team-card {
    padding: 1rem 1rem 1.1rem;
  }

  .sb-team-card-main {
    gap: 0.7rem;
  }

  .sb-team-card-logo {
    width: 50px;
  }

  .sb-pick {
    font-size: 0.8rem;
  }

  .sb-pick-id {
    min-width: 2rem;
    font-size: 0.75rem;
  }
}

/* DIZAINES : 20, 30, 40, 50, 60, 70
   → juste le chiffre, un peu plus gros, sans pill */
.sb-pick--20,
.sb-pick--30,
.sb-pick--40,
.sb-pick--50,
.sb-pick--60,
.sb-pick--70 {
  /* on annule le comportement "ligne de participant" */
  display: block;                 /* plus un flex */
  padding: 0.3rem 0 0.1rem;       /* un peu d’air au-dessus */
  margin-top: 0.7rem;             /* espace avant la nouvelle dizaine */
  margin-bottom: 0.1rem;
  font-size: 0.98rem;             /* un peu plus gros que 0.88rem */
  font-weight: 700;               /* plus costaud */
  color: #f9fafb;                 /* un blanc bien lisible */
  border-top: 1px solid rgba(15, 23, 42, 0.45); /* léger séparateur */
}

/* si tu veux éviter une ligne au tout début de la liste */
.sb-picks-list .sb-pick--20:first-child {
  border-top: none;
  margin-top: 0;
}

/* ============================================================
   SÉRIES 2025 — BLOC RÉSUMÉ + TABLEAU RESPONSIVE
   (classements/index.php)
============================================================ */

/* Wrapper général de la section séries */
.gpge-playoffs-section {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 1.5rem;
}

/* Les cartes (champion + semaines) l'une sous l'autre */

.gpge-playoffs-highlight {
  display: grid;
  gap: 1.5rem;
}

/* Sur desktop : champion plus large, cartes non étirées */
@media (min-width: 900px) {
  .gpge-playoffs-highlight {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
    align-items: flex-start;  /* 🌟 clé : on n'étire plus la carte de droite */
  }
}

  .gpge-champion-card {
    flex: 1.5;   /* ~60% de la largeur */
  }

  .gpge-week-summary-card {
    flex: 1;     /* ~40% de la largeur */
  }
}

.gpge-card-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  opacity: 0.85;
  margin: 0 0 0.15rem;
}

.gpge-card-title {
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}

/* Carte Champion + podium */
.gpge-champion-card {
  border-radius: 1rem;
  padding: 1.2rem 1.4rem;
  background: linear-gradient(135deg, var(--gpge-gold), #fff7d6);
  color: #111827;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

.gpge-champion-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0.2rem 0 0.1rem;
}

.gpge-champion-detail {
  font-size: 0.9rem;
  opacity: 0.9;
  margin: 0 0 0.7rem;
}

/* Carte "Les meilleurs de chaque semaine" — version compacte */
.gpge-week-summary-card {
  border-radius: 1rem;
  padding: 0.9rem 1.2rem; /* ↓ Réduit verticalement */
  background: radial-gradient(circle at top left,
              rgba(255, 184, 28, 0.16),
              rgba(15, 23, 42, 0.96));
  border: 1px solid rgba(255, 184, 28, 0.45);
  color: #e5e7eb;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}

/* Titre plus compact */
.gpge-week-summary-card .gpge-card-title {
  margin: 0 0 0.4rem; /* ↓ */
  font-size: 1.05rem;
}

/* Liste des semaines — réduit l'espace entre lignes */
.gpge-week-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* ↓ */
  margin: 0;
  padding: 0;
}

/* Chaque ligne est plus serrée */
.gpge-week-row {
  display: grid;
  grid-template-columns: 1.1fr 2fr auto;
  align-items: baseline;
  gap: 0.25rem; /* ↓ */
  padding: 0.1rem 0; /* ↓ */
}

/* Labels */
.gpge-week-label {
  font-size: 0.72rem;
  opacity: 0.85;
}

/* Nom du gagnant */
.gpge-week-winner {
  font-weight: 600;
  font-size: 0.88rem; /* ↓ */
}

/* Points */
.gpge-week-points {
  font-size: 0.85rem; /* ↓ */
  font-variant-numeric: tabular-nums;
}

/* Sur mobile très étroit, on empile un peu plus serré */
@media (max-width: 480px) {
  .gpge-week-row {
    grid-template-columns: 1fr;
  }
}

/* Podium dans la carte champion : mobile = vertical, desktop = côte à côte */
.gpge-podium-list {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
  display: flex;
  flex-direction: column; /* mobile : un en-dessous de l'autre */
  gap: 0.4rem;
}

.gpge-podium-list {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
  display: flex;
  flex-direction: column;  /* toujours en colonne */
  gap: 0.4rem;
}

.gpge-podium-item {
  font-size: 0.9rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.6rem;
}



.gpge-podium-item--gold {
  background: rgba(250, 204, 21, 0.18);
  border: 1px solid rgba(202, 138, 4, 0.6);
}

.gpge-podium-item--silver {
  background: rgba(148, 163, 184, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.7);
}

.gpge-podium-item--bronze {
  background: rgba(180, 83, 9, 0.18);
  border: 1px solid rgba(180, 83, 9, 0.7);
}

/* Cartes gagnants par semaine — nouvelle grille */

.gpge-weeks-grid {
  display: grid;
  grid-template-columns: 1fr;     /* Mobile : 1 carte par ligne */
  gap: 1rem;
}

/* Tablettes / petits écrans */
@media (min-width: 600px) {
  .gpge-weeks-grid {
    grid-template-columns: repeat(2, 1fr);   /* 2 cartes par ligne */
  }
}

/* Grands écrans : toujours 2 cartes */
@media (min-width: 1024px) {
  .gpge-weeks-grid {
    grid-template-columns: repeat(2, 1fr);   /* On garde 2 cartes */
  }
}

.gpge-week-card {
  border-radius: 0.9rem;
  padding: 0.8rem 0.9rem;
  background: radial-gradient(circle at top left,
              rgba(255, 184, 28, 0.16),
              rgba(15, 23, 42, 0.96));
  border: 1px solid rgba(255, 184, 28, 0.45);
  color: #e5e7eb;
}

.gpge-week-name {
  margin: 0.15rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.gpge-week-detail {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.9;
}

/* Plus d'espace entre la carte hebdo et le tableau */
.gpge-weekly-section .gpge-champion-card {
  margin-bottom: 1.75rem;
}


/* ------------------------------------------------------------
   Tableau séries 2025 : wrapper responsive
------------------------------------------------------------ */

.gpge-table-wrapper {
  overflow-x: auto;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: radial-gradient(circle at top left,
              rgba(15, 23, 42, 0.98),
              rgba(15, 23, 42, 0.93));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
}

/* Scrollbar discrète sur desktop */
.gpge-table-wrapper::-webkit-scrollbar {
  height: 8px;
}
.gpge-table-wrapper::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.85);
}
.gpge-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.95);
  border-radius: 999px;
}

/* On force un minimum de largeur pour que le scroll ait un sens */
.gpge-table--series-2025 {
  width: 100%;
  min-width: 960px;
}

.gpge-table--series-2025 th,
.gpge-table--series-2025 td {
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
}

/* ------------------------------------------------------------
   Mise en évidence des gagnants
   - par semaine
   - Top 1 / 2 / 3 au total
------------------------------------------------------------ */

/* Gagnants de semaines (colonnes Sem. #1, #2, #3, SB) */
.gpge-table--series-2025 td.is-week-winner {
  background: radial-gradient(circle at top left,
              rgba(34, 197, 94, 0.18),
              rgba(15, 23, 42, 0.95));
  font-weight: 700;
  position: relative;
}

.gpge-table--series-2025 td.is-week-winner::after {
  content: "★";
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  font-size: 0.7rem;
  opacity: 0.95;
}

/* Champion des séries (1er total) */
.gpge-table--series-2025 td.is-series-winner {
  background: linear-gradient(135deg,
              rgba(234, 179, 8, 0.55),
              rgba(251, 191, 36, 0.95));
  font-weight: 800;
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.9),
    0 0 0 4px rgba(15, 23, 42, 1);
  position: relative;
}


/* 2e place */
.gpge-table--series-2025 td.is-series-second {
  background: linear-gradient(135deg,
              rgba(148, 163, 184, 0.5),
              rgba(229, 231, 235, 0.9));
  font-weight: 700;
  border-left: 2px solid rgba(148, 163, 184, 1);
}

/* 3e place */
.gpge-table--series-2025 td.is-series-third {
  background: linear-gradient(135deg,
              rgba(180, 83, 9, 0.45),
              rgba(252, 211, 77, 0.85));
  font-weight: 700;
  border-left: 2px solid rgba(180, 83, 9, 1);
}

/* ============================================================
   Carte Champion — Style "Midnight Steel" (adapté à ton thème sombre)
============================================================ */

.gpge-champion-card {
  border-radius: 1rem;
  padding: 1.6rem 1.8rem;

  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.95) 0%,   /* gris bleuté foncé */
    rgba(51, 65, 85, 0.85) 100%  /* steel slate */
  );

  color: #f1f5f9; /* blanc gris clair, lisible mais doux */
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);

  margin-bottom: 2rem;
}

/* Kicker (Séries 2025, Saison régulière 2024…) */
.gpge-champion-card .gpge-card-kicker {
  color: #cbd5e1; /* gris clair froid */
  opacity: 1;
  letter-spacing: 1px;
  font-size: 0.78rem;
}

/* Titre */
.gpge-champion-card .gpge-card-title {
  color: #f8fafc; /* blanc léger */
  opacity: 1;
}

/* Nom du champion */
.gpge-champion-card .gpge-champion-name {
  color: #facc15; /* or pour max impact */
  font-weight: 700;
}

/* Détails */
.gpge-champion-card .gpge-champion-detail {
  color: #e2e8f0;
}

/* Podium */
.gpge-podium-item {
  color: #f1f5f9; /* même ton que le texte principal */
}

/* Cartes podium restent or / argent / bronze — parfait contraste */

/* ------------------------------------------------------------
   Colonnes mises en évidence : Sem. #1, Sem. #2, Sem. #3 et SB
   version plus contrastée + fond gris bleuté
------------------------------------------------------------ */

.gpge-table--series-2025 th:nth-child(9),
.gpge-table--series-2025 td:nth-child(9),
.gpge-table--series-2025 th:nth-child(14),
.gpge-table--series-2025 td:nth-child(14),
.gpge-table--series-2025 th:nth-child(17),
.gpge-table--series-2025 td:nth-child(17) {
  background: rgba(71, 85, 105, 0.35); /* gris bleuté contrasté */
  border-left: 1px solid rgba(148, 163, 184, 0.45);
  border-right: 1px solid rgba(148, 163, 184, 0.45);
}

/* Colonne Super Bowl (un peu plus forte) */
.gpge-table--series-2025 th:nth-child(19),
.gpge-table--series-2025 td:nth-child(19) {
  background: rgba(100, 116, 139, 0.45); /* gris bleuté plus lumineux */
  border-left: 1px solid rgba(251, 191, 36, 0.65);
  border-right: 1px solid rgba(251, 191, 36, 0.55);
}


/* ============================================================
   PRÉDICTIONS HEBDOMADAIRES — Tableau 2024
============================================================ */

.gpge-table--hebdo-2024 {
  width: 100%;
  min-width: 960px;  /* pour forcer le scroll horizontal sur mobile */
}

.gpge-table--hebdo-2024 th,
.gpge-table--hebdo-2024 td {
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
}

/* ------------------------------------------------------------
   Gagnants de la saison (Total)
   - 1er : or
   - 2e : argent
   - 3e : bronze
   Sans étoile
------------------------------------------------------------ */

/* Base commune */
.gpge-table--hebdo-2024 td.is-season-winner,
.gpge-table--hebdo-2024 td.is-season-second,
.gpge-table--hebdo-2024 td.is-season-third {
  position: relative;
  font-weight: 700;

  /* Centrage parfait vertical + horizontal */
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0.4rem 0.5rem;
}

/* Suppression de l’étoile */
.gpge-table--hebdo-2024 td.is-season-winner::before,
.gpge-table--hebdo-2024 td.is-season-second::before,
.gpge-table--hebdo-2024 td.is-season-third::before {
  content: none;
}

/* 1er : fond or */
.gpge-table--hebdo-2024 td.is-season-winner {
  background: linear-gradient(135deg,
              rgba(234, 179, 8, 0.55),
              rgba(251, 191, 36, 0.95));
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.9),
    0 0 0 3px rgba(15, 23, 42, 1);
}

/* 2e : fond argent */
.gpge-table--hebdo-2024 td.is-season-second {
  background: linear-gradient(135deg,
              rgba(148, 163, 184, 0.6),
              rgba(229, 231, 235, 0.95));
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.9),
    0 0 0 3px rgba(15, 23, 42, 1);
}

/* 3e : fond bronze */
.gpge-table--hebdo-2024 td.is-season-third {
  background: linear-gradient(135deg,
              rgba(180, 83, 9, 0.55),
              rgba(252, 211, 77, 0.95));
  box-shadow:
    0 0 0 1px rgba(180, 83, 9, 0.9),
    0 0 0 3px rgba(15, 23, 42, 1);
}

/* Chiffre gagnant de la semaine : texte or, même style pour hebdo + séries */
.gpge-table td.is-week-best,
.gpge-table--series-2025 td.is-week-winner {
  color: var(--gpge-gold);
  font-weight: 700;
}

/* On s'assure qu'aucune étoile ne reste pour les semaines dans le tableau des séries */
.gpge-table--series-2025 td.is-week-winner::after {
  content: none;
}

/* Totaux des gagnants de la saison - Prédictions hebdomadaires 2024 */
.gpge-table--hebdo-2024 td.is-season-winner,
.gpge-table--hebdo-2024 td.is-season-second,
.gpge-table--hebdo-2024 td.is-season-third {
  font-weight: 700;
}

/* 1er : fond or */
.gpge-table--hebdo-2024 td.is-season-winner {
  background: linear-gradient(135deg,
              rgba(234, 179, 8, 0.55),
              rgba(251, 191, 36, 0.95));
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.9),
    0 0 0 3px rgba(15, 23, 42, 1);
}

/* 2e : fond argent */
.gpge-table--hebdo-2024 td.is-season-second {
  background: linear-gradient(135deg,
              rgba(148, 163, 184, 0.6),
              rgba(229, 231, 235, 0.95));
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.9),
    0 0 0 3px rgba(15, 23, 42, 1);
}

/* 3e : fond bronze */
.gpge-table--hebdo-2024 td.is-season-third {
  background: linear-gradient(135deg,
              rgba(180, 83, 9, 0.55),
              rgba(252, 211, 77, 0.95));
  box-shadow:
    0 0 0 1px rgba(180, 83, 9, 0.9),
    0 0 0 3px rgba(15, 23, 42, 1);
}

/* Layout des cartes Champion + Meilleurs de la semaine */
.gpge-playoffs-highlight {
  display: grid;
  gap: 1.5rem;
}

/* Desktop : 50% / 50%, alignées en haut */
@media (min-width: 900px) {
  .gpge-playoffs-highlight {
    grid-template-columns: 1fr 1fr; /* 👉 50 / 50 */
    align-items: flex-start;        /* 👉 empêche l'étirement vertical */
  }
}

/* Harmonisation AAA des titres des deux cartes */
.gpge-champion-card .gpge-card-title,
.gpge-week-summary-card .gpge-card-title {
  font-size: 1.3rem;
  color: #e5e7eb;        /* Gris AAA sur fond sombre */
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
}

/* Kicker AAA pour séries, hebdo et autres cartes */
.gpge-card-kicker {
  color: #cbd5e1 !important;   /* Gris AAA */
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 1;                  /* toujours lisible */
  margin-bottom: 0.35rem;
}

/* =========================================================
   BLOC ACCESSIBILITÉ AAA – GPGE (override global)
   À placer à la fin du fichier
========================================================= */

/* 1) Typo globale : texte principal + paragraphes */
body {
  color: #e5e7eb; /* gris très clair, AAA sur ton fond sombre */
}

/* 2) Titres H1–H4 (pages & contenus) */

h1 {
  color: #f3f4f6;              /* blanc doux, moins dur que #fff */
  font-size: 1.7rem;
  font-weight: 700;
}

h2 {
  color: var(--gpge-gold); /* or vif : très bon contraste sur fond sombre */
  font-size: 1.5rem;
  font-weight: 600;
}

h3 {
  color: var(--gpge-bleu-clair);
  font-size: 1.30rem;
  font-weight: 600;
}

h4 {
  color: #e5e7eb;      /* on évite le rouge pur en texte pour rester AAA */
  font-size: 0.95rem;
  font-weight: 600;
}

/* 3) Kickers & petits labels (Séries 2025, GPGE, etc.) */

.gpge-card-kicker,
.hero-badge,
.news-label,
.winner-label,
.gpge-week-label,
.pill-label {
  color: #cbd5e1;        /* gris froid AAA sur fond sombre */
  opacity: 1;
}

/* 4) Titres de cartes (incluant Champion + Meilleurs de la semaine) */

.card-title,
.gpge-champion-card .gpge-card-title,
.gpge-week-summary-card .gpge-card-title {
  color: #7BC2FF;         /* même gris clair pour toutes les cartes */
  font-size: 1.3rem;
  font-weight: 700;
}

/* 5) Textes secondaires / explications */

.card-text,
.card-meta,
.section-lead,
.section-intro,
.panel-note {
  color: #d1d5db;        /* gris un peu plus doux mais encore AAA */
}

/* 6) En-têtes de tableau (bandeau rouge) */

.gpge-table thead th {
  color: #f9fafb;        /* blanc cassé sur rouge sombre -> AAA */
}

/* 7) Corps des tableaux (toutes variantes) */

.gpge-table tbody td {
  color: #e5e7eb;        /* texte clair et uniforme */
}

/* En-têtes “stackés” (LAC / HOU, Sem. / #1, etc.) */

.gpge-th-main {
  color: #f9fafb;        /* ligne du haut = très lisible */
}

.gpge-th-sub {
  color: #cbd5e1;        /* ligne du bas = gris AAA, un peu plus discret */
}

/* 8) Légende des tableaux */

.table-legend,
.legend-list li {
  color: #cbd5e1;
}

/* 9) Cellules “totaux” / “meilleur score de la semaine” */

/* Totaux en or (déjà très lisible, on garde) */
.cell-total {
  background: #fbbf24;
  color: #111827;         /* texte foncé sur fond or → contraste énorme */
}

/* Meilleure performance (vert) – on ajuste pour un contraste AAA */
.cell-best {
  background: #22c55e;    /* vert plus clair */
  color: #052e16;         /* vert très foncé → contraste fort */
  font-weight: 700;
}

/* Chiffres gagnants de la semaine (hebdo + séries) en or */
.gpge-table td.is-week-best,
.gpge-table--series-2025 td.is-week-winner {
  color: var(--gpge-gold);
  font-weight: 700;
}

/* 10) Podium : lisibilité max sur fond sombre */

.gpge-podium-item {
  color: #f1f5f9;         /* texte très clair sur les fonds or/argent/bronze */
}

/* Photo du champion */
.gpge-champion-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .75rem;
}

.gpge-champion-header p {
  margin: 0;
}

/* Version par défaut (desktop + tablette) */
.gpge-champion-photo {
  display: block;
  flex-shrink: 0;

  width: 72px;
  height: 72px;
  aspect-ratio: 1 / 1;

  border-radius: 50%;
  object-fit: cover;

  border: 2px solid #fbbf24;          /* or GPGE */
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 1);
}

/* Sécurité maximale : on écrase les règles globales éventuelles */
.gpge-champion-header .gpge-champion-photo {
  width: 72px !important;
  height: 72px !important;
  aspect-ratio: 1 / 1 !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Si tu veux la réduire un peu sur très petit mobile : */
@media (max-width: 480px) {
  .gpge-champion-header .gpge-champion-photo {
    width: 64px !important;
    height: 64px !important;
  }
}

/* Bloc texte du champion */
.gpge-champion-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

/* Nom sur sa propre ligne */
.gpge-champion-name {
  font-size: 1.25rem;
  font-weight: 700;
  display: block;
}

/* Points sur la ligne en dessous */
.gpge-champion-detail {
  display: block;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* =========================================================
   TABLEAU – FORMULAIRE SÉRIES NFL (gpge-table-clean)
   ========================================================= */

/* ===== BASE DESKTOP ===== */

.gpge-table-clean {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95rem;
}

/* En-tête rouge + bordures visibles */
.gpge-table-clean thead th {
  background: var(--gpge-red);
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1rem;
  text-align: center;
  border-top: 1px solid rgba(148, 163, 184, 0.7);
  border-bottom: 1px solid rgba(148, 163, 184, 0.7);
  border-right: 1px solid rgba(148, 163, 184, 0.45);
}

/* Alignement Visiteur / Local à gauche */
.gpge-table-clean thead th:first-child,
.gpge-table-clean thead th:nth-child(2) {
  text-align: left;
}

/* Bordure gauche du premier et droite du dernier */
.gpge-table-clean thead th:first-child {
  border-left: 1px solid rgba(148, 163, 184, 0.45);
}
.gpge-table-clean thead th:last-child {
  border-right: 1px solid rgba(148, 163, 184, 0.45);
}

/* Lignes "jour" (Samedi, Dimanche, etc.) */
.gpge-table-clean tbody tr.day-row td {
  background: #1f2937;
  color: #e5e7eb;
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 1rem;
  border-left: 1px solid rgba(148, 163, 184, 0.45);
  border-right: 1px solid rgba(148, 163, 184, 0.45);
  border-bottom: 1px solid rgba(148, 163, 184, 0.7);
}

/* Lignes de matchs */
.gpge-table-clean tbody tr:not(.day-row) {
  background: rgba(4, 7, 17, 0.98);
}

.gpge-table-clean tbody tr:not(.day-row) td {
  padding: 0.65rem 1rem;
  vertical-align: middle;
  border-right: 1px solid rgba(148, 163, 184, 0.45);
  border-bottom: 1px solid rgba(148, 163, 184, 0.45);
}

.gpge-table-clean tbody tr:not(.day-row) td:first-child {
  border-left: 1px solid rgba(148, 163, 184, 0.45);
}

/* Colonnes spécifiques */
.gpge-table-clean td.team {
  text-align: left;
}

.gpge-table-clean td.score,
.gpge-table-clean td.total {
  text-align: center;
}

/* Label d’équipe avec radio */
.gpge-table-clean td.team label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  color: #ffffff;
}

/* Radios (accent or) */
.gpge-table-clean td.team input[type="radio"] {
  accent-color: var(--gpge-gold);
}

/* Inputs de score et total */
.gpge-table-clean td.score input,
.gpge-table-clean td.total input {
  width: 40px;
  padding: 6px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #bbb;
  font-size: 1rem;
  background: #ffffff;
  color: #000000;
  margin: 0 3px;
}

/* TOTAL plus visible en vert */
.gpge-table-clean td.total input {
  background: #22c55e;
  color: #000;
  font-weight: bold;
  border-color: #16a34a;
}

/* "à" entre les scores */
.gpge-table-clean .score span {
  margin: 0 6px;
  font-weight: bold;
  color: #ffffff;
}


/* =========================================================
   VERSION MOBILE – MODE "CARTES"
   ========================================================= */

@media (max-width: 768px) {

  /* On cache l'en-tête en mobile */
  .gpge-table-clean thead {
    display: none;
  }

  /* Table → cartes empilées */
  .gpge-table-clean,
  .gpge-table-clean tbody,
  .gpge-table-clean tr,
  .gpge-table-clean td {
    display: block;
    width: 100%;
  }

  /* Espacement entre les matchs (cartes) */
  .gpge-table-clean tr:not(.day-row) {
    margin-bottom: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
  }

  /* Bandeaux de jours pleine largeur */
  .gpge-table-clean tr.day-row {
    margin-top: 1rem;
    border: none;
  }

  .gpge-table-clean tr.day-row td {
    border: none;
    padding: 0.5rem 0.9rem;
  }

  /* Reset des bordures internes pour les cellules en mode carte */
  .gpge-table-clean tr:not(.day-row) td {
    border: none;
    padding: 6px 12px;
  }

  /* Pas de labels automatiques en mobile */
  .gpge-table-clean tr:not(.day-row) td::before {
    content: none !important;
    display: none !important;
  }

  /* Alignements en mobile */
  .gpge-table-clean td.team {
    text-align: left !important;
    padding-left: 12px;
  }

  .gpge-table-clean td.score,
  .gpge-table-clean td.total {
    text-align: left;
  }

  .gpge-table-clean td.score input,
  .gpge-table-clean td.total input {
    margin-right: 4px;
  }
}

/* ===== Bordures mobile plus visibles (blanches) ===== */
@media (max-width: 768px) {

  /* Bordure blanche autour de chaque match */
  .gpge-table-clean tr:not(.day-row) {
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
  }

  /* Bordure blanche autour des bandeaux de dates */
  .gpge-table-clean tr.day-row td {
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-bottom: none !important; /* pour ne pas doubler avec le match suivant */
    padding: 0.6rem 0.9rem;
  }

  /* Pour éviter que les bordures internes effacent la bordure externe */
  .gpge-table-clean tr.day-row,
  .gpge-table-clean tr.day-row td {
    background-clip: padding-box;
  }
}


/* ===== SELECT PARTICIPANT — plus visible ===== */

/* Label "Sélectionner votre nom" */
.playoff-form-participant .surnom {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gpge-gold);
  margin-bottom: 6px;
  display: block;
}

/* Bouton-select CTA */
.playoff-form-participant select {
  display: inline-block;
  width: 280px;              /* moins large */
  max-width: 100%;
  padding: 10px 16px;

  font-size: 1rem;
  font-weight: 600;

  background: var(--gpge-gold);  /* or GPGE = CTA */
  color: #000;

  border-radius: 999px;          /* pill comme tes boutons */
  border: 2px solid #d4af37;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);

  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' height='20' width='20' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;

  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover : un peu plus foncé */
.playoff-form-participant select:hover {
  background: #f0c454;
  border-color: #e0b844;
}

/* Focus : contour discret, sans gros halo bleu */
.playoff-form-participant select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

/* On laisse la liste déroulante au style natif macOS.
   Safari ne permet pas de vraiment skinner le menu interne de façon fiable. */

/* ---- Icône ✔ quand un nom est sélectionné ---- */
.playoff-form-participant select.selected {
  background-color: #3ccf4e !important; /* vert */
  color: #000 !important;
  border-color: #2aa73a !important;
  -webkit-appearance: none !important;
  appearance: none !important;

  /* Icône ✔ à droite */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M13.485 1.929a1.5 1.5 0 0 1 0 2.121l-7.07 7.07a1.5 1.5 0 0 1-2.122 0L1.586 8.414a1.5 1.5 0 1 1 2.121-2.121L6 8.586l6.364-6.364a1.5 1.5 0 0 1 2.121 0z'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 42px; /* espace pour l'icône */
}

/* Forcer Safari mobile à appliquer la couleur sélectionnée */
.playoff-form-participant select.selected {
  background-color: #3ccf4e !important; /* vert TOTAL */
  background: #3ccf4e !important;
  color: #000 !important;
  border-color: #2aa73a !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Carte avec la photo du participant */
.playoff-participant-preview {
  margin-top: 0.75rem;
  display: none; /* caché tant qu'aucun nom sélectionné */
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.9); /* fond navy sombre */
  border: 1px solid rgba(148, 163, 184, 0.8);
}

.playoff-participant-preview img {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid var(--gpge-gold);
}

.playoff-participant-preview p {
  margin: 0;
  font-weight: 600;
  color: #e5e7eb;
}

/* Quand un participant est choisi, on peut aussi accentuer le bloc */
.playoff-form-participant.has-participant .playoff-participant-preview {
  display: flex;
}

/* ===== Couleurs des niveaux de points (cartes) ===== */

.sb-pick-id.bonus-perfect {
  background-color: var(--gpge-bonus-perfect) !important;
  border-color: var(--gpge-bonus-perfect) !important;
  color: #0f172a;
}

.sb-pick-id.bonus-total {
  background-color: var(--gpge-bonus-total) !important;
  border-color: var(--gpge-bonus-total) !important;
  color: #0f172a;
}

.sb-pick-id.bonus-diff1 {
  background-color: var(--gpge-bonus-diff1) !important;
  border-color: var(--gpge-bonus-diff1) !important;
  color: #0f172a;
}

.sb-pick-id.bonus-diff2_3 {
  background-color: var(--gpge-bonus-diff2_3) !important;
  border-color: var(--gpge-bonus-diff2_3) !important;
  color: #0f172a;
}

.sb-pick-id.bonus-diff4_6 {
  background-color: var(--gpge-bonus-diff4_6) !important;
  border-color: var(--gpge-bonus-diff4_6) !important;
  color: #0f172a;
}

.sb-pick-id.bonus-diff7_9 {
  background-color: var(--gpge-bonus-diff7_9) !important;
  border-color: var(--gpge-bonus-diff7_9) !important;
  color: #0f172a;
}

/* ===== Badge de points (différent des sb-pick-id) ===== */

.sb-points-bonus {
  display: inline-block;
  padding: 0.20rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.85); /* Fond bleu nuit semi-transparent */
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  margin-left: 0.35rem;
  vertical-align: middle;
  line-height: 1;
}

/* Effet subtil pour faire matcher la couleur avec le niveau du bonus */
.sb-points-bonus.bonus-perfect {
  box-shadow: 0 0 6px var(--gpge-bonus-perfect);
  border-color: var(--gpge-bonus-perfect);
}

.sb-points-bonus.bonus-total {
  box-shadow: 0 0 6px var(--gpge-bonus-total);
  border-color: var(--gpge-bonus-total);
}

.sb-points-bonus.bonus-diff1 {
  box-shadow: 0 0 6px var(--gpge-bonus-diff1);
  border-color: var(--gpge-bonus-diff1);
}

.sb-points-bonus.bonus-diff2_3 {
  box-shadow: 0 0 6px var(--gpge-bonus-diff2_3);
  border-color: var(--gpge-bonus-diff2_3);
}

.sb-points-bonus.bonus-diff4_6 {
  box-shadow: 0 0 6px var(--gpge-bonus-diff4_6);
  border-color: var(--gpge-bonus-diff4_6);
}

.sb-points-bonus.bonus-diff7_9 {
  box-shadow: 0 0 6px var(--gpge-bonus-diff7_9);
  border-color: var(--gpge-bonus-diff7_9);
}

.team-final-score {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffffff;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  background: rgba(0,0,0,0.35);
  box-shadow: 0 0 12px rgba(255,255,255,0.4);
}

/* Container plus large (seulement quand container--wide est présent) */
.container.container--wide {
  max-width: 1200px; /* ajuste: 1200 / 1280 / 1360 selon ton goût */
}

/* Pour garder un peu moins de padding sur très grands écrans */
@media (min-width: 1200px) {
  .container.container--wide {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ==================================================
   Participants — Pastilles PLEINES (OPTION B)
   Surnom = rouge GPGE | Équipe = couleur d’équipe
   À placer TOUT À LA FIN de la CSS
   ================================================== */

/* ===== Pastilles Participants  ===== */
.participant-card .participant-meta .value{
  display: inline-flex !important;
  align-items: center !important;
  padding: .26rem .62rem !important;
  border-radius: 999px !important;
  line-height: 1.1 !important;
  color: #fff !important;
  border: 2px solid transparent !important; /* prêt pour la couleur secondaire */
}

/* ===== ÉQUIPE = plein “frosted” (teinte + lisible) ===== */
.participant-card .participant-meta--team .value{
  color: #fff !important;
}

/* ==================================================
   NFL — Pastilles Équipes
   Primaire plein / Secondaire en bordure
   ================================================== */

/* ===== AFC ===== */

/* East */
.participant-card.team-bills      .participant-meta--team .value{ background:#00338D!important; border-color:#C60C30!important; }
.participant-card.team-dolphins   .participant-meta--team .value{ background:#008E97!important; border-color:#FC4C02!important; }
.participant-card.team-patriots   .participant-meta--team .value{ background:#002244!important; border-color:#C8102E!important; }
.participant-card.team-jets       .participant-meta--team .value{ background:#125740!important; border-color:#FFFFFF!important; }

/* North */
.participant-card.team-bengals    .participant-meta--team .value{ background:#FB4F14!important; border-color:#000000!important; }
.participant-card.team-browns     .participant-meta--team .value{ background:#311D00!important; border-color:#FF3C00!important; }
.participant-card.team-ravens     .participant-meta--team .value{ background:#241773!important; border-color:#9E7C0C!important; }
.participant-card.team-steelers   .participant-meta--team .value{ background:#101820!important; border-color:#FFB612!important; }

/* South */
.participant-card.team-texans     .participant-meta--team .value{ background:#03202F!important; border-color:#A71930!important; }
.participant-card.team-colts      .participant-meta--team .value{ background:#002C5F!important; border-color:#A5ACAF!important; }
.participant-card.team-jaguars    .participant-meta--team .value{ background:#006778!important; border-color:#D7A22A!important; }
.participant-card.team-titans     .participant-meta--team .value{ background:#0C2340!important; border-color:#4B92DB!important; }

/* West */
.participant-card.team-broncos    .participant-meta--team .value{ background:#FB4F14!important; border-color:#002244!important; }
.participant-card.team-chargers   .participant-meta--team .value{ background:#0080C6!important; border-color:#FFC20E!important; }
.participant-card.team-chiefs     .participant-meta--team .value{ background:#E31837!important; border-color:#FFB81C!important; }
.participant-card.team-raiders    .participant-meta--team .value{ background:#000000!important; border-color:#A5ACAF!important; }

/* ===== NFC ===== */

/* East */
.participant-card.team-cowboys    .participant-meta--team .value{ background:#002244!important; border-color:#B0B7BC!important; }
.participant-card.team-giants     .participant-meta--team .value{ background:#0B2265!important; border-color:#A71930!important; }
.participant-card.team-eagles     .participant-meta--team .value{ background:#004C54!important; border-color:#A5ACAF!important; }
.participant-card.team-commanders .participant-meta--team .value{ background:#5A1414!important; border-color:#FFB612!important; }

/* North */
.participant-card.team-bears      .participant-meta--team .value{ background:#0B162A!important; border-color:#C83803!important; }
.participant-card.team-lions      .participant-meta--team .value{ background:#0076B6!important; border-color:#B0B7BC!important; }
.participant-card.team-packers    .participant-meta--team .value{ background:#203732!important; border-color:#FFB612!important; }
.participant-card.team-vikings    .participant-meta--team .value{ background:#4F2683!important; border-color:#FFC62F!important; }

/* South */
.participant-card.team-buccaneers .participant-meta--team .value{ background:#D50A0A!important; border-color:#34302B!important; }
.participant-card.team-falcons    .participant-meta--team .value{ background:#A71930!important; border-color:#000000!important; }
.participant-card.team-panthers   .participant-meta--team .value{ background:#0085CA!important; border-color:#101820!important; }
.participant-card.team-saints     .participant-meta--team .value{ background:#101820!important; border-color:#D4AF37!important; }

/* West */
.participant-card.team-cardinals  .participant-meta--team .value{ background:#97233F!important; border-color:#000000!important; }
.participant-card.team-rams       .participant-meta--team .value{ background:#003594!important; border-color:#FFA300!important; }
.participant-card.team-49ers      .participant-meta--team .value{ background:#AA0000!important; border-color:#B3995D!important; }
.participant-card.team-seahawks   .participant-meta--team .value{ background:#002244!important; border-color:#69BE28!important; }

/* =========================================================
   ARCHIVES – ACCORDÉONS & DÉCENNIES
   Page : anterieures.php / anterieures-test.php
   ========================================================= */

/* =========================
   Contrôle Ouvrir / Fermer
   ========================= */
.gpge-accordion-controls{
  display: flex;
  gap: .5rem;
  margin: 1.25rem 0 1.75rem;
  flex-wrap: wrap;
}

.gpge-accordion-controls button{
  appearance: none;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.85);
  color: #f8fafc;
  padding: .45rem .75rem;
  border-radius: .6rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}

.gpge-accordion-controls button:hover{
  background: rgba(30,41,59,.95);
}

/* =========================
   Décennies – wrapper
   ========================= */
.gpge-decade{
  margin-bottom: 2rem;
}

/* Titre de décennie */
.gpge-decade-title{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1.75rem 0 1rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Badge 2010–2019 */
.gpge-decade-badge{
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.35);
}

/* =========================
   Accordéons (années)
   ========================= */
.gpge-season{
  border: 1px solid rgba(148,163,184,.25);
  border-radius: .9rem;
  background: rgba(15,23,42,.55);
  margin: .6rem 0;
  overflow: hidden;
}

/* Pastille année */
.gpge-season > summary{
  cursor: pointer;
  list-style: none;
  padding: .7rem .95rem;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
}

.gpge-season > summary::-webkit-details-marker{
  display: none;
}

.gpge-season[open] > summary{
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.15);
}

/* Contenu accordéon */
.gpge-season-body{
  padding: .9rem;
}

/* =========================
   Tables – wrapper décennie
   ========================= */
.gpge-table-wrapper--decade{
  border-left: 4px solid transparent;
  padding-left: .6rem;
}

/* =========================
   COULEURS PAR DÉCENNIE
   ========================= */

/* -------- 2020–2029 -------- */
.decade-2020 .gpge-decade-title{
  color: #fecaca;
}
.decade-2020 .gpge-decade-badge{
  background: rgba(213,10,10,.95);
}
.decade-2020 .gpge-season > summary{
  background: linear-gradient(
    to bottom,
    rgba(213,10,10,.95),
    rgba(127,0,0,.95)
  );
}
.decade-2020 .gpge-table-wrapper--decade{
  border-left-color: rgba(213,10,10,.85);
}

/* -------- 2010–2019 -------- */
.decade-2010 .gpge-decade-title{
  color: #fde68a;
}
.decade-2010 .gpge-decade-badge{
  background: rgba(212,175,55,.95);
  color: #111827;
}
.decade-2010 .gpge-season > summary{
  background: linear-gradient(
    to bottom,
    rgba(212,175,55,.95),
    rgba(161,124,30,.95)
  );
  color: #111827;
}
.decade-2010 .gpge-table-wrapper--decade{
  border-left-color: rgba(212,175,55,.85);
}

/* -------- 2000–2009 -------- */
.decade-2000 .gpge-decade-title{
  color: #bfdbfe;
}
.decade-2000 .gpge-decade-badge{
  background: rgba(30,58,138,.95);
}
.decade-2000 .gpge-season > summary{
  background: linear-gradient(
    to bottom,
    rgba(30,58,138,.95),
    rgba(15,23,42,.95)
  );
}
.decade-2000 .gpge-table-wrapper--decade{
  border-left-color: rgba(30,58,138,.85);
}

/* -------- 1990–1999 -------- */
.decade-1990 .gpge-decade-title{
  color: #bbf7d0;
}
.decade-1990 .gpge-decade-badge{
  background: rgba(22,101,52,.95);
}
.decade-1990 .gpge-season > summary{
  background: linear-gradient(
    to bottom,
    rgba(22,101,52,.95),
    rgba(20,83,45,.95)
  );
}
.decade-1990 .gpge-table-wrapper--decade{
  border-left-color: rgba(22,101,52,.85);
}

/* -------- CLASSEMENT CUMULATIF -------- */
.p-status{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.2rem .6rem;
  border-radius:999px;
  font-size:.78rem;
  line-height:1.1;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(2,6,23,.35);
  color:rgba(226,232,240,.92);
  white-space:nowrap;
}
.p-status::before{
  content:"";
  width:.45rem; height:.45rem;
  border-radius:50%;
}
.p-status--active::before{ background: rgba(34,197,94,.95); }
.p-status--legacy::before{ background: rgba(148,163,184,.95); }

/* Anciens visibles mais un peu plus doux */
.gpge-table tr.row-legacy{ opacity:.78; }
.gpge-table tr.row-legacy:hover{ opacity:1; }

/* =========================================
   ARCHIVE (scopé) — n'affecte que .gpge-archive
========================================= */

/* Titre / sous-titre / note : uniquement dans cette section */
.gpge-archive .panel-title{
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
}

.gpge-archive .panel-subtitle{
  margin: .35rem 0 0;
  color: var(--gpge-muted, #94a3b8);
  font-size: .95rem;
}

.gpge-archive .panel-note{
  margin: 1rem 0 1.25rem;
  padding: .75rem 1rem;
  border-left: 4px solid var(--gpge-gold, #ffdc22);
  background: rgba(255, 220, 34, .08);
  font-size: .9rem;
  line-height: 1.45;
}

/* Lignes anciens participants */
.gpge-archive .gpge-table .row-legacy{
  opacity: .72;
}

.gpge-archive .gpge-table .row-legacy td{
  color: var(--gpge-muted, #9aa4b2);
}

/* Mise en évidence (si vos classes existent déjà, celles-ci les complètent) */
.gpge-archive .gpge-table .cell-best{
  background: rgba(48, 231, 131, .25);
  font-weight: 700;
}

.gpge-archive .gpge-table .cell-total{
  background: rgba(255, 220, 34, .25);
  font-weight: 600;
}

/* Légende */
.gpge-archive .table-legend{
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, .25);
}

.gpge-archive .legend-title{
  font-size: 1rem;
  margin: 0 0 .5rem;
  font-weight: 600;
}

.gpge-archive .legend-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .4rem;
}

.gpge-archive .legend-list li{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
}

.gpge-archive .legend-swatch{
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}

.gpge-archive .legend-swatch-total{ background: rgba(255, 220, 34, .6); }
.gpge-archive .legend-swatch-best{  background: rgba(48, 231, 131, .6); }
.gpge-archive .legend-swatch-legacy{background: rgba(148, 163, 184, .6); }

@media (max-width: 640px){
  .gpge-archive .panel-title{ font-size: 1.15rem; }
  .gpge-archive .panel-note{ font-size: .85rem; }
  .gpge-archive .legend-list{ gap: .6rem; }
}

/* =========================================================
   GPGE — Highlights uniformes (liseré discret)
   Appliqué seulement aux tables .gpge-table--compact
   ========================================================= */

/* Reset sécurité : pas de fond agressif par défaut */
.gpge-table--compact td.cell-total,
.gpge-table--compact td.cell-best{
  background: transparent;
}

/* TOTAL (jaune) — liseré + micro-fond subtil */
.gpge-table--compact td.cell-total{
  box-shadow: inset 5px 0 0 rgba(255, 220, 34, 1);
  padding-left: calc(var(--cell-pad-left, .6rem) + 5px);
  background: linear-gradient(
    90deg,
    rgba(255, 220, 34, 0.14),
    rgba(255, 220, 34, 0.06) 55%,
    transparent
  );
}

/* MEILLEUR RÉSULTAT (vert) — liseré + micro-fond subtil */
.gpge-table--compact td.cell-best{
  box-shadow: inset 5px 0 0 rgba(48, 231, 131, 1);
  padding-left: calc(var(--cell-pad-left, .6rem) + 5px);
  background: linear-gradient(
    90deg,
    rgba(48, 231, 131, 0.16),
    rgba(48, 231, 131, 0.07) 55%,
    transparent
  );
}

/* Anciens participants : on atténue sans perdre l’info */
.gpge-table--compact tr.row-legacy td.cell-total,
.gpge-table--compact tr.row-legacy td.cell-best{
  opacity: 0.85;
  filter: saturate(0.75);
}

/* =========================================================
   TABLES GPGE — HEBDO 2024 (version clean + script auto-rang)
   ========================================================= */

/* Wrapper scroll (évite les sauts et garde un bon rendu iOS) */
.gpge-table-wrapper--scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-radius: 12px;
}

/* Table base */
.gpge-table{
  width: 100%;
  border-collapse: separate; /* plus fiable que collapse avec scroll iOS */
  border-spacing: 0;
  background: rgba(2, 6, 23, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

/* Assure une largeur minimale pour permettre le scroll horizontal */
.gpge-table--hebdo-2024{
  min-width: 1100px; /* ajuste si tu veux moins/plus large */
}

/* En-tête */
.gpge-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.65rem 0.6rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(15, 23, 42, 0.92);
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  white-space: nowrap;
}

/* Cellules */
.gpge-table tbody td{
  padding: 0.55rem 0.6rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.90);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background-clip: padding-box; /* aide iOS avec bordures */
}



/* Hover léger (desktop) */
@media (hover:hover){
  .gpge-table tbody tr:hover td{
    background: rgba(148, 163, 184, 0.10);
  }
}

/* Alignement des colonnes "numériques" */
.gpge-table .col-wk{
  text-align: center;
  white-space: nowrap;
}

/* Colonne noms (2e colonne) */
.gpge-table tbody td:nth-child(2){
  text-align: left;
  white-space: nowrap;
}

/* Séparateurs verticaux discrets */
.gpge-table thead th + th,
.gpge-table tbody td + td{
  border-left: 1px solid rgba(148, 163, 184, 0.10);
}

/* Coins arrondis du tableau */
.gpge-table thead tr:first-child th:first-child{ border-top-left-radius: 12px; }
.gpge-table thead tr:first-child th:last-child{ border-top-right-radius: 12px; }
.gpge-table tbody tr:last-child td:first-child{ border-bottom-left-radius: 12px; }
.gpge-table tbody tr:last-child td:last-child{ border-bottom-right-radius: 12px; }

/* =========================================================
   Highlights
   ========================================================= */

/* Meilleur score de la semaine */
.gpge-table td.is-week-best{
  background: rgba(250, 204, 21, 0.12);      /* doré léger */
  border-left-color: rgba(250, 204, 21, 0.22);
  border-right-color: rgba(250, 204, 21, 0.22);
}
.gpge-table td.is-week-best strong{
  color: rgba(250, 204, 21, 0.95);
  font-weight: 800;
}

/* Podium (appliqué par ton script sur cellule Rang + Total) */
.gpge-table td.is-season-winner{
  background: rgba(250, 204, 21, 0.18);
  color: rgba(255, 255, 255, 0.98);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.30);
}
.gpge-table td.is-season-second{
  background: rgba(203, 213, 225, 0.16);
  color: rgba(255, 255, 255, 0.96);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.26);
}
.gpge-table td.is-season-third{
  background: rgba(245, 158, 11, 0.16);
  color: rgba(255, 255, 255, 0.96);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.26);
}

/* =========================================================
   Mobile: bordures plus visibles + confort de lecture
   ========================================================= */
@media (max-width: 768px){
  .gpge-table-wrapper--scroll{
    border-radius: 10px;
  }

  .gpge-table{
    border-color: rgba(255, 255, 255, 0.22);
  }

  .gpge-table thead th{
    border-bottom-color: rgba(255, 255, 255, 0.22);
  }

  .gpge-table tbody td{
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }

  .gpge-table thead th + th,
  .gpge-table tbody td + td{
    border-left-color: rgba(255, 255, 255, 0.10);
  }
}

/* =========================================================
   (Optionnel) Cancre : style discret sur le nom
   ========================================================= */
.gpge-table tbody td:nth-child(2){
  /* rien d’obligatoire ici */
}
.gpge-table tbody td:nth-child(2):has(.surnom){
  /* si tu remets un <span class="surnom">-10 $*</span> */
}

/* ==================================================
   BASE COMMUNE — BOUTONS YAHOO
================================================== */
.button--yahoo-wordmark,
.button--yahoo-exclam{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, filter .15s ease;
}

/* Le texte devient le point d’ancrage de l’icône */
.button--yahoo-wordmark .btn-label,
.button--yahoo-exclam .btn-label{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ==================================================
   YAHOO — WORDMARK (SVG, à droite du texte)
================================================== */

.button--yahoo-wordmark .btn-label::after{
  content:"";
  width: 58px;              /* largeur du badge */
  height: 22px;             /* hauteur du badge */
  margin-left: .5rem;

  background: #5F01D1;      /* fond mauve */
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);

  /* le logo blanc est un "cutout" via mask */
  -webkit-mask: url("/gpge/assets/img/brands/yahoo-official.svg") center / 46px 16px no-repeat;
          mask: url("/gpge/assets/img/brands/yahoo-official.svg") center / 46px 16px no-repeat;

  /* IMPORTANT: pour que le logo soit BLANC, on rend l'élément blanc
     et on dessine le fond mauve derrière via background */
  /* Ici, le "background" est la couleur du logo (la forme du mask). */
  background-color: #ffffff;   /* logo blanc */
  /* On ajoute le fond mauve avec un pseudo fond via outline + inset shadow */
  outline: 3px solid #5F01D1;
  outline-offset: -3px;

  opacity: 1;
  transition: transform .15s ease, filter .15s ease;
}


/* ==================================================
   YAHOO — POINT D’EXCLAMATION (PNG, à droite du texte)
================================================== */
.button--yahoo-exclam .btn-label::after{
  content:"";
  width: 14px;
  height: 14px;
  margin-left: .35rem;

  background: url("/gpge/assets/img/brands/yahoo-exclam.png") center / contain no-repeat;

  opacity: .75;
  transition: opacity .15s ease, transform .15s ease, filter .15s ease;
}

/* ==================================================
   HOVER — COMMUN
================================================== */
.button--yahoo-wordmark:hover,
.button--yahoo-exclam:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Hover icônes */
.button--yahoo-wordmark:hover .btn-label::after{
  transform: scale(1.04);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.25));
}
.button--yahoo-exclam:hover .btn-label::after{
  opacity: 1;
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
}

/* ==================================================
   FOCUS ACCESSIBILITÉ
================================================== */
.button--yahoo-wordmark:focus-visible,
.button--yahoo-exclam:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}

/* ==================================================
   MOBILE — AJUSTEMENTS
================================================== */

@media (max-width: 480px){
  .button--yahoo-wordmark .btn-label::after{
    width: 54px;
    height: 20px;
    -webkit-mask-size: 40px 14px;
            mask-size: 40px 14px;
  }
}


  .button--yahoo-exclam .btn-label::after{
    width: 13px;
    height: 13px;
    margin-left: .3rem;
  }
}

/* ==================================================
   FALLBACK SI MASK NON SUPPORTÉ (rare)
================================================== */
@supports not ((-webkit-mask: url("")) or (mask: url(""))){
  .button--yahoo-wordmark .btn-label::after{
    background: url("/gpge/assets/img/brands/yahoo-official.svg") center / contain no-repeat;
  }
}
/* ===== Base bouton ===== */
.button--form{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  text-align: center;
}

/* Texte principal */
.button--form .btn-main{
  white-space: nowrap;
}

/* Sous-texte */
.button--form .btn-sub{
  white-space: nowrap;
  opacity: .9;
  font-weight: 600;
}

/* ===== MOBILE ===== */

/* Desktop: garde sur une ligne (optionnel) */
.button--form .btn-wrap{
  display: inline;
}

/* Mobile: 2 lignes, jamais 2 colonnes */
@media (max-width: 480px){

  /* on neutralise tout "grid 2 colonnes" éventuel sur le bouton */
  a.button.button-primary.button--form{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .button--form .btn-wrap{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .18rem !important;
    width: 100% !important;
  }

  .button--form .btn-main,
  .button--form .btn-sub{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .button--form .btn-sub{
    font-size: .82rem;
    opacity: .85;
    font-weight: 600;
  }
}


/* Bloc annonce */

.gpge-annonce-blogue {
  background: var(--gpge-silver);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}



.gpge-annonce-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 0.95rem;
}

.gpge-annonce-inner strong {
  color: #b30000;
  white-space: nowrap;
}

.gpge-annonce-inner span {
  flex: 1;
  color: #333;
}

.gpge-annonce-link {
  background: #b30000;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.gpge-annonce-link:hover {
  background: #8f0000;
}

/* Responsive – annonce blogue */
@media (max-width: 768px) {

  .gpge-annonce-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .gpge-annonce-inner strong {
    font-size: 1rem;
  }

  .gpge-annonce-inner span {
    font-size: 0.95rem;
  }

  .gpge-annonce-link {
    align-self: flex-start;
    margin-top: 4px;
  }
}