/* reMEMEba — thème « MSN Messenger » friendly, posé sur Bootstrap 5.3 (clair).
   Accents rétro (bleu/vert MSN, dégradés doux, coins arrondis, buddy-list),
   mais lisibilité et responsive d'abord. */

:root {
  --msn-blue: #2f7fd1;
  --msn-blue-dk: #1f5fa8;
  --msn-green: #7db700;
  --msn-sky: #eaf3fc;
  --msn-panel: #ffffff;
  --msn-ink: #1c2b3a;
  --bs-primary: #2f7fd1;
  --bs-primary-rgb: 47, 127, 209;
  --bs-link-color: #1f5fa8;
  --bs-link-hover-color: #14406f;
  --bs-body-color: #1c2b3a;
  --bs-border-radius: .7rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;
}

body {
  background:
    radial-gradient(1200px 400px at 100% -10%, #d9ecff 0, rgba(217,236,255,0) 60%),
    linear-gradient(180deg, #f3f8fe 0, #eef4fb 100%);
  min-height: 100vh;
  font-family: "Segoe UI", Tahoma, Verdana, system-ui, sans-serif;
}

/* --- Barre de navigation façon fenêtre MSN --- */
.navbar {
  background: linear-gradient(180deg, #4a95dd 0, var(--msn-blue) 55%, var(--msn-blue-dk) 100%) !important;
  box-shadow: 0 2px 8px rgba(31,95,168,.25);
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text { color: #fff !important; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
.navbar .nav-link { border-radius: .6rem; padding-inline: .6rem; transition: background .15s; }
.navbar .nav-link:hover,
.navbar .nav-link.active { background: rgba(255,255,255,.18); }
.navbar-brand .status-dot {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--msn-green); box-shadow: 0 0 0 2px rgba(255,255,255,.7);
  margin-right: .35rem; vertical-align: middle;
}
.navbar-toggler { border-color: rgba(255,255,255,.5); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* --- Panneaux / cartes buddy-list --- */
.card, .table, .alert, .list-group, .rmb-panel {
  border-radius: var(--bs-border-radius);
}
.card, .rmb-panel {
  background: var(--msn-panel);
  border: 1px solid #d6e4f4;
  box-shadow: 0 2px 10px rgba(31,95,168,.08);
}
.rmb-panel { padding: 1rem; }
h4, h5 { color: var(--msn-blue-dk); }

/* --- Boutons : léger effet « lustré » --- */
.btn-primary {
  background: linear-gradient(180deg, #4a95dd 0, var(--msn-blue) 100%);
  border-color: var(--msn-blue-dk);
}
.btn-primary:hover { background: var(--msn-blue-dk); }
.btn-success {
  background: linear-gradient(180deg, #93d11a 0, var(--msn-green) 100%);
  border-color: #5f8c00;
}

/* --- Badges (déplacés depuis base.html) + lisibilité --- */
.badge-orphan { background: #1d7a3e; color: #fff; }
.badge-low    { background: #b58a00; color: #fff; }
.badge-high   { background: #b02a2a; color: #fff; }
.badge.text-bg-light { border: 1px solid #d6e4f4; }
.rmb-tip { cursor: help; }

/* --- Médias --- */
video { background: #000; border-radius: .6rem; }
.table-responsive { overflow-x: auto; }

/* --- Bandeau stats de l'existant --- */
.rmb-stats { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .9rem; color: #456; }
.rmb-stats .s { display: inline-flex; align-items: center; gap: .25rem; }

/* ====================================================================
   Decks swipe « façon Tinder » (Phase 3) — mobile-first
   ==================================================================== */
.swipe-stage {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  min-height: 68vh;
  touch-action: pan-y;
}
.swipe-card {
  position: absolute; inset: 0;
  background: var(--msn-panel);
  border: 1px solid #d6e4f4;
  border-radius: 1.1rem;
  box-shadow: 0 8px 24px rgba(31,95,168,.18);
  overflow: hidden;
  display: flex; flex-direction: column;
  will-change: transform;
  user-select: none;
}
.swipe-card.dragging { transition: none; }
.swipe-card.animate { transition: transform .30s cubic-bezier(.2,.7,.3,1), opacity .30s ease; }
/* entrée : la carte suivante « monte » du paquet */
@keyframes rmb-card-in {
  from { transform: translateY(26px) scale(.93); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.swipe-card.enter { animation: rmb-card-in .30s cubic-bezier(.2,.7,.3,1) both; }
/* pile de cartes derrière (illusion par ombres décalées, zéro DOM en plus) */
.swipe-stage.has-more .swipe-card {
  box-shadow: 0 8px 24px rgba(31,95,168,.18),
              0 12px 0 -5px #e7f0fa, 0 22px 0 -10px #dbe8f6;
}
.swipe-card video { width: 100%; flex: 0 0 auto; max-height: 46vh; object-fit: contain; }
.swipe-card .sc-body { padding: .8rem 1rem; overflow-y: auto; flex: 1 1 auto; }
.swipe-card .sc-title { font-weight: 600; color: var(--msn-blue-dk); }

/* étiquettes de décision qui apparaissent au drag */
.swipe-card .sc-stamp {
  position: absolute; top: 1rem; padding: .3rem .8rem;
  font-weight: 800; font-size: 1.15rem; letter-spacing: .04em;
  border: 3px solid; border-radius: .6rem; opacity: 0; transform: rotate(-12deg);
  pointer-events: none; text-transform: uppercase;
}
.sc-stamp.yes { left: 1rem; color: #1d7a3e; border-color: #1d7a3e; }
.sc-stamp.no  { right: 1rem; color: #b02a2a; border-color: #b02a2a; }
.sc-stamp.up  { left: 50%; transform: translateX(-50%) rotate(0); color: var(--msn-blue-dk); border-color: var(--msn-blue-dk); }

/* barre de progression du deck */
.rmb-progress { height: 7px; background: #dbe8f6; border-radius: 4px; overflow: hidden; }
.rmb-progress > div { height: 100%; width: 0; background: var(--msn-green); border-radius: 4px; transition: width .3s ease; }

.swipe-actions { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.swipe-actions .btn { border-radius: 50%; width: 3.4rem; height: 3.4rem;
  font-size: 1.4rem; line-height: 1; padding: 0; box-shadow: 0 3px 8px rgba(0,0,0,.15); }

/* face arrière = mini-checklist / chips motif (overlay : voir plus bas) */
.swipe-back { padding: 1rem; }
.chip {
  display: inline-block; margin: .2rem; padding: .35rem .7rem;
  border-radius: 1rem; border: 1px solid var(--msn-blue); color: var(--msn-blue-dk);
  background: var(--msn-sky); cursor: pointer; font-size: .9rem;
}
.chip:hover, .chip.active { background: var(--msn-blue); color: #fff; }

@media (max-width: 576px) {
  .navbar-brand { font-size: 1rem; }
  main.container-fluid { padding-inline: .75rem !important; }
}
/* Mobile : le deck tient dans l'écran — texte d'aide masqué (swipe.html), scène
   = hauteur restante, boutons 👈 ✏️ 👉 FIXÉS au-dessus de la barre du bas (le
   drag « vers le haut » n'existe pas sur tactile : touch-action pan-y laisse le
   défilement vertical au navigateur, ✏️ est donc le seul chemin vers la fiche). */
@media (max-width: 991.98px) {
  .swipe-stage { min-height: 0; height: calc(100dvh - 20.5rem); min-height: 20rem; }
  .swipe-card video { max-height: 42vh; }
  .swipe-actions {
    position: fixed; left: 0; right: 0; bottom: calc(4.2rem + env(safe-area-inset-bottom));
    margin: 0; padding: .35rem 0; z-index: 1029; pointer-events: none;
  }
  .swipe-actions .btn { pointer-events: auto; background: #fff; }
}
/* face arrière (checklist / motif) : overlay sur TOUTE la carte, défilable — en
   flux, elle était rognée par overflow:hidden sous la vidéo (46vh) sur mobile */
.swipe-back {
  position: absolute; inset: 0; z-index: 3; overflow-y: auto;
  background: var(--msn-panel);
}

/* liste des clips en mobile : masquer les colonnes techniques (Source, Durée,
   Goldie, Catégorie, Étape, Risque, Assigné, Pipeline) — les tags clés sont
   repris sous le titre. Évite le scroll horizontal. */
@media (max-width: 991.98px) {
  .rmb-clips th:nth-child(n+4), .rmb-clips td:nth-child(n+4) { display: none; }
  .rmb-clips td, .rmb-clips th { vertical-align: top; }
}

/* --- Progressive disclosure : blocs pliables <details class="rmb-fold"> --- */
.rmb-fold {
  border: 1px solid #d6e4f4; border-radius: .6rem; background: #fff; padding: 0 .8rem;
}
.rmb-fold > summary {
  cursor: pointer; padding: .6rem 0; font-weight: 600; color: var(--msn-blue-dk);
  list-style: none;
}
.rmb-fold > summary::-webkit-details-marker { display: none; }
.rmb-fold > summary::before {
  content: "▸"; display: inline-block; margin-right: .4rem; color: var(--msn-blue);
  transition: transform .15s;
}
.rmb-fold[open] > summary::before { transform: rotate(90deg); }
.rmb-fold[open] { padding-bottom: .8rem; }
/* carte « décision » mise en avant + COLLÉE en haut au scroll d'une longue fiche */
.rmb-decision {
  border: 2px solid var(--msn-green); box-shadow: 0 3px 12px rgba(125,183,0,.18);
  position: sticky; top: .5rem; z-index: 5; background: #fff;
}

/* --- Barre d'action fixe en bas (mobile) --- */
.rmb-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; background: #fff; border-top: 1px solid #d6e4f4;
  box-shadow: 0 -2px 10px rgba(31,95,168,.14);
  padding-bottom: env(safe-area-inset-bottom);   /* encoches iOS */
}
.rmb-bottomnav a {
  flex: 1; text-align: center; padding: .38rem 0 .5rem; line-height: 1;
  font-size: 1.4rem; color: var(--msn-blue-dk); text-decoration: none; position: relative;
}
.rmb-bottomnav a span { display: block; font-size: .62rem; margin-top: .15rem; color: #567; }
.rmb-bottomnav a.rmb-bn-primary { color: var(--msn-blue); }
.rmb-bottomnav a:active { background: var(--msn-sky); }
.rmb-bn-badge {
  position: absolute; top: .1rem; left: 55%; background: var(--msn-blue);
  color: #fff; border-radius: 1rem; font-size: .6rem; padding: 0 .35rem; line-height: 1.2;
}
@media (max-width: 991.98px) { body { padding-bottom: 4.2rem !important; } }
@media (prefers-reduced-motion: reduce) { .rmb-decision { position: static; } }
/* mobile : la carte Décision (transitions + recadrage + IA) fait un demi-écran ;
   collée en haut elle masquerait ce qu'on fait défiler -> en flux */
@media (max-width: 991.98px) { .rmb-decision { position: static; } }
/* tableaux Sources / Sites sur mobile : colonnes secondaires masquées (classe
   .rmb-col-lg sur th/td), cellule statut moins large ; cases à cocher de la
   Prospection assez grandes pour le pouce */
@media (max-width: 991.98px) {
  .rmb-col-lg { display: none !important; }
  .rmb-src-status { min-width: 11rem !important; }
  .sel-lead { width: 1.35rem; height: 1.35rem; }
}

/* --- GIF memes rétro (registre core/gifs.py, tag {% meme_gif %}) --- */
.rmb-gif { vertical-align: middle; border-radius: .3rem; }
.rmb-gif-sm   { height: 28px; width: auto; }
.rmb-gif-md   { height: 48px; width: auto; }
.rmb-gif-lg   { height: 96px; width: auto; }
.rmb-gif-hero { height: 160px; max-width: 100%; width: auto; }

/* loader global : htmx pose .htmx-request sur l'indicateur pendant la requête,
   rmbGif.loading() fait pareil pour les fetch() maison */
#rmb-loader {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 2000;
  display: none; align-items: center; background: #fff;
  border: 1px solid #d6e4f4; border-radius: .7rem; padding: .4rem .8rem;
  box-shadow: 0 4px 14px rgba(31,95,168,.25);
}
#rmb-loader.htmx-request { display: flex; }
@media (max-width: 991.98px) { #rmb-loader { bottom: 4.8rem; } } /* au-dessus de la bottomnav */

/* décor mode maximal (GeoCities assumé — uniquement bannière + footer) */
.rmb-decor-banner {
  display: flex; align-items: center; gap: .6rem; justify-content: center;
  padding: .15rem .8rem; background: #fffbe6; border-bottom: 2px dashed #e0a800;
  margin-top: -1.5rem; margin-bottom: 1.5rem;   /* recolle la bannière à la navbar (mb-4) */
}
.rmb-decor-footer { text-align: center; padding: .4rem 0 .8rem; }
.rmb-marquee { overflow: hidden; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.rmb-marquee > span {
  display: inline-block; padding-left: 100%;
  animation: rmb-marquee 18s linear infinite;
}
@keyframes rmb-marquee { to { transform: translateX(-100%); } }

/* accessibilité : respecter la préférence « animations réduites » */
@media (prefers-reduced-motion: reduce) {
  .swipe-card, .swipe-card.animate, .triage-row { transition: none !important; }
  .swipe-card.enter { animation: none !important; }
  .navbar .nav-link { transition: none; }
  /* GIF animés masqués ; le loader garde son texte « Chargement… » */
  .rmb-gif, .rmb-decor { display: none !important; }
  .rmb-marquee > span { animation: none; padding-left: 0; }
}
/* focus clavier bien visible (tags, boutons swipe) */
.rmb-tip:focus-visible,
.swipe-actions .btn:focus-visible { outline: 3px solid var(--msn-blue); outline-offset: 2px; }

/* cloche de notifications */
.rmb-notif-menu { min-width: 340px; max-width: 92vw; }
.rmb-notif-list { max-height: 60vh; overflow-y: auto; }
.rmb-notif-dot {
  width: .6rem; height: .6rem; border-radius: 50%;
  margin-top: .35rem; flex: 0 0 auto;
}
/* barre de progression des sources : libellés d'étapes sous la barre */
.rmb-steps { font-size: .62rem; line-height: 1; }
.rmb-step { color: #adb5bd; }
.rmb-step-active { color: var(--msn-blue); font-weight: 600; }
.rmb-step-done  { color: var(--msn-green); font-weight: 600; }