/* =========================================================
   Sites Touristiques d'Alsace — styles des blocs
   (le plugin redéclare ses tokens pour rester autonome,
    valeurs identiques à celles du thème)
   ========================================================= */

:root {
	--sta-green: #22402E;
	--sta-green-dark: #1A3324;
	--sta-orange: #CB6843;
	--sta-orange-dark: #B0512F;
	--sta-cream: #F1ECE1;
	--sta-paper: #FFFFFF;
	--sta-ink: #262521;
	--sta-muted: #6B6A64;
	--sta-line: rgba(38, 37, 33, .10);

	--sta-font-display: 'Oswald', system-ui, sans-serif;
	--sta-font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--sta-font-script: 'Caveat', cursive;

	--sta-radius: 14px;
	--sta-radius-lg: 22px;
	--sta-shadow: 0 18px 40px -24px rgba(26, 51, 36, .45);
	--sta-wrap: 1280px;
	--sta-gutter: clamp(1rem, 4vw, 2.5rem);
}

/* Largeur de contenu commune aux blocs non pleine largeur */
.sta-wrap { max-width: var(--sta-wrap); margin-inline: auto; padding-inline: var(--sta-gutter); }

/* Primitives (au cas où le plugin tourne sans le thème) */
.sta-eyebrow { display:inline-block; font-family:var(--sta-font-display); text-transform:uppercase; letter-spacing:.22em; font-size:.8rem; font-weight:500; color:var(--sta-orange); }
.sta-eyebrow--light { color: rgba(241,236,225,.85); }
.sta-section__title { font-family:var(--sta-font-display); text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--sta-green); font-size:clamp(1.5rem,3vw,2rem); line-height:1.1; margin:0; }
.sta-section__title--dashed { display:flex; align-items:center; justify-content:center; gap:1rem; text-align:center; }
.sta-section__title--dashed::before, .sta-section__title--dashed::after { content:""; height:2px; width:34px; background:var(--sta-green); opacity:.55; }
.sta-btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sta-font-display); text-transform:uppercase; letter-spacing:.08em; font-weight:500; font-size:.82rem; padding:.85rem 1.5rem; border-radius:999px; border:0; cursor:pointer; text-decoration:none; transition:transform .15s ease, background-color .2s ease, box-shadow .2s ease; line-height:1; }
.sta-btn:hover { transform: translateY(-1px); }
.sta-btn--cta { background:var(--sta-orange); color:#fff; box-shadow:0 10px 22px -12px var(--sta-orange-dark); }
.sta-btn--cta:hover { background:var(--sta-orange-dark); }
.sta-btn--green { background:var(--sta-green); color:#fff; }
.sta-btn--green:hover { background:var(--sta-green-dark); }
.sta-btn--ghost { background:transparent; color:var(--sta-green); border:1.5px solid currentColor; }
.sta-btn--ghost:hover { background:var(--sta-green); color:#fff; }
.sta-btn--arrow::after { content:"›"; font-family:var(--sta-font-body); font-size:1.1em; line-height:0; }

/* Pastille de thème (couleur + nom) sur les cartes */
.sta-tag { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--sta-font-display); text-transform:uppercase; letter-spacing:.08em; font-size:.62rem; font-weight:500; padding:.3rem .6rem; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(4px); }
.sta-tag::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--chip,var(--sta-orange)); }

.sta-empty { padding:2rem; text-align:center; color:var(--sta-muted); background:rgba(0,0,0,.03); border:1px dashed var(--sta-line); border-radius:var(--sta-radius); }
.sta-empty--light { color:rgba(241,236,225,.8); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); }

/* =========================================================
   1) HERO
   ========================================================= */
.sta-hero { position:relative; min-height:clamp(560px,88vh,820px); display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; color:#fff; text-align:center; }
.sta-hero__bg { position:absolute; inset:0; background:#33493b center/cover no-repeat; z-index:-2; transform:scale(1.03); }
.sta-hero__veil { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(18,32,24,.30) 0%, rgba(18,32,24,.20) 40%, rgba(18,32,24,.55) 100%); }
.sta-hero__inner { padding:clamp(2rem,6vw,4rem) var(--sta-gutter); max-width:880px; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.sta-hero__logo { width:clamp(72px,9vw,104px); height:auto; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)); margin-bottom:.25rem; }
.sta-hero__title { margin:0; font-family:var(--sta-font-display); font-weight:700; line-height:.92; text-shadow:0 6px 26px rgba(0,0,0,.4); }
.sta-hero__title-main { display:block; font-size:clamp(3.2rem,11vw,8rem); letter-spacing:.02em; text-transform:uppercase; }
.sta-hero__script { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sta-font-script); font-weight:700; font-size:clamp(2.4rem,8vw,5.5rem); line-height:1; margin-top:-.15em; }
.sta-hero__pretzel { width:clamp(34px,5vw,58px); height:auto; color:var(--sta-orange); }
.sta-hero__badge { position:relative; display:flex; align-items:center; justify-content:center; margin:.4rem 0 0; width:100%; }
.sta-hero__badge::before, .sta-hero__badge::after { content:""; flex:1; max-width:90px; height:0; border-top:2px dotted rgba(255,255,255,.55); }
.sta-hero__badge span { display:inline-block; font-family:var(--sta-font-display); text-transform:uppercase; letter-spacing:.14em; font-size:clamp(.7rem,1.4vw,.85rem); padding:.6rem 1.2rem; margin:0 1rem; border:1.5px solid rgba(255,255,255,.6); border-radius:999px; white-space:nowrap; }
.sta-hero__cta { margin-top:.6rem; padding:1rem 2rem; font-size:.9rem; }

/* =========================================================
   2) ÉMOTIONS
   ========================================================= */
.sta-emotions { padding:clamp(3rem,7vw,5rem) 0; background:var(--sta-cream); }
.sta-emotions__title { margin-bottom:clamp(2rem,4vw,3rem); }
.sta-emotions__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.8rem,1.6vw,1.4rem); }
.sta-emotion-card { position:relative; display:flex; flex-direction:column; background:var(--sta-paper); border-radius:var(--sta-radius); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--sta-shadow); transition:transform .2s ease, box-shadow .2s ease; }
.sta-emotion-card:hover { transform:translateY(-4px); box-shadow:0 26px 46px -26px rgba(26,51,36,.55); }
.sta-emotion-card__media { aspect-ratio:1/1; background:var(--accent,#33493b) center/cover no-repeat; }
.sta-emotion-card__icon { position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); width:clamp(48px,5vw,62px); height:clamp(48px,5vw,62px); border-radius:50%; background:var(--accent,var(--sta-orange)); display:grid; place-items:center; color:#fff; box-shadow:0 8px 18px -8px rgba(0,0,0,.5); border:3px solid var(--sta-paper); }
.sta-emotion-card__icon svg { width:54%; height:54%; }
.sta-emotion-card__icon img { width:54%; height:54%; object-fit:contain; filter:brightness(0) invert(1); }
.sta-emotion-card__body { display:flex; flex-direction:column; gap:.4rem; padding:1.6rem 1rem 1.4rem; text-align:center; }
.sta-emotion-card__title { font-family:var(--sta-font-display); text-transform:uppercase; letter-spacing:.04em; font-weight:600; font-size:1rem; line-height:1.15; color:var(--sta-green); }
.sta-emotion-card__text { font-size:.82rem; color:var(--sta-muted); line-height:1.45; }
.sta-emotions__action { display:flex; justify-content:center; margin-top:clamp(1.6rem,3vw,2.4rem); }

/* =========================================================
   3) CARTE INTERACTIVE
   ========================================================= */
.sta-carte { background:var(--sta-green); color:#fff; }
.sta-carte__grid { display:grid; grid-template-columns:minmax(280px,1fr) 1.6fr; align-items:stretch; min-height:clamp(420px,46vw,560px); }
.sta-carte__intro { padding:clamp(2.4rem,5vw,4rem) clamp(1.6rem,4vw,3.4rem); display:flex; flex-direction:column; justify-content:center; gap:1.1rem; }
.sta-carte__title { margin:0; font-family:var(--sta-font-display); text-transform:uppercase; font-weight:600; letter-spacing:.04em; line-height:1.05; font-size:clamp(1.8rem,3.4vw,2.8rem); }
.sta-carte__text { margin:0; color:rgba(241,236,225,.82); max-width:34ch; line-height:1.6; }
.sta-carte__intro .sta-btn { align-self:flex-start; margin-top:.4rem; }

.sta-carte__stage { position:relative; min-height:380px; background:#21302a; }
.sta-carte__map { position:absolute; inset:0; background:#2c4a3a; }
.sta-carte__map .sta-carte__fallback { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; color:rgba(255,255,255,.6); text-align:center; padding:1rem; }
.leaflet-container { width:100%; height:100%; font-family:var(--sta-font-body); background:#2c4a3a; }

/* Barre de filtres verticale posée sur la carte */
.sta-carte__filters { position:absolute; top:50%; left:16px; transform:translateY(-50%); z-index:500; display:flex; flex-direction:column; gap:.4rem; padding:.5rem; background:rgba(26,51,36,.78); border-radius:999px; backdrop-filter:blur(6px); box-shadow:0 10px 26px -14px rgba(0,0,0,.7); }
.sta-carte__filter { width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; transition:background-color .2s ease, transform .15s ease; }
.sta-carte__filter svg { width:22px; height:22px; }
.sta-carte__filter:hover { transform:scale(1.06); }
.sta-carte__filter.is-active { background:var(--accent,var(--sta-orange)); }

/* Marqueurs Leaflet colorés */
.sta-marker { width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--mk,#CB6843); border:2px solid #fff; box-shadow:0 4px 10px -3px rgba(0,0,0,.6); display:grid; place-items:center; }
.sta-marker span { transform:rotate(45deg); color:#fff; }
.sta-marker svg { width:15px; height:15px; transform:rotate(45deg); }

/* Carte « coup de cœur » flottante */
.sta-carte__card { position:absolute; right:18px; bottom:18px; z-index:500; width:min(260px,42%); background:var(--sta-paper); border-radius:var(--sta-radius); overflow:hidden; text-decoration:none; color:var(--sta-ink); box-shadow:0 22px 40px -20px rgba(0,0,0,.6); transition:transform .2s ease; }
.sta-carte__card:hover { transform:translateY(-3px); }
.sta-carte__card-media { display:block; height:118px; background:#33493b center/cover no-repeat; }
.sta-carte__card-body { display:flex; flex-direction:column; gap:.5rem; padding:.9rem 1rem 1rem; }
.sta-carte__card-title { font-family:var(--sta-font-display); font-weight:600; font-size:1.02rem; line-height:1.15; color:var(--sta-green); }
.sta-carte__card-meta { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.sta-carte__card .sta-tag { background:#eee; color:var(--sta-ink); }
.sta-carte__card-duree { display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; color:var(--sta-muted); }
.sta-carte__card-more { font-family:var(--sta-font-display); text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color:var(--sta-orange-dark); }

/* =========================================================
   CARROUSEL générique (incontournables / itinéraires / agenda)
   ========================================================= */
.sta-carousel { position:relative; }
.sta-carousel__viewport { overflow:hidden; }
.sta-carousel__track { display:flex; gap:clamp(.8rem,1.6vw,1.25rem); transition:transform .45s cubic-bezier(.4,.01,.16,1); will-change:transform; }
.sta-carousel__slide { flex:0 0 auto; }
.sta-carousel__slide--site { width:calc((100% - 4 * 1.25rem) / 5); }
.sta-carousel__slide--itin { width:100%; }
.sta-carousel__slide--event { width:calc((100% - 2 * 1rem) / 3); }

.sta-carousel__nav { position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--sta-line); background:var(--sta-paper); color:var(--sta-green); display:grid; place-items:center; cursor:pointer; box-shadow:var(--sta-shadow); transition:background-color .2s ease, transform .15s ease, opacity .2s ease; }
.sta-carousel__nav:hover { background:var(--sta-green); color:#fff; }
.sta-carousel__nav--prev { left:-22px; }
.sta-carousel__nav--next { right:-22px; }
.sta-carousel__nav[disabled] { opacity:.35; cursor:default; }
.sta-carousel__nav[disabled]:hover { background:var(--sta-paper); color:var(--sta-green); transform:translateY(-50%); }

.sta-carousel__dots { display:flex; justify-content:center; gap:.45rem; margin-top:1.2rem; }
.sta-carousel__dot { width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(38,37,33,.22); cursor:pointer; transition:background-color .2s ease, width .2s ease; }
.sta-carousel__dot.is-active { background:var(--sta-orange); width:22px; border-radius:999px; }

/* =========================================================
   4) INCONTOURNABLES
   ========================================================= */
.sta-inc { padding:clamp(3rem,6vw,4.5rem) 0; background:var(--sta-cream); }
.sta-inc__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:clamp(1.4rem,3vw,2.2rem); }
.sta-inc__all { font-family:var(--sta-font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; color:var(--sta-muted); text-decoration:none; white-space:nowrap; }
.sta-inc__all:hover { color:var(--sta-orange-dark); }

.sta-site-card { position:relative; height:100%; }
.sta-site-card__link { position:relative; display:block; aspect-ratio:3/4; border-radius:var(--sta-radius); overflow:hidden; text-decoration:none; box-shadow:var(--sta-shadow); }
.sta-site-card__media { position:absolute; inset:0; background:#33493b center/cover no-repeat; transition:transform .5s ease; }
.sta-site-card__link:hover .sta-site-card__media { transform:scale(1.05); }
.sta-site-card__overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.72) 100%); }
.sta-site-card__content { position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; gap:.55rem; padding:1rem; color:#fff; }
.sta-site-card__title { font-family:var(--sta-font-display); font-weight:600; font-size:1.05rem; line-height:1.12; }
.sta-site-card__meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.sta-site-card__duree { display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; color:rgba(255,255,255,.85); }

/* =========================================================
   5) ITINÉRAIRES
   ========================================================= */
.sta-itin { padding:clamp(3rem,6vw,4.5rem) 0; background:var(--sta-cream); }
.sta-itin__grid { display:grid; grid-template-columns:minmax(240px,.85fr) 2fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
.sta-itin__intro { display:flex; flex-direction:column; gap:1rem; }
.sta-itin__title { font-size:clamp(1.5rem,2.6vw,2rem); }
.sta-itin__text { margin:0; color:var(--sta-muted); line-height:1.6; max-width:34ch; }
.sta-itin__intro .sta-btn { align-self:flex-start; margin-top:.3rem; }

.sta-itin__stage { position:relative; }
.sta-carousel--itin .sta-carousel__slide--itin { width:calc((100% - 2 * 1.25rem) / 3); }
.sta-itin-card__link { position:relative; display:block; aspect-ratio:4/5; border-radius:var(--sta-radius); overflow:hidden; text-decoration:none; box-shadow:var(--sta-shadow); }
.sta-itin-card__media { position:absolute; inset:0; background:#33493b center/cover no-repeat; transition:transform .5s ease; }
.sta-itin-card__link:hover .sta-itin-card__media { transform:scale(1.05); }
.sta-itin-card__overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.74) 100%); }
.sta-itin-card__content { position:absolute; inset:auto 0 0 0; padding:1.1rem; color:#fff; display:flex; flex-direction:column; gap:.35rem; }
.sta-itin-card__title { font-family:var(--sta-font-display); text-transform:uppercase; font-weight:600; letter-spacing:.03em; font-size:1.1rem; line-height:1.1; }
.sta-itin-card__duree { font-size:.8rem; color:rgba(255,255,255,.85); }

/* arrows empilées verticalement à droite */
.sta-carousel__nav-stack { position:absolute; right:-20px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:.6rem; }
.sta-carousel--itin .sta-carousel__nav { position:static; transform:none; width:40px; height:40px; }
.sta-carousel--itin .sta-carousel__nav:hover { transform:translateY(-1px); }

/* =========================================================
   6) AGENDA
   ========================================================= */
.sta-agenda { padding:clamp(2rem,4vw,3rem) var(--sta-gutter); background:var(--sta-cream); }
.sta-agenda__panel { max-width:var(--sta-wrap); margin-inline:auto; background:var(--sta-green); color:#fff; border-radius:var(--sta-radius-lg); padding:clamp(1.6rem,3vw,2.4rem); display:grid; grid-template-columns:minmax(220px,.7fr) 2fr; gap:clamp(1.4rem,3vw,2.4rem); align-items:center; position:relative; outline:1.5px dashed rgba(255,255,255,.28); outline-offset:-12px; }
.sta-agenda__intro { display:flex; gap:1rem; align-items:flex-start; }
.sta-agenda__icon { flex:0 0 auto; width:42px; height:42px; color:var(--sta-orange); }
.sta-agenda__icon svg { width:100%; height:100%; }
.sta-agenda__title { margin:0 0 .5rem; font-family:var(--sta-font-display); text-transform:uppercase; font-weight:600; letter-spacing:.03em; line-height:1.1; font-size:clamp(1.15rem,2vw,1.5rem); }
.sta-agenda__text { margin:0 0 1rem; color:rgba(241,236,225,.8); font-size:.9rem; line-height:1.55; }
.sta-agenda__list { position:relative; }
.sta-agenda__next { right:-14px; background:var(--sta-orange); color:#fff; border-color:transparent; box-shadow:0 12px 24px -12px rgba(0,0,0,.6); }
.sta-agenda__next:hover { background:var(--sta-orange-dark); color:#fff; }

.sta-event-card__link { position:relative; display:block; aspect-ratio:5/4; border-radius:var(--sta-radius); overflow:hidden; text-decoration:none; box-shadow:var(--sta-shadow); }
.sta-event-card__media { position:absolute; inset:0; background:#33493b center/cover no-repeat; }
.sta-event-card__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.12) 30%, rgba(0,0,0,.74) 100%); }
.sta-event-card__badge { position:absolute; top:12px; left:12px; z-index:2; min-width:52px; background:var(--sta-paper); border-radius:10px; padding:.35rem .5rem .4rem; text-align:center; line-height:1; box-shadow:0 6px 14px -6px rgba(0,0,0,.5); }
.sta-event-card__label { display:block; font-family:var(--sta-font-display); text-transform:uppercase; letter-spacing:.04em; font-size:.5rem; color:var(--sta-muted); margin-bottom:.15rem; }
.sta-event-card__day { display:block; font-family:var(--sta-font-display); font-weight:700; font-size:1.5rem; color:var(--sta-orange); }
.sta-event-card__day sup { font-size:.55em; }
.sta-event-card__month { display:block; font-family:var(--sta-font-display); text-transform:uppercase; letter-spacing:.06em; font-size:.6rem; color:var(--sta-ink); }
.sta-event-card__content { position:absolute; inset:auto 0 0 0; z-index:2; padding:.9rem 1rem 1rem; color:#fff; display:flex; flex-direction:column; gap:.2rem; }
.sta-event-card__title { font-family:var(--sta-font-display); font-weight:600; font-size:1.02rem; line-height:1.12; }
.sta-event-card__place { font-size:.78rem; color:rgba(255,255,255,.82); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px) {
	.sta-emotions__grid { grid-template-columns:repeat(3,1fr); }
	.sta-carousel__slide--site { width:calc((100% - 2 * 1.25rem) / 3); }
	.sta-carousel--itin .sta-carousel__slide--itin { width:calc((100% - 1.25rem) / 2); }
	.sta-carousel__slide--event { width:calc((100% - 1rem) / 2); }
	.sta-carte__grid { grid-template-columns:1fr; }
	.sta-carte__stage { min-height:440px; }
	.sta-itin__grid { grid-template-columns:1fr; align-items:stretch; }
	.sta-carousel__nav-stack { right:6px; }
	.sta-agenda__panel { grid-template-columns:1fr; }
}

@media (max-width:680px) {
	.sta-emotions__grid { grid-template-columns:repeat(2,1fr); }
	.sta-carousel__slide--site { width:calc((100% - 1.25rem) / 2); }
	.sta-carousel--itin .sta-carousel__slide--itin,
	.sta-carousel__slide--event { width:100%; }
	.sta-carousel__nav--prev { left:-8px; }
	.sta-carousel__nav--next { right:-8px; }
	.sta-inc__head { flex-direction:column; gap:.4rem; }
	.sta-carte__card { width:min(220px,70%); }
	.sta-hero__badge::before, .sta-hero__badge::after { display:none; }
}

@media (max-width:420px) {
	.sta-emotions__grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.sta-carousel__track { transition:none; }
	.sta-hero__bg { transform:none; }
	* { scroll-behavior:auto; }
}