/*
Theme Name: LyonSeVisite
Theme URI: https://lyonsevisite.fr
Author: Tutovisuel
Author URI: https://jevisitelyon.com
Description: Thème WordPress pour LyonSeVisite, club de passionnés de Lyon proposant visites, balades et sorties culturelles autour du patrimoine, de l'histoire, de la gastronomie et des lieux insolites de la région lyonnaise.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lyonsevisite
*/

/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */
:root {
  --color-primary:  #0b316c;       /* bleu Rhône/Saône */
  --color-primary-dark: #123344;
  --color-primary-light: #3f7896;
  --color-accent: #c9973a;        /* or / Fourvière */
  --color-terracotta: #c1663f;    /* brique lyonnaise */
  --color-cream: #faf6ef;
  --color-dark: #23272a;
  --color-gray: #6b7280;
  --color-light-gray: #f0eee7;
  --color-white: #ffffff;
  --font-heading: 'Georgia', 'Times New Roman', serif;
  --font-body: 'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(27, 75, 102, 0.08);
  --shadow-hover: 0 16px 40px rgba(27, 75, 102, 0.16);
  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-dark);
  background: var(--color-white);
  line-height: 1.65;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color .2s ease; }
.single-sortie-layout a { color: var(--color-terracotta);}
a:hover { color: var(--color-accent); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; margin: 16px 0 }
p { margin: 0 0 1.2em; }
.container { max-width: 980px; margin: 0 auto; padding: 0; }
.screen-reader-text { position: absolute !important; left: -9999px; }

/* ==========================================================================
   2. BOUTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary, #ral-reservation .btn-primary  { background: var(--color-accent); color: var(--color-white); }
.btn-primary:hover { background: var(--color-terracotta); color: var(--color-white); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-outline { background: transparent; border-color: var(--color-white); color: var(--color-white); }
.btn-outline:hover { background: var(--color-white); color: var(--color-primary-dark); transform: translateY(-2px); }
.btn-dark { background: var(--color-primary); color: var(--color-white); }
.btn-dark:hover { background: var(--color-primary-dark); color: var(--color-white); transform: translateY(-2px); }

/* ==========================================================================
   3. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
	background-color: white;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:12px;
}
.site-branding { display: flex; align-items: center; gap: 12px; }
.site-branding img { max-width:200px; max-height:auto; display:block;}
.site-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0;
}
.site-title a { color: inherit; }
.site-description { font-size: .78rem; color: var(--color-gray); margin: 0; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--color-primary-dark);
}
.main-navigation ul { display: flex; gap: 6px; align-items: center; }
.main-navigation a {
  display: block;
  padding: 10px 12px;
  color: var(--color-dark);
  font-weight: 600;
  font-size: .95rem;
  border-radius: 30px;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a { background: var(--color-light-gray); color: var(--color-primary); }
.main-navigation .btn-adhesion a { background: var(--color-accent); color: var(--color-white); padding: 10px 22px; }
.main-navigation .btn-adhesion a:hover { background: var(--color-terracotta); color: var(--color-white); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .main-navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
	  padding: 32px;
  }
  .main-navigation.is-open { display: block; }
  .main-navigation ul { flex-direction: column; align-items: stretch; padding: 12px; gap: 2px; }
  .main-navigation a { padding: 14px 18px; }
}

/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 64px 24px;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  z-index:0;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(201,151,58,.25), transparent 55%);
}
.hero-content { position: relative; z-index:1; max-width: 800px; margin: 0 auto; text-align: center; }
.hero-content h1 { color: var(--color-white); }
.hero-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(255,255,255,.1);
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 20px;
}
.hero-lead { font-size: 1.15rem; color: rgba(255,255,255,.88); }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.imghero {display:block; width:100%; border-radius:20px}
.hero-slideshow { position: relative; display: block; width: 100%; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; }
.hero-slideshow .imghero { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; opacity: 0; transition: opacity 1.4s ease; }
.hero-slideshow .imghero.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-slideshow .imghero { transition: none; } }

/* ==========================================================================
   5. SECTIONS GÉNÉRIQUES
   ========================================================================== */
.section { padding: 64px 24px; }
.section-alt { background: var(--color-cream); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-terracotta);
  display: block;
  margin-bottom: 10px;
}
.section-subtitle { color: var(--color-gray); font-size: 1.05rem; }

/* ==========================================================================
   6. CARTES / GRILLES
   ========================================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  border: 1px solid rgba(27,75,102,.06);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.card-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-light-gray);
  border-radius: 50%;
  font-size: 1.6rem;
  margin-bottom: 18px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--color-gray); margin-bottom: 0; font-size: .95rem; }

.avantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.avantage-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-white);
  padding: 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.avantage-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.avantage-item h4 { margin: 0 0 6px; font-family: var(--font-body); font-size: 1.02rem; color: var(--color-primary-dark); }
.avantage-item p { margin: 0; font-size: .92rem; color: var(--color-gray); }

/* ==========================================================================
   7. SORTIES (Custom Post Type)
   ========================================================================== */
.sorties-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}
.sorties-toolbar a {
  padding: 8px 18px;
  border-radius: 30px;
  background: var(--color-light-gray);
  color: var(--color-dark);
  font-size: .88rem;
  font-weight: 600;
}
.sorties-toolbar a.is-active,
.sorties-toolbar a:hover { background: var(--color-primary); color: var(--color-white); }

.sorties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.sortie-card {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.sortie-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.sortie-thumb { aspect-ratio: 4/3; background: var(--color-light-gray); position: relative; overflow: hidden; display: block; }
.sortie-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sortie-card:hover .sortie-thumb img { transform: scale(1.05); }
.sortie-thumb .sortie-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--color-accent); color: var(--color-white);
  padding: 5px 14px; border-radius: 30px; font-size: .75rem; font-weight: 700;
}
.sortie-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sortie-body h3 { margin-bottom: 0; font-size: 1.15rem; }
.sortie-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .82rem; color: var(--color-gray); }
.sortie-meta span { display: inline-flex; align-items: center; gap: 5px; }
.sortie-excerpt { color: var(--color-gray); font-size: .92rem; flex: 1; }
.sortie-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.sortie-price { font-weight: 700; color: var(--color-primary); }
.sortie-price small { display: block; font-weight: 400; color: var(--color-gray); font-size: .72rem; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--color-gray); }

/* Single sortie */
.single-sortie-hero { border-radius: var(--radius); margin-bottom: 40px; overflow: hidden; }
.single-sortie-hero img { width: 100%; height: auto; display: block; }
.single-sortie-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.sortie-content { font-size: 1.02rem; }
.sortie-sidebar { background: var(--color-cream); border-radius: var(--radius); padding: 28px; position: sticky; top: 100px; }
.sortie-sidebar dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; font-size: .92rem; margin-bottom: 22px; }
.sortie-sidebar dt { color: var(--color-gray); font-weight: 600; }
.sortie-sidebar dd { margin: 0; font-weight: 600; }
.sortie-sidebar .btn { width: 100%; justify-content: center; }
.sortie-sidebar #ral-reservation .form-grid { grid-template-columns: 1fr; }
.sortie-sidebar #ral-reservation h3 { font-size: 1.05rem; }
.sortie-sidebar #ral-reservation .btn { width: auto; }
@media (max-width: 900px) { .single-sortie-layout { grid-template-columns: 1fr; } .sortie-sidebar { position: static; } }

/* ==========================================================================
   8. CTA
   ========================================================================== */
.cta-section {
  background: linear-gradient(135deg, var(--color-terracotta), var(--color-accent));
  color: var(--color-white);
  padding: 70px 24px;
  border-radius: var(--radius);
  text-align: center;
  margin: 0 auto;
}
.cta-section h2 { color: var(--color-white); }
.cta-section p { color: rgba(255,255,255,.9); }

/* ==========================================================================
   9. ADHÉSION
   ========================================================================== */
.membership-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 28px; margin-top: 40px; }
.membership-card { background: var(--color-white); border: 2px solid var(--color-light-gray); border-radius: var(--radius); padding: 34px 28px; text-align: center; }
.membership-card.is-featured { border-color: var(--color-accent); box-shadow: var(--shadow-hover); transform: scale(1.03); }
.membership-price { font-family: var(--font-heading); font-size: 2.2rem; color: var(--color-primary); margin: 14px 0; }
.membership-price span { font-size: 1rem; color: var(--color-gray); font-family: var(--font-body); }
.membership-card ul { text-align: left; margin: 20px 0; }
.membership-card li { padding: 7px 0; font-size: .92rem; display: flex; gap: 8px; }
.membership-card li::before { content: "✓"; color: var(--color-accent); font-weight: 700; }

```css
/* =========================================================
   PAGE ADHÉSION
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.membership-hero {
	padding: 90px 24px 80px;
}

.membership-hero .hero-content {
	max-width: 850px;
	margin: 0 auto;
	text-align: center;
}

.membership-hero h1 {
	max-width: 800px;
	margin: 16px auto 0;
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.hero-intro {
	max-width: 680px;
	margin: 24px auto 0;
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--color-light-gray);
}


/* ---------------------------------------------------------
   AVANTAGES
   --------------------------------------------------------- */

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin-top: 48px;
}

.benefit {
	text-align: center;
	padding: 10px 12px;
}

.benefit-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 58px;
	height: 58px;
	margin: 0 auto 20px;

	border-radius: 50%;
	background: var(--color-light, #f5f2ec);

	font-size: 1.6rem;
	line-height: 1;
}

.benefit h3 {
	margin: 0 0 10px;
	font-size: 1.1rem;
	line-height: 1.3;
}

.benefit p {
	margin: 0;
	font-size: .95rem;
	line-height: 1.65;
	color: var(--color-gray);
}


/* ---------------------------------------------------------
   FORMULES D'ADHÉSION
   --------------------------------------------------------- */

.membership-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	max-width: 900px;
	margin: 48px auto 0;
}

.membership-card {
	position: relative;

	padding: 40px 36px;

	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 16px;

	box-shadow: 0 8px 30px rgba(0, 0, 0, .05);
}

.membership-card.is-featured {
	border: 2px solid var(--color-primary);
	transform: translateY(-6px);
}

.membership-card h3 {
	margin: 0 0 16px;
	font-size: 1.35rem;
}

.membership-price {
	margin-bottom: 12px;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.membership-price span {
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-gray);
	letter-spacing: 0;
}

.membership-description {
	min-height: 48px;
	margin: 0 0 24px;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--color-gray);
}

.membership-card ul {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.membership-card li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 13px;
	font-size: .95rem;
	line-height: 1.5;
}

.membership-card li::before {
	content: "✓";

	position: absolute;
	left: 0;
	top: 0;

	font-weight: 700;
	color: var(--color-primary);
}

.membership-card .button {
	display: inline-block;
	width: 100%;
	text-align: center;
}


/* ---------------------------------------------------------
   BADGE
   --------------------------------------------------------- */

.membership-badge {
	display: inline-block;
	margin-bottom: 18px;
	padding: 6px 12px;

	border-radius: 999px;
	background: var(--color-primary);
	color: #fff;

	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .04em;
}


/* ---------------------------------------------------------
   SECTION HEADER
   --------------------------------------------------------- */

.membership-grid + * {
	/* évite une éventuelle collision avec les styles
	   génériques du thème */
}

.section-header > p {
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	color: var(--color-gray);
	line-height: 1.7;
}


/* ---------------------------------------------------------
   FORMULAIRE
   --------------------------------------------------------- */

#adhesion {
	scroll-margin-top: 100px;
}

#adhesion .section-header {
	margin-bottom: 40px;
}


/* ---------------------------------------------------------
   TABLETTE
   --------------------------------------------------------- */

@media (max-width: 900px) {

	.benefits-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.membership-grid {
		max-width: 760px;
	}

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

	.membership-hero {
		padding: 64px 20px 56px;
	}

	.membership-hero h1 {
		font-size: clamp(2rem, 9vw, 2.8rem);
	}

	.hero-intro {
		font-size: 1rem;
		line-height: 1.6;
	}

	.benefits-grid {
		grid-template-columns: 1fr;
		gap: 36px;
		margin-top: 36px;
	}

	.benefit {
		max-width: 400px;
		margin: 0 auto;
	}

	.membership-grid {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 36px;
	}

	.membership-card {
		padding: 32px 24px;
	}

	.membership-card.is-featured {
		transform: none;
	}

	.membership-description {
		min-height: 0;
	}

}



/* ==========================================================================
   10. FORMULAIRES
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--color-light-gray);
  font-family: var(--font-body);
  font-size: .95rem;
  background: var(--color-white);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-primary-light); }
.form-notice { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-size: .92rem; }
.form-notice.success { background: #e6f4ea; color: #1e6b34; }
.form-notice.error { background: #fbe7e7; color: #a12727; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   11. CONTACT
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.contact-info-item { display: flex; gap: 14px; margin-bottom: 22px; }
.contact-info-item .icon { width: 42px; height: 42px; border-radius: 50%; background: var(--color-light-gray); display:flex; align-items:center; justify-content:center; flex: 0 0 auto; }
.contact-map { border-radius: var(--radius); overflow: hidden; margin-top: 24px; box-shadow: var(--shadow); }
.contact-map iframe { width: 100%; height: 280px; border: 0; display: block; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   12. BLOG
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 30px; }
.post-card { background: var(--color-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.post-card .post-thumb { aspect-ratio: 16/10; background: var(--color-light-gray) center/cover no-repeat; }
.post-card .post-body { padding: 20px; }
.post-meta { font-size: .8rem; color: var(--color-gray); margin-bottom: 8px; }
.single-post-content { max-width: 760px; margin: 0 auto; font-size: 1.05rem; }
.single-post-content img { border-radius: var(--radius); margin: 24px 0; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer { background: var(--color-primary-dark); color: rgba(255,255,255,.85); padding: 70px 24px 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-grid h4 { color: var(--color-white); font-family: var(--font-body); font-size: 1rem; margin-bottom: 16px; }
.footer-grid p, .footer-grid a { color: rgba(255,255,255,.72); font-size: .9rem; }
.footer-grid ul li { margin-bottom: 10px; }
.footer-brand .site-title { color: var(--color-white); }
.footer-brand .site-description { color: rgba(255,255,255,.65); margin: 10px 0 18px; }
.social-links { display: flex; gap: 10px; }
.social-links a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.social-links a:hover { background: var(--color-accent); }
.footer-bottom { text-align: center; padding: 22px 0; font-size: .82rem; color: rgba(255,255,255,.55); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   14. UTILITAIRES
   ========================================================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-40 { margin-top: 40px; }
.alignwide { max-width: var(--container); margin-left: auto; margin-right: auto; }

/* ==========================================================================
   15. CALENDRIER DES SORTIES
   ========================================================================== */
.lsv-cal { max-width: 420px; margin: 0 auto 40px; background: var(--color-white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.lsv-cal[hidden] { display: none; }
.lsv-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lsv-cal-title { margin: 0; font-size: 1.1rem; }
.lsv-cal-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-light-gray); background: var(--color-white); color: var(--color-primary-dark); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.lsv-cal-nav:hover { background: var(--color-light-gray); }
.lsv-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lsv-cal-dayname { text-align: center; font-size: .75rem; font-weight: 700; color: var(--color-gray); padding: 4px 0; }
.lsv-cal-day { position: relative; display: flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 8px; font-family: var(--font-body); font-size: .9rem; color: var(--color-dark); background: none; border: 1px solid transparent; padding: 0; }
.lsv-cal-day.is-empty { pointer-events: none; }
.lsv-cal-day.is-past { color: #c9c9c9; }
.lsv-cal-day.is-today { border-color: var(--color-primary-light); }
.lsv-cal-day.has-event { background: var(--color-cream); border-color: var(--color-accent); color: var(--color-primary-dark); font-weight: 700; cursor: pointer; }
.lsv-cal-day.has-event:hover { background: var(--color-light-gray); }
.lsv-cal-day.is-selected { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.lsv-cal-dot { position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }
.lsv-cal-day.is-selected .lsv-cal-dot { background: var(--color-white); }
.lsv-cal-status { margin: 12px 0 0; text-align: center; font-size: .88rem; color: var(--color-gray); }
.lsv-cal-status:empty { display: none; }
.lsv-cal-reset { background: none; border: none; padding: 0; font: inherit; color: var(--color-primary); text-decoration: underline; cursor: pointer; }



/* Style de la carte d'article */
.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Vignette / Conteneur d'image */
.post-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9; /* Garantit une hauteur fixe et propre */
    overflow: hidden;
    background-color: #f0f0f0;
}

.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Rempli le rectangle sans déformer l'image */
    transition: transform 0.3s ease;
}

.post-card:hover .post-thumb img {
    transform: scale(1.05); /* Effet zoom au survol */
}

.home-agenda{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:40px;
    align-items:start;
}

.home-agenda .lsv-cal{
    margin:0;
    max-width:none;
}

.home-agenda-list .sorties-grid{
    display:flex;
    flex-direction:column;
    gap:20px;
}
.home-agenda-list .sortie-card{
    display:grid;
    grid-template-columns:220px 1fr;
    overflow:hidden;
}

.home-agenda-list .sortie-thumb{
    height:100%;
    aspect-ratio:auto;
}

.home-agenda-list .sortie-body{
    padding:20px 24px;
}

@media (max-width:860px){

    .home-agenda{
        grid-template-columns:1fr;
    }

    .home-agenda .lsv-cal{
        margin:0 auto 30px;
        max-width:420px;
		width:100%;
    }

    .home-agenda-list .sortie-card{
        grid-template-columns:1fr;
    }

    .home-agenda-list .sortie-thumb{
        aspect-ratio:16/9;
    }
}

@media (min-width:680px){
	.home-agenda .lsv-cal{
		position: sticky;
		top: 90px; /* hauteur du header + marge */
		margin: 0;
		max-width: none;
	}
	.header-inner {
		padding: 12px 0;
	}
}