:root {
  --bg: #0f1221;
  --card: #151833;
  --text: #e5e7f6;
  --muted: #9aa0c3;
  --accent: #7c8dfb;
  --ok: #39d98a;
  --bad: #ff6b6b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  color: var(--text);
  background: radial-gradient(
      1000px 600px at 80% -10%,
      #1d2147 0%,
      transparent 60%
    ),
    var(--bg);
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.topbar {
  position: sticky;
  top: 0;
  background: #0f122199;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #252a54;
}
.brand {
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  margin-right: 12px;
}
a.btn {
  text-decoration: none !important;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  margin-right: 14px;
}
.nav a:hover {
  color: var(--text);
}
.card {
  background: var(--card);
  border: 1px solid #252a54;
  border-radius: 16px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: stretch;
}
.grid .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.card-icon {
  margin-top: auto;
  padding-top: 20px;
}
h1,
h2,
h3 {
  margin: 6px 0 10px;
}
input,
select,
button,
textarea {
  background: #0e1123;
  color: var(--text);
  border: 1px solid #2d3366;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 16px; /* police uniforme */
}
button {
  cursor: pointer;
}
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #2d3366;
  background: #0e1123;
}
.btn-primary {
  background: linear-gradient(120deg, #6f82ff, #9aa6ff);
  border: 0;
  color: #0b0e23;
  font-weight: 700;
}
.btn-ghost {
  background: transparent;
  border: 1px dashed #39408a;
  color: var(--muted);
}
.flash {
  background: #19214d;
  border: 1px solid #2c3482;
  padding: 10px;
  border-radius: 10px;
  margin: 10px 0;
}
.flash-success {
  background: #1e3d27;
  border: 1px solid #39d98a;
  color: #39d98a;
}
.flash-error {
  background: #3d1e1e;
  border: 1px solid #ff6b6b;
  color: #ff6b6b;
}
.kv {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kv span {
  display: inline-flex;
  align-items: center;
  background: #0e1123;
  border: 1px solid #2d3366;
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
}
.badge {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #39408a;
  color: #a7afff;
}
.footer {
  padding: 20px 0;
  border-top: 1px solid #252a54;
  margin-top: 40px;
}
small.muted {
  color: var(--muted);
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th,
.table td {
  border-bottom: 1px solid #252a54;
  padding: 10px;
  text-align: left;
}
.table th {
  color: #aeb5e8;
}

/* Style formulaire inscription + ajout contenu */
.register-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px 20px;
  text-align: left;
}

.register-form h1 {
  text-align: center;
  margin-bottom: 20px;
}

.register-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Inputs */
.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.register-form input[type="url"],
.register-form select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #2d3366;
  background: #0e1123;
  color: var(--text);
  margin-bottom: 16px;
  transition: border-color 0.2s ease;
  font-size: 16px;
}

.register-form input:focus,
.register-form select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Texte d’aide sous inputs */
.form-help {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 16px;
}

/* Bouton */
.register-form button {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border-radius: 8px;
  margin-top: 20px;
}

/* Erreurs champs */
.is-invalid {
  border: 1px solid #ff6b6b !important;
  background: #2a1e1e;
}
.is-invalid:focus {
  border-color: #ff6b6b;
  box-shadow: 0 0 4px #ff6b6b55;
}

/* Style liens globaux */
a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}
a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Footer */
.footer {
  background: #0e1123;
  border-top: 1px solid #252a54;
  padding: 30px 0;
  margin-top: 40px;
  font-size: 14px;
  color: var(--muted);
}
.footer h4 {
  color: var(--text);
  margin-bottom: 10px;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer ul li {
  margin-bottom: 6px;
}
.footer ul li a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer ul li a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

/* Boutons primaires liens */
a.btn-primary {
  color: #0b0e23 !important;
}
a.btn-primary:hover {
  color: #fff !important;
}

.toast {
  position: fixed;
  top: 20px;
  right: -300px;
  background: #151833;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  transition: right 0.3s ease, opacity 0.3s ease;
  opacity: 0.95;
  z-index: 9999;
}
.toast.success {
  border-left: 4px solid var(--ok);
}
.toast.error {
  border-left: 4px solid var(--bad);
}
.toast.visible {
  right: 20px;
}

/* Badge statut */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9em;
}

.status-badge.active {
  background: #1e3d27;
  color: #39d98a;
  border: 1px solid #39d98a;
}

.status-badge.inactive {
  background: #3d1e1e;
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
}

/* Effet visuel sur la ligne */
.row-inactive {
  opacity: 0.6;
}

.btn-platform {
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}
.btn-youtube {
  background: #ff0000;
}
.btn-tiktok {
  background: #000000;
}
.btn-instagram {
  background: linear-gradient(45deg, #feda75, #d62976, #962fbf, #4f5bd5);
}
.btn-facebook {
  background: #1877f2;
}

.error-text {
  color: #ff4d4f; /* rouge vif */
  font-weight: 500;
}

.tooltip-icon {
  position: relative;
  display: inline-flex; /* plus grande zone au survol */
  align-items: center;
  justify-content: center;
  cursor: help; /* curseur "?" explicatif */
  color: #6f82ff; /* bleu doux pour l’œil */
  font-size: 16px;
  width: 24px;
  height: 24px;
}

/* Tooltip */
.tooltip-icon span {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
  position: absolute;
  bottom: 140%; /* au-dessus */
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
  z-index: 999;
}

/* Flèche */
.tooltip-icon span::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #222 transparent transparent transparent;
}

/* Apparition */
.tooltip-icon:hover span {
  visibility: visible;
  opacity: 1;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.account-form input[readonly] {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 6px;
  color: #555;
  cursor: not-allowed;
}

.status-badge.completed {
  background: #28a745; /* vert */
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.status-badge.not-done {
  background: #6c757d; /* gris */
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.progress-bar {
  background: #2a2f4a; /* fond de la barre plus visible */
  border-radius: 8px;
  height: 18px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  background: linear-gradient(
    90deg,
    #6f82ff,
    #9aa6ff
  ); /* dégradé bleu/violet */
  height: 100%;
  border-radius: 8px 0 0 8px;
  transition: width 0.4s ease;
}

.progress-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.status-badge.pending {
  background-color: #444; /* gris foncé de fond */
  color: #ccc; /* texte gris clair */
  border: 1px solid #777; /* contour gris */
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.status-badge.pending i {
  color: #bbb; /* icône gris clair */
}

.content-box {
  background: #32374d; /* un fond légèrement plus clair */
  border: 1px solid #333a56; /* fine bordure */
  border-radius: 10px;
  padding: 25px;
  margin-top: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.content-box h3 {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
}

.content-box .btn.earn-btn {
  font-size: 1.2rem;
  padding: 12px 25px;
  background: linear-gradient(90deg, #4caf50, #2e7d32); /* dégradé vert */
  border: none;
  border-radius: 8px;
  font-weight: bold;
  transition: transform 0.2s ease, background 0.3s ease;
}

.content-box .btn.earn-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(90deg, #66bb6a, #388e3c);
}

.content-box .report-content {
  display: inline-block;
  margin-top: 15px;
  font-size: 0.9rem;
  color: #ff6b6b !important;
  text-decoration: none;
  font-weight: bold;
}

.content-box .report-content:hover {
  text-decoration: underline;
}

input[readonly] {
  background-color: #222;
  cursor: not-allowed;
}


/* === PATCH Responsive v3 — Dashboard tables & overflow fixes === */

/* Make tables honor container width and wrap long content */
.table {
  table-layout: fixed; /* keep inside container */
}
.table th,
.table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Long URLs inside tables should wrap instead of overflowing */
.table a { word-break: break-all; }

/* On mobile, tighten spacing and optionally hide non-critical columns after the 4th */
@media (max-width: 768px) {
  .table th,
  .table td {
    padding: 8px 10px;
    font-size: 14px;
    vertical-align: top;
  }

  /* If a table has 5+ columns, hide the extra ones on small screens */
  .table th:nth-child(n+5),
  .table td:nth-child(n+5) {
    display: none;
  }

  /* Make action buttons full width if present */
  .table .btn,
  .table a.btn {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}

/* Cards should not clip rounded corners while allowing content to wrap */
.card {
  overflow: visible;
}

/* Prevent any accidental horizontal overflow on the page */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* === PATCH Responsive v4 — Burger visible + Menu clair + Tables lisibles === */

/* --- BURGER + MENU (mobile) --- */
.nav-toggle { display: none; }

@media (max-width: 768px) {
  .topbar { position: sticky; z-index: 1001; }
  .topbar .container { position: relative; padding-right: 56px; } /* place pour le burger */

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1px solid #2d3366;
    background: #0e1123;
    position: absolute; right: 8px; top: 8px;
    z-index: 1002;
  }
  .nav-toggle .bar {
    width: 18px; height: 2px; background: var(--muted);
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle .bar + .bar { margin-top: 5px; }
  .topbar.is-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
  .topbar.is-open .nav-toggle .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar.is-open .nav-toggle .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Panneau déroulant propre */
  .topbar .nav {
    position: absolute; left: 12px; right: 12px; top: calc(100% + 10px);
    background: rgba(15,18,33,0.96);
    border: 1px solid #252a54; border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    padding: 12px;
    display: none !important; /* override inline display:flex */
    flex-direction: column; gap: 10px; z-index: 1000;
  }
  .topbar.is-open .nav { display: flex !important; }

  .topbar .nav a,
  .topbar .nav .points-badge {
    display: block; width: 100%; text-align: left;
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid #2d3366; background: #0e1123; color: var(--text);
  }
  .topbar .nav a:hover { background: #13183a; }
}

/* --- TABLES / DASHBOARD --- */
.table { width: 100%; border-collapse: collapse; table-layout: fixed; }

/* "Vos contenus" : la table prend toute la largeur de la carte */
.card > .table, .card table { width: 100% !important; }

.table th, .table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.table a { word-break: break-all; }

@media (max-width: 768px) {
  .table th, .table td { padding: 7px 8px; font-size: 13px; line-height: 1.35; }
  .table thead th { font-size: 12.5px; letter-spacing: .2px; }
  /* Masquer colonnes 5+ sur petit écran pour éviter les débordements */
  .table th:nth-child(n+5), .table td:nth-child(n+5) { display: none; }

  /* Boutons d'action lisibles */
  .table .btn, .table a.btn {
    display: inline-flex; width: 100%; justify-content: center; margin-top: 6px;
  }
}

/* Titres un peu plus compacts sur téléphone */
@media (max-width: 480px) {
  .card h1 { font-size: clamp(22px, 7vw, 26px); line-height: 1.15; }
  .card h2 { font-size: clamp(18px, 6vw, 22px); line-height: 1.2; }
  .card h3 { font-size: clamp(16px, 5.5vw, 19px); line-height: 1.25; }
}

/* Sécurités globales */
html, body { max-width: 100%; overflow-x: hidden; }
.card, .section { overflow-wrap: anywhere; }

/* === PATCH v5 — Vos contenus : toutes les colonnes + pleine largeur + rendu propre === */

/* 1) Ne plus masquer de colonnes en mobile (on annule l’ancienne règle nth-child) */
@media (max-width: 768px) {
  .table th:nth-child(n+5),
  .table td:nth-child(n+5) {
    display: table-cell !important;
  }
}

/* 2) La carte devient un conteneur scrollable si la table est plus large que l'écran */
.card { overflow-x: auto; }

/* "h2 + .table" correspond à nos cartes avec un titre puis un tableau (Vos contenus / Dernières opés / Vos filleuls) */
.card h2 + .table {
  width: 100% !important;        /* prend toute la largeur utile */
  min-width: 860px;              /* force l’affichage de toutes les colonnes */
  table-layout: fixed;           /* évite les débordements bizarres */
  border-collapse: collapse;
}

/* Pour très petits écrans, on élargit un peu la base et le scroll fera le job */
@media (max-width: 480px) {
  .card h2 + .table { min-width: 920px; }
}

/* 3) Lisibilité compacte en mobile (moins de retours à la ligne) */
@media (max-width: 768px) {
  .table th, .table td {
    padding: 6px 8px;
    font-size: 12.5px;
    line-height: 1.3;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .table thead th {
    font-size: 12px;
    letter-spacing: .15px;
    font-weight: 600;
  }
  .table a { word-break: break-all; }
}

/* 4) Finition visuelle : en-tête subtile, zébrage discret, bordures propres */
.table thead th {
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid #252a54;
}
.table td, .table th { border-bottom: 1px solid #252a54; }
.table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* === PATCH v7 — Tables auto-dimensionnées + profils 4c / 6c === */

/* 0) Base sûre : pas de largeur mini qui coupe, auto-sizing global */
.card { overflow-x: auto; }
.table { table-layout: auto !important; width: 100% !important; }
.card h2 + .table { min-width: 0 !important; } /* annule les min-width précédents */

/* Typo compacte en mobile */
@media (max-width: 768px) {
  .table th, .table td { padding: 6px 8px !important; font-size: 12.5px !important; line-height: 1.35 !important; }
  .table thead th { font-size: 12px !important; letter-spacing: .15px; }
}

/* 1) PROFIL 4 COLONNES (ex: Dernières opérations)
   Colonnes: [1 Date][2 Contenu][3 Utilisateur][4 Points]
   -> 1,3,4 rétrécies ; 2 (Contenu) flexible  */
.table thead tr > th:nth-child(1):nth-last-child(4),
.table tbody tr > td:nth-child(1):nth-last-child(4) {
  width: 1% !important; white-space: nowrap !important;
}
.table thead tr > th:nth-child(2):nth-last-child(3),
.table tbody tr > td:nth-child(2):nth-last-child(3) {
  width: auto !important; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word;
}
.table thead tr > th:nth-child(3):nth-last-child(2),
.table tbody tr > td:nth-child(3):nth-last-child(2),
.table thead tr > th:nth-child(4):nth-last-child(1),
.table tbody tr > td:nth-child(4):nth-last-child(1) {
  width: 1% !important; white-space: nowrap !important;
}
.table tbody tr > td:nth-child(4):nth-last-child(1) { text-align: right; }

/* 2) PROFIL 6 COLONNES (ex: Vos contenus)
   Colonnes: [1 Titre][2 Plateforme][3 URL][4 Récompense][5 Statut][6 Action]
   -> 1 et 3 flexibles ; le reste tassé */
.card h2 + .table thead tr > th:nth-child(1):nth-last-child(6),
.card h2 + .table tbody tr > td:nth-child(1):nth-last-child(6),
.card h2 + .table thead tr > th:nth-child(3):nth-last-child(4),
.card h2 + .table tbody tr > td:nth-child(3):nth-last-child(4) {
  width: auto !important; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word;
}
.card h2 + .table thead tr > th:nth-child(2):nth-last-child(5),
.card h2 + .table tbody tr > td:nth-child(2):nth-last-child(5),
.card h2 + .table thead tr > th:nth-child(4):nth-last-child(3),
.card h2 + .table tbody tr > td:nth-child(4):nth-last-child(3),
.card h2 + .table thead tr > th:nth-child(5):nth-last-child(2),
.card h2 + .table tbody tr > td:nth-child(5):nth-last-child(2),
.card h2 + .table thead tr > th:nth-child(6):nth-last-child(1),
.card h2 + .table tbody tr > td:nth-child(6):nth-last-child(1) {
  width: 1% !important; white-space: nowrap !important;
}

/* 3) Finitions visuelles */
.table thead th { background: rgba(255,255,255,0.03); border-bottom: 1px solid #252a54; }
.table td, .table th { border-bottom: 1px solid #252a54; }
.table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* 4) URLs longues : coupure propre */
.table td a { word-break: break-all; }


/* === Button loader === */
.btn.is-loading, .btn.is-loading:disabled { opacity:.85; position:relative; pointer-events:none; }
.btn .btn-label { margin-left:.5rem; vertical-align:middle; }
.btn-spinner { display:inline-block; width:1em; height:1em; border:.18em solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; vertical-align:-.15em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile helpers */
img, video, iframe { max-width:100%; height:auto; }
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:768px){ .grid { grid-template-columns:1fr !important; } .container { padding-left:12px; padding-right:12px; } }

/* Icônes entête */
.th-ico {
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  opacity: .95;
}

/* Texte accessible mais masqué visuellement si nécessaire */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Par défaut (desktop) on affiche icône + texte */
.table thead th .th-text { display: inline; }

/* En mobile : n'afficher que l'icône pour gagner de la place */
@media (max-width: 768px) {
  .table thead th .th-text {
    display: none !important;
  }
  .th-ico { margin-right: 0; font-size: 18px; }
  /* Optionnel : resserrer l'en-tête pour souffler un peu */
  .table thead th { padding-top: 8px; padding-bottom: 8px; }
}

/* Icône + texte : desktop ok, mobile = icône only */
@media (max-width: 768px) {
  /* Colonne Statut : on cache le mot Actif/Inactif, on garde l'icône */
  .status-badge .label { display: none !important; }

  /* Colonne Action : on cache le libellé, bouton compact */
  .btn.toggle-content .btn-label { display: none !important; }
  .btn.toggle-content {
    padding: 8px 10px;            /* bouton plus compact en mobile */
    min-width: auto;              /* éviter largeur excessive */
  }
  .btn.toggle-content i {
    font-size: 18px;
    line-height: 1;
  }
}

/* Optionnel : centrage doux des cellules Statut/Action */
td[data-status-cell], td:last-child {
  white-space: nowrap;
  vertical-align: middle;
}

/* === Mobile : Statut & Action en icône-only, sans changer le HTML/PHP === */
@media (max-width: 768px) {
  /* STATUT : on masque le texte en réduisant la taille de police à 0,
     et on remet une taille correcte à l’icône à l’intérieur */
  td[data-status-cell] .status-badge {
    font-size: 0 !important;       /* cache le texte "Actif/Inactif" */
    gap: 0.35rem;
    padding: 6px 8px;
  }
  td[data-status-cell] .status-badge i {
    font-size: 18px !important;     /* l’icône reste visible */
    line-height: 1;
    vertical-align: middle;
  }

  /* ACTION : même technique pour le bouton "Activer/Désactiver" */
  .table .btn.toggle-content {
    font-size: 0 !important;        /* cache "Activer/Désactiver" */
    padding: 8px 10px;               /* bouton compact */
    min-width: auto;
  }
  .table .btn.toggle-content i {
    font-size: 18px !important;
    line-height: 1;
    vertical-align: middle;
  }

  /* Option : largeur mini & centrage doux des deux colonnes */
  td[data-status-cell],
  .table tbody tr > td:last-child {
    white-space: nowrap;
    text-align: center;
  }
}
.btn.toggle-content[data-status="1"] { /* prochain clic = désactiver */
  border-color: #6b2b2b;
}
.btn.toggle-content[data-status="0"] { /* prochain clic = activer */
  border-color: #2b6b3a;
}

/* Desktop par défaut : montrer texte */
.btn.toggle-content .btn-label { display: inline; }

/* Mobile : n'afficher que l'icône */
@media (max-width: 768px) {
  .btn.toggle-content .btn-label { display: none !important; }
  .btn.toggle-content { padding: 8px 10px; min-width: auto; }
  .btn.toggle-content i { font-size: 18px; line-height: 1; }
}

/* Si tu avais mis avant .btn.toggle-content { font-size:0 } pour masquer le texte,
   annule-le pour desktop : */
.btn.toggle-content { font-size: inherit; }


/* Plateformes : alignement + couleurs */
.platform-cell .pf {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.platform-cell .pf-youtube i   { color:#ff4b4b; }
.platform-cell .pf-tiktok i    { color:#ffffff; }
.platform-cell .pf-instagram i { color:#e1306c; }
.platform-cell .pf-facebook i  { color:#1877f2; }

/* --- Desktop (par défaut) : texte visible, icône cachée --- */
.platform-cell .pf i {
  display: none;   /* cache les icônes */
}
.platform-cell .pf .label {
  display: inline; /* garde le texte */
}

/* --- Mobile (<768px) : icône visible, texte caché --- */
@media (max-width: 768px) {
  .platform-cell .pf i {
    display: inline;   /* montre l’icône */
    font-size: 18px;
    line-height: 1;
  }
  .platform-cell .pf .label {
    display: none !important; /* cache le texte */
  }
}

/* --- Desktop (par défaut) : texte seulement, cacher les icônes --- */
.platform-cell .pf i {
  display: none !important;
}
.platform-cell .pf .label {
  display: inline !important;
}

/* --- Mobile (<768px) : inverser --- */
@media (max-width: 768px) {
  .platform-cell .pf i {
    display: inline-block !important;
    font-size: 18px;
    line-height: 1;
    margin-right: 4px;
  }
  .platform-cell .pf .label {
    display: none !important;
  }
}



pagination-btn {
  background: #1e1f3a;
  border: none;
  color: #9aa6ff;
  font-size: 1.2rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-btn:hover:not(:disabled) {
  background: #6f82ff;
  color: #fff;
}

/* Réduction taille des titres dans "Vos contenus" */
.table-contents td:first-child a {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2em;
  display: inline-block;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .table-contents td:first-child a {
    font-size: 0.8rem;
    max-width: 150px;
  }
}

/* --- Compactage colonne Titre dans Vos contenus --- */
.table-contents td:first-child a {
  font-size: 13px;         /* plus petit */
  line-height: 1.3;        /* serré */
  display: inline-block;   /* permet ellipsis */
  max-width: 160px;        /* largeur max (ajuste selon ton design) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.table-contents td:first-child {
  width: 1%;               /* évite que ça mange trop de place */
  white-space: nowrap;
}

/* === VOS CONTENUS : En-têtes === */

/* Desktop (par défaut) : texte seul */
.table-contents thead .th-ico {
  display: none !important;
}
.table-contents thead .th-text {
  display: inline !important;
}

/* Mobile : icône seule */
@media (max-width: 768px) {
  .table-contents thead .th-ico {
    display: inline-block !important;
    font-size: 18px;
    margin-right: 0;
  }
  .table-contents thead .th-text {
    display: none !important;
  }
}

/* === VOS CONTENUS : Cellules Plateforme === */

/* Desktop : icône + texte */
.table-contents .platform-cell .pf i {
  display: inline-block !important;
  margin-right: 6px;
  font-size: 16px;
}
.table-contents .platform-cell .pf .label {
  display: inline !important;
}

/* Mobile : icône seule */
@media (max-width: 768px) {
  .table-contents .platform-cell .pf i {
    display: inline-block !important;
    font-size: 18px;
    margin-right: 0;
  }
  .table-contents .platform-cell .pf .label {
    display: none !important;
  }
}

.limit-warning {
  color: #ff9800; /* orange vif */
  margin-left: 6px;
  cursor: help;
}
.limit-warning:hover {
  color: #ff5722; /* rouge-orangé au survol */
}

/* --- HERO + Trust signals --- */
.hero h1 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; }
.hero .sub { color: var(--muted); margin: 6px 0 14px; }

.trust-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 10px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #0e1123; color: var(--text);
  border: 1px solid #2d3366; border-radius: 999px;
  padding: 6px 10px; font-weight: 600; font-size: 14px;
}
.chip-free { border-color: var(--ok); color: var(--ok); }
.chip-noads { border-color: var(--bad); color: var(--bad); }

/* surlignage dégradé discret pour "gratuit / sans pub" */
.hl {
  background: linear-gradient(120deg, #6f82ff55, #39d98a55);
  padding: .1em .35em; border-radius: .5em;
}

/* CTA plus costaud + micro-copie rassurante */
.btn-xl { padding: 14px 18px; font-size: 17px; border-radius: 14px; }
.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta-note { color: var(--muted); display: inline-flex; gap: 8px; }

/* Liste de bénéfices courte et visible */
.hero-benefits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px; margin: 8px 0 6px; padding: 0; list-style: none;
}
.hero-benefits li {
  background: #0e1123; border: 1px dashed #39408a;
  border-radius: 10px; padding: 10px 12px; font-size: 14px;
}

/* Ruban flottant (optionnel) qui martèle le message partout */
.ribbon {
  position: fixed; bottom: 16px; right: 16px; z-index: 1000;
  background: linear-gradient(120deg, #6f82ff, #9aa6ff);
  color:#0b0e23; border-radius: 999px; font-weight: 800;
  padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.ribbon i { margin-right: 6px; }

/* Mobile */
@media (max-width:768px){
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-note { text-align: center; }
}

/* === Earn points : grille de plateformes === */
.earn-section .card { max-width: 900px; margin-left: auto; margin-right: auto; }

/* === Contents add : grille de selection de type === */
.register-form .platform-select-grid { margin-bottom: 8px; }

/* === Confirm button style === */
.btn-confirm {
  background: linear-gradient(120deg, #2ecc71, #27ae60);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 12px 28px;
  border-radius: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-confirm:hover:not(:disabled) {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(46,204,113,0.3);
}
.btn-confirm.countdown {
  background: linear-gradient(120deg, #555, #444);
  cursor: not-allowed;
  opacity: 0.85;
}
.btn-confirm.countdown:hover {
  transform: none;
  box-shadow: none;
}

/* === Earn button improved === */
.earn-btn {
  font-size: 1.1rem;
  padding: 12px 24px;
  background: linear-gradient(90deg, #4caf50, #2e7d32);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
}
.earn-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(76,175,80,0.3);
}

/* === Mobile polish === */
@media (max-width: 480px) {
  .content-box { padding: 15px; }
  .content-box h3 { font-size: 1.1rem; }
  .earn-btn, .btn-confirm { font-size: 1rem; padding: 10px 20px; }
}