/* Styles du site vitrine (layouts/app.blade.php), en complément de dashcore.css */

/* Bloc de démonstration du formulaire (contact/sales.blade.php) */
.demo-blocks {
  background-color: #f1f4f8;
}

.demo-blocks .block {
  margin-bottom: 3rem;
  margin-top: 3rem;
  box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.075);
  border: 1px solid #d9e2ef;
  border-radius: 0.25rem;
  background-color: #ffffff;
}

/* ── Schéma « Plateforme tout-en-un » (shared/solutions-modular.blade.php) ──
   Bureau : racine → 4 catégories reliées, modules empilés sous chaque catégorie.
   Tablette / mobile : cartes par catégorie, modules en pastilles (aucun défilement horizontal). */
.jp-tree {
  --jp-tree-line: #d0d8e8;
  padding: 2rem 0 1rem;
}

/* :where() = spécificité nulle, pour ne pas écraser les marges des classes ci-dessous */
.jp-tree :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jp-tree__root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.jp-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  white-space: nowrap;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.25;
  background: #fff;
  border: 1px solid #e2e8f2;
  color: #3d4a63;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.jp-node svg {
  flex-shrink: 0;
}

.jp-node--root {
  font-size: 1.15rem;
  font-weight: 700;
  padding: 0.7em 1.8em;
  border-radius: 50px;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(85, 51, 255, 0.3);
}

.jp-node--category {
  font-size: 0.95rem;
  padding: 0.6em 1.3em;
  border-radius: 50px;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.jp-node--leaf {
  min-width: 160px;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.55em 1em;
}

.jp-node--leaf:hover {
  border-color: #b0bcda;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.1);
}

.jp-cat--pay  { background: #4f46e5; }
.jp-cat--api  { background: #0284c7; }
.jp-cat--bill { background: #059669; }
.jp-cat--mgmt { background: #d97706; }

/* Catégories : 4 colonnes reliées par une barre horizontale */
.jp-tree__cats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 32px;
}

.jp-tree__cats::before {
  /* racine → barre */
  content: "";
  position: absolute;
  top: -32px;
  left: 50%;
  width: 2px;
  height: 32px;
  background: var(--jp-tree-line);
  transform: translateX(-50%);
}

.jp-tree__cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 8px 0;
}

.jp-tree__cat::before,
.jp-tree__cat::after {
  /* demi-barres : la barre s'arrête au centre de la première et de la dernière colonne */
  content: "";
  position: absolute;
  top: 0;
  height: 2px;
  background: var(--jp-tree-line);
}

.jp-tree__cat::before { left: 0; right: 50%; }
.jp-tree__cat::after  { left: 50%; right: 0; }
.jp-tree__cat:first-child::before,
.jp-tree__cat:last-child::after { display: none; }

.jp-tree__cat > .jp-node::before {
  /* barre → catégorie */
  content: "";
  position: absolute;
  top: -32px;
  left: 50%;
  width: 2px;
  height: 32px;
  background: var(--jp-tree-line);
  transform: translateX(-50%);
}

/* Modules : empilés sous la catégorie, reliés par un trait vertical */
.jp-tree__leaves {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
}

.jp-tree__leaves::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 18px;
  left: 50%;
  width: 2px;
  background: var(--jp-tree-line);
  transform: translateX(-50%);
}

@media (max-width: 991.98px) {
  .jp-tree__cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
  }

  .jp-tree__cats::before,
  .jp-tree__cat::before,
  .jp-tree__cat::after,
  .jp-tree__cat > .jp-node::before,
  .jp-tree__leaves::before {
    display: none;
  }

  .jp-tree__cat {
    padding: 20px 16px;
    background: #fff;
    border: 1px solid #e9eaf2;
    border-radius: 16px;
  }

  .jp-tree__leaves {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-top: 16px;
  }

  .jp-node--leaf {
    min-width: 0;
    font-size: 0.875rem;
  }
}

@media (max-width: 575.98px) {
  .jp-tree__cats {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════  Accueil (home.blade.php)  ═══════════════ */

/* Grille « Tout pour encaisser » : cartes cliquables vers chaque solution */
.jp-solutions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.jp-solution {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px;
  background: #fff;
  border: 1px solid #e9eaf2;
  border-radius: 16px;
  color: #1d2033;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.jp-solution:hover {
  color: #1d2033;
  text-decoration: none;
  transform: translateY(-3px);
  border-color: #d6d0ff;
  box-shadow: 0 12px 28px rgba(29, 32, 51, 0.08);
}

.jp-solution-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(85, 51, 255, 0.1);
  color: #5533ff;
}

.jp-solution h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #1d2033;
}

.jp-solution p {
  flex: 1;
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #5b6178;
}

.jp-solution-more {
  font-size: 0.88rem;
  font-weight: 600;
  color: #5533ff;
}

/* Listes à puces avec icône (vente, fidélité, développeurs) */
.jp-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.jp-checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.jp-checklist .jp-check-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(85, 51, 255, 0.1);
  color: #5533ff;
}

.jp-checklist strong {
  display: block;
  color: #1d2033;
}

.jp-checklist span.jp-check-text {
  font-size: 0.92rem;
  color: #5b6178;
}

/* Maquette : produit vendu via un lien partagé */
.jp-shop-mock {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(29, 32, 51, 0.16);
  overflow: hidden;
}

.jp-shop-mock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 0.75rem;
  color: #6b7088;
  border-bottom: 1px solid #f0f1f6;
}

.jp-shop-mock-photo {
  height: 170px;
  background: linear-gradient(135deg, #5533ff 0%, #1652f0 60%, #19c7a6 100%);
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  color: #fff;
}

.jp-shop-mock-photo strong {
  font-size: 1.05rem;
}

.jp-shop-mock-body {
  padding: 16px;
}

.jp-shop-mock-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1d2033;
}

.jp-shop-mock-price s {
  margin-left: 6px;
  font-size: 0.85rem;
  font-weight: 400;
  color: #9aa0b4;
}

.jp-shop-mock-chips {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}

.jp-shop-mock-chips span {
  padding: 6px 12px;
  border: 2px solid #e6e8f1;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1d2033;
}

.jp-shop-mock-chips span.is-active {
  border-color: #5533ff;
  background: #f3f0ff;
  color: #5533ff;
}

.jp-shop-mock-chips span.is-soldout {
  color: #b3b7c8;
  text-decoration: line-through;
}

.jp-shop-mock-field {
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid #e6e8f1;
  border-radius: 10px;
  font-size: 0.82rem;
  color: #9aa0b4;
}

.jp-shop-mock-btn {
  padding: 12px;
  border-radius: 12px;
  background: #5533ff;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}

/* JemeniPoint : programme de fidélité */
.jp-loyalty {
  background: linear-gradient(135deg, #1d1655 0%, #3a22c9 55%, #5533ff 100%);
  color: #fff;
}

.jp-loyalty h2,
.jp-loyalty h3 {
  color: #fff;
}

.jp-loyalty .lead {
  color: rgba(255, 255, 255, 0.85);
}

.jp-loyalty-card {
  height: 100%;
  padding: 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.jp-loyalty-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.jp-loyalty .jp-checklist .jp-check-icon {
  background: rgba(255, 255, 255, 0.14);
  color: #ffd166;
}

.jp-loyalty .jp-checklist strong {
  color: #fff;
}

.jp-loyalty .jp-checklist span.jp-check-text {
  color: rgba(255, 255, 255, 0.8);
}

/* Tarifs & développeurs */
.jp-panel {
  height: 100%;
  padding: 28px;
  background: #fff;
  border: 1px solid #e9eaf2;
  border-radius: 18px;
}

.jp-price-tag {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: #1d2033;
}

.jp-price-tag small {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 400;
  color: #6b7088;
}

.jp-code {
  margin: 0 0 1.25rem;
  padding: 16px 18px;
  border-radius: 12px;
  background: #14162b;
  color: #d8dcf0;
  font-size: 0.8rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}

.jp-code .c { color: #7f87a8; }
.jp-code .k { color: #9d8cff; }
.jp-code .s { color: #6ee7b7; }

/* FAQ : <details> natif, sans JavaScript */
.jp-faq {
  max-width: 820px;
  margin: 0 auto;
}

.jp-faq details {
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid #e9eaf2;
  border-radius: 14px;
}

.jp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  font-weight: 600;
  color: #1d2033;
  cursor: pointer;
  list-style: none;
}

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

.jp-faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: #5533ff;
}

.jp-faq details[open] summary::after {
  content: "−";
}

.jp-faq details p {
  margin: 0;
  padding: 0 20px 18px;
  color: #5b6178;
  line-height: 1.6;
}

@media (max-width: 991.98px) {
  .jp-solutions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .jp-solutions {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .jp-solution {
    padding: 18px;
  }

  .jp-panel {
    padding: 22px;
  }

  .jp-price-tag {
    font-size: 1.6rem;
  }
}

/* Maquette « Abonnements » : une formule et ses abonnés */
.jp-sub-mock {
  max-width: 400px;
  margin: 0 auto;
  padding: 22px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(29, 32, 51, 0.14);
}

.jp-sub-mock-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef0f6;
}

.jp-sub-mock-head small {
  display: block;
  font-size: 0.75rem;
  color: #8a90a6;
}

.jp-sub-mock-head strong {
  font-size: 1.15rem;
  color: #1d2033;
}

.jp-sub-mock-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: #5533ff;
  text-align: right;
}

.jp-sub-mock-price small {
  display: inline;
  margin-left: 2px;
  font-weight: 500;
}

.jp-sub-mock-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.jp-sub-mock-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 0.9rem;
  color: #3d4a63;
  border-bottom: 1px solid #f3f4f8;
}

.jp-sub-mock-list em {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 7px;
}

.jp-sub-mock-list em.is-ok {
  background: #d7f7e9;
  color: #0d7a54;
}

.jp-sub-mock-list em.is-wait {
  background: #fdf1d7;
  color: #9a6400;
}

.jp-sub-mock-toast {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f6f4ff;
  font-size: 0.82rem;
  color: #3d4a63;
}

.jp-sub-mock-toast strong {
  display: block;
  color: #1d2033;
}

.jp-sub-mock-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #5533ff;
  color: #fff;
  font-weight: 800;
}