@charset "UTF-8";

/* ============================================================
   MyHomeHearth — identite visuelle "HomeHearth"
   Repris et adapte de jarvisweb/web/css/homehearth-theme.css (panneau sombre,
   accent ambre, typographie mono pour la marque et les donnees, un accent
   de couleur par module) sur la structure Inspinia/Bootstrap 5 de myhomehearth
   (jarvisweb utilisait AdminLTE/Bootstrap 4 - noms de classes differents,
   memes jetons de couleur/typo).
   Charge apres app.min.css (cf. includes/appshell_header.jspf et les pages
   publiques hors coquille) pour pouvoir surcharger ses regles.

   Deux themes, un seul jeu de noms de variables ("encre" sur fond clair,
   fond "encre" avec texte "papier" en sombre - le nom des jetons portait
   deja cette dualite, cf. selecteur dans le bandeau du haut). :root fixe
   les valeurs claires (defaut Bootstrap); [data-bs-theme="dark"] les
   remplace par le panneau sombre d'origine, inchange au pixel pres.
   ============================================================ */

:root {
	--jv-ink:        #faf8f4;
	--jv-ink-raised: #f1ede4;
	--jv-ink-card:   #ffffff;
	--jv-line:       #e3ddd0;
	--jv-brand:      #e8a33d;
	--jv-brand-ink:  #9c6a1e;
	--jv-brand-dim:  #d9c19c;
	--jv-paper:      #211d16;
	--jv-muted:      #6f6a5c;

	--jv-acc-accueil:  #c99a4a;
	--jv-acc-stock:    #4fa090;
	--jv-acc-courses:  #c1714f;
	--jv-acc-repas:    #b3708f;
	--jv-acc-contacts: #5f93b8;
	--jv-acc-recettes: #7686c2;
	--jv-acc-musique:  #e8a33d;
	--jv-acc-video:    #9c7ab0;
	--jv-acc-jardin:   #86a350;

	--jv-ok:   #4f8367;
	--jv-warn: #a67d34;
	--jv-bad:  #a54936;

	--jv-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace;
}

:root[data-bs-theme="dark"] {
	--jv-ink:        #17181b;
	--jv-ink-raised: #1f2124;
	--jv-ink-card:   #232529;
	--jv-line:       #34373c;
	--jv-brand:      #e8a33d;
	--jv-brand-ink:  #e8a33d;
	--jv-brand-dim:  #6b4e22;
	--jv-paper:      #f1ede4;
	--jv-muted:      #99958c;

	--jv-ok:   #6fa383;
	--jv-warn: #c99a4a;
	--jv-bad:  #c1614f;
}

/* ── Marque : mot-cle mono + point pulsant ──
   Signature visuelle commune au site public et a l'appli connectee (cf.
   sidebar.jspf, topbar.jspf, login/register/... et landing.jsp) - le meme
   repere partout: "c'est le meme HomeHearth, il est a vous". */

.jv-brandmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.jv-brandmark .jv-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--jv-brand);
	box-shadow: 0 0 8px 1px rgba(232, 163, 61, .65);
	animation: jv-pulse 2.4s ease-in-out infinite;
	flex: none;
}
@media (prefers-reduced-motion: reduce) {
	.jv-brandmark .jv-dot { animation: none; }
}
@keyframes jv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.jv-brandmark .jv-word {
	font-family: var(--jv-font-mono);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--jv-paper);
}
/* Casse la hauteur fixe/largeur fixe que .logo et .logo-topbar imposaient
   aux <img> Inspinia d'origine - le mot-cle mono n'en a pas besoin. */
.logo .jv-brandmark, .logo-topbar .jv-brandmark { height: auto; width: auto; font-size: 1rem; }

/* ── Structure generale : panneau sombre ── */

body, .wrapper, .content-page, .auth-box {
	background-color: var(--jv-ink) !important;
	color: var(--jv-paper);
}

.sidenav-menu {
	background-color: var(--jv-ink-raised) !important;
	border-right: 1px solid var(--jv-line);
}
.sidenav-menu .side-nav-title { color: var(--jv-muted); font-family: var(--jv-font-mono); letter-spacing: .08em; }
.sidenav-menu .side-nav-link { color: var(--jv-muted) !important; }
.sidenav-menu .side-nav-link:hover { color: var(--jv-paper) !important; background-color: color-mix(in srgb, var(--jv-paper) 6%, transparent); }
.sidenav-menu .side-nav-link.active {
	color: var(--jv-paper) !important;
	background-color: color-mix(in srgb, var(--mod-accent, var(--jv-brand)) 12%, transparent);
	box-shadow: inset 3px 0 0 var(--mod-accent, var(--jv-brand));
}
.sidenav-menu .side-nav-link.active .menu-icon { color: var(--mod-accent, var(--jv-brand)); }
.sidenav-user { border-bottom: 1px solid var(--jv-line); }
.sidenav-user-name { color: var(--jv-paper) !important; }

/* Menu horizontal (data-layout="topnav", cf. includes/horizontalnav.jspf) - meme habillage
   que .sidenav-menu ci-dessus, adapte a une barre horizontale (soulignement bas plutot que
   filet gauche pour l'entree active). */
.topnav {
	background-color: var(--jv-ink-raised) !important;
	border-top: 1px solid var(--jv-line);
	box-shadow: none !important;
}
.topnav .nav-link { color: var(--jv-muted) !important; }
.topnav .nav-link:hover { color: var(--jv-paper) !important; }
.topnav .nav-link.active {
	color: var(--jv-paper) !important;
	background-color: color-mix(in srgb, var(--mod-accent, var(--jv-brand)) 12%, transparent);
	box-shadow: inset 0 -3px 0 var(--mod-accent, var(--jv-brand));
}
.topnav .nav-link.active .menu-icon { color: var(--mod-accent, var(--jv-brand)); }
.topnav-toggle-button { color: var(--jv-paper) !important; }

.app-topbar {
	background-color: var(--jv-ink-raised) !important;
	border-bottom: 1px solid var(--jv-line);
}
.app-topbar .topbar-link { color: var(--jv-paper) !important; }
/* Le bouton "ouvrir/fermer le menu" reprend .btn-primary (texte fonce, prevu pour un
   fond ambre plein), mais Inspinia repeint spécifiquement son fond en blanc translucide
   a 10% dans la barre du haut (.app-topbar .btn-primary, plus specifique que .btn-primary
   seul) - icone foncee sur fond quasi aussi sombre que la barre = illisible sans ceci. */
.app-topbar .btn-primary, .app-topbar .sidenav-toggle-button {
	background-color: var(--jv-ink-card) !important;
	border-color: var(--jv-line) !important;
	color: var(--jv-paper) !important;
}
.app-topbar .btn-primary:hover, .app-topbar .sidenav-toggle-button:hover { background-color: var(--jv-line) !important; }

/* Selecteur clair/sombre (cf. includes/topbar.jspf, #light-dark-mode): affiche l'icone du
   theme vers lequel on bascule en cliquant (soleil en sombre, lune en clair), jamais les deux. */
#light-dark-mode .jv-theme-icon-dark { display: none; }
#light-dark-mode .jv-theme-icon-light { display: inline; }
[data-bs-theme="dark"] #light-dark-mode .jv-theme-icon-dark { display: inline; }
[data-bs-theme="dark"] #light-dark-mode .jv-theme-icon-light { display: none; }

/* Menus deroulants (compte utilisateur, barre du haut et menu lateral) : fond et texte
   explicites plutot que de dependre des jetons Inspinia (memes soucis de contraste que
   .bg-light plus haut). */
.app-topbar .dropdown-menu, .sidenav-user .dropdown-menu {
	background-color: var(--jv-ink-card) !important;
	border-color: var(--jv-line) !important;
}
.app-topbar .dropdown-item, .sidenav-user .dropdown-item { color: var(--jv-paper) !important; }
.app-topbar .dropdown-item:hover, .sidenav-user .dropdown-item:hover { background-color: color-mix(in srgb, var(--jv-paper) 7%, transparent) !important; }
.app-topbar .dropdown-item.text-danger, .sidenav-user .dropdown-item.text-danger { color: var(--jv-bad) !important; }
.app-topbar .dropdown-header, .sidenav-user .dropdown-header { color: var(--jv-muted) !important; }

.footer { background-color: var(--jv-ink-raised); color: var(--jv-muted); border-top: 1px solid var(--jv-line); }

/* ── Cartes : panneau "appareil" ── */

.card {
	background-color: var(--jv-ink-card);
	border: 1px solid var(--jv-line);
	color: var(--jv-paper);
}
.card-header {
	background-color: transparent;
	border-bottom: 2px solid var(--mod-accent, var(--jv-brand));
	color: var(--jv-paper);
}
.card .text-muted { color: var(--jv-muted) !important; }

/* Un accent de couleur par module, pose sur la carte principale de chaque
   page (cf. dashboard.jsp et l'en-tete de chaque module) - entraine la
   couleur de .card-header ci-dessus et sert de repli aux badges/avatars. */
.jv-accent-accueil  { --mod-accent: var(--jv-acc-accueil); }
.jv-accent-jardin   { --mod-accent: var(--jv-acc-jardin); }
.jv-accent-contacts { --mod-accent: var(--jv-acc-contacts); }
.jv-accent-notes    { --mod-accent: var(--jv-acc-accueil); }
.jv-accent-recettes { --mod-accent: var(--jv-acc-recettes); }
.jv-accent-repas    { --mod-accent: var(--jv-acc-repas); }
.jv-accent-stock    { --mod-accent: var(--jv-acc-stock); }
.jv-accent-courses  { --mod-accent: var(--jv-acc-courses); }
.jv-accent-musique   { --mod-accent: var(--jv-acc-musique); }
.jv-accent-video    { --mod-accent: var(--jv-acc-video); }

/* ── Tableaux ── */

.table { color: var(--jv-paper); border-color: var(--jv-line); }
.table thead th {
	color: var(--jv-muted);
	border-color: var(--jv-line);
	font-family: var(--jv-font-mono);
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 600;
}
.table td, .table th { border-color: var(--jv-line); }
.table-hover tbody tr:hover { background-color: rgba(232, 163, 61, .07); color: var(--jv-paper); }
.table > :not(caption) > * > * { background-color: transparent; }

/* ── Boutons ── */

.btn-primary {
	background-color: var(--jv-brand);
	border-color: var(--jv-brand);
	color: #1a1305;
}
.btn-primary:hover, .btn-primary:focus {
	background-color: color-mix(in srgb, var(--jv-brand) 85%, white);
	border-color: var(--jv-brand);
	color: #1a1305;
}
/* --jv-brand-ink plutot que --jv-brand: l'ambre plein (adapte a un fond sombre) manque de
   contraste utilise comme texte sur fond clair - cf. definition des jetons plus haut. */
.btn-outline-primary { color: var(--jv-brand-ink); border-color: var(--jv-brand-ink); }
.btn-outline-primary:hover { background-color: var(--jv-brand-ink); color: var(--jv-ink-card); }
.btn-light { background-color: var(--jv-ink-raised); border-color: var(--jv-line); color: var(--jv-paper); }
.btn-light:hover { background-color: var(--jv-line); color: var(--jv-paper); }

/* ── Alertes : filet de couleur plutot que bloc plein ── */

.alert { border-radius: 6px; border: 1px solid var(--jv-line); border-left: 3px solid transparent; background-color: var(--jv-ink-card); color: var(--jv-paper); }
.alert-danger  { border-left-color: var(--jv-bad); }
.alert-warning { border-left-color: var(--jv-warn); }
.alert-success { border-left-color: var(--jv-ok); }
.alert-info    { border-left-color: var(--jv-acc-contacts); }

/* ── Formulaires ── */

.form-control, .form-select {
	background-color: var(--jv-ink);
	border-color: var(--jv-line);
	color: var(--jv-paper);
}
.form-control:focus, .form-select:focus {
	background-color: var(--jv-ink);
	border-color: var(--jv-brand);
	color: var(--jv-paper);
	box-shadow: 0 0 0 .2rem rgba(232, 163, 61, .18);
}
.form-control::placeholder { color: var(--jv-muted); }
.form-label { color: var(--jv-paper); }
.form-text { color: var(--jv-muted); }

/* ── Bulle avatar (Annuaire, Recettes) ── */

.jv-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--jv-font-mono);
	font-weight: 700;
	font-size: .78rem;
	background: color-mix(in srgb, var(--mod-accent, var(--jv-brand)) 30%, var(--jv-ink-card));
	color: var(--mod-accent, var(--jv-brand));
	border: 1px solid color-mix(in srgb, var(--mod-accent, var(--jv-brand)) 50%, transparent);
	margin-right: 9px;
	flex: none;
}

/* Post-it des notes : garde son jaune et son texte sombre (contraste avec
   le reste du panneau, comme une vraie note collee sur un ecran). */
.card.jv-note { color: #3a3320; }
.card.jv-note .text-muted { color: #6b6142 !important; }

/* ── Frise fine (Notes : evenements a venir) ──
   Reprise a l'identique de jarvisweb/web/css/homehearth-theme.css - distincte de .timeline
   AdminLTE (composant plus lourd, non utilise ici). */
.jv-timeline { position: relative; padding-left: 22px; }
.jv-timeline::before {
	content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: var(--jv-line);
}
.jv-trow { position: relative; padding-bottom: 18px; }
.jv-trow:last-child { padding-bottom: 0; }
.jv-trow::before {
	content: ""; position: absolute; left: -22px; top: 3px; width: 9px; height: 9px; border-radius: 50%;
	background: var(--dot, var(--jv-muted)); box-shadow: 0 0 0 3px var(--jv-ink-card);
}
.jv-trow .when {
	font-family: var(--jv-font-mono); font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--jv-muted);
}
.jv-trow .what { font-size: 1rem; color: var(--jv-paper); margin-top: 2px; }
.jv-trow .tag {
	font-family: var(--jv-font-mono); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase;
	color: var(--dot, var(--jv-muted)); margin-right: 6px;
}

/* ── Page publique (landing) ──
   Les utilitaires Inspinia "bg-light"/"bg-opacity-*" restent un gris clair
   quel que soit data-bs-theme, alors que le texte (lui) devient clair avec le
   theme sombre - texte clair sur fond clair sans ce correctif. */
.bg-light { background-color: var(--jv-ink-raised) !important; }
mark { background-color: rgba(232, 163, 61, .22); color: var(--jv-paper); padding: 0 .15em; }
.avatar-title { color: var(--jv-paper); }

/* ── Visite guidée (TourGuide.js, cf. notes-tour.jsp) ──
   tour.min.css est fige sur un theme clair (couleurs en dur, aucune variable
   CSS) : sans ces surcharges, la bulle gardait son fond blanc d'origine mais
   heritait du texte clair du theme sombre de l'appli (color: var(--jv-paper)
   sur body) - texte clair sur fond blanc, illisible (meme categorie de bug
   que .bg-light ci-dessus). Reprend les jetons "carte" deja utilises pour le
   dropdown du bandeau (cf. .app-topbar .dropdown-menu plus haut). */
.tg-dialog {
	background: var(--jv-ink-card) !important;
	color: var(--jv-paper) !important;
	border: 1px solid var(--jv-line);
}
.tg-arrow { background: var(--jv-ink-card) !important; }
.tg-dialog-btn {
	border-color: var(--jv-line) !important;
	color: var(--jv-paper) !important;
}
.tg-dialog-btn:hover { background: color-mix(in srgb, var(--jv-paper) 8%, transparent); }
.tg-dialog-dots { border-color: var(--jv-line) !important; }
.tg-dot { background: var(--jv-line) !important; }
.tg-dot-active { background: var(--jv-brand) !important; }
.tg-dialog-progress-bar { background: var(--jv-line) !important; }
.tg-bar { background: var(--jv-brand) !important; }