/* Easy Host Tanger theme for the Keystone admin (Keystar UI). Served at /easyhost/theme.css by routes.ts.
 * Keystar declares its palette and type as CSS custom properties on `.kui-theme.kui-scheme--*` elements (the html
 * element and the provider's root div); the selectors below outrank its single-class rules on both. */

/* ── Fonts (self-hosted from @fontsource-variable, see routes.ts) ── */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/easyhost/fonts/instrument-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/easyhost/fonts/instrument-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/easyhost/fonts/fraunces-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Keystar tokens ── */
:root.kui-theme,
html .kui-theme {
  --kui-typography-font-family-base:
    'Instrument Sans Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.kui-theme.kui-scheme--light,
.kui-theme.kui-scheme--auto {
  color-scheme: light;

  /* Neutrals: the site's warm paper and ink */
  --kui-color-scale-slate1: #ffffff;
  --kui-color-scale-slate2: #fbf8f3;
  --kui-color-scale-slate3: #f5efe6;
  --kui-color-scale-slate4: #ede4d7;
  --kui-color-scale-slate5: #e3d7c6;
  --kui-color-scale-slate6: #d3c4ae;
  --kui-color-scale-slate7: #b8aa95;
  --kui-color-scale-slate8: #938878;
  --kui-color-scale-slate9: #6b6259;
  --kui-color-scale-slate10: #4a4540;
  --kui-color-scale-slate11: #1d1d1b;

  /* Accent: the logo blues (buttons, links, focus, selection) */
  --kui-color-scale-indigo1: #fafcfe;
  --kui-color-scale-indigo2: #f3f7fb;
  --kui-color-scale-indigo3: #e8f0f7;
  --kui-color-scale-indigo4: #dde9f2;
  --kui-color-scale-indigo5: #cfe0ee;
  --kui-color-scale-indigo6: #b9d2e8;
  --kui-color-scale-indigo7: #a7c9e4;
  --kui-color-scale-indigo8: #6f9fcb;
  --kui-color-scale-indigo9: #2b5f90;
  --kui-color-scale-indigo10: #24507c;
  --kui-color-scale-indigo11: #1c3f63;

  /* Highlight: the logo orange */
  --kui-color-scale-pink1: #fffdf9;
  --kui-color-scale-pink2: #fffaf3;
  --kui-color-scale-pink3: #fef4e7;
  --kui-color-scale-pink4: #fdecd6;
  --kui-color-scale-pink5: #fce3c2;
  --kui-color-scale-pink6: #fad6a6;
  --kui-color-scale-pink7: #f8c47c;
  --kui-color-scale-pink8: #f6b04d;
  --kui-color-scale-pink9: #f39200;
  --kui-color-scale-pink10: #c46d06;
  --kui-color-scale-pink11: #a3530a;
}

/* ── Brand pieces (custom Logo, Navigation, dashboard) ── */
:root {
  --eh-deep: #1c3f63;
  --eh-deep-2: #24507c;
  --eh-blue: #377ab9;
  --eh-orange: #f39200;
  --eh-terra: #a3530a;
  --eh-cream: #f3ece2;
  --eh-ink: #1d1d1b;
  --eh-ink-2: #4a4540;
  --eh-line: #e3d7c6;
  --eh-display: 'Fraunces Variable', 'Iowan Old Style', Georgia, serif;
  --eh-shadow: 0 1px 2px rgba(32, 28, 24, 0.06), 0 12px 32px -18px rgba(32, 28, 24, 0.35);
}

.eh-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--eh-ink);
  text-decoration: none;
  outline: none;
  border-radius: 6px;
}
.eh-logo:focus-visible {
  outline: 2px solid var(--kui-color-scale-indigo9);
  outline-offset: 4px;
}
.eh-logo img {
  display: block;
  width: auto;
  height: 28px;
}
.eh-logo__tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--eh-cream);
  color: var(--eh-ink-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eh-nav-foot {
  display: grid;
  gap: 8px;
  width: 100%;
}
.eh-nav-site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--eh-deep);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}
.eh-nav-site:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.eh-nav-user {
  color: var(--kui-color-scale-slate9);
  font-size: 0.82rem;
}

/* Dashboard */
.eh-dash {
  display: grid;
  gap: 40px;
  padding-block: 28px 64px;
  max-width: 1240px;
}
.eh-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: 230px;
  padding: 32px 36px;
  border-radius: 18px;
  background: var(--eh-deep);
  color: var(--eh-cream);
  box-shadow: var(--eh-shadow);
}
.eh-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.eh-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(16, 38, 61, 0.94) 0%,
    rgba(16, 38, 61, 0.82) 45%,
    rgba(16, 38, 61, 0.35) 100%
  );
}
.eh-hero__body {
  position: relative;
  display: grid;
  gap: 12px;
  max-width: 620px;
}
.eh-hero__eyebrow {
  color: var(--eh-orange);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eh-hero h2 {
  margin: 0;
  font-family: var(--eh-display);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.eh-hero p {
  margin: 0;
  color: rgba(243, 236, 226, 0.86);
  font-size: 1rem;
  line-height: 1.55;
}
.eh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.eh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.eh-btn:focus-visible {
  outline: 2px solid var(--eh-orange);
  outline-offset: 3px;
}
.eh-btn--primary {
  background: var(--eh-orange);
  color: var(--eh-ink);
}
.eh-btn--primary:hover {
  background: #ffa526;
}
.eh-btn--ghost {
  border-color: rgba(243, 236, 226, 0.5);
  color: var(--eh-cream);
}
.eh-btn--ghost:hover {
  background: rgba(243, 236, 226, 0.12);
}
.eh-btn--quiet {
  border-color: var(--eh-line);
  background: #fff;
  color: var(--eh-deep);
}
.eh-btn--quiet:hover {
  border-color: var(--kui-color-scale-indigo8);
}
.eh-btn svg {
  width: 16px;
  height: 16px;
}

.eh-section {
  display: grid;
  gap: 16px;
}
.eh-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}
.eh-section h3 {
  margin: 0;
  font-family: var(--eh-display);
  font-size: 1.45rem;
  font-weight: 420;
  letter-spacing: -0.01em;
  color: var(--eh-ink);
}
.eh-section__hint {
  margin: 0;
  color: var(--kui-color-scale-slate9);
  font-size: 0.9rem;
}

/* "Tout le contenu": one panel per navigation section, one row per list */
.eh-map {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  align-items: start;
}
.eh-panel {
  padding: 8px 8px 10px;
  border: 1px solid var(--eh-line);
  border-radius: 14px;
  background: #fff;
}
.eh-panel__title {
  margin: 8px 10px 6px;
  color: var(--kui-color-scale-slate9);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eh-panel__rows {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.eh-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
}
.eh-row:hover {
  background: var(--kui-color-scale-slate2);
}
.eh-row__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--kui-color-scale-indigo4);
  color: var(--eh-deep);
}
.eh-row__icon svg {
  width: 18px;
  height: 18px;
}
.eh-row__body {
  display: grid;
  min-width: 0;
}
.eh-row__title {
  color: var(--eh-ink);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  outline: none;
}
/* The whole row is clickable; the add button stays above the stretched link. */
.eh-row__title::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
}
.eh-row__title:focus-visible::after {
  outline: 2px solid var(--kui-color-scale-indigo9);
  outline-offset: -2px;
}
.eh-row__meta {
  color: var(--kui-color-scale-slate9);
  font-size: 0.82rem;
}
.eh-row__add {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--eh-line);
  border-radius: 999px;
  background: #fff;
  color: var(--eh-deep);
  text-decoration: none;
}
.eh-row__add:hover {
  border-color: var(--kui-color-scale-indigo8);
  background: var(--kui-color-scale-indigo3);
}
.eh-row__add:focus-visible {
  outline: 2px solid var(--kui-color-scale-indigo9);
  outline-offset: 2px;
}
.eh-row__add svg {
  width: 15px;
  height: 15px;
}
.eh-export {
  margin: 0;
}

.eh-todo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.eh-task {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--kui-color-scale-pink6);
  background: var(--kui-color-scale-pink3);
}
.eh-task__count {
  font-family: var(--eh-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--eh-terra);
}
.eh-task__title {
  color: var(--eh-ink);
  font-weight: 600;
  text-decoration: none;
  outline: none;
}
.eh-task__title::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
}
.eh-task__title:focus-visible::after {
  outline: 2px solid var(--eh-terra);
  outline-offset: 2px;
}
.eh-task:hover {
  border-color: var(--kui-color-scale-pink8);
}
.eh-task__text {
  color: var(--eh-ink-2);
  font-size: 0.86rem;
  line-height: 1.45;
}
.eh-task__links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.eh-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kui-color-scale-pink6);
  color: var(--eh-terra);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.eh-chip:hover {
  border-color: var(--eh-terra);
}
.eh-done {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #eef6f0;
  color: #1f5e3a;
  font-weight: 500;
}

.eh-recent {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--eh-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.eh-recent li + li {
  border-top: 1px solid var(--eh-line);
}
.eh-recent a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  color: var(--eh-ink);
  text-decoration: none;
}
.eh-recent a:hover {
  background: var(--kui-color-scale-slate2);
}
.eh-recent a:focus-visible {
  outline: 2px solid var(--kui-color-scale-indigo9);
  outline-offset: -2px;
}
.eh-recent__title {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eh-recent__date {
  color: var(--kui-color-scale-slate9);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.eh-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.eh-pill--published {
  background: #e3f1e8;
  color: #1f5e3a;
}
.eh-pill--draft {
  background: var(--kui-color-scale-pink4);
  color: var(--eh-terra);
}

@media (max-width: 640px) {
  .eh-hero {
    padding: 24px;
    min-height: 0;
  }
  .eh-recent a {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .eh-recent__date {
    display: none;
  }
}