/* Auto-generated by css:bundle — do not edit manually */

/* fulgore: auth/mfa_challenge_form.css */
.auth-mfa-challenge-form {
  max-width: 28rem;
  margin: var(--space-16) auto;
  display: grid;
  gap: var(--space-6);
}

.auth-mfa-challenge-form h2 {
  margin: 0;
}

.auth-mfa-challenge-form form {
  display: grid;
  gap: var(--space-5);
}


/* fulgore: auth/mfa_disable_modal.css */
.mfa-disable-modal__icon {
  text-align: center;
  font-size: 2rem;
  margin-bottom: var(--space-2);
}

.mfa-disable-modal__warning {
  color: var(--color-text-subtle);
  text-align: center;
  line-height: var(--line-height-loose);
}


/* fulgore: auth/mfa_setup_form.css */
.auth-mfa-setup-form {
  .mfa-qr-code {
    display: flex;
    justify-content: center;
    margin-block: var(--space-4);
  }
}


/* fulgore: shared/errors/base.css */
.shared-errors-not-found,
.shared-errors-internal-server {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-10);
}

.shared-errors-not-found__code,
.shared-errors-internal-server__code {
  display: block;
  font-size: 8rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-subtle);
  line-height: 1;
}

.shared-errors-not-found__title,
.shared-errors-internal-server__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.shared-errors-not-found__description,
.shared-errors-internal-server__description {
  color: var(--color-text-subtle);
  margin: 0;
}


/* fulgore: shared/flash.css */
@keyframes flash-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flash-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.flash-container {
  
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: fixed;
  top: calc(var(--navbar-height) + var(--space-4));
  right: var(--space-6);
  z-index: 1000;

  
  min-width: 280px;
  max-width: 400px;
}

.flash-item {
  
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);

  .svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  
  min-width: 280px;
  max-width: 400px;
  padding: var(--space-4);
  margin-bottom: var(--space-2);
  border-left: 3px solid;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));

  
  animation: flash-enter var(--duration-normal) var(--easing-default) both;

  &:last-child {
    margin-bottom: 0;
  }

  &.flash-item--exiting {
    animation: flash-exit var(--duration-fast) var(--easing-default) forwards;
  }
}

.flash-notice {
  background: var(--color-success-surface);
  color: var(--color-success);
  border-color: var(--color-success);
}

.flash-alert {
  background: var(--color-danger-surface);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.flash-warning {
  background: var(--color-warning-surface);
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.flash-info {
  background: var(--color-info-surface);
  color: var(--color-info);
  border-color: var(--color-info);
}

.flash-icon {
  
  flex-shrink: 0;

  
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  margin-top: 1px;
}

.flash-body {
  
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-1);
}

.flash-message {
  
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;

  flex: 1;
}

.flash-dismiss {
  
  flex-shrink: 0;

  
  padding: 0;
  border: none;

  
  line-height: 1;

  
  color: inherit;
  background: none;

  
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--duration-fast) var(--easing-default);

  &:hover {
    opacity: 1;
  }

  .svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  svg {
    display: block;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }
}


/* fulgore: surveys/base_completion_screen.css */
.surveys-base-completion-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  margin-block-start: var(--space-8);
}

.surveys-base-completion-screen__heading {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.surveys-base-completion-screen__description {
  font-size: var(--font-size-xl);
  color: var(--color-text-subtle);
  margin: 0;
  white-space: pre-line;
}

.surveys-base-completion-screen__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  margin-block-end: var(--space-8);
}

.surveys-base-completion-screen__footer {
  align-self: flex-start;
}


/* fulgore: surveys/context_block.css */
.surveys-context-block {
  display: flex;
  flex-direction: column;
}

.surveys-context-block > * {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Heading ── */

.surveys-context-block h2 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
}

/* ── Description ── */

.surveys-context-block p {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-loose);
  color: var(--color-text-subtle);
}

/* ── Label / Value pairs ── */

.surveys-context-block div > span:first-child {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.surveys-context-block div > span:last-child {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-subtle);
}

/* ── Lists (steps, units) ── */

.surveys-context-block ol,
.surveys-context-block ul {
  margin: 0;
  padding-left: var(--space-5);
}

.surveys-context-block li {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-loose);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-1);
}

.surveys-context-block ol li::marker {
  color: var(--color-brand-light);
  font-weight: var(--font-weight-semibold);
}


/* fulgore: surveys/inputs/base.css */
.surveys-inputs-base {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}


/* fulgore: surveys/inputs/boolean_card.css */
.ui-form:has(.surveys-inputs-boolean-card) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.ui-form:has(.surveys-inputs-boolean-card) .form-actions,
.ui-form:has(.surveys-inputs-boolean-card) .ui-input {
  grid-column: 1 / -1;
}

.surveys-inputs-boolean-card__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  border: 1.5px solid var(--color-brand-a10);
  border-radius: var(--radius-lg);
  background: var(--color-brand-surface);
  cursor: pointer;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 150ms ease-out;
  text-align: center;
}

.surveys-inputs-boolean-card__card:hover {
  border-color: var(--color-brand-light);
  box-shadow: 0 0 0 3px var(--color-brand-a10);
  transform: translateY(-2px);
}

.surveys-inputs-boolean-card__card:active {
  transform: translateY(0);
  box-shadow: none;
}

.surveys-inputs-boolean-card__checkbox:checked + .surveys-inputs-boolean-card__card {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-a20);
}

.surveys-inputs-boolean-card__checkbox {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.surveys-inputs-boolean-card__icon {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.surveys-inputs-boolean-card__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

@media (max-width: 767px) {
  .ui-form:has(.surveys-inputs-boolean-card) {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* fulgore: surveys/inputs/choice_card.css */
.surveys-inputs-choice-card__form {
  display: contents;
}

.surveys-inputs-choice-card__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);

  padding: var(--space-5) var(--space-4);
  border: 1.5px solid var(--color-brand-a10);
  border-radius: var(--radius-lg);
  background: var(--color-brand-surface);

  cursor: pointer;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 150ms ease-out;
}

.surveys-inputs-choice-card__button:hover {
  border-color: var(--color-brand-light);
  box-shadow: 0 0 0 3px var(--color-brand-a10);
  transform: translateY(-2px);
}

.surveys-inputs-choice-card__button:active {
  transform: translateY(0);
  box-shadow: none;
}

.surveys-inputs-choice-card__icon {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.surveys-inputs-choice-card__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: center;
}


/* fulgore: surveys/inputs/descriptive_choice.css */
.surveys-inputs-descriptive-choice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.surveys-inputs-descriptive-choice__form {
  display: contents;
}

.surveys-inputs-descriptive-choice__card {
  flex: 0 1 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  border: 1.5px solid var(--color-brand-a10);
  border-radius: var(--radius-lg);
  background: var(--color-brand-surface);
  cursor: pointer;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 150ms ease-out;
  text-align: center;
}

.surveys-inputs-descriptive-choice__card:hover {
  border-color: var(--color-brand-light);
  box-shadow: 0 0 0 3px var(--color-brand-a10);
  transform: translateY(-2px);
}

.surveys-inputs-descriptive-choice__card:active {
  transform: translateY(0);
  box-shadow: none;
}

.surveys-inputs-descriptive-choice__card--selected {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-a20);
}

.surveys-inputs-descriptive-choice__icon {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.surveys-inputs-descriptive-choice__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.surveys-inputs-descriptive-choice__description {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  line-height: var(--line-height-loose);
}



/* fulgore: surveys/map.css */
.surveys-map {
  --stop-height: 40px;
  --badge-size: 24px;

  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.surveys-map__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── SVG paths overlay ── */

.surveys-map__stops-wrapper {
  position: relative;
}

.surveys-map__paths {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--badge-size);
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.surveys-map__list {
  position: relative;
  z-index: 2;
}

/* ── Collapsible body ── */

.surveys-map__details {
  position: relative;
  z-index: 20;
  margin-top: var(--space-3);
}

.surveys-map__toggle {
  display: none;
}

.surveys-map__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 400ms ease-out, opacity 400ms ease-out;
  opacity: 1;
}

.surveys-map__details:not([open]) .surveys-map__body {
  grid-template-rows: 0fr;
  opacity: 0;
}

.surveys-map__body > * {
  overflow: visible;
}

/* ── SVG path draw animation ── */

.surveys-map__segment {
  stroke-dasharray: var(--segment-length);
  stroke-dashoffset: var(--segment-length);
  animation: map-draw 500ms ease-out forwards;
}

.surveys-map__arc-segment {
  stroke-dasharray: var(--segment-length);
  stroke-dashoffset: var(--segment-length);
  animation: map-draw 800ms ease-in-out forwards;
  animation-delay: 200ms;
}

@keyframes map-draw {
  to { stroke-dashoffset: 0; }
}

/* Mobile — collapsed by default, toggle visible */
@media (max-width: 767px) {
  .surveys-map__toggle {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-brand);
    cursor: pointer;
    list-style: none;
    margin-bottom: var(--space-3);
  }

  .surveys-map__toggle::-webkit-details-marker {
    display: none;
  }

  .surveys-map__toggle::before {
    content: "▸ ";
  }

  .surveys-map__details[open] > .surveys-map__toggle::before {
    content: "▾ ";
  }
}


/* fulgore: surveys/map/arc.css */
/* Arc — loop-back indicator connecting a later stop back to an earlier one.
   Rendered as a left bracket with an arrow pointing up at the target. */

.surveys-map-arc {
  position: absolute;

  /* Vertical span: from target badge center to source badge center */
  top: calc(var(--space-6) + var(--space-3) + (var(--arc-to) + 0.5) * var(--stop-height));
  height: calc((var(--arc-from) - var(--arc-to)) * var(--stop-height));

  /* Horizontal: dedicated rail left of forks.
     Arc sits in the --arc-rail zone, forks sit in the --arc-indent zone. */
  left: 6px;
  right: calc(100% - var(--arc-rail) - var(--arc-indent) - var(--space-6) - var(--badge-size) / 2);

  /* Thinner than forks (2px vs 3px) to reduce visual noise */
  border: 2px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);

  z-index: var(--arc-z);
  pointer-events: none;
}

/* Arrow pointing UP at the target stop */
.surveys-map-arc::before {
  content: "";
  position: absolute;
  top: -5px;
  right: -6px;

  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid var(--color-border);
}

/* Brand fill overlay — animates top-to-bottom (visual: "going back up") when loop is active */
.surveys-map-arc--active {
  border-color: var(--color-brand);
}

.surveys-map-arc--active::before {
  border-bottom-color: var(--color-brand);
}

.surveys-map-arc--active::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: 0;

  border: 2px solid var(--color-brand);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);

  clip-path: inset(100% 0 0 0);
  animation: arc-fill 800ms ease-out forwards;
  animation-delay: 400ms;
}

@keyframes arc-fill {
  0% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Hide when map is collapsed on mobile */
@media (max-width: 767px) {
  .surveys-map__details:not([open]) ~ .surveys-map-arc {
    display: none;
  }
}


/* fulgore: surveys/map/fork.css */
/* Fork — left bracket connecting two badges (skip path) */

.surveys-map-fork {
  position: absolute;

  /* Top edge at fork-from badge center, bottom edge at fork-to badge center */
  top: calc(var(--space-6) + var(--space-3) + (var(--fork-from) + 0.5) * var(--stop-height));
  height: calc((var(--fork-to) - var(--fork-from)) * var(--stop-height));

  /* Left bracket in the arc-indent gutter (after the arc rail), right edge at badge center */
  left: calc(var(--arc-rail) + var(--space-6));
  right: calc(100% - var(--arc-rail) - var(--arc-indent) - var(--space-6) - var(--badge-size) / 2);

  border: 3px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  z-index: 10;
}

/* Brand fill overlay — progressive top-to-bottom reveal when taken */
.surveys-map-fork--taken::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  bottom: -3px;
  right: 0;

  border: 3px solid var(--color-brand);
  border-right: none;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);

  clip-path: inset(0 0 100% 0);
  animation: fork-fill 1200ms ease-in-out forwards;
  animation-delay: 300ms;
}

@keyframes fork-fill {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Hide when map is collapsed on mobile */
@media (max-width: 767px) {
  .surveys-map__details:not([open]) ~ .surveys-map-fork {
    display: none;
  }
}


/* fulgore: surveys/map/progress.css */
.surveys-map-progress {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);

  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-brand-a10);
  border-radius: var(--radius-lg);
  background: var(--color-brand-surface);

  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-brand);
}


/* fulgore: surveys/map/stop.css */
.surveys-map-stop {
  --badge-size: 24px;

  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--stop-height);
  position: relative;
}

/* ── Badge ── */

.surveys-map-stop__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: var(--radius-full);

  position: relative;
  z-index: 20;

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

/* ── Label ── */

.surveys-map-stop__label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── States ── */

/* Completed */
.surveys-map-stop--completed .surveys-map-stop__badge {
  background: var(--color-brand);
  color: var(--color-text-inverted);
}

.surveys-map-stop--completed .surveys-map-stop__label {
  color: var(--color-text-subtle);
}

.surveys-map-stop--completed .surveys-map-stop__badge .ui-icon {
  width: 14px;
  height: 14px;
}

/* Animated — pulse + check reveal (only on just-completed stop) */
.surveys-map-stop--animate .surveys-map-stop__badge {
  animation: badge-complete-pulse 250ms ease-out;
  animation-delay: calc(var(--stop-index, 0) * 150ms);
}

.surveys-map-stop--animate .surveys-map-stop__badge .ui-icon {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: check-reveal 800ms ease-out forwards;
  animation-delay: calc(var(--stop-index, 0) * 150ms + 400ms);
}

@keyframes badge-complete-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

@keyframes check-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* Current */
.surveys-map-stop--current .surveys-map-stop__badge {
  background: var(--color-brand);
  color: var(--color-text-inverted);

  animation-name: badge-activate, survey-map-pulse;
  animation-duration: 300ms, 2s;
  animation-timing-function: ease-out, ease-in-out;
  animation-delay:
    calc(var(--stop-index, 0) * 150ms + 600ms),
    calc(var(--stop-index, 0) * 150ms + 900ms);
  animation-iteration-count: 1, infinite;
  animation-fill-mode: backwards, none;
}

@keyframes badge-activate {
  from {
    background: var(--color-surface-subtle);
    outline: 2px solid var(--color-border);
    outline-offset: -2px;
    color: transparent;
    box-shadow: none;
  }
  to {
    background: var(--color-brand);
    outline: 2px solid transparent;
    outline-offset: -2px;
    color: var(--color-text-inverted);
    box-shadow: none;
  }
}

.surveys-map-stop--current .surveys-map-stop__label {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

@keyframes survey-map-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--color-brand-a20);
  }
  50% {
    box-shadow: 0 0 0 6px var(--color-brand-a20);
  }
}

/* Upcoming */
.surveys-map-stop--upcoming .surveys-map-stop__badge {
  background: var(--color-surface-subtle);
  outline: 2px solid var(--color-border);
  outline-offset: -2px;
}

.surveys-map-stop--upcoming .surveys-map-stop__label {
  color: var(--color-text-disabled);
}

/* Skipped */
.surveys-map-stop--skipped .surveys-map-stop__badge {
  background: var(--color-surface-subtle);
  outline: 2px dashed var(--color-border);
  outline-offset: -2px;
}

.surveys-map-stop--skipped .surveys-map-stop__label {
  color: var(--color-text-disabled);
  text-decoration: line-through;
}

/* ── End stop ── */

.surveys-map-stop--end .surveys-map-stop__badge {
  width: calc(var(--badge-size) * 0.6);
  height: calc(var(--badge-size) * 0.6);
  margin-left: calc(var(--badge-size) * 0.2);
}

.surveys-map-stop--end.surveys-map-stop--completed .surveys-map-stop__badge {
  width: var(--badge-size);
  height: var(--badge-size);
  margin-left: 0;
  background: var(--color-success-surface);
  outline: none;
  font-size: var(--font-size-base);
  animation: tada-pop 600ms ease-out;
}

@keyframes tada-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.4); opacity: 1; }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

.surveys-map-stop--end .surveys-map-stop__label {
  font-style: italic;
}

/* ── Clickable wrapper (jump_path active) ── */

.surveys-map-stop__form {
  display: contents;
}

.surveys-map-stop__button {
  all: unset;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  cursor: pointer;
}

.surveys-map-stop__button:hover .surveys-map-stop__label {
  color: var(--color-text);
}


/* fulgore: surveys/question_forms/footer.css */
.surveys-question-forms-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-6);
}

.surveys-question-forms-footer__submit {
  margin-left: auto;
}


/* fulgore: surveys/question_label.css */
.surveys-question-label {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);

  color: var(--color-text);

  margin-bottom: var(--space-8);
}


/* fulgore: surveys/question_layout.css */
.surveys-question-layout {
  display: grid;
  /* start : la map et le bloc contexte gardent la hauteur de leur contenu
     au lieu de s'étirer à la hauteur de la colonne principale */
  align-items: start;
  gap: var(--space-6);
}

/* Le frame survey n'est pas un formulaire simple : lever le plafond 48rem
   posé par record-view sur son enfant unique, sinon la grille multi-colonnes
   ci-dessous s'applique dans 768px et écrase la colonne principale. */
.ui-bases-record-view__body > turbo-frame:only-child:has(.surveys-question-layout) {
  max-width: none;
}

.surveys-question-layout__context-block {
  min-height: var(--space-16);
  padding: var(--space-5) var(--space-6);
  border: 1.5px solid var(--color-brand-a10);
  border-radius: var(--radius-lg);
  background: var(--color-brand-surface);
}

.surveys-question-layout__main {
  position: relative;
  z-index: 1;
}

/* ── Transitions ── */

.surveys-question-layout__main {
  opacity: 1;
}

@keyframes surveys-question-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.surveys-question-layout__main {
  animation: surveys-question-enter 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .surveys-question-layout__main {
    animation: none;
  }
}

@media (min-width: 768px) {
  .surveys-question-layout {
    grid-template-columns: 3fr 2fr;
    /* 3e rangée 1fr : absorbe l'excédent de hauteur de la colonne
       principale (section dépliée), sinon il se répartit sur la rangée 1
       et le bloc contexte tombe en bas de page. */
    grid-template-rows: auto auto 1fr;
    gap: var(--space-8);
  }

  .surveys-question-layout__main {
    grid-column: 1;
    grid-row: 1 / 4;
  }

  .surveys-map {
    grid-column: 2;
  }

  .surveys-question-layout__context-block {
    grid-column: 2;
  }
}

@media (min-width: 1440px) {
  .surveys-question-layout {
    grid-template-columns: 1fr 280px 280px;
    grid-template-rows: none;
  }

  .surveys-question-layout__main {
    grid-row: auto;
  }

  .surveys-map {
    grid-column: auto;
  }

  .surveys-question-layout__context-block {
    grid-column: auto;
  }
}


/* fulgore: ui/bases/button.css */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition:
    background var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default),
    box-shadow var(--duration-fast) var(--easing-default),
    opacity var(--duration-fast) var(--easing-default);

  .svg {
    height: var(--space-4);
    fill: currentColor;
  }

  &:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  

  &.ui-button--primary {
    background: var(--color-brand);
    color: var(--color-text-inverted);
    border-color: var(--color-brand);

    &:hover:not(:disabled):not(.ui-button--disabled) {
      background: var(--color-brand-dark);
      border-color: var(--color-brand-dark);
    }

    &:active:not(:disabled):not(.ui-button--disabled) {
      background: var(--color-brand-dark);
      box-shadow: none;
    }
  }

  &.ui-button--secondary {
    background: transparent;
    color: var(--color-brand);
    border-color: var(--color-brand);

    &:hover:not(:disabled):not(.ui-button--disabled) {
      background: var(--color-brand-surface);
    }
  }

  &.ui-button--danger {
    background: var(--color-danger);
    color: var(--color-text-inverted);
    border-color: var(--color-danger);

    &:hover:not(:disabled):not(.ui-button--disabled) {
      background: var(--color-danger-dark);
      border-color: var(--color-danger-dark);
    }

    &:active:not(:disabled):not(.ui-button--disabled) {
      background: var(--color-danger-dark);
      box-shadow: none;
    }

    &:focus-visible {
      box-shadow: var(--focus-ring-danger);
    }
  }

  &.ui-button--ghost {
    background: transparent;
    color: var(--color-text-subtle);
    border-color: transparent;

    &:hover:not(:disabled):not(.ui-button--disabled) {
      background: var(--color-surface-raised);
      color: var(--color-text);
    }

    &:focus-visible {
      box-shadow: var(--focus-ring-neutral);
    }
  }

  

  &.ui-button--sm {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
  }

  &.ui-button--lg {
    font-size: var(--font-size-base);
    padding: var(--space-3) var(--space-6);
  }

  &.ui-button--icon-only {
    padding: var(--space-2);

    /* Shield the icon from consumer resets like `svg { max-width: 100% }`:
       100% of a shrink-to-fit content box computes to 0 width and hides
       the icon entirely — same trap as the sortable grip (cf. row.css). */
    .svg {
      width: var(--space-4);
      min-width: var(--space-4);
      max-width: none;
    }

    &.ui-button--sm {
      padding: var(--space-1);
    }

    &.ui-button--lg {
      padding: var(--space-3);
    }
  }



  &:disabled,
  &.ui-button--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }
}


/* fulgore: ui/bases/card.css */
.ui-bases-card {
  box-sizing: border-box;
  margin-inline: auto;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}

.ui-bases-card__heading {
  display: grid;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  grid-template-columns: min-content auto;
  align-items: end;
}

.ui-bases-card__title {
  font: inherit;
}

.ui-bases-card__details {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-2) var(--space-6);
}

@media (max-width: 480px) {
  .ui-bases-card {
    padding: var(--space-4);
  }

  .ui-bases-card__details {
    grid-template-columns: 1fr;
  }
}


/* fulgore: ui/bases/card_row.css */
.ui-bases-card-row__dt {
  grid-column: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  font-weight: var(--font-weight-medium);
}

.ui-bases-card-row__dd {
  grid-column: 2;
  margin: 0;
  font-size: var(--font-size-sm);
}

@media (max-width: 480px) {
  .ui-bases-card-row__dt {
    grid-column: auto;
  }

  .ui-bases-card-row__dd {
    grid-column: auto;
  }
}


/* fulgore: ui/bases/context_block.css */
.ui-bases-context-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border: 1.5px solid var(--color-brand-a10);
  border-radius: var(--radius-lg);
  background: var(--color-brand-surface);

  .ui-bases-context-block__heading {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand);
  }

  .ui-bases-context-block__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
  }

  .ui-bases-context-block__list {
    margin: 0;
    padding-left: var(--space-5);

    & li {
      font-size: var(--font-size-sm);
      color: var(--color-text-subtle);
      margin-bottom: var(--space-1);
    }
  }
}

.ui-bases-context-block--warning {
  background: var(--color-warning-surface);
  border-color: var(--color-warning-a10);
  margin-bottom: var(--space-6);

  .ui-bases-context-block__heading {
    color: var(--color-warning);
  }
}


/* fulgore: ui/bases/edit.css */
.ui-bases-edit__header {
  margin-block-end: var(--space-6);
}

.ui-bases-edit__body {
}


/* fulgore: ui/bases/filter_bar.css */
.ui-filter-bar__fields {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.filter-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subtle);
  margin-right: var(--space-2);
}

.filter-search-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.filter-search {
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 16rem;

  &:focus {
    outline: none;
    border-color: var(--color-brand);
  }
}

.filter-search-clear {
  position: absolute;
  right: var(--space-2);
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-neutral-300);
  color: var(--color-neutral-700);
  border: none;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  line-height: 1;
  cursor: pointer;
  padding: 0;

  &:hover {
    background: var(--color-neutral-400);
  }
}

.filter-search:not(:placeholder-shown) ~ .filter-search-clear {
  display: flex;
}

.filter-field--multi-select {
  display: flex;
  align-items: center;
}

.filter-multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-multi-select__option {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);

  input[type="checkbox"] {
    display: none;
  }

  &:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
  }

  &.is-active {
    background: var(--color-brand-surface);
    border-color: var(--color-brand);
    color: var(--color-brand);
    font-weight: var(--font-weight-semibold);
  }
}

.filter-multi-select__option.is-active.ui-pill--violet {
  background: var(--color-violet-100);
  color: var(--color-violet-700);
  border-color: var(--color-violet-100);
}

.filter-multi-select__option.is-active.ui-pill--blue {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  border-color: var(--color-blue-100);
}

.filter-multi-select__option.is-active.ui-pill--green {
  background: var(--color-green-100);
  color: var(--color-green-700);
  border-color: var(--color-green-100);
}

.filter-multi-select__option.is-active.ui-pill--red {
  background: var(--color-red-100);
  color: var(--color-red-700);
  border-color: var(--color-red-100);
}

.filter-field--switch {
  display: flex;
  align-items: center;
}

.filter-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  cursor: pointer;

  input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-brand);
    cursor: pointer;
  }
}


/* fulgore: ui/bases/form.css */
.ui-bases-form {
  form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
}

.ui-form {
  display: grid;

  .ui-input + .ui-input {
    margin-top: var(--space-6);
  }
}

.ui-form__footer {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--font-size-sm);

  a {
    color: var(--color-text-subtle);
    transition: color var(--duration-fast) var(--easing-default);

    &:hover {
      color: var(--color-brand);
    }
  }
}

.form-error-summary {
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger-a10);
  border: 1.5px solid var(--color-danger);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);

  .form-error-summary__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-danger);
    margin-bottom: var(--space-2);
  }

  ul {
    margin: 0;
    padding-left: var(--space-4);

    li {
      font-size: var(--font-size-sm);
      color: var(--color-danger);
    }
  }
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  justify-content: flex-end;
}


/* fulgore: ui/bases/input.css */
.ui-input {
  display: grid;
  gap: var(--space-2);

  label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap : espace minimal entre le texte et le tooltip quand le label est
       à largeur de contenu (checkbox) — space-between n'y suffit pas */
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
  }

  input,
  textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
    box-sizing: border-box;
    transition:
      border-color var(--duration-fast) var(--easing-default),
      box-shadow var(--duration-fast) var(--easing-default);

    &::placeholder {
      color: var(--color-text-disabled);
    }

    &:focus {
      border-color: var(--color-brand);
      box-shadow: var(--focus-ring);
    }
  }

  textarea {
    resize: vertical;
    min-height: 6rem;
    line-height: var(--line-height-normal);
  }

  .ui-input__required {
    color: var(--color-danger);
    margin-left: var(--space-1);
  }

  .ui-input__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
  }

  .ui-input__error {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
  }

  

  &.ui-input--error {
    label {
      color: var(--color-danger);
    }

    input,
    textarea {
      border-color: var(--color-danger);

      &:focus {
        box-shadow: 0 0 0 3px var(--color-danger-a10);
      }
    }
  }

  

  &.ui-input--disabled {
    opacity: 0.5;
    cursor: not-allowed;

    input,
    textarea {
      cursor: not-allowed;
    }
  }
}


/* fulgore: ui/bases/list.css */
.ui-bases-list {
  padding: var(--space-8);
  display: grid;
  gap: var(--space-6);

  h1 {
    margin: 0;
  }
}

.ui-list-sort-disabled-notice {
  margin: var(--space-2) 0 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

.ui-list-table-wrapper {
  overflow-x: auto;
}

.ui-list-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  th,
  td {
    white-space: nowrap;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
  }

  th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-subtle);
    font-size: var(--font-size-sm);
  }

  .ui-list-table__th--sortable {
    padding: 0;
  }

  .ui-col--spacer {
    width: 100%;
  }

  .ui-col--thumb {
    width: 3rem;
  }

  .ui-list-table__th--right {
    text-align: right;
  }

  .sort-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-subtle);
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      color: var(--color-brand);
    }

    &.sort-link--active {
      color: var(--color-brand);
    }
  }

  .sort-arrow {
    font-size: var(--font-size-xs);
    opacity: 0.5;
  }

  .sort-link--active .sort-arrow {
    opacity: 1;
  }

  .ui-list-table__th--actions,
  .ui-list-table__td--actions,
  .ui-bases-row__actions {
    position: sticky;
    right: 0;
    background: var(--color-surface);
    box-shadow: -4px 0 8px -2px rgb(0 0 0 / 0.04);
  }

}

@media (min-width: 1025px) {
  .ui-list-table {
    .ui-list-table__th--actions,
    .ui-list-table__td--actions,
    .ui-bases-row__actions {
      box-shadow: none;
    }
  }
}

@media (max-width: 1024px) {
  .ui-list-table .ui-col--optional {
    display: none;
  }
}

@media (max-width: 768px) {
  .ui-list-table {
    display: block;
    width: 100%;

    thead {
      display: none;
    }

    tbody {
      display: block;
      width: 100%;
    }

    .ui-col--optional,
    .ui-col--important {
      display: flex;
    }

    tbody tr {
      display: block;
      width: 100%;
      box-sizing: border-box;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-3);
      padding: var(--space-2);
      box-shadow: var(--shadow-md);
    }

    td {
      display: flex;
      width: 100%;
      box-sizing: border-box;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--color-border);
      white-space: normal;
    }


    td:last-child {
      border-bottom: none;
    }

    .ui-col--spacer {
      display: none;
    }

    .ui-col--card-hidden {
      display: none;
    }

    td::before {
      content: attr(data-label);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-subtle);
      font-size: var(--font-size-sm);
      flex-shrink: 0;
      margin-right: var(--space-3);
    }

    .ui-list-table__td--actions {
      position: static;
      box-shadow: none;
    }
  }
}

@media (max-width: 480px) {
  .ui-bases-list {
    padding: var(--space-3);
  }
}


/* fulgore: ui/bases/modal.css */
.ui-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;

  &.is-open {
    display: flex;

    .ui-modal__backdrop {
      animation: fade-in var(--duration-normal) var(--easing-out) both;
    }

    .ui-modal__dialog {
      animation: scale-in var(--duration-normal) var(--easing-spring) both;
    }
  }
}

.ui-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ui-modal__dialog {
  position: relative;
  white-space: normal;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - var(--space-8) * 2);
  margin: var(--space-4);
  box-shadow: var(--shadow-xl);
  overflow-x: hidden;
  overflow-y: auto;
}

@media (max-width: 1023px) {
  .ui-modal {
    padding-top: var(--navbar-height);
  }

  .ui-modal__dialog {
    max-height: calc(100vh - var(--navbar-height) - var(--space-8));
  }
}

.ui-modal__dialog > .ui-button {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.ui-modal__body {
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: center;
}

.ui-modal__header {
  margin-bottom: var(--space-4);
  text-align: center;
}

.ui-modal__footer {
  margin-top: var(--space-6);
}

.ui-modal__footer .form-actions {
  justify-content: center;
}

.ui-modal__footer .form-actions:has(> :nth-child(2)) {
  justify-content: space-between;
}

@media (max-width: 480px) {
  .ui-modal__dialog {
    padding: var(--space-5);
    margin: var(--space-2);
  }
}


/* fulgore: ui/bases/navbar.css */
.ui-bases-navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  height: var(--navbar-height);
  padding: var(--space-1) var(--space-4);
  box-sizing: border-box;
  align-items: center;
  background: var(--color-brand);
  color: var(--color-text-inverted);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.ui-bases-navbar a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--easing-default);
}

.ui-bases-navbar a:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ── Left section ── */

.navbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--easing-default);
  width: fit-content;
}

.navbar-brand:hover {
  background: rgba(255, 255, 255, 0.15);
}

.navbar-brand svg {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

/* ── Hamburger ── */

.navbar-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-inverted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default);
}

.navbar-hamburger:hover {
  background: rgba(255, 255, 255, 0.15);
}

.navbar-hamburger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Center section ── */

.navbar-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.navbar-link {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--easing-default);
}

.navbar-link:hover {
  background: rgba(255, 255, 255, 0.15);
}

.navbar-link--active {
  background: rgba(255, 255, 255, 0.25);
  font-weight: var(--font-weight-semibold);
}

/* ── Right section ── */

.navbar-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* ── Responsive ── */

@media (max-width: 1023px) {
  .ui-bases-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}


/* fulgore: ui/bases/new.css */
.ui-bases-new__header {
  margin-block-end: var(--space-6);
}

.ui-bases-new__body {
}


/* fulgore: ui/bases/page_header.css */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.page-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-header--size-md .page-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0;
}

.page-header--size-sm .page-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0;
}

@media (max-width: 480px) {
  .page-header {
    flex-direction: column;
    gap: var(--space-3);
  }
}


/* fulgore: ui/bases/progress_bar.css */
.ui-bases-progress-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ui-bases-progress-bar__label {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subtle);
}

.ui-bases-progress-bar__track {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-bases-progress-bar__bar {
  flex: 1;
  height: var(--space-2);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-subtle);
  overflow: hidden;
}

.ui-bases-progress-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-text-subtle);
  transition: width var(--duration-normal) var(--easing-default);
}

.ui-bases-progress-bar--brand .ui-bases-progress-bar__fill {
  background-color: var(--color-brand);
}

.ui-bases-progress-bar--accent .ui-bases-progress-bar__fill {
  background-color: var(--color-accent);
}

.ui-bases-progress-bar--sm .ui-bases-progress-bar__bar {
  height: var(--space-1);
}

.ui-bases-progress-bar--sm .ui-bases-progress-bar__percentage {
  font-size: var(--font-size-xs);
}

.ui-bases-progress-bar__percentage {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
}


/* fulgore: ui/bases/record_view.css */
.ui-bases-record-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* wrap + min-width 0 : sans eux, une zone d'actions plus large que
     l'espace restant déborde du viewport mobile (flex min-width:auto). */
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.ui-bases-record-view__header > * {
  min-width: 0;
}

.ui-bases-record-view__title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-8) 0;
}

.ui-bases-record-view__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.ui-bases-record-view__body > :only-child {
  grid-column: 1 / -1;
  max-width: 48rem;
  margin-inline: auto;
  width: 100%;
}

.ui-bases-record-view__body > .ui-bases-record-view__layout {
  max-width: none;
  margin-inline: 0;
}

/* ── Layout (used by Show/Edit body_content) ── */

.ui-bases-record-view__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── Row (2-column grid) ── */

.ui-bases-record-view__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 768px) {
  .ui-bases-record-view__body {
    grid-template-columns: 1fr;
  }

  .ui-bases-record-view__row {
    grid-template-columns: 1fr;
  }
}


/* fulgore: ui/bases/record_view_title.css */
.ui-bases-record-view-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin: 0;
}


/* fulgore: ui/bases/row.css */
.ui-bases-row__actions-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 480px) {
  .ui-bases-row__actions-inner {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}


@keyframes position-flip {
  0%   { transform: perspective(120px) rotateX(0deg);   opacity: 1; }
  45%  { transform: perspective(120px) rotateX(-90deg); opacity: 0; }
  55%  { transform: perspective(120px) rotateX(-90deg); opacity: 0; }
  100% { transform: perspective(120px) rotateX(0deg);   opacity: 1; }
}

.ui-bases-row__position {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  user-select: none;
}

.ui-bases-row__position.is-flipping {
  animation: position-flip 300ms ease-in-out;
  will-change: transform;
}

/* td-qualified: must outrank `.ui-list-table td` (list.css) or its padding
   collapses the cell content box to 0 and hides the handle. */
td.ui-bases-row__grip {
  width: 1.25rem;
  padding-right: 0;
  color: var(--color-text-subtle);
  user-select: none;
  cursor: grab;

  &:active {
    cursor: grabbing;
  }

  /* Shield the handle from consumer resets like `svg { max-width: 100% }`
     (100% of a zero-width content box renders the handle invisible). */
  & svg {
    width: 10px;
    min-width: 10px;
    max-width: none;
  }
}

tr[draggable="true"] {
  cursor: grab;

  
  & td:not(:has(a, button)) {
    cursor: grab;
  }

  &:active,
  &:active td:not(:has(a, button)) {
    cursor: ns-resize;
  }
}

tr.sortable--dragging,
tr.sortable--dragging td {
  cursor: ns-resize;
}

tr.sortable--dragging {
  opacity: 0.7;
  background: var(--color-surface-raised);
  outline: 1.5px dashed var(--color-border-strong);
  outline-offset: -1px;
  box-shadow: var(--shadow-md);
}


/* fulgore: ui/bases/show.css */
.ui-bases-show__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-block-end: var(--space-6);

  .ui-links-back {
    margin-block: 0;
  }
}

.ui-bases-show__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-8);
}

.ui-bases-show__list {
  width: 100%;
  margin-block-start: var(--space-8);
}

.ui-bases-show__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--space-8);
}

@media (max-width: 767px) {
  .ui-bases-show__body {
    grid-template-columns: 1fr;
  }

  .ui-bases-show__header {
    grid-template-columns: 1fr;
  }
}


/* fulgore: ui/bases/sidebar.css */
.sidebar {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  overflow-y: auto;
  z-index: var(--z-raised);
  box-sizing: border-box;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-subtle);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background var(--duration-fast), color var(--duration-fast);
  border-left: 3px solid transparent;
}

.sidebar-link:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.sidebar-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sidebar-link svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.sidebar-link--active {
  color: var(--color-brand);
  background: var(--color-brand-surface);
  border-left-color: var(--color-brand);
  font-weight: var(--font-weight-semibold);
}

/* ── Responsive ── */

@media (max-width: 1023px) {
  .sidebar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-link {
    transition: none;
  }
}


/* fulgore: ui/bases/stat_card.css */
.ui-stat-card {
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}

.ui-stat-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.ui-stat-card__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin: 0;
}


/* fulgore: ui/bases/view_actions.css */
.ui-bases-view-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* fulgore: ui/buttons/switch.css */
.ui-buttons-switch {
  display: inline-flex;
  cursor: pointer;
  align-items: center;

  form,
  button {
    display: contents;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }
}

.ui-buttons-switch__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  transition: background-color var(--duration-slow) var(--easing-default);
  padding: 0 var(--space-1);
  box-sizing: border-box;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 2px rgba(0, 0, 0, 0.10);
}

.ui-buttons-switch--checked .ui-buttons-switch__track {
  background-color: var(--color-brand);
}

.ui-buttons-switch__thumb {
  position: absolute;
  left: var(--space-1);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 35% 30%, #ffffff, #c8c8c8);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  transition:
    transform var(--duration-slow) var(--easing-spring),
    width var(--duration-fast) var(--easing-out);
}

.ui-buttons-switch--checked .ui-buttons-switch__thumb {
  transform: translateX(1rem);
}

.ui-buttons-switch:active .ui-buttons-switch__thumb {
  width: 1.5rem;
}


/* fulgore: ui/chat/bubble.css */
.ui-chat-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 75%;
}

.ui-chat-bubble--sent {
  align-self: flex-end;
  align-items: flex-end;
}

.ui-chat-bubble--received {
  align-self: flex-start;
  align-items: flex-start;
}

.ui-chat-bubble__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-chat-bubble__meta {
  display: flex;
  justify-content: flex-end;
}

.ui-chat-bubble__time {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.ui-chat-bubble__body {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  word-break: break-word;
}

.ui-chat-bubble--sent .ui-chat-bubble__body {
  background: var(--color-brand-surface);
  color: var(--color-text);
  border-bottom-right-radius: var(--radius-sm);
}

.ui-chat-bubble--received .ui-chat-bubble__body {
  background: var(--color-surface-subtle);
  color: var(--color-text);
  border-bottom-left-radius: var(--radius-sm);
}


/* fulgore: ui/chat/conversation_item.css */
.ui-chat-conversation-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--easing-default);

  &:hover {
    background: var(--color-surface-raised);
  }

  &--unread {
    background: var(--color-brand-surface);

    &:hover {
      background: var(--color-brand-a10);
    }

    .ui-chat-conversation-item__names {
      font-weight: var(--font-weight-semibold);
    }

    .ui-chat-conversation-item__preview {
      color: var(--color-text);
    }
  }
}

/* --- Avatars --- */

.ui-chat-conversation-item__avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: center;
}

.ui-chat-conversation-item__avatar {
  margin-left: -6px;

  &:first-child {
    margin-left: 0;
  }

  .ui-user-badge {
    gap: 0;
  }

  .ui-user-badge__text {
    display: none;
  }

  .ui-user-badge__circle {
    width: 1.75rem !important;
    height: 1.75rem !important;
    font-size: 0.6875rem !important;
    border: 2px solid var(--color-surface);
  }
}

/* --- Content --- */

.ui-chat-conversation-item__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ui-chat-conversation-item__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.ui-chat-conversation-item__names {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-chat-conversation-item__time {
  font-size: 0.625rem;
  color: var(--color-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
}

.ui-chat-conversation-item__subject {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-chat-conversation-item__preview {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Unread badge --- */

.ui-chat-conversation-item__unread-badge {
  display: inline-block;
  min-width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
  padding-inline: 5px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-text-inverted);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  align-self: center;
}


/* fulgore: ui/chat/empty_state.css */
.ui-chat-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--color-text-subtle);

  .svg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    opacity: 0.4;
  }
}

.ui-chat-empty-state__text {
  margin: 0;
  font-size: var(--font-size-sm);
  text-align: center;
}


/* fulgore: ui/chat/input.css */
.ui-chat-input {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
}

.ui-chat-input__form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ui-chat-input__textarea {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 16px;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color var(--duration-fast) var(--easing-default);

  &:focus {
    border-color: var(--color-brand);
    box-shadow: var(--focus-ring);
  }
}

.ui-chat-input__submit {
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-brand);
  color: var(--color-text-inverted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--easing-default);

  &:hover {
    background: var(--color-brand-dark);
  }

  &:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}


/* fulgore: ui/chat/list.css */
.ui-chat-list {
  flex: 1;
  min-height: 20rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ui-chat-list[data-full-height="true"] {
  min-height: 0;
  max-height: none;
}


/* fulgore: ui/directions_dropdown.css */
/* "Directions" dropdown — anchors the absolute menu under the trigger.
   Stimulus `dropdown` toggles .is-open on this root element, not the menu. */

.ui-directions-dropdown {
  position: relative;
  display: inline-block;
}

.ui-directions-dropdown__toggle::after {
  content: "▾";
  margin-left: var(--space-1);
  font-size: 0.75em;
}

.ui-directions-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 12rem;
  padding: var(--space-1) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.ui-directions-dropdown.is-open .ui-directions-dropdown__menu {
  display: block;
}

.ui-directions-dropdown__item {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.ui-directions-dropdown__item:hover,
.ui-directions-dropdown__item:focus {
  background: var(--color-surface-alt);
}


/* fulgore: ui/display/code.css */
.code-container {
  display: grid;
  user-select: text;
}

/* ── Toggle button ── */

.code-container .collapse-toggle {
  background-color: var(--color-neutral-900);
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-lg);
  color: var(--color-text-inverted);
  cursor: pointer;
  font-size: var(--font-size-2xl);
  margin: 0 var(--space-4) 0 auto;
  padding: var(--space-2);
  position: relative;
  top: var(--space-6);
  transition: background-color var(--duration-normal) var(--easing-default),
              border-color var(--duration-normal) var(--easing-default);
  width: fit-content;
  z-index: var(--z-raised);
}

.code-container .collapse-toggle:hover {
  background-color: var(--color-surface);
  border-color: var(--color-neutral-900);
  color: var(--color-text);
}

/* ── Code block ── */

.code-container .code {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-0);
  overflow: scroll;
  padding: var(--space-2);
  transition: height var(--duration-normal) var(--easing-default);
  z-index: 1;
}

.code-container pre.collapsed {
  height: 5rem;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}

.code-container pre.expanded {
  height: 100%;
  overflow: scroll;
}


/* fulgore: ui/display/counter.css */
.ui-display-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  background: var(--color-surface-raised);
  color: var(--color-text-subtle);
}

.ui-display-counter .ui-icon {
  width: 0.875rem;
  height: 0.875rem;
}


/* fulgore: ui/display/datetime.css */
.ui-display-datetime {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  white-space: nowrap;
}


/* fulgore: ui/display/distribution_bar.css */
.ui-display-distribution-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ui-display-distribution-bar {
  min-width: 0;
}

.ui-display-distribution-bar__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(40px, 80px);
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.ui-display-distribution-bar__emoji {
  font-size: var(--font-size-base);
  line-height: 1;
}

.ui-display-distribution-bar__label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-display-distribution-bar__count {
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
  text-align: right;
}

.ui-display-distribution-bar__track {
  height: 8px;
  background-color: var(--color-surface-subtle);
  border-radius: 999px;
  overflow: hidden;
}

.ui-display-distribution-bar__fill {
  height: 100%;
  background-color: var(--color-brand);
  transition: width 200ms ease;
}


/* fulgore: ui/display/iban.css */
.ui-display-iban {
  font-variant-numeric: tabular-nums;
}


/* fulgore: ui/display/image_skeleton.css */
/* .ui-image-skeleton — classe utility skeleton image partagée.
 * Pose un shimmer en background + un spinner via ::before sur l'élément porteur.
 * Réutilise @keyframes skeleton-shimmer et @keyframes spin (fulgore/animations.css).
 * Le wrapper doit définir ses propres dimensions (aspect-ratio, width, height,
 * border-radius, overflow).
 *
 * Deux usages possibles (selon la présence d'un wrapper) :
 *
 *   1. Sur un wrapper <div> qui contient un <picture> rendu par UI::Display::Picture
 *      → le shimmer + spinner sont sur le wrapper, l'image enfant le masque
 *        une fois chargée (z-index:1 sur le picture/img).
 *
 *   2. Directement sur le <picture> lui-même (via css_class de Picture, pour les
 *      cas sans wrapper parent — ex. miniatures en ligne dans un Row)
 *      → le ::before n'aurait pas d'effet sur un <img> seul (replaced element),
 *        mais le <picture> n'est PAS replaced, donc ::before fonctionne ;
 *        le <img> enfant masque le skeleton via z-index.
 *
 * Caveat asset transparent : le contract suppose un asset opaque (JPEG/WebP en
 * object-fit:cover). Pour un SVG/PNG transparent avec object-fit:contain,
 * les zones transparentes laissent voir le shimmer en permanence — préférer
 * dans ce cas un wrapper neutre sans skeleton (cf. show.css logo).
 */

.ui-image-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--color-surface-raised) 25%,
    var(--color-surface-subtle) 50%,
    var(--color-surface-raised) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.ui-image-skeleton::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 0;
}

.ui-image-skeleton > picture,
.ui-image-skeleton > picture > img,
picture.ui-image-skeleton,
picture.ui-image-skeleton > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* fulgore: ui/display/money.css */
.ui-display-money {
  display: block;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.ui-display-money--default {
  color: var(--color-brand);
}

.ui-display-money--positive {
  color: var(--color-success);
}

.ui-display-money--negative {
  color: var(--color-danger);
}


/* fulgore: ui/display/range_bar.css */
.ui-display-range-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.ui-display-range-bar__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-subtle);
}

.ui-display-range-bar__min,
.ui-display-range-bar__max {
  margin: 0;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.ui-display-range-bar__max {
  text-align: right;
}

.ui-display-range-bar__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--color-surface-subtle) 0%,
    var(--color-brand-surface) 50%,
    var(--color-surface-subtle) 100%
  );
  overflow: hidden;
}

.ui-display-range-bar__marker {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background-color: var(--color-brand);
  border-radius: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.ui-display-range-bar__marker-label {
  position: absolute;
  top: 100%;
  white-space: nowrap;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  transform: translateX(-50%);
}


/* fulgore: ui/display/rna.css */
.ui-display-rna {
  font-variant-numeric: tabular-nums;
}


/* fulgore: ui/display/simple_format.css */
.simple-format {
  white-space: pre-line;
}

.simple-format p {
  margin: 0 0 1em;
}

.simple-format br {
  display: inline;
}


/* fulgore: ui/display/siret.css */
.ui-display-siret {
  font-variant-numeric: tabular-nums;
}


/* fulgore: ui/display/stat_block.css */
.ui-display-stat-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  min-width: 0;
  text-align: center;
}

/* Large variant — default */
.ui-display-stat-block--large {
  .ui-display-stat-block__value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin: 0;
  }

  .ui-display-stat-block__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-subtle);
    margin: 0;
  }
}

/* Compact variant */
.ui-display-stat-block--compact {
  min-width: 0;

  .ui-display-stat-block__value {
    font-size: var(--font-size-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .ui-display-stat-block__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-subtle);
    margin: 0;
  }
}


/* fulgore: ui/display/thumbnail.css */
.ui-display-thumbnail {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.ui-display-thumbnail picture,
.ui-display-thumbnail .ui-display-thumbnail__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}


/* fulgore: ui/empty_state.css */
.ui-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  color: var(--color-text-subtle);

  .empty-state-icon {
    margin-bottom: var(--space-3);

    .svg {
      width: var(--space-10);
      height: var(--space-10);
      fill: currentColor;
      opacity: 0.4;
      /* Consumer resets may force `svg { display: block }`, which escapes
         the text-align: center of the root — margin-inline keeps a block
         svg centered and is a no-op on an inline one. */
      margin-inline: auto;
    }
  }

  .empty-state-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--space-2) 0;
  }

  .empty-state-description {
    font-size: var(--font-size-base);
    margin: 0;
  }

  .empty-state-cta {
    margin-top: var(--space-5);
  }
}


/* fulgore: ui/gauge.css */
.ui-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  background-color: var(--color-brand-surface);
  border: 1px solid var(--color-brand-a10);
  border-radius: var(--radius-lg);
  text-align: center;
}

.ui-gauge__icon {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.ui-gauge__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ui-gauge .ui-bases-progress-bar {
  width: 100%;
}

.ui-gauge .ui-bases-progress-bar__track {
  flex-direction: column;
  gap: var(--space-2);
}

.ui-gauge .ui-bases-progress-bar__bar {
  flex: none;
  width: 100%;
  height: var(--space-1);
}

.ui-gauge .ui-bases-progress-bar__percentage {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand);
  text-align: center;
  min-width: unset;
}


/* fulgore: ui/ghost_row.css */
.ui-ghost-row {
  
  & .ui-ghost-row__cell {
    
    border: 3px dashed var(--color-brand);
    background-color: var(--color-brand-a20);
    padding-block: var(--space-1);
  }
}


/* fulgore: ui/help_tooltip.css */
.ui-help-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ui-help-tooltip__trigger {
  width: 1.1rem;
  height: 1.1rem;
  background: var(--color-surface-raised);
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.ui-help-tooltip__trigger:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.ui-help-tooltip__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ui-help-tooltip__panel {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--space-2));
  transform: translateY(-50%);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  max-width: 320px;
  z-index: var(--z-dropdown);
  white-space: normal;
}

/* Bascule posée par tooltip_controller quand la bulle sortirait du bord
   gauche du viewport : elle s'ouvre alors à droite du déclencheur. */
.ui-help-tooltip__panel[data-flipped] {
  right: auto;
  left: calc(100% + var(--space-2));
}


/* fulgore: ui/icon.css */
.svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
  fill: currentColor;
}


/* fulgore: ui/icon_label.css */
.ui-icon-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.ui-icon-label__icon {
  flex-shrink: 0;
  font-size: var(--font-size-base);
  line-height: 1;
}

.ui-icon-label__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}


/* fulgore: ui/inputs/checkbox.css */
.ui-input--checkbox {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);

  label {
    cursor: pointer;
  }

  input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-brand);
    cursor: pointer;
  }

  input[type="hidden"] {
    display: none;
  }
}


/* fulgore: ui/inputs/checkbox_card.css */
.ui-inputs-checkbox-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--easing-default),
    background var(--duration-fast) var(--easing-default);

  &:hover {
    border-color: var(--color-brand);
    background: var(--color-brand-a10);
  }

  &.is-checked {
    border-color: var(--color-brand);
    background: var(--color-brand-a10);
  }
}

.ui-inputs-checkbox-card__checkbox {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-brand);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--easing-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));

  .no-transition & {
    transition: none;
  }
}

.ui-inputs-checkbox-card.is-checked .ui-inputs-checkbox-card__checkbox {
  animation: checkbox-pop var(--duration-normal, 250ms) var(--easing-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.ui-inputs-checkbox-card.no-transition .ui-inputs-checkbox-card__checkbox {
  animation: none;
}

@keyframes checkbox-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.ui-inputs-checkbox-card__text {
  position: relative;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.ui-inputs-checkbox-card__label {
  display: block;
  transition: opacity var(--duration-fast) var(--easing-default);
}

.ui-inputs-checkbox-card__label--unchecked {
  opacity: 1;
}

.ui-inputs-checkbox-card__label--checked {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.ui-inputs-checkbox-card.is-checked .ui-inputs-checkbox-card__label--unchecked {
  opacity: 0;
}

.ui-inputs-checkbox-card.is-checked .ui-inputs-checkbox-card__label--checked {
  opacity: 1;
}


/* fulgore: ui/inputs/checkbox_select.css */
.ui-input {
  .ui-checkbox-select {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .ui-checkbox-select__option {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text);

    input[type="checkbox"] {
      width: auto;
      flex: none;
      accent-color: var(--color-brand);
      cursor: pointer;
    }
  }
}


/* fulgore: ui/inputs/color.css */
.ui-input {
  [data-controller="color-picker"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
  }

  [data-color-picker-target="swatch"] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: var(--space-1);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition:
      border-color var(--duration-fast) var(--easing-default),
      box-shadow var(--duration-fast) var(--easing-default);

    &::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    &::-webkit-color-swatch {
      border: none;
      border-radius: var(--radius-sm);
    }

    &::-moz-color-swatch {
      border: none;
      border-radius: var(--radius-sm);
    }

    &:focus {
      border-color: var(--color-brand);
      box-shadow: var(--focus-ring);
    }
  }

  [data-color-picker-target="hex"] {
    flex: 1;
    width: auto;
    font-family: var(--font-family-mono);
  }

  &.ui-input--error {
    [data-color-picker-target="swatch"] {
      border-color: var(--color-danger);

      &:focus {
        box-shadow: 0 0 0 3px var(--color-danger-a10);
      }
    }
  }
}


/* fulgore: ui/inputs/date_range.css */
.filter-field--date-range {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.filter-date-range__field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.filter-date-range__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.filter-field--date-range input[type="date"] {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}


/* fulgore: ui/inputs/file_dropzone.css */
.ui-inputs-file-dropzone__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.ui-inputs-file-dropzone__zone:hover {
  border-color: var(--color-brand);
  background-color: var(--color-brand-surface);
}

.ui-inputs-file-dropzone__zone.is-dragover {
  border-color: var(--color-brand);
  background-color: var(--color-brand-surface);
}

.ui-inputs-file-dropzone__icon {
  font-size: var(--font-size-2xl);
}

.ui-inputs-file-dropzone__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.ui-inputs-file-dropzone__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.ui-inputs-file-dropzone__zone.is-uploading {
  border-color: var(--color-brand);
  background-color: var(--color-brand-surface);
  pointer-events: none;
  cursor: default;
}

.ui-inputs-file-dropzone__zone.is-uploading .ui-inputs-file-dropzone__icon,
.ui-inputs-file-dropzone__zone.is-uploading .ui-inputs-file-dropzone__label,
.ui-inputs-file-dropzone__zone.is-uploading .ui-inputs-file-dropzone__hint {
  display: none;
}

.ui-inputs-file-dropzone__zone.is-uploading::after {
  content: "Envoi en cours…";
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
}

.ui-inputs-file-dropzone__zone.is-uploading::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-brand);
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: dropzone-spin 600ms linear infinite;
}

@keyframes dropzone-spin {
  to { transform: rotate(360deg); }
}

.ui-inputs-file-dropzone__input {
  display: none;
}


/* fulgore: ui/inputs/file_zone.css */
.ui-inputs-file-zone__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--easing-default),
    background-color var(--duration-normal) var(--easing-default);
}

.ui-inputs-file-zone__zone:hover {
  border-color: var(--color-brand);
  background-color: var(--color-brand-surface);
}

.ui-inputs-file-zone__zone.is-dragover {
  border-color: var(--color-brand);
  background-color: var(--color-brand-surface);
}

.ui-inputs-file-zone__current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.ui-inputs-file-zone__current-thumb {
  max-height: 7.5rem;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.ui-inputs-file-zone__current-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.ui-inputs-file-zone__replace {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.ui-inputs-file-zone__zone.has-file .ui-inputs-file-zone__current {
  display: none !important;
}

.ui-inputs-file-zone__preview {
  max-height: 7.5rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  object-fit: contain;
}

.ui-inputs-file-zone__preview[hidden] {
  display: none !important;
}

.ui-inputs-file-zone__icon {
  font-size: var(--font-size-2xl);
}

.ui-inputs-file-zone__invite {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.ui-inputs-file-zone__filename {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.ui-inputs-file-zone__filename[hidden] {
  display: none !important;
}

.ui-inputs-file-zone__formats {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.ui-inputs-file-zone__zone.has-file .ui-inputs-file-zone__invite {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-subtle);
}


/* fulgore: ui/inputs/money.css */
.ui-inputs-money {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    border-color var(--duration-fast) var(--easing-default),
    box-shadow var(--duration-fast) var(--easing-default);
}

.ui-inputs-money:focus-within {
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

.ui-inputs-money input[type="text"] {
  flex: 1;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.ui-inputs-money input[type="text"]:focus {
  border-color: transparent;
  box-shadow: none;
}

.ui-inputs-money__currency {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-left: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.ui-input--error .ui-inputs-money {
  border-color: var(--color-danger);
}

.ui-input--error .ui-inputs-money:focus-within {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-a10);
}


/* fulgore: ui/inputs/password.css */
.ui-input {
  .password-wrapper {
    position: relative;
  }

  .password-wrapper input {
    padding-right: var(--space-10);
  }

  .password-toggle {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-text-subtle);
    display: flex;
    align-items: center;
    transition: color var(--duration-fast) var(--easing-default);

    &:hover { color: var(--color-text); }

    .svg {
      display: block;
      width: 1rem;
      height: 1rem;
    }
  }
}


/* fulgore: ui/inputs/percentage.css */
.ui-inputs-percentage {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    border-color var(--duration-fast) var(--easing-default),
    box-shadow var(--duration-fast) var(--easing-default);
}

.ui-inputs-percentage:focus-within {
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

.ui-inputs-percentage input[type="number"] {
  flex: 1;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.ui-inputs-percentage input[type="number"]:focus {
  border-color: transparent;
  box-shadow: none;
}

.ui-inputs-percentage__suffix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-left: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.ui-input--error .ui-inputs-percentage {
  border-color: var(--color-danger);
}

.ui-input--error .ui-inputs-percentage:focus-within {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-a10);
}


/* fulgore: ui/inputs/pill_select.css */
.pill-select {
  position: relative;
  display: inline-block;
  width: 100%;
}

.pill-select__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
}

.pill-select__caret {
  margin-left: auto;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.pill-select__dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pill-select__dropdown[hidden] {
  display: none;
}

.pill-select__option {
  display: flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.pill-select__option:hover {
  background: var(--color-surface-subtle);
}


/* fulgore: ui/inputs/rich_text.css */
.ui-input__rich-text {
  min-height: 200px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
  line-height: 1.5;
  background-color: var(--color-surface);
}

.ui-input__rich-text:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

.ui-input__rich-text:disabled {
  background-color: var(--color-surface-subtle);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}


/* fulgore: ui/inputs/select.css */
.ui-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
}


/* fulgore: ui/inputs/vat_breakdown.css */
.ui-inputs-vat-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}


/* fulgore: ui/inputs/verification_code.css */
.ui-verification-code__boxes {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}

.ui-verification-code__box {
  width: 3rem;
  height: 3.5rem;
  text-align: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--easing-default),
              box-shadow var(--duration-fast) var(--easing-default);
  appearance: none;
  -moz-appearance: textfield;
}

.ui-verification-code__box::-webkit-outer-spin-button,
.ui-verification-code__box::-webkit-inner-spin-button {
  appearance: none;
}

.ui-verification-code__box:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

.ui-input--error .ui-verification-code__box {
  border-color: var(--color-danger);
}

.ui-input--error .ui-verification-code__box:focus {
  box-shadow: 0 0 0 3px var(--color-danger-a10);
}

.ui-verification-code__box:disabled {
  background-color: var(--color-surface-raised);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}


/* fulgore: ui/label_with_tooltip.css */
.ui-label-with-tooltip {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.ui-label-with-tooltip__text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}


/* fulgore: ui/links/back.css */
.ui-links-back {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  margin-block: var(--space-6);
}

.ui-links-back a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-default);

  &:hover {
    color: var(--color-brand);
  }
}


/* fulgore: ui/links/edit.css */
.ui-button--sm .svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* fulgore: ui/links/plain.css */
.ui-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--easing-default);

  &:hover {
    opacity: 0.7;
  }

  &:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
  }
}


/* fulgore: ui/locale_flag_switch.css */
/* Drapeau SVG du switch de langue. PAS de règle `fill` : les couleurs
   viennent du fichier SVG (contrairement à .svg de UI::Icon qui force
   currentColor). Ratio 4:3 (viewBox 640x480), hauteur fixe pour aligner. */
.ui-locale-flag {
  display: block;
  height: 1.25rem;
  width: auto;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}


/* fulgore: ui/locale_switch.css */
.ui-locale-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-locale-switch__link {
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}


/* fulgore: ui/map.css */
.ui-map {
  width: 100%;
  height: 20rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  z-index: 0;
}


/* fulgore: ui/menu_toggle.css */
.ui-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing-default),
              background-color var(--duration-fast) var(--easing-default);
}

.ui-menu-toggle:hover {
  border-color: var(--color-text-soft);
  background-color: var(--color-surface-alt);
}

.ui-menu-toggle:focus-visible {
  outline: none;
  border-color: var(--color-text-soft);
  box-shadow: var(--focus-ring);
}


/* fulgore: ui/metric_card.css */
.ui-metric-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.ui-metric-card__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
  position: relative;
}

.ui-metric-card__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Tooltip repositioning inside card ── */

.ui-metric-card .ui-help-tooltip__panel {
  top: calc(100% + var(--space-1));
  right: auto;
  left: 0;
  transform: none;
  min-width: 12rem;
}

/* ── Comparison delta (M/M-1, etc.) ── */

.ui-metric-card__comparison {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
}

.ui-metric-card__delta-value {
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ui-metric-card__delta-label {
  color: var(--color-text-subtle);
}

.ui-metric-card__comparison--positive .ui-metric-card__delta-value {
  color: var(--color-success);
}

.ui-metric-card__comparison--negative .ui-metric-card__delta-value {
  color: var(--color-danger);
}

.ui-metric-card__comparison--neutral .ui-metric-card__delta-value {
  color: var(--color-text-subtle);
}


/* fulgore: ui/notification/badge.css */
.ui-notification-badge {
  display: inline-block;
  min-width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
  padding-inline: 5px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-text-inverted);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}


/* fulgore: ui/notification/bell.css */
.ui-notification-bell {
  position: relative;
}

.ui-notification-bell__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-inverted);
  cursor: pointer;
  position: relative;
  transition: background var(--duration-fast) var(--easing-default);

  .svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  &:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  &:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
}

.ui-notification-bell__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 3px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-text-inverted);
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.ui-notification-bell__badge--hidden {
  display: none;
}

.ui-notification-bell__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-2);
  width: 22rem;
  max-width: calc(100vw - 2rem);
  max-height: 28rem;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-dropdown);

  &.is-open {
    display: block;
  }
}

.ui-notification-bell__dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.ui-notification-bell__dropdown-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.ui-notification-bell__mark-all {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--font-size-xs);
  color: var(--color-brand);
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.ui-notification-bell__list {
  display: flex;
  flex-direction: column;
}

.ui-notification-bell__empty {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  margin: 0;
}


/* fulgore: ui/notification/item.css */
.ui-notification-item {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  color: var(--color-text);

  &:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
  }

  &:hover {
    background: var(--color-surface-raised);
  }

  &--unread {
    background: var(--color-brand-surface);

    &:hover {
      background: var(--color-brand-a10);
    }
  }
}

.ui-notification-item__avatar {
  flex-shrink: 0;

  .ui-user-badge {
    gap: 0;
  }

  .ui-user-badge__text {
    display: none;
  }

  .ui-user-badge__circle {
    width: 1.75rem !important;
    height: 1.75rem !important;
    font-size: 0.625rem !important;
  }
}

.ui-notification-item__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ui-notification-item__title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.ui-notification-item__actor-name {
  font-size: var(--font-size-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-notification-item .ui-pill {
  font-size: 0.5625rem;
  padding: 0 4px;
  line-height: 1.125rem;
  flex-shrink: 0;
}

.ui-notification-item__body {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-notification-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: 1px;
}

.ui-notification-item__time,
.ui-notification-item__context {
  font-size: 0.625rem;
  color: var(--color-text-disabled);
}


/* fulgore: ui/pagination.css */
.ui-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.ui-pagination__arrow,
.ui-pagination__page,
.ui-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-8);
  height: var(--space-8);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.ui-pagination__arrow {
  color: var(--color-text-subtle);

  &:hover {
    background: var(--color-surface-subtle);
    color: var(--color-text);
  }
}

.ui-pagination__arrow--disabled {
  color: var(--color-text-disabled);
  pointer-events: none;
}

.ui-pagination__page {
  color: var(--color-text-subtle);

  &:hover {
    background: var(--color-surface-subtle);
    color: var(--color-text);
  }
}

.ui-pagination__page--current {
  background: var(--color-brand);
  color: var(--color-text-inverted);
  border: 1px solid var(--color-brand);
  font-weight: var(--font-weight-medium);
  pointer-events: none;
}

.ui-pagination__gap {
  color: var(--color-text-disabled);
  pointer-events: none;
}


/* fulgore: ui/pill.css */
.ui-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.ui-pill--brand {
  background: var(--color-violet-100);
  color: var(--color-violet-700);
}

.ui-pill--info {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}

.ui-pill--success {
  background: var(--color-green-100);
  color: var(--color-green-700);
}

.ui-pill--danger {
  background: var(--color-red-100);
  color: var(--color-red-700);
}

.ui-pill--warning {
  background: var(--color-amber-100);
  color: var(--color-amber-700);
}

.ui-pill--neutral {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.ui-pill--draft {
  background: var(--color-surface-raised);
  color: var(--color-text-subtle);
}

.ui-pill--in_progress {
  background: var(--color-success-surface);
  color: var(--color-success);
}

.ui-pill--review {
  background: var(--color-warning-surface);
  color: var(--color-warning);
}

.ui-pill--completed {
  background: var(--color-info-surface);
  color: var(--color-info);
}

.ui-pill--archived {
  background: var(--color-surface-raised);
  color: var(--color-text-subtle);
}

.ui-pill--admin {
  background: var(--color-violet-100);
  color: var(--color-violet-700);
}

.ui-pill--accountant {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}

.ui-pill--active {
  background: var(--color-success-surface);
  color: var(--color-success);
}

.ui-pill--suspended {
  background: var(--color-red-100);
  color: var(--color-red-700);
}

.ui-pill--pending {
  background: var(--color-warning-surface);
  color: var(--color-warning);
}

.ui-pill--read {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}

.ui-pill--lmnp {
  background: var(--color-brand-surface);
  color: var(--color-brand);
}

.ui-pill--lmnp_vat {
  background: var(--color-info-surface);
  color: var(--color-info);
}

.ui-pill--lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

.ui-pill--strong {
  padding: var(--space-1) var(--space-3);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-pill-strong);
}

.ui-pill--strong.ui-pill--brand   { background: var(--color-violet-600); color: var(--color-neutral-0); }
.ui-pill--strong.ui-pill--info    { background: var(--color-blue-700);   color: var(--color-neutral-0); }
.ui-pill--strong.ui-pill--success { background: var(--color-green-500);  color: var(--color-neutral-0); }
.ui-pill--strong.ui-pill--warning { background: var(--color-amber-500);  color: var(--color-neutral-0); }
.ui-pill--strong.ui-pill--danger  { background: var(--color-red-500);    color: var(--color-neutral-0); }
.ui-pill--strong.ui-pill--neutral { background: var(--color-neutral-700); color: var(--color-neutral-0); }


/* fulgore: ui/progress_ring.css */
.ui-progress-ring {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-brand-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.ui-progress-ring__ring {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
}

.ui-progress-ring__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ui-progress-ring__track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 8;
}

.ui-progress-ring__fill {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ui-progress-ring__ratio {
  transform: rotate(90deg);
  transform-origin: 60px 60px;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  fill: var(--color-text);
}

.ui-progress-ring__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ui-progress-ring__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.ui-progress-ring__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  margin: 0;
}


/* fulgore: ui/row_actions_menu.css */
/* RowActionsMenu — kebab (⋮) dropdown wrapping already-rendered action
   components (UI::Links::* / UI::Buttons::*) as flat, full-width menu rows.
   Stimulus `dropdown` toggles .is-open on this root element, not the menu
   (cf. directions_dropdown.css / dropdown_controller). */

.ui-row-actions-menu {
  position: relative;
  display: inline-block;
}

.ui-row-actions-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);

  color: var(--color-text-subtle);
  background: transparent;

  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default);

  .svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  &:hover:not(:disabled):not(.ui-row-actions-menu__toggle--disabled) {
    background: var(--color-surface-subtle);
    color: var(--color-text);
  }

  &:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
}

.ui-row-actions-menu__menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 12rem;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;

  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.ui-row-actions-menu.is-open .ui-row-actions-menu__menu {
  display: block;
}

.ui-row-actions-menu__item {
  display: block;
}

/* Neutralize the wrapped action components (ui-link, ui-button — primary/
   secondary/danger, all sizes) back into flat, full-width text menu rows.
   Targets the real classes emitted by UI::Links::Show/Edit/New (<a
   class="ui-button ui-button--{primary,secondary} ui-button--sm">) and
   UI::Buttons::Destroy (<form> root wrapping <button class="ui-button
   ui-button--danger ui-button--sm">). */
.ui-row-actions-menu__item a,
.ui-row-actions-menu__item button,
.ui-row-actions-menu__item form {
  display: block;
  width: 100%;
  box-sizing: border-box;

  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: 0;

  font-size: var(--font-size-sm);
  text-align: left;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;

  background: transparent;
  box-shadow: none;

  cursor: pointer;
}

.ui-row-actions-menu__item a:hover,
.ui-row-actions-menu__item button:hover,
.ui-row-actions-menu__item form:hover {
  background: var(--color-surface-alt);
}

.ui-row-actions-menu__item a:focus-visible,
.ui-row-actions-menu__item button:focus-visible {
  outline: none;
  box-shadow: none;
  background: var(--color-surface-alt);
}

/* The base variant rules (.ui-button.ui-button--primary/secondary/danger,
   specificity 0,2,0) outrank the plain-element resets above (0,1,1) and
   win regardless of concat order — so background/color/hover-background
   from the wrapped button chrome survive unless matched at equal-or-higher
   specificity here. Re-neutralize per variant explicitly. */
.ui-row-actions-menu__item .ui-button--primary,
.ui-row-actions-menu__item .ui-button--secondary,
.ui-row-actions-menu__item .ui-button--danger {
  color: var(--color-text);
  background: transparent;
  border-color: transparent;
}

.ui-row-actions-menu__item .ui-button--primary:hover,
.ui-row-actions-menu__item .ui-button--secondary:hover,
.ui-row-actions-menu__item .ui-button--danger:hover {
  background: var(--color-surface-alt);
  border-color: transparent;
}

/* The wrapped icon (pen-to-square, plus…) rides along the text baseline
   instead of the button's centered flex layout. `display: inline-block`
   defends against a consumer global reset (`svg { display: block }`) that
   would otherwise stack the icon above its label. */
.ui-row-actions-menu__item .svg {
  display: inline-block;
  width: var(--font-size-sm);
  height: var(--font-size-sm);
  margin-right: var(--space-2);
  vertical-align: -0.15em;
}

/* Destroy's <form> is the item's direct child and must not add its own
   padding on top of the <button> it wraps, or add block spacing. */
.ui-row-actions-menu__item form {
  padding: 0;
}

.ui-row-actions-menu__item form button {
  width: 100%;
}

/* Danger row (UI::Buttons::Destroy → .ui-button--danger) keeps a red
   label, overriding the neutral text-color reset above. Source order
   (after the variant reset block) settles the equal-specificity (0,2,0)
   tie in its favor — hover background already comes from the reset
   block above, so only color needs restating here. */
.ui-row-actions-menu__item .ui-button--danger {
  color: var(--color-danger);
}

@media (prefers-reduced-motion: reduce) {
  .ui-row-actions-menu__toggle {
    transition: none;
  }
}


/* fulgore: ui/section.css */
.ui-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

/* ── Header ── */

.ui-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.ui-section__header[data-action] {
  cursor: pointer;
  user-select: none;
}

.ui-section__icon {
  flex-shrink: 0;
  font-size: var(--font-size-lg);
  line-height: 1;
}

.ui-section__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.ui-section__counter {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-subtle);
}

.ui-section__action {
  margin-left: auto;
  flex-shrink: 0;
}

.ui-section__toggle {
  margin-left: auto;
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  transition: transform var(--duration-fast);
}

.ui-section__action + .ui-section__toggle {
  margin-left: 0;
}

/* ── Body ── */

.ui-section__body {
  min-height: 0;
}

/* ── Footer ── */

.ui-section__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
}


/* fulgore: ui/section_header.css */
.ui-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.ui-section-header__icon {
  flex-shrink: 0;
  font-size: var(--font-size-lg);
  line-height: 1;
}

.ui-section-header__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.ui-section-header__action {
  margin-left: auto;
  flex-shrink: 0;
}


/* fulgore: ui/shell/navbar.css */
.ui-shell-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--navbar-height);
  padding: var(--space-1) var(--space-4);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--shell-navbar-bg);
  color: var(--shell-navbar-fg);

  .navbar-hamburger { display: none; }
}
@media (max-width: 1023px) {
  .ui-shell-navbar .navbar-hamburger { display: flex; }
}
.navbar-sidebar-toggle {
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-md);
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default);
  .svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    transition: transform var(--duration-fast) var(--easing-default);
  }
  &[aria-expanded="false"] .svg { transform: rotate(180deg); }
  &:hover { background: rgba(255, 255, 255, 0.15); }
  &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
}
.ui-shell-navbar .navbar-sidebar-toggle { display: flex; }
@media (max-width: 1023px) {
  .ui-shell-navbar .navbar-sidebar-toggle { display: none; }
}
.ui-shell-navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.ui-shell-navbar__brand-logo { height: 28px; width: auto; }
.ui-shell-navbar__brand-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.navbar-session-email {
  font-size: var(--font-size-sm);
  color: color-mix(in srgb, var(--shell-navbar-fg) 85%, transparent);
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .navbar-session-email { display: none; }
}
.navbar-logout { margin: 0; }
.ui-shell-navbar .navbar-logout .ui-button {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--shell-navbar-fg) 30%, transparent);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: inherit;
  color: var(--shell-navbar-fg);
  background: transparent;
  box-shadow: none;
  &:hover:not(:disabled) {
    background: color-mix(in srgb, var(--shell-navbar-fg) 15%, transparent);
    color: var(--shell-navbar-fg);
  }
  &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
}


/* fulgore: ui/shell/sidebar.css */
.ui-shell-sidebar {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  bottom: 0;
  z-index: var(--z-raised);
  width: var(--sidebar-width);
  max-width: 80vw;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-subtle);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--easing-out);
  nav { display: flex; flex-direction: column; gap: var(--space-2); }
  &.is-compact, &.is-expanded { transform: translateX(0); }
}
@media (min-width: 1024px) {
  .ui-shell-sidebar {
    position: sticky;
    top: var(--navbar-height);
    left: auto;
    bottom: auto;
    height: calc(100dvh - var(--navbar-height));
    max-width: none;
    width: var(--sidebar-width);
    flex-shrink: 0;
    align-self: flex-start;
    box-shadow: none;
    transform: none;
    transition: width var(--duration-slow) var(--easing-out);
  }
  .ui-shell-sidebar.is-compact {
    width: var(--sidebar-compact-width);
    padding: var(--space-6) var(--space-3);
  }
  .ui-shell-sidebar.is-expanded { width: var(--sidebar-width); }
  .ui-shell-sidebar.is-compact .ui-shell-sidebar__link {
    justify-content: center;
    padding: var(--space-3);
  }
  .ui-shell-sidebar.is-compact .sidebar-link__label { display: none; }
  .ui-shell-sidebar.is-compact .sidebar-section__heading { display: none; }
  .ui-shell-sidebar.is-compact .sidebar-section.is-collapsed .sidebar-section__items { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-shell-sidebar,
  .ui-shell-sidebar .sidebar-section__toggle .svg { transition: none; }
}
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
}
.sidebar-section:first-of-type { padding-top: var(--space-2); }
.sidebar-section__heading { margin: 0; }
.sidebar-section__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) var(--space-3);
  border: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-subtle);
  background: transparent;
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing-default);
  .svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--easing-default);
  }
  &:hover { color: var(--color-text); }
  &:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
}
.sidebar-section.is-collapsed .sidebar-section__toggle .svg { transform: rotate(-90deg); }
.sidebar-section__items { display: flex; flex-direction: column; gap: var(--space-2); }
.sidebar-section.is-collapsed .sidebar-section__items { display: none; }
.ui-shell-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subtle);
  transition:
    background var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default);
  .svg { width: var(--icon-size-sm); height: var(--icon-size-sm); flex-shrink: 0; }
  &:hover:not(.ui-shell-sidebar__link--active) {
    background: var(--color-surface-raised);
    color: var(--color-text);
  }
  &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
}
.ui-shell-sidebar__link--active {
  background: var(--color-brand-surface);
  color: var(--color-brand);
  font-weight: var(--font-weight-semibold);
}
.sidebar-link__label { display: inline; }


/* fulgore: ui/skeleton_block.css */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.ui-skeleton-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ui-skeleton-block--card {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  gap: var(--space-3);
}

.ui-skeleton-block__title {
  height: 0.875rem;
  width: 45%;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-surface-raised) 25%,
    var(--color-surface-subtle) 50%,
    var(--color-surface-raised) 75%
  );
  background-size: 200%;
  animation: skeleton-shimmer 1.5s infinite;
  margin-bottom: var(--space-1);
}

.ui-skeleton-block__row {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  height: 2rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-surface-raised) 25%,
    var(--color-surface-subtle) 50%,
    var(--color-surface-raised) 75%
  );
  background-size: 200%;
  animation: skeleton-shimmer 1.5s infinite;
}

.ui-skeleton-block--card .ui-skeleton-block__row {
  height: 1.25rem;
}

.ui-skeleton-block__cell--wide {
  flex: 3;
}

.ui-skeleton-block__cell--narrow {
  flex: 1;
}


/* fulgore: ui/spinner.css */
.ui-spinner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-spinner::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-brand);
  border-radius: var(--radius-full);
  animation: spinner-spin var(--duration-slow) linear infinite;
}

@keyframes spinner-spin {
  to { transform: rotate(360deg); }
}

.spinner-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}


/* fulgore: ui/stat_grid.css */
/* ── Stat grid: reusable dt/dd key-value layout ── */

.ui-stat-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.ui-stat-grid__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  font-weight: var(--font-weight-medium);
  position: relative;
}

.ui-stat-grid__icon {
  font-size: var(--font-size-base);
}

.ui-stat-grid__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
  text-align: right;
}

/* ── Tooltip repositioning ── */

.ui-stat-grid .ui-help-tooltip__panel {
  top: calc(100% + var(--space-1));
  right: auto;
  left: 0;
  transform: none;
}


/* fulgore: ui/status_icon.css */
.ui-status-icon {
  font-size: var(--font-size-base);
  flex-shrink: 0;
  line-height: 1;
}


/* fulgore: ui/summary_row.css */
.ui-summary-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
}

.ui-summary-row--clickable {
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--easing-default);
}

.ui-summary-row--clickable:hover {
  background: var(--color-surface-subtle);
}

.ui-summary-row__icon {
  font-size: var(--font-size-base);
  flex-shrink: 0;
  line-height: 1;
}

.ui-summary-row__label {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-summary-row__dots {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.ui-summary-row__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
}

.ui-summary-row__dot--validated {
  background: var(--color-success);
}

.ui-summary-row__dot--pending {
  background: var(--color-warning);
}

.ui-summary-row__dot--rejected {
  background: var(--color-danger);
}

.ui-summary-row__dot--missing {
  background: var(--color-neutral-300);
}

.ui-summary-row__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}


/* fulgore: ui/tabs.css */
.ui-tabs__list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
  scrollbar-width: none;
}

.ui-tabs__list::-webkit-scrollbar {
  display: none;
}

.ui-tabs__tab {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing-default),
              border-color var(--duration-fast) var(--easing-default);
}

.ui-tabs__tab:hover {
  color: var(--color-text);
}

.ui-tabs__tab--active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

.ui-tabs__panel[hidden] {
  display: none;
}


/* fulgore: ui/timeline.css */
.ui-timeline {
  padding: var(--space-4) 0;
}

/* ── Track ── */

.ui-timeline__track {
  position: relative;
  height: 2rem;
  margin: 0 var(--space-6);
}

.ui-timeline__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border-strong);
  transform: translateY(-50%);
}

.ui-timeline__dot {
  position: absolute;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
  background: var(--color-neutral-400);
  border: 2px solid var(--color-surface);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.ui-timeline__dot--past {
  background: var(--color-brand);
}

.ui-timeline__today {
  position: absolute;
  top: 50%;
  width: 0.5rem;
  height: 1.25rem;
  background: var(--color-danger);
  border-radius: var(--radius-sm);
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* ── Labels ── */

.ui-timeline__labels {
  position: relative;
  margin: var(--space-2) var(--space-6) 0;
  height: 3.5rem;
}

.ui-timeline__label {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}

.ui-timeline__label-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.ui-timeline__label-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.ui-timeline__delay {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subtle);
  margin-top: var(--space-1);
}

.ui-timeline__delay--urgent {
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}


/* fulgore: ui/user_badge.css */
.ui-user-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-user-badge__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  color: var(--color-neutral-0);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ui-user-badge__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ui-user-badge__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-user-badge__email {
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-user-badge__avatar {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.ui-user-badge__you {
  color: var(--color-text-subtle);
  font-style: italic;
  font-size: var(--font-size-xs);
}

/* --- Tailles --- */

.ui-user-badge--sm .ui-user-badge__circle {
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--font-size-xs);
}

.ui-user-badge--sm .ui-user-badge__name {
  font-size: 0.8125rem;
}

.ui-user-badge--sm .ui-user-badge__email {
  font-size: var(--font-size-xs);
}

.ui-user-badge--md .ui-user-badge__circle {
  width: 2rem;
  height: 2rem;
  font-size: 0.8125rem;
}

.ui-user-badge--md .ui-user-badge__name {
  font-size: var(--font-size-sm);
}

.ui-user-badge--md .ui-user-badge__email {
  font-size: var(--font-size-xs);
}

.ui-user-badge--lg .ui-user-badge__circle {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--font-size-base);
}

.ui-user-badge--lg .ui-user-badge__name {
  font-size: var(--font-size-base);
}

.ui-user-badge--lg .ui-user-badge__email {
  font-size: var(--font-size-sm);
}


/* fulgore: ui/widgets/grid.css */
.ui-widgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-6);
  align-items: start;
}


/* admin/leads/destroy_modal.css */
.admin-leads-destroy-modal {
  /* base modal styling handled by fulgore */
}

.admin-leads-destroy-modal__icon {
  font-size: 2em;
  text-align: center;
  margin: 0;
}

.admin-leads-destroy-modal__warning {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.admin-leads-destroy-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}


/* admin/leads/index.css */
.admin-leads-index {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
}

.admin-leads-index > h1 {
  margin: 0;
}

.admin-leads-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-leads-index__list > li {
  display: contents;
}


/* admin/leads/row.css */
.admin-leads-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.admin-leads-row__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-leads-row__photo-indicator {
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.admin-leads-row__pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-leads-row__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-leads-row__received-at {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.admin-leads-row__contact {
  margin: 0;
  font-size: var(--font-size-sm);
}

.admin-leads-row__contact a {
  color: var(--color-brand);
  text-decoration: none;
}

.admin-leads-row__contact a:hover {
  text-decoration: underline;
}

.admin-leads-row__message {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .admin-leads-row {
    padding: 1.25rem;
    gap: 1rem;
  }
}


/* admin/leads/show.css */
.admin-leads-show {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
}

.admin-leads-show__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-leads-show__title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

.admin-leads-show__pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-leads-show__received-at,
.admin-leads-show__ip-address {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.admin-leads-show__contact,
.admin-leads-show__message,
.admin-leads-show__photo {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-leads-show__contact h2,
.admin-leads-show__message h2,
.admin-leads-show__photo h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.admin-leads-show__photo-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.admin-leads-show__email,
.admin-leads-show__phone {
  margin: 0;
  font-size: var(--font-size-base);
}

.admin-leads-show__email a,
.admin-leads-show__phone a {
  color: var(--color-brand);
  text-decoration: none;
}

.admin-leads-show__email a:hover,
.admin-leads-show__phone a:hover {
  text-decoration: underline;
}

.admin-leads-show__preferred-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-leads-show__preferred-slots h3 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.admin-leads-show__preferred-slots-content {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.admin-leads-show__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3) var(--space-4);
}

.admin-leads-show__facts dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.admin-leads-show__facts dd {
  margin: 0;
  color: var(--color-text-subtle);
}

.admin-leads-show__message-content {
  font-size: var(--font-size-base);
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--color-text);
}

.admin-leads-show .admin-leads-view-actions-destroy {
  margin-top: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .admin-leads-show {
    padding: var(--space-8);
  }

  .admin-leads-show__title {
    font-size: var(--font-size-3xl);
  }
}


/* admin/navigation/navbar.css */
.ui-shell-navbar__view-site {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  .svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }
}

.ui-shell-navbar__view-site-label {
  position: absolute;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* Mobile : marque compacte pour laisser tenir l'icône « Voir le site » +
   le bouton logout dans la barre sans débordement (mesuré à 390px). */
.ui-shell-navbar__brand-name {
  font-size: var(--font-size-sm);
}

@media (min-width: 1024px) {
  .ui-shell-navbar__view-site-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    white-space: normal;
    clip: auto;
    clip-path: none;
  }

  .ui-shell-navbar__brand-name {
    font-size: var(--font-size-lg);
  }
}


/* admin/navigation/sidebar.css */
/* Shell admin — ossature de layout + identité de barre.
   Le layout et le style du shell (navbar, sidebar, toggle, drawer, rail icônes)
   vivent dans la gem (UI::Shell::Navbar / UI::Shell::Sidebar). Ce sidecar ne
   porte que le scaffold flex du cockpit et les tokens d'identité du site. */

.admin-body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-subtle);

  /* Barre sombre propre au cockpit (défaut gem = --color-brand). */
  --shell-navbar-bg: var(--color-surface);
  --shell-navbar-fg: var(--color-text-inverted);
}

.admin-body #main {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
}

.admin-body #view {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--space-6);
}

/* Page container — centrer et limiter la largeur */
.admin-page {
  max-width: 72rem;
  margin: 0 auto;
}

.admin-page h1 {
  font-family: var(--font-family-display, "Fraunces", serif);
  margin-top: 0;
}

.admin-page__lede {
  color: var(--color-text-subtle);
}


/* admin/realisations/destroy_modal.css */
.admin-realisations-destroy-modal {
  /* base modal styling handled by fulgore */
}

.admin-realisations-destroy-modal__icon {
  font-size: 2em;
  text-align: center;
  margin: 0;
}

.admin-realisations-destroy-modal__warning {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.admin-realisations-destroy-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}


/* admin/realisations/index.css */
.admin-realisations-index {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
}

.admin-realisations-index > h1 {
  margin: 0;
}

.admin-realisations-index__actions {
  display: flex;
  gap: var(--space-4);
}

.admin-realisations-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-realisations-index__item {
  display: block;
}

.admin-realisations-index__item.sortable--dragging {
  opacity: 0.4;
}

.admin-realisations-index__ghost {
  border: 2px dashed var(--color-border);
  min-height: 64px;
  background-color: var(--color-brand-surface);
  border-radius: var(--radius-md);
  list-style: none;
}


/* admin/realisations/photos/consent_toggle.css */
.admin-realisations-photos-consent-toggle {
  display: inline-flex;
  align-items: center;
}

.admin-realisations-photos-consent-toggle form {
  margin: 0;
}

.admin-realisations-photos-consent-toggle[data-consent-state="granted"] .ui-button {
  color: var(--color-success);
}

.admin-realisations-photos-consent-toggle[data-consent-state="revoked"] .ui-button {
  color: var(--color-text-subtle);
}


/* admin/realisations/photos/grid.css */
.admin-realisations-photos-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-realisations-photos-grid h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  color: var(--color-text);
}

.admin-realisations-photos-grid__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.admin-realisations-photos-grid__consent-help {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-subtle);
  font-size: 0.85rem;
}

.admin-realisations-photos-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-realisations-photos-grid__ghost {
  border: 2px dashed var(--color-border);
  min-height: 180px;
  background-color: var(--color-brand-surface);
  border-radius: var(--radius-md);
}

.admin-realisations-photos-tile.sortable--dragging {
  opacity: 0.4;
}


/* admin/realisations/photos/pairs_section.css */
.admin-realisations-photos-pairs-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.admin-realisations-photos-pairs-section h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  color: var(--color-text);
}

.admin-realisations-photos-pairs-section__form {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.admin-realisations-photos-pairs-section__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 200px;
}

.admin-realisations-photos-pairs-section__field label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.admin-realisations-photos-pairs-section__field select {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.admin-realisations-photos-pairs-section__empty {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  margin: 0;
}

.admin-realisations-photos-pairs-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-realisations-photos-pairs-section__pair {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.admin-realisations-photos-pairs-section__pair-photos {
  display: flex;
  gap: var(--space-2);
}

.admin-realisations-photos-pairs-section__thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
}

.admin-realisations-photos-pairs-section__thumb-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.admin-realisations-photos-pairs-section__thumb figcaption {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  text-align: center;
}


/* admin/realisations/photos/tile.css */
.admin-realisations-photos-tile {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-photo);
  overflow: hidden;
  background-color: var(--color-surface);
}

.admin-realisations-photos-tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.admin-realisations-photos-tile__preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-realisations-photos-tile__grip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  background-color: rgba(0, 0, 0, 0.5);
  cursor: grab;
}

.admin-realisations-photos-tile__grip:active {
  cursor: grabbing;
}

.admin-realisations-photos-tile__media .ui-pill {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
}

.admin-realisations-photos-tile__bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface-subtle);
}

.admin-realisations-photos-tile__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.admin-realisations-photos-tile__actions form {
  margin: 0;
}


/* admin/realisations/row.css */
.admin-realisations-row {
  display: grid;
  grid-template-columns: 1rem 4rem 1fr;
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.admin-realisations-row__grip {
  display: inline-flex;
  grid-row: 1 / -1;
  align-items: center;
  padding-top: 0.15rem;
  color: var(--color-text-subtle);
  cursor: grab;
}

.admin-realisations-row__grip:active {
  cursor: grabbing;
}

.admin-realisations-row__cover {
  display: block;
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.admin-realisations-row__cover-image,
.admin-realisations-row__cover-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-realisations-row__cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);

  .svg {
    width: 45%;
    height: 45%;
    color: var(--color-text-subtle);
  }
}

.admin-realisations-row__title {
  grid-column: 3;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.admin-realisations-row__title a {
  color: var(--color-brand);
  text-decoration: none;
}

.admin-realisations-row__title a:hover {
  text-decoration: underline;
}

.admin-realisations-row__pills {
  grid-column: 3;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-realisations-row__meta {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-realisations-row__commune {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

@media (min-width: 768px) {
  .admin-realisations-row {
    padding: 1.25rem;
    column-gap: 1rem;
  }
}


/* admin/realisations/show.css */
.admin-realisations-show {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
}

.admin-realisations-show__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-realisations-show__title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

.admin-realisations-show__pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-realisations-show__actions {
  display: flex;
  gap: var(--space-3);
}

.admin-realisations-show__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3) var(--space-4);
}

.admin-realisations-show__facts dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.admin-realisations-show__facts dd {
  margin: 0;
  color: var(--color-text-subtle);
}

@media (min-width: 768px) {
  .admin-realisations-show {
    padding: var(--space-8);
  }

  .admin-realisations-show__title {
    font-size: var(--font-size-3xl);
  }
}


/* admin/site_contents/form.css */
/* La base fulgore `.ui-form` est `display: grid` sans `grid-template-columns`
   → colonne implicite `auto` = max-content. Les inputs ordinaires (min-content
   faible) tiennent, mais la barre des 7 onglets (`UI::Tabs`, boutons `nowrap`
   `flex-shrink:0` ≈ 755px) dimensionne la colonne à sa largeur intrinsèque →
   débordement horizontal en mobile. `minmax(0, 1fr)` laisse la colonne se
   réduire au conteneur ; la barre d'onglets scrolle déjà (overflow-x:auto). */
.admin-site-contents-form .ui-form {
  grid-template-columns: minmax(0, 1fr);
}

/* Les éditeurs Trix (`.ui-input__rich-text`) sont en `content-box` avec
   padding 12px + border 1px : en width intrinsèque ils débordent leur colonne
   de 36px (piège box-sizing — pas de reset global sur ce projet). `border-box`
   + `width:100%` les cale sur la largeur du champ. */
.admin-site-contents-form .ui-input__rich-text {
  box-sizing: border-box;
  width: 100%;
}

/* La barre d'outils Trix (~14 boutons `nowrap`) déborde sous ~360px : les
   boutons de droite (pièce jointe, annuler/refaire) sont coupés et hors
   d'atteinte. On laisse la rangée wrapper sur plusieurs lignes en mobile. */
.admin-site-contents-form trix-toolbar .trix-button-row {
  flex-wrap: wrap;
}

/* Icônes Trix cuites `fill=#000` dans le SVG data-URI → ~1.5:1 sur le thème
   sombre = quasi invisibles (défaut attrapé par l'axe visual-render
   `restLegibility`, 2026-07-21). Un token ne peut pas atteindre la couleur
   enfouie dans le SVG : on l'éclaircit via `filter`. `brightness(0) invert(1)`
   force l'encre à blanc quel que soit le fill/stroke ; combiné à l'opacity .6
   du stock, l'icône ressort à ~7:1 (AA). Scopé au form → spécificité (0,2,2)
   > règle stock non-scopée (0,1,3), gagne quelle que soit la feuille de base. */
.admin-site-contents-form trix-toolbar .trix-button--icon::before {
  filter: brightness(0) invert(1);
}

/* État actif (curseur dans du gras/italique) : le stock pose un fond CLAIR
   (#cbeefa) → on garde l'icône SOMBRE d'origine pour rester lisible dessus. */
.admin-site-contents-form trix-toolbar .trix-button--icon.trix-active::before {
  filter: none;
}


/* admin/widgets/quick_actions.css */
.admin-widgets-quick-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}


/* admin/widgets/recent_leads.css */
.admin-widgets-recent-leads {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-widgets-recent-leads__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-widgets-recent-leads__list > li {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

.admin-widgets-recent-leads__list > li:first-child {
  padding-top: 0;
}

.admin-widgets-recent-leads__list > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.admin-widgets-recent-leads .ui-link {
  align-self: flex-end;
  font-size: var(--font-size-sm);
}


/* admin/widgets/stat_bar.css */
.admin-widgets-stat-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
}

.admin-widgets-stat-bar .ui-metric-card {
  flex: 1 1 8rem;
  padding: var(--space-3);
  background: var(--color-surface-subtle);
}

.admin-widgets-stat-bar .ui-metric-card__label {
  font-size: var(--font-size-xs);
}

.admin-widgets-stat-bar .ui-metric-card__value {
  font-size: var(--font-size-lg);
}


/* auth/login_form.css */
.auth-login-form {
  max-width: 28rem;
  margin: var(--space-16) auto;
  display: grid;
  gap: var(--space-6);

  h2 {
    margin: 0;
  }

  form {
    display: grid;
    gap: var(--space-5);
  }

  .alert {
    color: var(--color-danger);
  }
}


/* marketing/contact_reminder_section.css */
/* Marketing::ContactReminderSection — Bande de rappel contact en fin d'accueil */

.marketing-contact-reminder-section {
  /* Box model */
  box-sizing: border-box;
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(2.4rem, 6vw, 4rem);
  border: 1px solid rgba(151, 204, 125, .32);
  border-radius: 20px;

  /* Typographie */
  text-align: center;

  /* Couleurs — panneau verre */
  background: radial-gradient(90% 120% at 50% -10%, rgba(121, 180, 95, .14), transparent 60%),
              rgba(18, 30, 20, .62);

  /* Autres */
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
}

.marketing-contact-reminder-section__body-text {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  text-align: center;
}

.marketing-contact-reminder-section__contact-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  align-items: center;
}

@media (min-width: 640px) {
  .marketing-contact-reminder-section__contact-links {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-5);
  }
}

.marketing-contact-reminder-section__link {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-brand);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-normal, 200ms) var(--easing-default, ease);
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marketing-contact-reminder-section__link:hover,
.marketing-contact-reminder-section__link:focus {
  border-bottom-color: var(--color-brand);
  outline: none;
}

.marketing-contact-reminder-section__link--phone,
.marketing-contact-reminder-section__link--email {
  font-weight: var(--font-weight-semibold);
}

.marketing-contact-reminder-section__cta-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

.marketing-contact-reminder-section__cta-button {
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-brand);
  color: var(--color-text-inverted);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  text-decoration: none;
  border-radius: 999px;
  transition: background-color var(--duration-normal, 200ms) var(--easing-default, ease),
              transform var(--duration-normal, 200ms) var(--easing-default, ease);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marketing-contact-reminder-section__cta-button:hover,
.marketing-contact-reminder-section__cta-button:focus {
  background-color: var(--color-brand-dark);
  outline: none;
}

.marketing-contact-reminder-section__cta-button:active {
  transform: scale(0.98);
}

/* Positionnement de Marketing::PricingReassurance dans le contexte du bandeau
   contact_reminder — layout centré, marge de séparation d'avec le CTA au-dessus. */
.marketing-contact-reminder-section .marketing-pricing-reassurance {
  margin-top: var(--space-3);
  text-align: center;
}


/* marketing/essonne_map.css */
/* Marketing::EssonneMap — sidecar consumer Azur & Lys.
   Silhouette SVG inline du 91 + 6 communes. Scopé sous
   .marketing-essonne-map uniquement — aucun sélecteur générique. */

.marketing-essonne-map {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

.marketing-essonne-map__svg {
  display: block;
  width: 100%;
  height: auto;
}

.marketing-essonne-map__outline {
  fill: color-mix(in srgb, var(--color-accent) 12%, transparent);
  stroke: var(--color-brand);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.marketing-essonne-map__dot {
  fill: var(--color-accent);
}

.marketing-essonne-map__label {
  paint-order: stroke;
  font-family: var(--font-family-display);
  font-size: 11px;
  font-weight: 600;
  fill: var(--color-text);
  stroke: var(--color-surface);
  stroke-width: 3px;
}


/* marketing/geoffrey_teaser_section.css */
/* Marketing::GeoffreyTeaserSection — sidecar consumer Azur & Lys.
   Teaser bio accueil (bloc 7 ossature §2.D) : photo + copie + CTA « En savoir
   plus sur Geoffrey ». Photo réelle de Geoffrey. Scopé sous
   .marketing-geoffrey-teaser-section uniquement — aucun sélecteur générique. */

.marketing-geoffrey-teaser-section {
  padding-block: var(--section-gap);
}

.marketing-geoffrey-teaser-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .marketing-geoffrey-teaser-section__content {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }
}

.marketing-geoffrey-teaser-section__photo {
  position: relative;
  flex-shrink: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .marketing-geoffrey-teaser-section__photo {
    min-width: 280px;
    width: 280px;
  }
}

.marketing-geoffrey-teaser-section__photo-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-photo);
}

.marketing-geoffrey-teaser-section__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-photo);
  background: linear-gradient(to bottom, transparent 55%, var(--color-surface) 100%);
  pointer-events: none;
}

.marketing-geoffrey-teaser-section__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}

@media (min-width: 768px) {
  .marketing-geoffrey-teaser-section__text {
    gap: var(--space-6);
  }
}

.marketing-geoffrey-teaser-section__quote {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.3;
  color: var(--color-text);
  position: relative;
  padding-inline-start: var(--space-4);
}

.marketing-geoffrey-teaser-section__quote::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .2em;
  bottom: .2em;
  width: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

.marketing-geoffrey-teaser-section__body-text p {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
}

.marketing-geoffrey-teaser-section__cta {
  align-self: flex-start;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  text-decoration: none;
  border-bottom: 2px solid var(--color-brand);
  transition: opacity var(--duration-fast, 100ms) var(--easing-default, ease),
              border-color var(--duration-fast, 100ms) var(--easing-default, ease);
}

.marketing-geoffrey-teaser-section__cta:hover {
  opacity: 0.8;
  border-color: var(--color-brand-light);
}

.marketing-geoffrey-teaser-section__cta:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 2px;
}


/* marketing/hero_section.css */
/* Marketing::HeroSection — sidecar consumer Azur & Lys.
   Thème "Nocturne jardin" : photo pleine largeur en bandeau haut (bord à
   bord, gutter porté par le `__band-inner` — pas la racine), puis contenu
   sombre en dessous (`__below`) sur `--color-surface`. Overlay linéaire
   plus opaque à gauche (côté texte) qu'à droite pour garantir le contraste
   AAA sur H1/aside clairs quel que soit le clair de l'image source.
   Scopé sous .marketing-hero-section uniquement — aucun sélecteur global. */

.marketing-hero-section {
  background: var(--color-surface);
}

/* Bande photo pleine largeur (bord à bord — le gutter est porté par les
   inner, pas la racine). La photo vit dans un calque déplaçable `__band-bg`
   (parallax) ; le gradient de contraste passe en overlay fixe `::after`. */
.marketing-hero-section__band {
  position: relative;
  overflow: hidden;
}

/* Calque photo déplacé en translate3d par le parallax_controller. Déborde de
   15% haut/bas (inset -15% 0) pour que la translation ne révèle aucun bord
   vide ; overflow:hidden de `__band` clippe le débord. */
.marketing-hero-section__band-bg {
  position: absolute;
  inset: -15% 0;
  z-index: 0;
  background-image: url("/assets/marketing/hero-forest-fca959c0.webp");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Gradient de contraste (plus opaque à gauche, côté texte) — fixe, au-dessus
   de la photo, sous le contenu. */
.marketing-hero-section__band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.66) 0%,
    rgba(0, 0, 0, 0.40) 44%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

.marketing-hero-section__band-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: var(--space-6);
  padding: clamp(2.2rem, 5vw, 3.6rem) var(--gutter);
}

@media (min-width: 768px) {
  .marketing-hero-section__band-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
  }
}

.marketing-hero-section__head {
  min-width: 0;
}

.marketing-hero-section__emblem {
  display: block;
  height: clamp(72px, 10vw, 96px);
  width: auto;
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.marketing-hero-section__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-family-display);
  font-size: clamp(2.4rem, 5.6vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
  color: var(--color-text);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.marketing-hero-section__aside {
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .marketing-hero-section__aside {
    justify-content: flex-end;
  }
}

/* Encart absent (ENV SAP non défini → composant vide) : la colonne s'efface. */
.marketing-hero-section__aside:empty {
  display: none;
}

/* Contenu sous la photo — fond sombre. */
.marketing-hero-section__below {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(1.9rem, 4vw, 2.6rem) var(--gutter) clamp(2.6rem, 6vw, 3.8rem);
}

.marketing-hero-section__subtitle {
  margin: 0;
  max-width: 46ch;
  font-family: var(--font-family-base);
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  color: var(--color-text-subtle);
}

.marketing-hero-section__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.marketing-hero-section__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--color-surface);
  background: var(--color-brand);
  transition: background var(--duration-fast) var(--easing-default, ease),
              border-color var(--duration-fast) var(--easing-default, ease),
              color var(--duration-fast) var(--easing-default, ease);
}

.marketing-hero-section__cta:hover {
  background: var(--color-brand-dark);
}

.marketing-hero-section__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.marketing-hero-section__cta--ghost {
  background: transparent;
  border-color: rgba(151, 204, 125, 0.32);
  color: var(--color-text);
}

.marketing-hero-section__cta--ghost:hover {
  border-color: var(--color-brand-light);
  background: rgba(151, 204, 125, 0.08);
}

/* Positionnement de Marketing::PricingReassurance dans le contexte hero
   (styles intrinsèques dans le sidecar du composant lui-même — on ne le
   style pas ici au-delà du flow naturel du `__below`). */

.marketing-hero-section__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--color-text-subtle);
}

.marketing-hero-section__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.marketing-hero-section__trust-item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}


/* marketing/homepage.css */
/* Marketing::Homepage — gutter latéral partagé de toutes les sections d'accueil.
   Racine de l'escalier (retour JC 2026-07-17, mesuré par l'axe QA sectionInsetStaircase) :
   seul le hero portait un padding-inline ; les sections BaseSection en avaient zéro
   → bords-gauche divergents. On centralise le gutter ici pour aligner tous les
   contenus sur le même inset que le hero. */
.marketing-homepage > * {
  padding-inline: var(--gutter);
}

/* Filets fins entre les sections de la home (séparateurs, repris de la maquette).
   Un border-top full-width sur chaque section délimite chaque paire consécutive
   (hero↔chiffres via la 1re, puis entre toutes). Le panneau contact verre est
   exclu : il porte déjà sa propre bordure de verre, un filet la casserait. */
.marketing-homepage > *:not(.marketing-contact-reminder-section) {
  border-top: 1px solid var(--color-border);
}


/* marketing/key_figures_section.css */
/* Marketing::KeyFiguresSection — bande "chiffres clés" (4 cartes verre), posée
   en enfant direct de Marketing::Homepage. Thème Nocturne jardin : reprend
   exactement le gabarit carte verre de sap_reassurance_line.css (translucide
   vert foncé + blur + bord brand lumineux) pour cohérence visuelle.
   Pas de padding-inline / max-width ici : le gutter horizontal est déjà
   fourni par .marketing-homepage > * { padding-inline: var(--gutter); }.
   Tout scopé sous .marketing-key-figures-section. */

.marketing-key-figures-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
  padding-block: var(--section-gap);
}

@media (min-width: 768px) {
  .marketing-key-figures-section {
    grid-template-columns: repeat(4, 1fr);
  }
}

.marketing-key-figures-section__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  background: rgba(18, 30, 20, 0.62);
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  border: 1px solid rgba(151, 204, 125, 0.32);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.marketing-key-figures-section__figure {
  font-family: var(--font-family-display);
  font-size: clamp(2rem, 4.5vw, 2.7rem);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-light);
}

.marketing-key-figures-section__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: var(--color-text);
}

.marketing-key-figures-section__foot {
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-subtle);
}


/* marketing/prestation_detail.css */
/* Marketing::PrestationDetail — sidecar consumer Azur & Lys.
   Bloc riche par prestation sur /prestations, ciblé par ancre (#<clé>).
   Thème "Nocturne jardin" : reprend le mask-icon or de PrestationsSection,
   la grille de tuiles de Realisations::Gallery, et le CTA bespoke du Hero.
   Scopé sous .marketing-prestation-detail uniquement — aucun sélecteur
   générique. */

.marketing-prestation-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);

  padding-block: var(--section-gap);

  /* Cible d'ancre (/prestations#entretien) sous navbar sticky
     (.public-navigation-navbar : position sticky, top 0, min-height 64px
     + border-bottom 1px ; pas de token de hauteur navbar exposé). 5rem
     (80px) couvre la navbar avec une marge de respiration pour que le
     titre ne colle pas sous la barre au scroll d'ancre. */
  scroll-margin-top: 5rem;
}

.marketing-prestation-detail__icon {
  display: block;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-accent);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.marketing-prestation-detail__icon[data-key="amenagement"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 14c-1-3-4-4.5-7-4 0 3 3 4.5 7 4z'/%3E%3Cpath d='M12 12c1-2.6 3.6-4 6-3.5 0 2.6-2.6 4-6 3.5z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 14c-1-3-4-4.5-7-4 0 3 3 4.5 7 4z'/%3E%3Cpath d='M12 12c1-2.6 3.6-4 6-3.5 0 2.6-2.6 4-6 3.5z'/%3E%3C/svg%3E");
}

.marketing-prestation-detail__icon[data-key="entretien"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='2.4'/%3E%3Ccircle cx='6' cy='17' r='2.4'/%3E%3Cpath d='M8.1 8.4 19 16.5'/%3E%3Cpath d='M8.1 15.6 19 7.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='2.4'/%3E%3Ccircle cx='6' cy='17' r='2.4'/%3E%3Cpath d='M8.1 8.4 19 16.5'/%3E%3Cpath d='M8.1 15.6 19 7.5'/%3E%3C/svg%3E");
}

.marketing-prestation-detail__icon[data-key="architecture"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4v15h15z'/%3E%3Cpath d='M5 10h4'/%3E%3Cpath d='M5 14h7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4v15h15z'/%3E%3Cpath d='M5 10h4'/%3E%3Cpath d='M5 14h7'/%3E%3C/svg%3E");
}

.marketing-prestation-detail__desc p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-subtle);
}

.marketing-prestation-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 640px) {
  .marketing-prestation-detail__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .marketing-prestation-detail__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.marketing-prestation-detail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  box-sizing: border-box;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--color-surface);
  background: var(--color-brand);
  transition: background var(--duration-fast) var(--easing-default, ease),
              border-color var(--duration-fast) var(--easing-default, ease),
              color var(--duration-fast) var(--easing-default, ease);
}

.marketing-prestation-detail__cta:hover {
  background: var(--color-brand-dark);
}

.marketing-prestation-detail__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* marketing/prestations_section.css */
/* Marketing::PrestationsSection — sidecar consumer Azur & Lys.
   Thème "Nocturne jardin" : surfaces sombres, accent or sur l'icône
   placeholder, hover discret en brand. Scopé sous .marketing-prestations-section
   uniquement — aucun sélecteur générique. */

.marketing-prestations-section {
  padding-block: var(--section-gap);
}

.marketing-prestations-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .marketing-prestations-section__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.marketing-prestations-section__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
  color: var(--color-text);
  transition: border-color var(--duration-fast, 100ms) var(--easing-default, ease),
    transform var(--duration-fast, 100ms) var(--easing-default, ease),
    box-shadow var(--duration-fast, 100ms) var(--easing-default, ease);
}

.marketing-prestations-section__card:hover {
  transform: translateY(-3px);
  border-color: var(--color-brand);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.marketing-prestations-section__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(121, 180, 95, 0.08), transparent 55%);
  transition: opacity var(--duration-fast) var(--easing-default, ease);
  pointer-events: none;
}

.marketing-prestations-section__card:hover::after {
  opacity: 1;
}

.marketing-prestations-section__icon-wrap {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  border: 1px solid rgba(200, 162, 74, 0.3);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(200, 162, 74, 0.22), rgba(200, 162, 74, 0.06));
}

.marketing-prestations-section__icon {
  display: block;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-accent);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.marketing-prestations-section__icon[data-key="amenagement"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 14c-1-3-4-4.5-7-4 0 3 3 4.5 7 4z'/%3E%3Cpath d='M12 12c1-2.6 3.6-4 6-3.5 0 2.6-2.6 4-6 3.5z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 14c-1-3-4-4.5-7-4 0 3 3 4.5 7 4z'/%3E%3Cpath d='M12 12c1-2.6 3.6-4 6-3.5 0 2.6-2.6 4-6 3.5z'/%3E%3C/svg%3E");
}

.marketing-prestations-section__icon[data-key="entretien"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='2.4'/%3E%3Ccircle cx='6' cy='17' r='2.4'/%3E%3Cpath d='M8.1 8.4 19 16.5'/%3E%3Cpath d='M8.1 15.6 19 7.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='2.4'/%3E%3Ccircle cx='6' cy='17' r='2.4'/%3E%3Cpath d='M8.1 8.4 19 16.5'/%3E%3Cpath d='M8.1 15.6 19 7.5'/%3E%3C/svg%3E");
}

.marketing-prestations-section__icon[data-key="architecture"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4v15h15z'/%3E%3Cpath d='M5 10h4'/%3E%3Cpath d='M5 14h7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4v15h15z'/%3E%3Cpath d='M5 10h4'/%3E%3Cpath d='M5 14h7'/%3E%3C/svg%3E");
}

.marketing-prestations-section__label {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
}

.marketing-prestations-section__label-link {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast, 100ms) var(--easing-default, ease);
}

.marketing-prestations-section__label-link:hover,
.marketing-prestations-section__label-link:focus-visible {
  color: var(--color-brand-light);
}

.marketing-prestations-section__label-link:focus-visible {
  outline: 2px solid var(--color-brand-light);
  outline-offset: 2px;
}

.marketing-prestations-section__desc p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-subtle);
}

.marketing-prestations-section__more {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-brand-light);
  text-decoration: none;
  transition: color var(--duration-fast, 100ms) var(--easing-default, ease);
}

.marketing-prestations-section__more::after {
  content: " →";
}

.marketing-prestations-section__more:hover,
.marketing-prestations-section__more:focus-visible {
  color: var(--color-brand);
}


/* marketing/pricing_reassurance.css */
/* Marketing::PricingReassurance — Ligne de réassurance prix (devis gratuit + forfait).
   Réutilisée à 4 points de conversion (hero accueil, section prestations, bandeau
   contact_reminder, page /contact). Positionnement (margin, alignment) laissé aux
   sidecars parents via le sélecteur `.marketing-pricing-reassurance`. */

.marketing-pricing-reassurance {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm, 0.9375rem);
  color: var(--color-text-subtle);
  letter-spacing: 0.01em;
}


/* marketing/realisations_teaser_section.css */
/* Marketing::RealisationsTeaserSection — sidecar consumer Azur & Lys.
   Bloc teaser "Nos dernières réalisations" : galerie 2/4 cols de photos
   avec titre + commune, hover discret, CTA. Scopé sous
   .marketing-realisations-teaser-section uniquement — aucun sélecteur
   générique. */

.marketing-realisations-teaser-section {
  padding-block: var(--section-gap);
}

.marketing-realisations-teaser-section__content {
  width: 100%;
}

.marketing-realisations-teaser-section__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .marketing-realisations-teaser-section__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
  }

  .marketing-realisations-teaser-section__card--feat {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
}

.marketing-realisations-teaser-section__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 4/3;
  border: 1px solid var(--color-border);
  transition: border-color var(--duration-fast, 100ms) var(--easing-default, ease),
              transform var(--duration-fast, 100ms) var(--easing-default, ease),
              box-shadow var(--duration-fast, 100ms) var(--easing-default, ease);
}

.marketing-realisations-teaser-section__card:hover {
  border-color: var(--color-brand-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.marketing-realisations-teaser-section__card-link {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: inherit;
  z-index: 1;
}

.marketing-realisations-teaser-section__card-link:focus-visible {
  outline: 2px solid var(--color-brand-light);
  outline-offset: -2px;
}

.marketing-realisations-teaser-section__picture {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.marketing-realisations-teaser-section__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.marketing-realisations-teaser-section__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  color: var(--color-text-inverted);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.marketing-realisations-teaser-section__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  margin: 0;
  display: block;
}

.marketing-realisations-teaser-section__card--feat .marketing-realisations-teaser-section__title {
  font-size: var(--font-size-lg);
}

.marketing-realisations-teaser-section__commune {
  font-size: var(--font-size-xs);
  font-weight: normal;
  line-height: 1.4;
  margin: 0;
  display: block;
  opacity: 0.9;
}

.marketing-realisations-teaser-section__cta-wrapper {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-6);
}

.marketing-realisations-teaser-section__cta {
  color: var(--color-brand);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border-bottom: 2px solid var(--color-brand);
  opacity: 1;
  transition: color var(--duration-fast, 100ms) var(--easing-default, ease),
              border-color var(--duration-fast, 100ms) var(--easing-default, ease);
}

.marketing-realisations-teaser-section__cta:hover {
  color: var(--color-brand-light);
  border-bottom-color: var(--color-brand-light);
  opacity: 1;
}

.marketing-realisations-teaser-section__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* marketing/sap_conditions_section.css */
/* Marketing::SapConditionsSection — Bloc conditions SAP en fin de page prestations */

.marketing-sap-conditions-section {
  background-color: var(--color-surface-subtle);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

@media (min-width: 768px) {
  .marketing-sap-conditions-section {
    padding: var(--space-12) var(--space-6);
  }
}

.marketing-sap-conditions-section__body-text {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.marketing-sap-conditions-section__declaration {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: var(--space-5);
  font-weight: var(--font-weight-medium);
}

.marketing-sap-conditions-section__number {
  color: var(--color-brand);
  font-weight: var(--font-weight-semibold);
}

.marketing-sap-conditions-section__disclaimer {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  line-height: 1.5;
  margin-top: var(--space-4);
}


/* marketing/sap_reassurance_line.css */
/* Marketing::SapReassuranceLine — carte glass crédit d'impôt, posée à droite du hero.
   Retour JC 2026-07-17 : info clef mise en évidence, style nocturne (translucide vert
   foncé + bord brand lumineux), remplace l'ancien bandeau mint pleine largeur. */

.marketing-sap-reassurance-line {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 17rem;
  padding: var(--space-4) var(--space-5);
  background: rgba(18, 30, 20, 0.62);
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  border: 1px solid rgba(151, 204, 125, 0.32);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.marketing-sap-reassurance-line__label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-light);
}

.marketing-sap-reassurance-line__percent {
  font-family: var(--font-family-display);
  font-size: 2.5rem;
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-light);
}

.marketing-sap-reassurance-line__body {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text);
}

.marketing-sap-reassurance-line__foot {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}


/* marketing/sequential_video_section.css */
/* Marketing::SequentialVideoSection — deux vidéos avant/après enchaînées.
   Poster clic-to-play + <video> 16/9. Scopé sous
   .marketing-sequential-video-section uniquement. */

.marketing-sequential-video-section {
  padding-block: var(--section-gap);
}

.marketing-sequential-video-section__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 720px;
  margin-inline: auto;
  border-radius: var(--radius-photo);
  overflow: hidden;
  border: 1px solid rgba(151, 204, 125, .32);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}

.marketing-sequential-video-section__poster {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  background: none;
}

.marketing-sequential-video-section__poster:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.marketing-sequential-video-section__poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marketing-sequential-video-section__play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(151, 204, 125, .32);
  font-size: var(--font-size-base);
  color: var(--color-brand-light);
  background: rgba(18, 30, 20, .62);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  pointer-events: none;
  transition: opacity var(--duration-fast, 100ms) var(--easing-default, ease),
    transform var(--duration-fast, 100ms) var(--easing-default, ease);
}

.marketing-sequential-video-section__poster:hover .marketing-sequential-video-section__play-icon,
.marketing-sequential-video-section__poster:focus-visible .marketing-sequential-video-section__play-icon {
  opacity: 0.85;
  transform: scale(1.06);
}

/* display:block seulement quand visible — sinon il écraserait l'attribut
   `hidden` (UA [hidden]{display:none}) et la vidéo s'afficherait sous le poster
   avant tout clic. Le contrôleur retire `hidden` au play. */
.marketing-sequential-video-section__video:not([hidden]) {
  display: block;
}

.marketing-sequential-video-section__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  background: #000;
}


/* marketing/service_area_section.css */
/* Marketing::ServiceAreaSection — sidecar consumer Azur & Lys.
   Zone d'intervention Essonne (91). Source i18n unique
   public.service_area.* (verrou anti-DS-A2). Scopé sous
   .marketing-service-area-section uniquement — aucun sélecteur générique. */

.marketing-service-area-section {
  padding-block: var(--section-gap);
}

.marketing-service-area-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .marketing-service-area-section__body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-6);
  }
}

.marketing-service-area-section__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.marketing-service-area-section__intro {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
}

.marketing-service-area-section__department {
  margin: 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--color-accent);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}



/* marketing/timelapse_section.css */
/* Marketing::TimelapseSection — sidecar consumer Azur & Lys.
   Section « chantier en accéléré » (bloc timelapse accueil) : 2 branches —
   lecteur poster+<video> clic-to-play quand video_src fourni, sinon
   placeholder voyant (vidéos réelles gated par consentement client, cf.
   TIMELAPSE-0). Scopé sous .marketing-timelapse-section uniquement —
   aucun sélecteur générique. */

.marketing-timelapse-section {
  padding-block: var(--section-gap);
}

.marketing-timelapse-section__figure,
.marketing-timelapse-section__placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 720px;
  margin-inline: auto;
}

.marketing-timelapse-section__poster {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  background: none;
}

.marketing-timelapse-section__poster:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.marketing-timelapse-section__poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marketing-timelapse-section__play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--space-8);
  height: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, black 45%, transparent);
  color: var(--color-text-inverted, #fff);
  font-size: var(--font-size-base);
  pointer-events: none;
  transition: opacity var(--duration-fast, 100ms) var(--easing-default, ease);
}

.marketing-timelapse-section__poster:hover .marketing-timelapse-section__play-icon,
.marketing-timelapse-section__poster:focus-visible .marketing-timelapse-section__play-icon {
  opacity: 0.85;
}

.marketing-timelapse-section__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  background: #000;
}

.marketing-timelapse-section__poster--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-brand-light);
  background: var(--color-surface-subtle, var(--color-brand-surface));
  cursor: default;
}

.marketing-timelapse-section__badge {
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.marketing-timelapse-section__note {
  margin: 0;
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-text-subtle);
}


/* public/layouts/footer.css */
.public-layouts-footer {
  /* Layout */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);

  /* Box model */
  padding-block: var(--section-gap);
  padding-inline: var(--gutter);
  border-top: 1px solid var(--color-border);

  /* Couleurs */
  color: var(--color-text-subtle);
  background: var(--color-surface-subtle);
}

.public-layouts-footer__tagline {
  /* Box model */
  margin: 0;
  max-width: 60ch;
}

.public-layouts-footer__contact {
  /* Layout */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.public-layouts-footer__contact-item {
  /* Box model */
  margin: 0;
}

.public-layouts-footer__email,
.public-layouts-footer__facebook {
  /* Typographie */
  text-decoration: none;

  /* Couleurs */
  color: var(--color-text-subtle);

  /* Autres */
  transition: color var(--duration-fast) var(--easing-default);
}

.public-layouts-footer__email:hover,
.public-layouts-footer__facebook:hover {
  color: var(--color-text);
}

.public-layouts-footer__legal {
  /* Layout */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.public-layouts-footer__legal-item:not(:last-child)::after {
  /* Séparateur visuel léger entre items légaux — --color-text-disabled
     (dim mais ≥3:1 sur --color-surface-subtle) ; --color-border tombait
     à 1.3:1, invisible (axe restLegibility 2026-07-21). */
  content: "·";
  margin-inline-start: var(--space-3);
  color: var(--color-text-disabled);
}

/* Items légaux devenus liens (mentions + confidentialité, B-LEGAL) : même
   registre discret que les liens de contact, pas de bleu souligné par défaut. */
a.public-layouts-footer__legal-item {
  text-decoration: none;
  color: var(--color-text-subtle);
  transition: color var(--duration-fast) var(--easing-default);
}

a.public-layouts-footer__legal-item:hover {
  color: var(--color-text);
}

/* Item légal inerte (bannière cookies pas encore en place) : neutralise
   toute affordance de lien hérité de __legal-item, reste aligné dans la
   liste sans paraître cliquable. */
.public-layouts-footer__legal-item--inert {
  color: var(--color-text-disabled);
  cursor: default;
}

.public-layouts-footer__legal-item--inert:hover {
  color: var(--color-text-disabled);
  text-decoration: none;
}

.public-layouts-footer__copyright {
  /* Box model */
  margin: 0;

  /* Typographie */
  font-size: var(--font-size-sm);
}


/* public/navigation/navbar.css */
/* ============================================================
   NAVBAR — Public navigation header (bespoke, Azur & Lys)
   Sticky header sombre : logo, menu en pilules, CTA devis,
   burger mobile (fulgore UI::MenuToggle). Mobile-first : menu
   masqué derrière le hamburger, panneau overlay pleine largeur
   à l'ouverture ; desktop (>=768px) menu en ligne toujours visible.
   ============================================================ */

.public-navigation-navbar {
  /* Layout */
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);

  /* Box model */
  border-bottom: 1px solid var(--color-border);

  /* Couleurs */
  background: var(--color-surface);
}

.public-navigation-navbar.is-scrolled {
  box-shadow: var(--shadow-md);
}

.public-navigation-navbar__container {
  /* Layout */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  min-height: 64px;

  /* Box model */
  padding-inline: var(--gutter);
}

@media (min-width: 900px) {
  .public-navigation-navbar__container {
    gap: var(--space-4);
  }
}

/* Logo — marque à gauche, ne rétrécit jamais */
.public-navigation-navbar__logo {
  /* Layout */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;

  /* Typographie */
  text-decoration: none;

  /* Couleurs */
  color: var(--color-text);
}

.public-navigation-navbar__logo-img {
  height: 40px;
  width: auto;
}

.public-navigation-navbar__logo-name {
  /* Typographie */
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;

  /* Couleurs */
  color: var(--color-text);
}

@media (max-width: 479px) {
  .public-navigation-navbar__logo-name {
    display: none;
  }
}

/* Menu — masqué mobile, panneau overlay à l'ouverture */
.public-navigation-navbar__menu {
  display: none;
}

.public-navigation-navbar__menu.is-open {
  /* Layout */
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  /* Box model */
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);

  /* Couleurs */
  background: var(--color-surface);
}

.public-navigation-navbar__list {
  /* Layout */
  display: flex;
  align-items: center;
  gap: var(--space-2);

  /* Box model */
  margin: 0;
  padding: 0;
}

.public-navigation-navbar__menu.is-open .public-navigation-navbar__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.public-navigation-navbar__item {
  list-style: none;
}

/* Lien — pilule pleine, jamais de soulignement dégradé */
.public-navigation-navbar__link {
  /* Layout */
  display: inline-block;

  /* Box model */
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;

  /* Typographie */
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;

  /* Couleurs */
  color: var(--color-text);

  /* Autres */
  transition: background var(--duration-fast) var(--easing-default);
}

.public-navigation-navbar__link:hover,
.public-navigation-navbar__link:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  outline: none;
}

.public-navigation-navbar__link:focus-visible {
  box-shadow: var(--focus-ring);
}

.public-navigation-navbar__link--active {
  background: rgba(255, 255, 255, 0.25);
  font-weight: var(--font-weight-semibold);
}

/* Panneau ouvert mobile — liens en blocs pleine largeur, cibles tactiles généreuses */
.public-navigation-navbar__menu.is-open .public-navigation-navbar__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: 0;
}

/* CTA — pilule verte */
.public-navigation-navbar__cta {
  /* Layout — mobile-first : centré dans la barre (les margins auto absorbent
     l'espace des deux côtés → logo à gauche, CTA centré, burger à droite).
     Réinitialisé en desktop (>=900px) où le CTA suit le menu inline. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-inline: auto;

  /* Box model — box-sizing explicite : pas de reset global dans ce projet,
     sans lui min-height 38px + padding vertical rendrait ~54px (content-box). */
  box-sizing: border-box;
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;

  /* Typographie — taille alignée sur les liens du menu (cohérence de rythme) */
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;

  /* Couleurs — texte sombre sur le vert brand */
  color: var(--color-surface);
  background: var(--color-brand);

  /* Autres */
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default);
}

.public-navigation-navbar__cta:hover {
  background: var(--color-brand-dark);
}

.public-navigation-navbar__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Burger — visible en mobile, masqué en desktop. Calibrage de l'icône
   :bars fournie par UI::MenuToggle (fulgore), le SVG n'a pas de
   width/height intrinsèque. */
.public-navigation-navbar .ui-menu-toggle {
  color: var(--color-text);
  flex-shrink: 0;
}

.public-navigation-navbar .ui-menu-toggle .svg {
  height: var(--space-5);
  width: auto;
}

/* Desktop — menu en ligne toujours visible, burger masqué */
@media (min-width: 900px) {
  .public-navigation-navbar__menu {
    display: flex;
    position: static;
    padding: 0;
    border: none;
    background: none;
  }

  .public-navigation-navbar__menu.is-open .public-navigation-navbar__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
  }

  .public-navigation-navbar__menu.is-open .public-navigation-navbar__link {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
  }

  .public-navigation-navbar .ui-menu-toggle {
    display: none;
  }

  /* Desktop : le CTA suit le menu inline, pas de centrage auto */
  .public-navigation-navbar__cta {
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-navigation-navbar__link,
  .public-navigation-navbar__cta {
    transition: none;
  }
}


/* public/pages/about.css */
/* Public::Pages::About — page parcours (carte PARCOURS). Portrait :
   photo réelle de Geoffrey. */

.public-pages-about {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 48rem;
  margin-inline: auto;
  padding-block: var(--section-gap);
  padding-inline: var(--gutter);
}

.public-pages-about__title {
  margin: 0;
}

.public-pages-about__lead {
  max-width: 40rem;
}

.public-pages-about__lead p {
  color: var(--color-text-subtle);
  font-size: var(--font-size-lg);
  line-height: 1.6;
}

.public-pages-about__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.public-pages-about__block-title {
  margin: 0;
}

.public-pages-about__block-body {
  min-width: 0;
}

.public-pages-about__block-body p {
  color: var(--color-text);
  line-height: 1.6;
}

.public-pages-about__parcours-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .public-pages-about__parcours-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-8);
  }
}

.public-pages-about__portrait {
  position: relative;
  flex-shrink: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .public-pages-about__portrait {
    width: 220px;
    min-width: 220px;
  }
}

.public-pages-about__portrait-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-photo);
}

.public-pages-about__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-photo);
  background: linear-gradient(to bottom, transparent 55%, var(--color-surface) 100%);
  pointer-events: none;
}


/* public/pages/confidentialite.css */
/* Public::Pages::Confidentialite — page politique de confidentialité
   (carte B-LEGAL). Liste structurée des données collectées. */

.public-pages-confidentialite {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 48rem;
  margin-inline: auto;
  padding-block: var(--section-gap);
  padding-inline: var(--gutter);
}

.public-pages-confidentialite__title {
  margin: 0;
}

.public-pages-confidentialite__lead {
  margin: 0;
  max-width: 40rem;
  color: var(--color-text-subtle);
  font-size: var(--font-size-lg);
  line-height: 1.6;
}

.public-pages-confidentialite__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.public-pages-confidentialite__block-title {
  margin: 0;
}

.public-pages-confidentialite__block-body {
  min-width: 0;
}

.public-pages-confidentialite__block-body p {
  color: var(--color-text);
  line-height: 1.6;
}

.public-pages-confidentialite__block-body li {
  color: var(--color-text);
  line-height: 1.6;
}


/* public/pages/contact.css */
.public-pages-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 48rem;
  margin-inline: auto;
  padding-block: var(--section-gap);
  padding-inline: var(--gutter);
}

.public-pages-contact h1 {
  margin: 0;
}

.public-pages-contact__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
}

.public-pages-contact__contact-item {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-default);
}

.public-pages-contact__contact-item:hover {
  color: var(--color-brand);
}

.public-pages-contact__contact-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.public-pages-contact__zone {
  margin: 0;
  color: var(--color-text-subtle);
}

.public-pages-contact__form {
  margin-top: var(--space-4);
}

.public-pages-contact__cta-rdv {
  align-self: flex-start;
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  text-decoration: none;
}

.public-pages-contact__cta-rdv:hover {
  text-decoration: underline;
}

/* Positionnement de Marketing::PricingReassurance dans le contexte /contact
   (juste sous le h1 — marge de séparation pour éviter le collage). */
.public-pages-contact .marketing-pricing-reassurance {
  margin-top: var(--space-3);
}

/* Mobile — le hero photo sort de la gouttière + du padding-top de l'article
   pour occuper tout l'écran (full-bleed, flush sous la navbar). Sur desktop
   (>768px) l'article est capé à 48rem centré : le hero reste dans ce cadre. */
@media (max-width: 768px) {
  .public-pages-contact .public-pages-hero-banner {
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    margin-top: calc(-1 * var(--section-gap));
  }
}


/* public/pages/hero_banner.css */
/* Public::Pages::HeroBanner — bandeau photo d'ambiance en tête de page.
   Strip large cover-croppé ; --object-position ajusté par appelant (inline). */

.public-pages-hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 460px;
  margin: 0 0 var(--space-6);
  overflow: hidden;
  background: var(--color-surface-subtle);
}

.public-pages-hero-banner::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to bottom, transparent, var(--color-surface));
  pointer-events: none;
}

.public-pages-hero-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Variante parallax (opt-in via `parallax: true` sur le composant) : l'image
   déborde de 15% en haut et en bas (height 130% + top -15%) pour que la
   translation verticale du parallax_controller ne révèle jamais de bord vide.
   overflow:hidden du <figure> clippe le débord. */
.public-pages-hero-banner__img--parallax {
  position: absolute;
  top: -15%;
  left: 0;
  height: 130%;
  will-change: transform;
}


/* public/pages/mentions_legales.css */
/* Public::Pages::MentionsLegales — page mentions légales
   (carte B-LEGAL). Bloc placeholder voyant pour immatriculation
   (status juridique, SIRET, adresse). */

.public-pages-mentions-legales {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 48rem;
  margin-inline: auto;
  padding-block: var(--section-gap);
  padding-inline: var(--gutter);
}

.public-pages-mentions-legales__title {
  margin: 0;
}

.public-pages-mentions-legales__lead {
  margin: 0;
  max-width: 40rem;
  color: var(--color-text-subtle);
  font-size: var(--font-size-lg);
  line-height: 1.6;
}

.public-pages-mentions-legales__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.public-pages-mentions-legales__block-title {
  margin: 0;
}

.public-pages-mentions-legales__block-body {
  min-width: 0;
}

.public-pages-mentions-legales__block-body p {
  color: var(--color-text);
  line-height: 1.6;
}

.public-pages-mentions-legales__placeholder {
  margin: 0;
  padding: var(--space-3);
  font-style: italic;
  color: var(--color-text-subtle);
  border-left: 3px solid var(--color-border);
  box-sizing: border-box;
}

.public-pages-mentions-legales__declaration {
  margin: 0;
  color: var(--color-text);
  line-height: 1.6;
}

.public-pages-mentions-legales__number {
  font-weight: 600;
}


/* public/pages/merci.css */
.public-pages-merci {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 48rem;
  margin-inline: auto;
  padding-block: var(--section-gap);
  padding-inline: var(--gutter);
}

.public-pages-merci h1 {
  margin: 0;
}

.public-pages-merci__body {
  margin: 0;
  color: var(--color-text-subtle);
}

.public-pages-merci__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.public-pages-merci__cta {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-default);
}

.public-pages-merci__cta:hover {
  text-decoration: underline;
}

.public-pages-merci__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.public-pages-merci__cta--home {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.public-pages-merci__cta--home:hover {
  color: var(--color-brand);
}


/* public/pages/visite.css */
.public-pages-visite {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 48rem;
  margin-inline: auto;
  padding-block: var(--section-gap);
  padding-inline: var(--gutter);
}

.public-pages-visite h1 {
  margin: 0;
}

.public-pages-visite__intro {
  margin: 0;
  color: var(--color-text-subtle);
}

.public-pages-visite__zone {
  margin: 0;
  color: var(--color-text-subtle);
}

.public-pages-visite__form {
  margin-top: var(--space-4);
}


/* public/realisations/comparator.css */
/* Public::Realisations::Comparator — slider avant/après.
   2 images appariées (pair_key), diviseur draggable, handle accessible role=slider.
   Drivé par --comparator-position (% géré côté Stimulus + style inline initial). */

.public-realisations-comparator {
  /* Défaut de la position du slider (0–100%). Surchargé par le style inline
     du composant puis par le contrôleur Stimulus ; ici pour éviter tout
     fallback silencieux si le JS ne charge pas. */
  --comparator-position: 50%;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
  /* pan-y : laisse passer le scroll vertical au pouce ; seule la poignée
     (touch-action:none plus bas) capture le geste horizontal du slider. */
  touch-action: pan-y;
  user-select: none;
}

.public-realisations-comparator__after,
.public-realisations-comparator__before {
  position: absolute;
  inset: 0;
}

.public-realisations-comparator__before {
  clip-path: inset(0 calc(100% - var(--comparator-position)) 0 0);
}

.public-realisations-comparator__image,
.public-realisations-comparator__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.public-realisations-comparator__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--comparator-position);
  width: 2px;
  background: white;
  transform: translateX(-50%);
  pointer-events: none;
}

.public-realisations-comparator__handle {
  position: absolute;
  top: 50%;
  left: var(--comparator-position);
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--color-brand, currentColor);
  color: var(--color-brand, currentColor);
  cursor: ew-resize;
  pointer-events: auto;
  /* la poignée capture le drag horizontal sans que le navigateur ne pan-y. */
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  transition: filter var(--duration-fast, 150ms) var(--easing-default, ease);
}

.public-realisations-comparator__handle:hover {
  filter: brightness(0.95);
}

.public-realisations-comparator__handle:focus-visible {
  outline: 2px solid var(--color-brand-light);
  outline-offset: 2px;
}

.public-realisations-comparator__handle::before,
.public-realisations-comparator__handle::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.public-realisations-comparator__handle::before { border-right: 6px solid currentColor; }
.public-realisations-comparator__handle::after  { border-left:  6px solid currentColor; }

.public-realisations-comparator__label {
  position: absolute;
  bottom: var(--space-3, 0.75rem);
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
}

.public-realisations-comparator__label--before { left: var(--space-3, 0.75rem); }
.public-realisations-comparator__label--after  { right: var(--space-3, 0.75rem); }


/* public/realisations/gallery.css */
/* Public::Realisations::Gallery — grille carrée responsive 1→2→3 col.
   Conteneur galerie pour image-viewer (prev/next/swipe). H1 unique en tête.
   Scopé sous .public-realisations-gallery. */

.public-realisations-gallery {
  padding-block: var(--section-gap);
  padding-inline: var(--gutter);
}

.public-realisations-gallery__title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.public-realisations-gallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 640px) {
  .public-realisations-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .public-realisations-gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* public/realisations/tile.css */
/* Public::Realisations::Tile — deux formes :
   - galerie/single : cover carré cliquable (`__trigger`) → lightbox scopé au
     record + caption overlay au hover ;
   - comparateur (`--comparator`) : slider avant/après inline (drag), aspect
     carré homogène, caption top non bloquante.
   Scopé sous .public-realisations-tile. */

.public-realisations-tile {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: var(--color-surface-subtle);
  list-style: none;
  padding: 0;
  margin: 0;
  border: none;
  transition: filter var(--duration-fast, 150ms) var(--easing-default, ease);
}

.public-realisations-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-photo);
  background: linear-gradient(to bottom, transparent 62%, var(--color-surface) 100%);
  pointer-events: none;
  z-index: 0;
}

.public-realisations-tile:hover,
.public-realisations-tile:focus-within {
  filter: brightness(0.95);
}

/* --- Cover cliquable (galerie/single) --- */
.public-realisations-tile__trigger {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.public-realisations-tile__trigger:focus-visible {
  outline: 2px solid var(--color-brand-light);
  outline-offset: 2px;
}

.public-realisations-tile__picture,
.public-realisations-tile__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Caption --- */
.public-realisations-tile__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  color: white;
  opacity: 0;
  transition: opacity var(--duration-fast, 150ms) var(--easing-default, ease);
}

.public-realisations-tile:hover .public-realisations-tile__caption,
.public-realisations-tile:focus-within .public-realisations-tile__caption {
  opacity: 1;
}

.public-realisations-tile__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  line-height: 1.2;
}

.public-realisations-tile__commune {
  display: block;
  font-size: 0.875rem;
  opacity: 0.85;
  margin-top: var(--space-1);
}

/* --- Tuile comparateur : slider avant/après inline --- */
.public-realisations-tile--comparator {
  cursor: default;
}

.public-realisations-tile--comparator::after {
  content: none;
}

.public-realisations-tile--comparator:hover,
.public-realisations-tile--comparator:focus-within {
  filter: none;
}

.public-realisations-tile--comparator .public-realisations-comparator {
  aspect-ratio: 1/1;
  border-radius: inherit;
}

/* Caption au-dessus du comparateur : toujours visible, n'intercepte pas le drag,
   ne collision pas avec les libellés avant/après (en bas du comparateur). */
.public-realisations-tile--comparator .public-realisations-tile__caption {
  top: 0;
  bottom: auto;
  opacity: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}