/* Pages d'administration : connexion, profil, utilisateurs, référentiels, journal, réglages. */

/* ---------- Connexion (plein écran, sans coquille) ---------- */
body.login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;background:var(--papier)}
.login-side{position:relative;overflow:hidden;background:var(--nuit);color:#D5E3EE;padding:48px 56px;display:flex;flex-direction:column;gap:28px}
.login-side::after{content:"";position:absolute;right:-120px;bottom:-140px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,109,.16),transparent 65%);pointer-events:none}
.login-brand{display:flex;align-items:center;gap:14px}
.login-brand img{width:44px;height:58px;object-fit:contain}
.login-brand b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:24px;color:#fff;line-height:1.05}
.login-brand small{color:#9FBBD3;font-size:14px}
.login-side h1{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:clamp(36px,4.2vw,54px);line-height:1.02;color:#fff;max-width:14ch}
.login-side h1 em{font-style:normal;color:var(--jaune)}
.login-side .pitch{font-size:16.5px;max-width:52ch;line-height:1.55}
.mini-year{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;max-width:480px;margin-top:auto}
.mini-year span{display:block;height:62px;border-radius:5px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.mini-year span i{position:absolute;left:3px;right:3px;border-radius:3px}
.mini-year small{display:block;text-align:center;font-size:11px;color:#8EADC8;margin-top:4px;letter-spacing:.04em}
.login-legal{font-size:12.5px;color:#8EADC8}
.login-main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.login-box{width:min(420px,100%);display:flex;flex-direction:column;gap:18px}
.login-box>div:not(.or){display:flex;flex-direction:column;gap:12px}
.login-box h2{font-family:"Barlow Condensed",sans-serif;font-size:32px;color:var(--nuit)}
.login-box form{display:flex;flex-direction:column;gap:14px}
.login-box .btn{width:100%;min-height:46px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px!important}
.pw-wrap .icon-btn{position:absolute;right:3px;top:50%;transform:translateY(-50%)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.linkish{border:0;background:none;padding:0;color:var(--bleu);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:14px}
.linkish:hover{color:var(--nuit)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--bord)}
.demo-accounts{display:flex;flex-direction:column;gap:8px}
.demo-acc{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--bord);border-radius:var(--r-lg);background:var(--papier);cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s,transform .1s}
.demo-acc:hover{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(0,85,150,.1)}
.demo-acc:active{transform:translateY(1px)}
.demo-acc b{display:block;font-size:14.5px}
.demo-acc small{display:block;color:var(--muted);font-size:13px}
.demo-acc .txt{flex:1;min-width:0}
.demo-acc>.ic{color:var(--muted)}
.otp{letter-spacing:.5em;font-size:22px!important;text-align:center;font-variant-numeric:tabular-nums}
.step-back{display:inline-flex;align-items:center;gap:6px}
@media (max-width:900px){
  body.login{grid-template-columns:1fr}
  .login-side{padding:28px 20px;gap:16px}
  .login-side .pitch,.mini-year{display:none}
  .login-side h1{font-size:30px}
}

/* ---------- Profil ---------- */
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pw-meter i{height:6px;border-radius:3px;background:var(--bord)}
.pw-meter[data-s="1"] i:nth-child(-n+1){background:var(--danger)}
.pw-meter[data-s="2"] i:nth-child(-n+2){background:#D98A00}
.pw-meter[data-s="3"] i:nth-child(-n+3){background:#6E9E2F}
.pw-meter[data-s="4"] i{background:var(--ok)}
.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;font-size:13.5px}
.rules li{display:flex;align-items:center;gap:6px;color:var(--muted)}
.rules li .ic{width:15px;height:15px;color:var(--champ)}
.rules li.ok{color:var(--ok)}.rules li.ok .ic{color:var(--ok)}
@media (max-width:640px){.rules{grid-template-columns:1fr}}
.qr-box{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.qr{width:150px;height:150px;border:1px solid var(--bord);border-radius:10px;flex:none}
.secret{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;background:var(--fond);border:1px solid var(--bord);border-radius:6px;padding:6px 10px;word-break:break-all}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px}
.codes span{background:var(--fond);border:1px solid var(--bord);border-radius:6px;padding:6px 10px;text-align:center}
.copy-row{display:flex;gap:8px;align-items:stretch}
.copy-row input{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px!important}
.state-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- Listes, cartes de référentiel ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.toolbar .search{flex:1 1 260px;max-width:420px}
.toolbar .spacer{flex:1}
.count-line{font-size:13.5px;color:var(--muted)}
.user-cell{display:flex;align-items:center;gap:10px;min-width:220px}
.user-cell b{display:block}
.user-cell small{display:block;color:var(--muted);font-size:13px}
.row-off td{color:var(--muted)}
.row-off .user-cell b{color:var(--muted)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ref-card{background:var(--papier);border:1px solid var(--bord);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--ombre);transition:border-color .15s,box-shadow .15s}
.ref-card:hover{border-color:var(--champ);box-shadow:var(--ombre-2)}
.ref-card h3{font-size:16px;line-height:1.3}
.ref-card h3 button{all:unset;cursor:pointer}
.ref-card h3 button:hover{color:var(--bleu);text-decoration:underline;text-underline-offset:3px}
.ref-card h3 button:focus-visible{outline:2px solid var(--bleu);outline-offset:2px;border-radius:3px}
.ref-card .purpose{color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ref-card .meta{display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--encre-2)}
.ref-card .meta span{display:flex;align-items:center;gap:6px;min-width:0}
.ref-card .meta .ic{width:14px;height:14px;color:var(--muted)}
.ref-card .meta a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-card .foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--bord-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ref-card .foot .spacer{flex:1}
.ref-card.off{background:var(--papier-2)}
.ref-card.off h3{color:var(--muted)}
.preview-tbl{max-height:320px;overflow:auto}
.preview-tbl .dup td{background:var(--warn-bg)}
.drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px;border:2px dashed var(--champ);border-radius:var(--r-lg);text-align:center;color:var(--muted);cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--bleu);background:var(--info-bg)}
.drop .ic{width:28px;height:28px;color:var(--bleu)}

/* ---------- Journal ---------- */
.diff{display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.diff-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;align-items:baseline}
.diff-row code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:var(--muted)}
.diff-row del{background:var(--danger-bg);color:#7E0C20;text-decoration:line-through;padding:0 4px;border-radius:4px;word-break:break-word}
.diff-row ins{background:var(--ok-bg);color:var(--ok);text-decoration:none;padding:0 4px;border-radius:4px;word-break:break-word}
.hash{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--muted);word-break:break-all}
.tbl .when{white-space:nowrap;font-variant-numeric:tabular-nums}
.act-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--muted);display:block}

/* ---------- Réglages ---------- */
.set-form{display:flex;flex-direction:column;gap:16px;max-width:880px}
.tab-panel{padding-top:18px;display:flex;flex-direction:column;gap:16px}
.form-foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding-top:6px}
.cat-list{display:flex;flex-direction:column;gap:8px}
.cat-row{display:grid;grid-template-columns:auto minmax(160px,1fr) 96px 220px auto auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--bord);border-radius:var(--r-lg);background:var(--papier)}
.cat-row.off{background:var(--papier-2);opacity:.75}
.cat-row .order{display:flex;flex-direction:column}
.cat-row .order .icon-btn{width:28px;height:22px}
.cat-row input[type=text]{min-height:36px;padding:6px 10px;border:1px solid var(--champ);border-radius:var(--r);width:100%}
.cat-row input[type=color]{width:42px;height:36px;padding:2px;border:1px solid var(--champ);border-radius:var(--r);background:#fff;cursor:pointer}
.cat-row select{min-height:36px;border:1px solid var(--champ);border-radius:var(--r);padding:0 8px;background:#fff}
.bar-preview{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 6px;border-radius:6px;font-size:13px;font-weight:600;white-space:nowrap;max-width:200px;overflow:hidden}
.bar-preview .ic{width:14px;height:14px}
.ratio{font-size:12px;font-weight:700;white-space:nowrap}
.ratio.ok{color:var(--ok)}.ratio.ko{color:var(--danger)}
.icon-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.icon-pick button{height:40px;border:1px solid var(--bord);border-radius:var(--r);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.icon-pick button[aria-pressed=true]{border-color:var(--bleu);background:var(--info-bg);color:var(--bleu)}
@media (max-width:820px){
  .cat-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:none}
  .cat-row .bar-preview,.cat-row .ratio-wrap{grid-column:2/-1}
}
pre.snippet{margin:0;padding:12px 14px;background:var(--encre);color:#E6EEF4;border-radius:var(--r);font-size:12.5px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix .yes{color:var(--ok);font-weight:700}
.matrix .no{color:var(--muted)}
.matrix .part{color:var(--warn);font-weight:600}
.grid-filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px 16px}
@media (max-width:820px){.grid-filters{grid-template-columns:1fr}}
.ic.rot90{transform:rotate(90deg)}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Connexion : vitrine du panneau de gauche ---------- */
.lg-stage{position:relative;flex:1;min-height:300px;display:flex;align-items:center}
.lg-cards{position:relative;width:min(560px,100%);height:320px}
.lg-card{position:absolute;width:250px;border-radius:14px;overflow:hidden;background:#fff;color:var(--encre);box-shadow:0 18px 40px -12px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.25);animation:lg-float 7s ease-in-out infinite;animation-delay:calc(var(--i) * -1.7s)}
.lg-card:nth-child(1){left:0;top:34px;transform:rotate(-5deg);z-index:2}
.lg-card:nth-child(2){left:180px;top:0;transform:rotate(3deg);z-index:3}
.lg-card:nth-child(3){left:300px;top:130px;transform:rotate(-2deg);z-index:4}
.lg-card:nth-child(4){left:70px;top:170px;transform:rotate(4deg);z-index:1}
.lg-card img{display:block;width:100%;height:118px;object-fit:cover}
.lg-card-b{display:flex;gap:10px;align-items:center;padding:10px 12px 12px;border-top:4px solid var(--cat)}
.lg-date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;height:46px;border-radius:10px;background:var(--fond);font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted);line-height:1}
.lg-date b{font-family:"Barlow Condensed",sans-serif;font-size:22px;color:var(--nuit)}
.lg-txt{display:flex;flex-direction:column;min-width:0}
.lg-txt small{font-size:11px;font-weight:700;color:var(--muted)}
.lg-txt b{font-size:14px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-txt em{font-style:normal;font-size:11.5px;color:var(--muted)}
@keyframes lg-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
.lg-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:620px}
.lg-stats li{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.lg-stats b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:30px;line-height:1;color:var(--jaune)}
.lg-stats span{display:block;margin-top:4px;font-size:12.5px;line-height:1.3;color:#C9D9E6}
.login-side .mini-year{margin-top:0}
@media (max-width:1250px){.lg-card:nth-child(3){left:250px}.lg-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.lg-stage,.lg-stats{display:none}}
@media (prefers-reduced-motion:reduce){.lg-card{animation:none}}
/* Ajustements : éventail sans débordement */
.lg-stage{min-height:0;flex:1 1 auto;align-items:center}
.lg-cards{height:340px;width:min(580px,100%)}
.lg-card{width:240px}
.lg-card img{height:108px}
.lg-card:nth-child(1){left:0;top:28px;transform:rotate(-4deg);z-index:1}
.lg-card:nth-child(2){left:210px;top:0;transform:rotate(3deg);z-index:2}
.lg-card:nth-child(3){left:330px;top:150px;transform:rotate(-2deg);z-index:4}
.lg-card:nth-child(4){left:60px;top:160px;transform:rotate(3deg);z-index:3}
.login-side{gap:22px;padding:40px 56px}
@media (max-width:1250px){.lg-card:nth-child(3){left:280px}}

/* ---------- Sélection multiple (référentiels, utilisateurs) ---------- */
.pick{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;margin:-8px;cursor:pointer;border-radius:8px;flex:none}
.pick:hover{background:var(--fond)}
.pick input{width:20px;height:20px;margin:0;accent-color:var(--bleu);cursor:pointer}
.pick input:disabled{cursor:not-allowed;opacity:.45}
.ref-card{position:relative}
.ref-card .ref-top{display:flex;align-items:flex-start;gap:10px}
.ref-card .ref-top>div{flex:1;min-width:0}
.ref-card.is-selected,.tbl tr.is-selected{background:#F2F7FC}
.ref-card.is-selected{border-color:var(--bleu);box-shadow:0 0 0 1px var(--bleu)}
.tbl td.pickcell,.tbl th.pickcell{width:44px;padding-left:12px;padding-right:0}
.adm-selbar{z-index:15;margin-top:4px}
.adm-selbar .sel-acts{display:flex;flex-wrap:wrap;gap:8px}
.adm-selbar .sel-clear{margin-left:auto}
.adm-selbar .btn{min-height:38px}
.adm-selbar .btn-ghost{border-color:rgba(255,255,255,.25)}
/* Boutons de suppression toujours en rouge, désactivation en ambre, réactivation en vert */
.icon-btn.is-danger{color:var(--danger)}
.icon-btn.is-danger:hover{background:var(--danger-bg);color:var(--danger)}
.icon-btn.is-danger[aria-disabled=true],.icon-btn.is-danger:disabled{color:#C9A0A7;cursor:not-allowed}
.icon-btn.is-warn{color:#8C5300}.icon-btn.is-warn:hover{background:var(--warn-bg)}
.icon-btn.is-ok{color:var(--ok)}.icon-btn.is-ok:hover{background:var(--ok-bg)}
.btn-outline.is-warn{color:#8C5300;border-color:#E3C48A}.btn-outline.is-warn:hover{background:var(--warn-bg);color:#6B3F00}
.btn-outline.is-ok{color:var(--ok);border-color:#BFE0CB}.btn-outline.is-ok:hover{background:var(--ok-bg);color:#164F2E}
.btn-outline.is-danger{color:var(--danger);border-color:var(--danger-bd)}.btn-outline.is-danger:hover{background:var(--danger-bg);color:#7E0C20}
@media (max-width:640px){
  .adm-selbar{position:fixed;left:0;right:0;bottom:0;border-radius:14px 14px 0 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px;z-index:40}
  .adm-selbar .sel-count{flex:1 1 100%}
  .adm-selbar .sel-acts{flex:1 1 100%}
  .adm-selbar .sel-acts .btn{flex:1 1 calc(50% - 8px);min-height:42px}
  .adm-selbar .sel-clear{margin-left:0;flex:1 1 100%;min-height:42px}
  body.has-selbar main.content{padding-bottom:190px}
}
.toolbar .pickall-lbl{display:inline-flex;align-items:center;gap:6px;padding-left:8px;font-size:13.5px;color:var(--muted)}
/* Tableaux empilés en cartes sur mobile (référentiels, utilisateurs) */
@media (max-width:640px){
  /* En-tête masqué, sauf la case « tout sélectionner » qui reste accessible au doigt */
  .tbl-stack thead{display:block}
  .tbl-stack thead tr{display:flex;align-items:center;gap:8px;padding:0 0 6px 12px;margin:0;background:transparent;border:0;box-shadow:none}
  .tbl-stack thead th:not(.pickcell){display:none}
  .tbl-stack thead th.pickcell{display:flex;align-items:center;gap:10px;width:auto;padding:0;background:transparent;border:0;text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--encre-2)}
  .tbl-stack thead th.pickcell:not(:empty)::after{content:"Tout sélectionner"}
  .table-wrap:has(.tbl-stack){border:0;background:transparent;overflow:visible}
  .tbl-stack,.tbl-stack tbody{display:block}
  .tbl-stack tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;padding:12px;margin-bottom:10px;background:var(--papier);border:1px solid var(--bord);border-radius:var(--r-lg);box-shadow:var(--ombre)}
  .tbl-stack td{display:block;padding:0;border:0;grid-column:2;min-width:0}
  .tbl-stack td.pickcell{grid-column:1;grid-row:1 / span 6;width:auto;padding:0}
  .tbl-stack td[data-label]:not(:first-of-type)::before{content:attr(data-label) " : ";font-size:12px;font-weight:700;color:var(--muted)}
  .tbl-stack td.num{text-align:left}
  .tbl-stack td.act{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;padding-top:6px;margin-top:4px;border-top:1px solid var(--bord-2)}
  .tbl-stack td.act .btn,.tbl-stack td.act .icon-btn{min-height:40px;min-width:40px}
  .tbl-stack tr.is-selected{border-color:var(--bleu);box-shadow:0 0 0 1px var(--bleu)}
  .tbl-stack td[colspan]{grid-column:1 / -1}
}
/* Profil : boutons des codes de secours qui passent à la ligne sur très petit écran */
#codes-new,.profil-actions .btn{max-width:100%;white-space:normal;text-align:center}