/* OnePlace landing — shell partagé (topbar, dropdown, waitlist, pagination, footer).
   Thème DESIGN.md : technical-brutalist — angles vifs, bordures 1px, L-brackets,
   Inter + JetBrains Mono, spectre gris/noir/blanc uniquement. */

.op-mono { font-family: 'JetBrains Mono', monospace; }

/* Fond ambiant blueprint (comme vision.html) */
.op-diagonal {
  background-image: repeating-linear-gradient(45deg, #e5e7eb 0, #e5e7eb 1px, transparent 1px, transparent 12px);
  background-attachment: fixed;
}

/* L-brackets (signature du design system) — mêmes règles sous les deux noms :
   op-bracket-* (shell) et bracket-* (markup des pages). */
.op-bracket-tl, .op-bracket-tr, .op-bracket-bl, .op-bracket-br,
.bracket-tl, .bracket-tr, .bracket-bl, .bracket-br {
  position: absolute; width: 8px; height: 8px; border-color: #9ca3af;
  pointer-events: none; transition: all .3s ease; border-style: solid; border-width: 0;
  z-index: 10;
}
.op-bracket-tl, .bracket-tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.op-bracket-tr, .bracket-tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.op-bracket-bl, .bracket-bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.op-bracket-br, .bracket-br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.group:hover .op-bracket-tl, .group:hover .bracket-tl { top: -2px; left: -2px; width: 12px; height: 12px; border-color: #111827; }
.group:hover .op-bracket-tr, .group:hover .bracket-tr { top: -2px; right: -2px; width: 12px; height: 12px; border-color: #111827; }
.group:hover .op-bracket-bl, .group:hover .bracket-bl { bottom: -2px; left: -2px; width: 12px; height: 12px; border-color: #111827; }
.group:hover .op-bracket-br, .group:hover .bracket-br { bottom: -2px; right: -2px; width: 12px; height: 12px; border-color: #111827; }

/* Carte standard : blanc, bordure 1px, brackets — angles vifs partout */
.op-card { position: relative; background: #fff; border: 1px solid #e5e7eb; }
.op-tag {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: .7rem;
  color: #4b5563; background: #f9fafb; border: 1px solid #e5e7eb; padding: .35rem .6rem;
}

/* Dropdown Product — dans le thème : blanc, bordure 1px, zéro radius, mono */
.op-dropdown { position: relative; }
.op-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 17px; /* pont hover jusqu'au menu */
  display: none; z-index: 60;
}
.op-dropdown:hover .op-dropdown-menu, .op-dropdown:focus-within .op-dropdown-menu { display: block; }
.op-dropdown-panel {
  background: #fff; border: 1px solid #e5e7eb; min-width: 13rem;
  box-shadow: 0 0 40px rgba(0,0,0,.05); position: relative;
}
.op-dropdown-panel a {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .65rem 1rem; font-family: 'JetBrains Mono', monospace;
  font-size: .75rem; text-transform: uppercase; letter-spacing: -.025em;
  color: #6b7280; border-bottom: 1px solid #f3f4f6; transition: all .2s ease;
}
.op-dropdown-panel a:last-child { border-bottom: 0; }
.op-dropdown-panel a:hover { color: #111827; background: #f9fafb; }
.op-dropdown-panel a .op-sub { font-size: .65rem; color: #9ca3af; text-transform: none; }
.op-caret { display: inline-block; transition: transform .2s ease; font-size: .6rem; }
.op-dropdown:hover .op-caret { transform: rotate(180deg); }

/* Formulaire waitlist — sharp, mono, sur fond sombre */
.op-label {
  display: block; margin-bottom: .4rem;
  font-family: 'JetBrains Mono', monospace; font-size: .65rem;
  text-transform: uppercase; letter-spacing: -.025em; color: #9ca3af;
}
.op-input {
  background: #fff; border: 1px solid #d1d5db; border-radius: 0;
  padding: .75rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: .8rem;
  color: #111827; outline: none; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.op-input:focus { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
select.op-input {
  /* Chevron dessiné en CSS : aucune image externe, thème respecté. */
  background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%),
                    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
select.op-input:invalid { color: #9ca3af; }
.op-btn {
  background: #111827; color: #fff; border: 1px solid #111827; border-radius: 0;
  padding: .75rem 1.5rem; font-family: 'JetBrains Mono', monospace; font-size: .75rem;
  text-transform: uppercase; letter-spacing: -.025em; cursor: pointer; transition: all .2s ease;
  white-space: nowrap;
}
.op-btn:hover { background: #fff; color: #111827; }
.op-btn:disabled { opacity: .5; cursor: wait; }

/* Pagination bas de page */
.op-page-nav a { transition: all .2s ease; }
.op-page-nav a:hover { border-color: #111827; color: #111827; }