/* ============================================================
   DARIX CRM — PAGE PRODUIT
   Styles spécifiques à produit.html.
   Dépend de tokens.css, base.css, components.css, animations.css.
   home.css est aussi importé pour réutiliser .laptop / .dash / .kpi-row
   dans la section "Découvrir l'app".
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   ANTI-FOUC
   ════════════════════════════════════════════════════════════ */

.produit-hero-title,
.produit-hero-subtitle,
.module-hero,
.interactive-stage,
.discover-mockup,
.coming-soon h2 {
  opacity: 0;
}

html.no-js .produit-hero-title,
html.no-js .produit-hero-subtitle,
html.no-js .module-hero,
html.no-js .interactive-stage,
html.no-js .discover-mockup,
html.no-js .coming-soon h2 {
  opacity: 1;
}

/* Fallback : si GSAP plante, contenu visible après 3s */
@keyframes ensure-visible-produit {
  to { opacity: 1; }
}

.produit-hero-title,
.produit-hero-subtitle,
.module-hero,
.interactive-stage,
.discover-mockup,
.coming-soon h2 {
  animation: ensure-visible-produit 0s linear 3s forwards;
}


/* ════════════════════════════════════════════════════════════
   HERO PRODUIT
   ════════════════════════════════════════════════════════════ */

.produit-page {
  background: var(--color-cream);
}

.produit-hero {
  padding: 96px 0 48px;
  text-align: center;
  background: var(--color-cream);
}

.produit-hero .eyebrow {
  display: inline-block;
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.produit-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-navy-deep);
  margin: 0 auto 18px;
  max-width: 900px;
}

.produit-hero-title em {
  color: var(--color-navy);
  font-weight: 400;
  font-style: italic;
}

.produit-hero-subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto;
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════
   TABS NAVIGATION (sticky)
   ════════════════════════════════════════════════════════════ */

.produit-tabs {
  position: sticky;
  top: 60px;  /* hauteur du header */
  z-index: 30;
  background: rgba(244, 239, 230, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid rgba(30, 58, 95, 0.1);
  padding: 16px 0;
}

.tabs-list {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: transparent;
  border: 1.5px solid rgba(30, 58, 95, 0.15);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy);
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}

.tab-btn i {
  font-size: 18px;
  color: var(--color-text-muted);
  transition: color 0.3s var(--ease);
}

.tab-btn:hover {
  border-color: var(--color-gold);
}

.tab-btn.active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-cream);
}

.tab-btn.active i {
  color: var(--color-gold);
}

@media (max-width: 768px) {
  .produit-tabs { padding: 12px 0; }
  .tab-btn { padding: 8px 16px; font-size: 13px; }
  .tab-btn span { display: none; } /* icônes seules sur mobile */
  .tab-btn i { font-size: 22px; }
}


/* ════════════════════════════════════════════════════════════
   TAB PANELS
   ════════════════════════════════════════════════════════════ */

.tab-panel {
  padding: 64px 0;
  display: none;
}

.tab-panel.active {
  display: block;
}

.module-hero {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.module-hero .eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.module-hero .eyebrow.gold,
.eyebrow.gold {
  color: var(--color-gold);
}

.module-hero h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-navy-deep);
  margin: 12px 0 18px;
}

.module-hero h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-navy);
}

.module-hero-text {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text-muted);
  margin: 0 auto 28px;
  line-height: 1.7;
  max-width: 640px;
}


/* ════════════════════════════════════════════════════════════
   INTERACTIVE STAGE (commun aux 4 animations)
   ════════════════════════════════════════════════════════════ */

.interactive-stage {
  background: var(--color-cream-light);
  border-radius: 20px;
  padding: 40px 24px;
  margin: 48px auto;
  max-width: 980px;
  border: 0.5px solid var(--color-border);
}

.anim-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 32px;
}

.anim-hint {
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 20px 0 0;
  font-style: italic;
}


/* ════════════════════════════════════════════════════════════
   ANIMATION 1 — KANBAN (Mandats)
   ════════════════════════════════════════════════════════════ */

.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.kanban-col {
  background: #fff;
  border-radius: 12px;
  padding: 14px 10px;
  min-height: 200px;
  border: 0.5px solid var(--color-border);
}

.kanban-col-header {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kanban-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.dot-actif     { background: var(--color-gold); }
.dot-visite    { background: #378ADD; }
.dot-compromis { background: #BA7517; }
.dot-vendu     { background: #1D9E75; }

.kanban-drop {
  min-height: 100px;
  border-radius: 8px;
  transition: background 0.2s var(--ease);
  padding: 4px;
}

.kanban-drop.drag-over {
  background: rgba(196, 154, 94, 0.1);
  outline: 1px dashed rgba(196, 154, 94, 0.5);
}

.kanban-card {
  background: var(--color-cream-light);
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  cursor: grab;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.5; cursor: grabbing; }

.kc-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-navy-deep);
  margin-bottom: 4px;
}

.kc-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.kc-tags {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .kanban-board { grid-template-columns: repeat(2, 1fr); }
}


/* ════════════════════════════════════════════════════════════
   ANIMATION 2 — TIMELINE (Prospects)
   ════════════════════════════════════════════════════════════ */

.timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin: 0 auto 32px;
  max-width: 720px;
}

.tl-step {
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
  flex-shrink: 0;
  padding: 8px;
  font-family: var(--font-body);
}

.tl-dot {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-border);
  margin: 0 auto 8px;
  transition: all 0.3s var(--ease);
}

.tl-step.active .tl-dot,
.tl-step:hover .tl-dot {
  background: var(--color-gold);
  box-shadow: 0 0 0 6px rgba(196, 154, 94, 0.15);
}

.tl-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy);
}

.tl-date {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.tl-line {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin-bottom: 18px;
}

.tl-detail {
  max-width: 600px;
  margin: 0 auto;
}

.tl-detail-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  border: 0.5px solid var(--color-border);
}

.tl-detail-card h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--color-navy-deep);
}

.tl-detail-card p {
  font-family: var(--font-body);
  font-size: 14px;
  margin: 6px 0;
  color: var(--color-navy);
  max-width: none;
}

.tl-note {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 0.5px solid var(--color-border);
  color: var(--color-text-muted) !important;
  font-style: italic;
}

@media (max-width: 768px) {
  .timeline { flex-wrap: wrap; gap: 8px; }
  .tl-line { display: none; }
  .tl-step { flex: 1 0 30%; }
}


/* ════════════════════════════════════════════════════════════
   ANIMATION 3 — MATCHING (Slider + cards)
   ════════════════════════════════════════════════════════════ */

.match-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
}

.match-criteria {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 0.5px solid var(--color-border);
  align-self: start;
}

.criteria-row {
  margin-bottom: 18px;
}

.criteria-row label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  font-weight: 500;
}

.criteria-row input[type="range"] {
  width: 100%;
  accent-color: var(--color-gold);
  cursor: pointer;
}

.criteria-row select {
  width: 100%;
  padding: 8px 12px;
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  color: var(--color-navy);
  background: #fff;
  font-size: 14px;
}

.criteria-value {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-navy-deep);
  font-size: 15px;
}

.match-count {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 0.5px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-navy);
}

.match-count span {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--color-gold);
  margin-right: 4px;
}

.match-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-content: start;
}

.match-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  border: 0.5px solid var(--color-border);
  transition: all 0.3s var(--ease);
}

.match-card.hidden {
  opacity: 0.2;
  filter: grayscale(1);
  transform: scale(0.96);
}

.match-card .mc-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-navy-deep);
}

.match-card .mc-meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .match-container { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════
   ANIMATION 4 — RELANCES (WhatsApp scheduler)
   ════════════════════════════════════════════════════════════ */

.relance-container {
  max-width: 540px;
  margin: 0 auto;
}

.prospect-card-mini {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 0.5px solid var(--color-border);
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
}

.pcm-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-gold);
  color: var(--color-navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  flex-shrink: 0;
}

.pcm-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-navy-deep);
}

.pcm-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.relance-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.btn-relance {
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  border: 1.5px solid var(--color-navy);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-navy);
  transition: all 0.2s var(--ease);
}

.btn-relance:hover,
.btn-relance.active {
  background: var(--color-navy);
  color: var(--color-cream);
}

.whatsapp-preview {
  background: #DCF8C6;
  border-radius: 12px;
  padding: 16px;
  border: 0.5px solid #B8E0A0;
}

.whatsapp-preview[hidden] { display: none; }

.wa-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: #075E54;
  font-weight: 600;
  margin-bottom: 12px;
}

.wa-header i { font-size: 18px; }

.wa-bubble {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: #303030;
  line-height: 1.5;
  margin-bottom: 12px;
}

.wa-countdown {
  font-family: var(--font-body);
  font-size: 12px;
  color: #075E54;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.wa-countdown span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}

.btn-cancel {
  background: transparent;
  border: 0.5px solid #075E54;
  color: #075E54;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s var(--ease);
}

.btn-cancel:hover {
  background: #075E54;
  color: #fff;
}


/* ════════════════════════════════════════════════════════════
   BENEFITS GRID
   ════════════════════════════════════════════════════════════ */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 48px auto;
}

.benefit-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 22px;
  border: 0.5px solid var(--color-border);
  transition: all 0.3s var(--ease);
}

.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(196, 154, 94, 0.4);
}

.benefit-icon {
  font-size: 28px;
  color: var(--color-gold);
  margin-bottom: 14px;
  display: inline-flex;
}

.benefit-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-navy-deep);
  margin: 0 0 8px;
  line-height: 1.3;
}

.benefit-card p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
  max-width: none;
}


/* ════════════════════════════════════════════════════════════
   FEATURES LIST
   ════════════════════════════════════════════════════════════ */

.features-list {
  max-width: 720px;
  margin: 48px auto 0;
  padding: 32px;
  background: var(--color-cream-light);
  border-radius: 16px;
  border: 0.5px solid var(--color-border);
}

.features-list h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--color-navy-deep);
}

.features-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.features-ul li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-navy);
  line-height: 1.5;
}

.features-ul li i {
  color: var(--color-gold);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 768px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .features-list { padding: 24px 20px; }
}


/* ════════════════════════════════════════════════════════════
   SECTION : DÉCOUVRIR L'APP
   ════════════════════════════════════════════════════════════ */

.discover-app {
  padding: 96px 0;
  background: var(--color-cream-light);
  text-align: center;
}

.discover-app .eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.discover-app h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-navy-deep);
  margin: 0 0 18px;
}

.discover-app h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-navy);
}

.discover-text {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text-muted);
  max-width: 580px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.discover-mockup {
  max-width: 720px;
  margin: 32px auto;
  perspective: 1500px;
}

.discover-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}


/* ════════════════════════════════════════════════════════════
   SECTION : À VENIR (MLS)
   ════════════════════════════════════════════════════════════ */

.coming-soon {
  padding: 96px 0;
  background: var(--color-navy);
  color: var(--color-cream);
  text-align: center;
}

.coming-soon .eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.coming-soon h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-cream);
  margin: 0 0 18px;
}

.coming-soon h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-gold);
}

.coming-text {
  font-family: var(--font-body);
  max-width: 640px;
  margin: 0 auto 40px;
  color: rgba(244, 239, 230, 0.75);
  font-size: 17px;
  line-height: 1.7;
}

.mls-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 920px;
  margin: 0 auto 48px;
}

.mls-card {
  background: rgba(244, 239, 230, 0.06);
  border: 0.5px solid rgba(196, 154, 94, 0.25);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: left;
  transition: all 0.3s var(--ease);
}

.mls-card:hover {
  background: rgba(244, 239, 230, 0.09);
  border-color: rgba(196, 154, 94, 0.5);
  transform: translateY(-2px);
}

.mls-card i {
  font-size: 26px;
  color: var(--color-gold);
  margin-bottom: 12px;
  display: inline-flex;
}

.mls-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-cream);
  margin: 8px 0;
  line-height: 1.3;
}

.mls-card p {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(244, 239, 230, 0.7);
  margin: 0;
  line-height: 1.6;
  max-width: none;
}

.mls-waitlist {
  max-width: 460px;
  margin: 0 auto;
}

.mls-waitlist > p {
  font-family: var(--font-body);
  color: var(--color-cream);
  font-size: 15px;
  margin: 0 0 12px;
  max-width: none;
}

.waitlist-form {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}

.waitlist-form input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: 0.5px solid rgba(244, 239, 230, 0.2);
  background: rgba(244, 239, 230, 0.06);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 14px;
}

.waitlist-form input::placeholder {
  color: rgba(244, 239, 230, 0.4);
}

.waitlist-form input:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-color: var(--color-gold);
}

.waitlist-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(244, 239, 230, 0.5);
  margin: 0;
  max-width: none;
}

.waitlist-success {
  font-family: var(--font-body);
  color: var(--color-gold);
  font-weight: 600;
  font-size: 15px;
  margin: 16px 0 0;
}

@media (max-width: 768px) {
  .mls-features { grid-template-columns: 1fr; }
  .waitlist-form { flex-direction: column; }
  .waitlist-form button { width: 100%; }
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE GLOBAL
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .produit-hero { padding: 72px 0 32px; }
  .tab-panel { padding: 40px 0; }
  .interactive-stage { padding: 28px 16px; margin: 32px auto; }
  .discover-app, .coming-soon { padding: 64px 0; }
}

@media (max-width: 480px) {
  .produit-hero { padding: 56px 0 24px; }
  .module-hero h2,
  .discover-app h2,
  .coming-soon h2 {
    font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
  }
}


/* ════════════════════════════════════════════════════════════
   AUTO-HIDE HEADER au scroll mobile
   Le header se cache au scroll vers le bas et réapparaît au
   scroll vers le haut (pattern Instagram / Twitter / Notion).
   Les tabs sticky remontent au top pour récupérer l'espace.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .site-header {
    transition: transform 0.3s var(--ease);
    will-change: transform;
  }

  .site-header.header-hidden {
    transform: translateY(-100%);
  }

  /* Tabs : padding réduit + remontée au top quand header caché */
  .produit-tabs {
    top: 60px;
    padding: 8px 0;
    transition: top 0.3s var(--ease);
  }

  .site-header.header-hidden ~ .produit-tabs {
    top: 0;
  }
}

@media (max-width: 480px) {
  .produit-tabs {
    padding: 6px 0;
  }

  .tab-btn {
    padding: 7px 12px;
    font-size: 12px;
  }

  .tab-btn i {
    font-size: 16px;
  }
}