/* ========================================================== * Agenda Page — Style "Poster Moderne" (markup actuel) * Vue:
* Groupes: .day-group > h2 + .events-list.grid * Cards: .poster-link > .poster(.poster--noimg?) > .media + .meta * ========================================================== */ :root { --accent: #FF6233; --bg: #f7f7fb; --surface: #ffffff; --text: #111827; --muted: #6b7280; --border: #e5e7eb; --shadow-1: 0 4px 12px rgba(0,0,0,0.05); --shadow-hover: 0 12px 32px rgba(255, 98, 51, 0.15); --radius: 16px; } /* IMPORTANT: internal.php pose data-theme sur , pas sur :root “logique” */ html[data-theme="dark"] { --bg: #0b0e14; --surface: #151a23; --text: #e8edf5; --muted: #9aa4b2; --border: #2a3241; --shadow-1: 0 6px 16px rgba(0,0,0,0.40); --shadow-hover: 0 12px 32px rgba(0,0,0,0.60); } /* ========================================================== * Page shell * ========================================================== */ .agenda-page-body { background: var(--bg); color: var(--text); font-family: 'Montserrat', sans-serif; margin: 0; transition: background 0.25s ease, color 0.25s ease; } .agenda-page { max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } /* Accessibilité / SEO : H1 invisible */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ========================================================== * CTA Haut de page — "Proposer un événement" * markup: .agenda-submit-cta > .agenda-submit-cta__content ... * ========================================================== */ .agenda-submit-cta { margin: 1.25rem 0 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; } .agenda-submit-cta__content { display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; position: relative; } .agenda-submit-cta__content::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 98, 51, 0.12), rgba(255, 98, 51, 0.02)); pointer-events: none; } html[data-theme="dark"] .agenda-submit-cta__content::before { background: linear-gradient(90deg, rgba(255, 98, 51, 0.18), rgba(255, 98, 51, 0.03)); } .agenda-submit-cta__icon { width: 56px; height: 56px; border-radius: 14px; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(255, 98, 51, 0.25); z-index: 1; } .agenda-submit-cta__text { z-index: 1; } .agenda-submit-cta__text h2 { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 800; color: var(--text); } .agenda-submit-cta__text p { margin: 0; font-size: 0.95rem; color: var(--muted); line-height: 1.5; } .agenda-submit-cta__action { z-index: 1; display: flex; justify-content: flex-end; } .agenda-submit-cta__btn { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 999px; padding: 0.7rem 1.1rem; font-weight: 800; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow: 0 10px 24px rgba(255, 98, 51, 0.25); } .agenda-submit-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255, 98, 51, 0.35); } @media (max-width: 700px) { .agenda-submit-cta__content { grid-template-columns: 56px 1fr; grid-template-areas: "icon text" "action action"; padding: 1rem; } .agenda-submit-cta__action { justify-content: flex-start; margin-top: 0.25rem; } .agenda-submit-cta__btn { width: 100%; justify-content: center; } } /* ========================================================== * Controls / Filtres * markup: .agenda-controls + .date-search-wrapper + .filters ... * ========================================================== */ .agenda-controls { margin-bottom: 2.5rem; } .agenda-subtitle { font-size: 1.1rem; color: var(--muted); margin-bottom: 1.5rem; } /* Date search */ .date-search-wrapper { margin-bottom: 1.5rem; } .date-search { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--surface); padding: 0.6rem 1rem; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-1); } .date-search label { font-weight: 700; font-size: 0.9rem; color: var(--text); } .date-search input { border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.6rem; background: var(--bg); color: var(--text); font-family: inherit; cursor: pointer; color-scheme: light dark; /* important */ } html[data-theme="dark"] .date-search input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.85; } .date-search button { background: var(--accent); border: none; color: white; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: .2s; } .date-search button:hover { background: #d14e26; } /* Switchs */ .filters { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; } .filters nav { display: flex; flex-wrap: wrap; gap: 0.5rem; } .filters button { background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: all 0.2s ease; } .filters button:hover { border-color: var(--accent); color: var(--accent); } /* Ton JS met .active (d’après ton CSS) */ .filters button.active { background: var(--accent); border-color: var(--accent); color: white; box-shadow: 0 4px 10px rgba(255, 98, 51, 0.3); } /* Bouton "Tout afficher" */ .show-all-btn { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 0.5rem 1rem; border-radius: 99px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .show-all-btn.active, .show-all-btn:hover { background: var(--accent); border-color: var(--accent); color: white; box-shadow: 0 4px 10px rgba(255, 98, 51, 0.3); } /* Footer CTA show all */ .show-all-footer-wrapper { margin-top: 2rem; text-align: center; } .show-all-footer-wrapper .show-all-btn { width: auto; display: inline-flex; } /* ========================================================== * SSR notice (3 prochains jours) * markup: .ssr-notice + .ssr-notice-content + .ssr-trigger-btn * ========================================================== */ .ssr-notice { margin: 2.5rem auto 0; max-width: 640px; background: var(--surface); border: 2px solid var(--accent); border-radius: 16px; padding: 1rem; text-align: center; box-shadow: 0 4px 15px rgba(255, 98, 51, 0.10); display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .ssr-notice-content { display: flex; align-items: center; gap: 1rem; color: var(--text); text-align: left; } .ssr-notice-content i { color: var(--accent); } .ssr-notice-title { margin: 0; } .ssr-notice-content p { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--muted); } .ssr-trigger-btn { background: var(--accent); color: white; border: none; padding: 0.8rem 1.5rem; border-radius: 99px; font-weight: 800; font-size: 1rem; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .ssr-trigger-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 98, 51, 0.40); } @media (max-width: 600px) { .ssr-notice-content { flex-direction: column; text-align: center; } .ssr-notice { width: 100%; box-sizing: border-box; } } /* ========================================================== * Content layout * markup: .content + .day-group + .events-list.grid * ========================================================== */ .content { min-height: 200px; } /* Ton markup:

... */ .day-group { margin-bottom: 2.25rem; } .day-group > h2 { margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--border); color: var(--text); font-size: 1.35rem; font-weight: 900; letter-spacing: -0.01em; } /* Ton markup:
*/ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; } /* ========================================================== * Poster cards * ========================================================== */ .poster-link { text-decoration: none; color: inherit; display: block; height: 100%; } .poster { position: relative; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); border: 1px solid var(--border); transition: transform 0.25s ease, box-shadow 0.25s ease; height: 100%; display: flex; flex-direction: column; } .poster:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } /* Media ratio 4:3 */ .poster .media { position: relative; aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden; } /* Image */ .poster .media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.5s ease; display: block; } .poster:hover .media img { transform: scale(1.05); } /* No image */ .poster--noimg .media { display: grid; place-items: center; background: color-mix(in srgb, var(--text) 6%, transparent); } .poster--noimg .media i { color: color-mix(in srgb, var(--text) 55%, transparent); } /* SVG mask (logo) */ .pepite-logo-svg { position: absolute; bottom: 8px; right: 8px; width: 45px; height: 45px; z-index: 5; background-color: var(--accent); opacity: 0.9; -webkit-mask: url('/assets/brand/PpiT.svg') no-repeat center / contain; mask: url('/assets/brand/PpiT.svg') no-repeat center / contain; pointer-events: none; } /* Actions */ .poster-actions { position: absolute; top: 10px; right: 10px; z-index: 6; display: flex; gap: 0.5rem; } .btn-action { width: 36px; height: 36px; border-radius: 999px; background: var(--surface); color: var(--text); border: 1px solid var(--border); display: grid; place-items: center; cursor: pointer; transition: .18s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.18); } .btn-action:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.06); } /* Meta */ .poster .meta { padding: 1rem; background: var(--surface); border-top: 1px solid var(--border); flex-grow: 1; display: flex; flex-direction: column; gap: .35rem; } .poster .meta .date { font-size: 0.8rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; } .poster .meta .title { font-size: 1.05rem; font-weight: 900; line-height: 1.25; color: var(--text); margin: 0; } .poster .meta .place { font-size: 0.92rem; color: var(--muted); margin-top: auto; display: flex; align-items: center; gap: 0.4rem; } /* Price block (dans ta vue:
...) */ .poster .meta .price { margin-top: .35rem; font-size: .92rem; font-weight: 800; color: var(--text); display: inline-flex; align-items: center; gap: .45rem; } /* ========================================================== * Bloc éditorial SEO (bas de page) * markup:
... * ========================================================== */ .agenda-seo-text{ position: relative; max-width: 1120px; margin: clamp(2rem, 5vw, 3.5rem) auto 0; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; } .agenda-seo-text::before{ content:""; position:absolute; inset:0 auto 0 0; width:6px; background: var(--accent); pointer-events:none; } .agenda-seo-text::after{ content:""; position:absolute; inset:-40% -20% auto auto; width:420px; height:420px; background: radial-gradient( circle, rgba(255, 98, 51, 0.14) 0%, transparent 70% ); pointer-events:none; } html[data-theme="dark"] .agenda-seo-text::after{ background: radial-gradient( circle, rgba(255, 98, 51, 0.18) 0%, transparent 70% ); } .agenda-seo-text h2{ position: relative; z-index: 1; margin: 0 0 .6rem; font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 900; letter-spacing: -0.01em; color: var(--text); line-height: 1.2; } .agenda-seo-text p{ position: relative; z-index: 1; margin: 0; max-width: 85ch; color: var(--muted); font-size: 0.98rem; line-height: 1.7; } .agenda-seo-text a{ color: var(--accent); font-weight: 800; text-decoration: none; } .agenda-seo-text a:hover{ text-decoration: underline; text-underline-offset: 2px; } /* ========================================================== * Responsive * ========================================================== */ @media (max-width: 850px) { .filters { display: none; } .show-all-footer-wrapper { display: block; } } @media (max-width: 600px){ .agenda-page { padding: 1.5rem 1rem 3rem; } .day-group > h2 { font-size: 1.2rem; } .grid { gap: 1.25rem; } }