/* Radar Pro — espace client. S'appuie sur cine.css (couleurs, polices, grille de 8 px, boutons). */
.pro { min-height: 100vh; min-height: 100svh; padding: 112px var(--edge) var(--s12); }
.pro-narrow { width: min(440px, 100%); margin: 0 auto; }
.pro-wide { width: min(880px, 100%); margin: 0 auto; }
.pro h1 { margin: 0 0 var(--s2); font: 400 40px/48px var(--display); letter-spacing: -.02em; }
.pro h2 { margin: 0; font: 400 24px/32px var(--display); letter-spacing: -.01em; }
.pro p { margin: 0 0 var(--s2); color: var(--m); }
.pro .lead { font: 400 17px/28px var(--text); }
.pro label { display: block; margin-bottom: var(--s1); font: 400 13px/16px var(--text); color: var(--m); }
.pro input[type=email], .pro input[type=text] {
  width: 100%; height: 56px; padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--line2);
  background: var(--surface); color: var(--t); font: 400 16px/24px var(--text); outline: none;
  transition: border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.pro input:focus { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }
.pro form { display: grid; gap: var(--s2); }
.pro .btn { height: 48px; justify-self: start; }
.pro .trap { position: absolute; left: -9999px; }
.msg { min-height: 24px; font: 400 14px/24px var(--text); color: var(--t); }
.msg.bad { color: #ffb4a8; }
:root[data-fond="porcelaine"] .msg.bad { color: #a4372a; }
.fine { font: 400 13px/20px var(--text); color: var(--f); }
.fine a { color: var(--m); }

/* En-tête de l'espace : titre à gauche, déconnexion à droite */
.pro-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.pro-head h1 { margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--m); font: 400 14px/24px var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* Cartes de site */
.sites { display: grid; gap: var(--s2); margin: 0 0 var(--s6); padding: 0; list-style: none; }
.site { border: 1px solid var(--line); background: var(--panel); border-radius: 24px; padding: var(--s3); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
/* Les longs codes à copier défilent dans leur cadre au lieu d'élargir la page */
.site > *, .proof, .proof ol, .proof li { min-width: 0; }
.site-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.site-top h2 { font-family: var(--mono); font-size: 20px; line-height: 32px; overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; gap: var(--s1); height: 32px; padding: 0 var(--s2); border-radius: 999px; font: 400 13px/16px var(--text); border: 1px solid var(--line2); color: var(--m); white-space: nowrap; }
.badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--f); }
.badge.ok { color: var(--t); }
.badge.ok i { background: var(--accent); }
.badge.live i { background: #8fe3a8; box-shadow: 0 0 0 4px rgba(143, 227, 168, .15); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0; font: 400 14px/24px var(--text); color: var(--m); }
.facts dt { color: var(--f); }
.facts div { display: flex; gap: var(--s1); }
.facts dd { margin: 0; font-family: var(--mono); font-size: 13px; }

/* Preuve de propriété */
.proof { display: grid; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s2); }
.proof h3 { margin: 0; font: 500 15px/24px var(--text); }
.proof ol { margin: 0; padding-left: var(--s3); display: grid; gap: var(--s2); color: var(--m); }
.proof li strong { color: var(--t); font-weight: 500; }
.copyrow { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s1); max-width: 100%; }
.copyrow code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 12px var(--s2); border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font: 400 13px/16px var(--mono); color: var(--t); }
.copyrow .btn { height: 40px; flex: none; }
.or { font: 400 13px/16px var(--text); color: var(--f); text-transform: uppercase; letter-spacing: .08em; }
.details { margin: 0; padding-left: var(--s3); font: 400 14px/24px var(--text); color: var(--m); }

/* Clé montrée une seule fois */
.keybox { border: 1px solid rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .06); border-radius: 16px; padding: var(--s2); display: grid; gap: var(--s1); }
.keybox strong { font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }

.add { border-top: 1px solid var(--line); padding-top: var(--s4); }
.add form { grid-template-columns: 1fr auto; align-items: end; }
.add form .msg { grid-column: 1 / -1; }
.empty { border: 1px dashed var(--line2); border-radius: 24px; padding: var(--s4); text-align: center; color: var(--m); }

@media (max-width: 640px) {
  :root { --edge: var(--s2); }
  .pro { padding-top: 96px; }
  .pro h1 { font-size: 32px; line-height: 40px; }
  .add form { grid-template-columns: 1fr; }
  .site { padding: var(--s2); border-radius: 16px; }
  .proof ol { padding-left: var(--s2); }
  .copyrow { flex-wrap: wrap; }
  .copyrow code { flex-basis: 100%; }
}