/* Accueil validé par le propriétaire le 30 septembre 2026. */
.home-preview { --hp-teal: #126781; --hp-rose: #92354a; --hp-muted: #52616a; }
.home-preview .hp-preview { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: var(--hp-muted); margin-bottom: 1.2rem; }
.home-preview .hp-preview a { color: var(--hp-teal); text-underline-offset: 4px; }
.home-preview .hp-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.home-preview .hp-main { min-width: 0; }
.home-preview .hp-eyebrow { margin: 0 0 .7rem; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--hp-teal); }
.home-preview .hp-hero { border-radius: 20px; padding: 2.6rem 2.4rem 2rem; background: linear-gradient(115deg, #e5f5f7, #f0f8f5); border: 1px solid #d7eaeb; }
.home-preview .hp-hero h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -.025em; }
.home-preview .hp-hero h1 span { color: var(--hp-teal); }
.home-preview .hp-intro { margin: 1.15rem 0 1.4rem; color: #354d58; font-size: 1.08rem; max-width: 40ch; }
.home-preview .hp-button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; background: var(--hp-teal); color: white; padding: .8rem 1.2rem; border-radius: 8px; text-decoration: none; font-weight: 700; min-height: 48px; line-height: 1.4; }
.home-preview .hp-button:hover { background: #0d5268; }
.home-preview .hp-reassurance { margin: .8rem 0 0; color: #405862; font-size: .88rem; }
.home-preview .hp-occasions { padding-top: 2rem; scroll-margin-top: 1rem; }
.home-preview .hp-section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1.1rem; flex-wrap: wrap; }
.home-preview .hp-section-head .hp-eyebrow { margin-bottom: .35rem; }
.home-preview h2 { font-size: 1.65rem; font-weight: 700; }
.home-preview .hp-free { color: #296247; font-size: .8rem; }
.home-preview .hp-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.home-preview .hp-theme { display: block; overflow: hidden; border: 1px solid #e1e6e7; border-radius: 12px; background: white; text-decoration: none; color: #263940; transition: box-shadow .15s; }
.home-preview .hp-theme:hover { box-shadow: 0 5px 18px #223e481a; border-color: #8ebac7; }
.home-preview .hp-theme-image { display: block; aspect-ratio: 560 / 416; background: #e7eff0; }
.home-preview .hp-theme-image img { width: 100%; height: 100%; object-fit: cover; }
.home-preview .hp-theme-label { display: flex; justify-content: space-between; gap: .4rem; padding: .75rem; font-weight: 700; }
.home-preview .hp-theme-label > span { color: var(--hp-teal); }
.home-preview .hp-all { display: flex; height: 100%; min-height: 190px; flex-direction: column; justify-content: center; gap: .65rem; padding: 1rem; border-radius: 12px; text-decoration: none; background: #e6f1f3; color: var(--hp-teal); }
.home-preview .hp-all > span:last-child { font-size: .85rem; }
.home-preview .hp-all-symbol { font-size: 2rem; line-height: 1; }
.home-preview .hp-paper { background: #f5eae4; border: 1px solid #ead8ce; border-radius: 20px; padding: 1.3rem 1.1rem; }
.home-preview .hp-paper .hp-eyebrow { color: var(--hp-rose); line-height: 1.6; font-size: .73rem; }
.home-preview .hp-paper h2 { font-size: 1.75rem; color: #633445; }
.home-preview .hp-paper > p:not(.hp-eyebrow) { font-size: .95rem; color: #644f51; }
.home-preview .hp-paper-feature { display: block; width: 78%; margin: 1.7rem auto; }
.home-preview .hp-button-paper { background: var(--hp-rose); padding-inline: .65rem; font-size: .95rem; width: 100%; }
.home-preview .hp-button-paper:hover { background: #77263b; }
.home-preview .hp-paper .hp-paper-note { text-align: center; font-size: .78rem; }
.home-preview .hp-paper h3 { font-size: 1.2rem; padding-top: 1.3rem; margin-top: 1.2rem; border-top: 1px solid #dec7bc; }
.home-preview .hp-paper-links { list-style: none; padding: 0; margin: .65rem 0 0; }
.home-preview .hp-paper-links a { color: #633445; display: flex; justify-content: space-between; padding: .65rem 0; text-decoration: none; border-bottom: 1px solid #e5d3ca; }
.home-preview .hp-paper-links a:hover { text-decoration: underline; }
.home-preview .hp-how { margin-top: 2.5rem; border-block: 1px solid #dce4e6; padding: 1.7rem 0; }
.home-preview .hp-how ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; padding: 0; margin: 1.5rem 0 0; }
.home-preview .hp-how li { display: flex; gap: .75rem; }
.home-preview .hp-how li > span { display: grid; place-items: center; border-radius: 50%; width: 2rem; height: 2rem; flex-shrink: 0; background: #dceef1; color: var(--hp-teal); font-weight: 700; }
.home-preview .hp-how p { margin: .2rem 0 0; color: var(--hp-muted); font-size: .9rem; }
.home-preview .hp-directory { padding-top: 2rem; scroll-margin-top: 1rem; }
.home-preview .hp-directory ul { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; list-style: none; padding: 0; }
.home-preview .hp-directory a { display: inline-block; padding-block: .5rem; color: var(--hp-teal); text-underline-offset: 4px; }
.home-preview a:focus-visible { outline: 3px solid #126781; outline-offset: 4px; }
/* Bloc éditorial illustré : texte et carte se remplacent pour chaque événement. */
.home-preview .hp-hero--event { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 1.5rem; padding: 2rem 1.6rem; background: radial-gradient(ellipse at 90% 15%, #ffe2ac, transparent 65%), #fff3e3; border-color: #f0d8b9; }
.home-preview .hp-hero-copy { min-width: 0; }
.home-preview .hp-hero--event h1 { font-size: clamp(2rem, 3.1vw, 2.8rem); }
.home-preview .hp-hero--event h1 span, .home-preview .hp-hero--event .hp-eyebrow { color: var(--event-strong, #964010); }
.home-preview .hp-hero--event .hp-intro { color: #604a39; font-size: 1rem; margin-block: 1rem; }
.home-preview .hp-hero--event .hp-button { background: var(--event-strong, #963f13); font-size: .95rem; padding-inline: .9rem; }
.home-preview .hp-hero--event .hp-button:hover { filter: brightness(.85); }
.home-preview .hp-hero--event .hp-reassurance { color: #654e3d; font-size: .8rem; }
.home-preview .hp-hero--card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 1.5rem; padding: 2rem 1.6rem; }
.home-preview .hp-hero-card--generic { color: var(--hp-teal); box-shadow: 0 12px 28px #1f9ec426; transform: rotate(-2deg); }
.home-preview .hp-hero-card--generic .hp-hero-card-image { background: #e5f5f7; }
.home-preview .hp-hero-card { display: block; min-width: 0; padding: .5rem; border-radius: 12px; background: white; color: #713c1f; box-shadow: 0 12px 28px #6e3e1426; text-decoration: none; transform: rotate(2deg); }
.home-preview .hp-hero-card-image { display: block; overflow: hidden; border-radius: 7px; background: #f8ebd7; }
.home-preview .hp-hero-card img { width: 100%; height: auto; }
.home-preview .hp-hero-card-caption { display: flex; justify-content: space-between; gap: .5rem; padding: .7rem .35rem .3rem; font-size: .85rem; font-weight: 700; }
.home-preview .hp-hero-card:hover .hp-hero-card-caption { text-decoration: underline; }
@media (min-width: 621px) and (max-width: 1050px) {
  .home-preview .hp-hero--event, .home-preview .hp-hero--card { grid-template-columns: minmax(0, 1fr); }
  .home-preview .hp-hero-card { max-width: 340px; width: 100%; margin-inline: auto; }
}
@media (max-width: 900px) {
  .home-preview .hp-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .home-preview .hp-hero { padding: 1.7rem; }
  .home-preview .hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .home-preview .hp-layout { grid-template-columns: minmax(0, 1fr); }
  .home-preview .hp-main { display: contents; }
  .home-preview .hp-hero { order: 0; padding: 1.5rem 1.2rem; }
  .home-preview .hp-hero--event, .home-preview .hp-hero--card { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .home-preview .hp-hero-card { max-width: 340px; width: 100%; margin-inline: auto; transform: none; }
  .home-preview .hp-paper { order: 1; display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: .5rem 1rem; }
  .home-preview .hp-paper > * { margin: 0; grid-column: 1; }
  .home-preview .hp-paper h2 { font-size: 1.5rem; }
  .home-preview .hp-paper-feature { grid-column: 2; grid-row: 1 / 4; width: 100%; align-self: center; margin: 0; }
  .home-preview .hp-paper .hp-button { grid-column: 1 / -1; margin-top: .5rem; }
  .home-preview .hp-paper .hp-paper-note { grid-column: 1 / -1; }
  .home-preview .hp-paper h3, .home-preview .hp-paper-links { display: none; }
  .home-preview .hp-occasions { order: 2; padding-top: 1rem; }
  .home-preview .hp-how ol { grid-template-columns: 1fr; }
  .home-preview .hp-theme-label { font-size: .95rem; padding: .7rem .6rem; }
  .home-preview .hp-grid { gap: .75rem; }
}

/* Couleurs par événement (style du calendrier data/spotlight) ; Halloween garde la mise en page validée. */
.home-preview .hp-hero--noel { --event-strong: #8a1c2b; background: radial-gradient(ellipse at 90% 15%, #d9f0e3, transparent 65%), #f1f8f3; border-color: #cfe5d6; }
.home-preview .hp-hero--voeux { --event-strong: #1f5f8a; background: radial-gradient(ellipse at 90% 15%, #dbe9f7, transparent 65%), #f2f6fb; border-color: #cddcec; }

/* Un repère de date, puis deux attentions à envoyer : hiérarchie commune. */
.home-preview .hp-name-days { display: grid; grid-template-columns: auto minmax(0, max-content) minmax(0, max-content); align-items: center; justify-content: start; gap: 1.5rem; margin: 1.1rem .15rem; color: var(--hp-muted); font-size: .9rem; line-height: 1.5; order: 1; }
.home-preview .hp-name-days time { display: flex; flex-direction: column; padding-right: 1.5rem; border-right: 1px solid #d5dfe3; white-space: nowrap; color: #263940; }
.home-preview .hp-name-days__weekday { font-size: .78rem; color: var(--hp-muted); }
.home-preview .hp-name-days time strong { font-size: 1rem; }
.home-preview .hp-name-days p { margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.home-preview .hp-name-days p > span { font-size: .8rem; }
.home-preview .hp-name-days a { color: var(--hp-teal); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.home-preview .hp-name-days a:hover { text-decoration-thickness: 2px; }
.home-preview .hp-name-days + .hp-calendar { margin-top: 0; }
@media (max-width: 900px) {
  .home-preview .hp-name-days { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .65rem 1rem; }
  .home-preview .hp-name-days time { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: .35rem; border-right: 0; padding: 0 0 .5rem; border-bottom: 1px solid #d5dfe3; }
  .home-preview .hp-name-days__weekday { font-size: 1rem; color: #263940; }
}
@media (max-width: 620px) {
  .home-preview .hp-name-days { margin: 0 .15rem; }
}

/* Agenda secondaire sous la une : deux colonnes lisibles, sans tronquer les titres. */
.home-preview .hp-calendar { margin: 1.5rem 0 1.8rem; padding: 1.1rem 1.2rem .5rem; border: 1px solid #e1e8eb; border-radius: 14px; background: white; }
.home-preview .hp-calendar .hp-section-head { margin-bottom: .7rem; align-items: center; gap: .5rem; }
.home-preview .hp-calendar h2 { font-size: 1.4rem; }
.home-preview .hp-calendar__all { font-size: .9rem; font-weight: 700; color: #126781; text-decoration: none; }
.home-preview .hp-calendar__all:hover { text-decoration: underline; }
.home-preview .hp-calendar__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.3rem; }
.home-preview .hp-calendar__list li { min-width: 0; }
.home-preview .hp-calendar__item { min-width: 0; display: flex; align-items: center; gap: .85rem; border-top: 1px solid #e9eef0; padding: .8rem .2rem; text-decoration: none; color: #1f2430; height: 100%; }
.home-preview a.hp-calendar__item:hover { color: #126781; background: #f4fafb; }
.home-preview .hp-calendar__text { min-width: 0; flex: 1; }
.home-preview .hp-calendar__text strong { font-size: .95rem; line-height: 1.35; display: block; overflow-wrap: anywhere; }
.home-preview .hp-calendar__arrow { color: #126781; }
.home-preview .event-date { width: 2.8rem; height: 2.8rem; }
.home-preview .event-date__day { font-size: 1.25rem; }
@media (max-width: 700px) {
  .home-preview .hp-calendar { order: 1; margin: .25rem 0; padding: 1rem .85rem .4rem; }
  .home-preview .hp-calendar__list { grid-template-columns: 1fr; gap: 0; }
  .home-preview .hp-calendar__item { padding: .65rem 0; gap: .7rem; }
  .home-preview .hp-calendar h2 { font-size: 1.25rem; }
  .home-preview .hp-calendar__all { font-size: .85rem; }
}