.ui-display-title {
  color: var(--color-titre-hero);
  font-family: var(--font-titre);
  font-size: var(--fs-display-2);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
}
.ui-display-title .ui-accent {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: var(--fw-light);
}
@media (max-width: 820px) {
  .ui-display-title { font-size: var(--fs-display-4); }
}
@media (max-width: 560px) {
  .ui-display-title { font-size: var(--fs-display-6); }
}
.ui-section-title {
  margin-bottom: var(--space-3);
  font-family: var(--font-titre);
}
h1.ui-section-title { font-size: var(--fs-h1); color: var(--color-titre); }
h2.ui-section-title { font-size: var(--fs-h2); }
.ui-section-title.is-compact { font-size: var(--fs-h3); }
.ui-section-title.is-light { color: var(--white); }
.ui-card-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}
.ui-card-title .ui-line-a { color: var(--color-titre); }
.ui-card-title .ui-line-b { color: var(--color-primary); }
.ui-card-title.is-large { font-size: var(--fs-h3); }
.ui-footer-title {
  font-family: var(--font-base);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.ui-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.ui-eyebrow--accent { color: var(--color-brand-pink-ink); }
.ui-eyebrow--light { color: var(--on-dark-subtle); }
.ui-btn {
  font-family: var(--font-base);
  border-radius: var(--radius-sm);
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  display: inline-flex;
  border: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.ui-btn.ui-btn-slim {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}
.ui-btn.ui-btn-large {
  min-height: var(--control-h-lg);
  padding: 0 var(--space-4);
  font-size: var(--fs-lead);
}
.ui-btn-primary {
  background: var(--color-bouton);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.ui-btn-primary:hover {
  background: var(--color-bouton-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.ui-btn-outline {
  background: transparent;
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
}
.ui-btn-outline:hover {
  background: var(--color-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.ui-btn-warning,
.ui-btn-danger,
.ui-btn-success { color: var(--white); box-shadow: var(--shadow-md); }
.ui-btn-warning { background: var(--warning-ink); }
.ui-btn-danger { background: var(--color-danger); }
.ui-btn-success { background: var(--color-success); }
.ui-btn-warning:hover,
.ui-btn-danger:hover,
.ui-btn-success:hover { color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ui-btn-warning:hover { background: var(--warning-ink); }
.ui-btn-danger:hover { background: var(--danger-ink); }
.ui-btn-success:hover { background: var(--success-ink); }
.ui-btn-outline-warning,
.ui-btn-outline-danger,
.ui-btn-outline-success { background: transparent; border: 1px solid currentColor; }
.ui-btn-outline-warning { color: var(--warning-ink); }
.ui-btn-outline-danger { color: var(--danger-ink); }
.ui-btn-outline-success { color: var(--success-ink); }
.ui-btn-outline-warning:hover,
.ui-btn-outline-danger:hover,
.ui-btn-outline-success:hover { color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ui-btn-outline-warning:hover { background: var(--warning-ink); border-color: var(--warning-ink); }
.ui-btn-outline-danger:hover { background: var(--danger-ink); border-color: var(--danger-ink); }
.ui-btn-outline-success:hover { background: var(--success-ink); border-color: var(--success-ink); }
.ui-btn-outline span { transition: transform 0.25s ease; }
.ui-btn-outline:hover span { transform: translateX(3px); }
.ui-btn-soft {
  background: var(--surface-douce);
  color: var(--color-dark);
}
.ui-btn-soft:hover {
  background: var(--white);
  color: var(--color-dark);
  transform: translateY(-2px);
}
.ui-btn-ghost {
  background: var(--color-dark);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.ui-btn-ghost:hover {
  background: var(--white);
  color: var(--color-dark);
  box-shadow: var(--shadow-lg);
}
.ui-btn-link {
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover);
  padding: 0;
  font-weight: var(--fw-bold);
}
.ui-text-link {
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}
.ui-text-link:hover {
  text-decoration-color: currentColor;
}
.ui-badge,
.ui-publication-etiquette,
.ui-verification,
.ui-choix-image-legende,
.ui-espace-important {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 2rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 576px) {
  .ui-badge,
  .ui-publication-etiquette,
  .ui-verification,
  .ui-choix-image-legende,
  .ui-espace-important { font-size: var(--fs-sm); }
}
.ui-badge {
  margin: 0;
  background: var(--surface-card);
  color: var(--color-titre);
}
.ui-badge > .material-symbols-outlined,
.ui-publication-etiquette > .material-symbols-outlined,
.ui-verification > .material-symbols-outlined,
.ui-choix-image-legende > .material-symbols-outlined { font-size: var(--icon-sm); line-height: 1; }
.ui-badge--like { color: var(--color-brand-pink); }
.ui-badge--match { background: var(--color-brand-pink); color: var(--white); }
.ui-badge--match .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
.ui-badge--contact { color: var(--color-titre); }
.ui-badge--danger { color: var(--color-danger); }
.ui-badge--accent { background: var(--color-brand-pink-ink); color: var(--on-dark); }
.ui-badge--primaire { background: var(--color-primary); color: var(--white); }
.ui-status-badge {
  align-items: center;
  display: inline-flex;
  padding: 0.35em 0.65em;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
.ui-status-badge--neutral { background: var(--teinte-neutre); color: var(--color-dark-soft); }
.ui-status-badge--accent { background: color-mix(in srgb, var(--color-primary) 6%, transparent); color: var(--color-primary); }
.ui-status-badge--warning { background: color-mix(in srgb, var(--filet-doux) 12%, transparent); color: var(--text-muted); }
.ui-utility-badge {
  background: var(--color-titre);
  border: 0;
  border-radius: var(--radius-pill);
  align-items: center;
  display: inline-flex;
  color: var(--white);
  letter-spacing: 0.1em;
  padding: 0.35em 0.65em;
  line-height: 1;
  font-size: var(--fs-utilitaire);
  font-family: inherit;
  font-weight: var(--fw-normal);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.ui-utility-badge:hover {
  background: var(--white);
  color: var(--color-dark);
}
.ui-utility-badge--outline {
  background: var(--white);
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
}
.ui-utility-badge--outline:hover {
  background: var(--color-dark);
  color: var(--white);
}
.ui-kicker {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
}
.ui-arrow-link {
  width: max-content;
  max-width: 100%;
  margin-top: var(--space-3);
  align-items: center;
  gap: var(--space-2);
  display: flex;
  color: var(--color-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s ease, transform 0.2s ease;
}
.ui-arrow-link:hover {
  color: var(--color-primary-hover);
  transform: translateX(3px);
}
.ui-arrow-link span { font-size: var(--fs-base); }
.ui-block-button {
  width: 100%;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
}
.ui-block-button:hover {
  color: var(--white);
  background: var(--color-primary);
  box-shadow: var(--shadow-lg);
}
.ui-block-button span {
  font-size: var(--fs-lead);
  transition: transform 0.2s ease;
}
.ui-block-button:hover span {
  transform: translateX(4px);
}
.ui-icon-button {
  display: inline-grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
  font: var(--fw-bold) var(--fs-base) / 1 var(--font-display);
}
.ui-icon-button:hover,
.ui-icon-button:focus-visible {
  color: var(--white);
  background: var(--color-dark);
}
.ui-icon-button-large { width: var(--control-h-lg); height: var(--control-h-lg); font-size: var(--icon-md); }
.ui-icon-button-slim { width: var(--control-h-sm); height: var(--control-h-sm); font-size: var(--icon-sm); }
.ui-spinner { color: var(--color-dark); }
.ui-spinner--danger { color: var(--color-danger); }
.ui-progress { background-color: var(--border); }
.ui-progress .progress-bar { background-color: var(--color-dark); color: var(--white); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.ui-popover {
  --bs-popover-bg: var(--white);
  --bs-popover-border-color: var(--border);
  --bs-popover-border-radius: var(--radius-sm);
  --bs-popover-header-bg: var(--surface-douce);
  --bs-popover-header-color: var(--color-dark);
  --bs-popover-header-font-size: var(--fs-sm);
  --bs-popover-body-color: var(--text-muted);
  --bs-popover-font-size: var(--fs-sm);
  --bs-popover-box-shadow: var(--shadow-md);
}
.ui-tooltip {
  --bs-tooltip-bg: var(--color-dark);
  --bs-tooltip-color: var(--white);
  --bs-tooltip-border-radius: var(--radius-sm);
  --bs-tooltip-font-size: var(--fs-caption);
}
.ui-close-button {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  padding: 0;
  background-color: var(--surface-douce);
  background-image: none;
  border-radius: 50%;
  opacity: 1;
}
.ui-close-button::before {
  content: 'close';
  font-family: 'Material Symbols Outlined';
  font-size: var(--icon-md);
  color: var(--color-dark);
}
.btn-close {
  display: inline-grid;
  place-items: center;
  background-image: none;
}
.btn-close::before {
  content: 'close';
  font-family: 'Material Symbols Outlined';
  font-size: var(--icon-md);
  line-height: 1;
  color: currentcolor;
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  vertical-align: -3px;
  font-size: var(--icon-md);
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
.ui-form-control,
.ui-form-select {
  min-height: var(--control-h);
  padding-left: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--shadow-color) 6%, transparent);
  font: var(--fw-normal) var(--fs-base) / var(--lh-base) var(--font-base);
  color: var(--text);
}
.ui-form-control { padding-right: var(--space-3); }
.ui-form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%236c757d'%3e%3cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
}
.ui-form-required {
  color: var(--color-danger);
  font-weight: var(--fw-bold);
}
.ui-form-control::placeholder,
.ui-form-select::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}
.ui-form-control[readonly] {
  background: var(--teinte-neutre);
  color: var(--text-muted);
  box-shadow: none;
}
.ui-form-control:focus,
.ui-form-select:focus {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 0.25rem var(--focus-ring);
  outline: 0;
}
.ui-form-control:disabled,
.ui-form-select:disabled {
  background-color: var(--surface-appuyee);
  opacity: 1;
}
.ui-form-control.is-invalid,
.ui-form-select.is-invalid {
  border-color: var(--color-danger);
  background-image: none;
  padding-right: var(--space-3);
}
.ui-form-control.is-invalid:focus,
.ui-form-select.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-danger);
}
.ui-form-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-danger);
}
.ui-form-error .material-symbols-outlined { font-size: var(--icon-sm); }
textarea.ui-form-control {
  min-height: calc(var(--fs-base) * var(--lh-base) * 4);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  line-height: var(--lh-base);
  resize: vertical;
}
.ui-form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
}
.ui-form-text {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.ui-form-text--ok { color: var(--color-success); font-weight: var(--fw-semibold); }
.ui-form-check-input {
  background-color: var(--white);
  border-color: var(--border);
}
.ui-form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.ui-form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem var(--focus-ring);
}
.ui-form-range::-webkit-slider-thumb { background-color: var(--color-primary); }
.ui-form-range::-moz-range-thumb { background-color: var(--color-primary); }
.ui-input-group-text {
  border: 1px solid var(--border);
  background-color: var(--surface-douce);
  color: var(--color-dark);
}
.ui-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ui-alert.alert-info {
  --bs-alert-bg: var(--section-teinte-4);
  --bs-alert-border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  --bs-alert-color: var(--color-primary);
  --bs-alert-link-color: var(--color-primary);
}
.ui-alert--stack {
  align-items: flex-start;
}
.ui-alert--stack .material-symbols-outlined { margin-top: 2px; }
.ui-alert-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ui-alert .material-symbols-outlined {
  font-size: var(--icon-md);
  flex-shrink: 0;
}
.ui-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-brand-pink-ink);
  color: var(--white);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.ui-count-badge--neutre { background: var(--color-titre); }
.ui-kicker--medallion {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 85px;
  height: 85px;
  margin: 0;
  border: 3px solid var(--border-soft);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  transform: translate(calc(50% - 20px), calc(-50% + 20px)) rotate(15deg);
}
.ui-breadcrumb {
  --bs-breadcrumb-divider: '›';
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  min-height: 54px;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}
.ui-breadcrumb .breadcrumb-item a { color: inherit; }
.ui-breadcrumb .breadcrumb-item a:hover { color: var(--color-primary); }
.ui-breadcrumb .breadcrumb-item.active { color: var(--color-dark); font-weight: var(--fw-semibold); }
@media (max-width: 560px) {
  .ui-breadcrumb {
    white-space: nowrap;
    overflow-x: auto;
  }
  .ui-breadcrumb .breadcrumb-item { flex: 0 0 auto; }
}
.ui-verification-cadre { position: relative; }
.ui-verification {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  max-width: calc(100% - var(--space-3));
  background: var(--color-dark);
  color: var(--white);
  pointer-events: none;
}
.ui-verification--picto { left: var(--space-1); bottom: var(--space-1); justify-content: center; width: 2rem; padding: 0; }
.ui-verification--picto > .ui-verification-texte {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ui-icone-marque {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("../../images/icone-marque.png") center / contain no-repeat;
  mask: url("../../images/icone-marque.png") center / contain no-repeat;
}
.ui-icone-marque--contour {
  -webkit-mask-image: url("../../images/icone-marque-contour.png");
  mask-image: url("../../images/icone-marque-contour.png");
}