/* =============================
 * Play - CSS UNIQUE (page /play)
 * ============================= */

body.play-scope{
  font-family:'Montserrat',sans-serif !important;
  background-color:var(--surface,#fff);
}
html[data-theme="dark"] body.play-scope{
  background-color:var(--surface,#0f1115);
}

#play{
margin-top:clamp(20px,4vw,40px);
margin-bottom:clamp(20px,4vw,40px);
}

.container.ax-container{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(12px,2.2vw,18px);
  padding-right:clamp(12px,2.2vw,18px);
}

.play-section{ scroll-margin-top: 90px; }
.play-h2{ margin:0 0 10px; font-weight:900; }

/* INTRO (autorise le HTML aussi si besoin) */
.play-intro{
  margin:0 0 18px;
  color:var(--muted);
  font-weight:600;
  line-height:1.55;
}
.play-intro b { color: var(--text); }

/* =============================
 * Tokens
 * ============================= */
#play{
--accent-cards: var(--accent-cards, #ff6632);
--accent-ink:#ffffff;
--text:#111316;
--surface:#ffffff;
--surface-2:#f1f2f4;
--border:#e5e7eb;
--muted:#6b7280;
--shadow:0 8px 18px rgba(0,0,0,.06);
--shadow-strong:0 14px 34px rgba(0,0,0,.10);
color:var(--text);
}
html[data-theme="dark"] #play{
  --text:#e5e7eb;
  --surface:#0f1115;
  --surface-2:#171a1f;
  --border:rgba(255,255,255,.12);
  --muted:#9aa3af;
  --shadow:0 10px 26px rgba(0,0,0,.48);
  --shadow-strong:0 18px 44px rgba(0,0,0,.60);
}

/* =============================
 * Grilles
 * ============================= */
#play .ax-grid{
display:grid;
gap:clamp(12px,2.2vw,18px);
grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:980px){
  #play .ax-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  #play .ax-grid{ grid-template-columns:1fr; }
}

/* Reels grid */
#play .ax-grid.reels-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
align-items:stretch;
}
@media (max-width:980px){
  #play .ax-grid.reels-grid{ grid-template-columns:1fr; }
}

/* =============================
 * Cartes base
 * ============================= */
#play .ax-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:16px;
box-shadow:var(--shadow);
overflow:hidden;
}
#play .ax-card-inner{
padding:clamp(12px,1.6vw,16px);
}
#play .ax-badge{
display:inline-block;
padding:.35em .6em;
font-size:.78rem;
font-weight:800;
border-radius:999px;
color:var(--accent-ink);
background:color-mix(in srgb, var(--accent-cards) 88%, transparent);
border:1px solid color-mix(in srgb, var(--accent-cards) 60%, #fff 40%);
box-shadow:0 4px 10px color-mix(in srgb, var(--accent-cards) 28%, transparent);
width:fit-content;
}

/* =============================
 * Reels : layout "homepage-like"
 * ============================= */
#play .reel-card{ position:relative; }

#play .reel-layout{
display:grid;
gap:14px;
align-items:stretch;
grid-template-columns: clamp(200px, 18vw, 260px) 1fr;
grid-template-areas: "media body" "caption caption";
}

#play .reel-media{ grid-area: media; }

/* Modif : Padding gauche augmenté pour décoller le texte de la vidéo */
#play .reel-body{
grid-area: body;
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:10px;
padding: 2px 0 0 25px; /* ICI : 25px à gauche */
}

/* Caption */
#play .reel-caption{
grid-area: caption;
margin:0;
padding:2px 4px 0;
text-align:center;
color:var(--muted);
font-weight:700;
font-size:0.86rem;
line-height:1.35;
opacity:0.95;
}

/* Vidéo Frame */
#play .reel-video-frame{
width: clamp(200px, 18vw, 260px);
aspect-ratio:9/16;
position:relative;
background:#000;
border-radius:14px;
overflow:hidden;
border:1px solid var(--border);
}

/* Titre */
#play .reel-title{
margin:0;
font-weight:900;
font-size:1.02rem;
line-height:1.3;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

/* Meta */
#play .reel-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
font-size:0.82rem;
color:var(--muted);
font-weight:700;
}
#play .reel-meta i{ color: var(--accent-cards); }

/* --- TEXTE RICHE INTELLIGENT --- */
#play .reel-text{
margin:0;
color:color-mix(in srgb, var(--text) 78%, var(--muted));
font-weight:500;

/* Ligne ajustée pour les sauts de ligne */
line-height:1.55;
font-size:0.93rem;

/* On supprime les limites */
display:block;
overflow:visible;
height:auto;
-webkit-line-clamp: unset;
}

/* Styles HTML autorisés dans le texte */
#play .reel-text b,
#play .reel-text strong {
font-weight: 800;
color: var(--text);
}
#play .reel-text i,
#play .reel-text em {
font-style: italic;
color: var(--muted);
}
#play .reel-text a {
color: var(--accent-cards);
text-decoration: underline;
}

/* Liens Chips */
#play .reel-links{ display:flex; flex-wrap:wrap; gap:8px; }
#play .reel-link{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:999px;
text-decoration:none;
background:var(--surface-2);
border:1px solid var(--border);
color:var(--text);
font-weight:800;
font-size:0.88rem;
max-width:100%;
transition:transform .12s ease, box-shadow .12s ease;
}
#play .reel-link:hover{
transform:translateY(-1px);
box-shadow:var(--shadow-strong);
}
#play .reel-link span{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:220px;
}
#play .reel-link i{ color: var(--accent-cards); }

/* Share */
#play .share-card{
margin-top:auto;
padding-top:10px;
border-top:1px solid var(--border);
}
#play .share-card .share{ display:flex; flex-wrap:wrap; gap:8px; }
#play .share-card .chip{
display:inline-flex;
align-items:center;
gap:6px;
padding:.5em .7em;
font-weight:800;
font-size:13px;
border-radius:999px;
cursor:pointer;
border:1px solid var(--border);
background:var(--surface-2);
color:var(--text);
text-decoration:none;
transition:transform .12s ease, box-shadow .12s ease;
}
#play .share-card .chip:hover{
transform:translateY(-1px);
box-shadow:var(--shadow-strong);
}
#play .share-card .chip.whatsapp{ background:#25D366; color:#fff; border-color:#25D366; }
#play .share-card .chip.facebook{ background:#1877F2; color:#fff; border-color:#1877F2; }
#play .share-card .chip.copy{ background:var(--surface-2); color:var(--text); border-color:var(--border); }

/* =============================
 * Vidéo/Poster
 * ============================= */
#play .reel-video-frame .ax-video,
#play .reel-video-frame .ax-poster{
position:absolute; inset:0; width:100%; height:100%; display:block; background:transparent; object-fit:contain;
}
#play .reel-video-frame .ax-poster{ z-index:1; pointer-events:none; transition:opacity .2s ease, visibility .2s ease; }
#play .reel-video-frame.is-playing .ax-poster,
#play .reel-video-frame.playing .ax-poster{ opacity:0; visibility:hidden; }

#play .reel-video-frame .ax-bigplay{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
display:inline-grid; place-items:center; width:56px; height:56px;
border-radius:50%; color:var(--accent-ink);
background:color-mix(in srgb, var(--accent-cards) 88%, transparent);
box-shadow:0 14px 34px rgba(0,0,0,.25), 0 0 0 3px rgba(255,255,255,.25) inset;
border:0; padding:0; cursor:pointer; z-index:3;
}
#play .reel-video-frame .ax-fs{
position:absolute; right:10px; top:10px; z-index:6; background:transparent; border:0; padding:0; cursor:pointer; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
#play .reel-badge{
position:absolute; left:10px; right:auto; top:10px; z-index:6;
display:inline-flex; align-items:center; gap:8px; padding:8px 10px;
border-radius:999px; background:var(--reel-badge-bg, rgba(0,0,0,0.72));
color:var(--reel-badge-color, #fff); border:1px solid rgba(255,255,255,0.18);
box-shadow:0 10px 22px rgba(0,0,0,0.18); font-weight:900; font-size:12px;
}
#play .reel-badge img{ width:18px; height:18px; object-fit:contain; display:block; }

#play .reel-video-frame .ax-controls{
display:flex; align-items:center; gap:8px; padding:10px 10px 8px; border-radius:12px;
background:color-mix(in srgb, #000 45%, transparent);
position:absolute; left:10px; right:10px; bottom:10px; z-index:4;
opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease;
box-sizing:border-box; overflow:hidden;
}
#play .reel-video-frame.is-playing .ax-controls{ opacity:1; transform:translateY(0); }
#play .reel-video-frame .ax-controls .ctrl{ flex:0 0 auto; background:transparent; border:0; color:#fff; cursor:pointer; padding:0; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:999px; }
#play .reel-video-frame .ax-controls .time{ flex:0 0 auto; color:#fff; font-weight:800; font-size:12px; opacity:.95; min-width:44px; text-align:center; }
#play .reel-video-frame .ax-controls .seek{ flex:1 1 auto; min-width:0; width:100%; }
#play .ax-controls .seek{ flex:1 1 auto; min-width:0; width:100%; }

/* Iframe */
#play .ax-frame.video{
position:relative; width:100%; aspect-ratio:16/9; background:#000;
border:1px solid var(--border); border-radius:14px; overflow:hidden;
}
#play .ax-frame.video .ax-video,
#play .ax-frame.video .ax-poster{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
#play .ax-frame.video .ax-poster{ z-index:1; pointer-events:none; }
#play .ax-frame.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:2; }

/* =============================
 * Mobile: layout reels en colonne
 * ============================= */
@media (max-width:980px){
  #play .reel-layout{
  grid-template-columns:1fr;
  grid-template-areas: "media" "caption" "body";
  }
  #play .reel-video-frame{ width:100%; max-width:520px; margin:0 auto; }

  /* Reset du padding en mobile */
  #play .reel-body{ padding: 10px 0 0 0; }

  #play .reel-link span{ max-width:320px; }
}

/* Fullscreen */
.ax-frame.video.is-fullscreen,
.reel-video-frame.is-fullscreen{ background:#000; }
.ax-frame.video.is-fullscreen .ax-video,
.reel-video-frame.is-fullscreen .ax-video{ object-fit:contain !important; }

/* Sticky toggle */
.play-sticky-toggle{
  position:fixed; right:14px; bottom:14px; z-index:999; display:flex; gap:8px; padding:8px;
  border-radius:999px; background:color-mix(in srgb, var(--surface) 86%, transparent);
  border:1px solid var(--border); box-shadow:var(--shadow-strong); backdrop-filter: blur(10px);
}
html[data-theme="dark"] .play-sticky-toggle{ background:color-mix(in srgb, #0f1115 78%, transparent); }
.pst-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--text); font-weight:900; cursor:pointer; }
.pst-btn.is-active{ background:color-mix(in srgb, var(--accent-cards) 18%, transparent); border-color:color-mix(in srgb, var(--accent-cards) 35%, var(--border)); }
.pst-btn i{ color: var(--accent-cards); }