/* =================================================================
   ICC — Mockups d'appareils (Zoom · Espace de formation · Telegram · Binôme)
   Dessinés en CSS. Palette ICC. À charger après icc.css sur les pages de vente.
   ================================================================= */

.devscene { background: radial-gradient(125% 130% at 80% -10%, #36422C 0%, var(--forest) 60%); color: var(--on-dark-1); position: relative; overflow: hidden; }
.devscene::after { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 24%, rgba(255,243,216,.5), transparent),
    radial-gradient(2px 2px at 72% 16%, rgba(255,243,216,.4), transparent),
    radial-gradient(1.4px 1.4px at 40% 70%, rgba(255,243,216,.3), transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(255,243,216,.3), transparent); }
.devscene > .wrap { position: relative; z-index: 2; }

/* ----- Composition ----- */
.devices { display: flex; align-items: center; justify-content: center; margin: 0 auto; max-width: 980px; position: relative; }
.dv { box-shadow: 0 40px 70px -34px rgba(0,0,0,.7); flex: none; }
.dv-tablet { transform: rotate(-4deg); margin-right: -38px; z-index: 1; }
.dv-laptop { z-index: 3; }
.dv-phone  { transform: rotate(4.5deg); margin-left: -46px; margin-bottom: 26px; z-index: 4; }

/* ----- Laptop ----- */
.dv-laptop { width: min(540px, 92%); }
.dv-laptop .scr { background:#14171b; border:13px solid #23262b; border-bottom:none; border-radius:18px 18px 0 0; aspect-ratio:16/10; overflow:hidden; }
.dv-laptop .base { height:15px; background:linear-gradient(#d9dcd8,#a6aaa4); border-radius:0 0 13px 13px; position:relative; }
.dv-laptop .base::after { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:84px; height:6px; background:#8b8f89; border-radius:0 0 7px 7px; }

/* ----- Tablet ----- */
.dv-tablet { width: 270px; border:13px solid #23262b; border-radius:28px; background:#23262b; }
.dv-tablet .scr { background:#fff; border-radius:15px; overflow:hidden; aspect-ratio:3/4; }

/* ----- Phone ----- */
.dv-phone { width: 196px; border:11px solid #1b1d20; border-radius:36px; background:#1b1d20; }
.dv-phone .scr { background:#0d0f13; border-radius:25px; overflow:hidden; aspect-ratio:9/19; position:relative; }
.dv-phone .notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:46%; height:18px; background:#1b1d20; border-radius:0 0 13px 13px; z-index:6; }

/* ===== Contenu : Zoom / visio ===== */
.zoom { display:flex; flex-direction:column; height:100%; font-family:'Poppins',sans-serif; color:#eceee9; }
.zoom-top { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#1b1e23; font-size:10.5px; }
.zoom-rec { display:inline-flex; align-items:center; gap:5px; color:#ff6b5e; font-weight:600; }
.zoom-rec i { width:7px; height:7px; border-radius:50%; background:#ff6b5e; display:inline-block; animation:zRec 1.4s ease-in-out infinite; }
@keyframes zRec { 50%{opacity:.3;} }
.zoom-title { color:#c9cdc4; }
.zoom-time { margin-left:auto; color:#9aa094; }
.zoom-grid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:5px; padding:7px; background:#111317; }
.ztile { position:relative; border-radius:7px; overflow:hidden; background:#262a30; display:flex; align-items:center; justify-content:center; }
.ztile img { width:100%; height:100%; object-fit:cover; object-position:50% 28%; }
.ztile .zav { width:42%; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; color:#fff; background:var(--av,#7C9266); }
.ztile .zname { position:absolute; left:5px; bottom:4px; font-size:9px; background:rgba(0,0,0,.55); padding:2px 6px; border-radius:5px; color:#fff; }
.ztile.host { outline:2px solid var(--gold-bright); outline-offset:-2px; }
.ztile.host .zname { background:rgba(195,154,60,.92); color:#1b1d20; font-weight:600; }
/* speaker view (solo / individuel) */
.zoom.solo .zoom-grid { display:block; position:relative; padding:0; }
.zoom.solo .ztile.big { position:absolute; inset:7px; width:auto; height:auto; }
.zoom.solo .ztile.big img { object-position:50% 30%; }
.zoom.solo .ztile.pip { position:absolute; right:13px; bottom:13px; width:30%; aspect-ratio:4/3; border:2px solid #14171b; z-index:3; }
/* Vraie capture Zoom insérée dans l'écran */
.zoom-stage { flex:1; overflow:hidden; background:#0d0f13; position:relative; }
.zoom-stage img { width:100%; height:100%; object-fit:cover; object-position:50% 24%; display:block; }
.zoom-stage .zname { position:absolute; left:7px; bottom:6px; font-size:9px; background:rgba(0,0,0,.6); padding:2px 7px; border-radius:5px; color:#fff; z-index:2; }
.zoom-bar { display:flex; align-items:center; justify-content:center; gap:13px; padding:8px; background:#1b1e23; }
.zb { width:24px; height:24px; border-radius:7px; background:#2c3138; display:flex; align-items:center; justify-content:center; color:#cfd3cb; }
.zb svg { width:13px; height:13px; }
.zb.leave { background:#d9594b; color:#fff; width:34px; }

/* ===== Contenu : Espace de formation (LMS) ===== */
.lms { height:100%; display:flex; flex-direction:column; font-family:'Poppins',sans-serif; color:var(--ink); background:var(--paper); }
.lms-top { display:flex; align-items:center; gap:7px; padding:9px 12px; border-bottom:1px solid var(--line); }
.lms-top img { width:18px; height:18px; }
.lms-top span { font-size:11px; font-weight:600; letter-spacing:.04em; }
.lms-top .tag { margin-left:auto; font-size:8.5px; color:var(--terra-deep); font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
.lms-player { position:relative; aspect-ratio:16/9; overflow:hidden; }
.lms-player img { width:100%; height:100%; object-fit:cover; }
.lms-player::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,23,27,.55), transparent 55%); }
.lms-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; z-index:2; }
.lms-play::after { content:""; border-left:12px solid var(--terra); border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px; }
.lms-cap { position:absolute; left:9px; bottom:7px; z-index:2; color:#fff; font-size:9.5px; font-weight:500; }
.lms-cap b { display:block; font-family:'Playfair Display',serif; font-size:12px; font-weight:600; }
.lms-prog { padding:11px 12px 8px; }
.lms-prog .pl { display:flex; justify-content:space-between; font-size:9.5px; color:var(--body-soft); margin-bottom:5px; }
.lms-bar { height:6px; background:var(--paper-3); border-radius:99px; overflow:hidden; }
.lms-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--sage),var(--gold)); border-radius:99px; }
.lms-list { list-style:none; margin:4px 0 0; padding:6px 12px 12px; font-size:10px; overflow:hidden; }
.lms-list li { display:flex; align-items:center; gap:7px; padding:6px 0; border-bottom:1px solid var(--line); color:var(--body); }
.lms-list li:last-child { border-bottom:none; }
.lms-list li .ck { width:14px; height:14px; border-radius:50%; border:1.5px solid var(--line-strong); flex:none; }
.lms-list li.done .ck { background:var(--sage); border-color:var(--sage); position:relative; }
.lms-list li.done .ck::after { content:""; position:absolute; left:4px; top:3px; width:4px; height:7px; border-right:1.6px solid #fff; border-bottom:1.6px solid #fff; transform:rotate(40deg); }
.lms-list li.now { color:var(--terra-deep); font-weight:600; }
.lms-list li.now .ck { border-color:var(--terra); }
.lms-list li.now .ck::after { content:""; display:block; width:0; height:0; border-left:5px solid var(--terra); border-top:3px solid transparent; border-bottom:3px solid transparent; margin:3.5px 0 0 5px; }

/* ===== Contenu : Telegram / groupe ===== */
.tg { height:100%; display:flex; flex-direction:column; font-family:'Poppins',sans-serif; background:#efe7da; }
.tg-top { display:flex; align-items:center; gap:8px; padding:24px 12px 9px; background:var(--forest); color:#fff; }
.tg-top .bk { font-size:17px; color:var(--gold-bright); }
.tg-top .av { width:30px; height:30px; border-radius:50%; background:#2c3426; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tg-top .av img { width:118%; height:118%; object-fit:cover; }
.tg-top .gi b { display:block; font-size:11.5px; font-weight:600; }
.tg-top .gi em { font-style:normal; font-size:9px; color:var(--sage-mid); }
.tg-msgs { flex:1; padding:10px 9px; display:flex; flex-direction:column; gap:7px; overflow:hidden; }
.tg-day { align-self:center; font-size:8.5px; color:#8a8472; background:rgba(0,0,0,.06); padding:2px 9px; border-radius:99px; }
.msg { max-width:82%; padding:7px 10px; border-radius:13px; font-size:10px; line-height:1.4; position:relative; }
.msg .who { display:block; font-size:9px; font-weight:600; margin-bottom:1px; color:var(--c,var(--terra-deep)); }
.msg.in { align-self:flex-start; background:#fff; color:#2a2a2a; border-bottom-left-radius:4px; }
.msg.out { align-self:flex-end; background:var(--sage-soft); color:#2a301f; border-bottom-right-radius:4px; }
.msg.out .who { color:var(--terra-deep); }
.tg-react { align-self:flex-start; margin:-3px 0 0 4px; font-size:9px; background:#fff; padding:2px 8px; border-radius:99px; color:var(--terra-deep); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.tg-input { display:flex; align-items:center; padding:8px 10px 11px; background:#e3dacb; }
.tg-input span { flex:1; background:#fff; border-radius:99px; padding:7px 12px; font-size:10px; color:#a59f8f; }
.tg-input .snd { width:26px; height:26px; border-radius:50%; background:var(--terra); margin-left:7px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; }

/* ===== Carte flottante Binôme (page Praticien) ===== */
.binome-card { position:absolute; z-index:5; left:-22px; bottom:-14px; width:218px; background:var(--paper); color:var(--ink); border-radius:var(--radius); padding:18px 20px; box-shadow:0 30px 60px -28px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.5); }
.binome-card .bk-label { font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.binome-card h4 { font-size:1.15rem; margin-top:6px; }
.binome-duo { display:flex; align-items:center; margin:14px 0 10px; }
.binome-duo .ba { width:42px; height:42px; border-radius:50%; border:2px solid var(--paper); background:var(--sage); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem; overflow:hidden; }
.binome-duo .ba:nth-child(2){ margin-left:-12px; background:var(--terra); }
.binome-duo .ba img { width:100%; height:100%; object-fit:cover; }
.binome-duo .blink { flex:1; height:1px; border-top:1.5px dashed var(--line-strong); margin:0 10px; position:relative; }
.binome-card .bk-sub { font-size:.82rem; color:var(--body-soft); }
.binome-card .bk-sub b { color:var(--terra-deep); }

/* ----- Légendes des surfaces ----- */
.dev-caps { display:grid; gap:22px; margin-top:64px; }
.dev-caps.c3 { grid-template-columns:repeat(3,1fr); }
.dev-caps.c5 { grid-template-columns:repeat(5,1fr); }
.dev-cap { text-align:center; }
.dev-cap .dc-ic { width:42px; height:42px; margin:0 auto 12px; border-radius:50%; border:1px solid var(--gold-bright); display:flex; align-items:center; justify-content:center; color:var(--gold-bright); }
.dev-cap .dc-ic svg { width:20px; height:20px; }
.dev-cap h4 { color:var(--on-dark-1); font-size:1.05rem; }
.dev-cap p { color:var(--on-dark-2); font-size:.9rem; margin-top:6px; }

@media (max-width: 980px) {
  .dev-caps.c5 { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 820px) {
  .devices { flex-direction:column; gap:26px; }
  .dv-tablet, .dv-phone { transform:none; margin:0; }
  .dv-laptop { width:100%; max-width:460px; }
  .dv-tablet { width:300px; }
  .binome-card { position:static; width:100%; max-width:320px; margin:0 auto -6px; }
  .dev-caps.c3, .dev-caps.c5 { grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px) {
  .dev-caps.c3, .dev-caps.c5 { grid-template-columns:1fr; }
}