/* activation.autech-expert.fr — outil interne de suivi des activations */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');

:root{
    --ink:#1c2733;          /* texte principal */
    --steel:#5b6b7a;        /* texte secondaire */
    --bg:#eef1f4;           /* fond de page */
    --panel:#ffffff;
    --line:#d7dde3;
    --navy:#16222e;         /* barre haute */
    --amber:#e8720c;        /* accent atelier / diagnostic */
    --amber-dark:#c85f06;
    --ok:#1e7d43;
    --err:#b4231f;
    --radius:6px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:'Archivo', system-ui, sans-serif;
    background:var(--bg); color:var(--ink);
    font-size:15px; line-height:1.45;
}
a{color:var(--amber-dark)}
h1{font-weight:800; letter-spacing:-.01em; margin:.2em 0 .3em}
h2{font-weight:700; font-size:1.05rem; margin:1.2em 0 .4em}
.lead{color:var(--steel); max-width:70ch}

/* ---- barre haute ---- */
.topbar{
    background:var(--navy); color:#fff;
    display:flex; align-items:center; gap:1.5rem;
    padding:.55rem 1.2rem; flex-wrap:wrap;
}
.topbar-brand{color:#fff; text-decoration:none; font-weight:700; display:flex; align-items:center; gap:.5rem}
.topbar-brand em{font-style:normal; font-weight:400; opacity:.65}
.brand-mark{
    display:inline-grid; place-items:center;
    width:30px; height:30px; border-radius:5px;
    background:var(--amber); color:#16222e; font-weight:800; font-size:1.05rem;
}
.topbar-nav{display:flex; gap:.25rem; flex:1}
.topbar-nav a{color:#cfd8e0; text-decoration:none; padding:.35rem .7rem; border-radius:4px}
.topbar-nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.topbar-nav .nav-import{color:#ffd9ad}
.topbar-user{display:flex; align-items:center; gap:.7rem; color:#cfd8e0}
.topbar-user a{color:#cfd8e0; text-decoration:none}
.role-badge{font-size:.72rem; font-weight:700; padding:.15rem .5rem; border-radius:99px; letter-spacing:.03em}
.role-admin{background:var(--amber); color:#16222e}
.role-utilisateur{background:#3b82c4; color:#fff}
.role-visionneuse{background:#5b6b7a; color:#fff}

.page{max-width:1240px; margin:0 auto; padding:1.4rem 1.2rem 3rem}

/* ---- accueil ---- */
.home-head{margin-bottom:1.4rem}
.home-head p{color:var(--steel); margin:.1rem 0 1rem}
.home-actions{display:flex; gap:.8rem; flex-wrap:wrap}
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.8rem}
.cat-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:.9rem 1rem; text-decoration:none; color:var(--ink);
    display:flex; flex-direction:column; gap:.25rem;
    border-left:4px solid var(--steel);
}
.cat-card.cat-sgw{border-left-color:var(--navy)}
.cat-card.cat-tcp{border-left-color:var(--amber)}
.cat-card:hover{border-color:var(--amber); box-shadow:0 1px 0 var(--line)}
.cat-card strong{font-size:1rem}
.cat-meta{color:var(--steel); font-size:.82rem}

.sub-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.6rem; margin:0 0 1.2rem}
.sub-card{
    background:#fff7ee; border:1px solid #efd6b8; border-radius:var(--radius);
    padding:.6rem .8rem; text-decoration:none; color:var(--ink);
    display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
}
.sub-card:hover{border-color:var(--amber)}
.sub-card span{color:var(--steel); font-size:.8rem; white-space:nowrap}

/* ---- fil d'ariane / entête de catégorie ---- */
.crumbs{color:var(--steel); font-size:.85rem; margin-bottom:.4rem}
.crumbs a{color:var(--steel)}
.cat-head{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.cat-head h1{margin:0; flex:1}
.cat-tools{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.cat-tools input[type=search]{
    padding:.45rem .7rem; border:1px solid var(--line); border-radius:var(--radius);
    font:inherit; min-width:220px; background:#fff;
}

/* ---- boutons ---- */
.btn{
    display:inline-block; border:1px solid transparent; border-radius:var(--radius);
    padding:.45rem .9rem; font:inherit; font-weight:600; cursor:pointer;
    text-decoration:none; background:#fff; color:var(--ink); border-color:var(--line);
}
.btn:hover{border-color:var(--steel)}
.btn-primary{background:var(--amber); border-color:var(--amber); color:#16222e}
.btn-primary:hover{background:var(--amber-dark); border-color:var(--amber-dark); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line)}
.btn-lg{padding:.65rem 1.3rem; font-size:1rem}
.btn-block{width:100%}

/* ---- tableaux ---- */
.table-wrap{overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius)}
table.grid{border-collapse:collapse; width:100%; font-size:.88rem}
table.grid th{
    text-align:left; background:var(--navy); color:#fff; font-weight:600;
    padding:.5rem .65rem; position:sticky; top:0; white-space:nowrap;
}
table.grid td{padding:.4rem .65rem; border-top:1px solid var(--line); vertical-align:top}
table.grid tbody tr:nth-child(even){background:#f7f9fa}
table.grid tbody tr:hover{background:#fdf3e7}
.grid-static{background:var(--panel)}
.grid-static td, .grid-static th{border:1px solid var(--line)}
.col-num{color:var(--steel); width:3ch; text-align:right}
.col-actions{width:2.5rem; text-align:center}
.table-count{color:var(--steel); font-size:.85rem}
.empty-row td{color:var(--steel); text-align:center; padding:1.4rem}

.cell-edit{cursor:text}
.cell-edit:hover{outline:1px dashed var(--amber); outline-offset:-1px}
.cell-edit.editing{padding:0}
.cell-edit input, .cell-edit select{
    width:100%; border:2px solid var(--amber); border-radius:0;
    font:inherit; padding:.32rem .55rem; background:#fff;
}
.cell-code{font-family:ui-monospace, 'Cascadia Mono', Consolas, monospace; white-space:nowrap}
.btn-del{
    border:none; background:transparent; color:var(--steel); cursor:pointer;
    font-size:.9rem; padding:.1rem .3rem; border-radius:4px;
}
.btn-del:hover{color:#fff; background:var(--err)}

/* ---- badges de statut (couleurs du Google Sheets) ---- */
.st-badge{
    display:inline-block; padding:.12rem .55rem; border-radius:99px;
    font-size:.82rem; font-weight:600; white-space:nowrap;
}
.st-green {background:#d9ead3; color:#1e7d43}   /* Outil activé, Traité */
.st-red   {background:#f4cccc; color:#b4231f}   /* Outil non activé, Pas encore traité */
.st-purple{background:#e6d6f5; color:#6a3fa0}   /* SGW activé */
.st-dark  {background:#3d3d3d; color:#ffffff}   /* A activer sur le portail Autel svp */
.st-grey  {background:#e3e7ea; color:#4a5763}
.st-blue  {background:#d5e6f7; color:#255a8a}
.st-orange{background:#fde6cc; color:#a35a05}

/* Masquage N° code TCP pour les visionneuses (valeur jamais envoyée au navigateur) */
.masked{
    filter:blur(4px); user-select:none;
    color:var(--steel); letter-spacing:2px;
}

/* ---- alertes ---- */
.alert{padding:.7rem 1rem; border-radius:var(--radius); margin:.8rem 0; border:1px solid}
.alert-err{background:#fbeceb; border-color:#e7b6b4; color:var(--err)}
.alert-ok{background:#eaf6ee; border-color:#b8ddc4; color:var(--ok)}
.alert-info{background:#eef4fb; border-color:#bcd4ec; color:#255a8a}
.alert ul{margin:.4rem 0 .6rem 1.2rem}

/* ---- imports ---- */
.import-map{margin:1.2rem 0; max-width:640px}
.import-form{margin-top:1.4rem; display:flex; gap:.8rem; flex-wrap:wrap; align-items:center}
.file-drop{
    display:inline-flex; align-items:center; gap:.6rem;
    border:2px dashed var(--line); border-radius:var(--radius);
    padding:.7rem 1.1rem; background:#fff; cursor:pointer;
}
.file-drop:hover{border-color:var(--amber)}
.file-drop input{font:inherit}

/* ---- connexion ---- */
.login-body{
    min-height:100vh; display:grid; place-items:center;
    background:linear-gradient(160deg, var(--navy) 0%, #22354a 60%, #2c4258 100%);
}
.login-card{
    background:var(--panel); border-radius:10px; padding:2rem;
    width:min(400px, 92vw); box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-brand{display:flex; gap:.8rem; align-items:center; margin-bottom:1.4rem}
.login-brand .brand-mark{width:42px; height:42px; font-size:1.4rem}
.login-brand h1{margin:0; font-size:1.25rem}
.login-brand p{margin:0; color:var(--steel); font-size:.85rem}
.login-card label{display:block; font-weight:600; font-size:.85rem; margin-bottom:.9rem}
.login-card input{
    display:block; width:100%; margin-top:.3rem;
    padding:.55rem .7rem; border:1px solid var(--line); border-radius:var(--radius); font:inherit;
}
.login-card input:focus{outline:2px solid var(--amber); border-color:var(--amber)}
.login-hint{color:var(--steel); font-size:.8rem; text-align:center; margin:1rem 0 0}
.page-h1{font-size:1.3rem}

@media (max-width:640px){
    .topbar{gap:.6rem}
    .cat-head h1{font-size:1.3rem}
}