/* Dialogues et contrôles communs : une présentation cohérente avec CALIGEST. */
.modal {
  --cg-dialog-ink: #263550;
  --cg-dialog-muted: #748195;
  --cg-dialog-line: #e4e9f0;
  --bs-modal-width: 560px;
}
.modal-backdrop { --bs-backdrop-bg: #15223a; --bs-backdrop-opacity: .36; }
.modal.fade .modal-dialog { transform: translateY(12px); transition: transform .18s ease-out; }
.modal.show .modal-dialog { transform: none; }
.modal .modal-dialog { margin: clamp(16px, 4vh, 38px) auto; }
.modal .modal-dialog.modal-lg { --bs-modal-width: 860px; }
.modal .modal-content {
  max-height: calc(100dvh - clamp(32px, 8vh, 76px));
  overflow: hidden;
  color: var(--cg-dialog-ink);
  border: 1px solid #ffffffba;
  border-radius: 18px;
  box-shadow: 0 28px 80px #101c3740, 0 4px 16px #101c371c;
}
.modal .modal-header {
  flex-shrink: 0;
  min-height: 86px;
  padding: 20px 24px;
  gap: 16px;
  border-bottom: 1px solid var(--cg-dialog-line);
  background: #fcfdff;
}
.cg-modal-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cg-modal-heading-copy { min-width: 0; }
.cg-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #314667;
  font-size: 20px;
  background: #eef2f7;
  border-radius: 12px;
  box-shadow: inset 0 -2px 0 #e7aa5240;
}
.cg-modal-kicker { display: block; margin-bottom: 2px; color: var(--cg-dialog-muted); font-size: 11px; font-weight: 600; letter-spacing: .065em; text-transform: uppercase; }
.modal .modal-title { margin: 0; color: var(--cg-dialog-ink); font-size: 21px; font-weight: 600; line-height: 1.25; }
.modal .btn-close {
  box-sizing: border-box;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 9px;
  margin: 0 0 0 auto;
  border-radius: 9px;
  background-color: #f0f3f8;
  background-size: 11px;
  opacity: .7;
  transition: background-color .15s, opacity .15s;
}
.modal .btn-close:hover { background-color: #e6ebf2; opacity: 1; }
.modal .btn-close:focus-visible { opacity: 1; outline: 2px solid #d69848; outline-offset: 3px; box-shadow: none; }
.modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; scrollbar-width: thin; scrollbar-color: #bac5d5 transparent; }
.modal .modal-body.cg-modal-form-body { display: flex; padding: 0; overflow: hidden; }
.cg-dialog-form { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; }
.cg-dialog-scroll { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px; scrollbar-width: thin; scrollbar-color: #bac5d5 transparent; }
.modal .modal-footer {
  flex-shrink: 0;
  gap: 9px;
  padding: 16px 24px;
  margin: 0;
  border-top: 1px solid var(--cg-dialog-line);
  background: #f8fafc;
}
.modal .modal-footer > * { margin: 0; }
.modal .btn { min-height: 38px; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.modal .btn-primary { color: #fff; background: #263550; border-color: #263550; box-shadow: 0 2px 4px #20324b12; }
.modal .btn-primary:hover { color: #fff; background: #182741; border-color: #182741; }
.modal .btn-primary:focus-visible { outline: 2px solid #d69848; outline-offset: 3px; box-shadow: none; }
.modal .btn-outline-secondary { color: #5d6d82; border-color: #d8e0ea; background: #fff; }
.modal .btn-outline-secondary:hover { color: #263550; border-color: #b8c5d5; background: #eef2f7; }
.modal .form-control, .modal .form-select {
  min-width: 0;
  min-height: 41px;
  color: #33455f;
  border-color: #dce3ec;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 1px 2px #14243c04;
}
.modal .form-control:focus, .modal .form-select:focus { border-color: #8496b0; box-shadow: 0 0 0 3px #334b7010; }
.modal .preferences-grid { gap: 16px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal .preferences-grid label, .modal .form-label { font-size: 13px; color: #596a80; font-weight: 500; }
.modal .preference-section { padding-bottom: 22px; margin-bottom: 22px; border-color: var(--cg-dialog-line); }
.modal .preference-section:last-child { margin-bottom: 0; padding-bottom: 0; border: 0; }
.modal .preference-section h3 { margin-bottom: 12px; color: #2f405b; font-size: 16px; font-weight: 600; }
.modal .preference-note { color: #748195; font-size: 13px; line-height: 1.55; }
.modal .threshold-description { padding: 10px 13px; border-radius: 8px; background: #f4f7fa; margin-bottom: 0; }
.modal .theme-options { gap: 9px; }
.modal .theme-choice { flex: 1 1 120px; padding: 12px; color: #596a80; border-radius: 9px; border-color: #e1e7ef; font-size: 13px; transition: border-color .15s, background-color .15s; }
.modal .theme-choice:has(input:checked) { color: #263550; border-color: #8596ae; background: #f3f6fa; }
.modal .theme-choice input { width: 16px; height: 16px; margin: 0; accent-color: #314667; }
.modal .theme-choice input:focus-visible { outline: 2px solid #d69848; outline-offset: 3px; }
.modal .logo-preview { height: 94px; border: 1px dashed #d6dfeb; border-radius: 9px; background: #f8fafc; }
.cg-dialog-footer-note { display: inline-flex; align-items: center; gap: 7px; flex: 1 1 auto; color: #8090a3; font-size: 12px; }

/* Les familles gardent une hiérarchie nette sans empiler des champs encadrés. */
#familiesModal .modal-dialog { --bs-modal-width: 800px; }
.family-settings-intro { margin-bottom: 19px; }
.family-settings-intro span { display: block; }
.modal .family-settings-table { table-layout: fixed; width: 100%; margin: 0; font-size: 13px; border-color: #eaf0f5; }
.family-settings-table thead { position: sticky; top: -1px; z-index: 1; background: #fff; }
.modal .family-settings-table th { padding: 10px 6px 12px; background: #fff; color: #8591a2; font-size: 11px; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; border-bottom: 1px solid #dfe6ef; box-shadow: 0 1px 0 #dfe6ef; }
.modal .family-settings-table th:nth-child(1) { width: 68px; }
.modal .family-settings-table th:nth-child(3) { width: 96px; text-align: center; }
.modal .family-settings-table th:nth-child(4) { width: 68px; text-align: center; }
.modal .family-settings-table td { padding: 8px 6px; vertical-align: middle; border-bottom: 1px solid #edf1f6; background: transparent; }
.modal .family-settings-table tbody tr:last-child td { border-bottom: 0; }
.modal .family-settings-table tbody tr:hover { background: #fafbfd; }
.family-order-controls { display: flex; gap: 2px; }
.family-order-controls .family-order-button { display: inline-flex; justify-content: center; align-items: center; width: 27px; height: 30px; min-width: 0; padding: 0; background: transparent; border: 0; border-radius: 6px; color: #7b8da5; font-size: 13px; transition: background-color .15s, color .15s; }
.family-order-controls .family-order-button:hover:not(:disabled) { color: #2d4262; background: #eaf0f6; }
.family-order-controls .family-order-button:focus-visible { outline: 2px solid #d69848; outline-offset: 1px; }
.family-order-controls .family-order-button:disabled { color: #c8d1dc; cursor: default; }
.modal .family-settings-table .family-name-input { width: 100%; min-width: 0; min-height: 36px; padding: 7px 9px; border-color: transparent; background: transparent; box-shadow: none; color: #34465f; font-size: 14px; }
.modal .family-settings-table .family-name-input:hover { border-color: #e1e7ef; background: #fff; }
.modal .family-settings-table .family-name-input:focus { border-color: #a6b5c8; background: #fff; box-shadow: 0 0 0 3px #334b700c; }
.modal .family-settings-parent .family-name-input { font-weight: 500; }
.modal .family-settings-table .family-child-name { position: relative; padding-left: 26px; }
.family-child-name::before { content: ""; position: absolute; top: 8px; left: 15px; width: 7px; height: 18px; border-left: 1px solid #ccd6e3; border-bottom: 1px solid #ccd6e3; border-radius: 0 0 0 2px; }
.modal .family-settings-child .family-name-input { color: #738299; font-size: 13px; }
.family-row-count { text-align: center; }
.family-count-badge { display: inline-block; min-width: 35px; padding: 3px 8px; background: #f1f4f8; border-radius: 6px; color: #65778f; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.family-count-badge.is-empty { color: #a5afbc; background: #f6f8fb; }
.family-visibility-check { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 36px; min-height: 36px; margin: 0; cursor: pointer; border-radius: 7px; }
.family-visibility-check:hover { background: #eef2f7; }
.family-row-visibility { text-align: center; }
.family-visibility-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-family-hidden .family-name-input { color: #6f7d91 !important; }

/* Cases natives : les états clavier, désactivé et indéterminé restent disponibles. */
input[type="checkbox"]:not([role="switch"]):not(.cg-switch input):not(.form-switch input) {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 0;
  vertical-align: middle;
  border: 1.5px solid #c2ccda;
  border-radius: 5px;
  background-color: #fff;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  box-shadow: 0 1px 2px #20324b06;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
input[type="checkbox"]:not([role="switch"]):not(.cg-switch input):not(.form-switch input):hover:not(:disabled) { border-color: #7589a4; }
input[type="checkbox"]:not([role="switch"]):not(.cg-switch input):not(.form-switch input):checked {
  border-color: #334965;
  background-color: #334965;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8 3 3 6-6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not([role="switch"]):not(.cg-switch input):not(.form-switch input):indeterminate {
  border-color: #334965;
  background-color: #334965;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not([role="switch"]):not(.cg-switch input):not(.form-switch input):focus { box-shadow: none; }
input[type="checkbox"]:not([role="switch"]):not(.cg-switch input):not(.form-switch input):focus-visible { outline: 2px solid #d69848; outline-offset: 3px; border-color: #7187a4; }
input[type="checkbox"]:not([role="switch"]):not(.cg-switch input):not(.form-switch input):disabled { opacity: .45; cursor: default; }
.cg-tooltip { --bs-tooltip-bg: #263550; --bs-tooltip-opacity: 1; --bs-tooltip-color: #fff; --bs-tooltip-border-radius: 6px; --bs-tooltip-padding-x: 10px; --bs-tooltip-padding-y: 7px; font-family: inherit; font-size: 12px; box-shadow: 0 3px 12px #16243b18; }

@media (max-width: 575.98px) {
  .modal .modal-dialog { margin: 12px; }
  .modal .modal-content { max-height: calc(100dvh - 24px); border-radius: 14px; }
  .modal .modal-header { min-height: 76px; padding: 16px; gap: 10px; }
  .cg-modal-heading { gap: 10px; }
  .cg-modal-icon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
  .cg-modal-kicker { font-size: 10px; }
  .modal .modal-title { font-size: 18px; }
  .modal .modal-body, .cg-dialog-scroll { padding: 18px 16px; }
  .modal .modal-body.cg-modal-form-body { padding: 0; }
  .modal .modal-footer { padding: 13px 16px; gap: 8px; }
  .modal .modal-footer .btn { padding: 8px 13px; }
  .modal .preferences-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cg-dialog-footer-note { flex-basis: 100%; font-size: 11px; }
  .modal .family-settings-table th:nth-child(1) { width: 52px; }
  .modal .family-settings-table th:nth-child(3) { width: 42px; font-size: 0; }
  .modal .family-settings-table th:nth-child(3)::after { content: "Nb."; font-size: 11px; }
  .modal .family-settings-table th:nth-child(4) { width: 42px; font-size: 0; }
  .modal .family-settings-table th:nth-child(4)::after { content: "Masq."; font-size: 10px; }
  .modal .family-settings-table th { font-size: 10px; padding-right: 2px; padding-left: 2px; }
  .modal .family-settings-table td { padding: 8px 2px; }
  .modal .family-settings-table .family-name-input { font-size: 12px; padding: 7px 4px; }
  .modal .family-settings-table .family-child-name { padding-left: 13px; }
  .family-child-name::before { left: 5px; width: 5px; }
  .family-order-controls { gap: 0; }
  .family-order-controls .family-order-button { width: 24px; height: 32px; }
  .family-count-badge { min-width: 30px; padding: 3px 5px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog, .modal .btn-close, .modal .theme-choice, .family-order-controls .family-order-button, input[type="checkbox"] { transition: none; }
}
@media (forced-colors: active) {
  input[type="checkbox"]:not([role="switch"]):not(.cg-switch input):not(.form-switch input) { appearance: auto; -webkit-appearance: auto; background-image: none; }
}