/* Public surface — composants alignés sur remire-montjoly.fr */

:root {
  --public-space-page: clamp(1.25rem, 4vw, 3rem);
  --public-space-section: clamp(1.5rem, 3vw, 2.5rem);
  --public-radius-card: 15px;
  --public-surface: #ffffff;
  --public-surface-soft: rgb(255 255 255 / 0.86);
  --public-shadow: 0 2px 8px rgb(0 0 0 / 0.05);
  --public-shadow-hover: 0 10px 28px rgb(0 127 139 / 0.12);
}

body:not(.admin-ui) {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--rm-secondary);
  background:
    radial-gradient(
      ellipse 50% 40% at 92% 8%,
      rgb(251 214 162 / 0.18),
      transparent 55%
    ),
    radial-gradient(
      ellipse 45% 35% at 6% 70%,
      rgb(0 127 139 / 0.08),
      transparent 50%
    ),
    var(--rm-surface-muted);
}

body:not(.admin-ui) :is(p, li, dd) {
  text-rendering: optimizeLegibility;
}

body:not(.admin-ui)
  :is(
    .public-page-lead,
    .public-news__lead,
    .public-volunteers__lead,
    .public-list__lead
  ) {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

body:not(.admin-ui) .app__viewport {
  position: relative;
}

.public-page-title,
.public-news__title,
.public-volunteers__title,
.public-list__title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rm-secondary);
}

.public-page-lead,
.public-news__lead,
.public-volunteers__lead,
.public-list__lead {
  color: var(--rm-text);
  line-height: 1.55;
}

/* Cards — coin 15px + ombre légère du site */
.public-surface-card,
.rm-card {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: var(--public-radius-card);
  background: var(--public-surface);
  box-shadow: var(--public-shadow);
}

.rm-card--bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 100%;
  background: var(--rm-gradient-bar);
  border-radius: 10px 10px 0 0;
}

.public-link {
  color: var(--rm-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.public-link:hover {
  color: var(--rm-red);
}

/* Séparateur dégradé jaune → rouge (header / footer / sections Remire) */
.public-accent-bar,
.rm-divider {
  display: block;
  height: 6px;
  width: 100%;
  border: none;
  border-radius: 0;
  background: var(--rm-gradient-bar);
}

.rm-divider--thick {
  height: 10px;
  border-radius: 5px 5px 0 0;
}

.rm-divider--title {
  width: 50px;
  height: 3px;
  margin-top: 0.65rem;
  border-radius: 0;
  background: #f8e818;
}

/* Bordure dégradée rouge/jaune (cartes Remire — border-box) */
.rm-separator-border {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--rm-gradient-separator) border-box;
}

/* Inputs publics (kit + arrondi souple) */
body:not(.admin-ui) .ds-input,
body:not(.admin-ui)
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
    [type="file"]
  ),
body:not(.admin-ui) select,
body:not(.admin-ui) textarea {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-control);
  color: var(--rm-secondary);
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body:not(.admin-ui) .ds-input:focus,
body:not(.admin-ui) input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.admin-ui) select:focus,
body:not(.admin-ui) textarea:focus {
  outline: none;
  border-color: var(--rm-primary);
  box-shadow: 0 0 0 3px var(--ds-focus-ring);
}

body:not(.admin-ui) ::placeholder {
  color: color-mix(in srgb, var(--rm-text) 80%, #fff);
}