/* =========================================
   CallKeep Cloud — SaaS UI (Dark + Light)
   ========================================= */
/* Améliore les contrôles natifs (select/options) en dark mode */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"]{ color-scheme: light; }

:root{
  --accent:#11cdc6;
  --accent2:#0f93a0;
  --radius:14px;
  --shadow: 0 18px 55px rgba(0,0,0,.25);
  --shadow2: 0 10px 30px rgba(0,0,0,.18);
}

/* ===== THEME: DARK (default) ===== */
:root[data-theme="dark"]{
  --bg0:#070A12;
  --bg1:#0A1222;
  --bg2:#0E1A2F;
  --panel:#0B1324;
  --panel2:#0F1C33;
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);
  --muted2: rgba(255,255,255,.48);
  --chip: rgba(255,255,255,.08);
  --inputBg: rgba(255,255,255,.06);
  --tableStripe: rgba(255,255,255,.03);
}

/* ===== THEME: LIGHT ===== */
:root[data-theme="light"]{
  --bg0:#F5F7FB;
  --bg1:#EEF3FF;
  --bg2:#E8F0FF;
  --panel:#FFFFFF;
  --panel2:#F3F6FF;
  --stroke: rgba(15,23,42,.12);
  --stroke2: rgba(15,23,42,.16);
  --text: rgba(15,23,42,.92);
  --muted: rgba(15,23,42,.64);
  --muted2: rgba(15,23,42,.48);
  --chip: rgba(15,23,42,.06);
  --inputBg: rgba(15,23,42,.05);
  --tableStripe: rgba(15,23,42,.03);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(17,205,198,.18), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(79,70,229,.12), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  color: var(--text);
}

/* ===== TOPBAR ===== */
.ck-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
:root[data-theme="light"] .ck-topbar{
  background: rgba(255,255,255,.60);
}

.ck-topbar-inner{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 14px;
}

.ck-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: var(--text);
}
.ck-brand:hover{ color: var(--text); opacity:.95; }

.ck-logo{
  width: 38px; height: 38px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(17,205,198,.18), rgba(17,205,198,.06));
  border: 1px solid rgba(17,205,198,.35);
  box-shadow: 0 10px 24px rgba(17,205,198,.14);
}
.ck-logo span{
  font-weight: 900;
  letter-spacing:.5px;
  color: var(--text);
  font-size: 14px;
}

.ck-brand-text{ line-height: 1.1; }
.ck-brand-title{ font-weight: 800; font-size: 14px; }
.ck-brand-sub{ font-size: 12px; color: var(--muted); }

.ck-pill{
  margin-left: 10px;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--chip);
  color: var(--muted);
}

/* top actions */
.ck-top-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.ck-iconbtn{
  border: 1px solid var(--stroke);
  background: var(--chip);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 12px;
}

.ck-ghostbtn{
  border: 1px solid var(--stroke);
  background: var(--chip);
  color: var(--text);
  border-radius: 12px;
  padding: 9px 12px;
}
.ck-ghostbtn:hover{
  border-color: var(--stroke2);
  background: rgba(17,205,198,.10);
}

.ck-theme-dot{
  width:10px; height:10px;
  border-radius:999px;
  background: var(--accent);
  display:inline-block;
  box-shadow: 0 0 0 3px rgba(17,205,198,.20);
  margin-right: 8px;
}
.ck-theme-label{ font-weight: 700; font-size: 13px; }

.ck-userbtn{
  border: 1px solid var(--stroke);
  background: var(--chip);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.ck-userbtn:hover{
  border-color: var(--stroke2);
  background: rgba(17,205,198,.10);
}
.ck-status-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
.ck-rolepill{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.12);
  color: var(--muted);
}
:root[data-theme="light"] .ck-rolepill{ background: rgba(15,23,42,.06); }

.ck-dd{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  overflow:hidden;
  min-width: 220px;
}
.ck-dd .dropdown-item{
  color: var(--text);
  padding: 10px 12px;
}
.ck-dd .dropdown-item:hover{
  background: rgba(17,205,198,.12);
}
.ck-dd .dropdown-divider{ border-color: var(--stroke); }

/* ===== LAYOUT SHELL ===== */
.ck-sidebar{
  position: fixed;
  top: 60px;
  left: 0;
  width: 260px;
  height: calc(100vh - 60px);
  border-right: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.05));
  backdrop-filter: blur(10px);
}
:root[data-theme="light"] .ck-sidebar{
  background: rgba(255,255,255,.55);
}

.ck-side-inner{
  padding: 16px 14px;
  height: 100%;
  display:flex;
  flex-direction: column;
}

.ck-side-title{
  font-weight: 900;
  letter-spacing:.02em;
  font-size: 12px;
  color: var(--muted);
  margin: 6px 8px 10px;
  text-transform: uppercase;
}

.ck-nav{ display:flex; flex-direction: column; gap: 8px; }

.ck-navitem{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration:none;
  color: var(--text);
  background: transparent;
}
.ck-navitem:hover{
  background: rgba(17,205,198,.10);
  border-color: rgba(17,205,198,.22);
}
.ck-navitem.active{
  background: rgba(17,205,198,.16);
  border-color: rgba(17,205,198,.35);
  box-shadow: 0 10px 28px rgba(17,205,198,.14);
}
.ck-navicon{ width: 22px; text-align:center; opacity:.95; }

.ck-side-foot{
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--stroke);
  color: var(--muted);
}
.ck-side-meta-title{ font-weight: 800; font-size: 12px; color: var(--text); }
.ck-side-meta-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Main */
.ck-main{
  padding-top: 18px;
  margin-left: 260px;
}
.ck-content{
  padding: 22px 22px 34px;
  max-width: 1200px;
}

/* Public/auth main */
.ck-main-public{ padding: 22px 0 34px; }
.ck-content-public{ padding: 22px; }

/* ===== COMPONENTS ===== */
.ck-card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}
.ck-card-soft{
  background: linear-gradient(180deg, var(--panel), rgba(0,0,0,.05));
}

.ck-h1{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.ck-sub{
  color: var(--muted);
  margin: 0 0 18px;
  font-size: 14px;
}

.btn-primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #042a2a !important;
  font-weight: 800;
  border-radius: 12px;
}
.btn-primary:hover{
  filter: brightness(.95);
}
.btn-outline-light, .btn-outline-secondary{
  border-radius: 12px;
}

.form-control, .form-select{
  background: var(--inputBg) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
}
.form-control::placeholder{ color: var(--muted2); }
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 4px rgba(17,205,198,.18) !important;
  border-color: rgba(17,205,198,.55) !important;
}

.alert{
  border-radius: 12px;
  border: 1px solid var(--stroke);
}

/* Tables lisibles */
.table{
  color: var(--text);
  margin-bottom: 0;
}
.table thead th{
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--stroke);
}
.table td, .table th{
  border-top: 1px solid var(--stroke);
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  background-color: var(--tableStripe);
  color: var(--text);
}
.table-hover>tbody>tr:hover>*{
  background: rgba(17,205,198,.10);
}

/* Login grid (existant) – rendu plus doux */
.ck-shell{ padding: 34px 0; }
.ck-auth-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 992px){
  .ck-auth-grid{ grid-template-columns: 1fr; }
  .ck-main{ margin-left: 0; }
}

.ck-hero{
  border-radius: var(--radius);
  padding: 28px;
  background:
    radial-gradient(360px 220px at 85% 0%, rgba(17,205,198,.20), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.05));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
:root[data-theme="light"] .ck-hero{
  background:
    radial-gradient(360px 220px at 85% 0%, rgba(17,205,198,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.65));
}

.ck-hero h1{
  font-size: 40px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.ck-hero p{ color: var(--muted); margin: 0 0 16px; }

.ck-features{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 520px){
  .ck-features{ grid-template-columns: 1fr; }
}
.ck-feature{
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
:root[data-theme="light"] .ck-feature{ background: rgba(15,23,42,.03); }
.ck-feature strong{ display:block; font-weight: 900; margin-bottom: 4px; }
.ck-feature span{ color: var(--muted); font-size: 13px; }

.ck-card-body{ padding: 22px; }
.ck-title{ font-weight: 900; font-size: 18px; margin-bottom: 4px; }
.ck-subtitle{ color: var(--muted); margin-bottom: 16px; }

.ck-input-group{
  display:flex;
  gap: 10px;
  align-items:center;
}
.ck-eye{
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--chip);
  color: var(--text);
  padding: 10px 12px;
  font-weight: 800;
}
.ck-eye:hover{ background: rgba(17,205,198,.10); }

/* Offcanvas */
.ck-offcanvas{
  background: var(--panel);
  color: var(--text);
  border-right: 1px solid var(--stroke);
}

/* ===== Login: proof blocks (ck-proof / ck-trust) ===== */
.ck-proof{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 992px){
  .ck-proof{ grid-template-columns: 1fr; }
}

.ck-proof-item{
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
:root[data-theme="light"] .ck-proof-item{
  background: rgba(15,23,42,.03);
}

.ck-proof-kpi{
  font-weight: 900;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.ck-proof-text{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

.ck-trust{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}
.ck-trust .dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(17,205,198,.18);
  display: inline-block;
}
.ck-trust .sep{
  opacity: .65;
}

/* petits détails de liens */
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
.ck-footer-note{ color: var(--muted); font-size: 12px; }


/* ===== Layout auth: mêmes hauteurs + responsive clean ===== */
.ck-auth-grid{
  display:grid;
  gap:24px;
  grid-template-areas:"hero card";
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .95fr);
  align-items:stretch;
}

.ck-hero{ grid-area:hero; height:100%; display:flex; flex-direction:column; }
.ck-card{ grid-area:card; height:100%; }
.ck-card-body{ height:100%; display:flex; flex-direction:column; }

.ck-lead{ margin: 10px 0 0; opacity:.9; }
.ck-proof{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.ck-proof-item{
  border-radius:14px;
  padding:12px 12px;
}
.ck-proof-kpi{ font-weight:800; }
.ck-proof-text{ margin-top:4px; font-size:13px; opacity:.9; }

.ck-auth-form{ display:flex; flex-direction:column; flex:1 1 auto; }
.ck-card-footer{
  margin-top:auto;
  padding-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

/* breakpoints */
@media (max-width: 992px){
  .ck-auth-grid{
    grid-template-areas:
      "card"
      "hero";
    grid-template-columns:1fr;
  }
  .ck-proof{ grid-template-columns:1fr; }
}
@media (max-width: 1200px){
  .ck-proof{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

.ck-empty{
  border:1px dashed rgba(0,0,0,.18);
  background: rgba(255,255,255,.55);
  border-radius: 16px;
  padding: 16px;
}
html[data-theme="dark"] .ck-empty{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}

.ck-table thead th{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(0,0,0,.55);
  background: rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.12);
}
html[data-theme="dark"] .ck-table thead th{
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.05);
  border-bottom-color: rgba(255,255,255,.14);
}
.ck-table td, .ck-table th{
  padding: .75rem .75rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
html[data-theme="dark"] .ck-table td,
html[data-theme="dark"] .ck-table th{
  border-bottom-color: rgba(255,255,255,.10);
}

.ck-table tbody tr:hover{
  background: rgba(17,205,198,.06);
}

/* =========================================
   FIX: Bootstrap outline buttons (theme-aware)
   ========================================= */

.btn-outline-light,
.btn-outline-secondary{
  /* On override les variables Bootstrap */
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--stroke);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: rgba(17,205,198,.10);
  --bs-btn-hover-border-color: rgba(17,205,198,.35);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: rgba(17,205,198,.16);
  --bs-btn-active-border-color: rgba(17,205,198,.45);
  --bs-btn-disabled-color: var(--muted2);
  --bs-btn-disabled-border-color: var(--stroke);

  font-weight: 800;
  border-radius: 12px;
  background: var(--chip); /* optionnel mais ça aide beaucoup en thème clair */
}

.btn-outline-light:hover,
.btn-outline-secondary:hover{
  transform: translateY(-1px);
}

.btn-outline-light:focus-visible,
.btn-outline-secondary:focus-visible,
.btn-primary:focus-visible{
  box-shadow: 0 0 0 4px rgba(17,205,198,.18) !important;
}

/* ===========================
   FIX DARK THEME (cards/buttons/tables)
   Colle à la FIN du fichier
   =========================== */

/* 1) Les cards Bootstrap imposent une couleur de texte sombre -> on force ton thème */
.card.ck-card,
.ck-card{
  color: var(--text) !important;
  background: var(--panel) !important;
  border-color: var(--stroke) !important;
}

/* Harmonise les textes bootstrap dans tes cards */
.ck-card .text-secondary,
.ck-card .text-muted{
  color: var(--muted) !important;
}

/* 2) Boutons outline "light" -> version compatible dark & light via variables */
.btn-outline-light{
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--stroke2);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: rgba(17,205,198,.12);
  --bs-btn-hover-border-color: rgba(17,205,198,.45);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: rgba(17,205,198,.18);
  --bs-btn-active-border-color: rgba(17,205,198,.55);
  --bs-btn-disabled-color: var(--muted2);
  --bs-btn-disabled-border-color: var(--stroke);
  border-radius: 12px;
}

/* Optionnel: même look pour outline-secondary */
.btn-outline-secondary{
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--stroke2);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: rgba(17,205,198,.10);
  --bs-btn-hover-border-color: rgba(17,205,198,.35);
  border-radius: 12px;
}

/* 3) Tables / DataTables en sombre: éviter le “table blanc dans le theme dark” */
:root[data-theme="dark"] .ck-card .table,
:root[data-theme="dark"] .ck-card .dataTable-table{
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--stroke);
  --bs-table-striped-color: var(--text);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-color: var(--text);
  --bs-table-hover-bg: rgba(17,205,198,.10);
  color: var(--text) !important;
  background: transparent !important;
}

/* Header de table visible en dark */
:root[data-theme="dark"] .ck-card .table thead th,
:root[data-theme="dark"] .ck-card .dataTable-table thead th{
  color: var(--muted) !important;
  background: rgba(255,255,255,.03) !important;
  border-bottom-color: var(--stroke) !important;
}

/* Bordures en dark */
:root[data-theme="dark"] .ck-card .table td,
:root[data-theme="dark"] .ck-card .dataTable-table td{
  border-top-color: var(--stroke) !important;
}

/* Provide a “surface” douce derrière la table (si DataTable met du blanc quelque part) */
:root[data-theme="dark"] .ck-card .table > :not(caption) > * > *,
:root[data-theme="dark"] .ck-card .dataTable-table > :not(caption) > * > *{
  background-color: rgba(255,255,255,.02) !important;
}

/* =========================================
   Recordings UI: full width + no "download" cutoff + responsive
   Colle à la FIN du fichier
   ========================================= */

/* 1) Utiliser plus de largeur (au lieu de max-width:1200px) */
.ck-content{
  max-width: 1600px;   /* tu peux monter à 1800 si tu veux */
  width: 100%;
  margin: 0 auto;
}

/* Si tu veux VRAIMENT pleine largeur (edge-to-edge), décommente:
.ck-content{ max-width:none; }
*/

/* 2) Table: éviter les débordements inutiles */
.ck-card .table td,
.ck-card .table th{
  vertical-align: middle;
}

.ck-card .table td:last-child,
.ck-card .table th:last-child{
  white-space: nowrap; /* garder le bouton Télécharge sur une ligne */
}

/* 3) Audio: le rendre “responsive” pour éviter qu’il pousse la table */
.ck-card .table audio{
  width: clamp(220px, 24vw, 420px);
  max-width: 100%;
}

/* 4) Si tu utilises Bootstrap .table-responsive (recommandé),
      on garde la colonne “Télécharger” visible (sticky) */
.table-responsive{
  overflow-x: auto;
}

.table-responsive thead th:last-child,
.table-responsive tbody td:last-child{
  position: sticky;
  right: 0;
  background: var(--panel);
  z-index: 2;
  box-shadow: -12px 0 18px rgba(0,0,0,.10);
}
.table-responsive thead th:last-child{ z-index: 3; }

/* 5) Responsive global */
@media (max-width: 992px){
  .ck-sidebar{ display:none; }          /* si tu as un offcanvas, c'est parfait */
  .ck-main{ margin-left:0 !important; }
  .ck-content{ max-width:none; padding: 16px; }
  .ck-topbar-inner{ flex-wrap: wrap; }
  .ck-top-actions{ width:100%; justify-content:flex-end; }
}

/* Encore plus tight sur mobile */
@media (max-width: 768px){
  .ck-card .table audio{
    width: 100%;
  }
  .ck-card .btn{
    padding: .35rem .6rem;
    font-size: .9rem;
  }
}

/* ===== Landing / Pricing (pro layout) ===== */

.ck-landing{
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 16px 40px;
}

.ck-landing-hero{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  overflow: hidden;
}

.ck-landing-hero-inner{
  padding: 22px 22px 18px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.ck-h1{
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.ck-hero-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  min-width: 220px;
}

.ck-hero-bullets{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ck-hero-bullet{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px;
}

.ck-hero-bullet-title{
  font-weight: 700;
  margin-bottom: 4px;
}

.ck-hero-bullet-text{
  opacity: .8;
  font-size: 13px;
  line-height: 1.35;
}

.ck-landing-plans{
  margin-top: 16px;
}

.ck-plans-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  padding: 4px 2px 10px;
}

.ck-title{ font-weight: 800; font-size: 18px; }
.ck-subtitle{ opacity:.75; font-size: 13px; }

.ck-plans-grid{ margin-top: 6px; }

.ck-plan{
  height: 100%;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  transition: transform .12s ease, border-color .12s ease;
}

.ck-plan:hover{
  transform: translateY(-2px);
  border-color: rgba(17,205,198,.35);
}

.ck-plan.is-popular{
  border-color: rgba(17,205,198,.55);
  box-shadow: var(--shadow);
}

.ck-plan-body{
  padding: 16px 16px 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.ck-plan-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.ck-plan-name{ font-weight: 800; font-size: 16px; }
.ck-plan-desc{ opacity: .8; font-size: 13px; line-height: 1.35; margin-top: 4px; }

.ck-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17,205,198,.18);
  border: 1px solid rgba(17,205,198,.35);
  color: rgba(255,255,255,.95);
  white-space: nowrap;
}

.ck-plan-price{
  margin-top: 2px;
  display:flex;
  align-items: baseline;
  gap: 8px;
}

.ck-price{ font-weight: 900; font-size: 32px; letter-spacing: -0.02em; }
.ck-price-unit{ opacity: .8; font-size: 13px; }

.ck-plan-subprice{ opacity: .75; font-size: 13px; }

.ck-plan-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 2px;
}

.ck-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  opacity: .92;
}

.ck-plan-actions{
  margin-top: auto;
  display:flex;
  gap: 10px;
}

.ck-note{
  margin-top: 12px;
  opacity: .75;
  font-size: 13px;
}

.ck-empty{
  margin-top: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  opacity: .85;
}

/* Responsive */
@media (max-width: 992px){
  .ck-landing-hero-inner{ flex-direction: column; }
  .ck-hero-actions{ justify-content:flex-start; min-width: 0; }
  .ck-hero-bullets{ grid-template-columns: 1fr; }
}

/* ===== Compare table + FAQ ===== */

.ck-compare-wrap{
  margin-top: 8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: auto;
}

.ck-compare-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 780px; /* scroll horizontal sur mobile */
}

.ck-compare-table th,
.ck-compare-table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}

.ck-compare-table thead th{
  position: sticky;
  top: 0;
  background: rgba(10,18,34,.92);
  backdrop-filter: blur(10px);
  z-index: 2;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.ck-col-feature{
  width: 260px;
  position: sticky;
  left: 0;
  z-index: 3;
  background: rgba(10,18,34,.92);
  border-right: 1px solid rgba(255,255,255,.08);
}

.ck-compare-table tbody td.ck-col-feature{
  background: rgba(10,18,34,.70);
}

.ck-th-name{ font-weight: 800; }
.ck-th-sub{ opacity: .8; font-size: 12px; margin-top: 2px; }

.ck-yes{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(17,205,198,.18);
  border: 1px solid rgba(17,205,198,.35);
  font-weight: 900;
}

.ck-no{ opacity: .65; }

.ck-compare-table tr.ck-sep td{
  border-top: 1px solid rgba(255,255,255,.14);
}

.ck-faq{
  margin-top: 14px;
}

.ck-faq-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 10px;
}

.ck-faq-item{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
}

.ck-faq-item summary{
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.ck-faq-item summary::-webkit-details-marker{ display:none; }

.ck-faq-body{
  margin-top: 8px;
  opacity: .85;
  font-size: 13px;
  line-height: 1.5;
}

.ck-cta{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 14px 14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}

@media (max-width: 992px){
  .ck-faq-grid{ grid-template-columns: 1fr; }
  .ck-cta{ flex-direction: column; align-items:flex-start; }
}

/* ===== Pricing v2: estimator + compare + FAQ (theme-safe) ===== */

.ck-estimator{ margin-top: 14px; }
.ck-est-card{
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: 14px;
}

.ck-est-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}

.ck-est-controls{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  align-items:end;
}

.ck-field label{
  display:block;
  font-weight: 800;
  font-size: 12px;
  opacity:.85;
  margin-bottom: 6px;
}
.ck-field input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--inputBg);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}
.ck-field input:focus{
  border-color: rgba(17,205,198,.45);
  box-shadow: 0 0 0 3px rgba(17,205,198,.16);
}

.ck-est-note{
  grid-column: 1 / -1;
  opacity: .78;
  font-size: 13px;
  line-height: 1.45;
}

.ck-est-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.ck-est-plan{
  border-radius: 18px;
  background: var(--panel2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.ck-est-plan.is-popular{
  border-color: rgba(17,205,198,.55);
  box-shadow: var(--shadow);
}

.ck-est-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.ck-est-price{
  display:flex;
  align-items:baseline;
  gap: 8px;
}
.ck-est-price .ck-total{
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.ck-est-per{ opacity: .75; font-size: 13px; }
.ck-total-sub{ opacity:.72; font-size: 13px; }

.ck-est-mini{ display:flex; flex-wrap:wrap; gap: 8px; }
.ck-est-actions{ display:flex; gap: 10px; margin-top:auto; }

.ck-compare-wrap{
  margin-top: 10px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  overflow: hidden;
}

.ck-compare-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.ck-compare-table th,
.ck-compare-table td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
}

.ck-compare-table thead th{
  background: var(--panel2);
  border-bottom: 1px solid var(--stroke2);
}

.ck-col-feature{
  width: 260px;
  background: var(--panel2);
  border-right: 1px solid var(--stroke);
  font-weight: 800;
}

.ck-compare-table tbody tr:hover td{
  background: rgba(17,205,198,.06);
}

.ck-th-name{ font-weight: 900; }
.ck-th-sub{ opacity: .75; font-size: 12px; margin-top: 2px; }

.ck-yes{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(17,205,198,.14);
  border: 1px solid rgba(17,205,198,.30);
  font-weight: 900;
}

/* Mobile compare: no horizontal scroll */
.ck-compare-desktop{ display:block; }
.ck-compare-mobile{ display:none; margin-top: 10px; }

.ck-cmp-card{
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: 14px;
}
.ck-cmp-card.is-popular{
  border-color: rgba(17,205,198,.55);
  box-shadow: var(--shadow);
}
.ck-cmp-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.ck-cmp-sub{ opacity:.78; font-size: 13px; margin-top: 4px; }
.ck-cmp-list{
  margin: 10px 0 0;
  padding-left: 18px;
  opacity: .88;
  font-size: 13px;
  line-height: 1.6;
}
.ck-cmp-actions{ margin-top: 10px; }

/* FAQ accordion premium */
.ck-faq-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 10px;
}
.ck-faq-item{
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: 10px 12px;
}
.ck-faq-item summary{
  cursor:pointer;
  font-weight: 900;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.ck-faq-item summary::-webkit-details-marker{ display:none; }
.ck-faq-item summary::after{
  content:"+";
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--chip);
  border: 1px solid var(--stroke);
  font-weight: 900;
  opacity: .9;
}
.ck-faq-item[open] summary::after{ content:"–"; }

.ck-faq-body{
  margin-top: 10px;
  opacity: .86;
  font-size: 13px;
  line-height: 1.55;
}

.ck-cta{
  margin-top: 14px;
  border-radius: 18px;
  background: var(--panel2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: 14px 14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}

@media (max-width: 992px){
  .ck-est-controls{ grid-template-columns: 1fr; }
  .ck-est-grid{ grid-template-columns: 1fr; }
  .ck-compare-desktop{ display:none; }
  .ck-compare-mobile{ display:grid; grid-template-columns: 1fr; gap: 12px; }
  .ck-faq-grid{ grid-template-columns: 1fr; }
  .ck-cta{ flex-direction: column; align-items:flex-start; }
}

/* ===== Signup v2 (theme-safe) ===== */

.ck-signup-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items:start;
}

.ck-signup-card{
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: 14px;
}

.ck-signup-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ck-alert{
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  margin-bottom: 10px;
}
.ck-alert-danger{
  border-color: rgba(255,90,90,.35);
  background: rgba(255,90,90,.10);
}

.ck-signup-form .ck-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ck-input{
  width:100%;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--inputBg);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

.ck-input:focus{
  border-color: rgba(17,205,198,.45);
  box-shadow: 0 0 0 3px rgba(17,205,198,.16);
}

.ck-help{
  margin-top: 6px;
  opacity: .75;
  font-size: 12px;
  line-height: 1.4;
}

.ck-consent{
  margin: 10px 0 12px;
  display:flex;
  align-items:flex-start;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  padding: 10px 12px;
}

.ck-consent-badge{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17,205,198,.16);
  border: 1px solid rgba(17,205,198,.30);
  white-space: nowrap;
}

.ck-consent-text{
  opacity: .85;
  font-size: 13px;
  line-height: 1.45;
}

.ck-signup-footer{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  opacity: .8;
  font-size: 13px;
}
.ck-signup-footer a{ color: inherit; text-decoration: underline; }

.ck-signup-side{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.ck-side-card{
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: 14px;
}

.ck-side-price{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  padding: 12px;
}

.ck-side-total{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.ck-side-small{
  margin-top: 4px;
  opacity: .75;
  font-size: 13px;
}

.ck-side-metas{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.ck-step{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

.ck-step-n{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: var(--chip);
  border: 1px solid var(--stroke);
}

.ck-step-t{ font-weight: 900; }
.ck-step-d{ opacity: .8; font-size: 13px; margin-top: 2px; }

.ck-side-actions{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

/* Responsive */
@media (max-width: 992px){
  .ck-signup-grid{ grid-template-columns: 1fr; }
  .ck-signup-form .ck-form-grid{ grid-template-columns: 1fr; }
}
/* Fix dropdown (select/options) en mode sombre */
:root[data-theme="dark"] select,
:root[data-theme="dark"] .ck-input select,
:root[data-theme="dark"] select.ck-input,
:root[data-theme="dark"] .ck-input{
  color-scheme: dark; /* aide le navigateur à rendre le menu en dark */
}

:root[data-theme="dark"] select.ck-input,
:root[data-theme="dark"] select.ck-input:focus,
:root[data-theme="dark"] .ck-input[type="select"],
:root[data-theme="dark"] select{
  background-color: var(--inputBg) !important;
  color: var(--text) !important;
  border-color: var(--stroke) !important;
}

/* IMPORTANT: le menu dropdown (options) */
:root[data-theme="dark"] select option{
  background-color: var(--panel) !important;
  color: var(--text) !important;
}

/* quand une option est survolée/sélectionnée (selon navigateur) */
:root[data-theme="dark"] select option:checked{
  background-color: rgba(17,205,198,.25) !important;
  color: var(--text) !important;
}
/* ===== Alerts success (theme-safe) ===== */
.ck-alert-success{
  border-color: rgba(17,205,198,.35);
  background: rgba(17,205,198,.10);
}

/* ===== Login v2 ===== */
.ck-login-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 14px;
  align-items:start;
}

.ck-login-card{
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: 14px;
}

.ck-pw{
  position: relative;
  display:flex;
  align-items:center;
}

.ck-pw .ck-input{
  padding-right: 68px; /* place pour le bouton */
}

.ck-pw-btn{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--chip);
  color: var(--text);
  padding: 7px 10px;
  font-weight: 800;
  font-size: 12px;
  opacity: .9;
}

.ck-pw-btn:hover{
  border-color: rgba(17,205,198,.35);
  box-shadow: 0 0 0 3px rgba(17,205,198,.14);
}

.ck-login-links{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  opacity: .85;
}

.ck-login-links a{
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 992px){
  .ck-login-grid{ grid-template-columns: 1fr; }
}

/* Fix dropdown options en mode sombre (Chrome/Windows) */
:root[data-theme="dark"] .form-select {
  color-scheme: dark;
}
:root[data-theme="dark"] select option {
  background: #0B1324;
  color: #EAF2FF;
}

:root[data-theme="dark"] .card:not(.ck-card){
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] textarea{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
}

:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] textarea::placeholder{
  color: rgba(255,255,255,.45) !important;
}

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light{
  background: rgba(255,255,255,.04) !important;
}


/* ===== Fix Bootstrap helper backgrounds in DARK mode ===== */
:root[data-theme="dark"] .bg-body,
:root[data-theme="dark"] .bg-body-tertiary,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-white{
  background: var(--panel2) !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] .border,
:root[data-theme="dark"] hr{
  border-color: var(--stroke) !important;
}
:root[data-theme="dark"] .text-secondary,
:root[data-theme="dark"] .form-text{
  color: var(--muted) !important;
}