/*
 * Thème « Corail & menthe » — surcouche de Tabler.
 *
 * Ce fichier ne remplace pas Tabler et n'en recompile pas les sources : il se
 * pose PAR-DESSUS `tabler.min.css` et se contente de redéfinir ses variables
 * `--tblr-*`. Conséquence directe : une mise à jour de Tabler ne demande aucune
 * reprise ici, et retirer la ligne `<link>` de `base.html.twig` rend
 * instantanément l'apparence d'origine. C'est la raison d'être du fichier —
 * ne pas y recopier de règles Tabler pour les « corriger » en dur.
 *
 * L'ordre de chargement est la seule contrainte : ce fichier vient APRÈS
 * `tabler.min.css` dans `base.html.twig`. Il est chargé par `asset()`, donc
 * versionné par AssetMapper — comme Tabler lui-même.
 *
 * Trois partis pris structurent le thème :
 *
 * 1. Les gris de Tabler sont bleutés (#f9fafb, #6b7280) : c'est ce qui rend
 *    l'écran froid, bien plus que la couleur primaire. Toute la rampe passe
 *    donc en gris chauds, et le fond de page en crème.
 * 2. La couleur primaire est un corail profond (#de2e58) et non le corail vif
 *    des maquettes : à 4,5:1 sur blanc, elle porte du texte blanc sur un
 *    bouton. Le corail vif, lui, ne sert qu'au décor (dégradés, aplats),
 *    jamais de fond à du texte.
 * 3. Chaque brique métier a sa teinte, posée par une classe `.tone-*`. La
 *    barre latérale et les tuiles du tableau de bord la reprennent : on
 *    reconnaît « les devis » à leur violet avant d'avoir lu le mot.
 *
 * Les deux thèmes de Tabler (clair et sombre, commutés depuis le menu
 * utilisateur) sont couverts : toute valeur posée ici pour l'un a son
 * pendant pour l'autre.
 */

/* ==========================================================================
   Police d'affichage
   ========================================================================== */

/*
 * Outfit, en fichier variable unique (32 Ko, tous les graisses de 100 à 900),
 * servi par AssetMapper depuis `assets/fonts/`. Pas de CDN : une police
 * distante ferait dépendre l'affichage de l'ERP d'un tiers, et le premier
 * rendu de la latence du réseau.
 *
 * Elle ne sert qu'aux titres et aux grands chiffres. Le corps de texte, les
 * tableaux et les formulaires restent sur la pile système d'Inter : c'est
 * elle qui tient la lisibilité à 0,8125 rem dans un tableau de devis dense.
 */
@font-face {
    font-family: "Outfit";
    src: url("../fonts/outfit-latin-wght-normal-3BR0lLl.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Jetons du thème — clair
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    /* --- Palette pop -----------------------------------------------------
     * Tabler dérive tout seul les variantes `-lt` (fond teinté des badges)
     * et `-200` par `color-mix` : il suffit de redéfinir la couleur, son
     * triplet RVB (utilisé par les utilitaires `.text-*`) et sa version
     * assombrie (survol des boutons).
     */
    --tblr-primary: #de2e58;
    --tblr-primary-rgb: 222, 46, 88;
    --tblr-primary-darken: rgb(189, 39, 75);

    --tblr-blue: #4c7df0;
    --tblr-blue-rgb: 76, 125, 240;
    --tblr-blue-darken: rgb(65, 106, 204);

    --tblr-azure: #38a3f1;
    --tblr-azure-rgb: 56, 163, 241;
    --tblr-azure-darken: rgb(48, 139, 205);

    --tblr-indigo: #6366f1;
    --tblr-indigo-rgb: 99, 102, 241;
    --tblr-indigo-darken: rgb(84, 87, 205);

    --tblr-purple: #8b5cf6;
    --tblr-purple-rgb: 139, 92, 246;
    --tblr-purple-darken: rgb(118, 78, 209);

    --tblr-pink: #ec4899;
    --tblr-pink-rgb: 236, 72, 153;
    --tblr-pink-darken: rgb(201, 61, 130);

    --tblr-red: #e5384b;
    --tblr-red-rgb: 229, 56, 75;
    --tblr-red-darken: rgb(195, 48, 64);

    --tblr-orange: #f97316;
    --tblr-orange-rgb: 249, 115, 22;
    --tblr-orange-darken: rgb(212, 98, 19);

    --tblr-yellow: #f5a524;
    --tblr-yellow-rgb: 245, 165, 36;
    --tblr-yellow-darken: rgb(208, 140, 31);

    --tblr-lime: #7cc53f;
    --tblr-lime-rgb: 124, 197, 63;
    --tblr-lime-darken: rgb(105, 167, 54);

    --tblr-green: #2fb37e;
    --tblr-green-rgb: 47, 179, 126;
    --tblr-green-darken: rgb(40, 152, 107);

    --tblr-teal: #0fa697;
    --tblr-teal-rgb: 15, 166, 151;
    --tblr-teal-darken: rgb(13, 141, 128);

    --tblr-cyan: #22b8cf;
    --tblr-cyan-rgb: 34, 184, 207;
    --tblr-cyan-darken: rgb(29, 156, 176);

    /* --- Rampe de gris chauds -------------------------------------------
     * Même échelle de clarté que la rampe d'origine, teinte décalée vers le
     * sable. Les composants qui piochent dedans (surfaces secondaires,
     * séparateurs, texte atténué) se réchauffent sans autre intervention.
     */
    --tblr-gray-50: #faf6f2;
    --tblr-gray-100: #f5efe8;
    --tblr-gray-200: #ece2d8;
    --tblr-gray-300: #dccdbe;
    --tblr-gray-400: #a99a8e;
    --tblr-gray-500: #7a6e66;
    --tblr-gray-600: #574e49;
    --tblr-gray-700: #3d3733;
    --tblr-gray-800: #292421;
    --tblr-gray-900: #1a1512;

    /* --- Surfaces --------------------------------------------------------
     * Le fond de page est crème, les cartes restent blanches : c'est ce
     * contraste-là — et non une ombre marquée — qui détache les cartes.
     */
    --tblr-body-bg: #fbf5ef;
    --tblr-body-bg-rgb: 251, 245, 239;
    --tblr-body-color: #2c2622;
    --tblr-body-color-rgb: 44, 38, 34;
    --tblr-bg-surface-primary: #ffffff;
    --tblr-bg-surface-secondary: #f7f0e9;
    --tblr-bg-surface-tertiary: #faf5f0;
    --tblr-bg-forms: #ffffff;

    --tblr-border-color: #ece2d8;
    --tblr-border-color-translucent: rgba(44, 38, 34, 0.09);
    --tblr-border-active-color: var(--tblr-primary);

    --tblr-secondary: #6f6560;
    --tblr-secondary-rgb: 111, 101, 96;
    --tblr-secondary-darken: rgb(94, 86, 82);
    --tblr-muted: #6f6560;
    --tblr-disabled-color: #a99a8e;
    --tblr-active-bg: rgba(222, 46, 88, 0.08);

    /* Les liens reprennent la primaire : ce sont les mêmes gestes. */
    --tblr-link-color: var(--tblr-primary);
    --tblr-link-color-rgb: var(--tblr-primary-rgb);
    --tblr-link-hover-color: var(--tblr-primary-darken);

    /* --- Formes ----------------------------------------------------------
     * `--tblr-border-radius-scale` multiplie TOUS les rayons de Tabler d'un
     * coup (boutons, champs, badges, menus). Un seul curseur pour la
     * rondeur générale ; les cartes, plus grandes, ont le leur en dessous.
     */
    --tblr-border-radius-scale: 1.7;
    --tblr-card-border-radius: 1.125rem;

    /*
     * `.card` déclare `--tblr-card-box-shadow: var(--tblr-shadow-card)`, et
     * Tabler ne définit jamais `--tblr-shadow-card` : les cartes sortent donc
     * sans ombre. La définir ici suffit à les faire flotter, sans toucher à
     * une seule règle de Tabler.
     */
    --tblr-shadow-card: 0 1px 2px rgba(58, 42, 36, 0.04), 0 12px 28px -18px rgba(58, 42, 36, 0.22);
    --tblr-box-shadow: 0 1px 2px rgba(58, 42, 36, 0.05), 0 10px 24px -14px rgba(58, 42, 36, 0.24);
    --tblr-box-shadow-sm: 0 1px 2px rgba(58, 42, 36, 0.06);
    --tblr-box-shadow-lg: 0 24px 48px -24px rgba(58, 42, 36, 0.32);

    /* --- Typographie ----------------------------------------------------- */
    --app-font-display: "Outfit", var(--tblr-font-sans-serif);

    /*
     * Base de mélange des teintes de brique. `--tone` est posé par une classe
     * `.tone-*` sur l'élément ; le mélange, lui, doit être écrit à l'endroit
     * où il sert : un `color-mix()` rangé dans une variable de `:root` y
     * serait résolu contre le `--tone` de `:root`, c'est-à-dire contre rien.
     */
    --app-tone-ink-base: #2a1c16;

    /* Fond de la barre latérale : crème plus soutenu que la page. */
    --app-sidebar-bg: #f4eae0;
    --app-sidebar-color: #6b5f58;
}

/* ==========================================================================
   Jetons du thème — sombre
   ==========================================================================
   Le sélecteur reprend mot pour mot celui de Tabler : le second membre
   (`body[...] [...]`) est plus spécifique, l'omettre laisserait Tabler gagner
   sur les écrans imbriqués.

   Le sombre de Tabler est un bleu de nuit (#111827). Ici c'est une encre
   chaude : le thème clair étant crème, un sombre bleuté donnerait l'impression
   de deux applications différentes. */

[data-bs-theme="dark"],
body[data-bs-theme="dark"] [data-bs-theme="light"] {
    --tblr-body-bg: #191411;
    --tblr-body-bg-rgb: 25, 20, 17;
    --tblr-body-color: #f0e7e0;
    --tblr-body-color-rgb: 240, 231, 224;

    --tblr-bg-surface: #241d19;
    --tblr-bg-surface-primary: #241d19;
    --tblr-bg-surface-secondary: #1f1916;
    --tblr-bg-surface-tertiary: #2b231e;
    --tblr-bg-forms: #1f1916;

    --tblr-border-color: #3a2f29;
    --tblr-border-color-translucent: rgba(255, 236, 222, 0.12);

    --tblr-secondary: #b0a29a;
    --tblr-secondary-rgb: 176, 162, 154;
    --tblr-muted: #b0a29a;
    --tblr-disabled-color: #6b5f58;
    --tblr-active-bg: rgba(255, 122, 150, 0.14);

    /* Le corail profond manque de présence sur fond sombre : on l'éclaircit
       plutôt que de garder une couleur qui s'y éteint. */
    --tblr-primary: #ff5c7e;
    --tblr-primary-rgb: 255, 92, 126;
    --tblr-primary-darken: rgb(217, 78, 107);
    --tblr-primary-fg: #2a0d15;

    --tblr-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -18px rgba(0, 0, 0, 0.7);
    --tblr-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
    --tblr-box-shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.8);

    --app-tone-ink-base: #fff6f0;
    --app-sidebar-bg: #201a16;
    --app-sidebar-color: #b0a29a;
}

/* ==========================================================================
   Teintes de brique
   ==========================================================================
   Une classe = une teinte, posée dans le gabarit. Le fichier CSS n'a donc
   rien à savoir des briques métier : ajouter « Contrats de maintenance »
   revient à choisir une classe existante dans le tableau `nav`, pas à
   revenir écrire du style ici.

   `--tone-2` n'est utile qu'aux dégradés. */

.tone-primary { --tone: var(--tblr-primary); --tone-2: #ff7a6b; }
.tone-coral   { --tone: #ff6b6b;             --tone-2: #ffa15c; }
.tone-teal    { --tone: var(--tblr-teal);    --tone-2: #4ad6c0; }
.tone-green   { --tone: var(--tblr-green);   --tone-2: #7ad39a; }
.tone-blue    { --tone: var(--tblr-blue);    --tone-2: #63b3f5; }
.tone-azure   { --tone: var(--tblr-azure);   --tone-2: #6fd0f5; }
.tone-indigo  { --tone: var(--tblr-indigo);  --tone-2: #8f86ff; }
.tone-purple  { --tone: var(--tblr-purple);  --tone-2: #c084fc; }
.tone-pink    { --tone: var(--tblr-pink);    --tone-2: #f9a8d4; }
.tone-orange  { --tone: var(--tblr-orange);  --tone-2: #fbbf24; }
.tone-yellow  { --tone: var(--tblr-yellow);  --tone-2: #fcd34d; }
.tone-cyan    { --tone: var(--tblr-cyan);    --tone-2: #67e8f9; }

/* ==========================================================================
   Typographie
   ========================================================================== */

.page-title,
.card-title,
.empty-title,
.modal-title,
.navbar-brand,
.h1, .h2, .h3,
h1, h2, h3 {
    font-family: var(--app-font-display);
    letter-spacing: -0.02em;
}

.page-title {
    font-weight: 700;
    font-size: 1.625rem;
}

/* Le sur-titre devient l'étiquette colorée de la page. */
.page-pretitle {
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tblr-primary);
}

/* Les chiffres alignés en colonne : sans chasse fixe, un total change de
   largeur à chaque frappe. */
.card .h1,
.card .h2,
.stat-tile-value {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Barre latérale
   ========================================================================== */

.navbar-vertical {
    --tblr-navbar-bg: var(--app-sidebar-bg);
    --tblr-navbar-color: var(--app-sidebar-color);
    --tblr-navbar-border-color: transparent;
    --tblr-navbar-active-color: var(--tblr-body-color);
    background-color: var(--app-sidebar-bg);
}

.navbar-vertical .navbar-brand {
    font-weight: 700;
    font-size: 1.0625rem;
    padding-block: 1rem;
}

/*
 * L'entrée active de Tabler est un filet de 3 px collé au bord gauche. On lui
 * substitue une pastille arrondie teintée : c'est le repère le plus lisible
 * sur un fond crème, où un filet fin se perd.
 */
.navbar-vertical .navbar-collapse .nav-item.active::after,
.navbar-vertical .nav-item.active::after {
    display: none;
}

.navbar-vertical .navbar-nav {
    gap: 0.125rem;
}

.navbar-vertical .navbar-nav > .nav-item > .nav-link {
    border-radius: 0.875rem;
    margin-inline: 0.5rem;
    padding-block: 0.5rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar-vertical .navbar-nav > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--tblr-body-color);
}

.navbar-vertical .navbar-nav > .nav-item.active > .nav-link {
    background-color: color-mix(in srgb, var(--tone, var(--tblr-primary)) 16%, transparent);
    color: color-mix(in oklab, var(--tone, var(--tblr-primary)) 70%, var(--app-tone-ink-base));
    font-weight: 600;
}

/*
 * La pastille d'icône est portée par le `<i>` et non par `.nav-link-icon` :
 * ce dernier porte `d-lg-inline-block`, un utilitaire en `!important` qu'on
 * ne peut pas passer en `grid` sans le contredire.
 */
.navbar-vertical .nav-link-icon > i {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.625rem;
    font-size: 1rem;
    background-color: color-mix(in srgb, var(--tone, var(--tblr-primary)) 14%, transparent);
    color: var(--tone, var(--tblr-primary));
    transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar-vertical .nav-item.active .nav-link-icon > i {
    background-color: var(--tone, var(--tblr-primary));
    color: #ffffff;
}

.navbar-vertical .nav-link-icon {
    margin-right: 0.625rem;
}

/* Le bloc utilisateur en pied de barre. */
.navbar-vertical .mt-auto .nav-link {
    border-radius: 0.875rem;
    margin-inline: 0.5rem;
    padding: 0.5rem;
}

.navbar-vertical .mt-auto .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:hover,
[data-bs-theme="dark"] .navbar-vertical .mt-auto .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   Cartes
   ========================================================================== */

.card {
    border-color: var(--tblr-border-color);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* `.card-link` est une carte cliquable : elle se soulève sous le curseur.
   C'est le seul retour qui distingue une carte qu'on peut ouvrir. */
.card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(58, 42, 36, 0.06), 0 18px 32px -18px rgba(58, 42, 36, 0.35);
}

.card-header,
.card-footer {
    border-color: var(--tblr-border-color);
}

/* ==========================================================================
   Tuiles de chiffres (tableau de bord)
   ==========================================================================
   Une tuile porte sa teinte via `.tone-*` : fond très légèrement teinté,
   chiffre et pastille d'icône dans la même famille. Quatre tuiles alignées
   donnent quatre couleurs — c'est là que le tableau de bord cesse d'être
   une grille de cadres blancs. */

.stat-tile {
    position: relative;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--tone, var(--tblr-primary)) 10%, var(--tblr-bg-surface));
    border-color: color-mix(in srgb, var(--tone, var(--tblr-primary)) 24%, transparent);
}

.stat-tile .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-tile-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--tone, var(--tblr-primary)) 45%, var(--app-tone-ink-base));
}

.stat-tile-value {
    font-family: var(--app-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: color-mix(in oklab, var(--tone, var(--tblr-primary)) 72%, var(--app-tone-ink-base));
}

/* L'icône en filigrane : elle donne son caractère à la tuile sans jamais
   passer devant le chiffre. */
.stat-tile-icon {
    position: absolute;
    right: -0.5rem;
    bottom: -1rem;
    font-size: 5rem;
    line-height: 1;
    color: var(--tone, var(--tblr-primary));
    opacity: 0.16;
    pointer-events: none;
}

/* ==========================================================================
   Bandeau d'appel à l'action
   ==========================================================================
   Un seul dégradé dans toute l'application, réservé à ce qui réclame un
   geste. Multiplier les aplats dégradés userait l'effet en une semaine. */

.banner-gradient {
    border: 0;
    color: #ffffff;
    background-image: linear-gradient(120deg, var(--tone, var(--tblr-primary)) 0%, var(--tone-2, #ff9a6b) 100%);
    box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--tone, var(--tblr-primary)) 70%, transparent);
}

/*
 * `.alert-icon` fixe sa couleur sur celle de l'alerte, et `.text-secondary` est
 * un utilitaire — donc en `!important` chez Tabler. Sur un dégradé, les deux
 * sortiraient en gris foncé : ce sont les deux seuls endroits du fichier où
 * `!important` est la seule issue, et c'est pour contrer un `!important`.
 */
.banner-gradient .alert-icon {
    color: #ffffff;
    font-size: 1.25rem;
}

.banner-gradient .text-secondary {
    color: #ffffff !important;
    opacity: 0.85;
}

/* Le bouton posé sur le dégradé s'inverse : blanc plein, texte coloré. */
.banner-gradient .btn-banner {
    background-color: #ffffff;
    border-color: #ffffff;
    color: color-mix(in oklab, var(--tone, var(--tblr-primary)) 80%, #000000);
    font-weight: 600;
}

.banner-gradient .btn-banner:hover {
    background-color: #ffffff;
    color: #000000;
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
    font-weight: 600;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn:not(:disabled):not(.disabled):hover {
    transform: translateY(-1px);
}

.btn:not(:disabled):not(.disabled):active {
    transform: translateY(0);
}

/* Les boutons pleins portent une ombre de leur propre couleur : c'est ce qui
   les fait « poser » sur la page plutôt que d'y être découpés. */
.btn-primary {
    box-shadow: 0 6px 16px -8px rgba(var(--tblr-primary-rgb), 0.85);
}

.btn-primary:hover {
    box-shadow: 0 10px 20px -8px rgba(var(--tblr-primary-rgb), 0.9);
}

/* ==========================================================================
   Badges, pastilles, onglets de filtre
   ========================================================================== */

/* Tabler expose ses propres variables sur `.badge` : les redéfinir au même
   endroit vaut mieux que d'écraser les propriétés qu'elles alimentent. */
.badge {
    --tblr-badge-border-radius: 100rem;
    --tblr-badge-font-weight: 600;
    --tblr-badge-padding-x: 0.5rem;
    letter-spacing: 0.01em;
}

/* Les onglets de filtre (Tous / Brouillon / Envoyé…) : pastille pleine et
   compteur lisible dans les deux états. */
.nav-pills {
    --tblr-nav-pills-border-radius: 100rem;
    --tblr-nav-pills-link-active-color: var(--tblr-primary);
    --tblr-nav-pills-link-active-bg: rgba(var(--tblr-primary-rgb), 0.12);
    gap: 0.25rem;
}

.nav-pills .nav-link {
    font-weight: 500;
    padding-inline: 0.875rem;
}

.nav-pills .nav-link.active {
    font-weight: 600;
}

.nav-pills .nav-link.active .badge {
    background-color: var(--tblr-primary) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Tableaux
   ========================================================================== */

.table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tblr-secondary);
    border-bottom-color: var(--tblr-border-color);
}

.table tbody tr {
    transition: background-color 0.12s ease;
}

/* Le survol de ligne guide l'œil jusqu'au bout d'une ligne large — un
   tableau de devis en compte six colonnes. */
.card-table tbody tr:hover,
.table-hover tbody tr:hover {
    background-color: rgba(var(--tblr-primary-rgb), 0.05);
}

/* ==========================================================================
   Formulaires
   ========================================================================== */

.form-control,
.form-select {
    border-color: var(--tblr-border-color);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.16);
}

.form-label {
    font-weight: 600;
}

/* ==========================================================================
   Alertes, menus, modales
   ========================================================================== */

.alert {
    border-radius: 1rem;
}

.dropdown-menu {
    border-radius: 1rem;
    border-color: var(--tblr-border-color);
    box-shadow: var(--tblr-box-shadow-lg);
    padding: 0.375rem;
}

.dropdown-item {
    border-radius: 0.625rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(var(--tblr-primary-rgb), 0.08);
}

.modal-content {
    border-radius: 1.25rem;
    border-color: var(--tblr-border-color);
}

/* ==========================================================================
   États vides
   ==========================================================================
   L'icône passe dans une pastille ronde teintée : un écran vide devient une
   invitation plutôt qu'un constat. */

.empty-icon {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background-color: rgba(var(--tblr-primary-rgb), 0.12);
    color: var(--tblr-primary);
}

.empty-icon > .icon {
    width: auto;
    height: auto;
    font-size: 2rem;
}

.empty-title {
    font-weight: 700;
}

/* ==========================================================================
   Avatars, barres de progression
   ========================================================================== */

/*
 * Les initiales se détachent sur un dégradé plutôt que sur un gris. Les
 * avatars photo posent leur image en `style=""` : l'attribut l'emporte sur
 * cette règle, ils ne sont pas touchés.
 */
.avatar {
    background-image: linear-gradient(135deg, var(--tblr-primary) 0%, #ff9a6b 100%);
    color: #ffffff;
    font-weight: 600;
    --tblr-avatar-box-shadow: none;
}

.progress {
    border-radius: 100rem;
    background-color: var(--tblr-bg-surface-secondary);
}

.progress-bar {
    border-radius: 100rem;
}

/* ==========================================================================
   Écrans hors application (connexion, mot de passe oublié)
   ==========================================================================
   Deux halos de couleur très diffus derrière la carte : c'est le premier
   écran de la journée, il n'a aucune raison d'être gris. */

.page-center {
    background-image:
        radial-gradient(60rem 30rem at 12% -10%, rgba(var(--tblr-primary-rgb), 0.16), transparent 60%),
        radial-gradient(50rem 28rem at 92% 108%, rgba(var(--tblr-teal-rgb), 0.16), transparent 60%);
    background-repeat: no-repeat;
}

.page-center .navbar-brand {
    font-size: 1.75rem;
}

/* ==========================================================================
   Mouvement
   ==========================================================================
   Les soulèvements et les fondus sont du confort : ils disparaissent dès que
   le système signale une préférence pour un affichage sans animation. */

@media (prefers-reduced-motion: reduce) {
    .card,
    .btn,
    .table tbody tr,
    .navbar-vertical .nav-link,
    .navbar-vertical .nav-link-icon > i,
    .form-control,
    .form-select {
        transition: none;
    }

    .card-link:hover,
    .btn:not(:disabled):not(.disabled):hover {
        transform: none;
    }
}