/* ==========================================================================
   Thèmes d'interface et polices (spec docs/specs/2026-09-24-themes-interface-design.md).
   Le thème clair n'a pas de bloc : ce sont les valeurs de :root dans theme.css.
   Chaque autre thème redéfinit les variables --app-* (et quelques --bs-*),
   puis ajoute ses règles propres, toujours préfixées par :root[data-theme="…"].
   ========================================================================== */

/* --- Logos : version blanche sur les thèmes à fond sombre --- */

.logo--blanc {
    display: none;
}

:root[data-bs-theme="dark"] .logo--normal {
    display: none;
}

:root[data-bs-theme="dark"] .logo--blanc {
    display: inline;
}

/* --- Polices : data-police sur <html> applique la police au site ; posé sur
   un bouton de la fenêtre de paramètres, il sert d'aperçu. --- */

[data-police="defaut"] {
    --app-police: var(--bs-font-sans-serif);
}

[data-police="nunito"] {
    --app-police: "Nunito", system-ui, sans-serif;
}

/* Police manuscrite, choisie parmi les plus lisibles à petite taille. */
[data-police="kalam"] {
    --app-police: "Kalam", "Comic Sans MS", cursive;
}

[data-police="source-serif"] {
    --app-police: "Source Serif 4", Georgia, serif;
}

/* Repli sur la police par défaut si data-police porte une valeur inconnue du
   CSS (police retirée, code PHP pas encore à jour sur le serveur…), plutôt que
   la police par défaut du navigateur (Times New Roman). */
:root[data-police] {
    --bs-body-font-family: var(--app-police, var(--bs-font-sans-serif));
}

/* --- Fenêtre "Paramètres d'affichage" --- */

.preferences__declencheur {
    padding: 0;
    border: 0;
    color: var(--bs-body-color);
    text-decoration: none;
}

.preferences__declencheur:hover,
.preferences__declencheur:focus {
    color: var(--app-accent-texte);
}

.preferences__themes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 575.98px) {
    .preferences__themes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.preferences__polices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.preferences__theme,
.preferences__police {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 2px solid var(--app-bordure);
    border-radius: 10px;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.preferences__theme[aria-pressed="true"],
.preferences__police[aria-pressed="true"] {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--app-accent-rgb), 0.2);
}

.preferences__libelle {
    font-weight: 600;
}

.preferences__police {
    gap: 0.15rem;
    padding: 0.75rem 1rem;
    font-family: var(--app-police, var(--bs-font-sans-serif));
}

.preferences__police-nom {
    font-size: 1.1rem;
    font-weight: 600;
}

.preferences__police-exemple {
    color: var(--app-texte-secondaire);
    font-size: 0.875rem;
}

/* Mini-maquettes des thèmes : couleurs fixes (elles montrent le thème cible,
   pas le thème courant). */
.preferences__apercu {
    position: relative;
    display: block;
    height: 4.5rem;
    border-radius: 6px;
    overflow: hidden;
    background: var(--apercu-fond);
}

.preferences__apercu-barre {
    position: absolute;
    inset: 0 0 auto 0;
    height: 0.9rem;
    background: var(--apercu-barre);
}

.preferences__apercu-carte {
    position: absolute;
    top: 1.5rem;
    right: 0.6rem;
    bottom: 0.6rem;
    left: 0.6rem;
    border-radius: var(--apercu-rayon, 4px);
    background: var(--apercu-carte);
    border: var(--apercu-carte-bordure, none);
    box-shadow: var(--apercu-carte-ombre, none);
}

.preferences__apercu-carte::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 40%;
    height: 0.35rem;
    border-radius: 2px;
    background: var(--apercu-accent);
}

.preferences__apercu--clair {
    --apercu-fond: #ffffff;
    --apercu-barre: #f8f9fa;
    --apercu-carte: #ffffff;
    --apercu-carte-bordure: 1px solid #dee2e6;
    --apercu-accent: #5b7773;
}

.preferences__apercu--sombre {
    --apercu-fond: #181b1c;
    --apercu-barre: #1d2122;
    --apercu-carte: #212527;
    --apercu-carte-bordure: 1px solid #3a4144;
    --apercu-accent: #8fb0ab;
}

/* --- Règles communes à tous les thèmes autres que Clair : Bootstrap prend par
   défaut --bs-body-bg pour les cartes, modales, menus et tableaux ; on les
   aligne sur les surfaces du thème. --- */

:root:not([data-theme="clair"]) .card {
    --bs-card-bg: var(--app-surface-1);
}

:root:not([data-theme="clair"]) .modal {
    --bs-modal-bg: var(--app-surface-1);
}

:root:not([data-theme="clair"]) .dropdown-menu {
    --bs-dropdown-bg: var(--app-surface-1);
}

:root:not([data-theme="clair"]) .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
}

:root:not([data-theme="clair"]) :is(.form-control, .form-select):not(.statut-select):not(.type-select):not(:disabled) {
    background-color: var(--app-surface-2);
}

/* Liste déroulante native des selects sur les thèmes sombres : avec un fond de
   select translucide, le navigateur l'affiche sur fond clair, et les options
   héritent de la couleur de texte claire du select (ex. type « feature » en
   bleu ciel) : illisible. Fond et texte opaques explicites, sauf les options
   de statut qui ont leurs propres couleurs. */
:root[data-bs-theme="dark"] option:not([class*="statut-option--"]) {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* ==========================================================================
   Thème Sombre : mêmes formes que Clair, seules les couleurs changent.
   ========================================================================== */

:root[data-theme="sombre"] {
    --bs-body-color: #e3e6e5;
    --bs-body-bg: #181b1c;
    --bs-body-bg-rgb: 24, 27, 28;
    --bs-secondary-color: #9aa3a1;
    --bs-tertiary-bg: #1d2122;
    --bs-tertiary-bg-rgb: 29, 33, 34;
    --bs-border-color: #3a4144;
    --bs-link-hover-color: color-mix(in srgb, var(--app-accent-texte) 80%, white);

    --app-accent-texte: #8fb0ab;
    --app-texte-secondaire: #9aa3a1;
    --app-texte-discret: #6f7876;
    --app-surface-1: #212527;
    --app-surface-2: #2a2f31;
    --app-surface-sidebar: #1d2122;
    --app-melange: #212527;
    --app-bordure: #3a4144;
    --app-champ-bordure: #3a4144;
    --app-champ-bordure-survol: #4b5457;
    --app-champ-ombre: rgba(0, 0, 0, 0.3);
    --app-ombre-panneau: rgba(0, 0, 0, 0.35);
    --app-inactif-fond: #2a2f31;
    --app-inactif-bordure: #454d50;
    --app-inactif-plein: #454d50;
    --app-secondaire-texte: #a9bab7;
    --app-neutre-fond: #4a5157;
    --app-neutre-survol: #7a8386;
    --app-contour-selection: #e3e6e5;
    --app-danger: #f06a77;

    --app-statut-a-faire-fond: #4a5157;
    --app-statut-a-faire-texte: #e3e6e5;
    --app-statut-en-cours-fond: color-mix(in srgb, #ffc107 30%, #212527);
    --app-statut-en-cours-texte: #ffd65a;
    --app-statut-fait-fond: color-mix(in srgb, #198754 40%, #212527);
    --app-statut-fait-texte: #7ee2ad;
    --app-statut-bloque-fond: color-mix(in srgb, #dc3545 40%, #212527);
    --app-statut-bloque-texte: #ff9aa4;
    --app-statut-non-utilise-fond: #3a4144;
    --app-statut-non-utilise-texte: #adb5bd;
    --app-statut-en-progres-fond: color-mix(in srgb, #ff8800 35%, #212527);
    --app-statut-en-progres-texte: #ffb866;
    --app-statut-archive-fond: color-mix(in srgb, #6f42c1 40%, #212527);
    --app-statut-archive-texte: #c9b3f5;

    --app-type-feature-bordure: #3b5f9e;
    --app-type-feature-texte: #93c5fd;
    --app-type-bug-bordure: #8a3a3a;
    --app-type-bug-texte: #fca5a5;
    --app-type-specifique-bordure: #5b4a8f;
    --app-type-specifique-texte: #c4b5fd;

    --app-deadline-vert-fond: color-mix(in srgb, #15803d 30%, #212527);
    --app-deadline-vert-texte: #86efac;
    --app-deadline-jaune-fond: color-mix(in srgb, #a16207 35%, #212527);
    --app-deadline-jaune-texte: #fde68a;
    --app-deadline-orange-fond: color-mix(in srgb, #c2410c 35%, #212527);
    --app-deadline-orange-texte: #fdba74;
    --app-deadline-rouge-fond: color-mix(in srgb, #b91c1c 35%, #212527);
    --app-deadline-rouge-texte: #fca5a5;
}

/* Couleurs de membre : pleines mais légèrement adoucies sur fond sombre. */
:root[data-theme="sombre"] .badge-membre,
:root[data-theme="sombre"] .tache-avatar__bulle:not(.tache-avatar__bulle--vide),
:root[data-theme="sombre"] .tache-detail__commentaire-bulle:not(.tache-detail__commentaire-bulle--neutre) {
    background-color: color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 82%, #181b1c);
}

/* ==========================================================================
   Onglets en pilules (Moderne et Verre) : l'effet « classeur » de Clair et
   Sombre repose sur une bordure basse qui masque celle du panneau, ce qui ne
   fonctionne ni sans bordure ni sur du transparent.
   ========================================================================== */

:root:is([data-theme="moderne"], [data-theme="verre"]) .section-tabs {
    align-items: center;
    margin-bottom: 0.75rem;
}

:root:is([data-theme="moderne"], [data-theme="verre"]) .section-tab:not(.membre-tab),
:root:is([data-theme="moderne"], [data-theme="verre"]) .membre-tab-li,
:root:is([data-theme="moderne"], [data-theme="verre"]) .planning-tab-li {
    border-radius: 999px;
    transition: background-color var(--app-transition), color var(--app-transition), box-shadow var(--app-transition);
}

:root:is([data-theme="moderne"], [data-theme="verre"]) .section-tab.active:not(.membre-tab):not(.planning-tab) {
    border: none;
    border-radius: 999px;
    background-color: var(--app-accent);
    color: var(--app-texte-sur-accent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--app-accent) 35%, transparent);
}

:root:is([data-theme="moderne"], [data-theme="verre"]) .section-tab.active .section-tab__gauge {
    background-color: rgba(255, 255, 255, 0.35);
    border-color: transparent;
}

:root:is([data-theme="moderne"], [data-theme="verre"]) .section-tab.active .section-tab__gauge-fill {
    background-color: var(--app-texte-sur-accent);
}

:root:is([data-theme="moderne"], [data-theme="verre"]) .membre-tab-li:has(.membre-tab.active) {
    border: none;
    background-color: color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 30%, var(--app-melange));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 40%, transparent);
}

:root:is([data-theme="moderne"], [data-theme="verre"]) .planning-tab-li:has(.planning-tab.active) {
    border: none;
    background-color: color-mix(in srgb, var(--couleur-onglet) 30%, var(--app-melange));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--couleur-onglet) 40%, transparent);
}

:root:is([data-theme="moderne"], [data-theme="verre"]) .tab-content {
    margin-top: 0;
}

:root:is([data-theme="moderne"], [data-theme="verre"]) .section-tabs:has(> li:first-child > .section-tab.active) + .tab-content {
    border-top-left-radius: var(--app-rayon);
}

/* ==========================================================================
   Thème Moderne : clair, doux et reposant. Fond beige, accent sauge, textes
   brun-gris chaud, aucune bordure de conteneur (ombres douces à la place, les
   bordures colorées deviennent des ombres de la même couleur).
   ========================================================================== */

:root[data-theme="moderne"] {
    --bs-body-color: #3d3833;
    --bs-body-bg: #f4efe6;
    --bs-body-bg-rgb: 244, 239, 230;
    --bs-secondary-color: #7a726a;
    --bs-tertiary-bg: #fbf8f3;
    --bs-tertiary-bg-rgb: 251, 248, 243;
    --bs-border-color: #e6ded2;

    --app-accent: #6f7f62;
    --app-accent-rgb: 111, 127, 98;
    --app-accent-texte: #5f6e53;
    --app-secondaire: #9a9186;
    --app-secondaire-rgb: 154, 145, 134;
    --app-texte-secondaire: #7a726a;
    --app-texte-discret: #b3aa9f;
    --app-surface-1: #ffffff;
    --app-surface-2: #f7f3ec;
    --app-surface-sidebar: #fbf8f3;
    --app-bordure: #e6ded2;
    --app-champ-bordure: #e6ded2;
    --app-champ-bordure-survol: #d6ccbd;
    --app-champ-ombre: rgba(92, 72, 48, 0.06);
    --app-ombre-panneau: rgba(92, 72, 48, 0.08);
    --app-inactif-fond: #efe9df;
    --app-inactif-bordure: #ddd4c7;
    --app-inactif-plein: #ddd4c7;
    --app-secondaire-texte: #8a8177;
    --app-neutre-fond: #8a8177;
    --app-neutre-survol: #6f675e;
    --app-contour-selection: #3d3833;

    /* Statuts en version pastel, texte foncé de la même teinte. */
    --app-statut-a-faire-fond: #e3e5e7;
    --app-statut-a-faire-texte: #464c52;
    --app-statut-en-cours-fond: #fcebb6;
    --app-statut-en-cours-texte: #6e5200;
    --app-statut-fait-fond: #cfe8d8;
    --app-statut-fait-texte: #1d623d;
    --app-statut-bloque-fond: #f6d3d6;
    --app-statut-bloque-texte: #922230;
    --app-statut-non-utilise-fond: #ecedee;
    --app-statut-non-utilise-texte: #5f666d;
    --app-statut-en-progres-fond: #ffe1c2;
    --app-statut-en-progres-texte: #7d4400;
    --app-statut-archive-fond: #e4daf5;
    --app-statut-archive-texte: #55318f;

    --app-rayon: 14px;
    --app-transition: 200ms ease;
    --app-ombre-douce: 0 1px 2px rgba(92, 72, 48, 0.06), 0 8px 24px rgba(92, 72, 48, 0.08);
    --app-ombre-douce-survol: 0 2px 4px rgba(92, 72, 48, 0.08), 0 14px 32px rgba(92, 72, 48, 0.12);
}

:root[data-theme="moderne"] .navbar {
    --bs-border-color: transparent;
    position: relative;
    z-index: 2;
    box-shadow: var(--app-ombre-douce);
}

:root[data-theme="moderne"] .app-sidebar {
    border-right: none;
    box-shadow: var(--app-ombre-douce);
}

:root[data-theme="moderne"] .app-sidebar__link {
    border-radius: 10px;
    transition: background-color var(--app-transition), color var(--app-transition), box-shadow var(--app-transition);
}

:root[data-theme="moderne"] .app-sidebar__link--active {
    border-left-color: transparent;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--app-accent) 25%, transparent);
}

:root[data-theme="moderne"] .app-sidebar__link--all {
    border-bottom: none;
    border-radius: 10px;
}

:root[data-theme="moderne"] .card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--app-rayon);
    --bs-card-inner-border-radius: var(--app-rayon);
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: var(--app-ombre-douce);
    transition: box-shadow var(--app-transition), transform var(--app-transition);
}

:root[data-theme="moderne"] .projets-grid--compacte .card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
}

:root[data-theme="moderne"] .card:has(.stretched-link):hover {
    box-shadow: var(--app-ombre-douce-survol);
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-theme="moderne"] .card:has(.stretched-link):hover {
        transform: translateY(-2px);
    }
}

:root[data-theme="moderne"] .card--stade {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--couleur-stade) 30%, transparent), 0 8px 24px color-mix(in srgb, var(--couleur-stade) 28%, transparent);
}

/* Sans ce rappel, la carte d'un stade d'installation perdait son ombre
   colorée au survol : la règle générale ci-dessus l'écrase (même spécificité,
   règle plus tardive dans le fichier). */
:root[data-theme="moderne"] .card--stade:has(.stretched-link):hover {
    box-shadow: 0 2px 4px color-mix(in srgb, var(--couleur-stade) 35%, transparent), 0 14px 32px color-mix(in srgb, var(--couleur-stade) 35%, transparent);
}

:root[data-theme="moderne"] .tab-content,
:root[data-theme="moderne"] .tache-detail {
    border: none;
    border-radius: var(--app-rayon);
    box-shadow: var(--app-ombre-douce);
}

:root[data-theme="moderne"] .section-photos__vignette {
    border: none;
    box-shadow: var(--app-ombre-douce);
}

:root[data-theme="moderne"] .badge--non-utilisee,
:root[data-theme="moderne"] .section-tab__gauge {
    border: none;
}

:root[data-theme="moderne"] .type-select--feature,
:root[data-theme="moderne"] .type-select--bug,
:root[data-theme="moderne"] .type-select--specifique {
    border-color: transparent;
}

:root[data-theme="moderne"] .type-select--feature {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--app-type-feature-bordure) 70%, transparent);
}

:root[data-theme="moderne"] .type-select--bug {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--app-type-bug-bordure) 70%, transparent);
}

:root[data-theme="moderne"] .type-select--specifique {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--app-type-specifique-bordure) 70%, transparent);
}

/* Couleurs de membre légèrement atténuées (mélangées à 25 % de blanc), moins
   que les pastels des statuts : la couleur reste reconnaissable. */
:root[data-theme="moderne"] .badge-membre,
:root[data-theme="moderne"] .tache-avatar__bulle:not(.tache-avatar__bulle--vide),
:root[data-theme="moderne"] .tache-detail__commentaire-bulle:not(.tache-detail__commentaire-bulle--neutre),
:root[data-theme="moderne"] .membre-tab__pastille {
    background-color: color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 75%, white);
}

:root[data-theme="moderne"] .badge-membre {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 30%, transparent);
}

:root[data-theme="moderne"] .tache-avatar__bulle:not(.tache-avatar__bulle--vide),
:root[data-theme="moderne"] .tache-detail__commentaire-bulle:not(.tache-detail__commentaire-bulle--neutre) {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 35%, transparent);
}

:root[data-theme="moderne"] .form-control,
:root[data-theme="moderne"] .form-select {
    transition: border-color var(--app-transition), box-shadow var(--app-transition);
}

:root[data-theme="moderne"] .modal {
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--app-rayon);
    --bs-modal-box-shadow: var(--app-ombre-douce-survol);
}

:root[data-theme="moderne"] .modal-content {
    box-shadow: var(--bs-modal-box-shadow);
}

:root[data-theme="moderne"] .dropdown-menu {
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: 10px;
    box-shadow: var(--app-ombre-douce);
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-theme="moderne"] .fade {
        transition: opacity var(--app-transition);
    }
}

/* Badges de section des cartes de projet client : mêmes couleurs de statut,
   en pastel (les utilitaires bg-* de Bootstrap sont en !important). */
:root[data-theme="moderne"] .carte-projet__badges-sections .badge.bg-success {
    background-color: var(--app-statut-fait-fond) !important;
    color: var(--app-statut-fait-texte);
}

:root[data-theme="moderne"] .carte-projet__badges-sections .badge.bg-danger {
    background-color: var(--app-statut-bloque-fond) !important;
    color: var(--app-statut-bloque-texte);
}

:root[data-theme="moderne"] .carte-projet__badges-sections .badge.bg-warning {
    background-color: var(--app-statut-en-cours-fond) !important;
    color: var(--app-statut-en-cours-texte);
}

:root[data-theme="moderne"] .carte-projet__badges-sections .badge.bg-secondary {
    background-color: var(--app-statut-a-faire-fond) !important;
    color: var(--app-statut-a-faire-texte);
}

/* Onglets inactifs en blanc : la surface 2 (beige clair) se confondait avec
   le fond de page. Les onglets actifs ne changent pas. */
:root[data-theme="moderne"] .section-tab:not(.active):not(.membre-tab):not(.planning-tab) {
    background-color: var(--app-surface-1);
}

.preferences__apercu--moderne {
    --apercu-fond: #f4efe6;
    --apercu-barre: #fbf8f3;
    --apercu-carte: #ffffff;
    --apercu-carte-ombre: 0 2px 6px rgba(92, 72, 48, 0.15);
    --apercu-rayon: 7px;
    --apercu-accent: #6f7f62;
}

/* ==========================================================================
   Thème Verre : texture de roche sombre en fond, conteneurs en verre dépoli
   (transparence + flou, liseré lumineux haut/gauche, ombre intérieure
   bas/droite pour l'épaisseur, reflet diagonal, ombre portée). Couleurs =
   premier jet, à ajuster selon les retours de l'utilisateur.
   Performance : le flou n'est posé que sur les grands conteneurs, jamais sur
   un conteneur déjà placé dans un autre.
   ========================================================================== */

:root[data-theme="verre"] {
    --bs-body-color: #f1f3f2;
    --bs-body-bg: #1b1d1e;
    --bs-body-bg-rgb: 27, 29, 30;
    --bs-secondary-color: rgba(241, 243, 242, 0.7);
    --bs-border-color: rgba(255, 255, 255, 0.18);
    --bs-link-color: #ffffff;
    --bs-link-hover-color: #ffffff;

    /* Accent : dégradé bleu (boutons, barres de progression, onglet actif…) ;
       --app-accent en est la couleur médiane, pour les usages en aplat. */
    --app-accent: rgba(255, 255, 255, 0.2);
    --app-accent-rgb: 255, 255, 255;
    --app-accent-texte: #ffffff;
    --app-accent-degrade: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12));
    --app-secondaire: #a9bab7;
    --app-secondaire-rgb: 169, 186, 183;
    --app-texte-secondaire: rgba(241, 243, 242, 0.72);
    --app-texte-discret: rgba(241, 243, 242, 0.45);
    --app-surface-1: rgba(255, 255, 255, 0.08);
    --app-surface-2: rgba(255, 255, 255, 0.06);
    --app-surface-sidebar: rgba(255, 255, 255, 0.08);
    --app-melange: rgba(255, 255, 255, 0.06);
    --app-bordure: rgba(255, 255, 255, 0.18);
    --app-champ-bordure: rgba(255, 255, 255, 0.22);
    --app-champ-bordure-survol: rgba(255, 255, 255, 0.35);
    --app-champ-ombre: rgba(0, 0, 0, 0.2);
    --app-ombre-panneau: rgba(0, 0, 0, 0.35);
    --app-inactif-fond: rgba(255, 255, 255, 0.08);
    --app-inactif-bordure: rgba(255, 255, 255, 0.22);
    --app-inactif-plein: rgba(255, 255, 255, 0.22);
    --app-secondaire-texte: #a9bab7;
    --app-neutre-fond: rgba(255, 255, 255, 0.25);
    --app-neutre-survol: rgba(255, 255, 255, 0.35);
    --app-contour-selection: #ffffff;
    --app-danger: #ff8a95;

    /* Statuts : aplats presque opaques et texte contrasté (≥ 4,5:1 une fois
       composés sur le fond sombre). */
    --app-statut-a-faire-fond: rgba(108, 117, 125, 0.9);
    --app-statut-a-faire-texte: #ffffff;
    --app-statut-en-cours-fond: rgba(255, 193, 7, 0.92);
    --app-statut-en-cours-texte: #1b1d1e;
    --app-statut-fait-fond: rgba(25, 135, 84, 0.9);
    --app-statut-fait-texte: #ffffff;
    --app-statut-bloque-fond: rgba(220, 53, 69, 0.9);
    --app-statut-bloque-texte: #ffffff;
    --app-statut-non-utilise-fond: rgba(173, 181, 189, 0.75);
    --app-statut-non-utilise-texte: #1b1d1e;
    --app-statut-en-progres-fond: rgba(255, 136, 0, 0.92);
    --app-statut-en-progres-texte: #1b1d1e;
    --app-statut-archive-fond: rgba(111, 66, 193, 0.9);
    --app-statut-archive-texte: #ffffff;

    --app-type-feature-bordure: rgba(147, 197, 253, 0.55);
    --app-type-feature-texte: #bcdcff;
    --app-type-bug-bordure: rgba(252, 165, 165, 0.55);
    --app-type-bug-texte: #ffc4c4;
    --app-type-specifique-bordure: rgba(196, 181, 253, 0.55);
    --app-type-specifique-texte: #ddd3ff;

    --app-deadline-vert-fond: rgba(34, 197, 94, 0.25);
    --app-deadline-vert-texte: #a7f3c1;
    --app-deadline-jaune-fond: rgba(234, 179, 8, 0.25);
    --app-deadline-jaune-texte: #fde68a;
    --app-deadline-orange-fond: rgba(249, 115, 22, 0.25);
    --app-deadline-orange-texte: #fdc594;
    --app-deadline-rouge-fond: rgba(239, 68, 68, 0.28);
    --app-deadline-rouge-texte: #fcb4b4;

    --app-rayon: 14px;
    --app-transition: 200ms ease;
    --app-verre-fond: rgba(255, 255, 255, 0.08);
    --app-verre-fond-fort: rgba(22, 24, 25, 0.82);
    --app-verre-champ: rgba(10, 12, 13, 0.45);
    --app-verre-bordure: rgba(255, 255, 255, 0.14);
    --app-verre-lisere: rgba(255, 255, 255, 0.35);
    --app-verre-flou: blur(14px) saturate(140%);
    --app-verre-reflet: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0) 60%);
    --app-verre-ombre: inset 1px 1px 0 rgba(255, 255, 255, 0.22), inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset -2px -3px 8px rgba(0, 0, 0, 0.18), 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Sans backdrop-filter, un verre très transparent serait illisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-theme="verre"] {
        --app-verre-fond: rgba(28, 31, 32, 0.88);
    }
}

:root[data-theme="verre"] body {
    background-color: #1b1d1e;
}

/* Fond sur un pseudo-élément fixe plutôt que background-attachment: fixed
   (repeint à chaque défilement). */
:root[data-theme="verre"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #1b1d1e url("/fond-texture.webp") center / cover no-repeat;
}

:root[data-theme="verre"] .navbar,
:root[data-theme="verre"] .app-sidebar,
:root[data-theme="verre"] .card,
:root[data-theme="verre"] .tab-content,
:root[data-theme="verre"] .tache-detail,
:root[data-theme="verre"] .modal-content,
:root[data-theme="verre"] .dropdown-menu {
    background-color: var(--app-verre-fond);
    background-image: var(--app-verre-reflet);
    -webkit-backdrop-filter: var(--app-verre-flou);
    backdrop-filter: var(--app-verre-flou);
    border: 1px solid var(--app-verre-bordure);
    border-top-color: var(--app-verre-lisere);
    border-left-color: var(--app-verre-lisere);
    box-shadow: var(--app-verre-ombre);
}

/* Sans ce rappel, le fond verre l'emporte (même sélecteur .tache-detail,
   même spécificité, mais la règle du dégradé de teinte de membre est plus
   tôt dans le fichier) et le panneau de détail perd sa teinte de membre. */
:root[data-theme="verre"] .tache-detail--coloree {
    background-color: color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 14%, var(--app-verre-fond));
}

:root[data-theme="verre"] .navbar.bg-body-tertiary {
    background-color: var(--app-verre-fond) !important;
}

:root[data-theme="verre"] .navbar {
    --bs-border-color: var(--app-verre-bordure);
    border-width: 0 0 1px 0;
    position: relative;
    z-index: 2;
}

:root[data-theme="verre"] .app-sidebar {
    border-width: 0 1px 0 0;
}

:root[data-theme="verre"] .card {
    --bs-card-bg: transparent;
    --bs-card-border-radius: var(--app-rayon);
    --bs-card-inner-border-radius: var(--app-rayon);
    border-radius: var(--app-rayon);
}

:root[data-theme="verre"] .tab-content,
:root[data-theme="verre"] .tache-detail {
    border-radius: var(--app-rayon);
}

/* Lisibilité : fenêtres, menus et champs en verre foncé plus opaque. */
:root[data-theme="verre"] .modal-content,
:root[data-theme="verre"] .dropdown-menu {
    background-color: var(--app-verre-fond-fort);
}

/* Spécificité relevée pour l'emporter sur la règle commune non-clair des
   champs (:root:not([data-theme="clair"]) :is(.form-control, .form-select)
   :not(.statut-select):not(.type-select):not(:disabled), spécificité 0-6-0) :
   ajout de :not(.type-select):not(:disabled) sur les deux sélecteurs, ce qui
   porte aussi ce sélecteur à 0-6-0 (égalité + règle plus loin dans le
   fichier = elle l'emporte), et aligne au passage l'exclusion sur celle de
   la règle commune (.type-select et :disabled n'étaient pas exclus dans le
   premier jet).
   */
:root[data-theme="verre"] .form-control:not(.statut-select):not(.type-select):not(:disabled),
:root[data-theme="verre"] .form-select:not(.statut-select):not(.type-select):not(:disabled) {
    background-color: var(--app-verre-champ);
    color: var(--bs-body-color);
}

/* Performance : pas de second flou dans un conteneur déjà en verre. */
:root[data-theme="verre"] .tab-content .card,
:root[data-theme="verre"] .card .card,
:root[data-theme="verre"] .tab-content .tache-detail,
:root[data-theme="verre"] .tab-content .dropdown-menu,
:root[data-theme="verre"] .card .dropdown-menu {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Un backdrop-filter crée un contexte d'empilement : une modale placée dedans
   resterait coincée sous le fond de modale de Bootstrap. On retire le flou des
   ancêtres le temps qu'une modale est ouverte. */
:root[data-theme="verre"] :is(.card, .tab-content, .tache-detail):has(.modal[aria-modal="true"], .modal.show) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Badges en verre teinté : le reflet diagonal prend la couleur du badge,
   comme une lumière colorée qui traverse le verre. Même effet pour les badges
   de membre (couleur du membre) et pour les badges de section des cartes de
   projet client (couleur de statut Bootstrap inchangée). */
:root[data-theme="verre"] .badge-membre {
    --couleur-badge: var(--couleur-membre, var(--app-accent));
}

:root[data-theme="verre"] .carte-projet__badges-sections .badge.bg-success {
    --couleur-badge: rgb(var(--bs-success-rgb));
}

:root[data-theme="verre"] .carte-projet__badges-sections .badge.bg-danger {
    --couleur-badge: rgb(var(--bs-danger-rgb));
}

:root[data-theme="verre"] .carte-projet__badges-sections .badge.bg-warning {
    --couleur-badge: rgb(var(--bs-warning-rgb));
}

:root[data-theme="verre"] .carte-projet__badges-sections .badge.bg-secondary {
    --couleur-badge: rgb(var(--bs-secondary-rgb));
}

/* !important : les utilitaires bg-* de Bootstrap le sont. */
:root[data-theme="verre"] .badge-membre,
:root[data-theme="verre"] .carte-projet__badges-sections .badge:is(.bg-success, .bg-danger, .bg-warning, .bg-secondary) {
    background-color: color-mix(in srgb, var(--couleur-badge) 25%, transparent) !important;
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--couleur-badge) 85%, white) 0%, color-mix(in srgb, var(--couleur-badge) 40%, transparent) 60%, color-mix(in srgb, var(--couleur-badge) 15%, transparent) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-right-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 8px color-mix(in srgb, var(--couleur-badge) 40%, transparent);
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* Bulles d'initiales et pastilles : petites billes de verre teintées. */
:root[data-theme="verre"] .tache-avatar__bulle:not(.tache-avatar__bulle--vide),
:root[data-theme="verre"] .tache-detail__commentaire-bulle:not(.tache-detail__commentaire-bulle--neutre),
:root[data-theme="verre"] .membre-tab__pastille {
    background-image: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.15) 28%, rgba(255, 255, 255, 0) 50%), linear-gradient(160deg, transparent 55%, rgba(0, 0, 0, 0.3));
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25), 0 2px 8px color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 50%, transparent);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* Stade d'installation : pas de bordure colorée, mais un reflet de la couleur
   du stade posé par-dessus le reflet normal, comme une lumière colorée qui
   traverse le verre. Même spécificité (0-3-0) que la règle verre de .card et
   placée après : elle l'emporte. background-color n'est pas redéfini : il
   reste celui du verre (la règle verre de .card, 0-3-0, l'emporte déjà sur
   .card--teinte-projet de theme.css, 0-1-0). */
:root[data-theme="verre"] .card--stade {
    border-color: var(--app-verre-bordure);
    border-top-color: var(--app-verre-lisere);
    border-left-color: var(--app-verre-lisere);
    box-shadow: var(--app-verre-ombre);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--couleur-stade, transparent) 45%, transparent) 0%, color-mix(in srgb, var(--couleur-stade, transparent) 12%, transparent) 38%, transparent 62%), var(--app-verre-reflet);
}

/* --- Sélecteurs de statut : aplat du statut (variables --app-statut-*) avec
   une arête de verre. Jamais de background-image ni du raccourci background :
   la flèche de .form-select de Bootstrap est une background-image.
   0-3-0 > .statut-select { border: none } de theme.css (0-1-0) ; la règle de
   focus (0-4-0) doit battre celle-ci pour garder l'anneau de focus. --- */
:root[data-theme="verre"] .statut-select {
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.25);
}

:root[data-theme="verre"] .statut-select:hover {
    border-color: rgba(255, 255, 255, 0.55);
}

:root[data-theme="verre"] .statut-select:focus {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.18), 0 0 0 0.2rem rgba(var(--app-accent-rgb), 0.45);
}

/* --- Accent en dégradé. background-origin: border-box évite que le dégradé
   se répète (raccord visible) sous une bordure transparente. --- */
/* Accent « verre pur » : l'accent est lui-même du verre, plus lumineux que
   les conteneurs, avec un liseré clair en haut à gauche. */
:root[data-theme="verre"] .btn-primary {
    --bs-btn-border-color: rgba(255, 255, 255, 0.28);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.4);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.4);
    --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.55);
    border-left-color: rgba(255, 255, 255, 0.55);
    background-image: var(--app-accent-degrade);
    background-origin: border-box;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:root[data-theme="verre"] .form-check-input:checked {
    background-color: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.7);
}

:root[data-theme="verre"] .btn-primary:hover,
:root[data-theme="verre"] .btn-primary:focus-visible {
    filter: brightness(1.08);
}

:root[data-theme="verre"] .btn-primary:active {
    filter: brightness(0.94);
}

/* 0-4-0 > .btn:hover / .btn:active de Bootstrap (0-2-0) pour la bordure. */
:root[data-theme="verre"] .btn-outline-primary:hover,
:root[data-theme="verre"] .btn-outline-primary:active,
:root[data-theme="verre"] .btn-outline-primary.active {
    background-image: var(--app-accent-degrade);
    background-origin: border-box;
    border-color: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:root[data-theme="verre"] .progress-bar,
:root[data-theme="verre"] .bg-primary,
:root[data-theme="verre"] .section-tab__gauge-fill,
:root[data-theme="verre"] .vue-toggle {
    background-image: var(--app-accent-degrade);
}

:root[data-theme="verre"] .tache-pj__badge,
:root[data-theme="verre"] .tache-detail__commentaires-badge {
    background-image: var(--app-accent-degrade);
    background-origin: border-box;
    border-color: transparent;
}

/* --- Onglets en verre (sections des projets client, « Mes projets »,
   planning, onglets des projets perso). Ils ne sont pas dans un autre
   conteneur en verre (ils sont au-dessus de .tab-content) : le flou est
   possible. Spécificités : pilule 0-5-0, li 0-3-0 ; les états actifs du bloc
   « pilules » (0-6-0 et 0-5-0) sont repris plus bas à égalité, plus loin dans
   le fichier. --- */
:root[data-theme="verre"] .section-tab:not(.membre-tab):not(.planning-tab),
:root[data-theme="verre"] .membre-tab-li,
:root[data-theme="verre"] .planning-tab-li {
    background-color: rgba(255, 255, 255, 0.14);
    background-image: var(--app-verre-reflet);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid var(--app-verre-bordure);
    border-top-color: var(--app-verre-lisere);
    border-left-color: var(--app-verre-lisere);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.22), inset -1px -1px 0 rgba(0, 0, 0, 0.2), 0 4px 14px rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.85);
}

/* Le bouton intérieur des onglets membre et planning est transparent : seule
   la pilule du li se voit (sinon .section-tab de theme.css peint un second
   fond sous les boutons de planning). 0-4-0 > .section-tab.active,
   .membre-tab.active, .planning-tab.active (0-2-0). */
:root[data-theme="verre"] .section-tab:is(.membre-tab, .planning-tab) {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--bs-body-color);
}

:root[data-theme="verre"] .membre-tab-li {
    background-color: color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 28%, rgba(255, 255, 255, 0.1));
}

:root[data-theme="verre"] .planning-tab-li {
    background-color: color-mix(in srgb, var(--couleur-onglet) 28%, rgba(255, 255, 255, 0.1));
}

/* Onglet actif : dégradé d'accent. 0-6-0, égalité avec la règle active du
   bloc « pilules », placée après. La bordure (1px) est gardée pour que la
   pilule ne change pas de taille en devenant active. */
:root[data-theme="verre"] .section-tab.active:not(.membre-tab):not(.planning-tab) {
    background-color: var(--app-accent);
    background-image: var(--app-accent-degrade);
    background-origin: border-box;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top-color: rgba(255, 255, 255, 0.6);
    border-left-color: rgba(255, 255, 255, 0.6);
    color: var(--app-texte-sur-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Jauge dans l'onglet actif : piste claire (bloc « pilules »), remplissage
   blanc sans le dégradé posé plus haut (0-5-0 > 0-3-0). */
:root[data-theme="verre"] .section-tab.active .section-tab__gauge-fill {
    background-image: none;
}

/* 0-5-0 : égalité avec les règles actives du bloc « pilules », placées après. */
:root[data-theme="verre"] .membre-tab-li:has(.membre-tab.active) {
    background-color: color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 50%, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--app-verre-lisere);
    border-right-color: rgba(255, 255, 255, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.18);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 0 rgba(0, 0, 0, 0.2), 0 4px 16px color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 45%, transparent);
}

:root[data-theme="verre"] .planning-tab-li:has(.planning-tab.active) {
    background-color: color-mix(in srgb, var(--couleur-onglet) 50%, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--app-verre-lisere);
    border-right-color: rgba(255, 255, 255, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.18);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 0 rgba(0, 0, 0, 0.2), 0 4px 16px color-mix(in srgb, var(--couleur-onglet) 45%, transparent);
}

/* Le flou fait de chaque onglet membre un contexte d'empilement peint sous
   .tab-content (position: relative, plus loin dans la page) : le menu de
   couleur de la pastille serait caché dessous. On remonte l'onglet tant que
   le menu est ouvert (0-5-0 > z-index: 1 de l'onglet actif, 0-3-0), et on
   retire le second flou du menu (0-4-0 > règle verre de .dropdown-menu). */
:root[data-theme="verre"] .membre-tab-li:has(.dropdown-menu.show) {
    position: relative;
    z-index: 3;
}

:root[data-theme="verre"] .membre-tab-li .dropdown-menu {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Panneaux des onglets membre et planning : teinte un peu plus franche et
   moins laiteuse, plus proche de celle des onglets. 0-3-0 > theme.css. */
:root[data-theme="verre"] .membre-tab-pane {
    background-color: color-mix(in srgb, var(--couleur-membre, var(--app-accent)) 16%, rgba(255, 255, 255, 0.04));
}

:root[data-theme="verre"] .planning-tab-pane {
    background-color: color-mix(in srgb, var(--couleur-onglet) 16%, rgba(255, 255, 255, 0.04));
}

.preferences__apercu--verre {
    --apercu-fond: #1b1d1e url("/fond-texture-miniature.webp") center / cover no-repeat;
    --apercu-barre: rgba(255, 255, 255, 0.12);
    --apercu-carte: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
    --apercu-carte-bordure: 1px solid rgba(255, 255, 255, 0.35);
    --apercu-rayon: 7px;
    --apercu-accent: linear-gradient(to right bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.3));
}

/* Survol des cartes cliquables (tableau de bord, mes projets) : la plaque de
   verre s'éclaircit et se soulève très légèrement. Les cartes à stretched-link
   ne contiennent pas de modale (le transform créerait sinon un bloc conteneur
   pour les éléments position: fixed). */
:root[data-theme="verre"] .card:has(.stretched-link) {
    transition: transform var(--app-transition), box-shadow var(--app-transition), background-color var(--app-transition);
}

:root[data-theme="verre"] .card:has(.stretched-link):hover {
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.28), inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset -2px -3px 8px rgba(0, 0, 0, 0.18), 0 14px 34px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-theme="verre"] .card:has(.stretched-link):hover {
        transform: translateY(-2px);
    }
}