/* Projets — styles de page (alignés sur la direction "premium, sobre" — css/refine.css) */

/* ===== Nav tabs & badges (.chip) =====
   .chip existe aussi globalement dans css/style.css (icône empilée au-dessus
   du texte, pilule uppercase) — on regagne la priorité via la spécificité
   #contenu .chip plutôt qu'en modifiant style.css. */
#contenu .chip{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  min-height: 0;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
#contenu .chip:hover{
  border-color: var(--line-strong);
  color: var(--text-primary);
  transform: none;
  box-shadow: none;
}
#contenu .chip svg{ width: 13px; height: 13px; flex-shrink: 0; }
#contenu .chip.is-active{
  border-color: var(--primary);
  background: var(--primary-50);
  color: var(--primary);
  box-shadow: none;
}

.chip--featured{
  background: var(--primary-50);
  color: var(--primary);
  border-color: rgba(32, 32, 204, 0.2);
  font-weight: 600;
}
.chip--apm,
.chip--retail,
.chip--notaire{
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--line);
}

/* ===== Kickers ("Notre fierté…", "Le standard qui ne dort jamais…") =====
   Ancien manuscrit (Caveat, pivoté) → petit label sobre, sur sa propre ligne.
   .tx-kicker est défini dans style.css : on regagne la priorité via #contenu. */
.project-kicker,
#contenu .tx-kicker{
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  transform: none;
  margin-bottom: 0.5rem;
}

/* ===== Titres de projet =====
   Poids trop fin une fois repassés en Geist par refine.css → 600, tracking
   serré comme les autres titres de la page. .tx-title vient de style.css. */
.project-title,
#contenu .tx-title{
  font-weight: 600;
  letter-spacing: -0.025em;
}
.project-title{
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  color: var(--text-primary);
}

/* ===== Device frames (mockups) ===== */
.device-frame{
  position: relative;
  border-radius: 36px;
  padding: 14px;
  background: linear-gradient(160deg, #1a1a2e 0%, #0a0e27 100%);
  box-shadow: var(--shadow-lg);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.device-frame:hover{ transform: translateY(-6px); }
.device-frame img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  background: #fff;
}
.device-frame--phone{ border-radius: 44px; padding: 10px; max-width: 280px; }
.device-frame--phone img{ border-radius: 34px; }
.device-frame--tablet{ border-radius: 32px; padding: 16px; }

/* Stack of phones */
.device-stack{
  position: relative;
  display: flex;
  justify-content: center;
  gap: -40px;
}
.device-stack .device-frame--phone{ margin: 0 -28px; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.device-stack .device-frame--phone:nth-child(1){ transform: translateY(20px) rotate(-6deg); z-index: 1; }
.device-stack .device-frame--phone:nth-child(2){ transform: translateY(-10px); z-index: 2; }
.device-stack .device-frame--phone:nth-child(3){ transform: translateY(20px) rotate(6deg); z-index: 1; }
.device-stack:hover .device-frame--phone:nth-child(1){ transform: translateY(15px) rotate(-8deg) translateX(-8px); }
.device-stack:hover .device-frame--phone:nth-child(3){ transform: translateY(15px) rotate(8deg) translateX(8px); }

/* ===== Project hero card =====
   Fond lavande en dégradé + flou décoratif + halo coloré → surface blanche
   plate, bordure 1px, ombre neutre (direction refine.css). */
.project-card{
  position: relative;
  isolation: isolate;
  border-radius: var(--r-card-lg);
  padding: clamp(2rem, 4vw, 4rem);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.project-card--apm,
.project-card--retail,
.project-card--notaire{
  background: #fff;
  border-color: var(--line);
}

/* ===== Stat badge ===== */
.stat-badge{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border-radius: var(--r-control);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.stat-badge__value{
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-badge__label{
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  font-weight: 500;
}

/* ===== Confidential ribbon ===== */
.confidential-mark{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-control);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ===== Mock-up visuel "magasin" (sans screenshot) ===== */
.mockup-pos{
  position: relative;
  border-radius: var(--r-card-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  overflow: hidden;
}
.mockup-pos__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}
.mockup-pos__dots{
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.mockup-pos__dots span{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-strong);
  display: block;
}
.mockup-pos__ticket{
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mockup-pos__row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.mockup-pos__row > span{
  flex: 1 1 auto;
  min-width: 0;
}
.mockup-pos__row > strong{
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-weight: 600;
}
.mockup-pos__row--subtotal{
  border-bottom: none;
  padding-top: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}
.mockup-pos__total{
  background: var(--text-primary);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: var(--r-control);
  margin-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
}
.mockup-pos__total > strong{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
}
.mockup-pos .text-center.p-3,
.mockup-pos [class*="rounded-lg"]{
  border-color: var(--line) !important;
}

/* ===== Notaire UI mock ===== */
.mockup-notaire{
  position: relative;
  border-radius: var(--r-card-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
}
.mockup-notaire__header{
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}
.mockup-notaire__logo{
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--primary); font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.mockup-notaire__shield{
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--primary);
  display: grid; place-items: center;
  color: #fff;
}
.mockup-notaire__grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
}
.mockup-notaire__tile{
  padding: 1rem;
  border-radius: var(--r-control);
  background: var(--primary-50);
  border: 1px solid rgba(32, 32, 204, 0.14);
}
.mockup-notaire__tile-label{
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); font-weight: 600; margin-bottom: 0.35rem;
}
.mockup-notaire__tile-value{
  font-weight: 700; color: var(--text-primary); font-size: 0.9rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.mockup-notaire__dot-ok{ width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.mockup-notaire__connections{
  display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap;
}
.mockup-notaire__connections span{
  padding: 0.35rem 0.7rem; border-radius: 6px;
  background: #fff; border: 1px solid var(--line-strong);
  font-size: 0.7rem; font-weight: 600; color: var(--text-secondary);
  letter-spacing: 0.02em;
}

@media (max-width: 768px){
  .device-frame--tablet{ max-width: 360px; margin: 0 auto; }
  .device-stack{ transform: scale(0.85); margin: -1rem auto; }
  .device-stack .device-frame--phone{ margin: 0 -32px; }
}