/* ============================================================
   PPC ADULTE — Global CSS
   Police  : Syne (display) + DM Sans (body)
   Thème   : Or chaud · Nuit profonde · Luxe discret
   ============================================================ */

:root {
  --noir:       #07070A;
  --nuit:       #0C0C12;
  --fond:       #10101A;
  --surface:    #16162A;
  --surface2:   #1E1E36;
  --surface3:   #262642;
  --bordure:    rgba(255,255,255,0.07);
  --bordure2:   rgba(255,255,255,0.13);

  --texte:      #EEEEF8;
  --texte-dim:  #8888B0;
  --texte-mute: #444468;
  --blanc:      #FFFFFF;

  /* Or */
  --or:         #C9965A;
  --or-light:   #E8B87A;
  --or-dark:    #A87840;
  --or-glow:    rgba(201,150,90,0.28);

  /* Rose accent */
  --rose:       #E8527A;
  --rose-light: #F07898;
  --rose-glow:  rgba(232,82,122,0.2);

  /* Violet */
  --lavande:    #9B7FD4;

  /* États */
  --vert:       #34D399;
  --rouge:      #F87171;
  --or-star:    #FBBF24;

  /* Gradients */
  --grad-or:    linear-gradient(135deg, #C9965A 0%, #E8B87A 50%, #C9965A 100%);
  --grad-rose:  linear-gradient(135deg, #E8527A 0%, #F07898 100%);
  --grad-hero:  linear-gradient(135deg, #C9965A 0%, #E8527A 60%, #9B7FD4 100%);
  --grad-text:  linear-gradient(135deg, #E8B87A 0%, #C9965A 100%);
  --grad-premium: linear-gradient(135deg, #C9965A, #FBBF24, #C9965A);

  /* Typo */
  --font-display: 'Syne', 'Impact', sans-serif;
  --font-body:    'DM Sans', 'Segoe UI', system-ui, sans-serif;

  /* Espacements */
  --radius-xs: 7px;
  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 26px;
  --radius-xl: 40px;

  /* Shadows */
  --shadow-or:  0 8px 32px rgba(201,150,90,0.35);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--noir); color: var(--texte);
  line-height: 1.6; overflow-x: hidden;
}

::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--noir); }
::-webkit-scrollbar-thumb { background: var(--or); border-radius: 2px; }

/* ── GRAIN ────────────────────────────────────────────────── */
.grain-overlay {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.35;
}

/* ── TYPO ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.01em; }
p  { line-height: 1.75; }
a  { color: var(--or-light); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--or); }

/* ── CONTENEURS ───────────────────────────────────────────── */
.container    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.container--md{ max-width: 860px;  margin: 0 auto; padding: 0 28px; }
.container--sm{ max-width: 640px;  margin: 0 auto; padding: 0 28px; }

/* ── BOUTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 26px; border-radius: var(--radius-xl);
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  text-decoration: none; cursor: pointer; border: none; letter-spacing: 0.01em;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; overflow: hidden;
}
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .3s; }
.btn:hover::after { background:rgba(255,255,255,0.07); }

.btn--primary {
  background: var(--grad-or); background-size: 200% auto;
  color: var(--noir);
  box-shadow: var(--shadow-or);
  animation: shimmerBtn 4s linear infinite;
}
@keyframes shimmerBtn { 0%{background-position:0%} 100%{background-position:200%} }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(201,150,90,.5); color:var(--noir); }

.btn--ghost {
  background: rgba(255,255,255,0.07); color: var(--texte);
  border: 1px solid var(--bordure2); backdrop-filter: blur(8px);
}
.btn--ghost:hover { background:rgba(255,255,255,.12); border-color:rgba(201,150,90,.35); color:var(--or-light); }

.btn--rose {
  background: var(--grad-rose); color:#fff;
  box-shadow: var(--shadow-or);
}
.btn--rose:hover { transform:translateY(-2px); color:#fff; }

.btn--premium {
  background: var(--grad-premium); background-size:200% auto;
  color: var(--noir); font-weight: 700;
  box-shadow: 0 0 30px rgba(201,150,90,.4);
  animation: shimmerBtn 3s linear infinite;
}
.btn--premium:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(201,150,90,.6); color:var(--noir); }

.btn--outline { background:transparent; color:var(--or-light); border:1.5px solid rgba(201,150,90,.4); }
.btn--outline:hover { background:rgba(201,150,90,.08); border-color:var(--or); }
.btn--danger  { background:rgba(248,113,113,.15); color:#FCA5A5; border:1px solid rgba(248,113,113,.3); }

.btn--lg  { padding:16px 34px; font-size:1rem; }
.btn--sm  { padding:9px 18px;  font-size:.82rem; }
.btn--xs  { padding:6px 13px;  font-size:.75rem; }
.btn--full{ width:100%; }

/* ── TAG ──────────────────────────────────────────────────── */
.tag {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 13px; border-radius:50px;
  font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  border:1px solid rgba(201,150,90,.3); color:var(--or-light); background:rgba(201,150,90,.07);
}
.tag::before { content:'◆'; font-size:.45rem; }

/* ── CHIP ─────────────────────────────────────────────────── */
.chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 12px; border-radius:50px; font-size:.78rem; font-weight:600;
  background:var(--surface2); border:1px solid var(--bordure);
  color:var(--texte-dim); white-space:nowrap; transition:all .2s;
}
.chip:hover, .chip--active { background:rgba(201,150,90,.12); border-color:rgba(201,150,90,.35); color:var(--or-light); }

/* ── GRADIENT TEXT ────────────────────────────────────────── */
.gradient-text {
  background:var(--grad-text); background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; animation:shimmerBtn 4s linear infinite;
}

/* ── PREMIUM BADGE ────────────────────────────────────────── */
.premium-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:50px;
  background:rgba(201,150,90,.15); border:1px solid rgba(201,150,90,.3);
  color:var(--or-light); font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}

/* ── ALERT ────────────────────────────────────────────────── */
.alert { padding:13px 16px; border-radius:var(--radius-sm); font-size:.875rem; margin-bottom:18px; display:flex; align-items:flex-start; gap:10px; }
.alert--success{ background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.25); color:#6EE7B7; }
.alert--error  { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.25); color:#FCA5A5; }
.alert--info   { background:rgba(201,150,90,.08); border:1px solid rgba(201,150,90,.2);  color:var(--or-light); }
.alert--premium{ background:rgba(201,150,90,.1); border:1px solid rgba(201,150,90,.3);  color:var(--or-light); }
.alert__icon   { font-size:1rem; flex-shrink:0; }

/* ── CARD ─────────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--bordure); border-radius:var(--radius); padding:24px; }
.card--hover { transition:border-color .3s, transform .3s; }
.card--hover:hover { border-color:rgba(201,150,90,.25); transform:translateY(-3px); }

/* ── AVATAR ───────────────────────────────────────────────── */
.avatar { border-radius:50%; object-fit:cover; background:var(--surface2); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar--xs  { width:28px;  height:28px;  font-size:.9rem; }
.avatar--sm  { width:38px;  height:38px;  font-size:1.1rem; }
.avatar--md  { width:52px;  height:52px;  font-size:1.4rem; }
.avatar--lg  { width:80px;  height:80px;  font-size:2rem; }
.avatar--xl  { width:120px; height:120px; font-size:3rem; }
.avatar--border  { border:3px solid rgba(201,150,90,.4); }
.avatar--premium { border:3px solid var(--or); }

/* ── REVEAL ───────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; } .reveal-d2 { transition-delay:.2s; } .reveal-d3 { transition-delay:.3s; }

/* ── FORMULAIRES ──────────────────────────────────────────── */
.form-group   { margin-bottom:20px; }
.form-label   { display:flex; align-items:center; justify-content:space-between; font-size:.85rem; font-weight:600; margin-bottom:7px; color:var(--texte); }
.form-label .req  { color:var(--rose); margin-left:3px; }
.form-label .hint { font-weight:400; color:var(--texte-mute); font-size:.78rem; }
.form-label a     { font-size:.8rem; color:var(--or-light); }

.form-input, .form-select, .form-textarea {
  width:100%; padding:12px 15px;
  background:var(--surface); border:1.5px solid var(--bordure2);
  border-radius:var(--radius-sm); color:var(--texte);
  font-family:var(--font-body); font-size:.9rem;
  transition:border-color .2s, box-shadow .2s; outline:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:rgba(201,150,90,.55);
  box-shadow:0 0 0 3px rgba(201,150,90,.12);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--texte-mute); }
.form-textarea { resize:vertical; min-height:110px; line-height:1.6; }
.form-select option { background:var(--surface2); }
.form-hint  { font-size:.76rem; color:var(--texte-mute); margin-top:5px; }
.form-error { font-size:.76rem; color:#FCA5A5; display:block; margin-top:4px; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.char-count { display:block; text-align:right; font-size:.72rem; color:var(--texte-mute); margin-top:4px; }

.pw-wrap { position:relative; }
.pw-wrap .form-input { padding-right:46px; }
.pw-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1rem; padding:4px; color:var(--texte-mute); }
.pw-strength { height:4px; background:var(--surface3); border-radius:2px; margin-top:6px; overflow:hidden; }
.pw-strength__bar { height:100%; width:0; border-radius:2px; transition:width .3s, background .3s; }

.radio-group, .check-group { display:flex; flex-wrap:wrap; gap:8px; }
.radio-pill, .check-pill { position:relative; }
.radio-pill input, .check-pill input { position:absolute; opacity:0; pointer-events:none; }
.radio-pill label, .check-pill label {
  display:flex; align-items:center; gap:6px; padding:8px 16px;
  border-radius:50px; cursor:pointer; font-size:.85rem; font-weight:600;
  border:1.5px solid var(--bordure2); background:var(--surface);
  transition:all .2s; user-select:none;
}
.radio-pill input:checked + label, .check-pill input:checked + label {
  background:rgba(201,150,90,.12); border-color:rgba(201,150,90,.5); color:var(--or-light);
}
.form-check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.85rem; color:var(--texte-dim); line-height:1.5; }
.form-check input { width:17px; height:17px; margin-top:1px; accent-color:var(--or); flex-shrink:0; }
.form-check a { color:var(--or-light); }

/* ── APP LAYOUT ───────────────────────────────────────────── */
.app-page { display:flex; min-height:100vh; }
.app-main { margin-left:260px; flex:1; padding:28px; min-height:100vh; display:flex; flex-direction:column; max-width:calc(100vw - 260px); }
.app-main > .footer-app { margin-top:auto; }

/* ── SECTION HEADER ───────────────────────────────────────── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.section-header h2 { font-size:1.15rem; }
.section-header a  { font-size:.82rem; color:var(--or-light); font-weight:600; }

/* ── EMPTY STATE ──────────────────────────────────────────── */
.empty-state { text-align:center; padding:48px 24px; color:var(--texte-dim); }
.empty-state__icon { font-size:3rem; margin-bottom:14px; display:block; }
.empty-state h3    { font-size:1.1rem; color:var(--texte); margin-bottom:8px; }
.empty-state p     { font-size:.9rem; margin-bottom:20px; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:900px) {
  .app-main { margin-left:0; max-width:100%; padding-top:72px; }
}
@media (max-width:640px) {
  .container, .container--md, .container--sm { padding:0 16px; }
  .form-row, .form-row-3 { grid-template-columns:1fr; }
}

/* ── MODÉRATION MESSAGES ─────────────────────────────────── */
.message--bloque { opacity: .6; }
.message__bubble--bloque {
  background: rgba(248,113,113,.15) !important;
  border: 1px dashed rgba(248,113,113,.4) !important;
  color: var(--texte-dim) !important;
  text-decoration: line-through;
}
.msg-systeme {
  margin-top: 6px; padding: 8px 12px; border-radius: 8px;
  font-size: .78rem; line-height: 1.5; max-width: 300px;
}
.msg-systeme--warn  { background:rgba(251,191,36,.1);  border:1px solid rgba(251,191,36,.3);  color:#FDE68A; }
.msg-systeme--block { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); color:#FCA5A5; }
.msg-systeme-standalone { display:flex; justify-content:center; margin:10px 16px; }
.msg-systeme-standalone span {
  padding:10px 16px; border-radius:12px; font-size:.8rem;
  line-height:1.6; text-align:center; max-width:380px;
}
.msg-systeme-standalone--warn span  { background:rgba(251,191,36,.1);  border:1px solid rgba(251,191,36,.25);  color:#FDE68A; }
.msg-systeme-standalone--block span { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.25); color:#FCA5A5; }