/* BOUTON */
.publish-btn{
  padding:16px 30px;
  font-size:20px;
  border:none;
  border-radius:40px;
  cursor:pointer;
  font-weight: 900;
}
/* publishmodal */
.publishmodal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}
.publishmodal.active{display:flex}
/* publishcard */
.publishcard{
  background:#fff;
  width:95%;
  max-width:620px;
  border-radius:20px;
  padding:20px;
  animation:fadeUp .3s ease;
}
/* Réseaux */
.publishsocials {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:none}
}
h3{text-align:center;margin:0 0 10px}
/* INPUT */
textarea,input{
  padding:14px;
  border-radius:12px;
  border:1px solid #ddd;
  margin-bottom:12px;
  font-size:15px;
}
textarea{
  width:100%;
}
input{
  width:100%;
}
.publishsinput-icon{
  position:relative;
}
.publishsinput-icon i{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:#999;
}
.publishsinput-icon input{
  padding-left:40px;
    width:100%;
 }
/* OG PREVIEW */
.og-publishcard{
  display:none;
  border:1px solid #eee;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
}
.og-publishcard img{
  width:100%;
  height:150px;
  object-fit:cover;
  cursor:pointer;
}
.og-content{padding:10px}
.og-title{font-weight:bold}
.og-desc{
font-size:13px;
color:#555;
}
/* publishslider */
.publishslider{overflow:hidden}
.publishslides{
  display:flex;
  transition:.3s ease;
}
.publishslide{
    min-width:100%;
  align-items: center;
  text-align: center;
}
/* SOCIAL */
.publishssocial{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:6px;
  border-radius:16px;
  border:none;
  font-size:16px;
  color:#fff;
  cursor:pointer;
}
.wa{background:#25D366}
.fb{background:#1877F2}
.ms{background:#0084FF}
.tg{background:#0088cc}
.tw{background:#000}
.ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}
/* publishdots */
.publishdots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin:10px 0;
}
.publishdot{
  width:8px;height:8px;
  border-radius:50%;
  background:#ccc;
}
.publishdot.active{background:#000}
/* FOOTER */
.publishfooter{
  text-align:center;
  font-size:13px;
  color:#666;
  margin-top:8px;
}
.publishclose{
  text-align:center;
  margin-top:10px;
  cursor:pointer;
  color:#000;
}
.msg{
  width:100%;
  min-height:8em;      /* ≈ 6 lignes */
  resize:vertical;
}
    * { margin: 0; padding: 0; box-sizing: border-box; }
    .monetisationcontainer {
      max-width: 900px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .cardsrowmsgdist {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .cardinterne {
      background: white;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
      border: 0px solid #333;
      flex: 1;
      min-width: 280px;
      max-width: 420px;
    }
    .cardinterne:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
    .cardinterne-title {
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: #4fc3f7;
    }
    .cardinterne-text {
      font-size: 1.1rem;
      color: #151111;
      line-height: 1.7;
    }
    .containercomm {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }
    .video-containerventedist {
      width: 100%;
      max-width: 300px;
      cursor: pointer;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }
    .video-containerventedist:hover { opacity: 0.9; }
    .video-thumbnaildist { width: 100%; height: auto; display: block; }
    .publish-close-btndist,
    .publishbtndist {
      background: #4caf50;
      color: white;
      font-size: 1.1rem;
      font-weight: 600;
      padding: 12px 28px;
      border-radius: 50px;
      cursor: pointer;
      text-align: center;
      transition: background 0.3s;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    .publishbtndist:hover { background: #45a049; }
    /* Modals */
    .modal-ventedist, .modal-publishdist {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0; top: 0;
      width: 100%; height: 100%;
      background-color:#f8f4f427;
      justify-content: center;
      align-items: center;
    }
    .modal-content-ventedist {
      position: relative;
      background: #121212;
      border-radius: 12px;
      padding: 16px;
      max-width: 98%;
      max-height: 100vh;
      overflow: hidden;
    }
    .close-ventedist {
      position: absolute;
      top: 2px; right: 16px;
      color: #fff;
      font-size: 28px;
      cursor: pointer;
    }
    .close-ventedist:hover { color: #ff6b6b; }
    #videoFrameventedist {
      width: 100%;
      height: auto;
      min-height: 715px;
      aspect-ratio: 16 / 9;
      border: none;
    }
    .publishcarddist {
      background: #fff8d9;
      border-radius: 16px;
      padding: 24px;
      width: 90%;
      max-width: 700px;
      position: relative;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
    .publishcarddist h3 {
      margin-bottom: 16px;
      color: #4fc3f7;
      font-size: 1.3rem;
    }
    .msgdist {
      width: 100%;
      height: 140px;
      padding: 12px;
      background: #2a2a2a12;
      border: 1px solid #444;
      border-radius: 8px;
      color: #292424 ;
      font-family: inherit;
      font-size: 1rem;
      resize: vertical;
      margin-bottom: 8px;
    }
    .char-counterdist {
      text-align: right;
      font-size: 0.85rem;
      color: #aaa;
      margin-bottom: 12px;
    }
    .char-counterdist.warning { color: #ff9800; }
    .char-counterdist.error { color: #f44336; }
    .publishsinput-icondist {
      position: relative;
      margin: 12px 0;
    }
    .publishsinput-icondist i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #aaa;
    }
    #publishslinkdist {
      width: 100%;
      padding: 10px 12px 10px 40px;
      background: #2a2a2a12;
      border: 1px solid #444;
      border-radius: 8px;
      color: #292424 ;
      font-family: monospace;
      font-size: 0.95rem;
      cursor: pointer;
    }
    .clickable-linkdist {
      display: block;
      margin-top: 8px;
      color: #4fc3f7;
      text-decoration: underline;
      font-size: 0.95rem;
      word-break: break-all;
    }
    .clickable-linkdist:hover { color: #81d4fa; }
    .copy-btndist, .email-btndist {
      background: #333;
      color: #ddd;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 0.95rem;
      cursor: pointer;
      margin-right: 8px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .copy-btndist:hover, .email-btndist:hover { background: #444; }
    .copy-btndist.success { background: #4caf50; color: white; }
    .og-publishcarddist {
      display: flex;
      gap: 12px;
      margin: 16px 0;
      padding: 12px;
      background: #252525;
      border-radius: 10px;
      border: 1px solid #333;
    }
    #ogImgdist {
      width: 100px;
      height: auto;
      border-radius: 8px;
      object-fit: cover;
    }
    .og-contentdist { flex: 1; }
    .og-titledist {
      font-weight: 600;
      font-size: 1rem;
      color: #fff;
      margin-bottom: 6px;
    }
    .og-descdist { font-size: 0.9rem; color: #bbb; }
    .publishsocialsdist {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin: 20px 0;
    }
    .publishssocialdist {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px;
      background: #2a2a2a;
      border-radius: 8px;
      cursor: pointer;
      color: white;
      font-size: 0.95rem;
      transition: background 0.2s;
    }
    .publishssocialdist:hover { opacity: 0.9; }
    .wa { background: #25D366; }
    .fb { background: #1877F2; }
    .ms { background: #00B2FF; }
    .tg { background: #0088cc; }
    .tw { background: #000; }
    .em { background: #d44638; }
    . {
      background: #333;
      color: #ff6b6b;
      border: none;
      padding: 10px 24px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 16px;
      width: 100%;
      font-size: 1rem;
    }
    .dist:hover { background: #444; }
    @media (max-width: 1200px) {
      .cards-row { flex-direction: column; align-items: center; }
      .cardinterne { width: 100%; max-width: 100%; }
      .og-publishcards { flex-direction: column; align-items: center; text-align: center; }
      #ogImgvente { width: 100%; max-width: 200px; }
    }
    .modal-content-ventedist {
      max-width: 98%;
      max-height: 100vh;
    }