/* VATTOL — coque applicative privée.
   Un atelier de décision calme : navigation bleu nuit, surface papier, vert réservé à l'action. */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  color-scheme: light;
  --primary: var(--v-encre);
  --secondary: var(--v-encre-2);
  --accent: var(--v-balise-fonce);
  --primary-fg: #fff;
  --body-fg: var(--v-texte);
  --body-bg: var(--v-papier);
  --body-quiet-color: var(--v-texte-doux);
  --body-loud-color: var(--v-encre);
  --header-color: var(--v-encre);
  --header-branding-color: var(--v-encre);
  --header-bg: #fff;
  --header-link-color: var(--v-encre-2);
  --breadcrumbs-bg: var(--v-papier);
  --breadcrumbs-fg: var(--v-texte-doux);
  --breadcrumbs-link-fg: var(--v-encre-2);
  --link-fg: var(--v-encre-2);
  --link-hover-color: var(--v-balise-fonce);
  --link-selected-fg: var(--v-balise-fonce);
  --hairline-color: var(--v-ligne);
  --border-color: #d4cbbd;
  --error-fg: var(--v-stop);
  --message-success-bg: var(--v-ok-pale);
  --message-warning-bg: var(--v-vigilance-pale);
  --message-error-bg: var(--v-stop-pale);
  --darkened-bg: #efeae0;
  --selected-bg: var(--v-balise-pale);
  --selected-row: var(--v-balise-pale);
  --button-fg: #fff;
  --button-bg: var(--v-encre);
  --button-hover-bg: var(--v-encre-2);
  --default-button-bg: var(--v-balise-fonce);
  --default-button-hover-bg: #08553e;
  --delete-button-bg: var(--v-stop);
  --delete-button-hover-bg: #8e1e18;
  --object-tools-fg: var(--v-encre);
  --object-tools-bg: var(--v-balise-pale);
  --object-tools-hover-bg: #c9eee2;
  --font-family-primary: var(--v-police);
  --font-family-monospace: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--v-papier); }
body { font-size: 15px; line-height: 1.5; letter-spacing: -.005em; }
::selection { color: #fff; background: var(--v-encre-2); }
a { text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible { outline: 3px solid var(--v-balise-fonce); outline-offset: 2px; }

#header {
  min-height: 68px;
  padding: 0 30px;
  gap: 24px;
  border: 0;
  border-bottom: 1px solid var(--v-ligne);
  box-shadow: 0 5px 18px rgba(15, 35, 56, .04);
  position: relative;
  z-index: 30;
}
#branding { min-width: 320px; }
#site-name { margin: 0; }
#site-name a { display: inline-flex; align-items: center; gap: 14px; color: var(--v-encre); text-decoration: none; letter-spacing: -.02em; }
#site-name img { width: 164px; height: auto; }
.vigie-espace { font-size: 13px; font-weight: 600; color: var(--v-texte-doux); padding-left: 12px; border-left: 1px solid var(--v-ligne); letter-spacing: 0; }
#user-tools { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin: 0 0 0 auto; font-size: 12px; line-height: 1.2; letter-spacing: 0; text-transform: none; }
#user-tools a { border: 0; color: var(--v-texte-doux); white-space: nowrap; }
#user-tools a:hover { color: var(--v-encre); }
.vigie-user { color: var(--v-encre); font-weight: 700; padding: 7px 10px; background: var(--v-surface-2); border-radius: 8px; }
#logout-form button { color: var(--v-stop); font: inherit; font-weight: 650; text-transform: none; }
#logout-form button:hover { color: #7f1914; }
.vigie-mobile-nav { display: none; }

nav[aria-label="Breadcrumbs"] { border-bottom: 1px solid var(--v-ligne); }
.breadcrumbs { padding: 9px 34px; min-height: 38px; color: var(--v-texte-doux); font-size: 12px; background: var(--v-papier); }
.breadcrumbs a { color: var(--v-encre-2); }

.main { align-items: stretch; }
.toggle-nav-sidebar { flex-basis: 28px; width: 28px; border-color: var(--v-ligne); background: var(--v-papier); color: var(--v-encre); }
.toggle-nav-sidebar:hover, .toggle-nav-sidebar:focus { background: var(--v-surface); }
.toggle-nav-sidebar::before { content: "›"; font-size: 22px; }
.main.shifted .toggle-nav-sidebar::before { content: "‹"; }
#nav-sidebar {
  flex: 0 0 248px;
  left: -249px;
  margin-left: -249px;
  max-height: calc(100vh - 38px);
  padding: 22px 14px 24px;
  border: 0;
  background: var(--v-encre);
  color: rgba(246, 243, 236, .72);
  scrollbar-color: rgba(255,255,255,.24) transparent;
}
.main.shifted > #nav-sidebar { margin-left: 0; }
.main.shifted > #nav-sidebar + .content { max-width: calc(100% - 276px); }
.main > #nav-sidebar + .content { max-width: calc(100% - 28px); }
.vigie-nav-intro { padding: 0 10px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.vigie-nav-intro strong { display: block; color: #fff; font-size: 14px; }
.vigie-nav-intro span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; }
#nav-filter { width: calc(100% - 8px); margin: 14px 4px 17px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; font-size: 12px; }
#nav-filter::placeholder { color: rgba(255,255,255,.52); }
#nav-filter:focus { border-color: var(--v-balise); }
.vigie-nav-label { margin: 17px 10px 6px; color: rgba(246,243,236,.48); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.vigie-nav-list { width: 100%; border-collapse: separate; border-spacing: 0 2px; }
.vigie-nav-list tr { background: transparent; }
.vigie-nav-list th { padding: 0 !important; border: 0; background: transparent; }
.vigie-nav-list a { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 8px 10px; border-radius: 8px; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 560; text-decoration: none; }
.vigie-nav-list a:hover { color: #fff; background: rgba(255,255,255,.08); }
.vigie-nav-list a[aria-current="page"] { color: var(--v-encre); background: var(--v-balise); font-weight: 740; }
.vigie-nav-list svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vigie-nav-list tr:first-child svg path:first-child { fill: currentColor; stroke: none; }
.vigie-nav-footer { margin: 24px 10px 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.vigie-nav-footer a { color: rgba(255,255,255,.78); font-size: 12px; }
.vigie-nav-footer span { display: block; margin-top: 5px; color: rgba(255,255,255,.42); font-size: 11px; }

.content { min-width: 0; background: var(--v-papier); }
#content { width: min(100%, 1460px); padding: 30px 38px 56px; }
#content h1 { color: var(--v-encre); font-size: 28px; font-weight: 750; letter-spacing: -.025em; }
#content h2 { color: var(--v-encre); }
.messagelist { margin: 22px 38px 0; }
.messagelist li { border-radius: 10px; background-position: 14px 13px; box-shadow: 0 8px 24px rgba(15,35,56,.06); }

.module, .inline-group { border: 1px solid var(--v-ligne); border-radius: 12px; background: var(--v-surface); overflow: hidden; }
.module h2, .module caption, .inline-group h2 { padding: 12px 16px; color: var(--v-encre); background: var(--v-surface-2); border-bottom: 1px solid var(--v-ligne); font-size: 13px; font-weight: 740; letter-spacing: 0; text-transform: none; }
.form-row { padding: 15px 18px; border-color: #eee8de; }
.aligned label { color: var(--v-texte-doux); font-weight: 620; }
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"],
input[type="tel"], textarea, select, .vTextField { min-height: 38px; padding: 8px 10px; border-color: #cfc6b8; border-radius: 7px; background: #fff; color: var(--v-texte); font-size: 14px; }
textarea { line-height: 1.5; }
input:focus, textarea:focus, select:focus { border-color: var(--v-encre-2); box-shadow: 0 0 0 3px rgba(28,58,87,.12); }
.help, p.help, form p.help, div.help, form div.help { color: var(--v-texte-doux); font-size: 12px; }
.submit-row { padding: 12px 14px; border: 1px solid var(--v-ligne); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(15,35,56,.08); }
.button, input[type="submit"], input[type="button"], .submit-row input, a.button { min-height: 38px; padding: 9px 15px; border-radius: 8px; font-weight: 700; letter-spacing: 0; }
.object-tools a { border-radius: 8px; font-weight: 700; }
#changelist .actions { padding: 12px; border-radius: 10px; background: var(--v-surface-2); }
#changelist table { border: 1px solid var(--v-ligne); border-radius: 10px; overflow: hidden; }
#changelist table thead th { padding: 11px 10px; color: var(--v-texte-doux); background: var(--v-surface-2); font-size: 11px; letter-spacing: .04em; }
#changelist table tbody td, #changelist table tbody th { padding: 11px 10px; border-color: #eee8de; }
.paginator { border-top: 0; }

.vigie-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 4px 0 34px; }
.vigie-page-header h1 { margin: 0 0 7px; }
.vigie-page-header p { max-width: 65ch; margin: 0; color: var(--v-texte-doux); }
.vigie-launchpad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--v-ligne); }
.vigie-launchpad a { display: flex; flex-direction: column; gap: 4px; padding: 22px 8px; border-bottom: 1px solid var(--v-ligne); color: var(--v-encre); text-decoration: none; }
.vigie-launchpad a:nth-child(odd) { padding-right: 28px; }
.vigie-launchpad a:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--v-ligne); }
.vigie-launchpad a:hover strong { color: var(--v-balise-fonce); }
.vigie-launchpad strong { font-size: 17px; }
.vigie-launchpad span { color: var(--v-texte-doux); font-size: 13px; }

#content, #content-main, .main > .content { min-width: 0; }
.inline-group .tabular { overflow-x: auto; max-width: 100%; }

@media (max-width: 1024px) {
  #header { padding: 0 20px; }
  #branding { min-width: auto; }
  .vigie-espace { display: none; }
  #user-tools a:not(:last-of-type) { display: none; }
  #content { padding: 26px 24px 46px; }
}

@media (max-width: 767px) {
  body #header { min-height: auto; padding: 11px 16px 0; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0; }
  #header #branding { width: auto; flex: 1 1 auto; margin: 0; text-align: left; }
  #header #site-name { margin: 0; }
  #site-name img { width: 136px; height: auto; }
  #header #user-tools { width: auto; flex: 0 0 auto; margin: 0 0 0 auto; padding: 0; }
  #user-tools .vigie-user, #user-tools a { display: none !important; }
  #logout-form button { padding: 7px 0; }
  #header .vigie-mobile-nav { order: 3; display: flex; flex: 0 0 calc(100% + 32px); width: calc(100% + 32px); margin: 10px -16px 0; padding: 0 12px; overflow-x: auto; border-top: 1px solid var(--v-ligne); }
  .vigie-mobile-nav a { padding: 11px 9px; color: var(--v-encre-2); font-size: 12px; font-weight: 700; white-space: nowrap; text-decoration: none; }
  .main.shifted > #nav-sidebar + .content, .main > #nav-sidebar + .content { width: 100%; max-width: 100%; }
  nav[aria-label="Breadcrumbs"], .breadcrumbs { display: none; }
  #content { padding: 22px 16px 42px; }
  .messagelist { margin: 14px 16px 0; }
  #content h1 { font-size: 24px; }
  .vigie-page-header { display: block; }
  .vigie-page-header .button { display: inline-flex; margin-top: 18px; }
  .vigie-launchpad { grid-template-columns: 1fr; }
  .vigie-launchpad a:nth-child(n) { padding: 18px 4px; border-left: 0; }
  .aligned .form-row > div { padding-left: 0; }
  .aligned label { width: auto; float: none; display: block; padding: 0 0 6px; }
  .submit-row { position: static; margin-top: 18px; }
}

@media (prefers-reduced-motion: no-preference) {
  a, button, input, select, textarea { transition: color .18s ease-out, background-color .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out; }
}