/* Compléments propres au site Symfony (absents de la maquette statique) :
   messages flash, erreurs de formulaire, contenu riche issu de l'admin, Turnstile. */

/* --- Messages flash --- */
.flashes {
    padding-top: var(--space-m);
}

.flashes .callout + .callout {
    margin-top: var(--space-xs);
}

.callout--success {
    background: var(--forest-soft);
    border-left-color: var(--forest);
}

.callout--error {
    background: #f8e9e6;
    border-left-color: var(--danger);
}

.callout--error svg {
    color: var(--danger);
}

/* --- Formulaires --- */
.field__error,
.form-errors {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--danger);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
    border-color: var(--danger);
}

.field__help {
    display: block;
    margin-top: 0.3rem;
    font-size: var(--step--1);
    color: var(--muted);
}

.turnstile {
    margin-bottom: var(--space-m);
    min-height: 65px;
}

/* Lien ou ressource pas encore disponible */
.dim {
    color: var(--muted);
    opacity: 0.75;
}

/* --- Contenu riche (articles, événements, pages légales saisis dans l'admin) --- */
.prose a {
    color: var(--forest);
    text-decoration: underline;
}

.prose img {
    border-radius: var(--radius-m);
    margin-block: var(--space-m);
}

.prose figure {
    margin: var(--space-m) 0;
}

.prose figcaption {
    font-size: var(--step--1);
    color: var(--muted);
    margin-top: var(--space-2xs);
}

.prose blockquote {
    margin: var(--space-m) 0;
    padding: var(--space-s) var(--space-m);
    border-left: 3px solid var(--sage);
    background: var(--forest-soft);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    font-style: italic;
}

.prose h2 strong,
.prose h3 strong {
    color: inherit;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
}

.prose th,
.prose td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--sand);
    text-align: left;
}

/* Image d'en-tête d'article */
.article-cover {
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border-radius: var(--radius-l);
    margin-block: var(--space-m);
}

.article-meta {
    font-size: var(--step--1);
    color: var(--muted);
}

/* --- Événements --- */
.event-card__date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--terracotta);
}

.event-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.75rem;
    margin: var(--space-s) 0;
    font-size: var(--step--1);
}

.event-card dt {
    font-weight: 600;
    color: var(--forest-dark);
}

.event-card dd {
    margin: 0;
}

/* Icône dans un surtitre : en ligne avec le texte (le reset passe les svg en block) */
.eyebrow svg {
    display: inline-block;
    vertical-align: -0.15em;
    margin-right: 0.35em;
}

/* --- Pages éditables : le contenu saisi dans l'éditeur (sans classes) reprend le design system --- */
.section__body > * + *,
.section__notes > * + * {
    margin-top: var(--space-s);
}

.section__body ul:not([class]),
.card ul:not([class]),
.callout ul:not([class]) {
    list-style: none;
    margin: var(--space-s) 0 0;
    padding: 0;
}

.section__body ul:not([class]) li,
.card ul:not([class]) li,
.callout ul:not([class]) li {
    position: relative;
    padding: 0.3rem 0 0.3rem 1.75rem;
}

.section__body ul:not([class]) li::before,
.card ul:not([class]) li::before,
.callout ul:not([class]) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--forest-soft)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d5a47' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
        center / 0.7rem no-repeat;
}

.callout > div > * + * {
    margin-top: var(--space-xs);
}

.section--green .section__notes,
.section--green .section__notes a {
    color: var(--cream);
}