/*
 * NDJA Tool UI 1.0.0
 * Shared components are unprefixed by a legacy tool name. The four scoped
 * adapters at the end only bridge existing markup to this design system.
 */

.ndja-tool-suite,
.ndja-tool-suite-vigie {
  --ndja-tool-navy: #18324a;
  --ndja-tool-navy-deep: #003a5d;
  --ndja-tool-green: #007254;
  --ndja-tool-green-hover: #005f46;
  --ndja-tool-green-soft: #eaf5f1;
  --ndja-tool-canvas: #f4f7f8;
  --ndja-tool-surface: #ffffff;
  --ndja-tool-line: #dce5e9;
  --ndja-tool-line-strong: #bdcbd2;
  --ndja-tool-text: #263d50;
  --ndja-tool-muted: #657482;
  --ndja-tool-danger: #a04444;
  --ndja-tool-danger-hover: #813535;
  --ndja-tool-info: #eaf2f7;
  --ndja-tool-warning: #fff4dc;
  --ndja-tool-success: #e7f5ef;
  --ndja-tool-radius: 17px;
  --ndja-tool-radius-control: 10px;
  --ndja-tool-shadow-focus: 0 0 0 3px rgba(0, 114, 84, .2);
  --ndja-tool-space-1: 4px;
  --ndja-tool-space-2: 8px;
  --ndja-tool-space-3: 12px;
  --ndja-tool-space-4: 16px;
  --ndja-tool-space-5: 20px;
  --ndja-tool-space-6: 24px;
  --ndja-tool-space-7: 28px;
  --ndja-tool-space-8: 36px;
}

.ndja-tool,
.ndja-tool *,
.ndja-tool *::before,
.ndja-tool *::after {
  box-sizing: border-box;
}

.ndja-tool {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  color: var(--ndja-tool-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.55;
}

.ndja-tool h1,
.ndja-tool h2,
.ndja-tool h3,
.ndja-tool h4 {
  color: var(--ndja-tool-navy);
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.ndja-tool h1 { font-size: clamp(1.8rem, 3vw, 2rem) !important; line-height: 1.25 !important; }
.ndja-tool h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem) !important; line-height: 1.3 !important; }
.ndja-tool h3 { font-size: 1.375rem !important; line-height: 1.3 !important; }

.ndja-tool-back {
  display: inline-flex;
  align-items: center;
  gap: var(--ndja-tool-space-2);
  min-height: 44px;
  margin: 0 0 var(--ndja-tool-space-4);
  padding: 8px 2px;
  color: var(--ndja-tool-navy) !important;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
}

.ndja-tool-back svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ndja-tool-back:hover { color: var(--ndja-tool-green) !important; }
.ndja-tool-back:focus-visible { border-radius: 6px; outline: none; box-shadow: var(--ndja-tool-shadow-focus); }
.ndja-tool-back--legacy { display: none !important; }

.ndja-tool-header {
  margin: 0 0 var(--ndja-tool-space-6) !important;
  padding: var(--ndja-tool-space-7) !important;
  border: 1px solid var(--ndja-tool-line) !important;
  border-radius: var(--ndja-tool-radius) !important;
  background: var(--ndja-tool-canvas) !important;
  box-shadow: none !important;
  color: var(--ndja-tool-text) !important;
  text-align: left !important;
}

.ndja-tool-header h1,
.ndja-tool-header h2,
.ndja-tool-header p { max-width: 760px; }
.ndja-tool-header h1 { margin: 0 0 var(--ndja-tool-space-2) !important; }
.ndja-tool-header p { margin: 0 !important; color: var(--ndja-tool-muted) !important; font-size: 1rem !important; }

.ndja-tool-section {
  margin-bottom: var(--ndja-tool-space-6) !important;
  padding: var(--ndja-tool-space-7) !important;
  border: 1px solid var(--ndja-tool-line) !important;
  border-radius: var(--ndja-tool-radius) !important;
  background: var(--ndja-tool-surface) !important;
  box-shadow: none !important;
}

.ndja-tool-card {
  border: 1px solid var(--ndja-tool-line) !important;
  border-radius: var(--ndja-tool-radius) !important;
  background: var(--ndja-tool-surface) !important;
  box-shadow: none !important;
}

.ndja-tool-card:hover { border-color: var(--ndja-tool-line-strong) !important; }

.ndja-tool :where(label) {
  color: var(--ndja-tool-navy);
  font-size: .9375rem;
  font-weight: 700;
}

.ndja-tool :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--ndja-tool-line-strong) !important;
  border-radius: var(--ndja-tool-radius-control) !important;
  background: var(--ndja-tool-surface) !important;
  color: var(--ndja-tool-text) !important;
  font: inherit;
  line-height: 1.35;
  box-shadow: none !important;
}

.ndja-tool textarea { min-height: 112px; resize: vertical; }
.ndja-tool :where(input, select, textarea):focus { border-color: var(--ndja-tool-green) !important; outline: none !important; box-shadow: var(--ndja-tool-shadow-focus) !important; }
.ndja-tool :where(input, select, textarea):disabled { cursor: not-allowed; opacity: .7; background: var(--ndja-tool-canvas) !important; }

.ndja-tool-button,
.ndja-tool :where(button, input[type="button"], input[type="submit"], .button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ndja-tool-space-2);
  min-height: 48px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--ndja-tool-radius-control);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.ndja-tool-button--primary,
.ndja-tool :where(button[type="submit"], input[type="submit"]) {
  border-color: var(--ndja-tool-green) !important;
  background: var(--ndja-tool-green) !important;
  color: #fff !important;
}

.ndja-tool-button--primary:hover,
.ndja-tool :where(button[type="submit"], input[type="submit"]):hover {
  border-color: var(--ndja-tool-green-hover) !important;
  background: var(--ndja-tool-green-hover) !important;
}

.ndja-tool-button--secondary {
  border-color: var(--ndja-tool-line-strong) !important;
  background: var(--ndja-tool-surface) !important;
  color: var(--ndja-tool-navy) !important;
}

.ndja-tool-button--secondary:hover { border-color: var(--ndja-tool-green) !important; color: var(--ndja-tool-green) !important; }
.ndja-tool-button--discreet { border-color: transparent !important; background: transparent !important; color: var(--ndja-tool-navy) !important; }
.ndja-tool-button--destructive { border-color: var(--ndja-tool-danger) !important; background: var(--ndja-tool-danger) !important; color: #fff !important; }
.ndja-tool-button--destructive:hover { border-color: var(--ndja-tool-danger-hover) !important; background: var(--ndja-tool-danger-hover) !important; }

.ndja-tool :where(button, input, select, textarea, a):focus-visible { outline: none !important; box-shadow: var(--ndja-tool-shadow-focus) !important; }
.ndja-tool :where(button, input[type="button"], input[type="submit"]):disabled,
.ndja-tool-button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; transform: none !important; }

.ndja-tool-notice {
  padding: var(--ndja-tool-space-4) var(--ndja-tool-space-5) !important;
  border: 1px solid var(--ndja-tool-line) !important;
  border-left: 4px solid var(--ndja-tool-navy) !important;
  border-radius: var(--ndja-tool-radius-control) !important;
  background: var(--ndja-tool-info) !important;
  color: var(--ndja-tool-text) !important;
}

.ndja-tool-notice--success { border-left-color: var(--ndja-tool-green) !important; background: var(--ndja-tool-success) !important; }
.ndja-tool-notice--warning { border-left-color: #b87800 !important; background: var(--ndja-tool-warning) !important; }
.ndja-tool-notice--error { border-left-color: var(--ndja-tool-danger) !important; background: #faecec !important; }

.ndja-tool-empty {
  padding: var(--ndja-tool-space-8) var(--ndja-tool-space-6);
  border: 1px dashed var(--ndja-tool-line-strong);
  border-radius: var(--ndja-tool-radius);
  background: var(--ndja-tool-canvas);
  color: var(--ndja-tool-muted);
  text-align: center;
}

.ndja-tool-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ndja-tool-green-soft);
  color: var(--ndja-tool-green);
  font-size: .8125rem;
  font-weight: 750;
}

.ndja-tool-modal {
  padding: var(--ndja-tool-space-7);
  border: 1px solid var(--ndja-tool-line);
  border-radius: var(--ndja-tool-radius);
  background: var(--ndja-tool-surface);
  box-shadow: 0 20px 60px rgba(24, 50, 74, .18);
}

/* L'Escale: legacy adapter. */
.ndja-tool--escale .ndja-we__hero::before,
.ndja-tool--escale .ndja-we__hero::after { display: none !important; }
.ndja-tool--escale .ndja-we__shell { gap: var(--ndja-tool-space-5) !important; }
.ndja-tool--escale .ndja-we__sidebar,
.ndja-tool--escale .ndja-we__nav { border-radius: var(--ndja-tool-radius) !important; box-shadow: none !important; }
.ndja-tool--escale .ndja-we__panel { min-width: 0; }
.ndja-tool--escale .ndja-we__panel > :first-child { margin-top: 0 !important; }
.ndja-tool--escale .ndja-we__savebar { padding-block: var(--ndja-tool-space-4) !important; }
.ndja-tool--escale .ndja-we__card,
.ndja-tool--escale .ndja-we__summary-card { padding: var(--ndja-tool-space-5) !important; }

/* Le Phare: retain the four APGE accent colours, simplify the shell. */
.ndja-tool--phare .ndja-apge__hero::before,
.ndja-tool--phare .ndja-apge__hero::after { display: none !important; }
.ndja-tool--phare .ndja-apge__hero :where(h1, h2, h3) { color: var(--ndja-tool-navy) !important; }
.ndja-tool--phare .ndja-apge__steps { gap: var(--ndja-tool-space-3) !important; }
.ndja-tool--phare .ndja-apge__step { padding: var(--ndja-tool-space-3) var(--ndja-tool-space-4) !important; }
.ndja-tool--phare .ndja-apge__letter-card,
.ndja-tool--phare .ndja-apge__card { padding: var(--ndja-tool-space-6) !important; }

/* La Boussole: keep source/door accents while using the shared surfaces. */
.ndja-tool--boussole .ndja-boussole-v2__nav,
.ndja-tool--boussole .boussole-nav {
  margin-bottom: var(--ndja-tool-space-4) !important;
  padding: var(--ndja-tool-space-3) var(--ndja-tool-space-4) !important;
  border: 1px solid var(--ndja-tool-line) !important;
  border-radius: var(--ndja-tool-radius) !important;
  background: var(--ndja-tool-surface) !important;
  box-shadow: none !important;
}
.ndja-tool--boussole .ndja-boussole-v2__hero::before,
.ndja-tool--boussole .ndja-boussole-v2__hero::after,
.ndja-tool--boussole .boussole-hero::before,
.ndja-tool--boussole .boussole-hero::after,
.ndja-tool--boussole .boussole-hero-v2::before,
.ndja-tool--boussole .boussole-hero-v2::after { display: none !important; }
.ndja-tool--boussole .ndja-boussole-v2__hero :where(h1, h2, h3),
.ndja-tool--boussole .boussole-hero :where(h1, h2, h3),
.ndja-tool--boussole .boussole-hero-v2 :where(h1, h2, h3) { color: var(--ndja-tool-navy) !important; }
.ndja-tool--boussole .boussole-hero-v2 {
  min-height: 0 !important;
  height: auto !important;
  grid-template-columns: minmax(0, 1fr) 150px !important;
  gap: var(--ndja-tool-space-6) !important;
  align-items: center !important;
}
.ndja-tool--boussole .boussole-hero-v2 h1 {
  max-width: 760px !important;
  margin: 0 0 var(--ndja-tool-space-3) !important;
  font-size: clamp(1.8rem, 3vw, 2rem) !important;
  line-height: 1.25 !important;
}
.ndja-tool--boussole .boussole-hero-v2 .boussole-hero-copy > p:last-child {
  max-width: 760px !important;
  margin-bottom: 0 !important;
}
.ndja-tool--boussole .boussole-hero-v2 .boussole-compass {
  width: 120px !important;
  height: 120px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  color: var(--ndja-tool-navy) !important;
}
.ndja-tool--boussole .ndja-boussole-v2__card,
.ndja-tool--boussole .boussole-card,
.ndja-tool--boussole .boussole-door { padding: var(--ndja-tool-space-5) !important; }

/* Le Convoi remains the reference: only the shared shell/navigation is added. */
.ndja-tool--convoi { --ndja-tool-green: #007254; }

/* La Vigie > Mes outils only. */
.ndja-tool-suite-vigie .ndja-vigie__tool,
.ndja-tool-suite-vigie .ndja-tool-entry-card {
  display: flex !important;
  min-height: 245px !important;
  height: 100%;
  flex-direction: column;
  border-radius: var(--ndja-tool-radius) !important;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ndja-tool-suite-vigie .ndja-vigie__tool:hover,
.ndja-tool-suite-vigie .ndja-tool-entry-card:hover {
  border-color: var(--ndja-tool-line-strong) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(24, 50, 74, .09) !important;
}
.ndja-tool-suite-vigie .ndja-vigie__tool :where(svg, img),
.ndja-tool-suite-vigie .ndja-tool-entry-card :where(svg, img) {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  object-fit: contain;
}
.ndja-tool-suite-vigie .ndja-vigie__tool :where(a, button):focus-visible,
.ndja-tool-suite-vigie .ndja-tool-entry-card :where(a, button):focus-visible {
  outline: none;
  box-shadow: var(--ndja-tool-shadow-focus) !important;
}

@media (max-width: 1024px) {
  .ndja-tool { width: min(100% - 32px, 1180px) !important; }
  .ndja-tool-section { padding: var(--ndja-tool-space-6) !important; }
}

@media (max-width: 820px) {
  .ndja-tool--escale .ndja-we__shell { grid-template-columns: 1fr !important; }
  .ndja-tool--escale .ndja-we__sidebar,
  .ndja-tool--escale .ndja-we__nav { position: static !important; width: 100% !important; }
  .ndja-tool :where(.ndja-we__grid, .ndja-apge__grid, .ndja-boussole-v2__grid, .boussole-grid, .ndja-convoi-grid) { grid-template-columns: 1fr !important; }
  .ndja-tool--boussole .boussole-hero-v2 { grid-template-columns: 1fr !important; }
  .ndja-tool--boussole .boussole-hero-v2 .boussole-compass { display: none !important; }
}

@media (max-width: 600px) {
  .ndja-tool { width: min(100% - 24px, 1180px) !important; }
  .ndja-tool-header,
  .ndja-tool-section,
  .ndja-tool-modal { padding: 20px !important; }
  .ndja-tool h1 { font-size: 1.75rem !important; }
  .ndja-tool h2 { font-size: 1.35rem !important; }
  .ndja-tool :where(button, input[type="button"], input[type="submit"], .ndja-tool-button) { min-height: 48px; }
  .ndja-tool :where(table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (prefers-reduced-motion: reduce) {
  .ndja-tool *,
  .ndja-tool *::before,
  .ndja-tool *::after,
  .ndja-tool-suite-vigie .ndja-vigie__tool { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/*
 * La page Chefs et cadres reste exclue des styles éditoriaux généraux,
 * mais son en-tête doit suivre la navigation publique NDJA.
 */
body.page-id-1843 .site-header {
  box-shadow: 0 1px 0 rgba(24, 50, 74, 0.09);
}

body.page-id-1843 .primary-menu-container > ul > li > a {
  font-family: var(--ndja-font-body) !important;
  font-size: 0.96rem !important;
  font-weight: 650 !important;
}
