/* ==========================================================================
   Nounelia — Design system (chargé en dernier)
   Structure de l'application, composants, animations et cartes interactives.
   Les couleurs proviennent de la palette active (assets/css/palettes.css), choisie par l'admin.
   ========================================================================== */

:root {
  --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Police arrondie des titres et boutons : douce, « enfance », sans être enfantine */
  --ui-font-display: 'Nunito', 'Inter', system-ui, sans-serif;

  /* Raccourcis vers la palette active : fond, texte, couleur principale, succès, touche chaude */
  --c-ink: var(--ink-700);
  --c-ink-2: var(--ink-600);
  --c-bg: var(--bg);
  --c-bg-2: var(--bg-2);
  --c-brand: var(--brand-400);
  --c-brand-strong: var(--brand-500);
  --c-brand-soft: var(--brand-50);
  --c-ok: var(--ok-500);
  --c-ok-light: var(--ok-300);
  --c-ok-soft: var(--ok-50);
  --c-warm: var(--warm-300);
  --c-warm-deep: var(--warm-700);
  --c-warm-soft: var(--warm-50);

  --ui-bg: var(--c-bg);
  --ui-surface: #FFFFFF;
  --ui-surface-2: var(--c-bg-2);
  --ui-border: var(--line);
  --ui-border-strong: var(--line-strong);
  --ui-text: var(--c-ink);
  --ui-text-2: var(--c-ink-2);
  --ui-muted: var(--muted);
  --ui-faint: var(--faint);

  --ui-success: var(--c-ok);
  --ui-success-soft: var(--c-ok-soft);
  --ui-danger: var(--bad-500);
  --ui-danger-soft: var(--bad-50);
  --ui-warning: var(--c-warm-deep);
  --ui-warning-soft: var(--c-warm-soft);
  --ui-info: var(--c-ink);
  --ui-info-soft: var(--ink-50);

  --ui-radius-sm: 12px;
  --ui-radius: 16px;
  --ui-radius-lg: 22px;
  --ui-radius-xl: 30px;

  /* Ombres à deux couches : un contour net et un halo teinté de la couleur de la palette (relief doux, jamais gris) */
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ink-700) 5%, transparent);
  --ui-shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink-700) 5%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--brand-600) 16%, transparent);
  --ui-shadow: 0 2px 5px color-mix(in srgb, var(--ink-700) 4%, transparent), 0 16px 30px -14px color-mix(in srgb, var(--brand-600) 26%, transparent);
  --ui-shadow-lg: 0 4px 10px color-mix(in srgb, var(--ink-700) 5%, transparent), 0 30px 56px -22px color-mix(in srgb, var(--brand-700) 36%, transparent);

  --ui-ease: cubic-bezier(.2, .8, .2, 1);
  --ui-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ui-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ui-fast: .16s;
  --ui-med: .28s;
  --ui-slow: .7s;

  /* Maille sombre (ardoise + deux halos) des bandeaux : la palette active la colore */
  --ui-mesh-dark:
    radial-gradient(closest-side, color-mix(in srgb, var(--brand-400) 52%, transparent), transparent),
    radial-gradient(closest-side, color-mix(in srgb, var(--warm-400) 30%, transparent), transparent),
    linear-gradient(135deg, var(--ink-700), var(--ink-800));

  --sidebar-w: 268px;
  --sidebar-w-collapsed: 84px;
  --topbar-h: 68px;
}

/* Couleur principale : celle de la palette active */
body {
  --accent: var(--brand-500);
  --accent-strong: var(--brand-600);
  --accent-light: var(--brand-400);
  --accent-soft: var(--brand-50);
  --accent-softer: var(--brand-100);
  --accent-contrast: #FFFFFF;
  --accent-ink: var(--brand-700);

  /* Dégradés et halos dérivés de la couleur principale (suivent la palette active) */
  --accent-grad: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 55%, var(--brand-600) 100%);
  --accent-grad-soft: linear-gradient(135deg, var(--brand-50), color-mix(in srgb, var(--brand-100) 70%, #fff));
  --accent-glow: 0 14px 30px -14px color-mix(in srgb, var(--brand-500) 65%, transparent);
  --accent-ring: 0 0 0 4px color-mix(in srgb, var(--brand-500) 16%, transparent);
}



/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

body {
  font-family: var(--ui-font);
  color: var(--ui-text);
  background: var(--ui-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}
/* Le fond passe sur <html> : le halo animé (z-index négatif) reste ainsi visible, entre le fond et le contenu */
html.ui-ambient { background: var(--ui-bg); }
body.has-shell, body.is-visitor { background: transparent; }
/* Ambiance : trois halos de la palette (couleur principale, touche chaude, succès) qui dérivent lentement derrière le contenu.
   Calque fixe, animé en transform seulement (il reste sur le processeur graphique et ne redessine rien au défilement) et seulement sur les écrans à souris. */
body.has-shell::before, body.is-visitor::before {
  content: ''; position: fixed; inset: -18vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vmax 42vmax at 84% 14%, color-mix(in srgb, var(--brand-300) 44%, transparent), transparent 70%),
    radial-gradient(38vmax 38vmax at 76% 94%, color-mix(in srgb, var(--warm-200) 54%, transparent), transparent 70%),
    radial-gradient(34vmax 34vmax at 36% 60%, color-mix(in srgb, var(--ok-200) 32%, transparent), transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  body.has-shell::before, body.is-visitor::before { animation: ui-aurora 34s ease-in-out infinite alternate; will-change: transform; }
}
@keyframes ui-aurora {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 2.5%, 0) scale(1.07) rotate(1.5deg); }
  100% { transform: translate3d(2.5%, -3%, 0) scale(1.03) rotate(-1.5deg); }
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ui-font-display); font-weight: 800; color: var(--ui-text); letter-spacing: -.01em; }
/* Titres sur fond coloré (.text-white, bandeaux .bg-*) : suivre la couleur du conteneur */
:is(.text-white, .text-light, .bg-primary, .bg-success, .bg-info, .bg-danger, .bg-dark, .bg-secondary, .bg-gradient-primary, .contract-detail-header, .contracts-header, .profile-header, .children-header, .links-header, .admin-hero, .admin-header) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: inherit; }
a { color: var(--accent-strong); }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
kbd {
  font-family: var(--ui-font); font-size: .7rem; font-weight: 600; color: var(--ui-muted);
  background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 6px; box-shadow: none;
}

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 3000; transform: translateY(-150%);
  background: var(--ui-text); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none;
  transition: transform var(--ui-fast) var(--ui-ease);
}
.skip-link:focus { transform: none; color: #fff; }

/* Barre de progression lors des changements de page */
.page-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; pointer-events: none;
  background: var(--accent-light);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
  opacity: 0; transition: width .4s var(--ui-ease), opacity .3s;
}
.page-progress.is-loading { opacity: 1; width: 75%; transition: width 6s cubic-bezier(.1, .7, .1, 1), opacity .2s; }
.page-progress.is-done { opacity: 0; width: 100%; }

/* ==========================================================================
   Structure de l'application
   ========================================================================== */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.shell-sidebar {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-surface) 92%, transparent), color-mix(in srgb, var(--ui-surface) 80%, var(--accent-soft)));
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-right: 1px solid var(--ui-border);
  z-index: 1030;
  transition: width var(--ui-med) var(--ui-ease), flex-basis var(--ui-med) var(--ui-ease), transform var(--ui-med) var(--ui-ease);
}
.shell-brand {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: var(--topbar-h); padding: 0 14px 0 18px; flex-shrink: 0;
}
.shell-brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.shell-brand-link img { width: 44px; height: auto; flex-shrink: 0; transition: transform var(--ui-med) var(--ui-spring); }
.shell-brand-link:hover img { transform: rotate(-6deg) scale(1.06); }
.shell-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.shell-brand-text strong { color: var(--ui-text); font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.shell-brand-text small { color: var(--ui-muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shell-nav { flex: 1; overflow-y: auto; padding: 6px 12px 16px; scrollbar-width: thin; scrollbar-color: var(--ui-border-strong) transparent; }
.shell-nav ul { list-style: none; margin: 0; padding: 0; }
.shell-nav li { margin: 2px 0; }
.shell-nav-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ui-faint); margin: 16px 12px 6px; white-space: nowrap;
  transition: opacity var(--ui-fast);
}
.shell-nav-title:first-child { margin-top: 4px; }
.shell-nav-link {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 6px 10px; border-radius: 12px; text-decoration: none;
  color: var(--ui-text-2); font-weight: 500; font-size: .92rem;
  transition: background var(--ui-fast), color var(--ui-fast), transform var(--ui-fast) var(--ui-ease);
}
.shell-nav-link:hover { background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; }
.shell-nav-link:active { transform: scale(.98); }
.shell-nav-icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px; color: var(--ui-muted); font-size: 1rem;
  transition: background var(--ui-fast), color var(--ui-fast), transform var(--ui-med) var(--ui-spring);
}
.shell-nav-link:hover .shell-nav-icon { color: var(--accent); transform: translateX(2px); }
.shell-nav-link.active {
  background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 30%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent-ink); font-weight: 600;
}
.shell-nav-link.active .shell-nav-icon {
  background: linear-gradient(135deg, var(--accent-light), var(--accent)); color: #fff;
  box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--accent) 65%, transparent);
}
.shell-nav-link.active::before {
  content: ''; position: absolute; left: -12px; top: 22%; bottom: 22%; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--accent-grad);
  animation: ui-grow-y .35s var(--ui-spring);
}
/* Menu long : un fondu en bas signale qu'il reste des rubriques à faire défiler (classe posée par app.js) */
.shell-nav.can-scroll-down { -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent); }
@media (min-width: 993px) { .sidebar-collapsed .shell-nav.can-scroll-down { -webkit-mask-image: none; mask-image: none; } }
.shell-nav-text { flex: 1; overflow: hidden; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Fonctionnalité non incluse dans l'offre : cadenas discret, le lien mène à la page Abonnement */
.shell-nav-lock { margin-left: auto; font-size: .72rem; opacity: .6; }
.shell-nav-link.is-locked .shell-nav-text { opacity: .75; }
.sidebar-collapsed .shell-nav-lock { display: none; }

.shell-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700;
  background: var(--c-brand); color: #fff; box-shadow: 0 0 0 2px var(--ui-surface);
  animation: ui-pop .4s var(--ui-spring);
}
.shell-badge.is-empty { display: none; }
.shell-badge.bump { animation: ui-bump .5s var(--ui-spring); }

.shell-sidebar-footer { padding: 12px; border-top: 1px solid var(--ui-border); }
.shell-user {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px;
  text-decoration: none; color: inherit; transition: background var(--ui-fast);
}
.shell-user:hover { background: var(--ui-surface-2); color: inherit; }
.shell-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.shell-user-text strong { font-size: .86rem; color: var(--ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-user-text small { font-size: .74rem; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menu replié (bureau) */
@media (min-width: 993px) {
  .sidebar-collapsed .shell-sidebar { width: var(--sidebar-w-collapsed); flex-basis: var(--sidebar-w-collapsed); }
  .sidebar-collapsed .shell-brand { padding: 0 8px; justify-content: center; flex-direction: column; height: auto; padding-top: 14px; gap: 6px; }
  .sidebar-collapsed .shell-brand-text,
  .sidebar-collapsed .shell-nav-text,
  .sidebar-collapsed .shell-user-text { display: none; }
  .sidebar-collapsed .shell-nav-title { opacity: 0; height: 0; margin: 8px 0; overflow: hidden; }
  .sidebar-collapsed .shell-nav { padding: 6px 14px; overflow: visible; }
  .sidebar-collapsed .shell-nav-link { justify-content: center; padding: 8px; }
  .sidebar-collapsed .shell-nav-link .shell-badge { position: absolute; top: 2px; right: 2px; }
  .sidebar-collapsed .shell-collapse-btn i { transform: rotate(180deg); }
  .sidebar-collapsed .shell-user { justify-content: center; }
  .sidebar-collapsed .shell-nav-link::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%;
    transform: translate(-6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
    background: var(--ui-text); color: #fff; font-size: .78rem; font-weight: 500;
    padding: 6px 10px; border-radius: 8px; box-shadow: var(--ui-shadow);
    transition: opacity var(--ui-fast), transform var(--ui-fast) var(--ui-ease); z-index: 10;
  }
  .sidebar-collapsed .shell-nav-link:hover::after { opacity: 1; transform: translate(0, -50%); }
}

.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.shell-topbar {
  position: sticky; top: 0; z-index: 1020;
  height: var(--topbar-h); display: flex; align-items: center; gap: 12px;
  padding: 0 clamp(16px, 3vw, 32px);
  background: color-mix(in srgb, var(--ui-bg) 38%, transparent);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ui-med), box-shadow var(--ui-med), background var(--ui-med);
}
.is-scrolled .shell-topbar { border-bottom-color: var(--ui-border); box-shadow: 0 8px 24px -18px color-mix(in srgb, var(--ink-700) 35%, transparent); background: color-mix(in srgb, var(--ui-surface) 80%, transparent); }
.shell-topbar-title { flex: 1; min-width: 0; }
.shell-greeting { display: block; font-weight: 700; font-size: 1.05rem; color: var(--ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shell-icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; border: 1px solid var(--ui-border); background: var(--ui-surface);
  color: var(--ui-text-2); cursor: pointer; flex-shrink: 0;
  transition: background var(--ui-fast), color var(--ui-fast), transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast);
}
.shell-icon-btn:hover { color: var(--accent); background: var(--accent-soft); box-shadow: var(--ui-shadow-sm); }
.shell-icon-btn:active { transform: scale(.94); }
.shell-icon-btn i { transition: transform var(--ui-med) var(--ui-ease); }
.shell-collapse-btn { width: 32px; height: 32px; border-radius: 10px; font-size: .8rem; color: var(--ui-faint); }
.shell-menu-btn { display: none; }

.shell-search {
  display: flex; align-items: center; gap: 10px; min-width: 240px; height: 40px; padding: 0 10px 0 14px;
  border-radius: 12px; border: 1px solid var(--ui-border); background: var(--ui-surface);
  color: var(--ui-faint); font-size: .88rem; cursor: pointer;
  transition: border-color var(--ui-fast), box-shadow var(--ui-fast);
}
.shell-search span { flex: 1; text-align: left; }
.shell-search:hover { border-color: var(--accent-light); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }

.shell-topbar-actions { display: flex; align-items: center; gap: 10px; }
.shell-dot {
  position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-brand); box-shadow: 0 0 0 2px var(--ui-surface);
}
.shell-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--c-brand); animation: ui-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
.shell-dot.is-empty { display: none; }

.shell-avatar-btn {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 4px;
  border-radius: 999px; border: 1px solid var(--ui-border); background: var(--ui-surface);
  color: var(--ui-text-2); cursor: pointer; transition: box-shadow var(--ui-fast), border-color var(--ui-fast);
}
.shell-avatar-btn:hover { border-color: var(--accent-light); box-shadow: var(--ui-shadow-sm); }
.shell-avatar-name { font-weight: 600; font-size: .88rem; }

/* Pastille de formule (fondateur, essai, Premium) */
.plan-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast);
}
.plan-chip:hover { transform: translateY(-1px); box-shadow: var(--ui-shadow); }
.plan-founder { color: var(--c-ink); background: var(--c-warm); box-shadow: 0 6px 16px -10px var(--c-warm-deep); }
.plan-founder i { animation: ui-float 3s ease-in-out infinite; }
.plan-premium { color: var(--accent-ink); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.plan-trial { color: var(--c-ink); background: var(--c-warm-soft); border: 1px solid var(--warm-100); }
.plan-alert { color: var(--ui-danger); background: var(--ui-danger-soft); border: 1px solid var(--bad-100); }
.plan-upgrade { color: #fff; background: var(--accent); position: relative; overflow: hidden; }
.plan-upgrade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%); animation: ui-shine 3.2s ease-in-out infinite; }
.plan-chip:hover, .plan-founder:hover, .plan-upgrade:hover { color: inherit; }
.plan-upgrade:hover { color: #fff; }
.plan-founder:hover { color: var(--c-ink); }
@media (max-width: 576px) { .plan-chip span { display: none; } .plan-chip { width: 36px; padding: 0; justify-content: center; } }

/* Menus déroulants */
.shell-dropdown { position: relative; }
.shell-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; z-index: 1100;
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-lg); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top right;
  transition: opacity var(--ui-fast), transform var(--ui-med) var(--ui-spring), visibility 0s linear var(--ui-med);
}
.shell-dropdown.open .shell-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.shell-menu-profile { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 4px; border-radius: 10px; background: var(--accent-soft); }
.shell-menu-profile strong { display: block; font-size: .9rem; }
.shell-menu-profile small { color: var(--ui-muted); font-size: .76rem; }
.shell-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none;
  border-radius: 10px; color: var(--ui-text-2); font-size: .88rem; text-decoration: none; text-align: left; cursor: pointer;
  transition: background var(--ui-fast), color var(--ui-fast), padding var(--ui-fast);
}
.shell-menu-item i { width: 18px; text-align: center; color: var(--ui-muted); }
.shell-menu-item:hover { background: var(--ui-surface-2); color: var(--accent-ink); padding-left: 14px; }
.shell-menu-item.is-danger, .shell-menu-item.is-danger i { color: var(--ui-danger); }
.shell-menu-item.is-danger:hover { background: var(--ui-danger-soft); }
.shell-menu-sep { height: 1px; background: var(--ui-border); margin: 6px 4px; }
.shell-menu-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 10px; border-bottom: 1px solid var(--ui-border); margin-bottom: 4px; }
.shell-menu-head a { font-size: .8rem; font-weight: 600; text-decoration: none; }
.shell-notif-menu { width: min(360px, calc(100vw - 24px)); }
.shell-notif-list { max-height: 360px; overflow-y: auto; }
.shell-notif-empty { color: var(--ui-muted); font-size: .85rem; text-align: center; padding: 22px 10px; margin: 0; }
.shell-notif-item { display: flex; gap: 10px; padding: 10px; border-radius: 10px; text-decoration: none; color: inherit; transition: background var(--ui-fast); animation: ui-fade-up .3s var(--ui-ease) both; }
.shell-notif-item:hover { background: var(--ui-surface-2); color: inherit; }
.shell-notif-item .meta { flex: 1; min-width: 0; }
.shell-notif-item strong { display: flex; justify-content: space-between; gap: 8px; font-size: .86rem; }
.shell-notif-item strong time { font-weight: 500; color: var(--ui-faint); font-size: .74rem; white-space: nowrap; }
.shell-notif-item p { margin: 2px 0 0; font-size: .82rem; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-notif-item.is-unread strong::before { content: ''; flex: 0 0 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); order: -1; }

/* Chargement des notifications : trois lignes fantômes plutôt qu'un texte */
.shell-notif-skel { display: grid; gap: 14px; padding: 14px 10px 16px; }
.shell-notif-skel > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 10px 10px; gap: 8px 12px; align-items: center; }
.shell-notif-skel .skeleton { display: block; height: 10px; border-radius: 6px; }
.shell-notif-skel .skeleton.is-round { width: 34px; height: 34px; border-radius: 50%; grid-row: span 2; }
.shell-notif-skel .skeleton.is-short { width: 62%; }

.shell-content {
  /* Centrage par marges internes : l'ancien CSS impose width:auto!important sur .main-content */
  flex: 1; max-width: none; margin: 0;
  --content-gutter: max(clamp(16px, 3vw, 32px), calc((100% - 1416px) / 2));
  padding: clamp(16px, 2.4vw, 32px) var(--content-gutter) 40px;
  animation: ui-fade-up .45s var(--ui-ease) both;
}
.shell-content:focus { outline: none; }
.shell-content > * { max-width: 100%; min-width: 0; }
.shell-content > .msg-app, .shell-content > .content-wrapper { width: 100%; }
/* Ancienne règle « .row.g-4 > .col > .card { height: 100% } » : seulement pour une carte seule dans sa colonne */
.row.g-4 > [class*="col-"] > .card:not(:only-child) { height: auto; }
.shell-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  padding: 18px clamp(16px, 3vw, 32px); color: var(--ui-faint); font-size: .8rem;
  border-top: 1px solid var(--ui-border);
}
.shell-footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.shell-footer a { color: var(--ui-muted); text-decoration: none; }
.shell-footer a:hover { color: var(--accent-strong); }

.shell-backdrop { display: none; }
.bottom-nav { display: none; }

/* Tablette & mobile : menu en tiroir + barre de navigation basse */
@media (max-width: 992px) {
  .shell-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); flex-basis: auto;
    transform: translateX(-104%); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); z-index: 1060;
  }
  .sidebar-open .shell-sidebar { transform: none; }
  .shell-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1055; background: color-mix(in srgb, var(--ink-700) 45%, transparent);
    backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--ui-med), visibility 0s linear var(--ui-med);
  }
  .sidebar-open .shell-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
  .sidebar-open body { overflow: hidden; }
  .shell-collapse-btn { display: none; }
  .shell-menu-btn { display: inline-grid; }
  .shell-search { min-width: 0; width: 40px; padding: 0; justify-content: center; }
  .shell-search span, .shell-search kbd { display: none; }
}
@media (max-width: 768px) {
  :root { --topbar-h: 60px; }
  .shell-avatar-name, .shell-avatar-btn .fa-chevron-down { display: none; }
  .shell-avatar-btn { padding: 0 4px; }
  .shell-content { padding-bottom: 96px; }
  .shell-footer { padding-bottom: 92px; justify-content: center; text-align: center; }
  .bottom-nav {
    display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 1040;
    background: color-mix(in srgb, var(--ui-surface) 90%, transparent);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid var(--ui-border); border-radius: 20px; box-shadow: var(--ui-shadow-lg); padding: 6px;
  }
  .bottom-nav a, .bottom-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
    border: 0; background: none; border-radius: 14px; color: var(--ui-muted);
    font-size: .66rem; font-weight: 600; text-decoration: none; min-width: 0;
    transition: color var(--ui-fast), background var(--ui-fast);
  }
  .bottom-nav a span:last-child, .bottom-nav button span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bottom-nav-icon { position: relative; font-size: 1.1rem; line-height: 1.4; }
  .bottom-nav-icon .shell-badge { position: absolute; top: -6px; right: -12px; min-width: 16px; height: 16px; font-size: .6rem; padding: 0 4px; }
  .bottom-nav a.active { color: var(--accent-strong); background: var(--accent-soft); }
  .bottom-nav a.active .bottom-nav-icon { animation: ui-bump .45s var(--ui-spring); }
}

/* ==========================================================================
   Pages publiques
   ========================================================================== */
.public-nav {
  position: sticky; top: 0; z-index: 1030;
  background: color-mix(in srgb, #fff 70%, transparent);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color var(--ui-med), box-shadow var(--ui-med);
}
.is-scrolled .public-nav { background: color-mix(in srgb, #fff 90%, transparent); border-bottom-color: var(--ui-border); box-shadow: 0 10px 30px -20px color-mix(in srgb, var(--ink-700) 40%, transparent); }
.public-nav-inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.public-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.public-brand img { height: 46px; width: auto; transition: transform var(--ui-med) var(--ui-spring); }
.public-brand-name { font-family: var(--ui-font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; color: var(--brand-600); }
.public-brand:hover img { transform: rotate(-6deg) scale(1.06); }
.public-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.public-links > a {
  position: relative; padding: 8px 14px; border-radius: 10px; color: var(--ui-text-2);
  font-weight: 500; font-size: .95rem; text-decoration: none; transition: color var(--ui-fast), background var(--ui-fast);
}
.public-links > a:hover { color: var(--accent-strong); background: var(--accent-soft); }
.public-links-auth { display: none; }
.public-cta { display: flex; gap: 8px; }
.public-burger { display: none; }
.public-content { display: block; padding: 0; min-height: 60vh; animation: ui-fade-up .45s var(--ui-ease) both; }
.public-content:focus { outline: none; }
body.is-visitor .public-content > :not(.full-bleed):not(.toast-stack):not(script) { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
@media (max-width: 860px) {
  .public-cta { display: none; }
  .public-burger { display: inline-grid; margin-left: auto; }
  .public-links {
    position: absolute; top: 72px; left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 10px; box-shadow: var(--ui-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--ui-fast), transform var(--ui-med) var(--ui-ease), visibility 0s linear var(--ui-med);
  }
  .public-nav.open .public-links { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .public-links-auth { display: flex; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ui-border); }
  .public-links-auth .btn { flex: 1; }
}

.site-footer { background: var(--c-ink); color: color-mix(in srgb, #fff 82%, var(--c-ink)); padding: 56px 0 24px; margin-top: 72px; position: relative; overflow: hidden; }
.site-footer::before {
  content: ''; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-400) 16%, transparent), transparent 65%); pointer-events: none;
}
.site-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; position: relative; }
.site-footer h3 { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: color-mix(in srgb, #fff 82%, var(--c-ink)); text-decoration: none; transition: color var(--ui-fast); }
.site-footer a:hover { color: #fff; }
.site-footer-brand img { background: #fff; border-radius: 14px; padding: 6px; margin-bottom: 14px; }
.site-footer-brand p { max-width: 340px; font-size: .92rem; }
.site-footer-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer-badges span { font-size: .76rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); padding: 5px 10px; border-radius: 999px; }
.site-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 36px; padding-top: 20px; text-align: center; font-size: .82rem; color: var(--faint); }
@media (max-width: 768px) { .site-footer-grid { grid-template-columns: 1fr 1fr; } .site-footer-brand { grid-column: 1 / -1; } }

/* ==========================================================================
   Avatars
   ========================================================================== */
.ui-avatar {
  --size: 40px;
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--size); height: var(--size); border-radius: 50%; overflow: hidden;
  font-family: var(--ui-font-display); font-weight: 800; font-size: calc(var(--size) * .38); letter-spacing: 0;
  color: var(--c-brand-strong); background: var(--c-brand-soft);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
  user-select: none;
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Quatre teintes douces seulement, attribuées de façon stable à chaque personne */
.tone-0 { --tone-bg: var(--c-brand-soft); --tone-fg: var(--c-brand-strong); }
.tone-1 { --tone-bg: var(--c-ok-soft); --tone-fg: var(--c-ok); }
.tone-2 { --tone-bg: var(--c-warm-soft); --tone-fg: var(--c-warm-deep); }
.tone-3 { --tone-bg: var(--ink-50); --tone-fg: var(--c-ink); }
.ui-avatar[class*="tone-"] { background: linear-gradient(135deg, var(--tone-bg), color-mix(in srgb, var(--tone-fg) 16%, var(--tone-bg))); color: var(--tone-fg); }
.ui-avatar-xs { --size: 26px; }
.ui-avatar-sm { --size: 32px; }
.ui-avatar-md { --size: 42px; }
.ui-avatar-lg { --size: 56px; }
.ui-avatar-xl { --size: 84px; }
.ui-avatar.is-online::after {
  content: ''; position: absolute; right: 1px; bottom: 1px; width: 28%; height: 28%;
  border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 0 2px #fff;
}

/* ==========================================================================
   Notifications (toasts)
   ========================================================================== */
.toast-stack {
  position: fixed; top: calc(var(--topbar-h) + 10px); right: 16px; z-index: 2000;
  display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.ui-toast {
  position: relative; display: flex; align-items: flex-start; gap: 12px; overflow: hidden; pointer-events: auto;
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 14px;
  padding: 14px 40px 14px 14px; box-shadow: var(--ui-shadow-lg); color: var(--ui-text-2); font-size: .9rem;
  animation: ui-toast-in .45s var(--ui-spring) both;
}
.ui-toast.is-leaving { animation: ui-toast-out .3s var(--ui-ease) forwards; }
.ui-toast-icon { font-size: 1.15rem; margin-top: 1px; animation: ui-pop .55s var(--ui-spring) .18s backwards; }
.ui-toast-body { flex: 1; line-height: 1.45; }
.ui-toast-close {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: none; color: var(--ui-faint); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.ui-toast-close:hover { background: var(--ui-surface-2); color: var(--ui-text); }
.ui-toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; background: currentColor; opacity: .5; }
.ui-toast.is-timed .ui-toast-progress { animation: ui-shrink-x var(--toast-duration, 5s) linear forwards; }
.ui-toast:hover .ui-toast-progress { animation-play-state: paused; }
.ui-toast-success { border-left: 4px solid var(--ui-success); }
.ui-toast-success .ui-toast-icon, .ui-toast-success .ui-toast-progress { color: var(--ui-success); }
.ui-toast-error { border-left: 4px solid var(--ui-danger); }
.ui-toast-error .ui-toast-icon, .ui-toast-error .ui-toast-progress { color: var(--ui-danger); }
.ui-toast-warning { border-left: 4px solid var(--ui-warning); }
.ui-toast-warning .ui-toast-icon, .ui-toast-warning .ui-toast-progress { color: var(--ui-warning); }
.ui-toast-info { border-left: 4px solid var(--ui-info); }
.ui-toast-info .ui-toast-icon, .ui-toast-info .ui-toast-progress { color: var(--ui-info); }
@media (max-width: 576px) { .toast-stack { top: auto; bottom: 96px; right: 16px; left: 16px; width: auto; } }

/* ==========================================================================
   Palette de commandes (Ctrl + K)
   ========================================================================== */
.palette { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.palette[hidden] { display: none; }
.palette-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink-700) 50%, transparent); backdrop-filter: blur(4px); animation: ui-fade .2s ease both; }
.palette-panel {
  position: relative; width: min(620px, 100%); background: var(--ui-surface); border-radius: 18px;
  box-shadow: 0 40px 80px -20px color-mix(in srgb, var(--ink-700) 45%, transparent); overflow: hidden; border: 1px solid var(--ui-border);
  animation: ui-zoom-in .28s var(--ui-spring) both;
}
.palette-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ui-border); }
.palette-input i { color: var(--ui-faint); }
.palette-input input { flex: 1; border: 0; outline: 0; font-size: 1.05rem; background: none; color: var(--ui-text); }
.palette-results { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow-y: auto; }
.palette-group { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ui-faint); padding: 10px 10px 4px; }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--ui-text-2); }
.palette-item .ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--ui-surface-2); color: var(--ui-muted); transition: all var(--ui-fast); }
.palette-item.is-active { background: var(--accent-soft); color: var(--accent-ink); }
.palette-item.is-active .ico { background: var(--accent); color: #fff; transform: scale(1.06); }
.palette-item mark { background: none; color: var(--accent-strong); font-weight: 700; padding: 0; }
.palette-empty { padding: 28px; text-align: center; color: var(--ui-muted); }
.palette-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--ui-border); font-size: .75rem; color: var(--ui-faint); background: var(--ui-surface-2); }
.palette-foot kbd { margin-right: 3px; }

/* Boîte de confirmation */
.ui-confirm { align-items: center; padding-top: 16px; }
.ui-confirm-panel { width: min(420px, 100%); padding: 28px 24px 20px; text-align: center; }
.ui-confirm-icon { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; font-size: 1.5rem; background: var(--accent-soft); color: var(--accent); animation: ui-bump .5s var(--ui-spring); }
.ui-confirm-icon.is-danger { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-confirm-text { font-size: 1rem; color: var(--ui-text-2); margin-bottom: 20px; }
.ui-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ui-confirm-actions .btn { min-width: 120px; white-space: normal; }
.ui-confirm-step { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-danger); margin-bottom: 10px; }
.ui-confirm-word { display: block; font-size: .9rem; color: var(--ui-text-2); margin: -6px 0 18px; }
.ui-confirm-word .form-control { margin-top: 8px; text-align: center; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ==========================================================================
   Composants Bootstrap harmonisés
   ========================================================================== */
.btn {
  --bs-btn-border-radius: 999px;
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 999px; font-family: var(--ui-font-display); font-weight: 700; letter-spacing: .005em;
  transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-med) var(--ui-ease), background-color var(--ui-fast), background-position var(--ui-slow) var(--ui-ease), border-color var(--ui-fast), color var(--ui-fast), filter var(--ui-fast);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-strong); --bs-btn-hover-border-color: var(--accent-strong);
  --bs-btn-active-bg: var(--accent-strong); --bs-btn-active-border-color: var(--accent-strong);
  --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
  /* Dégradé plus large que le bouton : au survol il glisse, et un reflet balaie la surface */
  background: var(--accent-grad) 0 0 / 150% 100%;
  border-color: transparent; color: var(--accent-contrast);
  box-shadow: var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .22);
}
a.btn:hover, a.btn:focus { text-decoration: none; }
.btn-primary:hover, .btn-primary:focus { color: var(--accent-contrast); background: var(--accent-grad) 100% 0 / 150% 100%; box-shadow: 0 20px 32px -16px color-mix(in srgb, var(--accent) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0) scale(.985); }
.btn-primary:disabled, .btn-primary.disabled { background: var(--accent); color: var(--accent-contrast); opacity: .45; box-shadow: none; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .34) 50%, transparent 68%);
  transform: translateX(-130%);
}
.btn-primary:hover::after, .btn-primary:focus-visible::after { transform: translateX(130%); transition: transform .9s var(--ui-ease); }
.btn-primary:disabled::after, .btn-primary.disabled::after { display: none; }
/* Flèches et chevrons des boutons : petit élan vers l'avant au survol */
.btn .fa-arrow-right, .btn .fa-chevron-right, .btn .fa-arrow-up-right-from-square { transition: transform var(--ui-med) var(--ui-spring); }
.btn:hover .fa-arrow-right, .btn:hover .fa-chevron-right { transform: translateX(4px); }
.btn:hover .fa-arrow-up-right-from-square { transform: translate(2px, -2px); }
/* Variantes Bootstrap ramenées à la palette */
.btn-success { --bs-btn-bg: var(--c-ok); --bs-btn-border-color: var(--c-ok); --bs-btn-hover-bg: var(--ok-600); --bs-btn-hover-border-color: var(--ok-600); --bs-btn-active-bg: var(--ok-600); }
.btn-danger { --bs-btn-bg: var(--ui-danger); --bs-btn-border-color: var(--ui-danger); --bs-btn-hover-bg: var(--bad-600); --bs-btn-hover-border-color: var(--bad-600); }
.btn-warning { --bs-btn-bg: var(--c-warm); --bs-btn-border-color: var(--c-warm); --bs-btn-color: var(--c-ink); --bs-btn-hover-bg: var(--warm-400); --bs-btn-hover-border-color: var(--warm-400); }
.btn-info, .btn-secondary { --bs-btn-bg: var(--c-ink); --bs-btn-border-color: var(--c-ink); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--ink-800); --bs-btn-hover-border-color: var(--ink-800); --bs-btn-hover-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--c-ink-2); --bs-btn-border-color: var(--ui-border-strong); --bs-btn-hover-bg: var(--ui-surface-2); --bs-btn-hover-color: var(--c-ink); --bs-btn-hover-border-color: var(--ui-border-strong); }
.btn-outline-primary {
  --bs-btn-color: var(--accent-strong); --bs-btn-border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-color: var(--accent-ink); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent-softer); --bs-btn-active-color: var(--accent-ink); --bs-btn-active-border-color: var(--accent);
  background: var(--ui-surface);
}
.btn-light { --bs-btn-bg: var(--ui-surface); --bs-btn-border-color: var(--ui-border); --bs-btn-hover-bg: var(--ui-surface-2); --bs-btn-hover-border-color: var(--ui-border-strong); }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--ui-text-2); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent-ink); }
.btn-glow::after { display: none;
  content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
  transform: translateX(-120%); animation: ui-shine 3.6s ease-in-out infinite;
}
.public-cta .btn-glow::after { display: block; animation-duration: 4.6s; animation-delay: 2s; }
.btn .ripple {
  position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none; z-index: 0;
  background: currentColor; opacity: .22; animation: ui-ripple .6s var(--ui-ease) forwards;
}
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: ui-spin .7s linear infinite;
}
.btn-outline-primary.is-loading::before, .btn-light.is-loading::before { border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); }

/* Champs fichier Bootstrap visibles (common.css masque les input[type=file] des zones de dépôt personnalisées) */
input[type="file"].form-control { position: static; width: 100%; height: auto; opacity: 1; overflow: visible; z-index: auto; }
.form-control, .form-select {
  border-radius: 12px; border-color: var(--ui-border-strong); background-color: var(--ui-surface);
  transition: border-color var(--ui-fast), box-shadow var(--ui-fast), background-color var(--ui-fast);
}
.form-control:hover, .form-select:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--ui-border-strong)); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
.form-label { font-weight: 600; font-size: .88rem; color: var(--ui-text-2); }

/* Champs : gabarit unique et compact pour tous les rôles (parent.css, assistant.css et admin.css
   imposaient chacun leurs marges, bordures et hauteurs : listes plus basses que les champs voisins,
   libellés éloignés, zones de texte de 100 px minimum) */
.form-label { margin-bottom: .3rem; line-height: 1.35; }
.form-control, .form-select { min-height: 42px; padding-top: .45rem; padding-bottom: .45rem; font-size: .95rem; line-height: 1.45; border-width: 1px; }
.form-control { padding-left: .85rem; padding-right: .85rem; }
.form-control::file-selector-button { margin: -.45rem -.85rem; margin-inline-end: .85rem; padding: .45rem .85rem; }
.form-select { padding-left: .85rem; padding-right: 2.25rem; background-position: right .75rem center; }
textarea.form-control { min-height: 68px; }
.form-control-sm, .form-select-sm { min-height: 34px; padding-top: .25rem; padding-bottom: .25rem; font-size: .85rem; border-radius: 10px; }
.form-control-sm { padding-left: .6rem; padding-right: .6rem; }
.form-select-sm { padding-left: .6rem; padding-right: 2rem; }
.form-control-lg, .form-select-lg { min-height: 50px; font-size: 1.05rem; }
.form-control-color { width: 3.5rem; padding: .3rem; }
.form-text { margin-top: .3rem; font-size: .8rem; }
.form-check { padding-top: 0; padding-bottom: 0; margin-bottom: .4rem; }
.form-check-label { margin-left: .15rem; }
/* Grilles à gouttière explicite (g-*) : common.css fige « .row { margin: 0 -.75rem; --bs-gutter-y: 1rem } »,
   ce qui neutralise g-2/g-3/g-4 et ajoute un espace vide au-dessus de chaque grille. On rétablit Bootstrap. */
.row.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.row.g-1 { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
.row.g-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
.row.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.row.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.row.g-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }
.row:is(.g-0, .g-1, .g-2, .g-3, .g-4, .g-5) { margin-top: calc(-1 * var(--bs-gutter-y)); margin-left: calc(-.5 * var(--bs-gutter-x)); margin-right: calc(-.5 * var(--bs-gutter-x)); }
.row:is(.g-0, .g-1, .g-2, .g-3, .g-4, .g-5) > * { padding-left: calc(.5 * var(--bs-gutter-x)); padding-right: calc(.5 * var(--bs-gutter-x)); }
/* Grille posée directement sur un corps de carte étiré (h-100) : les lignes ne doivent pas se répartir la hauteur */
.card-body.row { align-content: flex-start; }
/* iOS zoome sur les champs de moins de 16 px */
@media (max-width: 576px) { .form-control, .form-select { font-size: 1rem; } }
.form-switch .form-check-input { transition: background-position .25s var(--ui-spring), background-color var(--ui-fast); }

/* Combo à jetons (choix multiples, voir initTokenCombo dans app.js) : les cases d'origine sont masquées */
.tc-enhanced { display: none !important; }
.token-combo { position: relative; min-width: 0; }
.tc-control {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 40px; padding: 4px 34px 4px 6px; cursor: text;
  border: 1px solid var(--ui-border-strong); border-radius: 12px;
  background: var(--ui-surface) no-repeat right 12px center / 16px 12px;
  /* même chevron que les listes déroulantes (.form-select) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  transition: border-color var(--ui-fast), box-shadow var(--ui-fast);
}
.tc-control:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--ui-border-strong)); }
.token-combo:focus-within .tc-control { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.tc-token {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 3px 2px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: .84rem; font-weight: 600; line-height: 1.3; animation: tc-pop .18s var(--ui-ease);
}
.tc-token-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-token-remove {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 1.05rem; line-height: 1; opacity: .65; cursor: pointer;
}
.tc-token-remove:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.tc-input { flex: 1 1 90px; min-width: 90px; padding: 4px; border: 0; outline: 0; background: transparent; color: var(--ui-text); font: inherit; }
.token-combo .tc-input[readonly] { background-color: transparent; cursor: pointer; caret-color: transparent; }
.token-combo.has-tokens .tc-input[readonly] { flex-basis: 60px; min-width: 60px; }
.tc-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1070; max-height: 264px; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none; background: var(--ui-surface); border: 1px solid var(--ui-border);
  border-radius: 12px; box-shadow: var(--ui-shadow-lg);
}
.token-combo.is-up .tc-menu { top: auto; bottom: calc(100% + 4px); }
.tc-option { padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: .9rem; color: var(--ui-text); }
.tc-option.is-active { background: var(--accent-soft); color: var(--accent-ink); }
.tc-option mark { padding: 0; background: none; color: inherit; font-weight: 700; }
.tc-empty { padding: 7px 10px; font-size: .86rem; color: var(--ui-muted); }
/* La liste ouverte passe au-dessus des cartes voisines */
.ui-card:has(.token-combo.is-open), .card:has(.token-combo.is-open) { z-index: 20; }
@keyframes tc-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tc-token { animation: none; } }

/* Communes d'un code postal proposées sous le champ commune (voir initPostalCity dans app.js) */
.postal-city-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; max-height: 8.5rem; overflow-y: auto; }
.postal-city-choices[hidden] { display: none; }
.postal-city-choices-label { color: var(--ui-muted); margin-right: 2px; }
.postal-city-choice {
  padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); font-size: .8rem; font-weight: 600; line-height: 1.5; cursor: pointer;
}
.postal-city-choice:hover, .postal-city-choice:focus-visible { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.card { border-radius: var(--ui-radius-lg); border-color: var(--ui-border); box-shadow: var(--ui-shadow-sm); transition: box-shadow var(--ui-med) var(--ui-ease), transform var(--ui-med) var(--ui-ease), border-color var(--ui-med); }
.card > .card-header:first-child { border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; }
.card-header { background: transparent; border-bottom-color: var(--ui-border); font-weight: 700; }
a.card:hover, .card.card-hover:hover, .card[data-href]:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 30%, var(--ui-border)); }

.table { --bs-table-hover-bg: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.table > thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ui-muted); font-weight: 700; border-bottom-width: 1px; background: var(--ui-surface-2); }
.table > tbody tr { transition: background var(--ui-fast); }

.badge { font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .4em .7em; }
.alert { border-radius: var(--ui-radius); border-width: 1px; animation: ui-fade-up .35s var(--ui-ease) both; }
/* common.css passait toutes les alertes en flex (le texte et ses <strong> devenaient des colonnes)
   et ajoutait une pastille ::before en double de l'icône déjà présente */
.alert { display: block; }
.alert::before { content: none; display: none; }
.modal-content { border-radius: var(--ui-radius-lg); border: 0; box-shadow: 0 40px 80px -20px color-mix(in srgb, var(--ink-700) 40%, transparent); }
/* Fenêtre défilante dont le <form> englobe le corps et le pied : sans ce relais flex, le corps ne défile pas
   et le pied (bouton Valider) sort de l'écran, masqué par le overflow: hidden de .modal-content */
.modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.modal.fade .modal-dialog { transform: translateY(16px) scale(.97); transition: transform .35s var(--ui-spring); }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.show { opacity: .45; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--accent); }
.nav-tabs .nav-link { border-radius: 10px 10px 0 0; }
.nav-tabs .nav-link.active { color: var(--accent-strong); font-weight: 600; }
.progress { border-radius: 999px; background: var(--ui-surface-2); }
.progress-bar { background: var(--accent-light); transition: width .8s var(--ui-ease); }
.dropdown-menu { border-radius: var(--ui-radius); border-color: var(--ui-border); box-shadow: var(--ui-shadow-lg); padding: 6px; animation: ui-zoom-in .2s var(--ui-ease); }
.dropdown-item { border-radius: 8px; }

/* Couleurs « primary » de Bootstrap alignées sur l'accent du rôle (vert pour les assistantes, etc.) */
body.has-shell .bg-primary { background-color: var(--accent) !important; }
body.has-shell .text-primary { color: var(--accent-strong) !important; }
body.has-shell .border-primary { border-color: var(--accent) !important; }
body.has-shell .link-primary { color: var(--accent-strong) !important; }
.ui-eyebrow, .billing-eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .18); padding: 4px 10px; border-radius: 999px; }

.page-header { margin-bottom: 24px; animation: ui-fade-up .45s var(--ui-ease) both; }
.page-header h1 { font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 4px; }
.page-description { color: var(--ui-muted); margin: 0; }

/* ==========================================================================
   Cartes interactives
   ========================================================================== */
.ui-card {
  position: relative; background: var(--ui-surface); border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-sm); padding: 20px;
  transition: transform var(--ui-med) var(--ui-ease), box-shadow var(--ui-med) var(--ui-ease), border-color var(--ui-med);
}
/* Effet 3D + halo lumineux qui suit la souris */
.ui-tilt { transform-style: preserve-3d; will-change: transform; }
.ui-tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%);
  transition: opacity var(--ui-med);
}
.ui-tilt:hover::after { opacity: 1; }
.ui-tilt:hover { box-shadow: var(--ui-shadow-lg); border-color: color-mix(in srgb, var(--accent) 30%, var(--ui-border)); }
.ui-tilt > * { transform: translateZ(0); }

.stat-tile { display: flex; flex-direction: column; gap: 6px; overflow: hidden; text-decoration: none; color: inherit; }
.stat-tile:hover { color: inherit; }
.stat-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-tile-label { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.stat-tile-icon {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.1rem;
  color: var(--tile-fg, var(--c-brand-strong)); background: var(--tile-bg, var(--c-brand-soft));
  transition: transform var(--ui-med) var(--ui-spring);
}
.stat-tile:hover .stat-tile-icon { transform: rotate(-8deg) scale(1.08); }
.stat-tile-value { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.stat-tile-sub { font-size: .85rem; color: var(--ui-muted); margin: 0; }
.stat-tile-link { margin-top: auto; padding-top: 8px; font-size: .85rem; font-weight: 600; color: var(--accent-strong); display: inline-flex; align-items: center; gap: 6px; }
.stat-tile-link i { transition: transform var(--ui-fast) var(--ui-ease); }
.stat-tile:hover .stat-tile-link i { transform: translateX(4px); }
.stat-tile-spark { position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--tile-bg, var(--c-brand-soft)); opacity: .6; pointer-events: none; }
/* Anciens noms de tuiles conservés, ramenés à trois tons doux */
.tile-blue, .tile-rose { --tile-bg: var(--c-brand-soft); --tile-fg: var(--c-brand-strong); }
.tile-green, .tile-teal { --tile-bg: var(--c-ok-soft); --tile-fg: var(--c-ok); }
.tile-amber { --tile-bg: var(--c-warm-soft); --tile-fg: var(--warm-600); }
.tile-violet { --tile-bg: var(--ink-50); --tile-fg: var(--c-ink); }

.ui-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* Animations d'apparition au défilement */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ui-ease), transform .6s var(--ui-ease); transition-delay: var(--reveal-delay, 0s); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }

/* Squelettes de chargement */
.skeleton { position: relative; overflow: hidden; background: var(--ui-surface-2); border-radius: 8px; }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: ui-shimmer 1.3s infinite; }

/* État vide illustré */
.ui-empty { text-align: center; padding: 36px 20px; color: var(--ui-muted); }
.ui-empty-icon {
  width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center; font-size: 1.7rem;
  color: var(--accent); background: var(--accent-soft); animation: ui-float 4s ease-in-out infinite;
}
.ui-empty h3 { font-size: 1.05rem; font-weight: 700; color: var(--ui-text); }

/* Puces / chips */
.ui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.ui-chip.is-success { background: var(--ui-success-soft); color: var(--ok-700); border-color: var(--ok-100); }
.ui-chip.is-warning { background: var(--ui-warning-soft); color: var(--c-warm-deep); border-color: var(--warm-100); }
.ui-chip.is-danger { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: var(--bad-100); }
.ui-chip.is-muted { background: var(--ui-surface-2); color: var(--ui-muted); border-color: var(--ui-border); }

/* ==========================================================================
   Correctifs de pages existantes
   ========================================================================== */
/* Tableau de bord parent : planning hebdomadaire sans débordement */
.schedule-panel .schedule-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; overflow: visible; }
.schedule-panel .schedule-card { min-width: 0; transition: transform var(--ui-med) var(--ui-spring), box-shadow var(--ui-med); }
.schedule-panel .schedule-card:hover { transform: translateY(-4px); box-shadow: var(--ui-shadow); }
.schedule-panel .schedule-slot { display: flex; justify-content: space-between; gap: 6px; font-size: .8rem; }
.insight-card, .quick-action, .panel, .child-pill, .stat-card-modern { transition: transform var(--ui-med) var(--ui-ease), box-shadow var(--ui-med) var(--ui-ease); }
.quick-action:hover, .child-pill:hover { transform: translateY(-3px); box-shadow: var(--ui-shadow); }
.quick-action:hover .fa-chevron-right { transform: translateX(4px); }
.quick-action .fa-chevron-right { transition: transform var(--ui-fast) var(--ui-ease); }
.child-pill .child-avatar .ui-avatar { --size: 52px; }

/* Anciennes classes d'animation utilisées par certaines pages */
.fade-in, .animate-fade-in { animation: ui-fade-up .5s var(--ui-ease) both; }

/* ==========================================================================
   Images de profil par défaut remplacées par des initiales
   ========================================================================== */
img.profile-image, .profile-avatar img, .assistant-photo img { object-fit: cover; }

/* ==========================================================================
   Harmonisation de l'ancien CSS : toutes les couleurs ramenées à la palette
   (les variables sont redéfinies sur body, elles l'emportent sur :root)
   ========================================================================== */
body {
  --color-primary: var(--accent); --color-primary-dark: var(--accent-strong); --color-primary-light: var(--accent-light);
  --color-parent: var(--accent); --color-parent-dark: var(--accent-strong); --color-parent-light: var(--accent-light); --color-parent-bg: var(--c-bg);
  --color-assistant: var(--accent); --color-assistant-dark: var(--accent-strong); --color-assistant-light: var(--accent-light); --color-assistant-bg: var(--c-bg);
  --color-admin: var(--accent); --color-admin-dark: var(--accent-strong); --color-admin-light: var(--accent-light); --color-admin-bg: var(--c-bg);
  --color-visitor: var(--accent); --color-visitor-dark: var(--accent-strong); --color-visitor-light: var(--accent-light); --color-visitor-bg: var(--c-bg);
  --color-success: var(--c-ok); --color-info: var(--c-ink); --color-warning: var(--warm-500); --color-danger: var(--ui-danger); --color-error: var(--ui-danger);
  --color-dark: var(--c-ink); --color-text-primary: var(--c-ink); --color-bg-primary: var(--c-bg); --color-light: var(--c-bg);
  --p-primary: var(--accent); --p-primary-dark: var(--accent-strong); --p-primary-darker: var(--accent-strong); --p-primary-light: var(--accent-light); --p-primary-lighter: var(--accent-softer);
  --p-bg-light: var(--accent-soft); --p-bg-medium: var(--accent-softer);
  --primary-blue: var(--accent); --primary-blue-dark: var(--accent-strong); --primary-blue-light: var(--accent-light);
  --success-green: var(--c-ok); --success-green-dark: var(--ok-600); --success-green-light: var(--c-ok-light);
  --info-blue: var(--c-ink); --info-blue-dark: var(--ink-800); --info-blue-light: var(--ink-400);
  --warning-orange: var(--warm-500); --danger-red: var(--ui-danger); --children-secondary: var(--warm-500);
  --assistant-gradient: var(--accent); --assistant-gradient-light: var(--accent-soft);
  --admin-primary: var(--accent); --admin-primary-dark: var(--accent-strong); --admin-primary-darker: var(--accent-strong); --admin-primary-light: var(--accent-light);
  --admin-success: var(--c-ok); --admin-success-light: var(--c-ok-soft); --admin-info: var(--c-ink); --admin-info-light: var(--ink-50);
  --admin-warning: var(--warm-500); --admin-warning-light: var(--c-warm-soft); --admin-danger: var(--ui-danger); --admin-danger-light: var(--ui-danger-soft);
  --admin-bg: var(--c-bg); --admin-border: var(--ui-border); --admin-text: var(--c-ink); --admin-text-muted: var(--ui-muted);
  --planning-primary: var(--accent); --planning-primary-dark: var(--accent-strong); --planning-primary-light: var(--accent-light);
  --planning-success: var(--c-ok); --planning-info: var(--c-ink); --planning-purple: var(--c-ink); --planning-warning: var(--warm-500); --planning-danger: var(--ui-danger);
  --planning-bg: var(--c-bg); --planning-border: var(--ui-border); --planning-text: var(--c-ink);
  --msg-primary: var(--accent); --msg-primary-dark: var(--accent-strong); --msg-primary-light: var(--accent-light);
  --msg-success: var(--c-ok); --msg-info: var(--c-ink); --msg-warning: var(--warm-500); --msg-danger: var(--ui-danger);
  --payroll-primary: var(--accent); --payroll-primary-light: var(--accent-light); --payroll-success: var(--c-ok); --payroll-info: var(--c-ink);
  --payroll-warning: var(--warm-500); --payroll-danger: var(--ui-danger); --payroll-bg: var(--c-bg); --payroll-border: var(--ui-border); --payroll-text: var(--c-ink);
  --profile-gradient-start: var(--accent-light); --profile-gradient-end: var(--accent);
  /* Couleurs Bootstrap */
  --bs-body-color: var(--c-ink); --bs-heading-color: var(--c-ink); --bs-border-color: var(--ui-border);
  --bs-success: var(--ok-500); --bs-info: var(--ink-700);
  --bs-warning: var(--warm-300); --bs-danger: var(--bad-500);
  --bs-success-bg-subtle: var(--c-ok-soft); --bs-info-bg-subtle: var(--ink-50); --bs-warning-bg-subtle: var(--c-warm-soft); --bs-danger-bg-subtle: var(--ui-danger-soft);
}
body.has-shell .bg-success { background-color: var(--c-ok) !important; }
body.has-shell .bg-info { background-color: var(--c-ink) !important; color: #fff !important; }
body.has-shell .bg-warning { background-color: var(--c-warm) !important; color: var(--c-ink) !important; }
body.has-shell .bg-danger { background-color: var(--ui-danger) !important; }
body.has-shell .text-success { color: var(--c-ok) !important; }
body.has-shell .text-info { color: var(--c-ink) !important; }
body.has-shell .text-warning { color: var(--warm-600) !important; }
body.has-shell .text-danger { color: var(--ui-danger) !important; }
body.has-shell .bg-light { background-color: var(--c-bg-2) !important; }
body.has-shell .alert-success { --bs-alert-bg: var(--c-ok-soft); --bs-alert-color: var(--ok-700); --bs-alert-border-color: var(--ok-100); }
body.has-shell .alert-info { --bs-alert-bg: var(--ink-50); --bs-alert-color: var(--c-ink); --bs-alert-border-color: var(--ink-100); }
body.has-shell .alert-warning { --bs-alert-bg: var(--c-warm-soft); --bs-alert-color: var(--c-warm-deep); --bs-alert-border-color: var(--warm-100); }
body.has-shell .alert-danger { --bs-alert-bg: var(--ui-danger-soft); --bs-alert-color: var(--ui-danger); --bs-alert-border-color: var(--bad-100); }

/* Bandeaux des anciennes pages : ardoise profonde animée de deux halos (couleur principale et touche chaude) qui dérivent lentement.
   Seules les images de fond sont forcées (!important) : position et taille restent animables. */
body.has-shell .contracts-header, body.has-shell .admin-hero, body.has-shell .admin-header,
body.has-shell .page-hero, body.has-shell .profile-header, body.has-shell .children-header, body.has-shell .links-header {
  background-color: var(--c-ink) !important;
  background-image: var(--ui-mesh-dark) !important;
  background-repeat: no-repeat !important;
  background-size: 58% 260%, 46% 220%, 100% 100%;
  background-position: 100% 0%, 0% 100%, 0 0;
  color: #fff; border: 0; box-shadow: var(--ui-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .08);
}
body.has-shell :is(.dashboard-hero, .header-modern) {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 20px;
  background-color: #fff !important;
  background-image:
    radial-gradient(closest-side, color-mix(in srgb, var(--brand-200) 60%, transparent), transparent),
    radial-gradient(closest-side, color-mix(in srgb, var(--warm-200) 55%, transparent), transparent),
    linear-gradient(135deg, #fff, var(--brand-50)) !important;
  background-repeat: no-repeat !important;
  background-size: 50% 240%, 40% 200%, 100% 100%;
  background-position: 100% 0%, 0% 100%, 0 0;
  color: var(--c-ink); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow);
}
/* La dérive des halos redessine le fond à chaque image : réservée aux écrans à souris (économie de batterie sur mobile) */
@media (hover: hover) and (pointer: fine) {
  /* L'entrée en fondu est rappelée ici : cette déclaration remplace celle des anciennes classes (animate-fade-in, slideUp) */
  body.has-shell :is(.contracts-header, .admin-hero, .admin-header, .page-hero, .profile-header, .children-header, .links-header) { animation: ui-fade-up .5s var(--ui-ease) both, ui-mesh 20s ease-in-out infinite alternate; }
  body.has-shell :is(.dashboard-hero, .header-modern) { animation: ui-fade-up .5s var(--ui-ease) both, ui-mesh 24s ease-in-out infinite alternate; }
}
/* Petit soleil et nuage du site public : la même famille de dessins, en filigrane derrière le bandeau de bienvenue */
body.has-shell :is(.dashboard-hero, .header-modern)::before, body.has-shell :is(.dashboard-hero, .header-modern)::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; background: center / contain no-repeat;
}
body.has-shell :is(.dashboard-hero, .header-modern)::before {
  width: 96px; height: 96px; right: -14px; top: -20px; background: var(--warm-300); opacity: .75;
  -webkit-mask: url('/assets/images/doodles/sun.svg') center / contain no-repeat; mask: url('/assets/images/doodles/sun.svg') center / contain no-repeat;
  animation: ui-spin 70s linear infinite;
}
body.has-shell :is(.dashboard-hero, .header-modern)::after {
  width: 120px; height: 62px; right: 20%; bottom: 10px; background-image: url('/assets/images/doodles/cloud.svg?v=2'); opacity: .9;
  animation: ui-drift 16s ease-in-out infinite;
}
@media (max-width: 576px) { body.has-shell :is(.dashboard-hero, .header-modern)::after { display: none; } }
body.has-shell .header-modern { padding: 26px 32px; }
@media (max-width: 576px) { body.has-shell .header-modern { padding: 20px; } }
@keyframes ui-mesh {
  from { background-position: 100% 0%, 0% 100%, 0 0; }
  to { background-position: 74% 42%, 24% 58%, 0 0; }
}
/* Textes des bandeaux devenus foncés : les anciennes couleurs (encre foncée) étaient illisibles */
body.has-shell .page-hero .page-hero-title, body.has-shell .page-hero h1, body.has-shell .page-hero h2 { color: #fff; }
body.has-shell .page-hero .page-hero-subtitle, body.has-shell .page-hero p { color: rgba(255, 255, 255, .82); }
body.has-shell .page-hero .page-hero-eyebrow { color: var(--brand-200, #cfe0ff); }
body.has-shell .bg-gradient-primary {
  background-color: var(--c-ink) !important; background-image: var(--ui-mesh-dark) !important; background-repeat: no-repeat !important;
  background-size: 70% 200%, 56% 170%, 100% 100%; background-position: 100% 0%, 0% 100%, 0 0;
}
/* Pastilles d'icônes : dégradé doux et fin liseré de leur couleur ; elles se penchent au survol de leur carte */
body.has-shell .insight-icon, body.has-shell .quick-icon, body.has-shell .stat-card-icon-modern, body.has-shell .stat-icon {
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100)) !important; color: var(--brand-600) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-500) 14%, transparent) !important;
  transition: transform var(--ui-med) var(--ui-spring), box-shadow var(--ui-med);
}
body.has-shell .insight-icon i, body.has-shell .quick-icon i, body.has-shell .stat-card-icon-modern i, body.has-shell .stat-icon i { color: inherit !important; }
body.has-shell .quick-icon.bg-green, body.has-shell .insight-icon.icon-contracts, body.has-shell .stat-card-icon-parent {
  background: linear-gradient(135deg, var(--ok-50), var(--ok-100)) !important; color: var(--ok-600) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok-500) 16%, transparent) !important;
}
body.has-shell .quick-icon.bg-purple, body.has-shell .insight-icon.icon-messages, body.has-shell .stat-card-icon-admin {
  background: linear-gradient(135deg, var(--warm-50), var(--warm-100)) !important; color: var(--warm-700) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warm-500) 20%, transparent) !important;
}
@media (hover: hover) { :is(.insight-card, .stat-card-modern, .quick-action):hover :is(.insight-icon, .quick-icon, .stat-card-icon-modern) { transform: rotate(-8deg) scale(1.1); } }
body.has-shell .schedule-panel .schedule-card { --day-color: var(--c-warm) !important; }
body.has-shell .assistant-highlight { background: #fff !important; }
body.has-shell .child-pill .child-avatar { border: 0 !important; box-shadow: none !important; }

/* ==========================================================================
   Petits dessins (nuage, étoile, soleil, cœur) : discrets, en une seule teinte
   ========================================================================== */
.ui-doodles { position: relative; isolation: isolate; }
.ui-doodle { position: absolute; z-index: -1; pointer-events: none; background: center / contain no-repeat; opacity: .9; }
.ui-doodle.cloud { width: 110px; height: 58px; background-image: url('/assets/images/doodles/cloud.svg?v=2'); animation: ui-drift 14s ease-in-out infinite; }
.ui-doodle.star { width: 26px; height: 26px; background: var(--warm-300); -webkit-mask: url('/assets/images/doodles/star.svg') center / contain no-repeat; mask: url('/assets/images/doodles/star.svg') center / contain no-repeat; animation: ui-twinkle 4s ease-in-out infinite; }
.ui-doodle.sun { width: 70px; height: 70px; background: var(--warm-300); -webkit-mask: url('/assets/images/doodles/sun.svg') center / contain no-repeat; mask: url('/assets/images/doodles/sun.svg') center / contain no-repeat; animation: ui-spin 60s linear infinite; }
.ui-doodle.heart { width: 28px; height: 26px; background: var(--brand-400); -webkit-mask: url('/assets/images/doodles/heart.svg') center / contain no-repeat; mask: url('/assets/images/doodles/heart.svg') center / contain no-repeat; animation: ui-float 5s ease-in-out infinite; }
.ui-squiggle { position: relative; white-space: nowrap; }
.ui-squiggle::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: .32em; background: var(--warm-300); -webkit-mask: url('/assets/images/doodles/squiggle.svg') center / 100% 100% no-repeat; mask: url('/assets/images/doodles/squiggle.svg') center / 100% 100% no-repeat; z-index: -1; }
.ui-dots-bg { background-image: radial-gradient(var(--line-strong) 1.4px, transparent 1.6px); background-size: 24px 24px; }
@keyframes ui-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(18px); } }
@keyframes ui-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: .9; } 50% { transform: scale(.8) rotate(20deg); opacity: .6; } }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ui-zoom-in { from { opacity: 0; transform: scale(.96) translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes ui-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes ui-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes ui-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes ui-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ui-toast-in { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateX(40px) scale(.96); height: 0; padding-top: 0; padding-bottom: 0; margin: 0; } }
@keyframes ui-shrink-x { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ui-ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { to { transform: translateX(100%); } }
@keyframes ui-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes ui-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ui-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes ui-blob { 0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: translate(0, 0) rotate(0); } 33% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform: translate(20px, -20px) rotate(40deg); } 66% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; transform: translate(-16px, 12px) rotate(-30deg); } }

/* Bandeau de prise de session par un administrateur */
.impersonation-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 8px clamp(16px, 3vw, 32px);
  background: #7A3E00; color: #FFF7ED; font-size: .9rem; line-height: 1.35;
}
.impersonation-bar > span { flex: 1; min-width: 200px; }
.impersonation-bar form { margin: 0; }
.impersonation-bar-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px;
  border: 1px solid rgba(255, 247, 237, .6); background: transparent; color: inherit; font-weight: 600; cursor: pointer;
}
.impersonation-bar-btn:hover { background: rgba(255, 247, 237, .15); }

/* ==========================================================================
   Finitions : relief, mouvement et détails
   Tout ce qui suit est décoratif : rien n'est nécessaire à l'usage, et le mode « mouvement réduit »
   (voir plus bas) fige ces animations.
   ========================================================================== */

/* ---------- Transitions entre pages (navigateurs compatibles) ----------
   Le menu latéral et la barre supérieure restent en place d'une page à l'autre :
   seul le contenu change à l'écran, avec un fondu. */
@supports (view-transition-name: none) {
  .shell-sidebar { view-transition-name: ui-sidebar; }
  .shell-topbar { view-transition-name: ui-topbar; }
}

/* ---------- Première page de la session : les rubriques du menu arrivent l'une après l'autre ---------- */
.shell-intro .shell-nav li { animation: ui-slide-right .6s var(--ui-ease-out) backwards; animation-delay: calc(var(--i, 0) * 34ms + .12s); }
.shell-intro .shell-brand, .shell-intro .shell-sidebar-footer { animation: ui-fade .7s ease backwards; }
@keyframes ui-slide-right { from { opacity: 0; transform: translateX(-18px); } }

/* ---------- Navigation publique : le lien survolé ou courant se souligne d'un trait de couleur ---------- */
@media (min-width: 861px) {
  .public-links > a::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px;
    background: var(--accent-grad); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--ui-med) var(--ui-ease-out);
  }
  .public-links > a:hover::after, .public-links > a[aria-current="page"]::after { transform: scaleX(1); }
  .public-links > a[aria-current="page"] { color: var(--accent-strong); }
}

/* Angle animable : sert aux bordures dégradées qui tournent lentement (offre mise en avant) */
@property --ui-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ui-angle { to { --ui-angle: 360deg; } }

/* ---------- Progression du défilement : filet de couleur sous la barre supérieure ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .shell-topbar::after, .public-nav::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
      border-radius: 0 3px 3px 0; background: var(--accent-grad); transform-origin: 0 50%; transform: scaleX(0);
      animation: ui-scroll-progress linear both; animation-timeline: scroll(root block);
    }
    @keyframes ui-scroll-progress { to { transform: scaleX(1); } }
  }
}

/* ---------- Cloche : elle s'agite brièvement quand il y a du nouveau ---------- */
.shell-icon-btn:has(.shell-dot:not(.is-empty)) > .fa-bell { animation: ui-bell 6s ease-in-out 1.5s infinite; transform-origin: 50% 0; }
@keyframes ui-bell {
  0%, 8%, 100% { transform: rotate(0); }
  1.5% { transform: rotate(16deg); } 3% { transform: rotate(-14deg); } 4.5% { transform: rotate(9deg); } 6% { transform: rotate(-6deg); }
}

/* ---------- Surfaces des tableaux de bord : même relief et même rayon partout ---------- */
:is(.insight-card, .stat-card-modern, .panel, .quick-action) { border-radius: 20px; border-color: var(--ui-border); box-shadow: var(--ui-shadow-sm); }
:is(.insight-card, .stat-card-modern) { position: relative; overflow: hidden; isolation: isolate; }
/* Halo de la couleur de la tuile, qui grandit au survol */
:is(.insight-card, .stat-card-modern)::before {
  content: ''; position: absolute; z-index: -1; right: -48px; top: -48px; width: 160px; height: 160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--tile-glow, var(--brand-500)) 22%, transparent), transparent 68%);
  transition: transform var(--ui-slow) var(--ui-ease-out);
}
@media (hover: hover) { :is(.insight-card, .stat-card-modern):hover::before { transform: scale(1.4) translate(-8px, 8px); } }
.insight-card:has(.icon-contracts), .stat-card-modern:has(.stat-card-icon-parent) { --tile-glow: var(--ok-500); }
.insight-card:has(.icon-messages), .stat-card-modern:has(.stat-card-icon-admin) { --tile-glow: var(--warm-500); }
:is(.insight-card, .stat-card-modern, .panel):hover { border-color: color-mix(in srgb, var(--accent) 22%, var(--ui-border)); }
.insight-value, .stat-card-value-modern { letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* Lien de la tuile : la flèche part en avant au survol de toute la carte */
.insight-link i, .insight-link svg { transition: transform var(--ui-med) var(--ui-spring); }
@media (hover: hover) { .insight-card:hover .insight-link i { transform: translateX(4px); } }
/* Actions rapides du tableau de bord : contracts.css les passait en « flex » (la troisième carte tombait seule sur une ligne) */
.quick-actions:has(> .quick-action) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.quick-action { position: relative; overflow: hidden; }
.quick-action > div:nth-child(2) { flex: 1; min-width: 0; }
.quick-action > .fa-chevron-right { color: var(--ui-faint); transition: transform var(--ui-med) var(--ui-spring), color var(--ui-fast); }
.quick-action:hover > .fa-chevron-right { color: var(--accent); }

/* Fonds des anciens gabarits de page : transparents, pour laisser voir le halo d'ambiance derrière le contenu */
body.has-shell :is(.admin-page, .planning-page, .payroll-tools-page, .contracts-page) { background: transparent; }

/* Boutons « maison » des anciennes pages : même dégradé et même mouvement que .btn-primary */
:is(.btn-unified-primary, .btn-modern-primary, .btn-primary-modern) {
  background: var(--accent-grad) 0 0 / 150% 100%; color: var(--accent-contrast);
  box-shadow: var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-med) var(--ui-ease), background-position var(--ui-slow) var(--ui-ease);
}
:is(.btn-unified-primary, .btn-modern-primary, .btn-primary-modern):hover {
  background-position: 100% 0; color: var(--accent-contrast); transform: translateY(-2px);
  box-shadow: 0 20px 32px -16px color-mix(in srgb, var(--accent) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
}
:is(.btn-unified-primary, .btn-modern-primary, .btn-primary-modern):active { transform: translateY(0) scale(.985); }
/* parent.css masque tous les ::before de .btn : le rond de chargement (.is-loading) disparaissait, ne laissant qu'un bouton vide */
.btn.is-loading::before { display: block !important; }

/* Parcours en trois étapes de la page « Mes enfants » : pastilles à la couleur de la palette, relief au survol */
.journey-step { border-color: var(--ui-border); border-radius: 20px; box-shadow: var(--ui-shadow-sm); }
.journey-step .step-index { background: var(--accent-grad); box-shadow: var(--accent-glow); border-radius: 12px; transition: transform var(--ui-med) var(--ui-spring); }
@media (hover: hover) { .journey-step:hover .step-index { transform: rotate(-8deg) scale(1.1); } }

/* ---------- Tableaux et listes : les lignes arrivent en cascade ---------- */
.table > tbody > tr, .list-group > .list-group-item { animation: ui-row-in .5s var(--ui-ease-out) backwards; }
.table > tbody > tr:nth-child(1), .list-group > .list-group-item:nth-child(1) { animation-delay: .02s; }
.table > tbody > tr:nth-child(2), .list-group > .list-group-item:nth-child(2) { animation-delay: .06s; }
.table > tbody > tr:nth-child(3), .list-group > .list-group-item:nth-child(3) { animation-delay: .10s; }
.table > tbody > tr:nth-child(4), .list-group > .list-group-item:nth-child(4) { animation-delay: .14s; }
.table > tbody > tr:nth-child(5), .list-group > .list-group-item:nth-child(5) { animation-delay: .18s; }
.table > tbody > tr:nth-child(6), .list-group > .list-group-item:nth-child(6) { animation-delay: .22s; }
.table > tbody > tr:nth-child(7), .list-group > .list-group-item:nth-child(7) { animation-delay: .26s; }
.table > tbody > tr:nth-child(8), .list-group > .list-group-item:nth-child(8) { animation-delay: .30s; }
.table > tbody > tr:nth-child(n+9), .list-group > .list-group-item:nth-child(n+9) { animation-delay: .34s; }
@keyframes ui-row-in { from { opacity: 0; transform: translateY(10px); } }
.table > tbody > tr:hover > * { --bs-table-bg-state: color-mix(in srgb, var(--accent-soft) 75%, transparent); }
.table > tbody > tr > td:first-child, .table > tbody > tr > th:first-child { position: relative; }
.table-hover > tbody > tr:hover > td:first-child::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-grad);
  animation: ui-grow-y .25s var(--ui-spring);
}

/* ---------- Histogramme des revenus : les barres poussent depuis la base ---------- */
.income-bar-stack { transform-origin: 50% 100%; animation: ui-bar-up .9s var(--ui-ease-out) backwards; }
.income-bar:nth-child(2) .income-bar-stack { animation-delay: .04s; } .income-bar:nth-child(3) .income-bar-stack { animation-delay: .08s; }
.income-bar:nth-child(4) .income-bar-stack { animation-delay: .12s; } .income-bar:nth-child(5) .income-bar-stack { animation-delay: .16s; }
.income-bar:nth-child(6) .income-bar-stack { animation-delay: .20s; } .income-bar:nth-child(7) .income-bar-stack { animation-delay: .24s; }
.income-bar:nth-child(8) .income-bar-stack { animation-delay: .28s; } .income-bar:nth-child(9) .income-bar-stack { animation-delay: .32s; }
.income-bar:nth-child(10) .income-bar-stack { animation-delay: .36s; } .income-bar:nth-child(11) .income-bar-stack { animation-delay: .40s; }
.income-bar:nth-child(12) .income-bar-stack { animation-delay: .44s; }
@keyframes ui-bar-up { from { transform: scaleY(0); opacity: 0; } }

/* Histogrammes de l'administration (revenus, audience) */
.rev-stack, .rev-projection { transform-origin: 50% 100%; animation: ui-bar-up .9s var(--ui-ease-out) backwards; }
.rev-col:nth-child(2) :is(.rev-stack, .rev-projection) { animation-delay: .04s; } .rev-col:nth-child(3) :is(.rev-stack, .rev-projection) { animation-delay: .08s; }
.rev-col:nth-child(4) :is(.rev-stack, .rev-projection) { animation-delay: .12s; } .rev-col:nth-child(5) :is(.rev-stack, .rev-projection) { animation-delay: .16s; }
.rev-col:nth-child(6) :is(.rev-stack, .rev-projection) { animation-delay: .20s; } .rev-col:nth-child(7) :is(.rev-stack, .rev-projection) { animation-delay: .24s; }
.rev-col:nth-child(8) :is(.rev-stack, .rev-projection) { animation-delay: .28s; } .rev-col:nth-child(9) :is(.rev-stack, .rev-projection) { animation-delay: .32s; }
.rev-col:nth-child(10) :is(.rev-stack, .rev-projection) { animation-delay: .36s; } .rev-col:nth-child(11) :is(.rev-stack, .rev-projection) { animation-delay: .40s; }
.rev-col:nth-child(n+12) :is(.rev-stack, .rev-projection) { animation-delay: .44s; }

/* ---------- Barres de progression : dégradé et reflet qui glisse ---------- */
.progress { overflow: hidden; }
.progress-bar { position: relative; overflow: hidden; }
.progress-bar:not([class*="bg-"]) { background: var(--accent-grad); }
/* Elles se remplissent à l'arrivée sur la page (sauf les barres rayées animées de Bootstrap, qui ont déjà leur animation) */
.progress-bar:not(.progress-bar-animated) { animation: ui-bar-fill 1.1s var(--ui-ease-out) .15s backwards; }
@keyframes ui-bar-fill { from { width: 0; } }
.progress-bar::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); animation: ui-shine 3.4s ease-in-out 1s infinite;
}

/* ---------- Champs, cases et interrupteurs ---------- */
.form-check-input { transition: background-color var(--ui-fast), border-color var(--ui-fast), box-shadow var(--ui-fast), transform var(--ui-med) var(--ui-spring); }
.form-check-input:active { transform: scale(.86); }
.form-control:focus, .form-select:focus { background-color: #fff; }
.input-group:focus-within > .input-group-text { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.input-group-text { transition: border-color var(--ui-fast), color var(--ui-fast), background var(--ui-fast); }
.form-control.is-invalid, .form-select.is-invalid { animation: ui-shake .4s var(--ui-ease); }
@keyframes ui-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ---------- Onglets et pastilles de navigation ---------- */
.nav-pills .nav-link { border-radius: 999px; transition: background var(--ui-fast), color var(--ui-fast), box-shadow var(--ui-med); }
.nav-pills .nav-link.active { background: var(--accent-grad); box-shadow: var(--accent-glow); }
.nav-tabs .nav-link { transition: color var(--ui-fast), background var(--ui-fast), border-color var(--ui-fast); }
.tab-pane.active.show { animation: ui-fade-up .35s var(--ui-ease-out) backwards; }

/* Légende de groupe de cases (fs-6 la rendait plus grosse que les autres libellés) */
legend.form-label { font-size: .88rem !important; }

/* ---------- Badges : léger relief ---------- */
.badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

/* ---------- Défilement : barres fines et discrètes dans les zones internes ---------- */
.modal-body, .table-responsive, .tc-menu, .palette-results, .shell-notif-list { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink-300) 55%, transparent) transparent; }

/* ---------- Retour en haut de page (bouton ajouté par app.js) ---------- */
.ui-totop {
  position: fixed; right: 18px; bottom: 22px; z-index: 1035; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--accent-strong);
  border: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--ui-shadow);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.85);
  transition: opacity var(--ui-med), transform var(--ui-med) var(--ui-spring), background var(--ui-fast), color var(--ui-fast), visibility 0s linear var(--ui-med);
}
.ui-totop.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ui-totop:hover { background: var(--accent); color: #fff; transform: translateY(-3px); box-shadow: var(--accent-glow); }
.ui-totop i { transition: transform var(--ui-med) var(--ui-spring); }
.ui-totop:hover i { transform: translateY(-2px); }
/* Au-dessus du bouton d'aide des parents, qui occupe le même coin */
body:has(.guide-fab) .ui-totop { bottom: 80px; }
@media (max-width: 992px) {
  .ui-totop { bottom: calc(86px + env(safe-area-inset-bottom)); }
  body:has(.guide-fab) .ui-totop { bottom: calc(144px + env(safe-area-inset-bottom)); }
}
@media (max-width: 576px) { .ui-totop { right: 14px; } }

/* ---------- Compteurs : les chiffres ne « dansent » pas pendant qu'ils défilent ---------- */
[data-count], .stat-tile-value, .insight-value, .stat-card-value-modern, .stat-number, .stat-value { font-variant-numeric: tabular-nums; }

/* Impression : uniquement le contenu */
@media print {
  .shell-sidebar, .shell-topbar, .shell-footer, .bottom-nav, .toast-stack, .public-nav, .site-footer, .palette, .page-progress, .impersonation-bar, .ui-totop { display: none !important; }
  body.has-shell::before, body.is-visitor::before { display: none; }
  html.ui-ambient { background: #fff; }
  .shell-content { padding: 0 !important; max-width: none; animation: none; }
  body.has-shell { background: #fff; }
}

/* Accessibilité : mouvements réduits */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  body.has-shell::before, body.is-visitor::before, .progress-bar::after { animation: none; }
  .progress-bar::after { display: none; }
}

/* Tableaux : toujours défilables horizontalement (certains styles de rôle imposaient overflow: hidden) */
.shell-content .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   Mobile : marges, grilles et débordements (≤ 576px)
   Les anciens gabarits empilent .shell-content, .content-wrapper et
   .container-fluid : trois marges internes qui écrasent le contenu.
   ========================================================================== */
@media (max-width: 576px) {
  .shell-content { --content-gutter: 14px; padding-top: 14px; }
  .shell-content .content-wrapper,
  .shell-content .content-area,
  .shell-content .container,
  .shell-content .container-fluid { padding-left: 0 !important; padding-right: 0 !important; max-width: 100%; }
  /* Le rognage horizontal reste assuré par .shell-content : inutile de couper les ombres et les gouttières */
  .shell-content .content-wrapper,
  .shell-content .content-area,
  .shell-content .dashboard-modern { overflow-x: visible; }
  /* Gouttières réduites : les marges négatives des .row restent dans la marge de la page */
  /* (common.css fige « .row { margin: 0 -.75rem } » et le padding des colonnes : on les recale ici) */
  .shell-content .row:not(.g-0):not(.gx-0) { --bs-gutter-x: 1rem; margin-left: -.5rem; margin-right: -.5rem; }
  .shell-content .row:not(.g-0):not(.gx-0) > [class*="col"] { padding-left: .5rem; padding-right: .5rem; }
  /* .card-body.row : la marge négative de la grille décalerait le corps hors de la carte */
  .shell-content .card-body.row { margin-left: 0 !important; margin-right: 0 !important; }
  /* Contenu flexible : autoriser le rétrécissement et le retour à la ligne */
  .shell-content .btn-group:not(.btn-group-vertical):not(.week-nav) { flex-wrap: wrap; }
  /* Navigation de semaine : flèches seules, le libellé central reste lisible */
  .week-nav .week-nav-label { display: none; }
  .week-nav .btn { white-space: nowrap; }
  /* Libellés longs (« Continuer après la période offerte »…) : retour à la ligne plutôt que débordement */
  .shell-content .btn:not(.btn-sm):not(.btn-icon), .modal .btn { white-space: normal; }
  .shell-content h1, .shell-content h2, .shell-content h3 { overflow-wrap: break-word; }
  .shell-content .card-body, .shell-content .card-header { overflow-wrap: break-word; }
  .shell-content .card-body { padding: 1rem; }
  .shell-content .card-header { padding: .85rem 1rem; }
  .current-profile-image, .upload-profile-image { padding: 1.25rem; }
  .modal-body { padding: 1rem; }
  .modal-header, .modal-footer { padding: .9rem 1rem; }
  .modal-footer { flex-wrap: wrap; }
  .table-responsive { margin-bottom: 0; }
  .table-responsive > .table { min-width: 100%; }
  .table-responsive > .table th { white-space: nowrap; }
  .table-responsive > .table-sm td { white-space: nowrap; }
  /* En-têtes « titre … actions » : passage à la ligne au lieu d'écraser le titre */
  .shell-content .d-flex.justify-content-between:not(.flex-nowrap),
  .shell-content .d-flex.justify-content-end:not(.flex-nowrap) { flex-wrap: wrap; row-gap: .5rem; }
  /* Champs : jamais plus larges que leur colonne (les champs date/heure ont une largeur intrinsèque) */
  .shell-content .form-control, .shell-content .form-select, .shell-content input, .shell-content select, .shell-content textarea { min-width: 0; max-width: 100%; }
  /* Anciens gabarits : un second .main-content imbriqué ajoutait encore une marge */
  .shell-content .main-content { padding-left: 0; padding-right: 0; overflow-x: visible; }
  /* Tuiles de statistiques : deux par ligne plutôt qu'une longue colonne */
  .shell-content .ui-grid:has(> .stat-tile:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shell-content .ui-grid > .stat-tile { padding: 14px; }
  .shell-content .ui-grid > .stat-tile .stat-tile-value { font-size: 1.5rem; }
  .shell-content .ui-grid > .stat-tile .stat-tile-label { font-size: .68rem; letter-spacing: .04em; }
  .shell-content .ui-grid > .stat-tile .stat-tile-icon { width: 32px; height: 32px; font-size: .9rem; }
}

/* Bouton d'enregistrement des longs formulaires : toujours accessible au-dessus de la barre de navigation basse */
@media (max-width: 768px) {
  .form-sticky-actions {
    position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 5;
    padding: 10px; margin-left: -4px; margin-right: -4px; border-radius: 16px;
    background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--ui-shadow);
  }
  .form-sticky-actions .btn { flex: 1; justify-content: center; }
}