/* Chaînes créateurs (style YouTube, Instagram, TikTok), espace créateur et annonceurs */
.cr-lock { border: 1px dashed rgba(127,127,127,.4); border-radius: 16px; padding: 22px; background: rgba(127,127,127,.07); max-width: 620px; }
.cr-lock h3 { margin: 0 0 8px; font-size: 1.1rem; }
.cr-lock p { margin: 0 0 14px; color: var(--text-soft); line-height: 1.55; }
.cr-lock-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cr-page { max-width: 980px; margin: 0 auto; padding: 128px 16px 64px; color: var(--text); }
.cr-page h1 { margin: 0 0 20px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cr-page h2 { margin: 0 0 14px; font-size: 1.15rem; }
.cr-card { background: rgba(127,127,127,.09); border: 1px solid rgba(127,127,127,.18); border-radius: 16px; padding: 22px; margin: 0 0 22px; }
.cr-card p { color: var(--text-soft); line-height: 1.55; }
.cr-form label { display: block; margin: 0 0 14px; font-weight: 600; font-size: .95rem; }
.cr-form input[type=text], .cr-form input[type=url], .cr-form input[type=email], .cr-form input[type=number], .cr-form input[type=date], .cr-form select, .cr-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(127,127,127,.35);
  background: var(--bg); color: var(--text); font: inherit; box-sizing: border-box;
}
.cr-form input[type=file] { display: block; margin-top: 6px; color: var(--text-soft); }
.cr-form .cr-check { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.cr-form .cr-check input { width: 18px; height: 18px; }
.cr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.cr-hint { font-size: .85rem; color: var(--text-meta); margin: -8px 0 14px; }
.cr-err { color: #ff7b7b; font-size: .88rem; margin: -10px 0 12px; font-weight: 500; }
.cr-flash { padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.cr-flash.ok { background: rgba(60,160,90,.18); }
.cr-flash.err { background: rgba(200,60,60,.18); }
.cr-btn { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #111; font-weight: 700; text-decoration: none; border: 1px solid var(--accent); cursor: pointer; font: inherit; font-weight: 700; }
.cr-btn:hover { background: var(--accent-hover); }
.cr-btn.ghost { background: transparent; color: var(--accent); }
.cr-btn.ghost:hover { background: rgba(127,127,127,.12); }
.cr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 6px; }
.cr-stats div { background: var(--bg); border-radius: 12px; padding: 14px; }
.cr-stats span { display: block; color: var(--text-meta); font-size: .85rem; }
.cr-stats strong { font-size: 1.25rem; }
.cr-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cr-table th, .cr-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(127,127,127,.2); }
.cr-table a { color: var(--accent); }
.cr-tag { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .82rem; background: rgba(127,127,127,.18); color: var(--text); text-decoration: none; margin: 0 6px 6px 0; }
.cr-tag.on { background: rgba(60,160,90,.25); }
.cr-tag.hash { background: rgba(var(--accent-rgb, 224,176,74), .18); color: var(--accent); }

/* Chaîne publique */
/* Pleine largeur : la chaîne occupe toute la page */
.cr-chan { width: 100%; max-width: none; margin: -16px 0 0; padding: 0 3vw 64px; box-sizing: border-box; color: var(--text); }
/* Le conteneur général du site limite la largeur à 960 px : on le retire sur la page chaîne */
main:has(.cr-chan) { max-width: none; padding-left: 0; padding-right: 0; }
/* Vignettes des contenus : grandes, en 16/9, plusieurs par ligne selon la largeur */
.cr-grid.cr-grid-tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.cr-grid-tiles .tile { min-width: 0; }
.cr-banner { height: clamp(160px, 24vw, 320px); background: linear-gradient(120deg, #2b2b33, #5a3d22 55%, #1d2a3a); background-size: cover; background-position: center; border-radius: 0 0 18px 18px; }
/* Pas de bannière : bandeau plus bas, pour ne pas laisser un grand vide */
.cr-banner.is-empty { height: clamp(130px, 18vw, 200px); }
.cr-chan-head { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 0 20px; margin-top: -54px; }
.cr-avatar { width: 116px; height: 116px; border-radius: 50%; border: 4px solid var(--bg); background: var(--accent); color: #111; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 800; overflow: hidden; }
.cr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cr-chan-info h1 { margin: 58px 0 4px; font-size: clamp(1.5rem, 3vw, 2rem); }
.cr-meta { color: var(--text-meta); margin: 0 0 10px; font-size: .95rem; }
.cr-tagline { font-size: 1.05rem; margin: 0 0 8px; }
.cr-desc { color: var(--text-soft); line-height: 1.6; white-space: pre-line; margin: 0 0 12px; max-width: 760px; }
.cr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 14px; align-items: center; }
.cr-actions form { margin: 0; }
.cr-links { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.cr-links a { display: inline-block; padding: 6px 12px; border-radius: 10px; background: rgba(127,127,127,.14); color: var(--text); text-decoration: none; font-size: .9rem; }
.cr-links a:hover { background: rgba(127,127,127,.25); }
.cr-tabs { display: flex; gap: 6px; padding: 0 20px; margin: 30px 0 18px; border-bottom: 1px solid rgba(127,127,127,.25); overflow-x: auto; }
.cr-tabs a { padding: 12px 16px; color: var(--text-meta); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.cr-tabs a:first-child { color: var(--text); border-bottom-color: var(--accent); }
.cr-section { padding: 0 20px; margin: 0 0 40px; scroll-margin-top: 90px; }
/* Grille façon TikTok : vignettes verticales avec les vues */
.cr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cr-video { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #1a1a1f; color: #fff; text-decoration: none; }
.cr-video img, .cr-video .cr-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-video .cr-ph { background: linear-gradient(160deg, #3a3a44, #1a1a1f); }
.cr-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 55%); }
.cr-video .cr-caption { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; }
.cr-video strong { display: block; font-size: .98rem; line-height: 1.25; }
.cr-video small { display: block; opacity: .85; margin-top: 4px; font-size: .8rem; }
.cr-badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem; font-weight: 700; }
/* Messages : bulles façon messagerie */
.cr-msgs { background: rgba(127,127,127,.07); border: 1px solid rgba(127,127,127,.16); border-radius: 18px; padding: 18px; }
.cr-bubbles { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; padding: 6px 4px; margin-bottom: 12px; }
/* Chaque message occupe une ligne pleine : mes messages à droite, ceux de l'autre à gauche (façon WhatsApp) */
.cr-line { display: flex; width: 100%; }
.cr-line.is-me { justify-content: flex-end; }
.cr-line.is-them { justify-content: flex-start; }
.cr-bubble { position: relative; display: inline-block; max-width: 75%; padding: 7px 10px 6px; border-radius: 10px; line-height: 1.4; font-size: .95rem; box-shadow: 0 1px 1px rgba(0,0,0,.18); word-wrap: break-word; overflow-wrap: anywhere; }
.cr-bubble .cr-body { white-space: pre-line; }
.cr-bubble.them { background: #2a2f2c; color: var(--text); border-top-left-radius: 0; }
.cr-bubble.me { background: #1f7a4d; color: #fff; border-top-right-radius: 0; }
.cr-bubble time { display: block; text-align: right; font-size: .7rem; opacity: .72; margin-top: 2px; }
/* Fond clair : bulle verte plus claire et bulle grise claire pour l'autre */
@media (prefers-color-scheme: light) {
  .cr-bubble.them { background: #ffffff; color: #111; }
  .cr-bubble.me { background: #d9fdd3; color: #111; }
}
:root[data-theme="light"] .cr-bubble.them { background: #ffffff; color: #111; }
:root[data-theme="light"] .cr-bubble.me { background: #d9fdd3; color: #111; }
:root[data-theme="dark"] .cr-bubble.them { background: #2a2f2c; color: var(--text); }
:root[data-theme="dark"] .cr-bubble.me { background: #1f7a4d; color: #fff; }
.cr-compose textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(127,127,127,.35); background: var(--bg); color: var(--text); font: inherit; resize: vertical; }
.cr-compose { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cr-empty { color: var(--text-meta); font-size: .95rem; }
/* Liste des conversations */
.cr-conv { display: flex; gap: 12px; align-items: center; padding: 14px; border-bottom: 1px solid rgba(127,127,127,.18); color: var(--text); text-decoration: none; }
.cr-conv:hover { background: rgba(127,127,127,.08); }
.cr-conv .cr-avatar-sm { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #111; display: flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 auto; }
.cr-conv .cr-excerpt { color: var(--text-meta); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-unread { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #e0493a; color: #fff; font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
/* Résultats par hashtag */
.cr-result { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 14px; border-bottom: 1px solid rgba(127,127,127,.18); color: var(--text); text-decoration: none; }
.cr-result .cr-avatar-sm { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #111; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem; overflow: hidden; }
.cr-result .cr-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.cr-result span { color: var(--text-meta); font-size: .9rem; }

@media (min-width: 720px) { .cr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cr-row { grid-template-columns: 1fr; }
  .cr-page { padding-top: 110px; }
  .cr-chan-head { grid-template-columns: 1fr; gap: 0; }
  .cr-avatar { width: 96px; height: 96px; }
  .cr-chan-info h1 { margin-top: 10px; }
  .cr-bubble { max-width: 90%; }
}