/* ChatDirect — visuels réels animés des pages CRM et Agent IA (refonte 2026, direction A).
   Fichier séparé de site-2026.css (ne pas fusionner sans le dev-frontend). Jetons de couleur : ceux de site-2026.css.
   Structure : figure.crm-media > .crm-frame > .crm-screen > img.crm-poster (+ video.crm-video par-dessus quand elle joue). */
.crm-media{position:relative;margin:0;max-width:100%}
.crm-frame{position:relative;margin-inline:auto;box-shadow:var(--sh-3)}
.crm-screen{position:relative;overflow:hidden;background:#fff}
.crm-poster,.crm-video{display:block;width:100%;height:auto}
.crm-video{position:absolute;inset:0;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.crm-media.is-live .crm-video{opacity:1}

/* Cadre téléphone : sobre, encre en clair, plus clair en sombre (l'écran garde son contenu réel) */
.crm-media--phone .crm-frame{width:min(100%,290px);padding:9px;border-radius:46px;background:#1B2B24;box-shadow:var(--sh-3),inset 0 0 0 1px rgba(255,255,255,.08)}
.crm-media--phone .crm-screen{border-radius:37px;aspect-ratio:600/1304}
:root[data-theme="dark"] .crm-media--phone .crm-frame{background:#2A3B33;box-shadow:var(--sh-3),inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.06)}

/* Cadre navigateur (captures du portail et du widget sur une page) */
.crm-media--browser .crm-frame{border-radius:16px;overflow:hidden;background:var(--card);box-shadow:var(--sh-3),0 0 0 1px var(--line)}
.crm-media--browser .crm-frame::before{content:"";display:block;height:30px;background:var(--bg-2) radial-gradient(circle,#D9AD5B 0 4px,transparent 4.5px) 16px 50%/12px 12px no-repeat;
  box-shadow:inset 0 -1px 0 var(--line)}
.crm-media--browser .crm-frame::after{content:"";position:absolute;top:11px;left:34px;width:28px;height:8px;border-radius:4px;background:radial-gradient(circle,var(--line-2) 0 4px,transparent 4.5px) 0 50%/12px 8px repeat-x}

.crm-media figcaption{margin-top:14px;font-size:14.5px;color:var(--dim);text-align:center;line-height:1.45}
.crm-media figcaption small{display:block;font-size:12.5px;margin-top:2px;opacity:.9}
.crm-pause{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:10px auto 0;padding:0 14px;border:0;border-radius:999px;cursor:pointer;
  font-size:13.5px;font-weight:500;background:var(--card);color:var(--dim);box-shadow:inset 0 0 0 1px var(--line)}
.crm-media .crm-pause{display:flex}
.crm-media .crm-pause[hidden]{display:none}
.crm-pause:hover{color:var(--ink)}
.crm-pause .ic{width:14px;height:14px}
.crm-pause .t-play,.crm-pause .i-play{display:none}
.crm-pause[aria-pressed="true"] .t-play,.crm-pause[aria-pressed="true"] .i-play{display:inline}
.crm-pause[aria-pressed="true"] .t-pause,.crm-pause[aria-pressed="true"] .i-pause{display:none}

/* Emplacement dans une rubrique (.rub-h = colonne du titre) */
.rub-h .crm-media{margin-top:28px}
.rub-h .crm-media--phone .crm-frame{margin-inline:0}
.rub-h .crm-media--phone figcaption{text-align:left;max-width:290px}
.rub-h .crm-media--phone .crm-pause{margin-inline:0}
@media (max-width:900px){
  .rub-h .crm-media--phone .crm-frame{margin-inline:auto}
  .rub-h .crm-media--phone figcaption{text-align:center;margin-inline:auto}
  .rub-h .crm-media--phone .crm-pause{margin-inline:auto}
}
@media (max-width:360px){.crm-media--phone .crm-frame{width:min(100%,250px);padding:7px;border-radius:40px}.crm-media--phone .crm-screen{border-radius:33px}}

/* Visuels à deux versions (clair / sombre) : l'affiche suit le thème du site */
.crm-poster[data-th="dark"]{display:none}
:root[data-theme="dark"] .crm-poster[data-th="dark"]{display:block}
:root[data-theme="dark"] .crm-poster[data-th="light"]{display:none}
/* Widget filmé : cadre navigateur à largeur de colonne */
.crm-media--widget .crm-frame{width:min(100%,420px)}
.crm-media--widget .crm-screen{aspect-ratio:780/1086}
.rub-h .crm-media--widget .crm-frame{margin-inline:0}
.rub-h .crm-media--widget figcaption,.rub-h .crm-media--widget .crm-pause{text-align:left;margin-inline:0;max-width:420px}
@media (max-width:900px){.rub-h .crm-media--widget .crm-frame,.rub-h .crm-media--widget figcaption,.rub-h .crm-media--widget .crm-pause{margin-inline:auto;text-align:center}}