/* Oqora · Vue agence — même charte que les outils des clientes : platine (surfaces, texte), bleu vif (accents),
   navy (blocs sombres). Polices du système. Une seule page, lisible sur téléphone. */
:root{
  --ink:#22262b; --ink-soft:#50575e; --ink-faint:#6a7178;
  --rule:#dde1e5; --rule-soft:#eceef1; --page-bg:#f1f3f5; --surface:#ffffff; --bande:#f7f8f9;
  --bleu:#2f6fe0; --bleu-dark:#2359c2; --bleu-tint:#eaf1fd; --bleu-ring:rgba(47,111,224,.32);
  --navy-1:#17325e; --navy-2:#12203b; --navy-3:#0b1733; --navy-lede:#c9d6ee;
  --vert:#15875a; --vert-tint:#e2f5ec; --rouge:#d8372c; --rouge-tint:#fdeceb; --ambre:#b46200; --ambre-tint:#fdf1de;
  --radius:16px; --radius-sm:10px;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page-bg); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased; padding-inline:16px; padding-block:calc(16px + env(safe-area-inset-top,0px)) calc(48px + env(safe-area-inset-bottom,0px))}
.app{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:24px}
button,input,select{font:inherit; color:inherit}
a{color:var(--bleu)}
:focus-visible{outline:3px solid var(--bleu-ring); outline-offset:2px}
[hidden]{display:none !important}

.logo{font-weight:900; letter-spacing:.18em; font-size:13px; color:var(--navy-2)}
.entete h1{margin:2px 0 0; font-size:24px; font-weight:800; letter-spacing:-.01em}
.entete-ligne{display:flex; align-items:center; justify-content:space-between; gap:12px}
.sous{color:var(--ink-faint); font-size:13.5px; margin:6px 0 0}
.btn{border:0; border-radius:999px; padding:10px 16px; font-weight:650; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; gap:6px}
.btn-bleu{background:var(--bleu); color:#fff}
.btn-bleu:hover{background:var(--bleu-dark)}
.btn-clair{background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule)}
.btn-clair:hover{box-shadow:inset 0 0 0 1px var(--ink-faint)}
.btn-rouge{background:var(--rouge-tint); color:var(--rouge)}
.btn[disabled]{opacity:.55; cursor:default}
.btn-petit{padding:6px 11px; font-size:13px}
.lien{border:0; background:none; color:var(--bleu); font-weight:650; cursor:pointer; padding:0}
.bandeau{background:var(--ambre-tint); color:var(--ambre); border-radius:var(--radius-sm); padding:10px 14px; font-size:13.5px; margin:0}
.pied{text-align:center; margin-top:12px}

/* Porte (code) */
.porte{min-height:70vh; display:flex; align-items:center; justify-content:center}
.porte-carte{background:var(--surface); border-radius:var(--radius); padding:28px 24px; width:min(100%,380px); display:flex; flex-direction:column; gap:10px; text-align:center}
.porte-carte h1{margin:4px 0 0; font-size:22px}
.porte-carte label{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:10px; text-align:left}
.porte-carte input{border:0; background:var(--bande); border-radius:var(--radius-sm); padding:14px; font-size:22px; letter-spacing:.3em; text-align:center; box-shadow:inset 0 0 0 1px var(--rule)}
.erreur{color:var(--rouge); font-size:13.5px; margin:0}

/* Onglets */
.onglets{display:flex; gap:4px; background:var(--surface); border-radius:999px; padding:4px; box-shadow:inset 0 0 0 1px var(--rule); max-width:360px; margin-bottom:4px}
.onglets button{flex:1; border:0; background:transparent; border-radius:999px; padding:9px 8px; font-weight:650; color:var(--ink-soft); cursor:pointer}
.onglets button[aria-selected="true"]{background:var(--navy-2); color:#fff}
.setter-ou{color:var(--ink-faint); font-size:12.5px}

/* Clientes */
.clientes{display:flex; flex-direction:column; gap:16px}
.cliente{background:var(--surface); border-radius:var(--radius); padding:20px 22px; display:flex; flex-direction:column; gap:16px}
.cliente-tete{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; cursor:pointer}
.cliente-tete h2{margin:0; font-size:18px; font-weight:800}
.cliente-tete .sous{margin:2px 0 0}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--bleu-tint); color:var(--bleu-dark); border-radius:999px; padding:4px 10px; font-size:12.5px; font-weight:650; text-decoration:none}
.chip .point{width:8px; height:8px; border-radius:99px; background:var(--ink-faint)}
.chip .point.ok{background:var(--vert)}
.chip .point.ko{background:var(--rouge)}
.fleche{color:var(--ink-faint); font-size:20px; line-height:1; transition:transform .15s}
.cliente.ouverte .fleche{transform:rotate(90deg)}
.cliente-corps{display:flex; flex-direction:column; gap:28px; border-top:1px solid var(--rule-soft); padding-top:20px}
.outil{display:flex; flex-direction:column; gap:12px}
.outil-tete{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.outil-tete h3{margin:0; font-size:16px; font-weight:750}
.outil-tete h3 a{color:inherit; text-decoration:none}
.outil-tete h3 a:hover{color:var(--bleu)}
.lien-discret{font-size:13px; font-weight:600; color:var(--ink-faint); padding:6px 4px}
.lien-discret:hover{color:var(--rouge)}
.alerte{font-size:12.5px; color:var(--ambre); font-weight:500}
.outil-tete .adresse{font-size:13px}
.outil-actions{display:flex; gap:6px; flex-wrap:wrap}
.etat{font-size:12.5px; color:var(--ink-faint)}
.etat.ok{color:var(--vert)} .etat.ko{color:var(--rouge)}
.afinir{color:var(--ambre); font-size:13px}
.afinir summary{cursor:pointer; font-weight:650}
.afinir ul{margin:6px 0 0; padding-left:18px; color:var(--ink-soft)}
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; padding:4px 6px}
td{padding:10px 6px; border-top:1px solid var(--rule-soft); vertical-align:middle}
td.code{font-family:var(--mono); font-size:16px; letter-spacing:.12em; font-weight:650}
td.code .inconnu{font-family:var(--font); letter-spacing:0; font-weight:400; color:var(--ink-faint); font-size:13px}
td.actions{text-align:right; white-space:nowrap}
.role{display:inline-block; background:var(--bande); border-radius:999px; padding:2px 8px; font-size:12px; color:var(--ink-soft)}
.role.setter{background:#efeafc; color:#6348cc}
.vide{color:var(--ink-faint); font-size:13.5px; margin:0}
.danger{display:flex; justify-content:flex-end}

/* Modale */
.voile{position:fixed; inset:0; background:rgba(11,23,51,.45); display:flex; align-items:flex-end; justify-content:center; padding:16px; z-index:10}
@media (min-width:600px){.voile{align-items:center}}
.modale{background:var(--surface); border-radius:var(--radius); padding:20px; width:min(100%,520px); max-height:92vh; overflow:auto; display:flex; flex-direction:column; gap:12px}
.modale h2{margin:0; font-size:19px; font-weight:800}
.modale p{margin:0}
.champ{display:flex; flex-direction:column; gap:4px}
.champ > label{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint)}
.champ input:not([type=radio]):not([type=checkbox]),.champ select{border:0; background:var(--bande); border-radius:var(--radius-sm); padding:11px 12px; box-shadow:inset 0 0 0 1px var(--rule); width:100%}
.champ input:focus,.champ select:focus{box-shadow:inset 0 0 0 2px var(--bleu)}
.choix input[type=radio],.choix input[type=checkbox]{width:18px; height:18px; flex:none; accent-color:var(--bleu)}
.choix label > span{flex:1}
.aide{font-size:12.5px; color:var(--ink-faint)}
.choix{display:flex; flex-direction:column; gap:6px}
.choix label{display:flex; gap:10px; align-items:flex-start; background:var(--bande); border-radius:var(--radius-sm); padding:10px 12px; cursor:pointer; box-shadow:inset 0 0 0 1px var(--rule)}
.choix label:has(input:checked){box-shadow:inset 0 0 0 2px var(--bleu); background:var(--bleu-tint)}
.choix input{margin-top:3px}
.choix b{display:block}
.choix small{color:var(--ink-faint)}
.modale-actions{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:4px}
.resultat{background:var(--vert-tint); border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.resultat .code{font-family:var(--mono); font-size:20px; letter-spacing:.15em; font-weight:700}
.resultat .ko{color:var(--rouge)}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--navy-2); color:#fff; padding:10px 16px; border-radius:999px; font-size:14px; z-index:20; max-width:90vw}
.toast.ko{background:var(--rouge)}