:root {
  --color-brand-primary: #2F6669;
  --color-brand-primary-hover: #254F52;
  --color-sidebar: #ffffff;
  --color-sidebar-soft: #E7F0EF;
  --color-page-background: #F6F7F5;
  --color-surface: #ffffff;
  --color-border: #D5DEDD;
  --color-text: #1D2929;
  --color-text-muted: #667675;
  --color-success: #237a4b;
  --color-warning: #9a6700;
  --color-danger: #a52828;
  --color-info: #176b87;
  --radius-small: 5px;
  --radius-medium: 9px;
  --shadow-surface: 0 6px 20px rgba(20, 20, 18, .06);

  --ink: var(--color-text);
  --charcoal: var(--color-sidebar);
  --charcoal-soft: var(--color-sidebar-soft);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --canvas: var(--color-page-background);
  --surface: var(--color-surface);
  --radius: var(--radius-small);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { min-width: 320px; margin: 0; color: var(--color-text); background: var(--color-page-background); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .94rem; line-height: 1.5; }
a { color: var(--color-brand-primary-hover); text-underline-offset: 2px; }
a:hover { color: var(--color-text); }
:focus-visible { outline: 3px solid var(--color-brand-primary); outline-offset: 2px; box-shadow: none !important; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 2000; top: .5rem; left: .5rem; transform: translateY(-160%); padding: .6rem .8rem; color: #fff; background: var(--color-brand-primary-hover); border-radius: var(--radius-small); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }

/* Application shell and grouped navigation */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { position: fixed; z-index: 1040; width: 264px; height: 100vh; padding: 1.3rem 1rem; overflow-y: auto; color: #fff; background: var(--color-sidebar); border-right: 3px solid var(--color-brand-primary); }
.app-frame { min-width: 0; width: calc(100% - 264px); margin-left: 264px; overflow-x: clip; }
.brand { display: block; width: 176px; margin: 0 .5rem 1.7rem; text-decoration: none; }
.brand img { display: block; width: 100%; height: auto; object-fit: contain; }
.sidebar-section-title { margin: 1.25rem .65rem .45rem; color: #bdbdb7; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.administration-title { padding-top: 1rem; border-top: 1px solid #454540; }
.sidebar-nav { padding: 0; margin: 0; list-style: none; }
.sidebar-nav > li + li { margin-top: .18rem; }
.nav-link { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: .62rem .72rem; color: #f4f4ef; background: transparent; border: 0; border-left: 3px solid transparent; border-radius: var(--radius-small); font: inherit; font-weight: 680; text-align: left; text-decoration: none; }
.nav-link:hover { color: #fff; background: var(--color-sidebar-soft); }
.nav-link.active { color: #171717; background: var(--color-brand-primary); border-left-color: #fff; }
.sidebar-overlay { display: none; }
.app-topbar { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 2rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.sidebar-toggle { display: none; }
.app-search { display: flex; gap: .5rem; width: min(100%, 500px); }
.user-menu, .user-menu form { display: flex; align-items: center; gap: .45rem; margin: 0; }
.user-menu__identity { display: flex; flex-direction: column; margin-right: .3rem; font-size: .75rem; }
.user-menu__identity span { color: var(--color-text-muted); }
.quick-actions { display: flex; max-width: 100%; align-items: center; gap: .38rem; min-height: 48px; padding: .5rem 2rem; overflow-x: auto; background: var(--color-sidebar-soft); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.quick-actions__label { color: var(--color-text-muted); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.quick-actions a { padding: .35rem .58rem; color: var(--color-brand-primary-hover); border: 1px solid var(--color-brand-primary); border-radius: var(--radius-small); font-size: .78rem; font-weight: 720; text-decoration: none; }
.quick-actions a:hover { color: #171717; background: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.app-content { width: 100%; max-width: 1720px; padding: 1.7rem 2rem 2.5rem; }

/* Reusable design system */
.page-header, .page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.page-title, .page-heading h1 { margin: 0; color: var(--color-text); font-size: clamp(1.65rem, 2vw, 2.05rem); font-weight: 780; letter-spacing: -.025em; }
.page-description { max-width: 760px; margin: .25rem 0 0; color: var(--color-text-muted); }
.eyebrow { margin: 0 0 .25rem; color: var(--color-brand-primary-hover); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.toolbar, .action-group, .secondary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.page-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.action-group { justify-content: flex-end; margin-top: 1rem; }
.secondary-actions { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--color-border); }
.secondary-actions form { margin: 0; }
.btn { min-height: 38px; padding: .46rem .78rem; border-radius: var(--radius-small); font-weight: 720; }
.btn-primary, .primary-button { color: #171717; background: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.btn-primary:hover, .btn-primary:focus, .primary-button:hover { color: #171717; background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); }
.btn-secondary, .secondary-button, .btn-outline-secondary, .btn-outline-primary { color: #353531; background: var(--color-surface); border: 1px solid #96968f; }
.btn-secondary:hover, .secondary-button:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover { color: #171717; background: #eeeeea; border-color: #66665f; }
.btn-danger, .danger-button { color: #fff; background: var(--color-danger); border-color: var(--color-danger); }
.icon-button { display: inline-flex; min-height: 34px; align-items: center; padding: .35rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); font-weight: 700; text-decoration: none; }
.card, .panel, .filters, .table-responsive, .email-workspace-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); box-shadow: var(--shadow-surface); }
.panel { min-width: 0; padding: 1rem; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.panel-header h2, .section-heading h2 { margin: 0; font-size: 1.08rem; font-weight: 780; }
.panel-header p, .section-heading p { margin: .18rem 0 0; }
.panel-section + .panel-section { margin-top: 1rem; }
.tabs { display: flex; gap: .25rem; margin-bottom: 1rem; overflow-x: auto; border-bottom: 1px solid var(--color-border); }
.tab { flex: 0 0 auto; padding: .62rem .78rem; color: var(--color-text-muted); background: transparent; border: 0; border-bottom: 3px solid transparent; font: inherit; font-weight: 720; text-decoration: none; }
.tab:hover, .tab.active { color: var(--color-text); border-bottom-color: var(--color-brand-primary); }
.filter-bar { display: grid; grid-template-columns: minmax(230px, 1.5fr) repeat(3, minmax(145px, .7fr)) auto; gap: .8rem; align-items: end; margin-bottom: 1rem; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); }
.form-grid { display: grid; gap: .9rem; }
.form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.full-width { grid-column: 1 / -1; }
.form-field { margin-bottom: .9rem; }
.form-field label, .advanced-content > label, .preview-context-form > label { display: block; margin-bottom: .35rem; color: #30302d; font-weight: 720; }
.form-control, .form-select { min-height: 40px; border-color: #a8a8a1; border-radius: var(--radius-small); }
.form-control:focus, .form-select:focus { border-color: var(--color-brand-primary); box-shadow: 0 0 0 .2rem rgba(47, 102, 105, .18); }
.help-text, .form-text { color: var(--color-text-muted); font-size: .82rem; }
.error-message, .success-message, .warning-message { margin-bottom: 1rem; padding: .78rem .9rem; border: 1px solid; border-radius: var(--radius-small); }
.error-message { color: #671d1d; background: #fff1f1; border-color: #e0aaaa; }
.success-message { color: #155b35; background: #eefaf3; border-color: #98d5b3; }
.warning-message { color: #654700; background: #fff8df; border-color: #dfc36a; }
.error-message p:last-child, .success-message p:last-child, .warning-message p:last-child { margin-bottom: 0; }
.empty-state { padding: 2rem 1rem; color: var(--color-text-muted); text-align: center; }
.empty-state h2, .empty-state h3 { color: var(--color-text); }
.badge, .status-badge { display: inline-flex; align-items: center; padding: .3rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 760; }
.badge-neutral { color: #42423e; background: #ecece8; }
.badge-warning { color: #513c00; background: #ffe9a3; }
.status-recu, .status-envoye { color: #155b35; background: #e6f6ed; }
.status-brouillon { color: #514a39; background: #eeeae0; }
.status-echec { color: #7e1e1e; background: #fde7e7; }
.status-archive { color: #555; background: #e8e8e5; }
.data-table-wrap, .table-responsive { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; contain: inline-size; }
.data-table, .table { width: 100%; margin: 0; border-collapse: collapse; }
.data-table th, .data-table td, .table > :not(caption) > * > * { padding: .72rem .78rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.data-table th, .table thead th { color: #454540; background: #eeeeea; font-size: .69rem; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.data-table tbody tr:hover, .table-hover tbody tr:hover > * { background: var(--color-sidebar-soft); }
.pagination { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1rem; }
.collapsible-section { margin-top: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.collapsible-section summary { padding: .75rem .85rem; cursor: pointer; font-weight: 760; }
.advanced-content { padding: 0 .85rem .85rem; }
.code-field { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; }
.sticky-actions { position: static; padding: .8rem 0 0; background: transparent; border-top: 1px solid var(--color-border); }
.unsaved-indicator { color: #674b00; background: #fff1bd; padding: .35rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 760; }

/* Email history, composer, templates and settings */
.split-view, .compose-layout { display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(350px, .95fr); gap: 1rem; align-items: start; }
.compose-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .85rem; padding-left: 1.5rem; }
.compose-steps > li:nth-child(n+5) { grid-column: 1 / -1; }
.preview-panel, .template-list-panel, .template-editor-panel { min-width: 0; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); box-shadow: var(--shadow-surface); }
.email-client-chrome { padding: .7rem .8rem; background: #efefeb; border: 1px solid var(--color-border); border-radius: var(--radius-small) var(--radius-small) 0 0; }
.email-client-chrome div { display: grid; grid-template-columns: 60px 1fr; gap: .5rem; }
.email-client-chrome span { color: var(--color-text-muted); font-size: .76rem; text-transform: uppercase; }
.email-preview-frame { display: block; width: 100%; min-height: 540px; overflow-x: hidden; overflow-y: auto; background: #fff; border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-small) var(--radius-small); }
.email-preview-text { max-height: 420px; margin: 0; padding: 1rem; overflow-x: hidden; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; background: #fafaf8; border: 1px solid var(--color-border); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.email-body-view pre { max-height: 600px; padding: 1rem; overflow: auto; white-space: pre-wrap; background: #fafaf8; border: 1px solid var(--color-border); }
.relation-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.email-template-workspace { display: grid; grid-template-columns: minmax(205px, .72fr) minmax(430px, 1.5fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
.template-list, .template-editor-panel { scrollbar-width: thin; }
.template-list-panel, .template-editor-panel, .email-template-workspace > .preview-panel { max-height: calc(100vh - 185px); overflow-y: auto; }
.template-state-filter { display: flex; margin-top: .6rem; }
.template-list-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .35rem; padding: .65rem; color: var(--color-text); border: 1px solid transparent; border-radius: var(--radius-small); text-decoration: none; }
.template-list-item:hover { background: #f2f2ee; }
.template-list-item.active { background: var(--color-sidebar-soft); border-color: var(--color-brand-primary); }
.template-list-item strong, .template-list-item small { display: block; }
.template-list-item small { color: var(--color-text-muted); }
.status-dot { display: inline-block; width: 9px; height: 9px; margin-left: .3rem; background: #999; border-radius: 50%; }
.status-dot.active { background: var(--color-success); }
.simple-editor-toolbar { display: flex; gap: .25rem; padding: .35rem; background: #efefeb; border: 1px solid #aaa; border-bottom: 0; border-radius: var(--radius-small) var(--radius-small) 0 0; }
.simple-editor-toolbar button, .preview-device-switch button { padding: .3rem .48rem; color: var(--color-text); background: #fff; border: 1px solid var(--color-border); border-radius: 3px; font-size: .78rem; }
.visual-email-editor { min-height: 235px; padding: .85rem; overflow: auto; background: #fff; border: 1px solid #aaa; border-radius: 0 0 var(--radius-small) var(--radius-small); }
.variable-list { margin: .8rem 0; padding: .75rem; background: #f7f7f3; border-radius: var(--radius-small); }
.variable-list > div { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.variable-badge { padding: .25rem .45rem; color: var(--color-brand-primary-hover); background: var(--color-sidebar-soft); border: 1px solid var(--color-brand-primary); border-radius: 999px; font-size: .75rem; }
.preview-device-switch { display: flex; gap: .2rem; }
.preview-device-switch button.active { background: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.preview-context-form { display: grid; gap: .5rem; margin-bottom: .8rem; }
.email-preview-shell { margin-inline: auto; transition: max-width .15s ease; }
.email-preview-shell.mobile-preview { max-width: 390px; }
.settings-layout { display: grid; grid-template-columns: minmax(560px, 1.45fr) minmax(300px, .55fr); gap: 1rem; align-items: start; }
.settings-tabs { flex-wrap: wrap; margin: -1rem -1rem 1rem; padding: .25rem 1rem 0; overflow: visible; }
.settings-tabs .tab { padding: .55rem .62rem; }
.settings-section { min-height: 400px; }
.section-heading { margin-bottom: 1rem; }
.technical-section { border-left: 4px solid var(--color-warning); padding-left: 1rem; }
.safe-config-summary div, .email-client-chrome dl div { display: grid; grid-template-columns: minmax(110px, .35fr) 1fr; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--color-border); }
.safe-config-summary dt, .email-client-chrome dt { color: var(--color-text-muted); font-weight: 720; }
.safe-config-summary dd, .email-client-chrome dd { margin: 0; }
.agency-preview { position: sticky; top: 1rem; }
.agency-preview-card { padding: 1.25rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-brand-primary); border-radius: var(--radius-small); text-align: center; }
.agency-preview-card img { width: min(180px, 80%); max-height: 90px; object-fit: contain; }
.agency-preview-card h3 { margin: 1rem 0 .5rem; }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 1.25rem; background: var(--color-sidebar); }
.login-card { width: min(100%, 440px); padding: 2rem; background: #fff; border: 4px solid var(--color-brand-primary); border-radius: var(--radius-medium); }

/* 1366px laptop: preserve three useful email panels and visible actions. */
@media (max-width: 1366px) {
  .app-sidebar { width: 236px; }
  .app-frame { width: calc(100% - 236px); margin-left: 236px; }
  .app-content { padding: 1.35rem; }
  .email-template-workspace { grid-template-columns: minmax(180px, .65fr) minmax(390px, 1.45fr) minmax(270px, .9fr); gap: .7rem; }
  .template-list-panel, .template-editor-panel, .email-template-workspace > .preview-panel { max-height: calc(100vh - 165px); }
  .filter-bar { grid-template-columns: minmax(200px, 1.4fr) repeat(3, minmax(125px, .7fr)) auto; }
}

/* 1024px tablet landscape: sidebar becomes a drawer, workspaces use two rows. */
@media (max-width: 1024px) {
  .app-sidebar { width: 264px; transform: translateX(-105%); transition: transform .18s ease-out; }
  .app-frame { width: 100%; margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
  .sidebar-open .app-sidebar { transform: translateX(0); }
  .sidebar-overlay { position: fixed; z-index: 1035; inset: 0; width: 100%; border: 0; background: rgba(0, 0, 0, .5); }
  .sidebar-open .sidebar-overlay { display: block; }
  .app-topbar, .quick-actions { padding-inline: 1rem; }
  .email-template-workspace { grid-template-columns: minmax(210px, .7fr) minmax(450px, 1.3fr); }
  .email-template-workspace > .preview-panel { grid-column: 1 / -1; }
  .template-list-panel, .template-editor-panel, .email-template-workspace > .preview-panel { max-height: none; overflow: visible; }
  .settings-layout { grid-template-columns: 1fr; }
  .agency-preview { position: static; }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar .btn { width: max-content; }
}

/* 768px portrait tablet and mobile: stack without critical horizontal overflow. */
@media (max-width: 768px) {
  .app-topbar { flex-wrap: wrap; padding: .75rem; }
  .app-search { order: 3; width: 100%; }
  .user-menu__identity { display: none; }
  .user-menu .btn { padding-inline: .5rem; font-size: .78rem; }
  .quick-actions { padding-inline: .75rem; }
  .app-content { padding: 1rem .75rem 2rem; }
  .page-header, .page-heading { flex-direction: column; }
  .page-header > .btn, .page-heading > .btn { width: 100%; }
  .filter-bar, .form-grid.two-columns, .split-view, .compose-layout, .email-template-workspace, .settings-layout { grid-template-columns: 1fr; }
  .compose-steps { grid-template-columns: 1fr; }
  .compose-steps > li:nth-child(n+5) { grid-column: auto; }
  .email-template-workspace > .preview-panel { grid-column: auto; }
  .settings-tabs { margin-inline: -.75rem; padding-inline: .75rem; }
  .settings-form { padding: .75rem; }
  .settings-section { min-height: 0; }
  .data-table { min-width: 0; table-layout: fixed; }
  .data-table th:nth-child(3), .data-table td:nth-child(3),
  .data-table th:nth-child(5), .data-table td:nth-child(5) { display: none; }
  .data-table th, .data-table td { overflow-wrap: anywhere; word-break: normal; }
  .panel { padding: .8rem; }
  .page-header-actions { width: 100%; justify-content: stretch; }
  .page-header-actions .btn { flex: 1; }
  .settings-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .sticky-actions { justify-content: stretch; }
  .sticky-actions .btn { flex: 1 1 100%; }
  .email-preview-frame { min-height: 480px; }
  .pagination { justify-content: space-between; }
}