/* ==========================================================================
   COMOG WEB · LOT 11 — Lecteur vidéo de streaming (HLS adaptatif)
   Le lecteur reste toujours sombre (comme toute plateforme vidéo), quel que
   soit le thème du site ; seules les zones d'information suivent le thème.
   Variables du site réutilisées : --orange, --orange-rgb, --vert-vif, --nuit,
   --radius-lg, --H, --text-*, --surface, --border, --shadow-xl, --ease-out.
   ========================================================================== */

.cp{
  --cp-accent:var(--orange,#e8711c);
  --cp-accent-rgb:var(--orange-rgb,232,113,28);
  --cp-fond:#000;
  --cp-voile:rgba(0,0,0,.62);
  --cp-verre:rgba(18,22,20,.86);
  --cp-texte:#fff;
  --cp-texte-2:rgba(255,255,255,.74);
  --cp-rail:rgba(255,255,255,.22);
  --cp-h-rail:4px;
  --cp-t:.25s cubic-bezier(.16,1,.3,1);
  position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;isolation:isolate;
  background:var(--cp-fond);color:var(--cp-texte);border-radius:var(--radius-lg,26px);
  box-shadow:var(--shadow-xl,0 40px 80px -20px rgba(0,0,0,.6));
  font-family:inherit;line-height:1.3;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;outline:none;
}
.cp:focus-visible{box-shadow:0 0 0 3px rgba(var(--cp-accent-rgb),.65),var(--shadow-xl)}
.cp .cp-video,.cp .cp-yt{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#000;object-fit:contain}
.cp[data-etat="lecture"],.cp[data-etat="lecture"] .cp-video{cursor:pointer}
.cp.cp-inactif[data-etat="lecture"]{cursor:none}

/* Mode YouTube : l'iframe gère ses propres contrôles */
.cp.cp-mode-yt .cp-ui{display:none}
.cp.cp-mode-yt{cursor:auto}

/* Plein écran */
.cp.cp-plein-ecran,.cp:fullscreen{border-radius:0;aspect-ratio:auto;width:100%;height:100%;box-shadow:none}
.cp:-webkit-full-screen{border-radius:0;width:100%;height:100%}

/* ── Surcouche d'interface ────────────────────────────────────────────── */
.cp-ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.cp-ui > *{pointer-events:auto}
.cp-ui button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.cp-ui button:focus-visible,.cp-ui input:focus-visible,.cp-prog:focus-visible{outline:2px solid var(--cp-accent);outline-offset:2px;border-radius:8px}

/* Dégradés haut/bas pour la lisibilité des contrôles */
.cp-ui::before,.cp-ui::after{content:"";position:absolute;left:0;right:0;pointer-events:none;transition:opacity var(--cp-t)}
.cp-ui::before{top:0;height:34%;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0))}
.cp-ui::after{bottom:0;height:46%;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.32) 55%,rgba(0,0,0,0))}

.cp-haut{position:absolute;top:0;left:0;right:0;padding:clamp(12px,2vw,22px) clamp(14px,2.4vw,26px);pointer-events:none;transition:opacity var(--cp-t),transform var(--cp-t)}
.cp-h-titre{display:block;font-family:var(--H,inherit);font-weight:700;font-size:clamp(.9rem,1.6vw,1.12rem);text-shadow:0 1px 8px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%}

/* Masquage automatique pendant la lecture */
.cp.cp-inactif[data-etat="lecture"] .cp-ui::before,
.cp.cp-inactif[data-etat="lecture"] .cp-ui::after,
.cp.cp-inactif[data-etat="lecture"] .cp-haut{opacity:0}
.cp.cp-inactif[data-etat="lecture"] .cp-bas{opacity:0;transform:translateY(12px);pointer-events:none}
.cp[data-etat="init"] .cp-haut,.cp[data-etat="init"] .cp-bas{opacity:0;pointer-events:none}
.cp[data-etat="init"] .cp-ui::after{opacity:.55}

/* ── Grand bouton central ─────────────────────────────────────────────── */
.cp-grand{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:clamp(64px,9vw,92px);height:clamp(64px,9vw,92px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:clamp(1.3rem,2.4vw,1.9rem);
  background:rgba(var(--cp-accent-rgb),.92)!important;color:#fff;padding-left:5px!important;
  box-shadow:0 12px 40px -6px rgba(var(--cp-accent-rgb),.7),0 0 0 0 rgba(var(--cp-accent-rgb),.45);
  animation:cp-ping 2.4s ease-out infinite;transition:transform var(--cp-t),opacity var(--cp-t),background var(--cp-t);
}
.cp-grand:hover{transform:translate(-50%,-50%) scale(1.08)}
.cp[data-etat="lecture"] .cp-grand,.cp[data-etat="pause"] .cp-grand,.cp[data-etat="erreur"] .cp-grand,
.cp.cp-charge .cp-grand{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}
.cp[data-etat="fin"] .cp-grand{padding-left:0!important;animation:none}
@keyframes cp-ping{70%{box-shadow:0 12px 40px -6px rgba(var(--cp-accent-rgb),.7),0 0 0 26px rgba(var(--cp-accent-rgb),0)}100%{box-shadow:0 12px 40px -6px rgba(var(--cp-accent-rgb),.7),0 0 0 0 rgba(var(--cp-accent-rgb),0)}}

/* ── Attente (mise en mémoire tampon) ─────────────────────────────────── */
.cp-attente{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;pointer-events:none!important}
.cp.cp-charge .cp-attente{opacity:1;visibility:visible}
.cp-roue{width:clamp(44px,6vw,62px);height:clamp(44px,6vw,62px);border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--cp-accent);animation:cp-tourne .8s linear infinite}
.cp-attente-t{font-size:.78rem;color:var(--cp-texte-2);text-shadow:0 1px 6px rgba(0,0,0,.7);font-variant-numeric:tabular-nums;min-height:1em}
@keyframes cp-tourne{to{transform:rotate(360deg)}}

/* ── Retours visuels : clic et double-tap ─────────────────────────────── */
.cp-flash{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--cp-voile);font-size:1.5rem;opacity:0;pointer-events:none!important}
.cp-flash.on{animation:cp-flash .55s ease-out}
@keyframes cp-flash{0%{opacity:.95;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}

.cp-dtap{position:absolute;top:0;bottom:0;width:34%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:.85rem;font-weight:600;opacity:0;pointer-events:none!important}
.cp-dtap i{font-size:1.4rem}
.cp-dtap-g{left:0;border-radius:0 50% 50% 0/0 50% 50% 0;background:radial-gradient(circle at 0 50%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%)}
.cp-dtap-d{right:0;border-radius:50% 0 0 50%/50% 0 0 50%;background:radial-gradient(circle at 100% 50%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%)}
.cp-dtap.on{animation:cp-dtap .6s ease-out}
@keyframes cp-dtap{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* ── Puce d'information (reprise, qualité…) ───────────────────────────── */
.cp-puce{position:absolute;left:clamp(12px,2vw,22px);bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:4;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:calc(100% - 28px);padding:9px 14px;border-radius:12px;background:var(--cp-verre);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.82rem;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:cp-monte .35s cubic-bezier(.16,1,.3,1)}
.cp-puce[hidden]{display:none}
.cp-lien{color:var(--cp-accent)!important;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:2px 0!important}
.cp-lien:hover{color:#fff!important}
@keyframes cp-monte{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Pilules (boutons des panneaux) ───────────────────────────────────── */
.cp-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 18px!important;border-radius:999px;font-size:.84rem;font-weight:700;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.25)!important;transition:background var(--cp-t),transform var(--cp-t)}
.cp-pill:hover{background:rgba(255,255,255,.24)!important;transform:translateY(-1px)}
.cp-pill-plein{background:var(--cp-accent)!important;border-color:var(--cp-accent)!important;box-shadow:0 8px 24px -6px rgba(var(--cp-accent-rgb),.8)}
.cp-pill-plein:hover{background:var(--orange-vif,#f5923a)!important}

/* ── Erreur ───────────────────────────────────────────────────────────── */
.cp-erreur{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cp-erreur[hidden]{display:none}
.cp-erreur > i{font-size:2.2rem;color:var(--warning,#e0962b)}
.cp-erreur-t{margin:0;max-width:440px;font-size:.92rem;color:var(--cp-texte-2)}

/* ── « À suivre » ─────────────────────────────────────────────────────── */
.cp-suivant{position:absolute;right:clamp(12px,2vw,24px);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:5;width:min(340px,calc(100% - 24px));padding:14px;border-radius:16px;background:var(--cp-verre);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.55);animation:cp-monte .4s cubic-bezier(.16,1,.3,1)}
.cp-suivant[hidden]{display:none}
.cp-suivant-e{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--cp-texte-2);margin-bottom:10px}
.cp-suivant-n{color:var(--cp-accent);font-variant-numeric:tabular-nums}
.cp-suivant-c{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.cp-suivant-img{flex:0 0 112px;aspect-ratio:16/9;border-radius:10px;background:#1a1f1c center/cover no-repeat}
.cp-suivant-t{font-family:var(--H,inherit);font-size:.92rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cp-suivant-a{display:flex;gap:8px;flex-wrap:wrap}

/* ── Barre inférieure ─────────────────────────────────────────────────── */
.cp-bas{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 clamp(10px,1.8vw,20px) calc(clamp(6px,1vw,12px) + env(safe-area-inset-bottom,0px));transition:opacity var(--cp-t),transform var(--cp-t)}

/* Progression */
.cp-prog{position:relative;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.cp-rail{position:relative;width:100%;height:var(--cp-h-rail);border-radius:99px;background:var(--cp-rail);overflow:hidden;transition:height .15s}
.cp-tampon,.cp-survol,.cp-lu{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.cp-tampon{background:rgba(255,255,255,.4)}
.cp-survol{background:rgba(255,255,255,.28)}
.cp-lu{background:linear-gradient(90deg,var(--or,#d4a63a),var(--cp-accent))}
.cp-bouton{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--cp-accent);box-shadow:0 0 0 4px rgba(var(--cp-accent-rgb),.28),0 2px 8px rgba(0,0,0,.5);transform:scale(0);transition:transform .15s;pointer-events:none}
.cp-prog:hover .cp-rail,.cp.cp-glisse .cp-rail,.cp-prog:focus-visible .cp-rail{height:7px}
.cp-prog:hover .cp-bouton,.cp.cp-glisse .cp-bouton,.cp-prog:focus-visible .cp-bouton{transform:scale(1)}

/* Aperçu (storyboard 160×90) */
.cp-apercu{position:absolute;bottom:26px;left:0;transform:translateX(-50%) translateY(6px);display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s,visibility .15s}
.cp-apercu.on{opacity:1;visibility:visible;transform:translateX(-50%)}
.cp-apercu-img{width:160px;height:90px;border-radius:8px;border:2px solid rgba(255,255,255,.9);background:#111 no-repeat;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.cp-apercu-img[hidden]{display:none}
.cp-apercu-t{padding:3px 9px;border-radius:6px;background:rgba(0,0,0,.8);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}

/* Boutons */
.cp-barre{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.cp-g,.cp-d{display:flex;align-items:center;gap:clamp(0px,.5vw,6px);min-width:0}
.cp-b{position:relative;width:42px;height:42px;flex:0 0 42px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:1.05rem;opacity:.92;transition:background var(--cp-t),opacity var(--cp-t),transform .15s}
.cp-b:hover{background:rgba(255,255,255,.14);opacity:1}
.cp-b:active{transform:scale(.9)}
.cp-b[hidden]{display:none}
.cp-lire{font-size:1.22rem}
.cp-recul small,.cp-avance small{position:absolute;font-size:.5rem;font-weight:800;top:50%;left:50%;transform:translate(-50%,-38%)}
.cp-regl i{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.cp-regl.on i{transform:rotate(60deg)}
.cp-regl.on{background:rgba(255,255,255,.14)}

/* Volume */
.cp-vol{display:flex;align-items:center}
.cp-vol-r{--vol:100%;width:0;opacity:0;margin:0;height:20px;cursor:pointer;background:transparent;-webkit-appearance:none;appearance:none;transition:width var(--cp-t),opacity var(--cp-t),margin var(--cp-t)}
.cp-vol:hover .cp-vol-r,.cp-vol:focus-within .cp-vol-r{width:78px;opacity:1;margin:0 8px 0 2px}
.cp-vol-r::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(90deg,#fff var(--vol),rgba(255,255,255,.28) var(--vol))}
.cp-vol-r::-moz-range-track{height:4px;border-radius:99px;background:linear-gradient(90deg,#fff var(--vol),rgba(255,255,255,.28) var(--vol))}
.cp-vol-r::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-4.5px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.cp-vol-r::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:0}

.cp-temps{padding:0 8px;font-size:.82rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.cp-sep,.cp-dur{color:var(--cp-texte-2)}

.cp-qbadge{padding:3px 8px;border-radius:6px;font-size:.66rem;font-weight:800;letter-spacing:.06em;background:rgba(255,255,255,.16);white-space:nowrap}
.cp-qbadge.hd{background:var(--cp-accent)}
.cp-qbadge[hidden]{display:none}

/* ── Menu Paramètres (qualité / vitesse) ──────────────────────────────── */
.cp-menu{position:absolute;right:clamp(10px,1.8vw,20px);bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:6;min-width:230px;max-width:calc(100% - 20px);max-height:calc(100% - 90px);overflow:auto;padding:8px;border-radius:14px;background:var(--cp-verre);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.6);animation:cp-monte .22s cubic-bezier(.16,1,.3,1);scrollbar-width:thin}
.cp-menu[hidden]{display:none}
.cp-menu-retour{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px!important;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.1)!important;font-weight:700;font-size:.86rem;text-align:left;border-radius:8px 8px 0 0}
.cp-menu-item{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:10px 12px!important;border-radius:9px;font-size:.86rem;text-align:left;transition:background .15s}
.cp-menu-item:hover,.cp-menu-retour:hover{background:rgba(255,255,255,.1)!important}
.cp-menu-g{display:flex;align-items:center;gap:10px}
.cp-menu-g i{width:18px;text-align:center;color:var(--cp-texte-2)}
.cp-menu-d{color:var(--cp-texte-2);font-size:.8rem;display:flex;align-items:center;gap:6px;white-space:nowrap}
.cp-menu-item.on{color:var(--cp-accent);font-weight:700}
.cp-menu-item.on .cp-menu-g i{color:var(--cp-accent)}

/* ==========================================================================
   Page Vidéos : scène, informations, grille
   ========================================================================== */
.cp-scene{margin-bottom:clamp(34px,4vw,56px)}
.cp-info{padding:clamp(18px,2vw,26px) 4px 0}
.cp-titre{font-family:var(--H,inherit);font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:800;letter-spacing:-.4px;line-height:1.25;margin:0 0 10px;color:var(--text-primary)}
.cp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;color:var(--text-muted);font-size:.86rem}
.cp-meta i{color:var(--orange);margin-right:4px}
.cp-meta b{font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.cp-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.05em;background:rgba(var(--orange-rgb),.12);border:1px solid rgba(var(--orange-rgb),.35);color:var(--orange)}
.cp-tag i{margin:0!important;color:inherit!important}
.cp-tag-adapt{background:rgba(var(--vert-rgb),.1);border-color:rgba(var(--vert-rgb),.35);color:var(--primary)}
.cp-desc{margin:14px 0 0;max-width:900px;color:var(--text-muted);line-height:1.7;white-space:pre-line}
.cp-desc[hidden]{display:none}

.cp-liste-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.cp-liste-tete i{color:var(--orange);margin-right:6px}
.cp-compte{padding:5px 14px;border-radius:999px;font-size:.8rem;font-weight:700;color:var(--text-muted);background:var(--surface);border:1px solid var(--border)}

/* Cartes : badges supplémentaires */
.vid-hd{position:absolute;left:12px;bottom:12px;z-index:2;padding:3px 8px;border-radius:6px;font-size:.66rem;font-weight:800;letter-spacing:.06em;color:#fff;background:rgba(var(--orange-rgb),.92)}
.vid-encours{position:absolute;left:12px;top:12px;z-index:3;display:none;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:.72rem;font-weight:700;color:#fff;background:var(--orange);box-shadow:var(--shadow-orange,0 8px 20px rgba(0,0,0,.3))}
.vid-card.on .vid-encours{display:inline-flex}
.vid-card.on .vid-play i{animation:none;background:var(--orange);border-color:var(--orange)}
.vid-reprise{--p:0%;position:absolute;left:0;right:0;bottom:0;z-index:3;height:4px;background:rgba(255,255,255,.28)}
.vid-reprise::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--orange)}
.vid-reprise[hidden]{display:none}
.vid-card:focus-visible{outline:3px solid rgba(var(--orange-rgb),.6);outline-offset:3px}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:640px){
  .cp{border-radius:14px}
  .cp-recul,.cp-avance,.cp-vol-r,.cp-qbadge{display:none!important}
  .cp-b{width:38px;height:38px;flex-basis:38px;font-size:.98rem}
  .cp-temps{font-size:.74rem;padding:0 4px}
  .cp-h-titre{max-width:100%}
  .cp-suivant-img{flex-basis:84px}
  .cp-menu{min-width:0;left:10px;right:10px}
  /* Vignette 160×90 trop large sur mobile : seul le temps est affiché */
  .cp-apercu-img{display:none!important}
}
@media (hover:none){
  .cp-vol-r{display:none}
  .cp-rail{height:5px}
  .cp-bouton{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .cp *,.cp *::before,.cp *::after,.vid-card .vid-play i{animation:none!important;transition:none!important}
  .cp-roue{animation:cp-tourne 1.6s linear infinite!important}
}