:root {
    --app-font-family: "Croissant One", serif;
    --app-surface-color: color-mix(in srgb, var(--text-color, #ffffff) 8%, transparent);
    --app-surface-border: color-mix(in srgb, var(--text-color, #ffffff) 18%, transparent);
    --app-heading-color: var(--text-color, #ffffff);
    --app-muted-text-color: color-mix(in srgb, var(--text-color, #ffffff) 70%, transparent);
    --app-link-color: var(--app-action-info);
    --app-link-hover-color: var(--app-action-info-hover);
    --app-link-underline-offset: 0.16em;
    --app-link-decoration-thickness: 1px;
    --app-control-bg: transparent;
    --app-control-border: color-mix(in srgb, var(--text-color, #ffffff) 24%, transparent);
    --app-control-placeholder: color-mix(in srgb, var(--text-color, #ffffff) 65%, transparent);
    --app-control-focus-ring: color-mix(in srgb, var(--icon-accent-color, #0f6d5a) 38%, transparent);
    --app-btn-bg: var(--app-action-info);
    --app-btn-bg-hover: var(--app-action-info-hover);
    --app-btn-text: #ffffff;
    --app-btn-radius: 10px;
    --app-btn-gap: 0.4rem;
    --app-btn-padding-y: 8px;
    --app-btn-padding-x: 14px;
    --app-btn-border-width: 0;
    --app-btn-font-weight: 600;
    --app-btn-disabled-opacity: 0.55;
    --app-btn-disabled-cursor: not-allowed;
    --app-icon-color: var(--icon-accent-color, #0f6d5a);
    --app-icon-size: 1em;
    --app-action-primary: rgb(247, 248, 248);
    --app-action-primary-hover: rgb(190, 190, 190);
    --app-action-success: rgb(3, 165, 79);
    --app-action-success-hover: rgb(0, 252, 109);
    --app-action-danger: rgb(247, 11, 11);
    --app-action-danger-hover: rgb(252, 59, 59);
    --app-action-warning: rgb(255, 176, 4);
    --app-action-warning-hover: rgb(250, 188, 44);
    --app-action-info: rgb(4, 91, 253);
    --app-action-info-hover: rgb(75, 132, 247);
    --app-action-neutral: rgb(56, 55, 55);
    --app-action-neutral-hover: rgb(87, 87, 87);
    --app-visibility-public: var(--app-action-success);
    --app-visibility-friends: var(--app-action-info);
    --app-visibility-private: var(--app-action-warning);
    /* Icon/Action colors for messaging and UI */
    --icon-spam-color: #FFA500;
    --icon-block-color: #E91E63;
    --icon-archive-color: #2196F3;
    --icon-bell-color: #00BCD4;
    --icon-check-color: #4CAF50;
    --icon-trash-color: #757575;
    --app-container-padding: 10px;
    --app-container-radius: 12px;
    --app-card-radius: 12px;
    --app-card-padding: 14px;
    --app-section-gap: 14px;
    --app-form-shell-max-width: 600px;
    --app-form-shell-padding: 24px;
    --app-form-shell-bg: #353535;
    --app-form-shell-text: #ffffff;
    --app-form-shell-label: #28a745;
    --app-form-shell-help: #bdbdbd;
    --app-form-shell-border: rgba(40, 167, 69, 0.52);
    --app-form-shell-control-bg: #333333;
    --app-form-shell-control-border: #444444;
    --app-form-shell-focus-ring: 0 0 0 0.2rem rgba(40, 167, 69, 0.35);
}

/* Thème clair (défaut) */
:root,
:root[data-theme='light'] {
    --background-color: #ffffff;
    --text-color: #000000;
    --navbar-background-color: #f8f9fa;
    --navbar-text-color: #000000;
    --hr-color: rgba(0, 0, 0, 0.28);
    --icon-accent-color: #0f6d5a;
    --icon-accent-strong-color: #0a58ca;
    --icon-accent-muted-color: #8a3ffc;
    --app-table-border-color: #000000;
    --app-form-shell-bg: #f3f5f7;
    --app-form-shell-text: #0f172a;
    --app-form-shell-label: #0f6d5a;
    --app-form-shell-help: #4b5563;
    --app-form-shell-border: rgba(15, 109, 90, 0.44);
    --app-form-shell-control-bg: #ffffff;
    --app-form-shell-control-border: rgba(15, 23, 42, 0.2);
    --app-form-shell-focus-ring: 0 0 0 0.2rem rgba(15, 109, 90, 0.22);
}

/* Thème sombre */
:root[data-theme='dark'] {
    --background-color: #000000;
    --text-color: #ffffff;
    --navbar-background-color: #000000;
    --navbar-text-color: #ffffff;
    --hr-color: rgba(255, 255, 255, 0.72);
    --icon-accent-color: transparent;
    --icon-accent-strong-color: #6cb8ff;
    --icon-accent-muted-color: #d2a8ff;
    --app-table-border-color: #ffffff;
    --app-form-shell-bg: #222222;
    --app-form-shell-text: #ffffff;
    --app-form-shell-label: #28a745;
    --app-form-shell-help: #bdbdbd;
    --app-form-shell-border: rgba(88, 214, 179, 0.52);
    --app-form-shell-control-bg: #333333;
    --app-form-shell-control-border: #444444;
    --app-form-shell-focus-ring: 0 0 0 0.2rem rgba(40, 167, 69, 0.35);
}

.app-root {
    min-height: 100vh;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: var(--app-font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.1s, color 0.1s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    font-weight: 600;
    line-height: 1;
    color: var(--app-heading-color);
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.95rem;
}

p {
    font-size: 0.85rem;
}

small {
    font-size: 0.75rem;
}

span {
    font-size: inherit;
}

p,
ul,
ol {
    margin-top: 0;
    margin-bottom: 0.50rem;
}

a {
    color: var(--app-link-color);
    text-decoration: none;
    text-decoration-thickness: var(--app-link-decoration-thickness);
    text-underline-offset: var(--app-link-underline-offset);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover,
a:focus {
    color: var(--app-link-hover-color);
    text-decoration: none;
}

hr {
    border: 0;
    height: 1px;
    margin: 20px 0;
    background-image: linear-gradient(to right,
            rgba(0, 0, 0, 0),
            var(--hr-color, rgba(255, 255, 255, 0.72)),
            rgba(0, 0, 0, 0));
}

.wrapper {
    padding-top: 40px;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
}

.content {
    flex: 1;
}

.content-wrapper {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    flex: 1 0 auto;
    z-index: 1;
    overflow-y: visible;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: margin-left 0.5s ease, background-color 0.1s, color 0.1s;
}

.wrapper>footer {
    margin-top: auto;
}

.container,
.container-fluid,
.app-container {
    width: 100%;
    padding: var(--app-container-padding);
    color: var(--text-color);
}

.app-container {
    margin: 0 auto;
    border-radius: var(--app-container-radius);
}

.card,
.app-card {
    border: 1px solid var(--app-surface-border);
    border-radius: var(--app-card-radius);
    background: var(--app-surface-color);
}

.app-card {
    padding: var(--app-card-padding);
}

.app-form-shell {
    max-width: var(--app-form-shell-max-width);
    margin: 0 auto;
    padding: var(--app-form-shell-padding);
    background: var(--app-form-shell-bg);
    border: 2px solid var(--app-form-shell-border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    color: var(--app-form-shell-text);
}

.app-form-shell--wide {
    max-width: min(1100px, 100%);
}

.app-form-shell .form-group {
    margin-bottom: 18px;
}

.app-form-shell .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--app-form-shell-label);
}

.app-form-shell .form-control,
.app-form-shell input,
.app-form-shell textarea,
.app-form-shell select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--app-form-shell-control-border);
    background: var(--app-form-shell-control-bg);
    color: var(--app-form-shell-text);
    box-sizing: border-box;
    margin-bottom: 4px;
    caret-color: var(--app-form-shell-text);
}

.app-form-shell textarea {
    min-height: 60px;
    resize: vertical;
}

.app-form-shell .form-control:focus,
.app-form-shell input:focus,
.app-form-shell textarea:focus,
.app-form-shell select:focus {
    border-color: var(--app-form-shell-label);
    box-shadow: var(--app-form-shell-focus-ring);
    outline: none;
}

.app-form-shell small {
    color: var(--app-form-shell-help);
}

.app-form-shell .btn {
    border-radius: 8px;
}

@media (max-width: 768px) {
    .app-form-shell {
        padding: 16px;
    }
}

.table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    color: var(--text-color);
    background: color-mix(in srgb, var(--app-surface-color) 72%, transparent);
    border-color: var(--app-table-border-color);
}

table.table-responsive {
    display: table;
}

.table thead {
    display: table-header-group;
}

.table tbody {
    display: table-row-group;
}

.table tr {
    display: table-row;
}

.table th,
.table td {
    display: table-cell;
}

.table th,
.table td {
    border: 1px solid var(--app-table-border-color);
    padding: 8px;
    color: inherit;
    background: transparent;
}

.table th {
    background: var(--table-header-background, var(--app-surface-color));
    text-align: left;
    color: var(--app-heading-color);
}

.table tr:nth-child(even) {
    background-color: var(--table-row-even-background, color-mix(in srgb, var(--text-color, #ffffff) 4%, transparent));
}

.table.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-row-odd-background, color-mix(in srgb, var(--text-color, #ffffff) 2.5%, transparent));
}

.table.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--table-row-even-background, color-mix(in srgb, var(--text-color, #ffffff) 5%, transparent));
}

.table tr:hover {
    background-color: var(--table-row-hover-background, color-mix(in srgb, var(--text-color, #ffffff) 8%, transparent));
}

.table.table-bordered,
.table.table-bordered th,
.table.table-bordered td {
    border-color: var(--app-table-border-color);
}

.table a {
    color: inherit;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.profile-info {
    flex: 1;
}

.profile-info h2 {
    margin: 0;
    font-size: 24px;
}

.profile-info p {
    margin: 5px 0 0;
    font-size: 16px;
    color: var(--app-muted-text-color);
}

.profile-picture {
    display: flex;
    position: relative;
    flex: 0 0 100px;
    text-align: right;
}

.profile-picture img {
    position: relative;
    bottom: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-details {
    margin-top: 20px;
}

.profile-details .table {
    width: 100%;
    border-collapse: collapse;
}

.profile-details .table th,
.profile-details .table td {
    padding: 10px;
    border: 1px solid var(--app-table-border-color);
    text-align: left;
}

.profile-details .table th {
    background-color: color-mix(in srgb, var(--text-color, #ffffff) 6%, transparent);
    font-weight: bold;
}

.profile-details .table td {
    background-color: transparent;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.app-page {
    width: 100%;
}

.app-section {
    display: grid;
    gap: var(--app-section-gap);
}

.app-section-title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
}

.app-muted {
    color: var(--app-muted-text-color);
}

.app-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.app-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.82rem;
    border: 1px solid var(--app-surface-border);
}

form {
    background-color: transparent;
}

.form-group {
    margin-bottom: 0.9rem;
}

label,
.form-label {
    display: inline-block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: var(--app-heading-color);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea,
.form-control,
.form-select {
    width: 100%;
    border: 1px solid var(--app-control-border);
    border-radius: 10px;
    background: var(--app-control-bg);
    color: var(--text-color);
    min-height: 38px;
    padding: 8px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

input,
select,
textarea,
.form-control,
.form-select {
    caret-color: var(--text-color);
}

:root[data-theme='dark'] select option,
:root[data-theme='dark'] .form-control option,
:root[data-theme='dark'] .form-select option {
    background: color-mix(in srgb, var(--background-color, #121212) 94%, #000 6%);
    color: var(--text-color, #ffffff);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--app-control-placeholder);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-color);
    transition: background-color 9999s ease-in-out 0s;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--icon-accent-color, #0f6d5a);
    box-shadow: 0 0 0 3px var(--app-control-focus-ring);
}

.app-btn,
button[type="submit"]:not(.btn),
button[type="button"]:not(.btn),
button[type="reset"]:not(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-btn-gap);
    border-radius: var(--app-btn-radius);
    border: var(--app-btn-border-width) solid var(--app-control-border);
    background: transparent;
    color: var(--text-color);
    padding: var(--app-btn-padding-y) var(--app-btn-padding-x);
    font-weight: var(--app-btn-font-weight);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.app-btn[disabled],
.app-btn.disabled,
button[disabled]:not(.btn) {
    opacity: var(--app-btn-disabled-opacity);
    cursor: var(--app-btn-disabled-cursor);
    pointer-events: none;
}

.app-btn,
button[type="submit"]:not(.btn) {
    background: var(--app-btn-bg);
    color: var(--app-btn-text);
    border-color: var(--app-btn-bg);
}

.app-btn--success {
    background: var(--app-action-success);
    border-color: var(--app-action-success);
    color: #ffffff;
}

.app-btn--danger {
    background: var(--app-action-danger);
    border-color: var(--app-action-danger);
    color: #ffffff;
}

.app-btn--warning {
    background: var(--app-action-warning);
    border-color: var(--app-action-warning);
    color: #111111;
}

.app-btn--info {
    background: var(--app-action-info);
    border-color: var(--app-action-info);
    color: #ffffff;
}

.app-btn--neutral {
    background: var(--app-action-neutral);
    border-color: var(--app-action-neutral);
    color: #ffffff;
}

button[type="button"]:not(.btn):hover,
button[type="button"]:not(.btn):focus,
button[type="reset"]:not(.btn):hover,
button[type="reset"]:not(.btn):focus {
    background: color-mix(in srgb, var(--text-color, #ffffff) 10%, transparent);
    border-color: color-mix(in srgb, var(--text-color, #ffffff) 36%, transparent);
    color: var(--text-color);
}

.app-btn:hover,
.app-btn:focus,
button[type="submit"]:not(.btn):hover,
button[type="submit"]:not(.btn):focus {
    background: var(--app-btn-bg-hover);
    border-color: var(--app-btn-bg-hover);
    color: var(--app-btn-text);
}

.app-btn--success:hover,
.app-btn--success:focus {
    background: var(--app-action-success-hover);
    border-color: var(--app-action-success-hover);
    color: #ffffff;
}

.app-btn--danger:hover,
.app-btn--danger:focus {
    background: var(--app-action-danger-hover);
    border-color: var(--app-action-danger-hover);
    color: #ffffff;
}

.app-btn--warning:hover,
.app-btn--warning:focus {
    background: var(--app-action-warning-hover);
    border-color: var(--app-action-warning-hover);
    color: #111111;
}

.app-btn--info:hover,
.app-btn--info:focus {
    background: var(--app-action-info-hover);
    border-color: var(--app-action-info-hover);
    color: #ffffff;
}

.app-btn--neutral:hover,
.app-btn--neutral:focus {
    background: var(--app-action-neutral-hover);
    border-color: var(--app-action-neutral-hover);
    color: #ffffff;
}

.app-btn:focus,
button:not(.btn):focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--app-control-focus-ring);
}

i,
.fa,
.fas,
.far,
.fab {
    color: var(--app-icon-color);
    font-size: var(--app-icon-size);
    line-height: 1;
}

.btn i,
.btn .fa,
.btn .fas,
.btn .far,
.btn .fab,
a i,
a .fa,
a .fas,
a .far,
a .fab {
    color: inherit;
}

/* Base sémantique: boutons */
.btn-action-success {
    background: color-mix(in srgb, var(--app-action-success) 22%, transparent);
    border-color: color-mix(in srgb, var(--app-action-success) 62%, transparent);
    color: color-mix(in srgb, var(--app-action-success) 92%, #ffffff 8%);
}

.btn-action-success:hover,
.btn-action-success:focus {
    background: color-mix(in srgb, var(--app-action-success-hover) 34%, transparent);
    border-color: color-mix(in srgb, var(--app-action-success-hover) 78%, transparent);
    color: #ffffff;
}

.btn-action-danger {
    background: color-mix(in srgb, var(--app-action-danger) 22%, transparent);
    border-color: color-mix(in srgb, var(--app-action-danger) 62%, transparent);
    color: color-mix(in srgb, var(--app-action-danger) 92%, #ffffff 8%);
}

.btn-action-danger:hover,
.btn-action-danger:focus {
    background: color-mix(in srgb, var(--app-action-danger-hover) 34%, transparent);
    border-color: color-mix(in srgb, var(--app-action-danger-hover) 78%, transparent);
    color: #ffffff;
}

.btn-action-warning {
    background: color-mix(in srgb, var(--app-action-warning) 20%, transparent);
    border-color: color-mix(in srgb, var(--app-action-warning) 60%, transparent);
    color: color-mix(in srgb, var(--app-action-warning) 90%, #ffffff 10%);
}

.btn-action-warning:hover,
.btn-action-warning:focus {
    background: color-mix(in srgb, var(--app-action-warning-hover) 34%, transparent);
    border-color: color-mix(in srgb, var(--app-action-warning-hover) 78%, transparent);
    color: #ffffff;
}

.btn-action-info {
    background: color-mix(in srgb, var(--app-action-info) 22%, transparent);
    border-color: color-mix(in srgb, var(--app-action-info) 62%, transparent);
    color: color-mix(in srgb, var(--app-action-info) 92%, #ffffff 8%);
}

.btn-action-info:hover,
.btn-action-info:focus {
    background: color-mix(in srgb, var(--app-action-info-hover) 34%, transparent);
    border-color: color-mix(in srgb, var(--app-action-info-hover) 78%, transparent);
    color: #ffffff;
}

.btn-action-neutral {
    background: color-mix(in srgb, var(--app-action-neutral) 20%, transparent);
    border-color: color-mix(in srgb, var(--app-action-neutral) 60%, transparent);
    color: color-mix(in srgb, var(--app-action-neutral) 92%, #ffffff 8%);
}

.btn-action-neutral:hover,
.btn-action-neutral:focus {
    background: color-mix(in srgb, var(--app-action-neutral-hover) 34%, transparent);
    border-color: color-mix(in srgb, var(--app-action-neutral-hover) 78%, transparent);
    color: #ffffff;
}

/* Base sémantique: liens */
a.link-action-success {
    color: var(--app-action-success);
}

a.link-action-success:hover,
a.link-action-success:focus {
    color: var(--app-action-success-hover);
}

a.link-action-danger {
    color: var(--app-action-danger);
}

a.link-action-danger:hover,
a.link-action-danger:focus {
    color: var(--app-action-danger-hover);
}

a.link-action-warning {
    color: var(--app-action-warning);
}

a.link-action-warning:hover,
a.link-action-warning:focus {
    color: var(--app-action-warning-hover);
}

a.link-action-info {
    color: var(--app-action-info);
}

a.link-action-info:hover,
a.link-action-info:focus {
    color: var(--app-action-info-hover);
}

a.link-action-neutral {
    color: var(--app-action-neutral);
}

a.link-action-neutral:hover,
a.link-action-neutral:focus {
    color: var(--app-action-neutral-hover);
}

/* Base sémantique: icônes */
.icon-action-success,
i.icon-action-success,
.fa.icon-action-success,
.fas.icon-action-success,
.far.icon-action-success,
.fab.icon-action-success {
    color: var(--app-action-success);
}

.icon-action-danger,
i.icon-action-danger,
.fa.icon-action-danger,
.fas.icon-action-danger,
.far.icon-action-danger,
.fab.icon-action-danger {
    color: var(--app-action-danger);
}

.icon-action-warning,
i.icon-action-warning,
.fa.icon-action-warning,
.fas.icon-action-warning,
.far.icon-action-warning,
.fab.icon-action-warning {
    color: var(--app-action-warning);
}

.icon-action-info,
i.icon-action-info,
.fa.icon-action-info,
.fas.icon-action-info,
.far.icon-action-info,
.fab.icon-action-info {
    color: var(--app-action-info);
}

.icon-action-neutral,
i.icon-action-neutral,
.fa.icon-action-neutral,
.fas.icon-action-neutral,
.far.icon-action-neutral,
.fab.icon-action-neutral {
    color: var(--app-action-neutral);
}

/* Base partagée: icône de visibilité */
.app-visibility-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    border: none;
    background: transparent;
    color: var(--text-color);
}

.app-visibility-icon,
.app-visibility-icon:hover,
.app-visibility-icon:focus,
.app-visibility-icon:focus-visible {
    text-decoration: none;
}

.app-visibility-icon i,
.app-visibility-icon .fa,
.app-visibility-icon .fas,
.app-visibility-icon .far,
.app-visibility-icon .fab {
    color: inherit;
}

.app-visibility-icon.is-public {
    color: var(--app-visibility-public);
}

.app-visibility-icon.is-friends {
    color: var(--app-visibility-friends);
}

.app-visibility-icon.is-private {
    color: var(--app-visibility-private);
}

/* Action signalement: icone seule orange, sans fond ni contour */
.btn-icon-report,
.btn-icon-report:hover,
.btn-icon-report:focus,
.btn-icon-report:focus-visible {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--app-action-warning) !important;
}

.btn-icon-report i,
.btn-icon-report .fa,
.btn-icon-report .fas,
.btn-icon-report .far,
.btn-icon-report .fab {
    color: var(--app-action-warning) !important;
}

/* Action voir: icone seule bleue, sans fond ni contour */
.btn-icon-view,
.btn-icon-view:hover,
.btn-icon-view:focus,
.btn-icon-view:focus-visible {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--app-action-info) !important;
}

.btn-icon-view i,
.btn-icon-view .fa,
.btn-icon-view .fas,
.btn-icon-view .far,
.btn-icon-view .fab {
    color: var(--app-action-info) !important;
}

/* Correctif cible login: fond transparent et texte lisible selon theme */
.page-login-php .card {
    background: transparent;
    border-color: var(--app-control-border);
}

.page-login-php .form-control,
.page-login-php input,
.page-login-php select,
.page-login-php textarea {
    background: transparent;
    color: var(--text-color);
}

.page-login-php .form-control::placeholder,
.page-login-php input::placeholder,
.page-login-php textarea::placeholder {
    color: var(--app-control-placeholder);
}

/* Navbar responsive guard: cache le hamburger en desktop */
@media (min-width: 992px) {
    .navbar .navbar-toggler {
        display: none !important;
    }

    .navbar .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    bottom: 0;
    z-index: 0;
    font-size: small;
    padding: 5px 10px;
    position: relative;
    background-color: var(--background-color);
    color: var(--text-color);
    border-top: 1px solid var(--app-surface-border);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    footer {
        font-size: 10px;
        padding: 8px 15px;
    }
}

@media (max-width: 600px) {
    .table {
        display: block;
        width: 100%;
    }

    table.table-responsive {
        display: block;
    }

    .profile-personal-table,
    .profile-account-table {
        margin-top: 25px;
    }

    .table thead {
        display: none;
    }

    .table tbody,
    .table tr,
    .table td {
        display: block;
        width: 100%;
    }

    .profile-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-picture {
        text-align: left;
        margin-top: 10px;
    }

    .profile-picture img {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 575.98px) {
    .app-section-title {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    footer {
        font-size: 10px;
        padding: 8px 15px;
    }
}