/* SylvAsso Projets : affichage public
 * Les couleurs se changent ici, dans les variables. La typographie est celle du thème.
 */
.sp, .sp-page {
    /* Palette SylvAsso */
    --sp-green: #00491e;        /* vert du bandeau */
    --sp-green-dark: #00330f;
    --sp-green-soft: #e9f1eb;
    --sp-orange: #ef9600;       /* orange du logo */
    --sp-orange-soft: #fdf0d9;
    --sp-brown: #9e6a37;        /* brun des titres */
    --sp-brown-soft: #f4ebe1;
    --sp-ink: #12301c;          /* texte courant */
    --sp-muted: #4a5d50;        /* texte secondaire, contraste AA */
    --sp-line: #dde4df;
    --sp-surface: #fff;
    --sp-radius: 10px;
    --sp-gap: clamp(16px, 2.5vw, 32px);
    /* le thème fixe html à 62.5 % : on repart d'une base lisible, en px, et tout le reste est en em */
    font-size: clamp(16px, 1em, 20px);
    line-height: 1.6;
    color: var(--sp-ink);
    box-sizing: border-box;
}
.sp *, .sp *::before, .sp *::after { box-sizing: inherit; }
.sp img { max-width: 100%; height: auto; }

/* Badges -------------------------------------------------------------- */
.sp-badge { display: inline-block; padding: .2em .7em; border-radius: 999px; font-size: .78em; font-weight: 600; line-height: 1.5; letter-spacing: .01em; background: var(--sp-green-soft); color: var(--sp-green); white-space: nowrap; }
.sp-badge--collecte { background: var(--sp-orange); color: var(--sp-green); }
.sp-badge--prevue { background: var(--sp-brown-soft); color: var(--sp-brown); }
.sp-badge--plante { background: var(--sp-green); color: #fff; }
.sp-badge--termine { background: #4a4f54; color: #fff; }

/* Boutons ------------------------------------------------------------- */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .7em 1.2em; border: 2px solid var(--sp-green); border-radius: 6px; background: var(--sp-green); color: #fff !important; font-weight: 600; font-size: .95em; line-height: 1.2; text-decoration: none !important; transition: background .15s, border-color .15s, color .15s; }
.sp-btn:hover, .sp-btn:focus-visible { background: var(--sp-green-dark); border-color: var(--sp-green-dark); }
.sp-btn--outline { background: transparent; color: var(--sp-green) !important; }
.sp-btn--outline:hover, .sp-btn--outline:focus-visible { background: var(--sp-green-soft); color: var(--sp-green-dark) !important; }
.sp-btn--ghost { background: transparent; border-color: transparent; color: var(--sp-green) !important; padding-left: .2em; padding-right: .2em; }
.sp-btn--ghost::after { content: "→"; transition: transform .15s; }
.sp-btn--ghost:hover, .sp-btn--ghost:focus-visible { background: transparent; border-color: transparent; color: var(--sp-green-dark) !important; }
.sp-btn--ghost:hover::after { transform: translateX(3px); }

/* Barre de collecte --------------------------------------------------- */
.sp-progress { margin: 0 0 1em; }
.sp-progress-bar { height: 10px; border-radius: 999px; background: var(--sp-green-soft); overflow: hidden; }
.sp-progress-bar span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--sp-orange); }
.sp-progress-text { margin: .5em 0 0; font-size: .92em; color: var(--sp-muted); }
.sp-progress-text strong { color: var(--sp-green); font-size: 1.15em; }
.sp-progress-pct { float: right; font-weight: 600; color: var(--sp-green); }
.sp-progress--compact .sp-progress-bar { height: 6px; }
.sp-progress--compact .sp-progress-text { font-size: .82em; margin-top: .35em; }
.sp-progress--compact .sp-progress-text strong { font-size: 1em; }

/* ======================================================================
 * Liste
 * ==================================================================== */
/* Au plus --sp-cols colonnes, jamais plus étroites que 250px : la grille s'adapte à la largeur réelle du contenu */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(250px, 100%), calc((100% - (var(--sp-cols, 3) - 1) * var(--sp-gap)) / var(--sp-cols, 3))), 1fr)); gap: var(--sp-gap); margin: 1.5em 0; }

.sp-card { display: flex; flex-direction: column; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.sp-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.sp-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sp-green-soft); }
.sp-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.sp-card:hover .sp-card-media img { transform: scale(1.03); }
.sp-card-placeholder { position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(0, 73, 30, .25) 0 18%, transparent 19%), radial-gradient(circle at 62% 55%, rgba(0, 73, 30, .18) 0 24%, transparent 25%), var(--sp-green-soft); }
.sp-card-media .sp-badge { position: absolute; top: .75em; left: .75em; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.sp-card-media .sp-badge--preparation { background: #fff; }

.sp-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.1em 1.25em 1.25em; }
.sp-card-place { margin: 0 0 .25em; font-size: .8em; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-muted); }
.sp-card-title { margin: 0 0 .5em; font-size: 1.2em; line-height: 1.3; hyphens: auto; overflow-wrap: break-word; }
.sp-card-title a { color: inherit; text-decoration: none; }
.sp-card-title a:hover { color: var(--sp-green); }
.sp-card-summary { margin: 0 0 .75em; font-size: .95em; line-height: 1.55; color: var(--sp-muted); }
.sp-card-facts { margin: 0 0 1em; font-size: .88em; font-weight: 600; color: var(--sp-green); }
.sp-card .sp-progress { margin-bottom: 1em; }
.sp-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em; margin-top: auto; padding-top: .25em; }
.sp-card-actions .sp-btn { padding: .55em 1em; font-size: .9em; }

.sp-empty { padding: 2em; border: 1px dashed var(--sp-line); border-radius: var(--sp-radius); text-align: center; color: var(--sp-muted); }

/* ======================================================================
 * Page projet
 * ==================================================================== */
.sp-single { container-type: inline-size; margin-bottom: 3em; }

.sp-hero { margin-bottom: 2.5em; }
.sp-hero-cover { margin: 0 0 1.5em; border-radius: var(--sp-radius); overflow: hidden; aspect-ratio: 21 / 9; background: var(--sp-green-soft); }
.sp-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .9em; margin-bottom: 1em; }
.sp-tag, .sp-place { font-size: .85em; font-weight: 600; color: var(--sp-muted); }
.sp-place::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .45em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg) translateY(-1px); background: var(--sp-green); }
.sp-lead { margin: 0 0 1.75em; max-width: 46em; font-size: clamp(1.1em, 2.2vw, 1.35em); line-height: 1.5; }

.sp-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); }
.sp-figures > div { padding: 1em 1.25em 1em 0; }

/* Accès rapide au soutien en haut de page, seulement quand la colonne latérale passe en bas */
.sp-hero-cta { display: flex; flex-direction: column; gap: .75em; margin-top: 1.25em; padding: 1em; border: 2px solid var(--sp-green); border-radius: var(--sp-radius); }
.sp-hero-cta .sp-progress { margin: 0; }
.sp-hero-cta .sp-btn { width: 100%; }
@container (min-width: 760px) { .sp-hero-cta { display: none; } }
.sp-figures dt { margin: 0 0 .2em; font-size: .8em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-muted); }
.sp-figures dd { margin: 0; font-size: 1.35em; font-weight: 700; line-height: 1.2; color: var(--sp-green); }

.sp-layout { display: grid; grid-template-columns: 1fr; gap: 2.5em; }
@container (min-width: 760px) {
    .sp-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
    .sp-aside { position: sticky; top: 2em; }
}
@container (min-width: 1000px) {
    .sp-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 3.5em; }
}

.sp-section { margin: 0 0 2.75em; }
.sp-h2 { margin: 0 0 1em; padding-bottom: .5em; font-size: 1.45em; border-bottom: 3px solid var(--sp-orange); display: inline-block; }
.sp-h3 { margin: 1.5em 0 .5em; font-size: 1.05em; }
.sp-section > .sp-h3:first-of-type, .sp-section > h2 + .sp-h3 { margin-top: .5em; }
.sp-section p { line-height: 1.7; }
.sp-content { margin: 1.25em 0; }
.sp-impact { margin-top: 1.5em; padding: 1em 1.25em; border-radius: var(--sp-radius); background: var(--sp-green-soft); }
.sp-impact .sp-h3 { margin-top: 0; color: var(--sp-green); }
.sp-impact p:last-child { margin-bottom: 0; }

/* Essences */
.sp-species { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1.25em; padding: 0; list-style: none; }
.sp-species li { display: inline-flex; align-items: center; gap: .5em; margin: 0; padding: .4em .5em .4em .85em; border: 1px solid var(--sp-line); border-radius: 999px; font-size: .92em; }
.sp-species-qty { padding: .1em .55em; border-radius: 999px; background: var(--sp-green-soft); color: var(--sp-green); font-weight: 700; font-size: .82em; }

/* Médias */
.sp-video { position: relative; aspect-ratio: 16 / 9; margin-bottom: 1em; border-radius: var(--sp-radius); overflow: hidden; background: #000; }
.sp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5em; }
.sp-gallery a { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.sp-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.sp-gallery a:hover img { transform: scale(1.04); }

/* Budget */
.sp-table { width: 100%; border-collapse: collapse; font-size: .95em; margin: 0 0 1em; }
.sp-table th, .sp-table td { padding: .7em .5em; border-bottom: 1px solid var(--sp-line); text-align: left; vertical-align: top; }
.sp-table thead th { font-size: .8em; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-muted); }
.sp-table tfoot th, .sp-table tfoot td { border-bottom: 0; border-top: 2px solid currentColor; font-weight: 700; font-size: 1.05em; }
.sp-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-poste { display: block; font-weight: 600; }
.sp-poste-note { display: block; font-size: .85em; color: var(--sp-muted); }
.sp-share { display: block; height: 4px; margin-top: .4em; border-radius: 999px; background: var(--sp-green-soft); }
.sp-share span { display: block; height: 100%; border-radius: inherit; background: var(--sp-green); opacity: .7; }
.sp-list { margin: 0 0 1em; padding-left: 1.2em; }
.sp-list li { margin: .3em 0; }
.sp-figure { margin: 1em 0; }
.sp-figure img { border-radius: var(--sp-radius); }

/* Avancement */
.sp-timeline { position: relative; margin: 0 0 1.5em; padding: 0; list-style: none; }
.sp-timeline li { position: relative; margin: 0; padding: 0 0 1.25em 2em; }
.sp-timeline li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: var(--sp-line); }
.sp-timeline li:last-child::before { display: none; }
.sp-timeline li.is-done::before { background: var(--sp-green); }
.sp-dot { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sp-line); background: var(--sp-surface); }
.is-done .sp-dot { border-color: var(--sp-green); background: var(--sp-green); box-shadow: inset 0 0 0 3px var(--sp-surface); }
.sp-step { display: block; font-weight: 600; }
.is-todo .sp-step { color: var(--sp-muted); }
.sp-step-meta { display: block; font-size: .85em; color: var(--sp-muted); }

.sp-journal { display: flex; flex-direction: column; gap: 1em; }
.sp-entry { display: flex; gap: 1em; padding: 1em; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); }
.sp-entry-photo { flex: 0 0 120px; }
.sp-entry-photo img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; display: block; }
.sp-entry time { display: block; margin-bottom: .25em; font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-green); }
.sp-entry-body p { margin: 0 0 .5em; }
.sp-entry-body p:last-child { margin-bottom: 0; }
@media (max-width: 520px) { .sp-entry { flex-direction: column; } .sp-entry-photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; } }

/* Porteurs */
.sp-orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1em; margin-bottom: 1.5em; }
.sp-org { display: flex; flex-direction: column; gap: .3em; padding: 1em; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); color: inherit; text-decoration: none; }
a.sp-org:hover { border-color: var(--sp-green); }
.sp-org-logo { max-height: 56px; width: auto; object-fit: contain; align-self: flex-start; margin-bottom: .4em; }
.sp-org-name { font-weight: 700; }
.sp-org-role { font-size: .88em; color: var(--sp-muted); }

.sp-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.25em; margin: 0 0 1.5em; padding: 0; list-style: none; text-align: center; }
.sp-people li { margin: 0; }
.sp-person-photo { display: block; width: 88px; height: 88px; margin: 0 auto .6em; border-radius: 50%; object-fit: cover; }
.sp-person-initial { display: grid; place-items: center; background: var(--sp-green-soft); color: var(--sp-green); font-size: 2em; font-weight: 700; }
.sp-person-name { display: block; font-weight: 700; }
.sp-person-role { display: block; font-size: .85em; color: var(--sp-muted); }

.sp-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 2em; }
.sp-partner { display: inline-flex; align-items: center; min-height: 48px; color: inherit; text-decoration: none; opacity: .85; transition: opacity .15s; }
.sp-partner:hover { opacity: 1; }
.sp-partner-logo { max-height: 56px; max-width: 150px; width: auto; object-fit: contain; }
.sp-partner-name { padding: .4em .8em; border: 1px solid var(--sp-line); border-radius: 6px; font-weight: 600; font-size: .9em; }

/* Colonne latérale */
.sp-aside { display: flex; flex-direction: column; gap: 1.25em; }
.sp-card-box { padding: 1.4em; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); }
.sp-support { border: 2px solid var(--sp-green); box-shadow: 0 8px 24px rgba(0, 73, 30, .08); }
.sp-box-title { margin: 0 0 1em; font-size: 1.15em; }
.sp-box-sub { margin: 1.25em 0 .5em; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-muted); }
.sp-card-box .sp-btn { display: flex; width: 100%; margin-top: .6em; }
.sp-deadline { margin: 0 0 .5em; font-size: .88em; font-weight: 600; color: var(--sp-brown); }
.sp-rewards { margin: 0; padding: 0; list-style: none; font-size: .9em; }
.sp-rewards li { display: flex; flex-direction: column; padding: .55em 0; border-top: 1px solid var(--sp-line); }
.sp-reward-amount { font-weight: 700; color: var(--sp-green); }
.sp-tax { margin: 1em 0 0; font-size: .85em; line-height: 1.5; color: var(--sp-muted); }
.sp-volunteer p { margin: 0 0 .5em; }
.sp-volunteer-date { font-weight: 700; color: var(--sp-green); }

.sp-infos dl { margin: 0; }
.sp-infos dl > div { padding: .55em 0; border-top: 1px solid var(--sp-line); }
.sp-infos dl > div:first-child { border-top: 0; padding-top: 0; }
.sp-infos dt { font-size: .8em; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-muted); }
.sp-infos dd { margin: .1em 0 0; font-weight: 600; }
.sp-map { margin-top: 1em; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 1px solid var(--sp-line); }
.sp-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.sp-map-link { display: inline-block; margin-top: .4em; font-size: .85em; color: var(--sp-green); }

@media (prefers-reduced-motion: reduce) {
    .sp-card, .sp-card-media img, .sp-gallery img, .sp-btn--ghost::after { transition: none; }
    .sp-card:hover { transform: none; }
}

/* Textes enrichis (éditeur visuel) */
.sp-rich > :first-child { margin-top: 0; }
.sp-rich > :last-child { margin-bottom: 0; }
.sp-rich h3 { margin: 1.5em 0 .5em; font-size: 1.1em; }
.sp-rich h4 { margin: 1.25em 0 .4em; font-size: 1em; color: var(--sp-green); }
.sp-rich ul, .sp-rich ol { margin: 0 0 1em; padding-left: 1.3em; }
.sp-rich li { margin: .3em 0; line-height: 1.6; }
.sp-rich ul li::marker { color: var(--sp-green); }
.sp-rich blockquote { margin: 1.25em 0; padding: .5em 0 .5em 1.25em; border-left: 3px solid var(--sp-green); font-size: 1.1em; font-style: italic; }
.sp-rich blockquote p { margin: 0; }
.sp-rich a { color: var(--sp-green); }
.sp-rich img { border-radius: 8px; }
.sp-rich .alignleft { float: left; margin: .3em 1.25em 1em 0; max-width: 50%; }
.sp-rich .alignright { float: right; margin: .3em 0 1em 1.25em; max-width: 50%; }
.sp-rich .aligncenter { display: block; margin: 1em auto; }
.sp-rich::after { content: ""; display: table; clear: both; }
.sp-rich .wp-caption { max-width: 100%; }
.sp-rich .wp-caption-text { font-size: .85em; color: var(--sp-muted); margin-top: .3em; }
.sp-rich iframe { max-width: 100%; }
.sp-impact .sp-rich h3, .sp-impact .sp-rich h4 { color: var(--sp-green); }
@media (max-width: 520px) { .sp-rich .alignleft, .sp-rich .alignright { float: none; margin: 1em 0; max-width: 100%; } }

/* Gabarits pleine largeur (thèmes classiques) */
.sp-page { width: 100%; float: none; }
.sp-page-inner { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: clamp(1.5em, 4vw, 3em) 16px 3em; }
.sp-page .sp-article { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.sp-page-title { margin: 0 0 .5em; }
.sp-breadcrumb { margin: 0 0 .75em; font-size: .9em; }
.sp-breadcrumb a { color: var(--sp-green, #2f5d27); text-decoration: none; }
.sp-breadcrumb a::before { content: "← "; }
.sp-breadcrumb a:hover { text-decoration: underline; }
.sp-page-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.sp-page-content > .wp-block-sylvasso-projets,
.sp-page-content > .alignwide,
.sp-page-content > .alignfull,
.sp-page-content > .sp { max-width: none; }
.sp-page .sp-single { margin-top: 0; }
/* le thème réserve parfois une colonne : on la neutralise sur ces pages */
.sp-full-width #secondary, .sp-full-width .widget-area, .sp-full-width aside.sidebar { display: none !important; }
.sp-full-width #primary, .sp-full-width .content-area { width: 100% !important; max-width: none !important; float: none !important; margin-right: 0 !important; }
.sp-page-title--narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Tableaux : on neutralise les bordures du thème */
.sp .sp-table { border: 0 !important; border-collapse: collapse !important; }
.sp .sp-table th, .sp .sp-table td { border: 0 !important; border-bottom: 1px solid var(--sp-line) !important; background: none !important; }
.sp .sp-table tfoot th, .sp .sp-table tfoot td { border-bottom: 0 !important; border-top: 2px solid var(--sp-green) !important; color: var(--sp-green); }

/* Accents de marque */
.sp-support { border-color: var(--sp-orange); box-shadow: 0 8px 24px rgba(239, 150, 0, .12); }
.sp-hero-cta { border-color: var(--sp-orange); }
.sp-box-title { color: var(--sp-green); }
.sp-impact { border-left: 4px solid var(--sp-green); }
.sp-rich blockquote { border-left-color: var(--sp-orange); color: var(--sp-brown); }
.sp-rich ul li::marker { color: var(--sp-orange); }
.sp-place::before { background: var(--sp-orange); }
.sp-card { border-color: var(--sp-line); }
.sp-card-facts { color: var(--sp-brown); }
.sp-breadcrumb { font-size: 1em; }
.sp .sp-card-title, .sp .sp-card-title a { color: var(--sp-green) !important; }
.sp .sp-card-title a:hover { color: var(--sp-brown) !important; }