:root {
    --bg: #f3f6fb;
    --page-gradient-top: #eef3ff;
    --card: #ffffff;
    --text: #1b2430;
    --muted: #6b7280;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --success-bg: #ecfdf3;
    --success-text: #166534;
    --error-bg: #fef2f2;
    --error-text: #991b1b;
    --border: #dbe3ef;
    --header-bg: #0f172a;
    --header-surface: #1e293b;
    --sticky-header-offset: 64px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, var(--page-gradient-top) 0%, var(--bg) 220px, var(--bg) 100%);
    min-height: 100vh;
}

.page {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 16px 24px;
}

.site-header {
    background: var(--header-bg);
    color: #e2e8f0;
    border-bottom: 1px solid var(--header-surface);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

.site-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.brand {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Logo : hauteur calee sur le header, ratio conserve. Largeur max pour eviter
   qu'un logo tres large ne casse la nav. */
.brand-logo {
    display: block;
    height: 32px;
    max-height: 32px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
}

.brand-text {
    font-size: 1.05rem;
    letter-spacing: 1px;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.main-nav a {
    color: #cbd5e1;
    padding: 6px 8px;
    border-radius: 6px;
}

.main-nav a:hover {
    background: var(--header-surface);
    color: #ffffff;
    text-decoration: none;
}

.main-nav a.is-active {
    background: var(--header-surface);
    color: #ffffff;
}

details.dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

details.dropdown > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
    color: #cbd5e1;
    padding: 6px 8px;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
    min-height: 34px;
}

details.dropdown > summary::-webkit-details-marker {
    display: none;
}

details.dropdown > summary::marker {
    display: none;
}

details.dropdown[open] > summary,
details.dropdown:hover > summary {
    background: var(--header-surface);
    color: #ffffff;
}

details.dropdown > summary.is-active {
    background: var(--header-surface);
    color: #ffffff;
}

details.dropdown .dropdown-content {
    display: block;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--header-bg);
    border: 1px solid var(--header-surface);
    border-radius: 8px;
    padding: 6px;
    min-width: 220px;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.18);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
}

details.dropdown[open] .dropdown-content {
    opacity: 1;
    visibility: visible;
}

details.dropdown .dropdown-content a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: #e2e8f0;
}

details.dropdown .dropdown-content .dropdown-btn {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: #e2e8f0;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

details.dropdown .dropdown-content a:hover {
    background: var(--header-surface);
    color: #ffffff;
    text-decoration: none;
}

details.dropdown .dropdown-content .dropdown-btn:hover {
    background: var(--header-surface);
    color: #ffffff;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
    padding: 18px;
    margin-bottom: 16px;
}

.card-w-560 { max-width: 560px; }
.card-w-620 { max-width: 620px; }
.card-w-720 { max-width: 720px; }
.card-w-980 { max-width: 980px; }
.card-centered { margin: 32px auto; }

.inline-form { display: inline-block; }
.ml-8 { margin-left: 8px; }
.mt-6 { margin-top: 6px; }
.mt-10 { margin-top: 10px; }
.mt-18 { margin-top: 18px; }
.mb-12 { margin-bottom: 12px; }
.mb-0 { margin-bottom: 0; }
.label-spaced { margin: 8px 0 4px; }

h1, h2, h3 {
    margin: 0 0 12px;
}

h3 {
    font-size: 1.05rem;
}

.settings-logo-img {
    max-width: 280px;
    max-height: 120px;
    object-fit: contain;
    vertical-align: middle;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}

.settings-param-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 14px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
}

.settings-param-row--wrap {
    flex-wrap: wrap;
    align-items: center;
    overflow-x: visible;
}

.settings-param-row:last-child {
    margin-bottom: 0;
}

.settings-param-label {
    flex: 0 0 168px;
    min-width: 120px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.25;
}

.settings-param-row .icon-btn {
    flex-shrink: 0;
}

.settings-param-row .inline-form {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
}

.settings-color-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}

.settings-logo-upload-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 1 1 200px;
    min-width: 0;
}

.settings-param-row--stretch {
    align-items: center;
}

.settings-logo-thumb {
    flex: 0 0 auto;
    max-height: 44px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    vertical-align: middle;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    padding: 2px;
}

.settings-file-compact {
    flex: 1 1 160px;
    min-width: 120px;
    max-width: min(280px, 55vw);
    font-size: 13px;
    margin-bottom: 0;
    padding: 6px 8px;
}

.settings-import-form {
    margin-top: 8px;
}

.settings-import-file-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
}

.settings-import-file-row label {
    padding-top: 6px;
}

.settings-import-help {
    font-size: 0.85rem;
    color: var(--muted, #6b7280);
    margin-top: 4px;
}

.settings-import-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0;
}

.settings-import-stat {
    background: #f4f6f9;
    padding: 10px 14px;
    border-radius: 8px;
    min-width: 130px;
    line-height: 1.3;
}

.settings-import-stat strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
}

.settings-import-stat.ok {
    background: #ecfdf5;
}

.settings-import-stat.warn {
    background: #fffbeb;
}

.settings-import-stat.danger {
    background: #fef2f2;
}

.settings-import-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.settings-import-section-title {
    margin-top: 18px;
    margin-bottom: 4px;
}

.settings-import-detail {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    margin-top: 8px;
}

.settings-import-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.settings-import-table th,
.settings-import-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.settings-import-table th {
    background: #f9fafb;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.settings-import-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
}

.settings-import-status.ok { background: #d1fae5; color: #065f46; }
.settings-import-status.skip { background: #fef3c7; color: #92400e; }
.settings-import-status.error { background: #fee2e2; color: #991b1b; }
.settings-import-status.orphan { background: #fed7aa; color: #9a3412; }

.settings-color-input {
    width: 48px;
    height: 36px;
    max-width: none;
    margin-bottom: 0;
    padding: 2px;
    cursor: pointer;
}

.settings-select {
    min-width: 160px;
    max-width: min(320px, 55vw);
    height: 36px;
    margin-bottom: 0;
    /* padding-right elargi pour laisser place au caret SVG de la regle select globale. */
    padding: 6px 28px 6px 10px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: #fff;
    color: var(--text);
}

.subtle {
    color: var(--muted);
}

.top-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: none;
}

.btn-link-primary {
    background: var(--primary);
    color: #fff;
}

.btn-link-primary:hover {
    background: var(--primary-dark);
    color: #fff;
}

.btn-link-secondary {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--border);
}

.btn-link-secondary:hover {
    background: #f8fbff;
    color: var(--primary-dark);
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

.stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.badge {
    display: inline-block;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
}

.badge-filter {
    text-decoration: none;
    cursor: pointer;
}

.badge-filter:hover {
    text-decoration: none;
    background: #dbeafe;
    border-color: #93c5fd;
}

.badge-filter.is-active {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    text-transform: capitalize;
}

.status-badge.status-en_edition {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

.status-badge.status-acheve {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fdba74;
}

.status-badge.status-valide {
    background: #ecfdf3;
    color: #166534;
    border-color: #86efac;
}

.msg {
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid transparent;
}

.msg.error {
    background: var(--error-bg);
    color: var(--error-text);
    border-color: #fecaca;
}

.msg.success {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: #bbf7d0;
}

.msg.info {
    background: #eff6ff;
    color: #1e3a8a;
    border-color: #bfdbfe;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

label .req {
    color: var(--danger, #dc2626);
    font-weight: 700;
    margin-left: 2px;
}

input, select, textarea, button {
    font: inherit;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    display: block;
    width: 100%;
    max-width: 520px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 10px;
    background: #fff;
    margin-bottom: 12px;
}

/* Force tous les <select> natifs a un rendu coherent et identique a notre
   composant .searchable-select-trigger (meme padding, meme caret SVG, meme
   hover). Sans cela, Chrome/Edge ignorent le border-radius et appliquent le
   caret OS, ce qui donne un rendu different selon les pages. */
select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
    cursor: pointer;
    line-height: 1.4;
}

select:hover {
    background-color: #f8fafc;
}

.settings-param-row select,
select.settings-select {
    display: inline-block !important;
    width: auto !important;
    max-width: min(320px, 55vw);
    margin-bottom: 0 !important;
    padding: 6px 28px 6px 10px;
    height: 36px;
    box-sizing: border-box;
}

.settings-param-row input[type="color"],
input.settings-color-input {
    display: inline-block !important;
    width: 48px !important;
    max-width: none !important;
    margin-bottom: 0 !important;
}

.settings-param-row input[type="file"].settings-file-compact {
    display: inline-block;
    width: auto;
    max-width: min(280px, 55vw);
    margin-bottom: 0;
    padding: 6px 8px;
}

button {
    border: 0;
    background: var(--primary);
    color: white;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
}

button:hover {
    background: var(--primary-dark);
}

button[disabled] {
    opacity: 0.72;
    cursor: not-allowed;
}

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

.icon-btn {
    border: 1px solid var(--border);
    background: #fff;
    color: #111827;
    min-width: 34px;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 8px;
    line-height: 1;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.icon-btn:hover,
.icon-btn:focus,
.icon-btn:active {
    background: #f3f4f6;
    text-decoration: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

th, td {
    border-bottom: 1px solid var(--border);
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

/* Utilitaire : empeche le retour a la ligne dans une cellule de tableau.
 * La colonne s'auto-elargit juste ce qu'il faut. Aucun autre changement
 * (police, alignement, etc.). A appliquer sur <th> ET <td> de la colonne. */
.nowrap {
    white-space: nowrap;
}

/* Mode edition : colonne d'actions masquee par defaut sur les listes, revelee
 * par le bouton [data-edit-mode-toggle] qui pose .edit-mode sur la table cible.
 * Voir assets/edit_mode_toggle.js. */
.col-actions {
    display: none;
}

.edit-mode .col-actions {
    display: revert;
}

/* Etat enfonce du bouton de toggle quand le mode edition est actif. */
.icon-btn.is-active {
    background: var(--primary, #2563eb);
    color: #fff;
    border-color: var(--primary, #2563eb);
}

/* ===========================================================
 * Listes paginees : header fixe + liste scrollable
 * Cible la card qui contient la table (clients.php, sites.php).
 * Structure attendue :
 *   <section class="card list-scrollable">
 *     <div class="list-scrollable-head">... titre/recherche ...</div>
 *     <div class="list-scrollable-body">
 *       <table>...</table>
 *     </div>
 *   </section>
 * =========================================================== */
.card.list-scrollable {
    display: flex;
    flex-direction: column;
    /* Hauteur max = viewport - header global - marges raisonnables */
    max-height: calc(100vh - var(--sticky-header-offset) - 48px);
    min-height: 200px;
    overflow: hidden; /* le scroll se fait dans .list-scrollable-body */
}

.list-scrollable-head {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.list-scrollable-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Dans un wrapper scrollable, les <th> sticky doivent se coller au top du
 * wrapper (et non a top:64px = offset du header global de l'app). */
.list-scrollable-body th {
    top: 0;
}

/* Barre de recherche locale a une liste */
.list-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.list-search input[type="search"] {
    flex: 1 1 auto;
    max-width: 360px;
    margin-bottom: 0;
}

.list-search-counter {
    color: var(--muted, #6b7280);
    font-size: 0.9em;
}

/* Ligne filtree (cachee par le filtre) */
.is-filtered-out {
    display: none;
}

/* ===========================================================
 * Combobox filtrable (searchable_select.js)
 * Remplace visuellement un <select data-searchable> par un trigger +
 * dropdown avec barre de recherche live. Le select natif est conserve
 * dans le DOM (cache) pour la soumission du formulaire.
 * =========================================================== */
.searchable-select-hidden {
    display: none !important;
}

.searchable-select-ui {
    position: relative;
    margin-bottom: 12px;
    max-width: 520px;
}

.searchable-select-trigger {
    /* Aligne avec le style des <select> natifs definis plus haut dans le fichier.
       Le caret est dessine via background-image SVG (identique au chevron natif). */
    display: flex;
    width: 100%;
    max-width: 520px;
    align-items: center;
    padding: 9px 32px 9px 10px; /* place a droite pour le caret SVG */
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    line-height: 1.4;
    margin-bottom: 12px;
    -webkit-appearance: none;
    appearance: none;
    min-height: calc(1em * 1.4 + 18px + 2px);
}

.searchable-select-trigger:hover {
    background-color: #f8fafc;
}

/* Meme outline focus que les select/input natifs (voir regle ~ligne 493). */
.searchable-select-trigger:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

.searchable-select-trigger[aria-expanded="true"] {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.searchable-select-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le span Unicode est cache : le caret est dessine par background-image SVG. */
.searchable-select-arrow {
    display: none;
}

.searchable-select-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-width: 520px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    z-index: 100;
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow: hidden;
}

/* Respecte l'attribut [hidden] meme avec un display:flex declare. */
.searchable-select-popup[hidden] {
    display: none;
}

.searchable-select-search {
    margin: 8px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
}

.searchable-select-options {
    flex: 1 1 auto;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
}

.searchable-select-option {
    padding: 8px 12px;
    cursor: pointer;
    line-height: 1.3;
}

.searchable-select-option:hover {
    background: #f1f5f9;
}

.searchable-select-option[aria-selected="true"] {
    background: var(--primary, #2563eb);
    color: #fff;
}

.searchable-select-option[aria-selected="true"]:hover {
    background: var(--primary, #2563eb);
    filter: brightness(0.95);
}

.searchable-select-option[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

th {
    background: #eef2f7;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 12px;
    border-bottom: 1px solid #cfd8e3;
    position: sticky;
    top: var(--sticky-header-offset);
    z-index: 20;
}

tbody tr:hover td {
    background: #f8fbff;
}

/* Lignes cliquables (cf. assets/list_row_link.js). Hover plus marque que le
   default + curseur pointer pour signaler l'affordance. Specificite assez
   haute pour passer outre `tbody tr:hover td` au-dessus. */
tbody tr[data-row-link] {
    cursor: pointer;
}

tbody tr[data-row-link]:hover td {
    background: var(--page-gradient-top, #eef3ff);
}

/* Focus clavier (Tab) : meme rendu que pour un bouton/lien standard, sans
   alterer la mise en page de la ligne (outline ne pousse pas le contenu). */
tbody tr[data-row-link]:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: -2px;
}

.empty-state-row td {
    color: var(--muted);
    text-align: center;
    font-style: italic;
    background: #fff;
}

td form {
    margin: 0;
}

.site-footer {
    border-top: 1px solid var(--border);
    background: #ffffff;
    margin-top: 24px;
}

.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 6px;
}

/* Coordonnées GPS (sites_create.php / sites_edit.php) */
.gps-fieldset {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px 14px;
    margin: 6px 0 0;
}

.gps-fieldset > legend {
    padding: 0 6px;
    font-size: 0.95em;
    color: var(--text-muted, #555);
}

.gps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .gps-grid { grid-template-columns: 1fr; }
}

.gps-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

/* Arborescence (édition modèle de rapport) : replis sans changer le thème global */
.tpl-tree-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.tpl-tree-toggle-spacer {
    display: inline-flex;
    width: 34px;
    min-width: 34px;
    flex-shrink: 0;
}

.tpl-tree-toggle {
    flex-shrink: 0;
    font-weight: 700;
    line-height: 1;
}

.tpl-tree-title-link {
    text-decoration: none;
    color: inherit;
    min-width: 0;
    word-break: break-word;
}

.tpl-tree-title-link:hover {
    text-decoration: underline;
}

.tpl-section-heading-with-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.tpl-section-heading-title {
    margin: 0;
}

.tpl-tree-first-cell-inner {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.tpl-drag-handle {
    display: none;
    flex-shrink: 0;
    width: 22px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
    letter-spacing: -2px;
}

.tpl-reorder-mode .tpl-drag-handle {
    display: inline-flex;
}

.tpl-reorder-mode .tpl-tree-row-dragging {
    opacity: 0.65;
}

.tpl-drop-target td {
    box-shadow: inset 0 3px 0 0 var(--primary);
    background: #f0f7ff;
}

/* Mode reparentage (drop "comme enfant") : fond vert pale + encadrement epais
 * uniquement autour de la LIGNE (sans verticales entre les cellules). */
.tpl-drop-target.tpl-drop-target-as-child > td {
    background: rgba(4, 120, 87, 0.12);
    box-shadow: inset 0 2px 0 #047857, inset 0 -2px 0 #047857;
}
.tpl-drop-target.tpl-drop-target-as-child > td:first-child {
    box-shadow:
        inset 0 2px 0 #047857,
        inset 0 -2px 0 #047857,
        inset 2px 0 0 #047857;
}
.tpl-drop-target.tpl-drop-target-as-child > td:last-child {
    box-shadow:
        inset 0 2px 0 #047857,
        inset 0 -2px 0 #047857,
        inset -2px 0 0 #047857;
}

/* Hint pendant le reorder : afficher l aide en bas de la fenetre */
body.tpl-reorder-active::after {
    content: "Glisser-deposer : meme niveau = reordonner | autre parent = devient enfant | Alt = forcer 'comme enfant'";
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: #1f2937;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 2000;
}

.tpl-reorder-toggle.is-active {
    background: #e8efff;
    border-color: var(--primary);
    color: var(--primary-dark);
}

/* En-tete rapport (site_control_report_view) */
.report-hero-card {
    position: relative;
    padding-left: 20px;
}

.report-hero-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 4px;
    border-radius: 2px;
    background: var(--primary);
}

.report-hero-card > .msg {
    margin-top: 0;
}

.report-hero {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.report-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    width: 100%;
    /* Reference de positionnement pour .site-status-control (en absolu
     * pour etre pile au centre du hero, cf bloc dedie plus bas). */
    position: relative;
}

.report-hero-title-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    min-width: 0;
    flex: 1 1 auto;
}

.report-hero-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
}

.report-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.report-status-badge--en_edition {
    background: #fff4eb;
    color: #8a4100;
    border-color: #ffd0a8;
}

.report-status-badge--acheve {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

.report-status-badge--valide {
    background: #f0f7f1;
    color: #1d5c2e;
    border-color: #b8dfc4;
}

.report-hero-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 14px;
    margin-left: auto;
    flex: 0 1 auto;
}

.report-hero-back {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.report-hero-back:hover {
    color: var(--primary);
    text-decoration: none;
}

.report-hero-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.report-hero-action-form {
    margin: 0;
    display: inline-flex;
}

.report-hero-actions .icon-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 7px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    color: #2d2d2d;
}

.report-hero-actions .icon-btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.report-hero-actions .icon-btn--primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

.report-hero-actions .icon-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

.report-hero-actions .icon-btn--ghost:hover {
    background: #f3f4f6;
    border-color: var(--border);
    color: #374151;
}

.report-action-icon {
    display: block;
}

.report-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 4px;
    width: 100%;
}

.report-session-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
}

.report-meta-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    background: #f5f5f5;
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text);
}

.report-meta-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.report-hero-locked {
    margin: 12px 0 0;
    font-size: 13px;
}

.report-status-badge--liste {
    background: #f5f5f5;
    color: #444;
    border-color: #e0e0e0;
    text-transform: none;
    letter-spacing: 0.02em;
}

.report-hero-stats {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    width: 100%;
}

.report-hero-jobs {
    margin: 10px 0 0;
    font-size: 12px;
}

.report-hero-actions a.icon-btn {
    text-decoration: none;
    box-sizing: border-box;
}

.list-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 8px;
}

.list-page-header h1 {
    margin: 0;
}

.list-page-header .report-hero-actions .icon-btn,
.list-page-header .report-hero-actions a.icon-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 7px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

.list-page-header .report-hero-actions a.icon-btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.list-page-header .report-hero-actions a.icon-btn--primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

.tree-section-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.tree-section-nav .tree-all-sections-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

.tree-section-nav-label {
    font-size: 14px;
    font-weight: 500;
}

.inspection-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.inspection-heading-title {
    margin: 0;
}

.inspection-heading-sep {
    color: var(--border, #d0d0d0);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    user-select: none;
}

.inspection-heading .tree-all-sections-btn {
    flex-shrink: 0;
}

.inspection-heading button.tree-all-sections-btn {
    font: inherit;
    cursor: pointer;
}

.hero-file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Indentation arborescence via data-tree-depth (evite les `style="padding-left:"`
 * inline interdits par CSP `style-src 'self'`). 21 niveaux (0..20), au-dela
 * troncature cote PHP via min(20, $depth). 18px par niveau. */
[data-tree-depth="0"]  { padding-left: 0px; }
[data-tree-depth="1"]  { padding-left: 18px; }
[data-tree-depth="2"]  { padding-left: 36px; }
[data-tree-depth="3"]  { padding-left: 54px; }
[data-tree-depth="4"]  { padding-left: 72px; }
[data-tree-depth="5"]  { padding-left: 90px; }
[data-tree-depth="6"]  { padding-left: 108px; }
[data-tree-depth="7"]  { padding-left: 126px; }
[data-tree-depth="8"]  { padding-left: 144px; }
[data-tree-depth="9"]  { padding-left: 162px; }
[data-tree-depth="10"] { padding-left: 180px; }
[data-tree-depth="11"] { padding-left: 198px; }
[data-tree-depth="12"] { padding-left: 216px; }
[data-tree-depth="13"] { padding-left: 234px; }
[data-tree-depth="14"] { padding-left: 252px; }
[data-tree-depth="15"] { padding-left: 270px; }
[data-tree-depth="16"] { padding-left: 288px; }
[data-tree-depth="17"] { padding-left: 306px; }
[data-tree-depth="18"] { padding-left: 324px; }
[data-tree-depth="19"] { padding-left: 342px; }
[data-tree-depth="20"] { padding-left: 360px; }

@media (max-width: 640px) {
    .report-hero-toolbar {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    /* Sur mobile, le toggle revient en flow normal pour eviter qu'il
     * chevauche le title-block ou la toolbar quand l'espace horizontal
     * devient trop etroit pour son centrage absolu. */
    .site-status-control {
        position: static;
        transform: none;
        margin: 8px auto 0;
    }

    .report-hero-title {
        font-size: 1.25rem;
    }

    /* Indentation arborescence reduite a 12px/niveau (vs 18px en desktop)
       pour reserver plus d'espace horizontal aux widgets de criticite et
       de saisie qui doivent rester sur une seule ligne sur tablette. */
    [data-tree-depth="1"]  { padding-left: 12px; }
    [data-tree-depth="2"]  { padding-left: 24px; }
    [data-tree-depth="3"]  { padding-left: 36px; }
    [data-tree-depth="4"]  { padding-left: 48px; }
    [data-tree-depth="5"]  { padding-left: 60px; }
    [data-tree-depth="6"]  { padding-left: 72px; }
    [data-tree-depth="7"]  { padding-left: 84px; }
    [data-tree-depth="8"]  { padding-left: 96px; }
    [data-tree-depth="9"]  { padding-left: 108px; }
    [data-tree-depth="10"] { padding-left: 120px; }
    [data-tree-depth="11"] { padding-left: 132px; }
    [data-tree-depth="12"] { padding-left: 144px; }
    [data-tree-depth="13"] { padding-left: 156px; }
    [data-tree-depth="14"] { padding-left: 168px; }
    [data-tree-depth="15"] { padding-left: 180px; }
    [data-tree-depth="16"] { padding-left: 192px; }
    [data-tree-depth="17"] { padding-left: 204px; }
    [data-tree-depth="18"] { padding-left: 216px; }
    [data-tree-depth="19"] { padding-left: 228px; }
    [data-tree-depth="20"] { padding-left: 240px; }
}

/* ===========================================================
 * CARTE DES SITES (Leaflet) - index.php
 * =========================================================== */
.site-map {
    position: relative; /* ancre les toasts (.site-map-toast-host) en absolu */
    width: 100%;
    height: 520px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #e7ecf2; /* gris doux pendant le chargement des tuiles */
    overflow: hidden;
    /* z-index local pour eviter que les marqueurs Leaflet ne passent au-dessus
       du header sticky de l'app. */
    z-index: 0;
    position: relative;
}

.map-legend {
    margin-top: 8px;
    font-size: 13px;
}

/* Formulaire de filtrage en mode admin/tech : aligne le label et le combobox
   sur une seule ligne, sans le margin-bottom des selects globaux qui creerait
   un decalage. */
.map-filter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.map-filter-form .searchable-select-ui,
.map-filter-form select {
    margin-bottom: 0;
    min-width: 240px;
}

.map-filter-form .searchable-select-trigger {
    margin-bottom: 0;
}

.map-filter-label {
    font-weight: 600;
    color: var(--text);
}

/* Tooltip permanent affiche au-dessus de chaque marqueur. Cliquable :
   redirige vers la fiche du site (handler attache cote JS). */
.site-map-tooltip {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.site-map-tooltip:hover {
    background: var(--page-gradient-top, #eef3ff);
    border-color: var(--primary, #2563eb);
}

/* Leaflet : la fleche du tooltip par defaut est un triangle CSS. Notre style
   custom retire la fleche (pas necessaire avec un fond blanc opaque). */
.site-map-tooltip.leaflet-tooltip-top:before {
    display: none;
}

/* Bouton "recentrer" la carte (control Leaflet custom, position topleft).
   Aligne avec les boutons +/- du zoom : meme taille 30x30, meme fond blanc,
   meme hover gris. */
.site-map-recenter-control {
    margin-top: 10px;
}

.site-map-recenter-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #fff;
    color: #475569;
    text-decoration: none;
    cursor: pointer;
}

.site-map-recenter-btn:hover {
    background: #f1f5f9;
    color: var(--primary, #2563eb);
}

/* Toggle "afficher / masquer les etiquettes". Visible pour tous les utilisateurs
   (pas reserve admin). Meme dimensions/comportement que les autres boutons
   leaflet-bar pour l'alignement visuel.
   - is-active = etiquettes visibles (etat par defaut au chargement)
   - sans is-active = etiquettes masquees */
.site-map-labels-toggle-control {
    margin-top: 10px;
}

.site-map-labels-toggle-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #fff;
    color: #1f2937;
    cursor: pointer;
    text-decoration: none;
}

.site-map-labels-toggle-btn:hover {
    background-color: #f1f5f9;
    color: var(--primary, #2563eb);
}

.site-map-labels-toggle-btn.is-active {
    background-color: var(--primary, #2563eb) !important;
    color: #fff !important;
}

.site-map-labels-toggle-btn.is-active:hover {
    background-color: var(--primary-hover, #1d4ed8) !important;
    color: #fff !important;
}

/* MODE EDITION (admin) : bouton toggle, halo marker, popup de confirmation, toast.
   Active uniquement pour les administrateurs (PHP gere la visibilite cote
   serveur, le CSS ici ne fait que styler ce qui existe dans le DOM). */
.site-map-edit-toggle-control {
    margin-top: 10px;
}

.site-map-edit-toggle-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #fff;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
}

.site-map-edit-toggle-btn:hover {
    background-color: #f1f5f9;
    color: var(--primary, #2563eb);
}

/* !important : .leaflet-bar a (specificite 0,1,1) peut prendre le pas
   selon l'ordre de chargement des feuilles. On force la couleur active. */
.site-map-edit-toggle-btn.is-active {
    background-color: #f97316 !important;
    color: #fff !important;
}

.site-map-edit-toggle-btn.is-active:hover {
    background-color: #ea580c !important;
    color: #fff !important;
}

/* Quand le mode edition est actif, on signale visuellement chaque marker
   draggable : curseur grab + halo orange autour de l'icone SVG. */
.site-map.is-edit-mode .leaflet-marker-icon.is-editable {
    cursor: grab;
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.85));
}

.site-map.is-edit-mode .leaflet-marker-icon.is-editable:active {
    cursor: grabbing;
}

/* Popup de confirmation apres un drop : sobre, focus sur les 2 coords. */
.site-map-confirm-popup .leaflet-popup-content {
    margin: 12px 14px;
    min-width: 240px;
}

.site-map-confirm-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #0f172a;
}

.site-map-confirm-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    margin-bottom: 4px;
    color: #475569;
}

.site-map-confirm-row code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: #0f172a;
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 4px;
}

.site-map-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.site-map-confirm-actions button {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border, #cbd5e1);
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}

.site-map-confirm-actions button:hover {
    background: #f1f5f9;
}

.site-map-confirm-actions .site-map-confirm-save {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.site-map-confirm-actions .site-map-confirm-save:hover {
    background: #15803d;
    border-color: #15803d;
}

.site-map-confirm-actions button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Lien "Modifier les coordonnees" dans le popup standard (admin only). */
.site-map-popup-edit {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #f97316;
}

/* Toasts : empiles dans un host en bas a droite de la carte. */
.site-map-toast-host {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.site-map-toast {
    min-width: 200px;
    max-width: 320px;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
    font-size: 13px;
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.site-map-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.site-map-toast.is-success {
    background: #16a34a;
}

.site-map-toast.is-error {
    background: #dc2626;
}

/* Marqueurs custom (divIcon) colores selon le statut du dernier rapport
   valide. La couleur est portee par `color: ...;` que le SVG inline lit via
   `fill="currentColor"`. */
.site-marker-pin {
    background: transparent !important;
    border: 0 !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    line-height: 0;
}

.site-marker-pin.is-ok {
    color: #16a34a; /* vert success */
}

.site-marker-pin.is-panne {
    color: #dc2626; /* rouge danger */
}

.site-marker-pin.is-unknown {
    color: #9ca3af; /* gris neutre */
}

/* Legende sous la carte : pastilles colorees en regard du libelle. */
.map-legend-status {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.map-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #1f2937;
    flex: 0 0 auto;
}

.map-legend-dot.is-ok {
    background: #16a34a;
}

.map-legend-dot.is-panne {
    background: #dc2626;
}

.map-legend-dot.is-unknown {
    background: #9ca3af;
}

/* =====================================================================
 * Etat operationnel d'un site (sites.operational_status).
 *
 * Deux composants reutilisables :
 *   - .site-status-badge : pastille de lecture (liste sites, fiche site
 *     en mode client read-only). Tri-state (ok / panne / unknown).
 *   - .site-status-control : segmented control compact 2 boutons
 *     OK / Panne place dans la toolbar de site_controls.php (canWrite).
 *     L'etat 'unknown' n'est jamais selectionnable manuellement (etat
 *     initial automatique).
 * ===================================================================== */

/* --- Badge en lecture seule -------------------------------------- */
.site-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.site-status-badge.is-ok {
    background: #f0f7f1;
    color: #1d5c2e;
    border-color: #b8dfc4;
}

.site-status-badge.is-panne {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.site-status-badge.is-unknown {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.site-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* --- Segmented control 2 boutons (hero, centre absolu) ---------- */
/* Positionnement en absolu au centre de .report-hero-top : le control
 * est equidistant des bords du hero, independamment des largeurs du
 * title-block (a gauche) et de la toolbar (a droite, ancree via son
 * propre margin-left:auto). On ne peut pas centrer en pur flex car le
 * margin-left:auto de la toolbar desactive justify-content:space-between
 * du parent (regle CSS flex sur les marges auto). En mobile (< 640px),
 * la toolbar passe en width:100% et le toggle revient en flow normal
 * (cf media query plus bas). */
.site-status-control {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
    line-height: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.site-status-control[data-busy="1"] {
    opacity: 0.6;
    pointer-events: none;
}

.site-status-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted, #64748b);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.site-status-control .site-status-btn + .site-status-btn {
    border-left: 1px solid var(--border, #cbd5e1);
}

.site-status-btn:hover:not(:disabled):not(.is-active) {
    background: #f1f5f9;
    color: var(--text, #1f2937);
}

.site-status-btn:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: -2px;
}

.site-status-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.site-status-btn.is-ok.is-active {
    background: #16a34a;
    color: #fff;
}

.site-status-btn.is-panne.is-active {
    background: #dc2626;
    color: #fff;
}

/* Picto oeil : afficher / masquer un mot de passe.
   Le wrap reprend la largeur max et le margin-bottom de l'input afin que
   le bouton oeil (positionne en absolute) reste colle au bord droit du
   champ et que l'espacement vertical reste identique a avant. */
.pwd-toggle-wrap {
    position: relative;
    display: block;
    max-width: 520px;
    margin-bottom: 12px;
}

.pwd-toggle-wrap input[type="password"],
.pwd-toggle-wrap input[type="text"] {
    padding-right: 2.4rem;
    margin-bottom: 0;
}

.pwd-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0.25rem;
    margin: 0;
    cursor: pointer;
    color: var(--muted, #64748b);
    line-height: 0;
    border-radius: 4px;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.pwd-toggle-btn:hover {
    color: var(--text, #1f2937);
    background: rgba(15, 23, 42, 0.05);
}

.pwd-toggle-btn:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
    color: var(--text, #1f2937);
}

.pwd-toggle-btn[aria-pressed="true"] {
    color: var(--primary, #2563eb);
}

.pwd-toggle-icon {
    display: block;
    pointer-events: none;
}