/* ===========================================================
   OMTV Stream — Dark UI lisible (contraste AA/AAA)
   Dernière MàJ : 2025-10
   -----------------------------------------------------------
   - Police système, taille base 16px
   - Couleurs renforcées
   - États hover/focus visibles
   - Sections existantes conservées (hero-om, card-om, etc.)
   =========================================================== */

/* ------- Reset & base ------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  background: #0b1522; /* fond global légèrement plus clair que #0d1b2a pour le contraste */
  color: #f2f6fb;      /* texte par défaut quasi blanc */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------- Palette ------- */
:root{
  --om-blue:  #1e90ff;
  --om-blue-2:#0f67c6;
  --om-blue-3:#0a4a8d;
  --om-cyan:  #9fd8ff;
  --om-gold:  #f5c542;
  --ink-1:    #f2f6fb;   /* texte principal */
  --ink-2:    #cfe4ff;   /* texte secondaire claire */
  --ink-3:    #9fb3c8;   /* texte atténué */
  --bg-1:     #0d1b2a;   /* pano hero/nav */
  --bg-2:     #0b1522;   /* section alt / body */
  --panel:    #111b2b;   /* cartes */
  --panel-bd: #20314a;   /* bordure carte + table */
  --panel-hi: #162540;   /* hover */
  --success:  #22c55e;
  --warning:  #f59e0b;
  --danger:   #ef4444;
}

/* ------- Typo & links ------- */
h1,h2,h3,h4,h5,h6 { color: var(--ink-1); line-height: 1.15; }
p, .lead { color: var(--ink-2); }
.lead { font-size: 1.125rem; }
a { color: var(--om-cyan); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--om-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------- Navbar ------- */
.navbar { background: var(--bg-1) !important; border-bottom: 1px solid var(--panel-bd); }
.navbar-brand strong { color: #fff; }
.navbar .nav-link { color: var(--ink-2) !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #fff !important; }

/* ------- Topbar API OM ------- */
.om-topbar{
  background: #0c1a30;
  border-bottom: 1px solid var(--panel-bd);
  color: var(--ink-2);
}
.om-topbar .om-chip{
  background:#122443; color:#d7e6f5; border:1px solid #214071;
}
.om-topbar .sep{ opacity:.4; }
.om-topbar .muted{ color: var(--ink-3); }
.om-topbar .om-link{ color:#d7e6f5; }
.om-topbar .om-link:hover{ color:#fff; text-decoration: underline; }

/* ------- Buttons ------- */
.btn { font-weight: 600; }
.btn-primary, .btn-om{
  background: var(--om-blue);
  border-color: var(--om-blue);
  color: #fff;
}
.btn-primary:hover, .btn-om:hover{ background: var(--om-blue-2); border-color: var(--om-blue-2); }
.btn-outline-light{
  color: #e8f2ff; border-color:#e8f2ff33;
}
.btn-outline-light:hover{
  color: #0b1522; background:#e8f2ff; border-color:#e8f2ff;
}
.btn-warning{ background: var(--warning); border-color: var(--warning); color:#111; }
.btn-success{ background: var(--success); border-color: var(--success); color:#06200f; }
.btn-danger{ background: var(--danger); border-color: var(--danger); }

/* ------- Pills / badges ------- */
.pill{
  display:inline-block; font-weight:700; font-size:.9rem;
  padding:.4rem .8rem; border-radius:999px;
}
.pill-gold{ background: var(--om-gold); color:#000; }
.badge { font-weight:700; }
.badge.bg-danger{ background: #dc2626 !important; }
.badge.text-bg-success{ background: #15803d !important; color:#eafff3 !important; }
.badge.text-bg-secondary{ background:#334155 !important; color:#e5edf8 !important; }

/* ------- Hero ------- */
.hero-om{
  position: relative;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(30,144,255,.25), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  padding: 80px 0 60px;
}
.hero-wave{ display:block; width:100%; height:70px; fill: var(--bg-2); margin-top:40px; }
.grad-om{
  background: linear-gradient(90deg, var(--om-cyan) 0%, var(--om-blue) 50%, var(--om-cyan) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fw-extrabold{ font-weight:800; }
.text-om-muted{ color: var(--ink-2) !important; }

/* ------- Hero card / skeleton ------- */
.hero-card{
  background: var(--panel);
  border: 1px solid var(--panel-bd);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero-video-skeleton{
  position:relative; width:100%; aspect-ratio:16/9; background: #0a1428;
  border-bottom:1px solid var(--panel-bd);
}
.skeleton-badge{
  position:absolute; top:12px; left:12px;
  background:#0e1b33; border:1px solid var(--panel-bd); color:#e6f0ff;
  font-size:.8rem; padding:.25rem .5rem; border-radius:8px;
}

/* ------- Sections ------- */
.section-om{ padding: 56px 0; background: var(--bg-2); }
.section-om.alt{ background: var(--bg-1); }

/* ------- Cards & tables ------- */
.card{ background: var(--panel); border-color: var(--panel-bd); color: var(--ink-1); }
.card-om{ background: var(--panel); border:1px solid var(--panel-bd); border-radius:16px; }
.card-om .card-header{ background:rgba(255,255,255,.02); border-bottom:1px solid var(--panel-bd); color:#fff; }
.card-om .card-footer{ background:rgba(255,255,255,.02); border-top:1px solid var(--panel-bd); }

.table-dark{ --bs-table-bg: transparent; --bs-table-color: var(--ink-1); }
.table-dark.table-sm>thead>tr>th, 
.table-dark.table-sm>tbody>tr>td { border-color: #284163; }
.table-dark tr:hover td{ background: var(--panel-hi); }

/* ------- Feature list / steps ------- */
.feature-list{ list-style:none; padding-left:0; margin:0; }
.feature-list li{
  color: var(--ink-2);
  padding:.6rem 0;
  border-bottom:1px dashed #2b4165;
}
.feature-list li:last-child{ border-bottom:0; }
.step-badge{
  width:36px;height:36px; border-radius:50%; display:inline-grid; place-items:center;
  margin-bottom:.6rem; font-weight:700;
  background:#0e2a4b; color:#e6f3ff; border:1px solid #265587;
}

/* ------- Alerts ------- */
.alert{ border-radius: 12px; border:1px solid transparent; }
.alert-warning{ background:#3a2a00; color:#ffe9b3; border-color:#7a5d00; }
.alert-info{ background:#0d213b; color:#cae6ff; border-color:#204b80; }
.alert-danger{ background:#3b0d0d; color:#ffd9d9; border-color:#7a1d1d; }

/* ------- Footer ------- */
footer{ color: var(--ink-3); }
footer a{ color:#cfe4ff; }
footer a:hover{ color:#fff; }

/* ------- Forms ------- */
.form-control, .form-select{
  background: #0c182b;
  color: #eaf2ff;
  border:1px solid #294467;
}
.form-control::placeholder{ color:#9fb3c8; }
.form-control:focus, .form-select:focus{
  background:#0c182b; color:#fff; border-color: var(--om-blue);
  box-shadow: 0 0 0 .2rem rgba(30,144,255,.25);
}

/* ------- Links compacts ------- */
.link-light{ color:#d7e6f5; }
.link-light:hover{ color:#fff; }

/* ------- Utilities ------- */
.text-secondary { color: var(--ink-3) !important; }
.text-success   { color: var(--success) !important; }
.text-warning   { color: var(--warning) !important; }
.text-danger    { color: var(--danger) !important; }
.shadow-om{ box-shadow: 0 16px 48px rgba(0,0,0,.45); }

/* spacing helpers si besoin */
.mt-1{ margin-top:.25rem !important; } .mt-2{ margin-top:.5rem !important; }
.mt-3{ margin-top:1rem !important; }  .mt-4{ margin-top:1.5rem !important; }
.mb-1{ margin-bottom:.25rem !important; } .mb-2{ margin-bottom:.5rem !important; }
.mb-3{ margin-bottom:1rem !important; }  .mb-4{ margin-bottom:1.5rem !important; }

/* ------- Buttons small improvements in tables/cards ------- */
.table .btn, .card .btn { border-radius:10px; }

/* ------- Gradients separators (optionnel) ------- */
.hr-om{
  height:1px; border:0; background: linear-gradient(90deg, transparent, #2a446b, transparent);
  margin: 16px 0;
}

/* ------- Prefers-reduced-motion ------- */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}

/* ------- Small screens tweaks ------- */
@media (max-width: 575.98px){
  .hero-om{ padding:60px 0 40px; }
  .hero-wave{ height:50px; }
  .table-responsive{ border-top:1px solid var(--panel-bd); border-bottom:1px solid var(--panel-bd); }
}
/* --- Slider topbar mobile --- */
.om-topbar{ background:#0c1a30; border-bottom:1px solid var(--panel-bd); color:var(--ink-2); }
.om-topbar .om-chip{ background:#122443; color:#d7e6f5; border:1px solid #214071; border-radius:999px; padding:.25rem .6rem; font-size:.8rem; display:inline-block; }
.om-topbar .sep{ opacity:.45; }
.om-topbar .muted{ color:var(--ink-3); }
.om-topbar .om-link{ color:#d7e6f5; }
.om-topbar .om-link:hover{ color:#fff; text-decoration:underline; }

/* scroller container */
.om-scroller{
  display:flex; gap:.75rem;
  overflow-x:auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom:.25rem;
}
.om-scroller::-webkit-scrollbar{ height:0; } /* hide scrollbar on mobile */

/* each slide/card */
.om-card{
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: 88%;
  background: rgba(255,255,255,.03);
  border:1px solid #1d3f6b;
  border-radius: 999px;
  padding:.5rem .75rem;
}
.om-card .om-line{ white-space: nowrap; }

/* desktop: show all inline, no slider feel */
@media (min-width: 992px){
  .om-scroller{ overflow: visible; scroll-snap-type: none; gap:1rem; }
  .om-card{ min-width: auto; border-radius:12px; }
}
/* ===== Section fond blanc à rayures ===== */
.section-om.striped-light{
  --stripe1: #ffffff;
  --stripe2: #fafafa;
  background:
    repeating-linear-gradient(
      45deg,
      var(--stripe1) 0px,
      var(--stripe1) 16px,
      var(--stripe2) 16px,
      var(--stripe2) 32px
    );
  color: #0b1522; /* texte en dehors des cartes dans la section */
  border-top: 1px solid #e6eef7;
  border-bottom: 1px solid #e6eef7;
  position: relative;
  z-index: 0;
}

/* petite ombre interne pour fondre avec le thème sombre autour */
.section-om.striped-light::before,
.section-om.striped-light::after{
  content:""; position:absolute; left:0; right:0; height:24px; z-index:-1;
}
.section-om.striped-light::before{ top:-1px; box-shadow: inset 0 12px 16px -12px rgba(0,0,0,.25); }
.section-om.striped-light::after{ bottom:-1px; box-shadow: inset 0 -12px 16px -12px rgba(0,0,0,.25); }

/* texte atténué dans cette section (hors cartes) */
.section-om.striped-light .text-om-muted{ color:#465b73 !important; }

/* on laisse les cartes en style sombre pour contraster,
   mais si tu veux des cartes claires dans cette section,
   décommente les règles ci-dessous :

.section-om.striped-light .card-om{
  background:#ffffff; color:#0b1522; border-color:#e3eaf3;
}
.section-om.striped-light .card-om .card-header,
.section-om.striped-light .card-om .card-footer{
  background:#ffffff; border-color:#e3eaf3; color:#0b1522;
}
.section-om.striped-light .badge.text-bg-secondary{ background:#e8eef6 !important; color:#0b1522 !important; }
*/
/* ===== Section rayures blanches -> transparentes (version douce) ===== */
.section-om.striped-trans{
  /* Réglages (tu peux encore baisser --white-alpha) */
  --stripe-angle: 45deg;
  --stripe-w: 24px;       /* largeur du motif */
  --white-w: 10px;        /* largeur de la partie blanche */
  --white-alpha: .14;     /* opacité du blanc (avant .9 -> maintenant .14) */

  position: relative;
  color: #0b1522;

  /* bandes blanches atténuées + transparent */
  background:
    repeating-linear-gradient(
      var(--stripe-angle),
      rgba(255,255,255,var(--white-alpha)) 0,
      rgba(255,255,255,var(--white-alpha)) var(--white-w),
      rgba(255,255,255,0)                  var(--white-w),
      rgba(255,255,255,0)                  var(--stripe-w)
    );

  /* voile très léger pour rendre le tout moins agressif */
  background-image:
    repeating-linear-gradient(
      var(--stripe-angle),
      rgba(255,255,255,var(--white-alpha)) 0,
      rgba(255,255,255,var(--white-alpha)) var(--white-w),
      rgba(255,255,255,0)                  var(--white-w),
      rgba(255,255,255,0)                  var(--stripe-w)
    ),
    linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,.02));

  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  z-index: 0;
}

/* fades haut/bas adoucis */
.section-om.striped-trans::before,
.section-om.striped-trans::after{
  content:""; position:absolute; left:0; right:0; height:20px; pointer-events:none; z-index:-1;
}
.section-om.striped-trans::before{
  top:-1px;  background: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,0));
}
.section-om.striped-trans::after{
  bottom:-1px; background: linear-gradient(to top, rgba(0,0,0,.12), rgba(0,0,0,0));
}

/* Mobile : encore plus soft */
@media (max-width: 575.98px){
  .section-om.striped-trans{
    --stripe-w: 20px;
    --white-w: 8px;
    --white-alpha: .12;
  }
}
/* lecteur + paywall */
.stream-frame { border:0; width:100%; height:100%; }
.paywall { position:relative; }
.paywall-blur { filter: blur(6px) grayscale(30%); pointer-events:none; }
.paywall-overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  background: rgba(11,21,34,.75); backdrop-filter: blur(2px);
  border-radius: 12px;
}