/*
 * pages/legacy-overlay.css — Plan 119-Y-F-suite.
 *
 * Override léger sur les pages legacy (/pricing, /method, /recover*, /login)
 * pour qu'elles adoptent le thème v119 (ivoire/encre/or/aurora) sans avoir
 * à refactoriser leur structure HTML inline.
 *
 * Charge en COMPLÉMENT de /public/style.css legacy + après vitrine/index.css.
 *
 * Stratégie : on cible body + cards/forms communs et on remplace les
 * couleurs blanches/grises par les tokens v119. Les styles inline locaux
 * gardent priorité (specificity).
 */

body, html {
  background: var(--v119-bg-primary, #0a1428) !important;
  color: var(--v119-ink, #f5e9d4) !important;
  font-family: var(--v119-font-body, 'GT America', 'Inter', system-ui, sans-serif) !important;
}

/* H1/H2/H3 → serif éditoriale */
body h1, body h2, body h3 {
  font-family: var(--v119-font-display, 'PP Editorial New', 'Cormorant Garamond', Georgia, serif) !important;
  font-weight: 400 !important;
  color: var(--v119-ink, #f5e9d4) !important;
  letter-spacing: 0.005em !important;
}

/* Liens */
body a {
  color: var(--v119-gold-thread, #c8a868);
}
body a:hover {
  color: var(--v119-gold-thread, #c8a868);
  border-bottom-color: var(--v119-gold-thread, #c8a868);
}

/* Cards / inputs blancs → ivoire fond */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="tel"],
body input[type="number"],
body input[type="search"],
body textarea,
body select {
  background: rgba(10, 20, 40, 0.40) !important;
  border: 1px solid rgba(200, 168, 104, 0.20) !important;
  border-radius: 2px !important;
  color: var(--v119-ink, #f5e9d4) !important;
  font-family: inherit !important;
}
body input:focus,
body textarea:focus,
body select:focus {
  outline: none !important;
  border-color: var(--v119-gold-thread, #c8a868) !important;
  box-shadow: 0 0 0 2px rgba(200, 168, 104, 0.10) !important;
}

/* Buttons primaires */
body .btn-primary,
body button[type="submit"]:not(.admin-btn):not(.v119-contact-form__submit):not(.ob__cta) {
  background: var(--v119-cta, #8b3a2e) !important;
  color: var(--v119-ink, #f5e9d4) !important;
  border: 1px solid var(--v119-cta, #8b3a2e) !important;
  border-radius: 2px !important;
  font-family: var(--v119-font-body) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Cards / boxes blancs */
body .auth-card,
body .auth-ok,
body .pricing-card,
body .method-card {
  background: linear-gradient(180deg, rgba(19, 30, 58, 0.96), rgba(26, 22, 18, 0.98)) !important;
  border: 1px solid rgba(200, 168, 104, 0.18) !important;
  border-radius: 4px !important;
  color: var(--v119-ink, #f5e9d4) !important;
  position: relative;
}
body .auth-card::before,
body .auth-ok::before,
body .pricing-card::before,
body .method-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--v119-gold-thread, #c8a868) 30%, var(--v119-gold-thread, #c8a868) 70%, transparent);
}

/* Texte secondaire/captions */
body p, body small, body label {
  color: var(--v119-ink-muted, #c8b89a);
}

/* Paragraphes en hero gardent l'ink */
body main > h1 + p,
body main > .auth-card p {
  color: var(--v119-ink-muted, #c8b89a);
}

/* Errors */
body .error,
body .auth-error {
  color: var(--v119-cta, #8b3a2e) !important;
  background: rgba(139, 58, 46, 0.10) !important;
  border: 1px solid rgba(139, 58, 46, 0.25) !important;
}

/* Success */
body .success,
body .auth-ok {
  color: var(--v119-aurora-cyan, #3a8eaa) !important;
}

/* Codeboxes mono */
body code, body pre {
  background: rgba(10, 20, 40, 0.50) !important;
  color: var(--v119-gold-thread, #c8a868) !important;
  border-radius: 2px !important;
  border: 1px solid rgba(200, 168, 104, 0.10);
  font-family: var(--v119-font-mono, monospace) !important;
}

/* Blockquote */
body blockquote {
  border-left: 2px solid var(--v119-gold-thread, #c8a868) !important;
  background: rgba(19, 30, 58, 0.45) !important;
  color: var(--v119-ink-muted, #c8b89a) !important;
}

/* ────────────────────────────────────────────────────────────────────
   Plan 119-SP-Q (E5) — Sidebar avec aspect carboné tech v119
   Background gradient sanctuary + texture carbone subtile + thread doré
   ──────────────────────────────────────────────────────────────────── */
/* Plan 119-SP-Q (J4) : VRAIE texture fibre de carbone (carbon weave 3D).
   Pattern : tiles de 8×8px avec deux gradients diagonaux conjugués qui
   simulent les mèches tissées en chevron. Reflets subtils gold-thread sur
   les arêtes pour cohérence v119. Lighting top-left (cohérent avec UI).
   Référence : technique CSS de Lea Verou + adaptation v119. */
body .sidebar {
  background-color: #0e1626 !important;
  background-image:
    /* Mèche horizontale gauche-haut → droite-bas (lighting top) */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.045) 0px, rgba(255, 255, 255, 0.045) 1px,
      transparent 1px, transparent 4px,
      rgba(0, 0, 0, 0.40) 4px, rgba(0, 0, 0, 0.40) 5px,
      transparent 5px, transparent 8px),
    /* Mèche perpendiculaire (chevron complet) */
    linear-gradient(45deg,
      rgba(255, 255, 255, 0.045) 0px, rgba(255, 255, 255, 0.045) 1px,
      transparent 1px, transparent 4px,
      rgba(0, 0, 0, 0.40) 4px, rgba(0, 0, 0, 0.40) 5px,
      transparent 5px, transparent 8px),
    /* Trame sombre de base (fibres entre les mèches) */
    linear-gradient(180deg,
      rgba(19, 30, 58, 0.92) 0%,
      rgba(10, 20, 40, 0.98) 100%) !important;
  background-size: 8px 8px, 8px 8px, 100% 100% !important;
  background-position: 0 0, 4px 4px, 0 0 !important;
  border-right: 1px solid rgba(200, 168, 104, 0.18) !important;
  position: relative;
}
/* Surcouche subtile or-thread sur les diagonales (reflets discrets) */
body .sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0, transparent 32px,
      rgba(200, 168, 104, 0.018) 32px, rgba(200, 168, 104, 0.018) 33px);
  z-index: 0;
}
body .sidebar > * { position: relative; z-index: 1; }

/* ────────────────────────────────────────────────────────────────────
   Plan 119-SP-Q (J3) — Scrollbars stylées thème v119
   Webkit (Chrome/Edge/Safari) + Firefox
   ──────────────────────────────────────────────────────────────────── */
body { scrollbar-width: thin; scrollbar-color: rgba(200, 168, 104, 0.40) rgba(10, 20, 40, 0.55); }

body ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body ::-webkit-scrollbar-track {
  background: rgba(10, 20, 40, 0.55);
  border-left: 1px solid rgba(200, 168, 104, 0.08);
}
body ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(200, 168, 104, 0.45) 0%,
    rgba(154, 125, 74, 0.55) 50%,
    rgba(200, 168, 104, 0.45) 100%);
  border-radius: 5px;
  border: 2px solid rgba(10, 20, 40, 0.55);
}
body ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(200, 168, 104, 0.75) 0%,
    rgba(200, 168, 104, 0.85) 50%,
    rgba(200, 168, 104, 0.75) 100%);
}
body ::-webkit-scrollbar-corner { background: rgba(10, 20, 40, 0.55); }

/* Filet doré vertical sur le bord droit (signature v119) */
body .sidebar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(200, 168, 104, 0.32) 18%,
    rgba(200, 168, 104, 0.55) 50%,
    rgba(200, 168, 104, 0.32) 82%,
    transparent 100%);
  pointer-events: none;
}

body .sidebar header strong {
  color: var(--v119-gold-thread, #c8a868) !important;
  font-family: var(--v119-font-display, 'Cormorant Garamond', serif) !important;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
}

body .sidebar header small {
  color: rgba(245, 233, 212, 0.50) !important;
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

body .sidebar nav a {
  color: rgba(245, 233, 212, 0.78) !important;
  font-family: var(--v119-font-body, 'Inter', sans-serif) !important;
  transition: background 0.18s, color 0.18s, border-color 0.18s !important;
}
body .sidebar nav a:hover {
  background: rgba(200, 168, 104, 0.06) !important;
  color: var(--v119-ink, #f5e9d4) !important;
}
body .sidebar nav a.active,
body .sidebar nav a.is-active {
  background: rgba(200, 168, 104, 0.10) !important;
  color: var(--v119-gold-thread, #c8a868) !important;
  border-left: 2px solid var(--v119-gold-thread, #c8a868) !important;
}

body .sidebar__divider {
  border-color: rgba(200, 168, 104, 0.12) !important;
  color: rgba(200, 168, 104, 0.55) !important;
  font-family: var(--v119-font-mono, monospace) !important;
  letter-spacing: 0.10em;
}

body .sidebar footer a {
  color: rgba(245, 233, 212, 0.50) !important;
  font-family: var(--v119-font-mono, monospace) !important;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
body .sidebar footer a:hover {
  color: var(--v119-gold-thread, #c8a868) !important;
}

/* ────────────────────────────────────────────────────────────────────
   Checkboxes custom v119 (compose form + ailleurs)
   ──────────────────────────────────────────────────────────────────── */
body input[type="checkbox"]:not([disabled]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px; height: 18px;
  background: rgba(10, 20, 40, 0.55);
  border: 1px solid rgba(200, 168, 104, 0.40);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: all 0.15s;
  flex-shrink: 0;
}
body input[type="checkbox"]:not([disabled]):hover {
  border-color: var(--v119-gold-thread, #c8a868);
  background: rgba(200, 168, 104, 0.08);
}
body input[type="checkbox"]:not([disabled]):checked {
  background: var(--v119-gold-thread, #c8a868);
  border-color: var(--v119-gold-thread, #c8a868);
}
body input[type="checkbox"]:not([disabled]):checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #0a1428;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ────────────────────────────────────────────────────────────────────
   Compose form CM : labels plateformes non tronqués
   ──────────────────────────────────────────────────────────────────── */
body .cc-compose__platforms {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 8px !important;
}
body .cc-compose__platform {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: rgba(10, 20, 40, 0.45) !important;
  border: 1px solid rgba(184, 196, 220, 0.12) !important;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12.5px !important;
  overflow: visible !important;
  transition: all 0.15s;
}
body .cc-compose__platform:hover {
  background: rgba(200, 168, 104, 0.06) !important;
  border-color: rgba(200, 168, 104, 0.30) !important;
}
body .cc-compose__platform.is-on {
  background: rgba(200, 168, 104, 0.12) !important;
  border-color: rgba(200, 168, 104, 0.55) !important;
}
body .cc-compose__platform-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--v119-ink, #f5e9d4) !important;
}
body .cc-compose__platform.is-on .cc-compose__platform-label {
  color: var(--v119-gold-thread, #c8a868) !important;
}

/* Plan 119-SP-Q (G3) : plateformes loading / disabled / non configurées */
body .cc-compose__platform.is-loading {
  opacity: 0.55 !important;
  cursor: wait !important;
}
body .cc-compose__platform.is-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: rgba(10, 20, 40, 0.30) !important;
}
body .cc-compose__platform.is-not-configured {
  background: rgba(217, 119, 87, 0.06) !important;
  border-color: rgba(217, 119, 87, 0.22) !important;
  cursor: pointer !important;
  position: relative;
}
body .cc-compose__platform.is-not-configured:hover {
  background: rgba(217, 119, 87, 0.12) !important;
  border-color: rgba(217, 119, 87, 0.45) !important;
}
body .cc-compose__platform.is-not-configured .cc-compose__platform-label {
  color: rgba(245, 233, 212, 0.55) !important;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(217, 119, 87, 0.40);
}
body .cc-compose__platform.is-not-configured input[type="checkbox"] {
  opacity: 0.30;
  pointer-events: none;
}