*{box-sizing:border-box}:root{--primary:#315f8c;--border:#dfe4ea;--bg:#f4f6f8;--text:#1f2933;--danger:#b32626}body{background:var(--bg);color:var(--text);font-family:Arial,sans-serif;margin:0}.topbar{align-items:center;background:#172536;color:#fff;display:flex;justify-content:space-between;min-height:64px;padding:0 4vw}.brand,.topbar a{color:#fff;text-decoration:none}.brand{font-size:1.15rem;font-weight:700}.topbar nav{align-items:center;display:flex;gap:1rem}.container{margin:auto;max-width:1250px;padding:2rem 1rem 4rem}.card{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.05);padding:1.4rem}.narrow,.login-card{margin:2rem auto;max-width:520px}label{display:block;font-weight:700;margin-bottom:1rem}input,select,textarea{border:1px solid #bcc6d1;border-radius:6px;display:block;font:inherit;margin-top:.4rem;padding:.7rem;width:100%}.button{background:var(--primary);border:0;border-radius:6px;color:#fff;cursor:pointer;display:inline-block;padding:.7rem 1rem;text-decoration:none}.button-secondary{background:#e9eef3;color:var(--text)}.actions-bar{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.filters{display:flex;gap:.6rem}.filters input,.filters select{margin:0}.table-responsive{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{border-bottom:1px solid var(--border);padding:.85rem .65rem;text-align:left}.row-actions{display:flex;gap:.8rem}.row-actions form{margin:0}.link-danger{background:none;border:0;color:var(--danger);cursor:pointer;text-decoration:underline}.activity-form{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}.full{grid-column:1/-1}.form-actions{display:flex;gap:.7rem}.alert{border-radius:7px;margin-bottom:1rem;padding:.9rem}.alert-success{background:#e3f4e9;color:#176b36}.alert-error{background:#fbe5e5;color:#942323}.grid-two{display:grid;gap:1rem;grid-template-columns:minmax(280px,.8fr) minmax(400px,1.2fr)}.user-card,.type-card{border-bottom:1px solid var(--border);padding:1rem 0}.type-edit,.user-edit{align-items:end;display:grid;gap:.5rem;grid-template-columns:2fr 1.3fr .6fr auto}.type-edit input,.user-edit input{margin:0}.footer{text-align:center;padding:1rem}.muted{color:#697386}@media(max-width:820px){.topbar,.actions-bar,.filters{align-items:stretch;flex-direction:column}.activity-form,.grid-two,.type-edit,.user-edit{grid-template-columns:1fr}.topbar{padding:1rem}.topbar nav{flex-wrap:wrap}}


/* Affichage correct du sélecteur de couleur */
input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #bcc6d1;
    border-radius: 6px;
    cursor: pointer;
    height: 46px;
    min-height: 46px;
    padding: 3px;
    width: 72px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 4px;
}

input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 4px;
}

.type-edit input[type="color"] {
    justify-self: start;
    margin: 0;
    width: 72px;
}


/* Sélecteur de couleur fiable : aperçu carré + valeur hexadécimale */
.color-control {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-top: .4rem;
}

.color-picker {
    height: 42px !important;
    margin: 0 !important;
    opacity: 0;
    position: absolute;
    width: 42px !important;
    z-index: 2;
    cursor: pointer;
}

.color-preview {
    border: 1px solid #9aa5b1;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
    display: inline-block;
    flex: 0 0 42px;
    height: 42px;
    width: 42px;
}

.color-value {
    font-family: monospace;
    margin: 0 !important;
    max-width: 110px;
    text-transform: uppercase;
}

.type-edit .color-control {
    margin: 0;
}