/* Atelier — espace client (SPEC §10, ADR-028) : le style « Ciel et corail » des pages publiques, en clair. Mêmes jetons
   que le cockpit, autres valeurs : les classes communes (.btn, .field, .input, .auth-*) suivent. Le corail est réservé
   aux actions principales et au OUI ; liens et focus restent à l'encre. Contrastes vérifiés : texte ≥ 4,5:1 sur le fond
   et les surfaces. Police auto-hébergée (SIL Open Font License 1.1, voir fonts/OFL.txt). */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-variable.woff2") format("woff2");
}

html.theme-espace {
  --bg: #f0f6fc;
  --nav: #ffffff;
  --nav-border: #e3eaf1;
  --surface: #ffffff;
  --surface-2: #eaf2fa;
  --surface-3: #dceaf7;
  --border: #e3eaf1;
  --border-strong: #c9d7e5;
  --hairline: #e8eef4;
  --text: #0b2540;
  --muted: #3a5470;
  --faint: #5a6f86;
  --accent: #0b2540;
  --accent-hover: #16335a;
  --accent-ink: #ffffff;
  --accent-soft: rgba(11, 37, 64, 0.08);
  --corail: #ff6b4a;
  --corail-hover: #f25a38;
  --corail-pale: #ffe3dc;
  --corail-voile: #fff1ec;
  --ciel: #dceaf7;
  --en-ligne: #2f9e5b;
  --attente: #8a4b00;
  --attente-soft: #fff3dd;
  --erreur: #b42318;
  --erreur-soft: rgba(180, 35, 24, 0.08);
  --ok: #1d6b45;
  --ok-soft: #e1f3e8;
  --radius: 16px;
  --radius-sm: 12px;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

html.theme-espace body {
  font-size: 16px;
  line-height: 1.55;
  font-optical-sizing: auto;
}

html.theme-espace .auth-alert {
  color: var(--erreur);
  border-color: rgba(180, 35, 24, 0.3);
}

html.theme-espace .auth-card {
  border: 0;
  border-radius: 22px;
  box-shadow: 0 24px 48px -30px rgba(11, 37, 64, 0.35);
}

/* The wordmark, as on the public pages: a coral diamond, « atelier » in lower case. */
.es-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.es-brand:hover {
  color: var(--text);
  text-decoration: none;
}

.es-brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--corail);
  transform: rotate(45deg);
}

/* ---------- Coque : le menu d'un site à gauche ; sur téléphone et tablette en hauteur, une barre d'onglets ---------- */

.es-app {
  min-height: 100vh;
  display: flex;
}

.es-side {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: none;
  width: 260px;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 14px;
  background: var(--nav);
  border-right: 1px solid var(--nav-border);
}

.es-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.es-topbar {
  display: none;
}

/* A-1c: an administrator sees a client's space, read-only; a band says so, above everything. */
.es-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 32px;
  background: var(--attente-soft);
  border-bottom: 1px solid var(--border-strong);
  font-size: 14px;
}

.es-support p,
.es-support form {
  margin: 0;
}

@media (max-width: 1023px) {
  .es-support {
    flex-wrap: nowrap;
    padding: 8px 16px;
    font-size: 13px;
    line-height: 1.4;
  }

  .es-support .es-btn {
    flex: none;
    white-space: nowrap;
  }
}

.es-main {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 32px 56px;
  box-sizing: border-box;
}

/* The site of the menu: a card, a list of the other sites when the member has several. */
.es-site-switch {
  position: relative;
}

.es-site-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  list-style: none;
  cursor: pointer;
}

.es-site-card::-webkit-details-marker {
  display: none;
}

.es-site-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--corail-pale);
  font-weight: 800;
}

.es-site-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.es-site-label strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}

.es-site-state {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.es-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}

.es-dot-ok {
  background: var(--en-ligne);
}

.es-site-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 36px -24px rgba(11, 37, 64, 0.4);
}

.es-site-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--text);
  font-weight: 600;
}

.es-site-list a:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.es-sidenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.es-sidelink {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  justify-content: flex-start;
  cursor: pointer;
}

.es-sidelink:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.es-sidelink.active {
  background: var(--ciel);
  font-weight: 800;
}

.es-sidelink svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.es-badge {
  margin-left: auto;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--corail);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

.es-side-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.es-signout {
  margin: 0;
}

.es-tabbar {
  display: none;
}

.es-account {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--corail-pale);
  color: var(--text);
  font-weight: 800;
}

.es-account:hover {
  text-decoration: none;
}

/* Below 1024 px (a phone, a tablet held upright): no side menu, a bar at the top and tabs at the bottom (ADR-028). */
@media (max-width: 1023px) {
  .es-side {
    display: none;
  }

  .es-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px 6px 8px;
    background: var(--nav);
    border-bottom: 1px solid var(--nav-border);
  }

  .es-main {
    padding: 20px 16px 104px;
  }

  .es-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
    background: var(--nav);
    border-top: 1px solid var(--nav-border);
  }

  .es-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 48px;
    padding-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
  }

  .es-tab:hover {
    color: var(--text);
    text-decoration: none;
  }

  .es-tab.active {
    color: var(--text);
    font-weight: 800;
  }

  .es-tab svg {
    width: 22px;
    height: 22px;
  }

  .es-tab .es-badge {
    position: absolute;
    top: 0;
    left: 56%;
    margin: 0;
  }
}

/* ---------- Textes ---------- */

.es-title {
  margin: 0 0 8px;
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.es-h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.es-h3 {
  margin: 20px 0 8px;
  font-size: 16px;
  font-weight: 800;
}

.es-lead {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 17px;
}

.es-muted {
  color: var(--muted);
}

.es-empty {
  margin: 0;
  padding: 16px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface);
}

.es-breadcrumb {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
}

/* The trial of an account (M8): what remains of it, and « M'abonner ». */
.es-trial {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin: 0 0 20px;
}

.es-trial p {
  margin: 0;
}

.es-banner {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--attente-soft);
  color: var(--text);
}

.es-success {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--ok-soft);
  color: var(--ok);
}

/* ---------- Sections, cartes, listes ---------- */

.es-section {
  margin-top: 28px;
}

.es-panel {
  padding: 22px;
  background: var(--surface);
  border-radius: 22px;
}

.es-subpanel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.es-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.es-card {
  padding: 20px 22px;
  background: var(--surface);
  border-radius: 22px;
}

/* Waits for the member: ringed in coral, the colour of the OUI. */
.es-card-attente {
  box-shadow: inset 0 0 0 2px var(--corail);
}

.es-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.es-card-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.es-card-text {
  margin: 8px 0 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.es-card-actions,
.es-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* « Vos données » (M8-8): the download and the list of sites breathe after their explanation. */
.es-data .es-actions,
.es-data .es-list {
  margin-top: 12px;
}

.es-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border-radius: 20px;
}

.es-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
}

.es-row + .es-row {
  border-top: 1px solid var(--hairline);
}

.es-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.es-row-title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.es-row-text {
  overflow-wrap: anywhere;
}

.es-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.es-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}

.es-meta dt {
  color: var(--muted);
}

.es-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* A DNS record to copy (ADR-022): the whole value selected at once, cut anywhere rather than at its hyphen. */
.es-record {
  margin: 12px 0;
}

.es-record code {
  user-select: all;
  font-size: 0.95em;
  word-break: break-all;
}

/* ---------- Étiquettes ---------- */

.es-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.es-tag-ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.es-tag-attente {
  background: var(--corail-pale);
  color: var(--text);
}

.es-tag-cours {
  background: var(--surface-3);
  color: var(--text);
}

/* ---------- Boutons et formulaires ---------- */

.es-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--text);
  background: var(--surface);
  color: var(--text);
  text-align: center;
  cursor: pointer;
}

.es-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.es-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The main action, and the OUI: coral, ink text. */
.es-btn-primary {
  background: var(--corail);
  box-shadow: none;
  font-weight: 800;
}

.es-btn-primary:hover {
  background: var(--corail-hover);
}

.es-btn-dark {
  background: var(--text);
  box-shadow: none;
  color: #ffffff;
}

.es-btn-dark:hover {
  background: var(--accent-hover);
  color: #ffffff;
}

.es-btn-small {
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
}

.es-btn-danger {
  color: var(--erreur);
  box-shadow: inset 0 0 0 2px var(--erreur);
}

.es-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}

/* A form's button keeps its own width; only a phone's bar of actions stretches them. */
.es-form > .es-btn {
  align-self: flex-start;
}

.es-form .field label {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.es-textarea {
  min-height: 110px;
  resize: vertical;
}

/* The confirmation code: a sheet at the bottom of the screen, in view whatever was scrolled to. */
.es-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(11, 37, 64, 0.35);
}

.es-stepup {
  position: fixed;
  z-index: 51;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 3px solid var(--corail);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 32px rgba(11, 37, 64, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.es-decision {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.es-preview-link {
  font-size: 17px;
  min-height: 52px;
}

.es-stepup-title {
  margin: 0;
  font-weight: 600;
}

/* The brief (§6.9): the conversation, the merchant's messages on the right. */
.es-chat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.es-chat li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
}

.es-chat-moi {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--ciel);
}

.es-chat-agent {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: var(--bg);
}

.es-chat-attente {
  color: var(--muted);
  font-style: italic;
}

.es-chat-auteur {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.es-chat-texte {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Q-1: a message waiting for the assistant, which answers an earlier one first. */
.es-chat-file {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* A preview in the thread (§6.11.5): the captures side by side, then the answer. */
.es-chat .es-chat-carte {
  gap: 10px;
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--corail);
}

/* Before and after side by side, even on a phone: comparing them is the point. */
.es-captures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.es-capture {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.es-capture img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* The announcements (§6.11.8): the two days side by side. */
.es-dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

/* The visual history (§4.5): one panel per version, its home page, then all its pages. */
.es-versions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.es-version {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.es-version > p {
  margin: 0;
}

.es-version-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.es-version-head .es-h2 {
  margin: 0;
}

.es-version-image {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* A list item keeps the disclosure triangle: it shows that the pages unfold. */
.es-version-pages summary {
  cursor: pointer;
  display: list-item;
  padding: 10px 0;
  font-weight: 600;
  color: var(--accent);
}

.es-version-page {
  margin: 12px 0 6px;
  font-size: 16px;
}

.es-capture a {
  display: block;
}

.es-capture figcaption,
.es-chat-etat {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.es-list-simple {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.es-create {
  max-width: none;
}

/* A choice among proposals (§6.8): one card per proposal, its images, then the pick. */
.es-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.es-option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.es-option .es-muted {
  margin: 0;
}

.es-option-choisie {
  border: 2px solid var(--corail);
  box-shadow: 0 0 0 3px var(--corail-pale);
}

/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* An ambiance in words, under its preview (§16.1): its intention, its family, its palette as validated by the platform. */
.es-ambiance {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.es-ambiance-texte {
  margin: 0;
}

.es-ambiance-doux {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.es-swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
}

.es-swatches li {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
}

/* A mockup in its sandbox, at the width of the card: a phone's view. */
.es-option-frame {
  display: block;
  width: 100%;
  height: 560px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
}

/*
 * An ambiance « en grand » (D-3c): its page at computer size (1280 px, at 55 %), the phone's view (390 px, at 30 %)
 * laid over its corner, like two screenshots. Below 820 px of screen, the phone's view alone, larger.
 */
.es-options-ambiances {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.es-apercu {
  position: relative;
  width: 704px;
  max-width: 100%;
  height: 440px;
  margin-bottom: 20px;
}

.es-apercu-ordi,
.es-apercu-tel {
  position: absolute;
  overflow: hidden;
  background: #ffffff;
}

.es-apercu-ordi {
  inset: 0 auto auto 0;
  width: 704px;
  height: 440px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}

.es-apercu-tel {
  right: 14px;
  bottom: -20px;
  width: 117px;
  height: 253px;
  border: 4px solid #15171c;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgb(0 0 0 / 0.35);
}

.es-apercu iframe {
  display: block;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

/* The captures of a designed page's first screens (D-5), during the trial: they fill their screen. */
.es-apercu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.es-apercu-ordi iframe {
  width: 1280px;
  height: 800px;
  transform: scale(0.55);
}

.es-apercu-tel iframe {
  width: 390px;
  height: 844px;
  transform: scale(0.3);
}

/* The whole preview opens the page: a convenience for the mouse, the link below it serves the keyboard. */
.es-apercu-lien {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 10px;
}

@media (max-width: 820px) {
  .es-apercu {
    width: 234px;
    height: 506px;
    margin: 0 auto 4px;
  }

  .es-apercu-ordi {
    display: none;
  }

  .es-apercu-tel {
    inset: 0;
    width: 226px;
    height: 498px;
  }

  .es-apercu-tel iframe {
    transform: scale(0.58);
  }
}

/* The top of a full-page screenshot: enough to compare; the link opens it whole. */
.es-option-capture {
  display: block;
  border-radius: 8px;
}

.es-option-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.es-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}

.es-choice input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.es-fieldset {
  margin: 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

.es-fieldset legend {
  padding: 0;
  font-weight: 600;
}

/* The texts of a site (§10): one panel per block, its mode, the member's text, the agent's proposal. */
.es-texte-bilan {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.es-texte-bilan p {
  margin: 0;
}

.es-texte {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.es-texte > p {
  margin: 0;
}

.es-texte-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.es-texte-tete .es-h2 {
  margin: 0;
}

.es-texte .es-fieldset {
  padding-top: 0;
  border-top: 0;
}

.es-modes {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
}

.es-modes .es-choice {
  font-weight: 500;
}

.es-compteur {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.es-compteur-trop {
  color: var(--erreur);
  font-weight: 600;
}

.es-proposition {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--surface-2);
  border-radius: 8px;
}

.es-proposition .es-h3 {
  margin: 0;
}

.es-garde {
  background: var(--ok-soft);
}

.es-texte-valeur p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.es-texte-valeur .es-texte-titre {
  font-size: 18px;
  font-weight: 700;
}

.es-reecrire {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* The facts of a site (§10): contact details, hours, the parcours's contents. */
.es-champs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.es-champs + .es-champs {
  padding-top: 16px;
}

.es-champs legend {
  margin-bottom: 8px;
}

.es-champs .field {
  margin: 0;
}

.es-champs-ligne {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: 12px;
}

.es-champs-ligne-egale {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.es-jour {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}

.es-jour-tete {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.es-jour-nom {
  font-weight: 600;
  min-width: 6rem;
}

.es-creneau {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.es-creneau .input {
  width: auto;
  min-width: 7rem;
}

.es-fermeture,
.es-element {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 8px;
}

.es-element .es-element {
  background: var(--surface);
}

.es-element-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.es-element-nom {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.es-liste > .es-btn,
.es-fermeture > .es-btn,
.es-champs > .es-btn {
  align-self: flex-start;
}

.es-champ-nombre .input {
  max-width: 10rem;
}

.es-parts .es-row-title {
  font-weight: 600;
}

/* The photos of a site (§10, ADR-018): those on it, the bank's results, the member's upload. */
.es-photos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.es-photo {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.es-photo-image,
.es-photo-attente {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--surface-2);
}

.es-photo-attente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.es-photo-corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.es-photo-corps p,
.es-photo-corps .field {
  margin: 0;
}

.es-photo-corps > .es-btn {
  align-self: flex-start;
}

.es-recherche {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.es-recherche .input {
  flex: 1 1 200px;
}

.es-resultats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 10px;
}

.es-resultat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.es-resultat img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-2);
}

.es-resultat .es-btn {
  align-self: flex-start;
}

/* The businesses of the register (ADR-022): one card each, the choice under its details. */
.es-entreprises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.es-entreprise {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.es-entreprise .es-btn {
  align-self: flex-start;
  margin-top: 6px;
}

.es-avertissement {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--attente-soft);
  border-radius: 8px;
}

.es-avertissement p {
  margin: 0;
}

/* ---------- Statistiques (§16.5) ---------- */

.es-periodes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.es-periode {
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
  font-size: 14px;
}

.es-periode[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

.es-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-tuile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.es-tuile-label {
  color: var(--muted);
  font-size: 14px;
}

.es-tuile-valeur {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
}

.es-tuile-ecart {
  color: var(--muted);
  font-size: 13px;
}

/* One column a day, from a single baseline; rounded at the top only. */
.es-colonnes {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 140px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--hairline);
}

.es-colonne {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-width: 0;
}

.es-colonne-barre {
  width: 100%;
  max-width: 24px;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
}

.es-colonnes-axe {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 13px;
}

.es-details {
  margin-top: 12px;
}

.es-details summary {
  cursor: pointer;
  color: var(--accent);
}

.es-table {
  margin-top: 8px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.es-table th,
.es-table td {
  padding: 4px 16px 4px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  font-weight: 400;
}

.es-table td {
  text-align: right;
}

.es-stats-listes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 16px;
}

.es-barres {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-barre-texte {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.es-barre-label {
  overflow-wrap: anywhere;
}

.es-barre-valeur {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.es-barre-piste {
  display: block;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
}

.es-barre-trait {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}

.es-rapport + .es-rapport {
  margin-top: 12px;
}

.es-rapport > p {
  margin: 0 0 10px;
}

.es-suggestions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.es-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* ---------- Kit commerçant (M7-7) ---------- */

.es-affiche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  margin: 16px auto;
  padding: 32px 24px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: #ffffff;
  color: #1f1d1a;
  text-align: center;
  aspect-ratio: 210 / 297;
}

.es-affiche p {
  margin: 0;
}

.es-affiche-nom {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
}

.es-affiche-accroche {
  font-size: 17px;
}

.es-affiche-qr {
  width: 60%;
  margin: 12px 0;
}

.es-affiche-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.es-affiche-appel {
  font-size: 18px;
  font-weight: 600;
}

.es-affiche-adresse,
.es-affiche-telephone {
  font-size: 16px;
}

.es-affiche-horaires {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
}

.es-signature {
  margin: 12px 0;
  padding: 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: #ffffff;
}

.es-champs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.es-champ dt {
  font-weight: 600;
}

.es-champ dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 0;
}

.es-champ-valeur {
  margin: 0;
  white-space: pre-line;
}

/* Printing the kit prints the poster alone, on one A4 page: everything else is out of the flow. */
@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  body:has(.es-affiche) {
    background: #ffffff;
  }

  body:has(.es-affiche) .skip-link,
  body:has(.es-affiche) .es-header,
  body:has(.es-affiche) .es-footer,
  .es-main:has(.es-affiche) > :not(:has(.es-affiche)),
  .es-affiche-section > :not(.es-affiche) {
    display: none;
  }

  .es-affiche-section {
    margin: 0;
    padding: 0;
    border: none;
  }

  .es-affiche {
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    aspect-ratio: auto;
    break-inside: avoid;
  }

  .es-affiche-nom {
    font-size: 44px;
  }

  .es-affiche-accroche,
  .es-affiche-appel {
    font-size: 24px;
  }

  .es-affiche-adresse,
  .es-affiche-telephone {
    font-size: 22px;
  }

  .es-affiche-horaires {
    font-size: 16px;
  }
}

.es-etapes {
  margin: 0 0 16px;
  padding-left: 20px;
}

.es-etapes li + li {
  margin-top: 6px;
}

.es-mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (max-width: 560px) {
  .es-title {
    font-size: 24px;
  }

  .es-header {
    gap: 4px;
  }

  .es-header .brand-name {
    display: none;
  }

  .es-nav-link {
    padding: 0 10px;
  }

  .es-link-btn {
    padding: 0 4px;
  }

  .es-meta {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .es-meta dd {
    margin-bottom: 8px;
  }

  .es-card-actions .es-btn {
    flex: 1 1 100%;
  }
}

/* The tiers to choose from when subscribing (M8). */
.es-tiers {
  display: grid;
  gap: 10px;
  width: 100%;
}

.es-tier {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
}

.es-tier > :not(input) {
  grid-column: 2;
}

.es-tier-choisi {
  border-color: var(--accent);
}

.es-tier-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
}

.es-tier-features {
  font-size: 14px;
}

/* ---------- Tableau de bord d'un site (ADR-028) ---------- */

.es-dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 8px;
}

.es-dash-head .es-lead {
  margin-bottom: 12px;
}

.es-dash-head .es-actions {
  margin-bottom: 12px;
}

.es-dash-note {
  margin: 0 0 20px;
}

.es-valider-head {
  margin-top: 0;
}

.es-valider-captures {
  max-width: 640px;
  margin: 14px 0 16px;
}

.es-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.es-dash-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.es-dash-grid > .es-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.es-dash-grid > .es-panel > p,
.es-dash-grid .es-h2 {
  margin: 0;
}

.es-dash-state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.es-dash-state .es-dot {
  width: 10px;
  height: 10px;
}

.es-dash-site .es-actions {
  margin-top: auto;
  padding-top: 6px;
}

.es-dash-compose {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.es-dash-compose textarea {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 52px;
  resize: vertical;
}

.es-dash-compose .es-btn {
  flex: none;
  min-height: 52px;
  border-radius: 14px;
}

.es-dash-starts {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.es-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.es-chip:hover {
  background: var(--surface-3);
  color: var(--text);
  text-decoration: none;
}

.es-chip svg {
  width: 18px;
  height: 18px;
}

.es-dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.es-dash-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 12px;
}

.es-dash-link {
  margin-top: auto;
  padding-top: 4px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- « Plus » (téléphone) et « Réglages du site » ---------- */

.es-plus {
  margin-top: 16px;
  padding: 10px;
}

.es-settings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.es-setting {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
}

.es-setting:hover {
  color: var(--text);
  text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--surface-3);
}

.es-setting strong {
  display: block;
  font-size: 17px;
}

.es-setting .es-muted {
  display: block;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.es-setting-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--corail-pale);
}

.es-setting-icon svg {
  width: 20px;
  height: 20px;
}

.es-setting-text {
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1023px) {
  .es-dash-compose {
    flex-direction: column;
    align-items: stretch;
  }
}

/* The icons of buttons, chips and the site card: the size of the text, never stretched. */
.es-btn svg,
.es-site-card > svg,
.es-site-list svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.es-card-title + .es-card-actions {
  margin-top: 14px;
}

.es-site-switch[open] .es-site-card > svg {
  transform: rotate(180deg);
}

/* ---------- La conversation : le fil, la saisie en bas (ADR-028) ---------- */

.es-thread {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: var(--surface);
}

.es-thread-messages {
  min-height: 240px;
  padding: 22px;
}

.es-thread-empty {
  margin: 0;
  color: var(--muted);
}

.es-thread-compose {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--hairline);
}

.es-thread-compose textarea {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 52px;
  resize: vertical;
}

.es-thread-compose .es-btn {
  flex: none;
  min-height: 52px;
  border-radius: 14px;
}

.es-thread-note {
  margin: 0 22px 18px;
}

/* ---------- L'écran du OUI ---------- */

.es-decision-captures {
  max-width: 720px;
}

.es-answer .es-btn {
  min-height: 52px;
  padding: 0 24px;
  font-size: 16px;
}

/* With the side menu, the breadcrumb repeats it: shown only below 1024 px, where it leads back. */
@media (min-width: 1024px) {
  .es-breadcrumb {
    display: none;
  }
}

@media (max-width: 1023px) {
  .es-answer .es-btn {
    flex: 1 1 100%;
  }
}