/* ==========================================================================
   Base commune — tokens dérivés, mise en page et composants (ALX-0028).
   Ne pas y mettre de couleur propre à un client : c'est le rôle de theme.css.
   Style : thème de la console Alexime, avec du relief (ombres teintées,
   fonds de blocs dégradés légers, halos de page, effets au survol).
   Sommaire : 1. Tokens  2. Socle  3. Mise en page  4. Composants
              5. Fenêtres et notifications  6. Impression  7. Animations
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Valeurs par défaut, redéfinies dans theme.css. */
  --brand: #1f5f7a;
  --accent: #d9824a;
  --radius: 14px;
  --density: 1; /* 1 = compacte (bureau), 1.2 = confortable (terrain, tablette) */
  --font-body: system-ui, sans-serif;
  --font-display: system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --success: #2e8a5f;
  --warning: #c98a12;
  --danger: #c2453d;
  --info: #3b73c4;
  --violet: #7a5cc4;

  --ink: #16303d;
  --muted: #5c7180;
  --bg: #f3f6f9;
  --surface: #ffffff;
  --surface-2: #f5f8fa;
  --line: #dfe7ed;
  --line-strong: #c8d5de;

  /* Couleurs dérivées de la marque. */
  --brand-strong: color-mix(in oklab, var(--brand) 80%, black);
  --brand-soft: color-mix(in oklab, var(--brand) 13%, var(--surface));
  --brand-softer: color-mix(in oklab, var(--brand) 6%, var(--surface));
  --brand-ink: var(--brand);
  --on-brand: #ffffff;
  --accent-soft: color-mix(in oklab, var(--accent) 16%, var(--surface));

  /* Fond de page : deux halos (marque, accent) sur un fond clair. */
  --halo-1: color-mix(in oklab, var(--brand) 12%, var(--bg));
  --halo-2: color-mix(in oklab, var(--accent) 11%, var(--bg));
  /* Fond des blocs : dégradé très léger vers la teinte du bloc (--tint). */
  --tint: var(--brand);
  --block-bg: linear-gradient(165deg, var(--surface) 45%, color-mix(in oklab, var(--tint) 5%, var(--surface)));

  /* Ombres teintées de la couleur du texte (plus douces qu'un noir). */
  --shadow-color: 22 48 61;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 6%), 0 1px 3px rgb(var(--shadow-color) / 5%);
  --shadow-md: 0 2px 4px rgb(var(--shadow-color) / 5%), 0 8px 22px rgb(var(--shadow-color) / 9%);
  --shadow-lg: 0 20px 56px rgb(var(--shadow-color) / 18%);
  --focus: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);

  --radius-sm: calc(var(--radius) * 0.65);
  --radius-lg: calc(var(--radius) * 1.3);
  --radius-pill: 999px;

  /* Espacements (multipliés par la densité) et hauteur des contrôles. */
  --space-1: calc(4px * var(--density));
  --space-2: calc(8px * var(--density));
  --space-3: calc(12px * var(--density));
  --space-4: calc(16px * var(--density));
  --space-5: calc(24px * var(--density));
  --space-6: calc(32px * var(--density));
  --control-h: calc(40px * var(--density));
  --control-h-sm: calc(32px * var(--density));
  --card-pad: clamp(16px, 2.2vw, calc(24px * var(--density)));

  --fast: 140ms;
  --soft: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --topbar-h: 64px;
  --page-max: none;
  --gutter: clamp(16px, 2.5vw, 40px);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e3eaee;
    --muted: #93a4ae;
    --bg: #0e161b;
    --surface: #162129;
    --surface-2: #1b2831;
    --line: #26343d;
    --line-strong: #34454f;
    --brand-ink: color-mix(in oklab, var(--brand) 55%, white);
    --brand-soft: color-mix(in oklab, var(--brand) 28%, var(--surface));
    --brand-softer: color-mix(in oklab, var(--brand) 14%, var(--surface));
    --accent-soft: color-mix(in oklab, var(--accent) 24%, var(--surface));
    --halo-1: color-mix(in oklab, var(--brand) 22%, var(--bg));
    --halo-2: color-mix(in oklab, var(--accent) 12%, var(--bg));
    --block-bg: linear-gradient(165deg, var(--surface) 45%, color-mix(in oklab, var(--tint) 10%, var(--surface)));
    --shadow-color: 0 0 0;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 25%), 0 10px 24px rgb(0 0 0 / 30%);
    --shadow-lg: 0 24px 60px rgb(0 0 0 / 50%);
    color-scheme: dark;
  }
}

/* 2. Socle ----------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 520px at 8% -8%, var(--halo-1), transparent 70%),
    radial-gradient(900px 480px at 96% 0%, var(--halo-2), transparent 65%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 15px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0; color: var(--ink); }
h1 { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-strong); }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

.icon { flex: none; }
.mono { font-family: var(--font-mono); font-size: 0.9em; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--on-brand); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* 3. Mise en page ---------------------------------------------------------- */

/* En-tête : collant, translucide et flouté. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h);
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  box-shadow: 0 1px 0 rgb(var(--shadow-color) / 3%), 0 6px 18px rgb(var(--shadow-color) / 4%);
}
.topbar-inner {
  height: 100%; max-width: var(--page-max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); border-radius: var(--radius-sm); }
.brand:hover { color: var(--ink); }
.brand-mark {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: calc(var(--radius) * 0.75);
  background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand) 55%, var(--accent)));
  color: var(--on-brand); font: 700 16px/1 var(--font-display);
  box-shadow: 0 2px 6px color-mix(in oklab, var(--brand) 35%, transparent), inset 0 1px 0 rgb(255 255 255 / 25%);
  transition: transform var(--soft) var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.04); }
.brand-name { font: 650 1.05rem/1 var(--font-display); letter-spacing: -0.01em; }

.nav { flex: 1; display: flex; align-items: center; gap: 16px; margin-left: 8px; }
.nav-list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--muted); text-decoration: none; font-weight: 540;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--brand-softer); }
.nav-link.is-active { color: var(--brand-ink); background: var(--brand-soft); }
.nav-link.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -13px; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 40%, var(--accent)));
}

/* Menus déroulants (<details> natif : fonctionne sans JavaScript) */
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; user-select: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-chevron { color: var(--muted); transition: transform var(--fast) var(--ease); }
.nav-menu details[open] .nav-chevron { transform: rotate(180deg); }
.nav-menu details[open] > summary { color: var(--ink); background: var(--brand-softer); }
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; min-width: 250px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  animation: pop var(--fast) var(--ease);
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-weight: 520; white-space: nowrap;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.nav-item .icon { color: var(--muted); transition: color var(--fast) var(--ease); }
.nav-item:hover { background: var(--brand-softer); color: var(--ink); transform: translateX(2px); }
.nav-item:hover .icon { color: var(--brand-ink); }
.nav-item.is-active { background: var(--brand-soft); color: var(--brand-ink); }
.nav-item.is-active .icon { color: var(--brand-ink); }
.nav-item-button { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }

/* Compte (tout à droite) */
.user-menu { display: flex; align-items: center; gap: 6px; margin: 0; }
.user-link { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--radius-pill); color: var(--ink); transition: background-color var(--fast) var(--ease); }
.user-link:hover, .user-link.is-active, .user-menu details[open] > .user-link { background: var(--brand-softer); }
.user-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in oklab, var(--accent) 30%, var(--surface)));
  color: color-mix(in oklab, var(--accent) 75%, var(--ink));
  font-weight: 650; font-size: 0.85rem; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent);
}
.user-name { font-weight: 560; font-size: 0.9rem; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown { left: auto; right: 0; min-width: 220px; }
.user-dropdown form { margin: 0; padding-top: 2px; border-top: 1px solid var(--line); }
@media (min-width: 861px) { .nav > .user-menu { margin-left: auto; } }

.nav-toggle {
  display: none; margin-left: auto;
  padding: 8px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); cursor: pointer;
}

.page {
  flex: 1;
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding: clamp(20px, 3.5vw, 36px) var(--gutter) 48px;
  display: flex; flex-direction: column; gap: var(--space-5);
}
.page:focus { outline: none; box-shadow: none; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.eyebrow { color: var(--brand-ink); font-size: 0.78rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 6px; }
.lead { color: var(--muted); margin-top: 6px; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 0.86rem; margin-bottom: calc(var(--space-5) * -0.5); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-ink); text-decoration: underline; }

.footer {
  max-width: var(--page-max); width: 100%; margin: 0 auto;
  padding: 20px var(--gutter) 28px; color: var(--muted); font-size: 0.85rem;
  display: flex; gap: 16px; justify-content: center;
}
.footer a { color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-5); }
.layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row + .row { margin-top: 12px; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.grow { flex: 1; }
.title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }

@media (max-width: 960px) { .layout-aside { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--topbar-h) 0 auto 0;
    flex-direction: column; align-items: stretch; margin-left: 0;
    max-height: calc(100dvh - var(--topbar-h)); overflow-y: auto;
    padding: 12px var(--gutter) 20px;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--soft) var(--ease), transform var(--soft) var(--ease), visibility 0s linear var(--soft);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .nav-list { flex-direction: column; }
  .nav-link { padding: 12px; font-size: 1rem; min-height: 44px; }
  .nav-link.is-active::after { display: none; }
  .nav-dropdown { position: static; box-shadow: none; border: 0; padding: 0 0 6px 12px; min-width: 0; animation: none; background: none; }
  .user-menu { padding-top: 12px; border-top: 1px solid var(--line); }
  .user-name { flex: 1; max-width: none; }
}

/* 4. Composants ------------------------------------------------------------ */

/* Bloc : surface au fond légèrement dégradé, liseré de couleur optionnel.
   `--tint` donne la teinte (marque par défaut) : .tone-* la change. */
.card {
  position: relative;
  background: var(--block-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--card-pad);
}
.card-accent { border-top: 3px solid var(--tint); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-4); }
.card-title { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .table-wrap { margin: 0; }
.card-head-padded { padding: var(--card-pad) var(--card-pad) 0; }
.card-pad { padding: 0 var(--card-pad) var(--card-pad); }
.card-muted { background: var(--brand-softer); border-style: dashed; box-shadow: none; }

/* Blocs cliquables : relief au survol. */
a.card, .card-link, .tile, .stat {
  transition: transform var(--soft) var(--ease), box-shadow var(--soft) var(--ease), border-color var(--soft) var(--ease);
}
a.card:hover, .card-link:hover, .tile:hover, .stat:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--tint) 35%, var(--line));
}
a.card:active, .stat:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Teintes : fond d'icône, liseré, dégradé des blocs. */
.tone-brand { --tint: var(--brand); }
.tone-accent { --tint: var(--accent); }
.tone-success { --tint: var(--success); }
.tone-warning { --tint: var(--warning); }
.tone-danger { --tint: var(--danger); }
.tone-info { --tint: var(--info); }
.tone-violet { --tint: var(--violet); }

/* Accueil : salutation, indicateurs, tuiles par domaine */
.greeting h1 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; }
.greeting .lead { margin-top: 4px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); }
.stat {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: var(--space-4) calc(var(--space-4) + 2px);
  background: var(--block-bg); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.stat:hover { color: var(--ink); }
.stat-icon {
  grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, color-mix(in oklab, var(--tint) 16%, var(--surface)), color-mix(in oklab, var(--tint) 26%, var(--surface)));
  color: color-mix(in oklab, var(--tint) 85%, var(--ink));
}
.stat-label { color: var(--muted); font-size: 0.84rem; }
.stat-value { font: 650 1.55rem/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--space-4); }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 170px;
  padding: calc(var(--space-5) - 2px) var(--space-5) var(--space-4); overflow: hidden;
  background: linear-gradient(160deg, var(--surface) 40%, color-mix(in oklab, var(--tint) 9%, var(--surface)));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--tint), color-mix(in oklab, var(--tint) 30%, var(--surface))); }
.tile:nth-child(4n + 2) { --tint: var(--accent); }
.tile:nth-child(4n + 3) { --tint: var(--success); }
.tile:nth-child(4n + 4) { --tint: var(--violet); }
.tile-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.tile-desc { color: var(--muted); font-size: 0.88rem; }
.tile-links { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tile-links a {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill);
  color: var(--ink); text-decoration: none; font-weight: 560; font-size: 0.9rem;
  background: color-mix(in oklab, var(--tint) 10%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tint) 14%, transparent);
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.tile-links a:hover { background: color-mix(in oklab, var(--tint) 20%, var(--surface)); transform: translateY(-1px); }
.tile-links a .icon { color: color-mix(in oklab, var(--tint) 80%, var(--ink)); }

/* Boutons : un seul bouton principal (.btn) par écran ; les autres en secondaire ou discret. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h); padding: 0 calc(16px * var(--density));
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 88%, white), var(--brand));
  color: var(--on-brand);
  font: 600 0.94rem/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgb(var(--shadow-color) / 12%), 0 3px 10px color-mix(in oklab, var(--brand) 22%, transparent), inset 0 1px 0 rgb(255 255 255 / 18%);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), filter var(--fast) var(--ease);
}
.btn:hover { color: var(--on-brand); filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 2px 4px rgb(var(--shadow-color) / 12%), 0 6px 16px color-mix(in oklab, var(--brand) 30%, transparent), inset 0 1px 0 rgb(255 255 255 / 18%); }
.btn:active { transform: translateY(0); filter: brightness(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
.btn:focus-visible { border-radius: var(--radius-pill); box-shadow: var(--focus); }
.btn-secondary {
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); color: var(--ink);
  border-color: var(--line-strong); box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  color: var(--brand-ink); background: linear-gradient(180deg, var(--surface), var(--brand-softer));
  border-color: color-mix(in oklab, var(--brand) 40%, var(--line)); box-shadow: var(--shadow-md);
}
.btn-ghost { background: transparent; color: var(--brand-ink); box-shadow: none; }
.btn-ghost:hover { color: var(--brand-ink); background: var(--brand-soft); box-shadow: none; transform: none; }
.btn-danger { background: linear-gradient(180deg, color-mix(in oklab, var(--danger) 88%, white), var(--danger)); box-shadow: 0 3px 10px color-mix(in oklab, var(--danger) 22%, transparent); }
.btn-sm { min-height: var(--control-h-sm); padding: 0 calc(12px * var(--density)); font-size: 0.86rem; }
/* Bouton au libellé long (ALX-0057, repris de KIN-0030) : il passe à la ligne au
   lieu de dépasser de sa carte sur un écran étroit (.btn est en nowrap). */
.btn-wrap { max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; padding-block: 8px; }
.btn-icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn-icon:hover { background: var(--brand-soft); color: var(--brand-ink); }

/* Pastilles (statuts, priorités) */
.badge {
  --tone: var(--brand);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, color-mix(in oklab, var(--tone) 10%, var(--surface)), color-mix(in oklab, var(--tone) 16%, var(--surface)));
  color: color-mix(in oklab, var(--tone) 80%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 18%, transparent);
  font-size: 0.79rem; font-weight: 600; white-space: nowrap;
}
.badge-muted { --tone: var(--muted); }
.badge.tone-success { --tone: var(--success); }
.badge.tone-warning { --tone: var(--warning); }
.badge.tone-danger { --tone: var(--danger); }
.badge.tone-info { --tone: var(--info); }
.badge.tone-muted { --tone: var(--muted); }

.status-nouveau { --tone: var(--info); }
.status-qualifie { --tone: var(--violet); }
.status-en_cours { --tone: var(--brand); }
.status-a_valider { --tone: var(--warning); }
.status-en_attente_client { --tone: var(--accent); }
.status-clos { --tone: var(--muted); }
.priority-p1 { --tone: var(--danger); }
.priority-p2 { --tone: var(--warning); }
.priority-p3 { --tone: var(--info); }
.priority-p4 { --tone: var(--muted); }

/* Boutons de filtre (en haut d'une liste), avec compteur */
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); text-decoration: none; font-weight: 560; font-size: 0.88rem;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.filter-chip:hover { color: var(--ink); border-color: color-mix(in oklab, var(--brand) 35%, var(--line)); background: var(--brand-softer); }
.filter-chip.is-active { color: var(--brand-ink); border-color: color-mix(in oklab, var(--brand) 45%, var(--line)); background: var(--brand-soft); }
.filter-count { min-width: 22px; padding: 1px 7px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--brand) 10%, var(--surface)); font-size: 0.78rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Onglets (boutons [data-tab] et panneaux [data-panel] dans [data-tabs], voir app.js) */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.tab {
  position: relative; padding: 8px 14px; border: 0; background: none; font: inherit; font-weight: 540;
  color: var(--muted); cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.tab:hover { color: var(--ink); background: var(--brand-softer); }
.tab.is-active { color: var(--brand-ink); }
.tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
.tab-panel { padding-top: var(--space-4); }

/* Formulaires */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }
.form-wide { max-width: 860px; }
.form-narrow { max-width: 520px; }
.form-section { border: 0; margin: 0; padding: 0 0 8px; }
.form-section + .form-section { border-top: 1px solid var(--line); padding-top: 20px; }
.form-section legend { font: 650 1rem/1.2 var(--font-display); padding: 0; margin-bottom: 14px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.field { display: flex; flex-direction: column; gap: 6px; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.field-full { grid-column: 1 / -1; }
.field-short { max-width: 200px; }
.field-label { font-weight: 580; font-size: 0.9rem; }
.field-hint { color: var(--muted); font-size: 0.82rem; }
.optional { color: var(--muted); font-weight: 400; font-size: 0.82rem; }
.field-error { display: flex; align-items: center; gap: 6px; color: var(--danger); font-size: 0.84rem; font-weight: 520; }
input:not([type="checkbox"], [type="radio"]), select, textarea {
  width: 100%; min-height: var(--control-h); padding: calc(9px * var(--density)) 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit;
  box-shadow: inset 0 1px 2px rgb(var(--shadow-color) / 4%);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
textarea { resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in oklab, var(--brand) 35%, var(--line-strong)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); background: var(--surface); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 25%, transparent) !important; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.check-card { align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.check-card:hover { border-color: color-mix(in oklab, var(--brand) 30%, var(--line)); }
.check-card input { margin-top: 3px; }
.check-card:has(input:checked) { border-color: color-mix(in oklab, var(--brand) 50%, var(--line)); background: var(--brand-softer); }
.segmented { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); }
.segmented label { position: relative; padding: 6px 14px; border-radius: var(--radius-pill); cursor: pointer; font-weight: 540; color: var(--muted); transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.segmented label:hover { color: var(--ink); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.segmented label:has(input:focus-visible) { box-shadow: var(--focus); }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
.toolbar select { width: auto; min-width: 190px; }
.search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.search .icon { position: absolute; left: 13px; color: var(--muted); pointer-events: none; }
.search input { padding-left: 40px; border-radius: var(--radius-pill); }

/* Messages */
.alert {
  --tone: var(--info);
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: linear-gradient(165deg, color-mix(in oklab, var(--tone) 8%, var(--surface)), color-mix(in oklab, var(--tone) 13%, var(--surface)));
  border: 1px solid color-mix(in oklab, var(--tone) 25%, var(--surface));
  border-left: 4px solid var(--tone);
  color: color-mix(in oklab, var(--tone) 72%, var(--ink));
}
.alert .icon { margin-top: 2px; }
.alert-success { --tone: var(--success); }
.alert-warning { --tone: var(--warning); }
.alert-danger { --tone: var(--danger); }
.alert-info { --tone: var(--info); }

/* Tableau : en-tête teinté, survol de ligne, ligne entière cliquable */
.table-wrap { overflow-x: auto; margin: 0 calc(var(--card-pad) * -1); }
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th, .table td { padding: calc(11px * var(--density)) var(--card-pad); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { background: color-mix(in oklab, var(--brand) 4%, var(--surface-2)); color: var(--muted); font-size: 0.76rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }
.table tbody tr { transition: background-color var(--fast) var(--ease); }
.table tbody tr:hover { background: var(--brand-softer); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.is-muted td { opacity: 0.55; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .wrap { white-space: normal; }
.table-clickable tbody tr { position: relative; cursor: pointer; }
.row-link { color: var(--ink); text-decoration: none; font-weight: 580; transition: color var(--fast) var(--ease); }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { box-shadow: none; }
.table-clickable tbody tr:hover .row-link { color: var(--brand-ink); }
.table-clickable tbody tr:has(.row-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--brand); }

/* Fiche : liste de faits */
.facts { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.facts div { display: flex; justify-content: space-between; gap: 12px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 560; text-align: right; overflow-wrap: anywhere; }
.facts-grand { padding-top: 8px; border-top: 1px solid var(--line); font-size: 1.05rem; }
.facts-grand dt { color: var(--ink) !important; font-weight: 650; }
.notes { white-space: pre-wrap; color: var(--ink); }

/* État vide */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 48px 24px; }
.empty p { color: var(--muted); max-width: 46ch; }
.empty-icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in oklab, var(--tint) 7%, var(--surface)), color-mix(in oklab, var(--tint) 18%, var(--surface)));
  color: color-mix(in oklab, var(--tint) 85%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tint) 15%, transparent);
}

/* Utilitaires */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.text-danger { color: var(--danger); }

/* Écrans de connexion : carte centrée, étroite */
.auth {
  width: 100%; max-width: 420px; margin: clamp(16px, 8vh, 72px) auto 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow-md);
}
.auth .form { width: 100%; margin-top: 8px; text-align: left; }
.auth .alert { width: 100%; text-align: left; }
.auth-wide { max-width: 600px; }
/* Code de connexion à 6 chiffres (ALX-0041). ALX-0057 (repris de KIN-0030) :
   « input.code-input », de même poids que la règle générale des champs
   (input:not(…)) et placée après elle, passe devant (« .code-input » seul était
   moins spécifique : son « font: inherit » annulait la taille) ; 15ch :
   « 123 456 » tient en entier. */
input.code-input { font-size: 1.4rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; width: 100%; max-width: 15ch; }

.prose h2 { font-size: 1.05rem; margin: 18px 0 6px; }
.prose h2:first-child { margin-top: 0; }

/* Comptes */
.user-row-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.user-row-form input[name="display_name"] { min-width: 160px; flex: 1; }
.user-actions { display: flex; flex-wrap: wrap; gap: 4px; }
/* Pourquoi un compte ne peut pas être supprimé (ALX-0053) : texte discret, sous les boutons. */
.user-actions-hint { flex-basis: 100%; margin: 2px 0 0; color: var(--muted); font-size: 0.8rem; max-width: 34ch; }
/* ALX-0057 (repris de KIN-0030) : dans un tableau (.table td : nowrap), la raison passe à la ligne. */
.table .user-actions-hint { white-space: normal; }

/* 5. Fenêtres et notifications ------------------------------------------- */

/* Fenêtre modale (<dialog> natif) : 3 tailles. dialog-wide = 90 % de l'écran. */
.dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
dialog:not([open]) { display: none !important; }
.dialog[open] { display: flex; flex-direction: column; animation: pop var(--soft) var(--ease); }
.dialog::backdrop { background: rgb(22 48 61 / 42%); backdrop-filter: blur(3px); }
.dialog-md { width: min(720px, calc(100vw - 32px)); }
.dialog-wide, .dialog:has([data-dialog-wide]) { width: min(90vw, 1400px); max-width: 90vw; max-height: 90dvh; }
.dialog [data-remote-body] { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dialog [data-remote-body] > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dialog-head, .dialog-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--space-4) var(--space-5); }
.dialog-head { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--brand-softer), var(--surface)); }
.dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5); color: var(--ink); }
.dialog-foot { justify-content: flex-end; border-top: 1px solid var(--line); background: var(--surface-2); }

/* Notifications éphémères */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius);
  background: color-mix(in oklab, var(--ink) 94%, var(--brand)); color: var(--surface); box-shadow: var(--shadow-lg);
  animation: toast-in var(--soft) var(--ease);
}
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--soft) var(--ease), transform var(--soft) var(--ease); }

/* 6. Impression ------------------------------------------------------------- */

/* Portrait par défaut ; .print-landscape pour un tableau large (planning…). */
@media print {
  @page { size: A4 portrait; margin: 14mm; }
  @page landscape { size: A4 landscape; margin: 10mm; }
  .print-landscape { page: landscape; }
  body { background: #fff !important; color: #000; }
  .topbar, .footer, .toasts, .no-print, .skip-link, .breadcrumb, .md-widget { display: none !important; }
  .page { padding: 0; }
  .card { background: #fff; box-shadow: none; border-color: #ccc; }
  a { color: inherit; text-decoration: none; }
  tr, .card { break-inside: avoid; }
}

/* 7. Animations ------------------------------------------------------------ */

.page.is-entering > * { animation: rise 320ms var(--ease) both; }
.page.is-entering > *:nth-child(2) { animation-delay: 30ms; }
.page.is-entering > *:nth-child(3) { animation-delay: 60ms; }
.page.is-entering > *:nth-child(n+4) { animation-delay: 90ms; }
.page.is-loading { opacity: 0.55; transition: opacity var(--soft) var(--ease) 80ms; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* Animations réduites : les animations (@keyframes) durent 1 ms partout ; les
   transitions, elles, passent par les jetons --fast et --soft, ramenés à 1 ms.
   ALX-0057 (repris de KIN-0030) : plus de « transition-duration » sur « * » :
   un élément sans transition a « transition-property: all » par défaut, et la
   règle faisait passer en transition left, top, width… (mesures fausses en JS,
   liste placée sous un champ décalée). Seuls les éléments qui déclarent une
   transition sont donc touchés, avec leurs propres propriétés. Toute transition
   doit utiliser --fast ou --soft (vérifié par test/css.test.js). 1 ms et non 0 :
   « transitionend » reste émis (disparition des notifications éphémères). */
@media (prefers-reduced-motion: reduce) {
  :root { --fast: 1ms; --soft: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; }
  a.card:hover, .card-link:hover, .tile:hover, .stat:hover, .btn:hover, .nav-item:hover { transform: none; }
}

/* Outils de l'en-tête (ALX-0038, REN-0018) : roue dentée (administrateur) et
   cloche des notifications, juste à gauche du nom du compte, lui-même tout à
   droite sur ordinateur ; sur le téléphone, dans la barre, à côté du bouton
   du menu. Les menus prennent la place libre (margin-right: auto), donc le nom
   reste à droite même sans roue dentée. */
.topbar-tools { display: flex; align-items: center; gap: 4px; }
.settings-link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--muted); transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--soft) var(--ease); }
.settings-link:hover, .settings-link.is-active { background: var(--brand-softer); color: var(--ink); }
.settings-link:hover .icon { transform: rotate(45deg); transition: transform var(--soft) var(--ease); }
@media (min-width: 861px) {
  .topbar .nav { display: contents; }
  .topbar .nav-list { order: 1; margin-left: 8px; margin-right: auto; }
  .topbar .topbar-tools { order: 2; margin-left: 0; }
  .topbar .nav > .user-menu { order: 3; margin-left: 0; }
}

/* Cloche des notifications (REN-0018, reprise du template ALX-0037 et ALX-0057). */
.bell-slot { display: flex; align-items: center; }
.bell { position: relative; }
.bell > summary { list-style: none; }
.bell > summary::-webkit-details-marker { display: none; }
.bell-button {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: var(--muted); cursor: pointer; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.bell-button:hover, .bell[open] .bell-button { background: var(--brand-softer); color: var(--ink); }
.bell-count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--danger); color: #fff; font: 700 0.68rem/18px var(--font-body); text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.bell-count[hidden] { display: none; }
.bell-panel {
  position: absolute; top: calc(100% + 8px); right: -8px; z-index: 30; width: min(360px, calc(100vw - 24px));
  padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); animation: pop var(--fast) var(--ease);
}
.bell-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bell-head form { margin: 0; }
.bell-title { margin: 0; font-size: 0.74rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 4px 8px; }
.bell-empty { padding: 8px; margin: 0; }
.bell-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 2px; max-height: min(60vh, 420px); overflow-y: auto; }
.bell-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 9px 18px; border-radius: calc(var(--radius-sm) - 2px); color: var(--ink); text-decoration: none; font-size: 0.9rem; position: relative; overflow-wrap: anywhere; }
.bell-item:hover { background: var(--brand-softer); color: var(--ink); }
.bell-item.is-unread { font-weight: 600; background: color-mix(in oklab, var(--brand) 5%, var(--surface)); }
.bell-item.is-unread::before { content: ""; position: absolute; left: 6px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.bell-item small { font-weight: 400; }
.bell-all { display: block; padding: 8px; border-top: 1px solid var(--line); text-align: center; font-size: 0.88rem; }
.bell-page .bell-list { max-height: none; }
@media (max-width: 860px) { .bell-slot { margin-left: 4px; } }
.styleguide-bell { max-width: 420px; }
.styleguide-planning-row { grid-template-columns: 1fr; max-width: 420px; }
/* Logo choisi dans Paramètres : à la place de l'initiale. */
/* Le logo garde ses proportions : aussi haut que possible dans la barre, sans cadre. */
.brand-mark.has-logo { display: block; width: auto; height: auto; max-width: none; padding: 0; border-radius: 0; background: none; box-shadow: none; }
/* Hauteur explicite : une hauteur en % n'est pas appliquée à l'image dans ce bloc. */
.brand-mark.has-logo img { display: block; height: calc(var(--topbar-h) - 18px); width: auto; max-width: 220px; object-fit: contain; }
/* Logo sur fond blanc : en mode clair, le blanc se fond dans l'en-tête ; en mode
   sombre, petite plaque blanche pour qu'il reste lisible. */
.brand-mark.has-logo img { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) {
  .brand-mark.has-logo { padding: 3px 8px; border-radius: 8px; background: #ffffff; }
  .brand-mark.has-logo img { mix-blend-mode: normal; height: calc(var(--topbar-h) - 24px); }
}
.brand:hover .brand-mark.has-logo { transform: none; }
@media (max-width: 860px) { .brand-mark.has-logo img { height: calc(var(--topbar-h) - 24px); max-width: 150px; } }

/* Confirmation intégrée : un premier clic dévoile le vrai bouton. */
.confirm-delete summary { list-style: none; cursor: pointer; display: inline-flex; }
.confirm-delete summary::-webkit-details-marker { display: none; }
.confirm-delete[open] summary { display: none; }

/* Paramètres › Visuel (ALX-0038) */
a.tab { text-decoration: none; display: inline-flex; align-items: center; }
.settings-tabs { margin-bottom: calc(var(--space-2) * -1); }
.logo-field { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.logo-preview { width: 72px; height: 72px; font-size: 28px; flex: none; }
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.color-field { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.color-field.is-custom { border-color: color-mix(in oklab, var(--info) 35%, var(--line)); }
.color-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.color-field-inputs { display: flex; align-items: center; gap: 8px; }
.color-field-inputs input[type="color"] { width: 46px; height: 38px; padding: 2px; border-radius: 10px; cursor: pointer; flex: none; }
.color-field-hex { max-width: 110px; }
.color-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 34px; }
.sample-tab { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; font-size: 0.86rem; }
.sample-accent { --tone: var(--accent); }
.sample-topbar { padding: 6px 14px; border-radius: 8px; background: var(--topbar-bg, var(--ink)); color: #f2f6fa; font-weight: 600; font-size: 0.86rem; }
.swatches { display: inline-flex; gap: 4px; margin-left: auto; }
.swatch { display: inline-block; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%); }
.swatch-brand-strong { background: var(--brand-strong); }
.swatch-brand-soft { background: var(--brand-soft); }
.swatch-brand-softer { background: var(--brand-softer); }
.swatch-bg { background: var(--bg); }
.swatch-halo1 { background: var(--halo-1); }
.swatch-halo2 { background: var(--halo-2); }
.background-preview {
  display: grid; place-items: center; height: 120px; margin-bottom: var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: radial-gradient(420px 160px at 8% -20%, var(--halo-1), transparent 70%), radial-gradient(380px 160px at 96% -10%, var(--halo-2), transparent 65%), var(--bg);
}
.background-preview-card { padding: 10px 18px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 600; }
.settings-actions { position: sticky; bottom: 0; z-index: 5; align-items: center; padding: 12px var(--card-pad); border-radius: var(--radius); background: color-mix(in oklab, var(--surface) 92%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow-md); border-top: 0; }
.settings-actions .muted { margin-right: auto; font-size: 0.86rem; }
.styleguide-themes { margin-top: 12px; }

/* Paramètres › Visuel et Thèmes : palettes, catalogue des thèmes, essai (ALX-0062) */
.palette-row, .palette-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.palette-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.palette-choices legend { width: 100%; margin-bottom: 6px; padding: 0; }
.palette-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px 4px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.88rem; font-weight: 560; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.palette-chip:hover { border-color: color-mix(in oklab, var(--brand) 35%, var(--line)); background: var(--brand-softer); }
.palette-chip[aria-pressed="true"], .palette-chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand); }
.palette-chip:has(input:focus-visible) { box-shadow: var(--focus); }
.palette-swatch { display: block; flex: none; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-5); }
.card.theme-card { display: flex; flex-direction: column; gap: var(--space-4); padding: 0; overflow: hidden; }
.card.theme-card.is-current { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 35%, transparent), var(--shadow-sm); }
.theme-card-preview { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.theme-card-preview iframe { display: block; width: 100%; height: 272px; border: 0; pointer-events: none; }
.theme-card-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-3); padding: 0 var(--card-pad) var(--card-pad); }
.theme-card-body .row { margin-top: auto; }
.theme-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.theme-card-title h3 { margin-right: auto; font-size: 1.1rem; }
/* Page d'aperçu affichée dans la carte (views/settings/theme-preview.ejs). */
.theme-sample { min-height: 0; overflow: hidden; background-attachment: scroll; }
.theme-sample .topbar { position: static; }
.theme-sample-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.theme-sample-main { padding: 14px; }
.theme-sample .card { padding: 14px 16px; }
.theme-sample-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.theme-sample-actions { margin: 12px 0; }
.theme-sample .table th, .theme-sample .table td { padding: 7px 8px; }
/* Bandeau de l'essai d'un thème (« Essayer ») : en bas de l'écran, sur toutes les pages. */
.theme-trial {
  position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px);
  padding: 10px 12px 10px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
}
.theme-trial form { margin: 0; }
.theme-trial-text { flex: 1 1 auto; }
.theme-trial.is-static { position: static; transform: none; max-width: 100%; }
@media (max-width: 560px) { .theme-trial { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; transform: none; } }
@media print { .theme-trial { display: none; } }

/* ==========================================================================
   Règles propres à REN (modules métier), au-dessus de la base commune du
   template (REN-0006 : base reprise d'ALX-0028 et ALX-0038, sans la cloche).
   ========================================================================== */

/* ==========================================================================
   Module métier Rénov Habitat (REN-0002) : clients, chantiers, équipe
   ========================================================================== */
.btn-block { width: 100%; justify-content: center; }
.list-search { margin-bottom: 14px; }
.page-full { max-width: none; }

/* Filtres en haut du tableau des chantiers (composant .filter-chips de la base) */
.filter-chips { margin-bottom: 12px; }
.view-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.site-table td { vertical-align: top; }
.site-reason { font-size: 0.8rem; }

/* Statuts de chantier */
.badge.site-a_etudier { --tone: var(--muted); }
.badge.site-devis_envoye { --tone: var(--info, #2f6fb0); }
.badge.site-accepte { --tone: var(--accent); }
.badge.site-en_cours { --tone: var(--brand); }
.badge.site-termine { --tone: var(--success); }
.badge.site-perdu { --tone: var(--danger); }
.badge.site-annule { --tone: var(--muted); }

/* Kanban des chantiers */
.site-board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.site-col { display: flex; flex-direction: column; gap: 8px; min-height: 200px; padding: 10px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.site-col.is-over { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 6%, var(--bg)); }
.site-col-head { display: flex; justify-content: space-between; align-items: center; }
.site-col-cards { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.site-card {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.88rem; cursor: grab; box-shadow: var(--shadow-sm);
}
.site-card:hover { border-color: var(--brand); }
.site-card.is-dragging { opacity: 0.5; }
.site-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 0.78rem; }
.site-card-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* Accueil */
.site-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-mini a { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.site-mini a:hover strong { color: var(--brand); }

/* Équipe */
.color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; flex: none; }
.color-bleu { background: #2f6fb0; } .color-vert { background: #2e8a5f; } .color-orange { background: #d9822b; } .color-violet { background: #7a5cc4; }
.color-rouge { background: #c2453d; } .color-jaune { background: #d4b106; } .color-gris { background: #7b8794; } .color-rose { background: #d6578f; }
.worker-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.worker-form input[type="text"], .worker-form input[type="tel"], .worker-form select { width: auto; min-width: 110px; }
.worker-form input[name="name"] { min-width: 160px; }
.worker-new { padding: 12px clamp(16px, 2.4vw, 24px); border-top: 1px solid var(--line); }
.table tr.is-muted td { color: var(--muted); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 12px; }
.team-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.team-card h3 { margin: 0; font-size: 1rem; }
.team-card p { margin: 0; }
.team-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.team-new input { width: auto; min-width: 220px; }

/* ==========================================================================
   Planning des chantiers (REN-0003)
   ========================================================================== */
.week-nav { margin: -4px 0 12px; }
.planning-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .planning-layout { grid-template-columns: 1fr; } }
.planning-card { min-width: 0; padding: 12px; }
/* REN-0019 : la zone de défilement reste dans la carte (pas la marge négative des cartes ordinaires). */
.planning-card .table-wrap { margin: 0; }
/* Planning de la semaine (REN-0018, règle de clarté) : un bloc arrondi par
   équipe, et dedans un bloc arrondi par salarié, espacés ; colonnes alignées
   par une même grille (salarié + 6 jours). L'en-tête des jours est décalé de
   la marge intérieure des blocs (équipe 12 px + salarié 10 px). */
.planning-board { display: grid; gap: 16px; min-width: 840px; font-size: 0.84rem; }
.planning-head, .planning-row { display: grid; grid-template-columns: 180px repeat(6, minmax(0, 1fr)); gap: 6px; }
.planning-head { padding: 0 23px; }
.planning-head > div { padding: 8px 6px; font-weight: 600; border-radius: 8px; }
.planning-head-worker { color: var(--muted); }
.planning-head-day.is-today { background: color-mix(in oklab, var(--brand) 10%, var(--surface)); color: var(--brand-ink); }
.planning-team {
  display: grid; gap: 10px; padding: 12px;
  border: 1px solid color-mix(in oklab, var(--line) 80%, var(--muted)); border-radius: var(--radius);
  background: color-mix(in oklab, var(--brand) 3%, var(--bg));
}
.planning-team-title { margin: 0 2px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.planning-team-title .muted { margin-left: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.planning-row {
  padding: 10px; border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.planning-row .day-cell { min-width: 0; padding: 4px; border-radius: 8px; background: color-mix(in oklab, var(--bg) 45%, var(--surface)); }
.planning-row .day-cell.is-today { background: color-mix(in oklab, var(--brand) 6%, var(--surface)); }
.planning-row .day-cell.is-holiday, .planning-head-day.is-holiday { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 6px, var(--surface) 6px, var(--surface) 12px); }
.holiday { display: block; font-weight: 400; font-size: 0.72rem; color: var(--muted); }
.worker-cell { display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px 4px 2px; text-align: left; font-weight: 400; border: 0; }
.worker-cell .color-dot { margin-top: 5px; }
.worker-cell span:not(.color-dot) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.worker-cell small { color: var(--muted); }
.print-link { color: var(--muted); }
.print-link:hover { color: var(--brand); }
.day-cell { height: 58px; }
.chip { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: 6px; text-decoration: none; color: var(--ink);
  background: color-mix(in oklab, var(--brand) 14%, var(--surface)); border-left: 3px solid var(--brand); overflow: hidden; }
.chip + .chip, .chip + .slot-empty, .slot-empty + .chip { margin-top: 3px; }
.chip strong { font-size: 0.8rem; overflow-wrap: anywhere; }
.chip small, .chip .half { font-size: 0.7rem; color: var(--muted); }
.chip-day { height: 100%; }
.chip.is-absence { background: color-mix(in oklab, var(--muted) 14%, var(--surface)); border-left-color: var(--muted); }
.chip.is-outside { border-left-style: dashed; border-left-color: var(--warning); }
.chip:hover { filter: brightness(0.97); }
.slot-empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 24px; border-radius: 6px; color: transparent; text-decoration: none; font-size: 0.8rem; }
.slot-half { height: auto; min-height: 22px; font-size: 0.72rem; }
.day-cell:hover .slot-empty, .slot-empty:focus-visible { color: var(--brand); background: color-mix(in oklab, var(--brand) 8%, transparent); outline: 1px dashed color-mix(in oklab, var(--brand) 40%, transparent); }
.to-place-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.to-place-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.site-schedule { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-schedule li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.site-schedule strong { min-width: 160px; }

/* Fenêtres d'affectation */
.plan-body { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; color: var(--ink); }
.dialog .plan-form { display: flex; flex-direction: column; min-height: 0; }
.plan-page .dialog-foot, .plan-page .plan-body { padding-inline: 0; }
.plan-foot { justify-content: flex-start; }
.plan-foot form { display: flex; gap: 8px; flex-wrap: wrap; }
.segmented { flex-wrap: wrap; align-self: flex-start; }
.plan-form .for-absence { display: none; }
.plan-form:has(input[name="what"][value="absence"]:checked) .for-absence { display: flex; }
.plan-form:has(input[name="what"][value="absence"]:checked) .for-chantier { display: none; }
.date-range { gap: 12px; margin-top: 8px; }
.date-range .field { flex: 1; min-width: 140px; }
.conflicts { margin: 6px 0; padding-left: 18px; }

/* Mon planning (téléphone) */
.mine-list { display: flex; flex-direction: column; gap: 10px; }
.mine-day.is-today { border-color: var(--brand); }
.mine-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }

/* Impression du planning (enregistrer en PDF depuis le navigateur) */
.print-body { background: var(--bg); }
.print-toolbar { display: flex; justify-content: space-between; gap: 8px; max-width: 1100px; margin: 16px auto 0; padding: 0 16px; }
.print-sheet { max-width: 1100px; margin: 12px auto 32px; padding: 24px; background: #fff; color: #111; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.print-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 2px solid var(--brand); padding-bottom: 8px; margin-bottom: 12px; }
.print-head h1 { margin: 0; font-size: 1.4rem; }
.print-brand { margin: 0; color: var(--brand); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.print-week { margin: 0; font-weight: 600; }
.print-sub { margin: 0 0 12px; color: #444; }
.print-h2 { font-size: 1rem; margin: 16px 0 6px; }
.print-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.print-table th, .print-table td { border: 1px solid #bbb; padding: 6px 8px; text-align: left; vertical-align: top; }
.print-table thead th { background: #f0f0f0; }
.print-table tr.is-holiday { background: #f6f6f6; color: #666; }
.print-grid { table-layout: fixed; font-size: 0.75rem; }
.print-grid th:first-child { width: 130px; }
.print-foot { margin-top: 16px; font-size: 0.75rem; color: #777; }
@media print {
  @page planning { size: A4 landscape; margin: 10mm; }
  .print-sheet { page: planning; }
  .no-print { display: none !important; }
  .print-body { background: #fff; }
  .print-sheet { box-shadow: none; margin: 0; padding: 0; max-width: none; border-radius: 0; }
  .print-table tr { break-inside: avoid; }
}

/* Planning : plusieurs activités par demi-journée, tâches internes (REN-0003) */
.day-cell { height: auto; min-height: 58px; }
.slot-add { display: block; padding: 1px 4px; border-radius: 4px; font-size: 0.7rem; color: color-mix(in oklab, var(--muted) 70%, transparent); text-decoration: none; line-height: 1.5; }
.day-cell:hover .slot-add, .slot-add:focus-visible { color: var(--brand); }
.slot-add:hover { background: color-mix(in oklab, var(--brand) 8%, transparent); }
.day-cell .chip { margin: 2px 0; }
.day-cell .slot-empty { min-height: 22px; }
.chip.is-task { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); border-left-color: var(--accent); }
.chip.is-double { box-shadow: inset 0 0 0 1px var(--warning); }
.plan-form .for-tache { display: none; }
.plan-form:has(input[name="what"][value="tache"]:checked) .for-tache { display: flex; }
.plan-form:has(input[name="what"][value="tache"]:checked) .for-chantier { display: none; }
.print-sep { border: 0; border-top: 1px dashed #bbb; margin: 4px 0; }
@media (hover: none) { .slot-add { color: var(--brand); } }

/* Glisser-déposer dans la grille du planning (REN-0003) */
.half-zone { display: flex; flex-direction: column; min-height: 22px; border-radius: 6px; }
.half-zone + .half-zone { border-top: 1px dashed color-mix(in oklab, var(--line) 70%, transparent); margin-top: 2px; padding-top: 2px; }
.half-zone.is-over { background: color-mix(in oklab, var(--brand) 9%, transparent); outline: 1px dashed var(--brand); }
.chip[draggable="true"] { cursor: grab; }
.chip.is-dragging { opacity: 0.4; }
.drop-marker { height: 3px; margin: 1px 0; border-radius: 2px; background: var(--brand); }

/* Matin / après-midi : pastilles de couleur et zones distinctes (REN-0003) */
:root { --period-am: #2f86b8; --period-pm: #8a5cc4; }
@media (prefers-color-scheme: dark) { :root { --period-am: #5aa7d6; --period-pm: #a985dc; } }
.half-badge {
  display: inline-block; min-width: 1.7em; padding: 0 4px; margin-right: 4px; border-radius: 4px;
  font-size: 0.65rem; font-weight: 700; line-height: 1.5; text-align: center; color: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.half-badge.is-am { background: var(--period-am); }
.half-badge.is-pm { background: var(--period-pm); }
.half-badges { display: inline-flex; }
.half-badges .half-badge { margin-right: 2px; }
.half-badges .half-badge:last-child { margin-right: 6px; }
.half-zone { padding: 2px 3px 2px 6px; border-left: 3px solid transparent; }
.half-zone[data-period="matin"] { border-left-color: var(--period-am); background: color-mix(in oklab, var(--period-am) 6%, transparent); }
.half-zone[data-period="apres_midi"] { border-left-color: var(--period-pm); background: color-mix(in oklab, var(--period-pm) 6%, transparent); }
.half-zone + .half-zone { border-top: 0; margin-top: 4px; padding-top: 2px; }
.half-zone.is-over { background: color-mix(in oklab, var(--brand) 14%, transparent); outline: 2px dashed var(--brand); }
.is-holiday .half-zone { background: transparent; border-left-color: transparent; }
.print-half + .print-half { margin-top: 3px; padding-top: 3px; border-top: 1px solid #ddd; }

/* Devis (REN-0004, repris de la console ALX-0012) ----------------------------- */

.quote-brouillon { --tone: var(--muted); }
.quote-envoye { --tone: var(--info); }
.quote-accepte { --tone: var(--success); }
.quote-refuse { --tone: var(--danger); }
.quote-remplace { --tone: var(--muted); }
.quote-expire { --tone: var(--warning); }

/* Document (aperçu, page client, impression) : toujours sur fond blanc. */
.quote-doc {
  --doc-ink: #17242c; --doc-muted: #5d6d78; --doc-line: #dfe5ea;
  background: #fff; color: var(--doc-ink); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: clamp(20px, 4vw, 48px); font-size: 0.92rem; line-height: 1.5;
  display: flex; flex-direction: column; gap: 22px;
}
.qd-pre { white-space: pre-line; }
.qd-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.qd-from, .qd-to { display: flex; flex-direction: column; gap: 1px; color: var(--doc-muted); }
.qd-company { color: var(--doc-ink); font: 700 1.15rem/1.3 var(--font-display); margin-bottom: 4px; }
.qd-kind { font: 700 1.9rem/1 var(--font-display); color: var(--brand); text-align: right; margin-bottom: 10px; letter-spacing: -0.01em; }
.qd-meta dl { margin: 0; display: grid; gap: 3px; }
.qd-meta dl div { display: flex; justify-content: space-between; gap: 16px; }
.qd-meta dt { color: var(--doc-muted); }
.qd-meta dd { margin: 0; font-weight: 600; }
.qd-to { align-self: flex-end; min-width: min(100%, 300px); padding: 14px 16px; border: 1px solid var(--doc-line); border-radius: 10px; }
.qd-to strong { color: var(--doc-ink); }
.qd-label { font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.qd-title { font-size: 1.15rem; color: var(--doc-ink); }
.qd-intro { color: var(--doc-ink); }
.qd-lines { width: 100%; border-collapse: collapse; }
.qd-lines th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--doc-muted); padding: 8px 10px; border-bottom: 2px solid var(--doc-ink); }
.qd-lines td { padding: 10px; border-bottom: 1px solid var(--doc-line); vertical-align: top; }
.qd-lines .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qd-designation { display: block; font-weight: 600; }
.qd-description { display: block; color: var(--doc-muted); font-size: 0.86rem; margin-top: 2px; }
.qd-section td { padding-top: 18px; font-weight: 700; color: var(--brand); border-bottom-color: var(--doc-line); }
.qd-text td { color: var(--doc-muted); font-style: italic; }
.qd-totals { align-self: flex-end; min-width: min(100%, 320px); }
.qd-totals dl { margin: 0; display: grid; gap: 4px; }
.qd-totals dl div { display: flex; justify-content: space-between; gap: 24px; font-variant-numeric: tabular-nums; }
.qd-totals dt { color: var(--doc-muted); }
.qd-totals dd { margin: 0; font-weight: 600; }
.qd-grand { margin-top: 6px; padding-top: 8px; border-top: 2px solid var(--doc-ink); font-size: 1.1rem; }
.qd-grand dt { color: var(--doc-ink) !important; font-weight: 700; }
.qd-vat-mention { margin-top: 8px; font-size: 0.82rem; color: var(--doc-muted); text-align: right; }
.qd-block h3 { font-size: 0.9rem; margin-bottom: 4px; }
.qd-terms { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--doc-line); font-size: 0.8rem; color: var(--doc-muted); }
.qd-sign { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 14px; }
.qd-sign-box { width: min(100%, 300px); height: 90px; border: 1px dashed var(--doc-line); border-radius: 8px; }
.qd-accepted { align-items: flex-start; padding: 12px 16px; border: 1px solid #2e8a5f; border-radius: 8px; background: #f1f8f4; color: var(--doc-ink); }
.qd-accepted strong { color: #2e8a5f; }
.qd-proof { font-size: 0.74rem; color: var(--doc-muted); }
.qd-signature { display: block; max-width: 260px; max-height: 90px; margin: 4px 0; }

/* Zone de signature (page client) */
.signature-canvas {
  display: block; width: 100%; height: 180px; max-width: 560px;
  background: #fff; border: 1px dashed color-mix(in oklab, var(--brand) 45%, var(--line)); border-radius: var(--radius-sm);
  touch-action: none; cursor: crosshair;
}
.signature-tools { justify-content: space-between; max-width: 560px; }

/* Éditeur de lignes */
.sticky-aside { position: sticky; top: calc(var(--topbar-h) + 16px); }
.quote-editor { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.quote-editor th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.quote-editor th.num { text-align: right; }
.quote-editor td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.quote-editor input, .quote-editor select, .quote-editor textarea { min-height: 36px; padding: 6px 8px; }
.quote-editor textarea[name="line_description"] { margin-top: 4px; font-size: 0.85rem; min-height: 32px; }
.quote-editor td:first-child { min-width: 220px; }
.quote-editor select[name="line_unit"] { min-width: 108px; }
.quote-editor select[name="line_vat"] { min-width: 92px; }
.input-num { width: 100px; text-align: right; font-variant-numeric: tabular-nums; }
.quote-editor td.num { text-align: right; }
.qe-total { font-weight: 650; white-space: nowrap; padding-top: 16px !important; font-variant-numeric: tabular-nums; }
.qe-actions { white-space: nowrap; padding-top: 10px !important; }
.qe-actions .btn-icon { width: 30px; height: 30px; }
.qe-titre td { background: var(--brand-softer); }
.qe-title-input { font-weight: 650; }
.qe-add { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px clamp(16px, 2.4vw, 24px); }

.link-box { border-color: color-mix(in oklab, var(--success) 40%, var(--line)); background: color-mix(in oklab, var(--success) 6%, var(--surface)); display: flex; flex-direction: column; gap: 10px; }
.link-box p { display: flex; gap: 8px; align-items: flex-start; }
.link-box input { min-height: 36px; font-size: 0.85rem; }

/* Page client (lien public) et version imprimable */
.sheet-body { background: var(--bg); }
.sheet { max-width: 920px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.sheet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sheet-brand { font: 650 1rem/1.2 var(--font-display); }
.decision { display: flex; flex-direction: column; gap: 14px; }
.decision-refuse summary { cursor: pointer; color: var(--muted); }
.decision-refuse .form { margin-top: 10px; }

@media print {
  @page { size: A4 portrait; margin: 14mm; }
  body, .sheet-body { background: #fff !important; }
  .topbar, .footer, .toasts, .no-print, .skip-link, .breadcrumb { display: none !important; }
  .sheet { max-width: none; padding: 0; }
  .quote-doc { border: 0; box-shadow: none; padding: 0; font-size: 10.5pt; }
  .qd-lines tr { break-inside: avoid; }
  .qd-totals, .qd-terms { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

.qd-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.qd-parties .qd-to { align-self: stretch; min-width: 0; }
.qd-totals small { font-size: 0.75rem; }
.qd-deposit { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--doc-line); }
.qe-lot td { background: var(--brand-softer); }
.qe-library { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.qe-library select { min-height: 32px; max-width: 360px; padding: 4px 8px; }
.version-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.version-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }

/* Photos des chantiers (REN-0015) */
.photo-uploader { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.photo-uploader .photo-caption { flex: 1 1 220px; }
.photo-uploader .photo-status { flex-basis: 100%; margin: 0; }
.photo-uploader.is-compact { gap: 6px; align-items: center; }
.photo-uploader.is-compact .photo-stage select { padding-block: 6px; }
.photo-pick { cursor: pointer; }
.photo-pick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.photo-group { display: grid; gap: 8px; }
.photo-group-title { margin: 0; font-size: 0.95rem; }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 42vw), 1fr)); gap: 12px; }
.photo-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.photo-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--line); cursor: zoom-in; aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); transition: box-shadow var(--fast) ease, transform var(--fast) ease; }
.photo-thumb:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.photo-thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Image hors du calcul de taille : le cadre 4:3 suit la colonne, quel que soit le format de la photo. */
.photo-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 0.82rem; color: var(--muted); }
.photo-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-zoom { width: min(1240px, 96vw); max-width: 96vw; max-height: 94vh; padding: 0; border: 0; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgb(0 0 0 / 40%); overflow: hidden; }
.photo-zoom::backdrop { background: rgb(10 16 20 / 72%); }
.photo-zoom figure { margin: 0; display: grid; }
.photo-zoom img { max-width: 100%; max-height: calc(94vh - 110px); margin: 0 auto; object-fit: contain; display: block; background: #111; }
.photo-zoom figcaption { padding: 10px 16px 0; }
.photo-zoom-tools { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 12px 16px; }
.mine-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .photo-thumb:hover { transform: none; } }

/* Rentabilité des chantiers (REN-0014) */
.margin-negative { color: var(--danger); }
.margin-low { color: color-mix(in oklab, var(--warning) 75%, var(--ink)); }
.margin-ok { color: color-mix(in oklab, var(--success) 75%, var(--ink)); }
.profit-site th[scope="row"] { background: transparent; text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: 560; color: var(--ink); }
.profit-margin th, .profit-margin td { border-top: 2px solid var(--line); }
.profit-table th a { color: inherit; text-decoration: none; }
.profit-table th a.is-sorted { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Relances d'un devis ou d'une facture (REN-0013) */
.reminder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.reminder-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; }
.reminder-list details { margin-top: 4px; font-size: 0.92rem; }
.reminder-text { white-space: pre-line; overflow-wrap: anywhere; }


/* Factures (REN-0004, lot B) */
.invoice-preparee { --tone: var(--warning); }
.invoice-emise { --tone: var(--info); }
.invoice-en_retard { --tone: var(--danger); }
.invoice-payee { --tone: var(--success); }
.invoice-draft { margin: 0; padding: 8px 12px; border: 1px dashed #c98a12; border-radius: 8px; color: #8a5d0c; font-size: 0.82rem; }
.card-body { padding: clamp(16px, 2.4vw, 24px); }
.billing-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.billing-actions form { margin: 0; }


/* Affecter au chantier (v2) : fenêtre large, une carte par équipe, onglets par salarié */
#remote-dialog:has(.team-form) { width: min(90vw, 1400px); max-width: 90vw; height: 90dvh; max-height: 90dvh; }
.team-form { flex: 1; }
.team-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.team-head .grow { flex: 1 1 280px; }
.slot-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.team-section { display: flex; flex-direction: column; gap: 10px; }
.team-section-title { font-size: 0.95rem; }
.team-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.team-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.team-card:has(input:checked:not(:disabled)) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.team-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.team-card-head .btn { margin-left: auto; }
.slot-caption { font-size: 0.78rem; color: var(--muted); }
.slot-rows { display: flex; flex-direction: column; gap: 4px; }
.slot-row { display: grid; grid-template-columns: 64px auto auto; align-items: center; justify-content: start; gap: 8px; }
.slot-day { font-size: 0.85rem; color: var(--muted); }
.slot-chip { position: relative; display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font-weight: 650; font-size: 0.8rem; cursor: pointer; user-select: none; }
.slot-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.slot-chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.slot-chip.is-libre { color: var(--success); border-color: color-mix(in oklab, var(--success) 45%, var(--line)); }
.slot-chip.is-occupe { color: color-mix(in oklab, var(--warning) 80%, var(--ink)); border-color: color-mix(in oklab, var(--warning) 50%, var(--line)); border-style: dashed; }
.slot-chip.is-absent { color: var(--muted); background: var(--bg); text-decoration: line-through; cursor: not-allowed; }
.slot-chip.is-deja { color: var(--info); background: color-mix(in oklab, var(--info) 10%, var(--surface)); cursor: default; }
.slot-chip:has(input:checked):not(.is-deja) { color: #fff; background: var(--brand); border-color: var(--brand); border-style: solid; }
.slot-legend .slot-chip { min-width: 30px; height: 22px; cursor: default; }
.worker-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.worker-tab { padding: 6px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: none; font: inherit; font-size: 0.88rem; color: var(--muted); cursor: pointer; }
.worker-tab.is-active { color: var(--ink); border-color: var(--line); background: var(--surface); margin-bottom: -1px; font-weight: 600; }
.worker-tab.has-picks::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--brand); vertical-align: middle; }
.worker-panel { max-width: 360px; }
.worker-panel[hidden] { display: none; }

/* Bandeau des versions de test (REN-0011) : rayé, bien visible, au-dessus de l'en-tête. */
.test-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px var(--gutter);
  background: repeating-linear-gradient(135deg, #f6c343 0 14px, #f3b72a 14px 28px); color: #3b2a00;
  font-weight: 650; font-size: 0.88rem; text-align: center;
}
.test-banner .icon { flex: none; }
@media print { .test-banner { display: none; } }