/*
  Static element library (kind "element"). Every rule is scoped to a cms-el-* class: no global
  selectors and no bare-tag rules outside these classes. Colours and radii use the theme variables
  (--cms-*) with the site's real values as fallbacks, so the page looks as before with default theme.
  Rhythm: a flow element leaves var(--cms-el-gap, 1.25rem) below it; containers drop the last gap.
  Gaps between siblings: sm 0.75rem, md 1.5rem, lg 2.5rem (stacks use 0.5 / 1 / 2rem).
  Type scale (rem): 0.875 caption, 0.9375 small, 1 body, 1.0625 lead body, 1.125 card title,
  1.25 box title, 1.5 section title, 1.75 page heading, 2.75 figure. Headings wrap balanced, paragraphs
  stop near 65 characters.
  Surfaces by role: a standalone card (el-box) gets the site's card radius and soft shadow; repeated
  peer cards and data (tables) get a hairline border instead; media keeps a 18px radius.
  Focus: grey outline (#6b7280) or grey halo, never a blue ring.
*/
/* ================================================================ structure */
.cms-el-section {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  padding: 3rem 0;
}
.cms-el-section[data-cms-pad="sm"] { padding: 1.5rem 0; }
.cms-el-section[data-cms-pad="lg"] { padding: 4.5rem 0; }
.cms-el-section[data-cms-tone="soft"] { background: var(--cms-color-bg-soft, #f4fbff); }
.cms-el-section[data-cms-tone="tint"] { background: var(--cms-color-bg-tint, #e2f4ff); }
.cms-el-section-inner {
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.cms-el-section-text {
  max-width: 65ch;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
  color: var(--cms-color-text-soft, #4b5563);
}
.cms-el-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 800px;
  margin: 0 auto var(--cms-el-gap, 1.25rem);
}
.cms-el-container[data-cms-width="narrow"] { max-width: 640px; }
.cms-el-container[data-cms-width="wide"] { max-width: none; }
.cms-el-container-title {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--cms-color-primary-dark, #054e83);
}
.cms-el-container-text {
  max-width: 65ch;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
  color: var(--cms-color-text-soft, #4b5563);
}
.cms-el-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
}
.cms-el-row[data-cms-gap="sm"] { gap: 0.75rem; }
.cms-el-row[data-cms-gap="lg"] { gap: 2.5rem; }
.cms-el-row[data-cms-justify="start"] { justify-content: flex-start; }
.cms-el-row[data-cms-justify="center"] { justify-content: center; }
.cms-el-row[data-cms-justify="end"] { justify-content: flex-end; }
.cms-el-row[data-cms-justify="between"] { justify-content: space-between; }
.cms-el-row > * { margin: 0; }
/* side / stack: what a drop on the side of an element makes in the editor. Side by side shares the width (a photo keeps
   its own, up to half); a stack piles its children with the usual gap. div.x > * outweighs the site's own flex rules on
   the children (.about-first-block { flex: 1 1 520px } would make it 520 px tall in a stack). Phones: below. */
.cms-el-side { flex-wrap: nowrap; align-items: flex-start; }
div.cms-el-side > * { flex: 1 1 0; min-width: 0; }
div.cms-el-side > :is(img, picture, video, svg, figure) { flex: 0 1 auto; max-width: 50%; height: auto; }
.cms-el-stack {
  display: flex;
  flex-direction: column;
  gap: var(--cms-el-gap, 1.25rem);
  min-width: 0;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
}
.cms-el-row > .cms-el-stack { margin: 0; }
div.cms-el-stack > * { flex: 0 0 auto; margin-top: 0; margin-bottom: 0; }
.cms-el-cell {
  box-sizing: border-box;
  flex: 1 1 240px;
  min-width: 0;
}
.cms-el-cell-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--cms-color-text-soft, #4b5563);
}
.cms-el-columns {
  display: grid;
  align-items: start;
  gap: 1.5rem;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
}
.cms-el-columns[data-cms-gap="sm"] { gap: 0.75rem; }
.cms-el-columns[data-cms-gap="lg"] { gap: 2.5rem; }
.cms-el-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-el-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-el-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cms-el-columns > * { margin: 0; }
.cms-el-col {
  box-sizing: border-box;
  min-width: 0;
}
.cms-el-col-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--cms-color-primary-dark, #054e83);
}
.cms-el-col-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--cms-color-text-soft, #4b5563);
}
.cms-el-box {
  box-sizing: border-box;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  padding: 2.25rem 2rem;
  background: var(--cms-color-surface, #fff);
  border-radius: var(--cms-radius-card, 28px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.cms-el-box[data-cms-pad="sm"] { padding: 1.25rem; }
.cms-el-box[data-cms-pad="lg"] { padding: 3rem 2.75rem; }
.cms-el-box-title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--cms-color-primary-dark, #054e83);
}
.cms-el-box-text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
  color: var(--cms-color-text-soft, #4b5563);
}
.cms-el-spacer {
  display: block;
  height: 2.5rem;
  margin: 0;
}
.cms-el-spacer[data-cms-size="sm"] { height: 1rem; }
.cms-el-spacer[data-cms-size="lg"] { height: 4rem; }
.cms-el-spacer[data-cms-size="xl"] { height: 6rem; }
.cms-el-divider {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--cms-color-border, #e5e7eb);
}
.cms-el-divider[data-cms-line="dashed"] { border-top-style: dashed; }
.cms-el-divider[data-cms-line="dotted"] { border-top-style: dotted; border-top-width: 2px; }
/* ================================================================ text */
.cms-el-heading {
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--cms-color-primary-dark, #054e83);
}
.cms-el-heading[data-cms-align="center"] { text-align: center; }
.cms-el-paragraph {
  max-width: 65ch;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
  color: var(--cms-color-text-soft, #4b5563);
}
.cms-el-paragraph[data-cms-size="lead"] { font-size: 1.25rem; line-height: 1.6; }
.cms-el-paragraph[data-cms-size="small"] { font-size: 0.9375rem; line-height: 1.6; }
.cms-el-paragraph[data-cms-align="center"] { margin-left: auto; margin-right: auto; text-align: center; }
.cms-el-list {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  padding: 0;
  list-style: none;
}
.cms-el-list > li {
  position: relative;
  margin: 0;
  padding-left: 1.7rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--cms-color-text-soft, #4b5563);
}
.cms-el-list[data-cms-marker="dot"] > li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cms-color-primary, #0a67a7);
}
.cms-el-list[data-cms-marker="check"] > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--cms-color-primary, #0a67a7);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cms-el-list[data-cms-marker="none"] > li { padding-left: 0; }
.cms-el-ordered-list {
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  padding-left: 1.6rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--cms-color-text-soft, #4b5563);
}
.cms-el-ordered-list > li { margin: 0 0 0.6rem; padding-left: 0.25rem; }
.cms-el-ordered-list > li::marker {
  color: var(--cms-color-primary, #0a67a7);
  font-weight: 600;
}
.cms-el-quote {
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--cms-color-primary, #0a67a7);
}
.cms-el-quote-text {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--cms-color-text, #111827);
}
.cms-el-quote-cite {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cms-color-muted, #6b7280);
}
/* ================================================================ media */
.cms-el-image {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  border-radius: var(--cms-radius-box, 18px);
}
.cms-el-image[data-cms-fit="cover"] { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cms-el-image[data-cms-fit="wide"] { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.cms-el-figure { margin: 0 0 var(--cms-el-gap, 1.25rem); }
.cms-el-figure-img {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  border-radius: var(--cms-radius-box, 18px);
}
.cms-el-figure[data-cms-fit="cover"] .cms-el-figure-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cms-el-figure[data-cms-fit="wide"] .cms-el-figure-img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.cms-el-figure-caption {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  color: var(--cms-color-muted, #6b7280);
}
.cms-el-video {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  border-radius: var(--cms-radius-box, 18px);
  background: #0f172a;
  object-fit: cover;
}
.cms-el-video-embed { margin: 0 0 var(--cms-el-gap, 1.25rem); }
.cms-el-video-embed-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--cms-color-border, #e5e7eb);
  border-radius: var(--cms-radius-box, 18px);
  background: var(--cms-color-bg-soft, #f4fbff);
}
.cms-el-video-embed-iframe,
.cms-el-map-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cms-el-video-embed-hint,
.cms-el-map-hint {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  text-align: center;
}
.cms-el-video-embed-ico,
.cms-el-map-ico {
  width: 48px;
  height: 48px;
  color: var(--cms-color-primary, #0a67a7);
}
.cms-el-video-embed-text,
.cms-el-map-text {
  max-width: 30ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--cms-color-text-soft, #4b5563);
}
.cms-el-map {
  position: relative;
  overflow: hidden;
  height: 360px;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  border: 1px solid var(--cms-color-border, #e5e7eb);
  border-radius: var(--cms-radius-box, 18px);
  background: var(--cms-color-bg-soft, #f4fbff);
}
.cms-el-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.75rem;
  line-height: 0;
  color: var(--cms-color-primary, #0a67a7);
}
.cms-el-icon > svg { width: 28px; height: 28px; }
.cms-el-icon[data-cms-size="sm"] > svg { width: 20px; height: 20px; }
.cms-el-icon[data-cms-size="lg"] > svg { width: 40px; height: 40px; }
.cms-el-icon[data-cms-size="xl"] > svg { width: 56px; height: 56px; }
.cms-el-icon-text {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
}
.cms-el-icon-text-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--cms-color-bg-tint, #e2f4ff);
  color: var(--cms-color-primary, #0a67a7);
}
.cms-el-icon-text-badge > svg { width: 26px; height: 26px; }
.cms-el-icon-text-body { min-width: 0; }
.cms-el-icon-text-title {
  margin: 0.1rem 0 0.3rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
  color: var(--cms-color-primary-dark, #054e83);
}
.cms-el-icon-text-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--cms-color-text-soft, #4b5563);
}
/* ================================================================ actions */
.cms-el-button,
.cms-el-submit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  width: auto;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: var(--cms-radius-button, 28px);
  background: var(--cms-color-primary, #0a67a7);
  color: var(--cms-color-on-primary, #fff);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cms-el-button:hover,
.cms-el-submit:hover {
  background: var(--cms-color-primary-hover, #085488);
  color: var(--cms-color-on-primary, #fff);
}
.cms-el-button[data-cms-variant="secondary"],
.cms-el-button--secondary,
.cms-el-download[data-cms-variant="secondary"] {
  background: rgba(var(--cms-color-primary-rgb, 10, 103, 167), 0.1);
  color: var(--cms-color-primary-dark, #054e83);
}
.cms-el-button[data-cms-variant="secondary"]:hover,
.cms-el-button--secondary:hover,
.cms-el-download[data-cms-variant="secondary"]:hover {
  background: rgba(var(--cms-color-primary-rgb, 10, 103, 167), 0.18);
  color: var(--cms-color-primary-dark, #054e83);
}
.cms-el-button[data-cms-variant="outline"],
.cms-el-button--outline,
.cms-el-download[data-cms-variant="outline"] {
  background: var(--cms-color-surface, #fff);
  border-color: var(--cms-color-primary, #0a67a7);
  color: var(--cms-color-primary, #0a67a7);
}
.cms-el-button[data-cms-variant="outline"]:hover,
.cms-el-button--outline:hover,
.cms-el-download[data-cms-variant="outline"]:hover {
  background: rgba(var(--cms-color-primary-rgb, 10, 103, 167), 0.06);
  border-color: var(--cms-color-primary-hover, #085488);
  color: var(--cms-color-primary-hover, #085488);
}
.cms-el-button[data-cms-variant="text"],
.cms-el-button--text {
  padding-left: 8px;
  padding-right: 8px;
  background: transparent;
  color: var(--cms-color-primary, #0a67a7);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cms-el-button[data-cms-variant="text"]:hover,
.cms-el-button--text:hover {
  background: transparent;
  color: var(--cms-color-primary-hover, #085488);
}
.cms-el-button[data-cms-size="sm"] { padding: 10px 20px; font-size: 0.95rem; }
.cms-el-button[data-cms-size="lg"] { padding: 20px 40px; font-size: 1.2rem; }
.cms-el-button[data-cms-full],
.cms-el-submit[data-cms-full] { width: 100%; }
.cms-el-button:focus-visible,
.cms-el-submit:focus-visible,
.cms-el-link:focus-visible {
  outline: 2px solid #6b7280;
  outline-offset: 3px;
}
.cms-el-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
}
.cms-el-button-group[data-cms-justify="center"] { justify-content: center; }
.cms-el-button-group[data-cms-justify="end"] { justify-content: flex-end; }
.cms-el-button-group > .cms-el-button { margin: 0; }
.cms-el-button-group[data-cms-size="sm"] > .cms-el-button { padding: 10px 20px; font-size: 0.95rem; }
.cms-el-button-group[data-cms-size="lg"] > .cms-el-button { padding: 20px 40px; font-size: 1.2rem; }
.cms-el-link {
  display: inline-block;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  font-size: 1rem;
  font-weight: 500;
  color: var(--cms-color-primary, #0a67a7);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.cms-el-link:hover {
  color: var(--cms-color-primary-hover, #085488);
  text-decoration-thickness: 2px;
}
.cms-el-download { gap: 0.6rem; }
.cms-el-download-ico {
  flex: none;
  width: 20px;
  height: 20px;
}
.cms-el-download-meta {
  font-size: 0.875rem;
  font-weight: 400;
}
.cms-el-download-meta::before { content: "("; }
.cms-el-download-meta::after { content: ")"; }
/* ================================================================ data */
.cms-el-table-wrap {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  /* The wide table scrolls inside this box: its width must not leak into the page's min-content. */
  contain: inline-size;
  --cms-el-cell-x: 18px;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  overflow-x: auto;
  border: 1px solid var(--cms-color-border, #e5e7eb);
  border-radius: var(--cms-radius-box, 18px);
  background: var(--cms-color-surface, #fff);
}
.cms-el-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cms-color-text, #111827);
}
.cms-el-table caption {
  caption-side: top;
  padding: 1rem var(--cms-el-cell-x) 0.75rem;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--cms-color-primary-dark, #054e83);
}
.cms-el-table th,
.cms-el-table td {
  padding: 14px var(--cms-el-cell-x);
  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
  text-align: left;
  vertical-align: top;
}
.cms-el-table thead th {
  background: var(--cms-color-surface-soft, #f8fafc);
  font-weight: 600;
  color: var(--cms-color-primary-dark, #054e83);
}
.cms-el-table tbody tr:last-child > * { border-bottom: 0; }
/* Numbers (durations, prices) line up on their digits and sit at the right edge of their column. */
.cms-el-table .cms-el-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cms-el-table-wrap[data-cms-density="compact"] {
  --cms-el-cell-x: 12px;
}
.cms-el-table-wrap[data-cms-density="compact"] .cms-el-table th,
.cms-el-table-wrap[data-cms-density="compact"] .cms-el-table td {
  padding: 8px var(--cms-el-cell-x);
}
/* ================================================================ forms */
.cms-el-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  font-size: 1rem;
  color: var(--cms-color-text, #111827);
}
.cms-el-label {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cms-color-text, #111827);
}
.cms-el-input,
.cms-el-textarea,
.cms-el-select {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  /* 3:1 against white: the field edge stays visible (WCAG 1.4.11). */
  border: 1px solid #8a94a6;
  border-radius: 14px;
  background: var(--cms-color-surface, #fff);
  color: var(--cms-color-text, #111827);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Placeholder text: 4.8:1 against white. */
.cms-el-input::placeholder,
.cms-el-textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}
.cms-el-input:hover,
.cms-el-textarea:hover,
.cms-el-select:hover { border-color: #6b7280; }
.cms-el-input:focus,
.cms-el-textarea:focus,
.cms-el-select:focus {
  outline: none;
  border-color: #6b7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.25);
}
.cms-el-textarea {
  min-height: 9rem;
  resize: vertical;
}
.cms-el-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px 18px;
  cursor: pointer;
}
.cms-el-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cms-color-text-soft, #4b5563);
  cursor: pointer;
}
.cms-el-check-input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0.25rem 0 0;
  accent-color: var(--cms-color-primary-dark, #054e83);
}
.cms-el-check-input:focus-visible {
  outline: 2px solid #6b7280;
  outline-offset: 2px;
}
.cms-el-fieldset {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
  padding: 0;
  border: 0;
}
.cms-el-fieldset > .cms-el-check { margin: 0; }
.cms-el-legend {
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cms-color-text, #111827);
}
.cms-el-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0 0 var(--cms-el-gap, 1.25rem);
}
.cms-el-form > * { margin: 0; }
.cms-el-form-actions {
  display: flex;
  flex-wrap: wrap;
}
.cms-el-form-actions > .cms-el-submit { margin: 0; }
/* messages written by runtime/cms-runtime.js: the error line under a field, the status line above the actions.
 * Red is the site's error colour (#dc2626, the error text of the site's code page). */
.cms-el-error {
  display: block;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #dc2626;
}
.cms-el-error[hidden] { display: none; }
.cms-el-input.cms-ix-invalid,
.cms-el-textarea.cms-ix-invalid,
.cms-el-select.cms-ix-invalid,
.cms-el-input.cms-ix-invalid:hover,
.cms-el-textarea.cms-ix-invalid:hover { border-color: #dc2626; }
.cms-el-input.cms-ix-invalid:focus,
.cms-el-textarea.cms-ix-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); }
.cms-el-status {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #dc2626;
}
.cms-el-status[data-state="ok"] { color: var(--cms-color-primary-dark, #054e83); }
.cms-el-status:empty { display: none; }
/* ================================================================ last child: no trailing gap inside containers */
.cms-el-section-inner > :last-child,
.cms-el-container > :last-child,
.cms-el-cell > :last-child,
.cms-el-col > :last-child,
.cms-el-box > :last-child,
.cms-el-icon-text-body > :last-child {
  margin-bottom: 0;
}
/* ================================================================ tablet (<= 1024px) */
@media (max-width: 1024px) {
  .cms-el-columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-el-row { gap: 1.25rem; }
}
/* ================================================================ mobile (<= 768px) */
@media (max-width: 768px) {
  .cms-el-side { flex-direction: column; align-items: stretch; }
  div.cms-el-side > * { flex: 0 0 auto; }
  div.cms-el-side > :is(img, picture, video, svg, figure) { max-width: 100%; align-self: center; }
  .cms-el-section { padding: 2rem 0; }
  .cms-el-section[data-cms-pad="lg"] { padding: 3rem 0; }
  .cms-el-section-inner { padding: 0 1rem; }
  .cms-el-container-title,
.cms-el-heading { font-size: 1.5rem; }
  .cms-el-paragraph[data-cms-size="lead"] { font-size: 1.125rem; }
  .cms-el-quote-text { font-size: 1.125rem; }
  .cms-el-box { padding: 1.5rem 1.25rem; }
  .cms-el-box[data-cms-pad="sm"] { padding: 1rem; }
  .cms-el-box[data-cms-pad="lg"] { padding: 2rem 1.5rem; }
  .cms-el-columns { gap: 1.5rem; }
  .cms-el-columns-2,
.cms-el-columns-3,
.cms-el-columns-4 { grid-template-columns: minmax(0, 1fr); }
  .cms-el-button,
.cms-el-submit { padding: 14px 26px; font-size: 1rem; }
  .cms-el-button[data-cms-size="sm"] { padding: 9px 16px; }
  .cms-el-button[data-cms-size="lg"] { padding: 16px 30px; font-size: 1.1rem; }
  .cms-el-button-group { flex-direction: column; align-items: stretch; }
  .cms-el-button-group > .cms-el-button { width: 100%; }
  .cms-el-map { height: 280px; }
  .cms-el-table-wrap { --cms-el-cell-x: 12px; }
  .cms-el-table th,
.cms-el-table td { padding: 12px var(--cms-el-cell-x); }
}
@media (prefers-reduced-motion: reduce) {
  .cms-el-button,
.cms-el-submit,
.cms-el-input,
.cms-el-textarea,
.cms-el-select { transition: none; }
}

/* Material Symbols icons (setIcon "ms:<style>:<name>[:fill]", see server/core/icons-material.ts).
   A Material svg is one filled path in currentColor, with no stroke. The library items style their svgs for the
   Lucide set (stroke based, fill none), so these two properties are !important here: a Material icon cannot be
   hidden by an item rule. The user's own styles are emitted later with !important as well, so they still win. */
svg.cms-icon-ms {
  fill: currentColor !important;
  stroke: none !important;
  overflow: visible;
  flex-shrink: 0;
}

/* Site elements (site-*). The blocks use the site's own classes (style.css), so this file only holds what a block needs
   to stand alone outside its page, plus the rules of css/contact.css, which loads on the contact page only. Every
   value falls back to the site's theme variables and to the site's own colours. */

/* site-badge: the « Recommandé » pill. Inside a card, .pricing-card .badge positions it; this is the same pill alone. */
.cms-site-badge {
  display: inline-block;
  max-width: 100%;
  padding: 4px 16px;
  border-radius: 99px;
  background-color: var(--color-action, var(--cms-color-primary, #0a67a7));
  color: var(--cms-color-on-primary, #fff);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* site-separator: the thin line above the copyright in the footer (.footer-copy border-top). */
.cms-site-separator {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--cms-color-border, #e5e7eb);
}

/* site-contact-card: css/contact.css, scoped to the block. */
.cms-site-contact-card {
  padding: 2.5rem 2rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--color-action, var(--cms-color-primary, #0a67a7));
}
.cms-site-contact-card .contact-card-body {
  flex: 1 1 auto;
}
.cms-site-contact-card h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: var(--title-color, var(--cms-color-primary-dark, #054e83));
}
.cms-site-contact-card ol {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  padding-left: 1.25rem;
  line-height: 1.7;
  color: #374151;
}
.cms-site-contact-card ol li {
  margin-bottom: 0.5rem;
}
.cms-site-contact-card .contact-card-action {
  margin-top: auto;
  margin-bottom: 1.5rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cms-site-contact-card .contact-card-footer {
  font-size: 0.9rem;
  line-height: 1.5;
  border-top: 1px solid var(--cms-color-border, #e5e7eb);
  padding-top: 1.25rem;
  color: var(--cms-color-text-soft, #4b5563);
  display: flex;
  flex-direction: column;
}
.cms-site-contact-card .contact-card-footer p {
  margin-bottom: 0;
}
.cms-site-contact-card .contact-link {
  color: var(--title-color, var(--cms-color-primary-dark, #054e83)) !important;
  text-decoration: none;
  font-weight: 600;
}
.cms-site-contact-card .btn {
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
  padding: 14px 24px;
  font-size: 1rem;
}
@media (max-width: 640px) {
  .cms-site-contact-card {
    padding: 1.75rem 1.25rem;
  }
  .cms-site-contact-card .btn {
    padding: 12px 14px;
    font-size: 0.9rem;
  }
}
@media (max-width: 400px) {
  .cms-site-contact-card .btn {
    padding: 10px 10px;
    font-size: 0.82rem;
  }
}

/* site-button-*: the site's .btn fills its card (width 100%). Alone, the button keeps its own width. */
.cms-site-button {
  width: auto;
}

/* site-offer-card: one card on its own. On the site a card is a third of the row; alone it keeps that proportion.
   The recommended card's badge sits 12px above the card, so it gets room above. */
.cms-site-offer-card,
.cms-site-offer-card-recommended {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.cms-site-offer-card-recommended {
  margin-top: 1.25rem;
}

/* site-social-links: .footer-social is placed absolutely on the footer; alone it is a row of icons. */
.cms-site-social-links {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  justify-content: center;
  display: flex;
  margin: 1rem auto;
}

/* Spacing between stacked site blocks. The site's own classes carry the gaps of its home page (style.css), and they
   are what stacked blocks show, measured in Chrome against the real index.html (32, 96, 48, 64 and 80 px between the
   hero, the offers, the faq, the about section, the redirect block and the final call): nothing is repeated here.
   The legal section has no margin of its own on the site: it takes the gap the site gives its cards (.detail-card, 2rem). */
[data-cms-block="site-legal-section"] {
  margin-bottom: 2rem;
}
[data-cms="2o"]{text-align:left!important;}
[data-cms="2p"]{text-align:left!important;}
[data-cms="2h"]{font-weight:400!important;}
[data-cms="6d"]{font-weight:700!important;font-size:20px!important;}
[data-cms="5u"]{font-size:20px!important;font-weight:700!important;margin-top:1.5rem!important;}
[data-cms="5e"]{font-size:20px!important;font-weight:700!important;}
[data-cms="5c"]{display:block!important;}
[data-cms="5d"]{margin-bottom:0!important;}
[data-cms="2l"]{font-size:24px!important;}
[data-cms="2m"]{font-size:16px!important;}
[data-cms="2s"]{font-size:16px!important;}
[data-cms="2r"]{font-size:24px!important;}
[data-cms="ti"]{font-weight:400!important;}
[data-cms="1h7"]{display:flex!important;flex-direction:row!important;gap:2rem!important;background-color:#ffffff!important;padding:2rem!important;border-radius:var(--radius-lg)!important;border:1px solid #e5e7eb!important;align-items:stretch!important;flex-wrap:wrap!important;}
[data-cms="1h8"]{flex-shrink:0!important;width:220px!important;margin:0 auto!important;}
[data-cms="1ha"]{width:100%!important;height:auto!important;border-radius:8px!important;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)!important;transition:opacity 0.2s ease, filter 0.2s ease!important;}
[data-cms="1hb"]{flex:1!important;min-width:250px!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;}
[data-cms="1hc"]{margin-bottom:0.5rem!important;}
[data-cms="1hd"]{color:#6b7280!important;font-size:0.875rem!important;font-weight:500!important;}
[data-cms="1he"]{font-size:1.5rem!important;line-height:1.3!important;margin-bottom:0.75rem!important;margin-top:0!important;font-weight:400!important;color:var(--title-color)!important;}
[data-cms="1hf"]{color:#4b5563!important;font-size:0.95rem!important;line-height:1.5!important;margin-bottom:0.6rem!important;margin-top:0!important;}
[data-cms="1hg"]{display:inline-block!important;align-self:flex-start!important;margin-bottom:1.25rem!important;color:var(--color-action)!important;font-size:0.8125rem!important;font-weight:500!important;text-decoration:none!important;}
[data-cms="1hj"]{display:flex!important;justify-content:space-between!important;align-items:flex-end!important;margin-top:auto!important;padding-top:1rem!important;flex-wrap:wrap!important;gap:1rem!important;}
[data-cms="1hl"]{width:150px!important;height:auto!important;border-radius:4px!important;vertical-align:middle!important;}
[data-cms="1hm"]{color:#9ca3af!important;font-size:0.75rem!important;font-weight:600!important;letter-spacing:0.05em!important;padding-bottom:0.25rem!important;}
[data-cms="1ha"]:hover{filter:grayscale(100%)!important;opacity:0.8!important;}
[data-cms="1hg"]:hover{text-decoration:underline!important;}
@media (min-width: 1025px){[data-cms="2o"]{width:416px!important;max-width:100%!important;}[data-cms="2p"]{width:416px!important;max-width:100%!important;}[data-cms="5g"]{gap:12px!important;}}
@media (max-width: 1024px){[data-cms="2o"]{text-align:center!important;}[data-cms="2p"]{text-align:center!important;}}