/* Chat WhatsApp-like + profil + relevé + PAT dark app */

.chat-panel { display: flex; flex-direction: column; min-height: 70vh; padding: 0 !important; overflow: hidden; }
.chat-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem; border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, #0e3a5c, #071022); color: #fff;
}
.chat-head .muted { color: rgba(255,255,255,0.65); }
.chat-thread {
  flex: 1; overflow-y: auto; padding: 1rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(40,120,255,0.08), transparent 40%),
    #0a1220;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.bubble {
  max-width: min(80%, 420px);
  padding: 0.7rem 0.85rem;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #e2e8f0;
  align-self: flex-start;
}
.bubble.me {
  align-self: flex-end;
  background: rgba(40,120,255,.22);
  border-color: rgba(40,120,255,.3);
  border-bottom-right-radius: 4px;
}
.bubble.activity {
  align-self: center;
  background: rgba(25,212,124,.1);
  color: #6ee7a8;
  font-size: 0.82rem;
  text-align: center;
  border-radius: 999px;
  max-width: 90%;
}
.bubble .who { font-size: 0.72rem; font-weight: 800; color: #72bbff; margin-bottom: 0.2rem; }
.bubble .when { display: block; text-align: right; font-size: 0.68rem; color: #64748b; margin-top: 0.35rem; }
.chat-composer {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem;
  padding: 0.75rem; background: #071022; border-top: 1px solid rgba(255,255,255,0.08);
}
.chat-composer input {
  border: 0; border-radius: 999px; padding: 0.85rem 1rem;
  background: rgba(255,255,255,.06); color: #fff;
}

.profile-cover {
  height: 160px; border-radius: 18px; background-size: cover; background-position: center;
  position: relative; margin-bottom: 2.5rem;
}
.profile-avatar {
  width: 84px; height: 84px; border-radius: 50%; border: 4px solid #0b1528;
  background: linear-gradient(145deg, #2878ff, #0e3a5c); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.5rem;
  position: absolute; left: 1rem; bottom: -42px;
}
.profile-accent-gold { --accent: #c9a227; }
.profile-accent-blue { --accent: #2878ff; }
.profile-accent-black { --accent: #0a0a0a; }

.statement-sheet {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 1.5rem;
  color: #e2e8f0;
}
.statement-sheet h2 { margin: 0 0 0.3rem; }
.print-toolbar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.statement-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 1rem 0; }
.statement-meta div {
  background: rgba(255,255,255,.05); border-radius: 12px; padding: 0.8rem 1rem;
}
.statement-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.statement-table th, .statement-table td {
  border-bottom: 1px solid rgba(255,255,255,0.08); padding: 0.55rem 0.3rem; text-align: left;
}

.tontine-switcher{
  width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);color:#fff;padding:.7rem .8rem;font-weight:700;
}
.member-bottom{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(5,8,22,.96);border-top:1px solid rgba(40,120,255,.3);
  padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
}
.member-bottom button{
  border:0;background:transparent;color:rgba(255,255,255,.7);
  font-size:.68rem;font-weight:700;padding:.55rem .2rem;cursor:pointer;
}
.member-bottom button.is-active{color:#72bbff}
@media(min-width:860px){
  .member-bottom{display:none}
}
@media(max-width:859px){
  .app-main{padding-bottom:5rem}
}

/* —— Dark PAT shell —— */
.pat-app {
  font-family: "Manrope", system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(40,120,255,.14), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(25,212,124,.08), transparent 25%),
    #050816;
  color: #f8fafc;
}
.pat-app .brand-mark-pat {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, #2878ff, #35b7ff);
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(40,120,255,.3);
}
.pat-app .brand-mark-pat strong { color: #fff; font-size: .95rem; }

.lang-switch {
  display: inline-flex; gap: .2rem; padding: .2rem;
  border-radius: 999px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.lang-switch button {
  border: 0; background: transparent; color: #94a3b8;
  font-weight: 800; font-size: .72rem; padding: .45rem .65rem;
  border-radius: 999px; cursor: pointer;
}
.lang-switch button.is-on {
  background: linear-gradient(135deg, #1f6fff, #26a9ff); color: #fff;
}

.pat-app .auth-gate { background: #050816; }
.pat-app .auth-visual {
  display: none; position: relative; min-height: 100vh; overflow: hidden;
}
.auth-slides { position: absolute; inset: 0; }
.auth-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .8s ease;
}
.auth-slide.is-on { opacity: 1; }
.pat-app .auth-visual-shade {
  background:
    linear-gradient(180deg, rgba(5,8,22,.25), rgba(5,8,22,.88)),
    linear-gradient(90deg, rgba(5,8,22,.7), transparent 60%);
}
.pat-app .auth-kicker { color: #72bbff; letter-spacing: .12em; }
.pat-app .auth-visual-copy h1 {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.04em;
}
.pat-app .auth-visual-copy h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #fff, #5abaff, #27d887);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-zigzag {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: 56px; display: block;
}
.pat-app .auth-panel {
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(40,120,255,.14), transparent 55%),
    linear-gradient(180deg, #0b1528 0%, #071022 100%);
}
.auth-panel-top {
  display: flex; justify-content: space-between; align-items: start;
  gap: 1rem; margin-bottom: 1.5rem;
}
.pat-app .auth-brand { margin-bottom: 0; }
.pat-app .auth-mode.is-active,
.pat-app .auth-method.is-active {
  background: linear-gradient(135deg, #1f6fff, #26a9ff);
  color: #fff;
}
.pat-app .btn-primary,
.pat-app .btn-gold {
  background: linear-gradient(135deg, #1f6fff, #26a9ff) !important;
  color: #fff !important;
  box-shadow: 0 15px 35px rgba(31,111,255,.25);
  border: 0;
}
.pat-app .btn-outline {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
.auth-hint {
  color: #7d8ba1; font-size: .82rem; line-height: 1.5; margin: 0 0 1rem;
}
.pat-app .auth-demo {
  margin-top: 1.2rem; padding: 1rem; border-radius: 16px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: #94a3b8; font-size: .82rem;
}
.pat-app .auth-demo code {
  color: #9ec0ff; background: rgba(40,120,255,.12);
  padding: .1rem .35rem; border-radius: 6px;
}
.pat-app .auth-back:hover { color: #72bbff; }

.pat-app .app-layout {
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(40,120,255,.12), transparent 50%),
    radial-gradient(800px 400px at 100% 0%, rgba(25,212,124,.08), transparent 50%),
    #050816;
}
.pat-app .app-side {
  background: linear-gradient(180deg, #071022, #050816);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pat-app .side-link.is-active {
  background: linear-gradient(135deg, rgba(40,120,255,.28), rgba(14,58,92,.4));
  border: 1px solid rgba(40,120,255,.35);
}
.side-lang { margin-top: auto; align-self: start; }
.pat-app .app-top .eyebrow { color: #72bbff; }
.pat-app .app-top h2 { color: #fff; font-family: Manrope, system-ui, sans-serif; }
.pat-app .panel,
.pat-app .panel-soft {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: none;
  color: #f8fafc;
}
.pat-app .field label { color: #94a3b8; }
.pat-app .field input,
.pat-app .field select,
.pat-app .field textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  border-radius: 12px;
}
.pat-app .muted { color: #94a3b8; }

.create-panel { padding: 0 !important; overflow: hidden; }
.create-layout {
  display: grid;
  grid-template-columns: 1fr;
}
.create-side {
  padding: 1.5rem 1.35rem;
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(232,185,35,.2), transparent 42%),
    linear-gradient(160deg, #0b1f3a 0%, #071426 100%);
}
.create-side .lp-eyebrow {
  color: #e8b923; text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; font-weight: 800; margin: 0 0 .55rem;
}
.create-side h3 {
  margin: 0 0 .55rem;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800; letter-spacing: -.02em; color: #fff;
}
.create-lead { margin: 0 0 1.25rem; color: #91a0b6; line-height: 1.6; font-size: .92rem; }
.create-steps {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem;
}
.create-steps li {
  display: grid; gap: .15rem;
  padding: .75rem .85rem;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.create-steps strong { color: #fff; font-size: .92rem; }
.create-steps span { color: rgba(255,255,255,.55); font-size: .8rem; }
.create-form-wrap { padding: 1.35rem 1.25rem 1.5rem; }
.create-grid {
  display: grid; grid-template-columns: 1fr; gap: 0 .85rem;
  margin-bottom: 1rem;
}
.create-span { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .create-layout { grid-template-columns: .9fr 1.2fr; }
}

/* —— Auth page intégrée au site (menu + footer) —— */
.pat-app-page .auth-page {
  padding: 7.5rem 0 3.5rem;
  background:
    radial-gradient(ellipse 70% 40% at 10% 0%, rgba(232,185,35,.12), transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 10%, rgba(11,31,58,.08), transparent 50%),
    #f4f6f8;
}
.auth-page-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
.auth-mosaic {
  position: relative;
  min-height: 460px;
  border-radius: 28px;
  overflow: hidden;
  background: #0b1f3a;
  box-shadow: 0 24px 50px rgba(11,31,51,.18);
}
.auth-mosaic-track { position: absolute; inset: 0; }
.auth-mosaic-set {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .8s ease, transform .8s ease;
  pointer-events: none;
}
.auth-mosaic-set.is-on {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.mosaic-cell {
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  min-height: 140px;
  transition: transform 6s ease;
}
.auth-mosaic-set.is-on .mosaic-cell { transform: scale(1.06); }
.auth-mosaic-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.7rem 1.45rem 1.35rem;
  background: linear-gradient(180deg, transparent, rgba(7,16,34,.94) 42%);
  color: #fff;
}
.auth-mosaic-copy .auth-kicker {
  color: #e8b923;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .55rem;
}
.auth-mosaic-copy h1 {
  margin: 0 0 .55rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.auth-mosaic-copy > p {
  margin: 0;
  color: rgba(255,255,255,.75);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 34rem;
}
.auth-mosaic-points {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.auth-mosaic-points li {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: .35rem .7rem;
}
.auth-mosaic-dots {
  display: flex;
  gap: .4rem;
  margin-top: 1rem;
}
.auth-mosaic-dots button {
  width: 9px; height: 9px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.35); padding: 0; cursor: pointer;
  transition: width .25s, background .25s;
}
.auth-mosaic-dots button.is-on {
  width: 24px;
  background: linear-gradient(90deg, #e8b923, #c99212);
}

.auth-card {
  background: #fff;
  border: 1px solid rgba(11,31,51,.1);
  border-radius: 28px;
  padding: 1.55rem 1.4rem 1.7rem;
  box-shadow: 0 20px 48px rgba(11,31,51,.07);
  align-self: center;
}
.auth-card-kicker {
  margin: 0 0 .4rem;
  color: #a88414;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.auth-card-head h2 {
  margin: 0 0 .35rem;
  font-size: 1.55rem;
  font-weight: 800;
  color: #0b1f33;
}
.auth-card-head p {
  margin: 0 0 1.1rem;
  color: #5b6b7c;
  font-size: .9rem;
}
.pat-app-page .auth-mode-tabs,
.pat-app-page .auth-method-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  margin-bottom: .9rem;
  background: #f1f4f7;
  border: 1px solid rgba(11,31,51,.08);
  border-radius: 999px;
  padding: .28rem;
}
.pat-app-page .auth-mode,
.pat-app-page .auth-method {
  border: 0;
  background: transparent;
  color: #5b6b7c;
  border-radius: 999px;
  padding: .7rem .8rem;
  font-weight: 700;
  cursor: pointer;
}
.pat-app-page .auth-mode.is-active,
.pat-app-page .auth-method.is-active {
  background: linear-gradient(135deg, #0b1f3a, #16324f);
  color: #fff;
}
.pat-app-page .auth-form .field label { color: #5b6b7c; }
.pat-app-page .auth-form .field input,
.pat-app-page .auth-form .field textarea {
  background: #fff;
  border: 1px solid rgba(11,31,51,.14);
  color: #0b1f33;
  border-radius: 12px;
}
.pat-app-page .phone-prefix {
  background: rgba(201,162,39,.12);
  border: 1px solid rgba(201,162,39,.3);
  color: #8a6d12;
  border-radius: 12px;
  padding: .85rem .9rem;
  font-weight: 800;
}
.pat-app-page .auth-hint { color: #5b6b7c; }
.pat-app-page .btn-primary {
  background: linear-gradient(135deg, #0b1f3a, #16324f) !important;
  color: #fff !important;
}

.pat-app-page .hub {
  width: 80%;
  margin: 0 auto 3rem;
  background: transparent;
  min-height: auto;
}
@media (max-width: 768px) {
  .pat-app-page .hub {
    width: 95%;
  }
}
.pat-app-page .hub-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: #0b1f3a;
  color: #fff;
}
.pat-app-page .hub-user-meta {
  display: flex;
  flex-direction: column;
}
.pat-app-page .hub-user-meta strong { color: #fff; }
.pat-app-page .hub-user-meta span { color: rgba(255,255,255,.6); font-size: .78rem; }
.pat-app-page .hub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .28rem;
}
.pat-app-page .hub-tab {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.7);
  border-radius: 999px;
  padding: .55rem .95rem;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
}
.pat-app-page .hub-tab.is-on {
  background: linear-gradient(135deg, #e8b923, #c99212);
  color: #0b1f33;
}
.pat-app-page .btn-logout {
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 700;
  cursor: pointer;
}
.pat-app-page .btn-logout:hover {
  border-color: rgba(232,185,35,.55);
  color: #e8b923;
}
.pat-app-page.is-hub .auth-page { padding-bottom: 1rem; }
.pat-app-page .create-panel .field label { color: #5b6b7c; }
.pat-app-page .create-panel .field input,
.pat-app-page .create-panel .field select,
.pat-app-page .create-panel .field textarea {
  background: #fff;
  border: 1px solid rgba(11,31,51,.14);
  color: #0b1f33;
  border-radius: 12px;
}

@media (min-width: 980px) {
  .auth-page-grid {
    grid-template-columns: 1.05fr .95fr;
    gap: 1.75rem;
    min-height: 620px;
  }
  .auth-mosaic { min-height: 100%; }
  .auth-card { padding: 2rem 1.8rem; }
}
.hub-panel {
  background: #fff;
  border: 1px solid rgba(11,31,51,.1);
  border-radius: 22px;
  padding: 1.35rem;
  box-shadow: 0 16px 40px rgba(11,31,51,.05);
}
.hub-head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 1rem; margin-bottom: 1.2rem;
}
.hub-head h2 { margin: 0; font-size: 1.6rem; font-weight: 800; }
.hub-head .lp-eyebrow {
  margin: 0 0 .35rem; color: #a88414; font-size: .72rem;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.hub-cards {
  display: grid; gap: .9rem;
  grid-template-columns: 1fr;
}
.hub-card {
  border: 1px solid rgba(11,31,51,.1);
  border-radius: 16px;
  padding: 1.1rem;
  background: #f8fafc;
}
.hub-card-top {
  display: flex; justify-content: space-between; gap: .75rem; align-items: start;
}
.hub-card p { margin: .45rem 0 0; color: #5b6b7c; font-size: .9rem; }
.hub-card-foot {
  margin-top: .9rem; display: flex; justify-content: space-between;
  align-items: center; gap: .75rem; flex-wrap: wrap;
}
.hub-card-foot code {
  background: rgba(11,31,58,.08); color: #0b1f3a;
  padding: .3rem .55rem; border-radius: 8px; font-weight: 700;
}
.hub-pill {
  font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px;
  background: rgba(201,162,39,.15); color: #8a6d12;
}
.hub-empty {
  text-align: center; padding: 2.2rem 1rem;
}
.hub-empty p { color: #5b6b7c; }
.hub-empty-actions {
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem;
}
.join-card { max-width: 520px; }
.detail-grid {
  display: grid; gap: .9rem; grid-template-columns: 1fr;
}
.detail-span { grid-column: 1 / -1; }
.member-list {
  list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem;
}
.member-list li {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .55rem .7rem; border-radius: 10px; background: #fff;
  border: 1px solid rgba(11,31,51,.08);
}
.member-list em { color: #5b6b7c; font-style: normal; font-size: .82rem; }

.pat-app .hub .field label { color: #5b6b7c; }
.pat-app .hub .field input,
.pat-app .hub .field select,
.pat-app .hub .field textarea {
  background: #fff;
  border: 1px solid rgba(11,31,51,.14);
  color: #0b1f33;
}

@media (min-width: 900px) {
  .pat-app .auth-visual { display: block; }
  .pat-app .auth-gate { grid-template-columns: 1.1fr .9fr; }
  .create-grid { grid-template-columns: 1fr 1fr; }
  .auth-zigzag { display: none; }
  .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hub-top-inner, .hub-main { width: min(92%, 100% - 1.2rem); }
  .hub-tabs { order: 3; width: 100%; justify-content: center; }
}