/*
 * 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;
	width: auto;
	height: auto;
}

/*
 * La pastille de non-lus de la messagerie. Tabler pose toute `.badge` d'un
 * lien de navigation en absolu, collée au coin supérieur droit du lien — une
 * puce de notification sur une icône. Ici le lien est une ligne pleine, avec
 * l'icône en tuile : la pastille flotte alors à côté du texte. On la remet
 * dans le flux, poussée à droite et centrée sur la ligne.
 */
.navbar-vertical .navbar-nav > .nav-item > .nav-link .badge {
	position: static;
	transform: none;
	margin-left: auto;
	align-self: center;
}

/* 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;
	}
}