:root {
    /* Palette de l'interface, valeurs du thème clair. themes.css redéfinit ces
       variables pour les autres thèmes : ne jamais écrire de couleur en dur
       dans les règles ci-dessous, toujours passer par une variable. */
    --app-accent: #5b7773;
    --app-accent-rgb: 91, 119, 115;
    --app-accent-texte: #5b7773;
    --app-secondaire: #849895;
    --app-secondaire-rgb: 132, 152, 149;
    --app-secondaire-texte: #849895;
    --app-texte-sur-accent: #fff;
    --app-texte-secondaire: #6c757d;
    --app-texte-discret: #adb5bd;
    --app-surface-1: #fff;
    --app-surface-2: #f1f3f2;
    --app-surface-sidebar: #f8f9fa;
    --app-melange: white;
    --app-bordure: #dee2e6;
    --app-champ-bordure: #d7dbdd;
    --app-champ-bordure-survol: #b9c1c4;
    --app-champ-ombre: rgba(16, 24, 32, 0.04);
    --app-ombre-panneau: rgba(0, 0, 0, 0.06);
    --app-inactif-fond: #e9ecef;
    --app-inactif-bordure: #ced4da;
    --app-inactif-plein: #ced4da;
    --app-neutre-survol: #495057;
    --app-neutre-fond: #6c757d;
    --app-contour-selection: #212529;
    --app-danger: #dc3545;
    --app-statut-a-faire-fond: #6c757d;
    --app-statut-a-faire-texte: #fff;
    --app-statut-en-cours-fond: #ffc107;
    --app-statut-en-cours-texte: #000;
    --app-statut-fait-fond: #198754;
    --app-statut-fait-texte: #fff;
    --app-statut-bloque-fond: #dc3545;
    --app-statut-bloque-texte: #fff;
    --app-statut-non-utilise-fond: #adb5bd;
    --app-statut-non-utilise-texte: #000;
    --app-statut-en-progres-fond: #ff8800;
    --app-statut-en-progres-texte: #000;
    --app-statut-archive-fond: #6f42c1;
    --app-statut-archive-texte: #fff;
    --app-type-feature-bordure: #93c5fd;
    --app-type-feature-texte: #1d4ed8;
    --app-type-bug-bordure: #fca5a5;
    --app-type-bug-texte: #b91c1c;
    --app-type-specifique-bordure: #c4b5fd;
    --app-type-specifique-texte: #6d28d9;
    --app-deadline-vert-fond: #dcfce7;
    --app-deadline-vert-texte: #15803d;
    --app-deadline-jaune-fond: #fef9c3;
    --app-deadline-jaune-texte: #a16207;
    --app-deadline-orange-fond: #ffedd5;
    --app-deadline-orange-texte: #c2410c;
    --app-deadline-rouge-fond: #fee2e2;
    --app-deadline-rouge-texte: #b91c1c;
    --app-planning-en-cours: #ff8800;
    --app-planning-a-faire: #ffc107;
    --app-planning-bloque: #dc3545;

    --bs-primary: var(--app-accent);
    --bs-primary-rgb: var(--app-accent-rgb);
    --bs-secondary: var(--app-secondaire);
    --bs-secondary-rgb: var(--app-secondaire-rgb);
    --bs-body-color: #343a40;
    --bs-body-bg: #ffffff;
    --bs-link-color: var(--app-accent-texte);
    --bs-link-hover-color: color-mix(in srgb, var(--app-accent-texte) 85%, black);
}

body {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.navbar-brand-logo {
    height: 32px;
    width: auto;
}

a {
    color: var(--bs-link-color);
}

a:hover {
    color: var(--bs-link-hover-color);
}

.btn-primary {
    --bs-btn-color: var(--app-texte-sur-accent);
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-color: var(--app-texte-sur-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-accent) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-accent) 80%, black);
    --bs-btn-active-color: var(--app-texte-sur-accent);
    --bs-btn-active-bg: color-mix(in srgb, var(--app-accent) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-accent) 70%, black);
    --bs-btn-disabled-bg: var(--app-accent);
    --bs-btn-disabled-border-color: var(--app-accent);
    --bs-btn-focus-shadow-rgb: var(--app-accent-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-accent-texte);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-color: var(--app-texte-sur-accent);
    --bs-btn-hover-bg: var(--app-accent);
    --bs-btn-hover-border-color: var(--app-accent);
    --bs-btn-active-color: var(--app-texte-sur-accent);
    --bs-btn-active-bg: var(--app-accent);
    --bs-btn-active-border-color: var(--app-accent);
    --bs-btn-focus-shadow-rgb: var(--app-accent-rgb);
}

.btn-secondary {
    --bs-btn-color: var(--app-texte-sur-accent);
    --bs-btn-bg: var(--app-secondaire);
    --bs-btn-border-color: var(--app-secondaire);
    --bs-btn-hover-color: var(--app-texte-sur-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-secondaire) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-secondaire) 80%, black);
    --bs-btn-active-color: var(--app-texte-sur-accent);
    --bs-btn-active-bg: color-mix(in srgb, var(--app-secondaire) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-secondaire) 70%, black);
    --bs-btn-disabled-bg: var(--app-secondaire);
    --bs-btn-disabled-border-color: var(--app-secondaire);
    --bs-btn-focus-shadow-rgb: var(--app-secondaire-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--app-secondaire-texte);
    --bs-btn-border-color: var(--app-secondaire);
    --bs-btn-hover-color: var(--app-texte-sur-accent);
    --bs-btn-hover-bg: var(--app-secondaire);
    --bs-btn-hover-border-color: var(--app-secondaire);
    --bs-btn-active-color: var(--app-texte-sur-accent);
    --bs-btn-active-bg: var(--app-secondaire);
    --bs-btn-active-border-color: var(--app-secondaire);
    --bs-btn-focus-shadow-rgb: var(--app-secondaire-rgb);
}

.bg-primary {
    background-color: var(--app-accent) !important;
}

.bg-secondary {
    background-color: var(--app-secondaire) !important;
}

.text-primary {
    color: var(--app-accent-texte) !important;
}

.text-secondary {
    color: var(--app-secondaire-texte) !important;
}

.border-primary {
    border-color: var(--app-accent) !important;
}

.border-secondary {
    border-color: var(--app-secondaire) !important;
}

.progress-bar {
    background-color: var(--app-accent);
}

.form-control,
.form-select {
    border-radius: 8px;
    border-color: var(--app-champ-bordure);
    padding: 0.5rem 0.85rem;
    box-shadow: 0 1px 2px var(--app-champ-ombre);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control-sm,
.form-select-sm {
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
}

.form-control::placeholder {
    color: var(--app-texte-discret);
}

.form-control:hover,
.form-select:hover {
    border-color: var(--app-champ-bordure-survol);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--app-accent-rgb), 0.2);
}

.form-check-input:checked {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}

.form-check-input:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--app-accent-rgb), 0.25);
}

.nav-tabs .nav-link.active {
    color: var(--app-accent-texte);
}

.section-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.section-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.6rem;
    min-width: 8rem;
    height: 2.75rem;
    box-sizing: border-box;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 10px 10px 0 0;
    background-color: var(--app-surface-2);
    color: var(--app-texte-secondaire);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}

.section-tab-content {
    display: contents;
}

.section-tab.active {
    position: relative;
    z-index: 1;
    background-color: var(--app-surface-1);
    color: var(--app-accent-texte);
    border: 1px solid var(--app-bordure);
    border-bottom-color: var(--app-surface-1);
    border-radius: 10px 10px 0 0;
}

.tab-content {
    position: relative;
    margin-top: -1px;
    background-color: var(--app-surface-1);
    border: 1px solid var(--app-bordure);
    border-radius: 10px;
    box-shadow: 0 4px 10px var(--app-ombre-panneau);
    padding: 1.25rem;
}

.section-tabs:has(> li:first-child > .section-tab.active) + .tab-content {
    border-top-left-radius: 0;
}

.table {
    --bs-table-border-color: transparent;
}

.table > tbody > tr:nth-child(even) > * {
    --bs-table-bg: var(--app-surface-2);
}

.section-tab__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.section-tab__blocked-icon {
    color: var(--app-danger);
}

.section-tab__gauge {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: color-mix(in srgb, var(--app-accent) 15%, var(--app-melange));
    border: 1px solid color-mix(in srgb, var(--app-accent) 25%, var(--app-melange));
    overflow: hidden;
    flex-shrink: 0;
}

.section-tab__gauge-fill {
    display: block;
    height: 4px;
    border-radius: 2px;
    background-color: var(--app-accent);
}

.section-tab__gauge--non-utilisee {
    background-color: var(--app-inactif-fond);
    border-color: var(--app-inactif-bordure);
}

.item-rows > turbo-frame {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
}

.item-rows > turbo-frame:nth-of-type(even) {
    background-color: var(--app-surface-2);
}

.item-rows > turbo-frame > form {
    display: contents;
}

.item-row__label {
    flex: 0 0 28%;
}

.item-row__value {
    flex: 1 1 auto;
    min-width: 0;
}

.item-row__statut {
    flex: 0 0 8rem;
}

.item-row__audit {
    flex: 0 0 11rem;
    font-size: 0.75rem;
}

.statut-select {
    border: none;
    font-weight: 500;
    cursor: pointer;
}

.statut-select--a_faire,
.statut-option--a_faire {
    background-color: var(--app-statut-a-faire-fond);
    color: var(--app-statut-a-faire-texte);
}

.statut-select--en_cours,
.statut-option--en_cours {
    background-color: var(--app-statut-en-cours-fond);
    color: var(--app-statut-en-cours-texte);
}

.statut-select--fait,
.statut-option--fait {
    background-color: var(--app-statut-fait-fond);
    color: var(--app-statut-fait-texte);
}

.statut-select--bloque,
.statut-option--bloque {
    background-color: var(--app-statut-bloque-fond);
    color: var(--app-statut-bloque-texte);
}

.statut-select--non_utilise,
.statut-option--non_utilise {
    background-color: var(--app-statut-non-utilise-fond);
    color: var(--app-statut-non-utilise-texte);
}

.statut-select--en_progres,
.statut-option--en_progres {
    background-color: var(--app-statut-en-progres-fond);
    color: var(--app-statut-en-progres-texte);
}

.statut-select--archive,
.statut-option--archive {
    background-color: var(--app-statut-archive-fond);
    color: var(--app-statut-archive-texte);
}

.item-rows > turbo-frame:has(.statut-select--non_utilise) {
    opacity: 0.55;
}

.item-row__groupe {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-secondaire-texte);
    line-height: 1.2;
    margin-bottom: 0.05rem;
}

.type-select {
    font-weight: 500;
    cursor: pointer;
    background-color: var(--app-surface-1);
}

.type-select--feature {
    border: 1px solid var(--app-type-feature-bordure);
    color: var(--app-type-feature-texte);
}

.type-select--bug {
    border: 1px solid var(--app-type-bug-bordure);
    color: var(--app-type-bug-texte);
}

.type-select--specifique {
    border: 1px solid var(--app-type-specifique-bordure);
    color: var(--app-type-specifique-texte);
}

.badge {
    padding: 0.45em 0.85em;
}

.badge--non-utilisee {
    background-color: var(--app-inactif-fond);
    color: var(--app-texte-secondaire);
    border: 1px solid var(--app-inactif-bordure);
}

.projets-grid--compacte {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.projets-grid--compacte .card {
    margin-bottom: 0;
    height: 150px;
    overflow: hidden;
}

.carte-projet__membre-initiales {
    display: none;
}

.projets-grid--compacte .carte-projet__badges-sections,
.projets-grid--compacte .carte-projet__pourcentage {
    display: none;
}

.projets-grid--compacte .carte-projet__mois-installation {
    display: block;
}

.carte-projet__stade-pastille {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.25rem;
}

.projets-grid--compacte .carte-projet__stade {
    display: none;
}

.carte-projet__ratio-taches-ligne {
    display: none;
}

.projets-grid--compacte .carte-projet__ratio-taches-ligne {
    display: block;
}

.projets-grid--compacte .carte-projet__ratio-taches {
    display: none;
}

.projets-grid--compacte .carte-projet__badges--nombreux .carte-projet__membre-nom {
    display: none;
}

.projets-grid--compacte .carte-projet__badges--nombreux .carte-projet__membre-initiales {
    display: inline;
}

.vue-toggle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3px;
    width: 2.25rem;
    height: 2.25rem;
    padding: 7px;
    background-color: var(--app-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

.vue-toggle__carre {
    display: block;
    background-color: var(--app-texte-sur-accent);
    border-radius: 2px;
}

.vue-toggle--compacte .vue-toggle__carre:nth-child(2),
.vue-toggle--compacte .vue-toggle__carre:nth-child(4) {
    display: none;
}

.vue-toggle--compacte .vue-toggle__carre:nth-child(1),
.vue-toggle--compacte .vue-toggle__carre:nth-child(3) {
    grid-column: 1 / -1;
}

.card--cloture {
    opacity: 0.6;
}

.card--teinte-projet {
    background-color: color-mix(in srgb, var(--app-accent) 5%, var(--app-melange));
}

.item-row__fichier {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.item-row__fichier-apercu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.item-row__fichier-miniature {
    height: 32px;
    width: auto;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.item-row__fichier-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 12rem;
}

.item-row__fichier-apercu > i {
    flex-shrink: 0;
}

.item-row__fichier-remplacer,
.item-row__fichier-supprimer {
    flex-shrink: 0;
}

.item-row__entries-frame {
    display: block;
    flex-basis: 100%;
}

.item-row__entries-table {
    margin-bottom: 0.5rem;
}

.app-layout {
    align-items: stretch;
}

.app-sidebar {
    flex: 0 0 240px;
    padding: 1.25rem 0.75rem;
    background-color: var(--app-surface-sidebar);
    border-right: 1px solid var(--app-bordure);
    min-height: calc(100vh - 56px);
}

.app-sidebar__link {
    display: block;
    padding: 0.45rem 0.75rem;
    margin-bottom: 0.1rem;
    border-radius: 6px;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 0.925rem;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-sidebar__link i {
    margin-right: 0.4rem;
    opacity: 0.7;
}

.app-sidebar__link-icone {
    width: 1em;
    height: 1em;
    object-fit: contain;
    margin-right: 0.4rem;
    opacity: 0.7;
    vertical-align: -0.125em;
}

.app-sidebar__link:hover {
    background-color: color-mix(in srgb, var(--app-accent) 8%, var(--app-melange));
    color: var(--app-accent-texte);
    text-decoration: none;
}

.app-sidebar__link--active {
    background-color: color-mix(in srgb, var(--app-accent) 15%, var(--app-melange));
    color: var(--app-accent-texte);
    font-weight: 600;
    border-left-color: var(--app-accent);
}

.app-sidebar__link--all {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 500;
    border-bottom: 1px solid var(--app-bordure);
    border-radius: 0;
}

.app-sidebar__link--perso {
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.app-sidebar__heading {
    padding: 0 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-secondaire-texte);
}

.app-sidebar__clients {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-content {
    min-width: 0;
}

.membre-tab-li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.75rem;
    box-sizing: border-box;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 10px 10px 0 0;
    background-color: color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 14%, var(--app-melange));
}

.membre-tab-li:has(.membre-tab.active) {
    position: relative;
    z-index: 1;
    background-color: color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 14%, var(--app-melange));
    border: 1px solid var(--app-bordure);
    border-bottom-color: color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 14%, var(--app-melange));
}

.membre-tab {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: none;
    border-radius: 0;
}

.membre-tab__initiales {
    display: none;
}

.section-tabs--compact .membre-tab {
    min-width: 2rem;
}

.section-tabs--compact .membre-tab__nom {
    display: none;
}

.section-tabs--compact .membre-tab__initiales {
    display: inline;
}

.section-tab:has(.section-tab-content--non-utilisee) {
    min-width: 2rem;
}

.section-tab-content--non-utilisee .section-tab__nom,
.section-tab-content--non-utilisee .section-tab__non-utilisee-texte,
.section-tab-content--non-utilisee .section-tab__gauge {
    display: none;
}

.membre-tab.active {
    background: none;
    border: none;
    border-radius: 0;
}

.membre-tab-pane {
    background-color: color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 14%, var(--app-melange));
    border-radius: inherit;
    margin: -1.25rem;
    padding: 1.25rem;
}

.planning-tab-li--en-cours {
    --couleur-onglet: var(--app-planning-en-cours);
}

.planning-tab-li--a-faire {
    --couleur-onglet: var(--app-planning-a-faire);
}

.planning-tab-li--bloque {
    --couleur-onglet: var(--app-planning-bloque);
}

.planning-tab-li {
    display: flex;
    align-items: center;
    border-radius: 10px 10px 0 0;
    background-color: color-mix(in srgb, var(--couleur-onglet) 14%, var(--app-melange));
}

.planning-tab-li:has(.planning-tab.active) {
    position: relative;
    z-index: 1;
    border: 1px solid var(--app-bordure);
    border-bottom-color: color-mix(in srgb, var(--couleur-onglet) 14%, var(--app-melange));
}

.planning-tab.active {
    background: none;
    border: none;
    border-radius: 0;
}

.planning-tab-pane--en-cours {
    --couleur-onglet: var(--app-planning-en-cours);
}

.planning-tab-pane--a-faire {
    --couleur-onglet: var(--app-planning-a-faire);
}

.planning-tab-pane--bloque {
    --couleur-onglet: var(--app-planning-bloque);
}

.planning-tab-pane {
    background-color: color-mix(in srgb, var(--couleur-onglet) 14%, var(--app-melange));
    border-radius: inherit;
    margin: -1.25rem;
    padding: 1.25rem;
}

.membre-tab__pastille {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    flex: 0 0 auto;
    border: none;
    padding: 0;
    cursor: pointer;
}

.section-tab--ajout {
    min-width: 2.5rem;
    text-align: center;
    font-weight: 700;
    color: var(--app-secondaire-texte);
}

.tache-rows > turbo-frame {
    display: contents;
}

.tache-rows > turbo-frame > .tache-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.tache-rows > turbo-frame > .tache-row--archivee {
    display: none;
}

[data-taches-conteneur].taches-conteneur--afficher-archivees .tache-rows > turbo-frame > .tache-row--archivee {
    display: flex;
}

.taches-archivees-toggle {
    margin-bottom: 0.5rem;
}

.tache-avatar-groupe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex: 0 0 auto;
}

.tache-avatar-groupe__date {
    font-size: 0.65rem;
    color: var(--app-texte-secondaire);
    white-space: nowrap;
}

.tache-avatar-groupe__projet {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--app-accent-texte);
    max-width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tache-avatar__bulle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    border: none;
    border-radius: 50%;
    color: var(--app-texte-sur-accent);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}

.tache-avatar__bulle--vide {
    background-color: var(--app-inactif-plein);
    color: var(--app-texte-secondaire);
}

.tache-pj__declencheur {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: var(--app-surface-2);
    color: var(--app-texte-secondaire);
    font-size: 1.3rem;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.tache-pj__declencheur--rempli:hover,
.tache-pj__declencheur--rempli:focus {
    opacity: 0.85;
    box-shadow: 0 0 0 2px var(--app-accent);
}

.tache-pj__miniature {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tache-pj__badge {
    position: absolute;
    bottom: -0.35rem;
    right: -0.35rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--app-accent);
    color: var(--app-texte-sur-accent);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    border: 2px solid var(--app-surface-1);
}

.tache-pj {
    position: relative;
}

.tache-pj__menu {
    min-width: 14rem;
}

.tache-pj__miniature--menu {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 4px;
}

.tache-pj__nom-tronque {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tache-detail__declencheur {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    border-radius: 6px;
    color: var(--app-texte-secondaire);
    font-size: 1.3rem;
    text-decoration: none;
}

.tache-detail__declencheur:hover {
    background-color: var(--app-surface-2);
    color: var(--app-accent-texte);
}

.tache-detail__commentaires-badge {
    position: absolute;
    bottom: -0.35rem;
    right: -0.35rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    background-color: var(--app-accent);
    color: var(--app-texte-sur-accent);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    border: 2px solid var(--app-surface-1);
}

.tache-row > form {
    display: none;
}

.tache-ajouter {
    padding-left: 3.25rem;
}

.tache-compteur {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: var(--app-texte-discret);
    margin-left: 0.5rem;
}

.tache-deadline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 3.5rem;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: var(--app-surface-2);
    color: var(--app-texte-secondaire);
    font-size: 1.1rem;
    cursor: pointer;
}

.tache-deadline__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.tache-deadline__annuler {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid var(--app-surface-1);
    border-radius: 50%;
    background-color: var(--app-neutre-fond);
    color: var(--app-texte-sur-accent);
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
}

.tache-deadline__annuler:hover {
    background-color: var(--app-neutre-survol);
}

.tache-deadline--vert {
    background-color: var(--app-deadline-vert-fond);
    color: var(--app-deadline-vert-texte);
}

.tache-deadline--jaune {
    background-color: var(--app-deadline-jaune-fond);
    color: var(--app-deadline-jaune-texte);
}

.tache-deadline--orange {
    background-color: var(--app-deadline-orange-fond);
    color: var(--app-deadline-orange-texte);
}

.tache-deadline--rouge {
    background-color: var(--app-deadline-rouge-fond);
    color: var(--app-deadline-rouge-texte);
}

.deadline-tab {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.deadline-tab__icone {
    display: none;
}

.section-tabs--compact .deadline-tab__nom {
    display: none;
}

.section-tabs--compact .deadline-tab__icone {
    display: inline;
}

.tache-row .tache-libelle {
    font-size: 1rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3.5rem;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
}

.tache-row__selects {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 0 0 8rem;
    height: 3.5rem;
}

.tache-row__selects select {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.couleur-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.couleur-swatch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.couleur-swatch {
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
}

.couleur-swatch__input:checked + .couleur-swatch {
    border-color: var(--app-contour-selection);
}

.couleur-swatch--bouton {
    padding: 0;
}

.couleur-swatch--active {
    border-color: var(--app-contour-selection);
}

.dropdown-menu .couleur-palette {
    min-width: 9rem;
}

.tache-detail {
    position: sticky;
    top: 1rem;
    border: 1px solid var(--app-bordure);
    border-radius: 10px;
}

.tache-detail--coloree {
    background-color: color-mix(in srgb, var(--couleur-membre) 14%, var(--app-melange));
}

.tache-detail__piece-jointe {
    margin-bottom: 0.5rem;
}

.tache-detail__piece-jointe:last-child {
    margin-bottom: 0;
}

.tache-detail__piece-jointe-bouton {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.tache-detail__piece-jointe-bouton:hover,
.tache-detail__piece-jointe-bouton:focus {
    opacity: 0.85;
}

.tache-detail__infos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.75rem;
    margin-bottom: 1rem;
}

.tache-detail__infos dt {
    color: var(--app-secondaire-texte);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tache-detail__infos dd {
    margin-bottom: 0;
}

.tache-detail__activite {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 20rem;
    overflow-y: auto;
}

.tache-detail__commentaire {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.tache-detail__commentaire-bulle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    color: var(--app-texte-sur-accent);
    font-size: 0.7rem;
    font-weight: 600;
}

.tache-detail__commentaire-bulle--neutre {
    background-color: var(--app-inactif-plein);
    color: var(--app-texte-secondaire);
}

.section-photos {
    display: block;
    margin-bottom: 1rem;
}

.section-photos__titre {
    margin-bottom: 0.5rem;
}

.section-photos__grille {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.section-photos__vignette-conteneur {
    width: 120px;
}

.section-photos__vignette-bouton {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.section-photos__vignette-bouton:hover,
.section-photos__vignette-bouton:focus {
    opacity: 0.85;
}

.section-photos__vignette {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--app-bordure);
}

.section-photos__supprimer {
    width: 100%;
    margin-top: 0.35rem;
}

/* Couleurs issues des données (membre, stade d'installation) : le template ne
   transmet que la couleur brute en variable, chaque thème (themes.css) décide
   du rendu. Les pastilles de choix de couleur (.couleur-swatch) restent, elles,
   en couleur exacte dans le HTML. */
.badge-membre {
    background-color: var(--couleur-membre, var(--app-accent));
    color: var(--app-texte-sur-accent);
}

.card--stade {
    border-color: var(--couleur-stade, var(--bs-card-border-color));
}

.membre-tab__pastille {
    background-color: var(--couleur-membre, var(--app-accent));
}

.tache-avatar__bulle:not(.tache-avatar__bulle--vide),
.tache-detail__commentaire-bulle:not(.tache-detail__commentaire-bulle--neutre) {
    background-color: var(--couleur-membre, var(--app-accent));
}

/* Ligne "compte rendu" (ex. Bilan post installation) : date + interlocuteur côte à
   côte, puis la synthèse sur toute la largeur de la colonne valeur. */
.item-row__compte-rendu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.item-row__compte-rendu-ligne {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.item-row__compte-rendu-champ {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
}

.item-row__compte-rendu-champ--date {
    flex: 0 0 11rem;
}

.item-row__compte-rendu-champ--interlocuteur {
    flex: 1 1 auto;
}

.item-row__compte-rendu-libelle {
    font-size: 0.75rem;
    color: var(--app-texte-secondaire);
}

/* Onglet Matériel : un peu d'air entre le commentaire de section et le bloc photos. */
.section-commentaire + .section-photos {
    margin-top: 1.25rem;
}