/* ============================================================================= Playbook Core — Socle visuel (Lot 3) - Mobile-first, breakpoints 375 / 768 / 1024 / 1280 - Variables CSS exclusivement (injectées par PHP dans + utilitaires ici) ========================================================================== */ /* --- Variables utilitaires (mots-clés + rgba, jamais d'hex) ---------------- */ :root { --pb-color-surface: white; --pb-color-on-primary: white; --pb-color-border: rgba(0, 0, 0, 0.08); --pb-color-text-muted: rgba(0, 0, 0, 0.6); --pb-color-overlay-dark: rgba(0, 0, 0, 0.4); --pb-color-light-overlay: rgba(255, 255, 255, 0.06); --pb-color-on-dark: rgba(255, 255, 255, 0.85); --pb-color-on-dark-muted: rgba(255, 255, 255, 0.65); --pb-color-on-dark-faint: rgba(255, 255, 255, 0.5); --pb-shadow-light: 0 2px 12px rgba(0, 0, 0, 0.06); --pb-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08); --pb-radius: 8px; --pb-radius-sm: 6px; --pb-header-height: 72px; --pb-container-max: 1200px; --pb-container-padding: 20px; } /* --- Reset léger + base --------------------------------------------------- */ .d12s-body, .d12s-body * { box-sizing: border-box; } .d12s-body { margin: 0; font-family: var(--pb-font-body); font-size: 16px; line-height: 1.7; color: var(--pb-color-text); background: var(--pb-color-bg); padding-top: var(--pb-header-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } @media (min-width: 1024px) { .d12s-body { font-size: 17px; } } .d12s-body h1, .d12s-body h2, .d12s-body h3, .d12s-body h4, .d12s-body h5, .d12s-body h6 { font-family: var(--pb-font-title); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--pb-color-heading); margin: 0 0 0.6em; } .d12s-body a { color: var(--pb-color-accent); text-decoration: none; transition: color 0.2s ease; } .d12s-body a:hover { color: var(--pb-color-heading); } .d12s-body img { max-width: 100%; height: auto; display: block; } .d12s-body p { margin: 0 0 1em; } .d12s-container { width: 100%; max-width: var(--pb-container-max); margin: 0 auto; padding: 0 var(--pb-container-padding); } /* --- Bouton CTA ----------------------------------------------------------- */ .d12s-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border: 0; border-radius: var(--pb-radius-sm); font-family: var(--pb-font-body); font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: filter 0.2s ease, transform 0.2s ease; } .d12s-btn--cta { background: var(--pb-color-accent); color: var(--pb-color-on-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .d12s-btn--cta:hover { filter: brightness(0.92); transform: translateY(-1px); color: var(--pb-color-on-accent); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24); } /* ============================================================================= HEADER — sticky, fond surface, ombre au scroll, navigation responsive ========================================================================== */ .d12s-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255, 255, 255, 0.82); /* Effet « verre dépoli » moderne : fond translucide + flou d'arrière-plan. Fallback automatique sur fond surface plein pour les navigateurs sans support. */ -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); border-bottom: 1px solid var(--pb-color-border); transition: box-shadow 0.25s ease, background 0.25s ease; } @supports not (backdrop-filter: blur(1px)) { .d12s-header { background: var(--pb-color-surface); } } .d12s-header.is-scrolled { background: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); border-bottom-color: transparent; } .d12s-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--pb-header-height); gap: 24px; } .d12s-header__brand { font-family: var(--pb-font-title); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--pb-color-heading); text-decoration: none; transition: opacity 0.2s ease; } .d12s-header__brand:hover { color: var(--pb-color-heading); opacity: 0.78; } .d12s-header__brand-text { line-height: 1; } /* --- Nav desktop ---------------------------------------------------------- */ .d12s-nav { display: flex; align-items: center; gap: 28px; } .d12s-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; } .d12s-nav__list > li { position: relative; } .d12s-nav__list a { display: inline-block; font-family: var(--pb-font-body); font-weight: 500; font-size: 0.95rem; color: var(--pb-color-text); text-decoration: none; padding: 8px 14px; border-radius: 999px; position: relative; transition: color 0.2s ease, background 0.2s ease; } .d12s-nav__list a:hover { color: var(--pb-color-heading); background: rgba(0, 0, 0, 0.05); } .d12s-nav__item--current > .d12s-nav__link { color: var(--pb-color-heading); font-weight: 600; background: rgba(0, 0, 0, 0.06); } /* CTA du header : pill arrondi à fort contraste, légère ombre pour l'élévation. Spécificité accrue (.d12s-btn.d12s-header__cta) pour gagner sur d'éventuelles règles tierces (ex: thème GeneratePress) qui forceraient une couleur de lien sur les du header. */ .d12s-btn.d12s-header__cta, .d12s-btn.d12s-header__cta:hover, .d12s-btn.d12s-header__cta:focus, .d12s-btn.d12s-header__cta:active { border-radius: 999px; padding: 9px 20px; font-size: 0.92rem; color: var(--pb-color-on-accent); background: var(--pb-color-accent); } /* Sous-menus */ .d12s-nav__list .sub-menu { display: none; position: absolute; top: 100%; left: 0; margin: 4px 0 0; padding: 8px; min-width: 220px; list-style: none; background: var(--pb-color-surface); box-shadow: var(--pb-shadow-medium); border-radius: var(--pb-radius); } .d12s-nav__list li:hover > .sub-menu { display: block; } .d12s-nav__list .sub-menu a { display: block; padding: 8px 12px; border-radius: var(--pb-radius-sm); } .d12s-nav__list .sub-menu a::after { display: none; } .d12s-nav__list .sub-menu a:hover { background: var(--pb-color-bg); } .d12s-header__cta { margin-left: 8px; } /* --- Burger mobile -------------------------------------------------------- */ .d12s-burger { display: none; background: transparent; border: 0; cursor: pointer; padding: 8px; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .d12s-burger span { display: block; width: 24px; height: 2px; background: var(--pb-color-primary); border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; } /* ============================================================================= MOBILE (< 1024px) : burger + menu slide-in ========================================================================== */ @media (max-width: 1023px) { .d12s-burger { display: flex; } .d12s-nav { position: fixed; top: var(--pb-header-height); left: 0; right: 0; bottom: 0; background: var(--pb-color-surface); flex-direction: column; align-items: stretch; gap: 0; padding: 20px 0; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .d12s-nav.is-open { transform: translateX(0); } .d12s-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .d12s-nav__list > li { border-bottom: 1px solid var(--pb-color-border); } .d12s-nav__list > li > a { display: block; padding: 16px 24px; min-height: 44px; font-size: 1.05rem; } .d12s-nav__list a::after { display: none; } .d12s-nav__list .sub-menu { position: static; display: block; background: transparent; box-shadow: none; border-radius: 0; padding: 0 0 12px 16px; } .d12s-header__cta { margin: 16px 24px; text-align: center; min-height: 44px; } /* Animation burger → X */ .d12s-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .d12s-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .d12s-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Verrouille le scroll quand le menu est ouvert */ .d12s-body.d12s-menu-open { overflow: hidden; } } /* ============================================================================= MAIN — contenu de la page générique ========================================================================== */ .d12s-main { padding: 40px 0 80px; } @media (min-width: 1024px) { .d12s-main { padding: 60px 0 100px; } } .d12s-page-content { max-width: 800px; margin: 0 auto; } .d12s-page-header { margin-bottom: 30px; } .d12s-page-title { font-size: 2.2rem; margin: 0; } @media (min-width: 1024px) { .d12s-page-title { font-size: 3rem; } } .d12s-page-body { font-size: 1rem; line-height: 1.7; } .d12s-page-body p { margin: 0 0 1.2em; } /* ============================================================================= FOOTER — 3 zones strictes Zone 1 : éditorial (couleur primary) Zone 2 : maillage SEO géographique (secondary, légèrement plus sombre) Zone 3 : copyright + légal (overlay-dark) ========================================================================== */ .d12s-footer { margin-top: 80px; color: var(--pb-color-on-primary); } /* --- Zone 1 : navigation éditoriale --------------------------------------- */ .d12s-footer__zone--main { background: var(--pb-color-primary); padding: 60px 0; } .d12s-footer__zone1-grid { display: grid; gap: 40px; grid-template-columns: 1fr; } @media (min-width: 768px) { .d12s-footer__zone1-grid { grid-template-columns: 1.4fr 2fr; } } .d12s-footer__sitename { font-family: var(--pb-font-title); font-weight: 700; font-size: 1.4rem; color: var(--pb-color-on-primary); margin-bottom: 12px; } .d12s-footer__desc { color: var(--pb-color-on-dark); margin: 0 0 20px; line-height: 1.6; max-width: 380px; } .d12s-footer__social { display: flex; gap: 12px; } .d12s-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pb-color-light-overlay); color: var(--pb-color-on-primary); transition: background 0.2s ease, color 0.2s ease; } .d12s-footer__social-link:hover { background: var(--pb-color-accent); color: var(--pb-color-on-accent); } .d12s-footer__menus { display: grid; gap: 30px; grid-template-columns: 1fr; } @media (min-width: 768px) { .d12s-footer__menus { grid-template-columns: 1fr 1fr; } } .d12s-footer__menu { list-style: none; padding: 0; margin: 0; } .d12s-footer__menu li { margin-bottom: 10px; } .d12s-footer__menu a { color: var(--pb-color-on-dark); text-decoration: none; font-size: 0.95rem; transition: color 0.2s ease; } .d12s-footer__menu a:hover { color: var(--pb-color-accent); } /* --- Zone 2 : maillage SEO géographique ----------------------------------- */ .d12s-footer__zone--mesh { background: var(--pb-color-secondary); padding: 50px 0; border-top: 1px solid var(--pb-color-light-overlay); } .d12s-footer__mesh-title { font-family: var(--pb-font-title); font-weight: 600; font-size: 1rem; color: var(--pb-color-on-secondary); margin: 0 0 28px; text-align: center; letter-spacing: 0.02em; text-transform: uppercase; } .d12s-footer__mesh-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .d12s-footer__mesh-col { font-size: 0.85rem; } .d12s-footer__mesh-region { font-family: var(--pb-font-title); font-size: 0.95rem; font-weight: 600; margin: 0 0 10px; } .d12s-footer__mesh-region a { color: var(--pb-color-on-secondary); text-decoration: none; } .d12s-footer__mesh-region a:hover { color: var(--pb-color-accent); } .d12s-footer__mesh-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; } .d12s-footer__mesh-list li { margin: 0; } .d12s-footer__mesh-list a { color: var(--pb-color-on-dark-muted); text-decoration: none; font-size: 0.82rem; transition: color 0.2s ease; } .d12s-footer__mesh-list a:hover { color: var(--pb-color-on-primary); } /* --- Zone 3 : copyright + légal ------------------------------------------- */ .d12s-footer__zone--copyright { background: var(--pb-color-overlay-dark); padding: 18px 0; } .d12s-footer__copyright-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } .d12s-footer__copyright { margin: 0; font-size: 0.85rem; color: var(--pb-color-on-dark-faint); } .d12s-footer__legal { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 20px; font-size: 0.85rem; } .d12s-footer__legal li { margin: 0; } .d12s-footer__legal a { color: var(--pb-color-on-dark-muted); text-decoration: none; transition: color 0.2s ease; } .d12s-footer__legal a:hover { color: var(--pb-color-on-primary); } /* --- Accessibilité -------------------------------------------------------- */ .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; } /* ============================================================================= LOT 4 — FICHE ÉVÉNEMENT (single-evenement.php) ========================================================================== */ /* --- Variables locales additionnelles ---------------------------------- */ :root { --pb-color-fb: #1877F2; --pb-color-wa: #25D366; --pb-color-status-annule: #777777; --pb-color-status-reporte: #c47a00; --pb-color-edito-bg: rgba(0, 0, 0, 0.03); --pb-color-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } /* --- Fil d'ariane ------------------------------------------------------ */ .d12s-breadcrumb { background: var(--pb-color-bg); padding: 14px 0; font-size: 0.85rem; color: var(--pb-color-text-muted); border-bottom: 1px solid var(--pb-color-border); } .d12s-breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .d12s-breadcrumb__list a { color: var(--pb-color-heading); text-decoration: none; transition: color 0.2s ease; } .d12s-breadcrumb__list a:hover { color: var(--pb-color-accent); } .d12s-breadcrumb__sep { opacity: 0.5; user-select: none; } .d12s-breadcrumb__list [aria-current="page"] { color: var(--pb-color-text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Hero -------------------------------------------------------------- */ .d12s-single-hero { position: relative; width: 100%; height: 400px; overflow: hidden; background: linear-gradient(135deg, var(--pb-color-primary), var(--pb-color-secondary)); } @media (min-width: 1024px) { .d12s-single-hero { height: 500px; } } .d12s-single-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .d12s-single-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85) 100%); } .d12s-single-hero--gradient .d12s-single-hero__overlay { background: linear-gradient(135deg, rgba(0,0,0,0.25), rgba(0,0,0,0.5)); } .d12s-single-hero__content { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 0; color: var(--pb-color-on-primary); } .d12s-single-hero__badge { display: inline-block; padding: 4px 12px; background: var(--pb-color-accent); color: var(--pb-color-on-accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--pb-radius-sm); margin-bottom: 14px; } .d12s-single-hero__badge--passe { background: rgba(0, 0, 0, 0.5); } .d12s-single-hero__badge--annule { background: var(--pb-color-status-annule); } .d12s-single-hero__badge--reporte { background: var(--pb-color-status-reporte); } .d12s-single-hero__title { font-size: 1.8rem; font-weight: 700; color: var(--pb-color-on-primary); margin: 0 0 12px; line-height: 1.15; max-width: 900px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } @media (min-width: 1024px) { .d12s-single-hero__title { font-size: 2.8rem; } } .d12s-single-hero__accroche { font-size: 1.05rem; color: var(--pb-color-on-dark); margin: 0 0 16px; max-width: 720px; } .d12s-single-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 0.95rem; color: var(--pb-color-on-dark); } .d12s-single-hero__meta-item { display: inline-flex; align-items: center; gap: 8px; } .d12s-single-hero__meta-sep { opacity: 0.5; } /* --- Grille 2 colonnes ------------------------------------------------- */ .d12s-single-body { padding: 40px 0 80px; } @media (min-width: 1024px) { .d12s-single-body { padding: 60px 0 100px; } } .d12s-single-grid { display: grid; gap: 40px; grid-template-columns: 1fr; } .d12s-single-main { min-width: 0; order: 2; } .d12s-single-aside { min-width: 0; order: 1; } @media (min-width: 1024px) { .d12s-single-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; } /* Sur desktop : main à gauche, aside à droite (ordre du DOM) */ .d12s-single-main { order: 1; } .d12s-single-aside { order: 2; } .d12s-single-aside__inner { position: sticky; top: calc(var(--pb-header-height) + 24px); } } /* --- Blocs éditoriaux (colonne principale) ----------------------------- */ .d12s-bloc { margin: 0 0 40px; } .d12s-bloc:last-child { margin-bottom: 0; } .d12s-bloc__title { font-family: var(--pb-font-title); font-weight: 700; font-size: 1.6rem; color: var(--pb-color-heading); margin: 0 0 20px; position: relative; padding-bottom: 14px; } .d12s-bloc__title::after { content: ''; display: block; width: 48px; height: 3px; background: var(--pb-color-accent); position: absolute; bottom: 0; left: 0; } @media (min-width: 1024px) { .d12s-bloc__title { font-size: 1.9rem; } } /* Prose : line-height & largeur de lecture confortable */ .d12s-prose { line-height: 1.8; max-width: 65ch; font-size: 1rem; color: var(--pb-color-text); } .d12s-prose p { margin: 0 0 1.2em; } .d12s-prose p:last-child { margin-bottom: 0; } .d12s-prose strong { font-weight: 600; } .d12s-prose ul, .d12s-prose ol { margin: 0 0 1.2em; padding-left: 1.5em; } .d12s-prose li { margin-bottom: 0.4em; } .d12s-prose h2 { font-size: 1.3rem; margin: 1.8em 0 0.6em; } .d12s-prose h3 { font-size: 1.15rem; margin: 1.5em 0 0.5em; } .d12s-prose a { color: var(--pb-color-accent); text-decoration: underline; } /* --- bloc_description --- */ .d12s-bloc-description__body { font-size: 1rem; } /* --- bloc_edito : encart à fond légèrement contrasté + grand guillemet --- */ .d12s-bloc-edito { position: relative; background: var(--pb-color-edito-bg); border-radius: 12px; padding: 40px 32px 32px; overflow: hidden; } .d12s-bloc-edito__quote { position: absolute; top: 16px; left: 16px; color: var(--pb-color-accent); opacity: 0.15; pointer-events: none; } .d12s-bloc-edito__title { position: relative; margin-top: 24px; } .d12s-bloc-edito__body { position: relative; } /* --- bloc_faq : accordéon -------------------------------------------- */ .d12s-faq-list { border-top: 1px solid var(--pb-color-border); } .d12s-faq-item { border-bottom: 1px solid var(--pb-color-border); } .d12s-faq-item summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--pb-color-heading); font-weight: 600; font-size: 1.02rem; -webkit-tap-highlight-color: transparent; } .d12s-faq-item summary::-webkit-details-marker { display: none; } .d12s-faq-item summary::marker { content: ''; } .d12s-faq-item__icon { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; } .d12s-faq-item__icon::before, .d12s-faq-item__icon::after { content: ''; position: absolute; background: var(--pb-color-accent); border-radius: 1px; } .d12s-faq-item__icon::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); } .d12s-faq-item__icon::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); transition: transform 0.3s ease, opacity 0.2s ease; } .d12s-faq-item[open] .d12s-faq-item__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; } .d12s-faq-item__answer { overflow: hidden; } .d12s-faq-item__answer-inner { padding: 0 0 18px; color: var(--pb-color-text-muted); } /* --- bloc_places_offertes -------------------------------------------- */ .d12s-bloc-places { background: var(--pb-color-primary); color: var(--pb-color-on-primary); border-radius: 12px; padding: 32px; } .d12s-bloc-places__title { color: var(--pb-color-on-primary); margin-top: 0; /* Text-shadow défensif : garantit la lisibilité même si l'utilisateur choisit un primaire dont la luminance rend le contraste avec le texte limite (ratio WCAG sous 4.5). L'ombre sombre donne un contour de définition au texte clair. */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .d12s-bloc-places__title::after { background: var(--pb-color-accent); } .d12s-bloc-places__form-slot { background: var(--pb-color-light-overlay); border: 1px dashed var(--pb-color-on-dark-faint); border-radius: 8px; min-height: 120px; display: flex; align-items: center; justify-content: center; margin-top: 20px; } .d12s-bloc-places__placeholder { margin: 0; color: var(--pb-color-on-dark-muted); font-style: italic; } /* --- COLONNE LATÉRALE : infos pratiques + CTA --------------------------- */ .d12s-bloc-infos { background: var(--pb-color-surface); border-radius: 12px; padding: 24px; box-shadow: var(--pb-color-card-shadow); border-left: 4px solid var(--pb-color-accent); } .d12s-bloc-infos__title { font-family: var(--pb-font-title); font-weight: 700; font-size: 1.05rem; color: var(--pb-color-heading); margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.02em; } .d12s-bloc-infos__list { list-style: none; margin: 0; padding: 0; } .d12s-bloc-infos__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--pb-color-border); } .d12s-bloc-infos__item:last-child { border-bottom: 0; } .d12s-bloc-infos__icon { flex-shrink: 0; color: var(--pb-color-accent); margin-top: 2px; } .d12s-bloc-infos__content { min-width: 0; } .d12s-bloc-infos__label { font-weight: 600; font-size: 0.82rem; color: var(--pb-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .d12s-bloc-infos__value { font-size: 0.95rem; color: var(--pb-color-text); line-height: 1.5; } .d12s-bloc-infos__actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; } /* Boutons utilitaires aside */ .d12s-btn--block { width: 100%; } .d12s-btn--sm { padding: 8px 16px; font-size: 0.85rem; } .d12s-btn--outline { background: transparent; /* Bordure et texte héritent de la couleur du parent via currentColor : le bouton est donc TOUJOURS lisible quel que soit le fond (sur section primary, le parent a color = on-primary → le bouton hérite et reste visible). */ border: 1px solid currentColor; color: inherit; } .d12s-btn--outline:hover { /* Hover neutre, indépendant de la palette : un léger voile sombre. Le texte conserve sa couleur (inherit), donc reste toujours lisible. */ background: rgba(0, 0, 0, 0.06); } /* --- bloc_cta_organisateur (latéral, sous infos) ----------------------- */ .d12s-cta-organisateur { margin-top: 20px; } .d12s-cta-organisateur--discret { background: var(--pb-color-surface); border: 1px solid var(--pb-color-border); border-radius: 8px; padding: 20px; } .d12s-cta-organisateur__text { margin: 0 0 12px; font-size: 0.95rem; color: var(--pb-color-text); } .d12s-cta-organisateur--plein.d12s-btn { margin-top: 20px; } /* --- Partage social --------------------------------------------------- */ .d12s-share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--pb-color-border); } .d12s-share__label { font-size: 0.85rem; color: var(--pb-color-text-muted); font-weight: 600; margin-right: 6px; } .d12s-share__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pb-radius-sm); font-size: 0.85rem; font-weight: 600; font-family: var(--pb-font-body); color: var(--pb-color-on-primary); text-decoration: none; border: 0; cursor: pointer; transition: filter 0.2s ease, transform 0.2s ease; } .d12s-share__btn:hover { filter: brightness(0.92); transform: translateY(-1px); color: var(--pb-color-on-primary); } .d12s-share__btn--fb { background: var(--pb-color-fb); } .d12s-share__btn--wa { background: var(--pb-color-wa); } .d12s-share__btn--copy { background: var(--pb-color-secondary); color: var(--pb-color-on-secondary); } .d12s-share__btn.is-copied { background: var(--pb-color-accent); color: var(--pb-color-on-accent); } /* ============================================================================= LOT 5 — Cards événements, grille responsive, page Agenda, taxonomies ========================================================================== */ /* --- GRILLE responsive ------------------------------------------------- */ .d12s-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin: 0; } @media (min-width: 768px) { .d12s-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .d12s-grid { grid-template-columns: repeat(3, 1fr); } } /* --- CARD ÉVÉNEMENT ---------------------------------------------------- */ .d12s-card { background: var(--pb-color-surface); border-radius: 12px; overflow: hidden; /* Ombre + bordure légère : assurent la visibilité des cards même si la couleur de fond du site est proche du blanc (sinon les cards « disparaissent » dans le fond). */ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; } .d12s-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .d12s-card__link { display: block; color: inherit; text-decoration: none; } .d12s-card__link:hover { color: inherit; } .d12s-card__media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--pb-color-primary), var(--pb-color-secondary)); overflow: hidden; } .d12s-card__image { width: 100%; height: 100%; object-fit: cover; display: block; } .d12s-card__image--placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--pb-color-primary), var(--pb-color-secondary)); } .d12s-card__badge { position: absolute; top: 12px; left: 12px; background: var(--pb-color-accent); color: var(--pb-color-on-accent); padding: 4px 10px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; z-index: 2; } .d12s-card__badge--passe { background: rgba(0, 0, 0, 0.5); } .d12s-card__badge--annule { background: var(--pb-color-status-annule); } .d12s-card__badge--reporte { background: var(--pb-color-status-reporte); } .d12s-card__date { position: absolute; bottom: 12px; left: 12px; background: rgba(0, 0, 0, 0.78); /* Fond TOUJOURS sombre (rgba noir fixe) → texte clair hardcodé pour garantir la lisibilité quelle que soit la palette utilisateur. */ color: #ffffff; padding: 8px 12px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; z-index: 2; } .d12s-card__date-day { font-family: var(--pb-font-title); font-size: 1.3rem; font-weight: 700; } .d12s-card__date-month { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.92; margin-top: 2px; } .d12s-card__body { padding: 16px; } .d12s-card__title { font-family: var(--pb-font-title); font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--pb-color-heading); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1rem * 1.35 * 2); } .d12s-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--pb-color-text-muted); } .d12s-card__city { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d12s-card__icon { flex-shrink: 0; opacity: 0.7; } .d12s-card__price { color: var(--pb-color-accent); font-weight: 600; flex-shrink: 0; } .d12s-card__price--free { color: var(--pb-color-accent); } /* --- LISTING : header + breadcrumb partagés --------------------------- */ .d12s-listing { padding: 0 0 80px; } .d12s-listing__header { padding: 32px 0 24px; } @media (min-width: 1024px) { .d12s-listing__header { padding: 48px 0 32px; } } .d12s-listing__title { font-family: var(--pb-font-title); font-size: 1.8rem; font-weight: 700; color: var(--pb-color-heading); margin: 0 0 16px; line-height: 1.2; } @media (min-width: 1024px) { .d12s-listing__title { font-size: 2.4rem; } } .d12s-listing__count { color: var(--pb-color-accent); font-weight: 700; } .d12s-listing__intro, .d12s-listing__editorial { font-size: 1rem; line-height: 1.7; color: var(--pb-color-text); max-width: 70ch; } .d12s-listing__editorial p { margin: 0 0 1em; } .d12s-listing__section-title { font-family: var(--pb-font-title); font-size: 1.15rem; font-weight: 700; color: var(--pb-color-heading); margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.04em; } .d12s-listing__results { padding: 16px 0 32px; } .d12s-listing__depts, .d12s-listing__other { padding: 24px 0; } .d12s-listing__other { background: var(--pb-color-edito-bg); margin-top: 40px; padding: 40px 0; } /* --- CHIPS (départements / régions) ----------------------------------- */ .d12s-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .d12s-chip { display: inline-block; padding: 6px 14px; background: var(--pb-color-surface); border: 1px solid var(--pb-color-border); border-radius: 999px; color: var(--pb-color-text); text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .d12s-chip:hover { background: var(--pb-color-primary); color: var(--pb-color-on-primary); border-color: var(--pb-color-heading); } /* --- FILTRES (form GET) ----------------------------------------------- */ .d12s-filters { padding: 16px 0 8px; } .d12s-filters--compact { padding: 8px 0; } .d12s-filters__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 16px; background: var(--pb-color-surface); border-radius: 12px; box-shadow: var(--pb-color-card-shadow); } .d12s-filters__field { display: flex; flex-direction: column; min-width: 0; flex: 1 1 160px; } .d12s-filters__field--search { flex: 2 1 220px; } .d12s-filters__label { font-size: 0.78rem; font-weight: 600; color: var(--pb-color-text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; } .d12s-filters__select, .d12s-filters__input { padding: 9px 12px; border: 1px solid var(--pb-color-border); border-radius: var(--pb-radius-sm); background: var(--pb-color-surface); font-family: var(--pb-font-body); font-size: 0.95rem; color: var(--pb-color-text); width: 100%; min-height: 40px; transition: border-color 0.2s ease; } .d12s-filters__select:focus, .d12s-filters__input:focus { outline: none; border-color: var(--pb-color-accent); } .d12s-filters__actions { display: flex; align-items: end; flex: 0 0 auto; } .d12s-filters__actions .d12s-btn { min-height: 40px; } /* --- PAGINATION ------------------------------------------------------- */ .d12s-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 40px 0 0; } .d12s-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--pb-radius-sm); background: var(--pb-color-surface); border: 1px solid var(--pb-color-border); color: var(--pb-color-heading); text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: background 0.2s ease, border-color 0.2s ease; } .d12s-pagination .page-numbers:hover { background: var(--pb-color-edito-bg); border-color: var(--pb-color-accent); } .d12s-pagination .current, .d12s-pagination .page-numbers.current { background: var(--pb-color-primary); color: var(--pb-color-on-primary); border-color: var(--pb-color-heading); } .d12s-pagination .dots { background: transparent; border: 0; } /* --- AUCUN RÉSULTAT --------------------------------------------------- */ .d12s-no-results { text-align: center; padding: 60px 20px; background: var(--pb-color-edito-bg); border-radius: 12px; color: var(--pb-color-text-muted); font-size: 1rem; } /* --- BLOC "DANS LA MÊME RÉGION" sur fiche événement ------------------- */ .d12s-similar { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--pb-color-border); } .d12s-similar__title { font-family: var(--pb-font-title); font-size: 1.4rem; font-weight: 700; color: var(--pb-color-heading); margin: 0 0 20px; position: relative; padding-bottom: 14px; } .d12s-similar__title::after { content: ''; display: block; width: 48px; height: 3px; background: var(--pb-color-accent); position: absolute; bottom: 0; left: 0; } @media (min-width: 1024px) { .d12s-similar__title { font-size: 1.7rem; } } /* ============================================================================= LOT 6 — Page d'accueil, "ce week-end" / "ce mois-ci", recherche, 404 ========================================================================== */ /* --- HERO PAGE D'ACCUEIL ----------------------------------------------- */ .d12s-home-hero { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pb-color-primary), var(--pb-color-secondary)); color: var(--pb-color-on-primary); padding: 60px 0; text-align: center; overflow: hidden; } .d12s-home-hero--with-image { background-size: cover; background-position: center; background-repeat: no-repeat; } /* Overlay garant du contraste WCAG AA sur image */ .d12s-home-hero--with-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.72)); z-index: 1; } .d12s-home-hero__inner { position: relative; z-index: 2; max-width: 880px; width: 100%; } .d12s-home-hero__title { font-family: var(--pb-font-title); font-weight: 700; color: var(--pb-color-on-primary); font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 16px; letter-spacing: -0.02em; line-height: 1.1; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); } .d12s-home-hero__subtitle { font-size: clamp(1rem, 2.4vw, 1.25rem); color: var(--pb-color-on-dark); margin: 0 0 36px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); } /* Barre de recherche rapide intégrée */ .d12s-home-hero__search { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; max-width: 720px; margin: 0 auto; text-align: left; } .d12s-home-hero__search-field { flex: 1 1 160px; display: flex; flex-direction: column; } .d12s-home-hero__search-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; color: var(--pb-color-on-dark); } .d12s-home-hero__search-select { padding: 10px 12px; border: 0; border-radius: var(--pb-radius-sm); background: var(--pb-color-surface); color: var(--pb-color-text); font-family: var(--pb-font-body); font-size: 0.95rem; min-height: 42px; } .d12s-home-hero__search-actions { flex: 0 0 auto; display: flex; align-items: end; } .d12s-home-hero__search-actions .d12s-btn { min-height: 42px; } .d12s-home-hero__more { margin: 22px 0 0; } .d12s-home-hero__more-link { color: var(--pb-color-on-primary); text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 1px; transition: border-color 0.2s ease; } .d12s-home-hero__more-link:hover { color: var(--pb-color-on-primary); border-bottom-color: var(--pb-color-accent); } /* --- SECTIONS HOME ----------------------------------------------------- */ .d12s-home-section { padding: 60px 0; } @media (min-width: 1024px) { .d12s-home-section { padding: 80px 0; } } .d12s-home-section--regions { background: var(--pb-color-edito-bg); } .d12s-home-section__head { margin-bottom: 32px; text-align: center; } .d12s-home-section__title { font-family: var(--pb-font-title); font-weight: 700; font-size: 1.6rem; color: var(--pb-color-heading); margin: 0 0 10px; letter-spacing: -0.01em; } @media (min-width: 1024px) { .d12s-home-section__title { font-size: 2rem; } } .d12s-home-section__sub { margin: 0; color: var(--pb-color-text-muted); font-size: 1rem; max-width: 60ch; margin: 0 auto; } .d12s-home-section__more { text-align: center; margin: 36px 0 0; } /* --- GRILLE DES RÉGIONS sur l'accueil ---------------------------------- */ .d12s-home-regions-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 768px) { .d12s-home-regions-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (min-width: 1024px) { .d12s-home-regions-grid { grid-template-columns: repeat(3, 1fr); } } .d12s-region-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--pb-color-surface); border: 1px solid var(--pb-color-border); border-radius: var(--pb-radius); text-decoration: none; color: var(--pb-color-text); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .d12s-region-card:hover { border-color: var(--pb-color-accent); transform: translateY(-2px); box-shadow: var(--pb-color-card-shadow); } .d12s-region-card__name { font-family: var(--pb-font-title); font-weight: 600; font-size: 1.05rem; color: var(--pb-color-heading); } .d12s-region-card__count { font-size: 0.85rem; color: var(--pb-color-text-muted); } /* --- SECTION CTA ACCUEIL ----------------------------------------------- */ .d12s-home-section--cta { padding: 80px 0; background: var(--pb-color-primary); } .d12s-home-cta { text-align: center; max-width: 640px; margin: 0 auto; color: var(--pb-color-on-primary); } .d12s-home-cta__title { font-family: var(--pb-font-title); font-weight: 700; color: var(--pb-color-on-primary); font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 0 0 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .d12s-home-cta__text { color: var(--pb-color-on-primary); opacity: 0.95; font-size: 1.05rem; margin: 0 0 24px; line-height: 1.6; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); } .d12s-btn--lg { padding: 14px 28px; font-size: 1rem; } /* --- PAGE 404 ---------------------------------------------------------- */ .d12s-404 { padding: 80px 0 100px; text-align: center; } .d12s-404__head { margin-bottom: 40px; } .d12s-404__code { font-family: var(--pb-font-title); font-weight: 800; font-size: clamp(5rem, 18vw, 9rem); color: var(--pb-color-accent); line-height: 1; margin: 0 0 14px; letter-spacing: -0.05em; } .d12s-404__title { font-family: var(--pb-font-title); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--pb-color-heading); margin: 0 0 14px; } .d12s-404__lede { font-size: 1.05rem; color: var(--pb-color-text-muted); max-width: 560px; margin: 0 auto; line-height: 1.7; } .d12s-404__search { display: flex; gap: 8px; max-width: 520px; margin: 0 auto 40px; flex-wrap: wrap; justify-content: center; } .d12s-404__search-input { flex: 1 1 240px; padding: 12px 14px; border: 1px solid var(--pb-color-border); border-radius: var(--pb-radius-sm); font-family: var(--pb-font-body); font-size: 1rem; background: var(--pb-color-surface); color: var(--pb-color-text); min-height: 44px; } .d12s-404__search-input:focus { outline: none; border-color: var(--pb-color-accent); } .d12s-404__links { margin-top: 40px; } .d12s-404__section-title { font-family: var(--pb-font-title); font-weight: 700; font-size: 1.05rem; color: var(--pb-color-heading); margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.04em; } .d12s-404__section-title--region { margin-top: 30px; } .d12s-404__links .d12s-chips { justify-content: center; } /* --- SUGGESTIONS SUR PAGE SEARCH SANS RÉSULTAT ------------------------- */ .d12s-listing__suggestions { margin-top: 40px; } /* ============================================================================= HOTFIX — Spécificité : titres sur fonds sombres doivent être lisibles La règle .d12s-body h1/h2/h3 (LOT 3) colore tous les titres en --pb-color-primary par défaut. On override ici les contextes où le fond est foncé (hero, CTA, footer mesh, sitename) pour qu'ils restent en --pb-color-on-primary (blanc) et parfaitement lisibles (WCAG AA). ========================================================================== */ .d12s-body .d12s-home-hero__title, .d12s-body .d12s-home-cta__title, .d12s-body .d12s-footer__sitename { color: var(--pb-color-on-primary); } .d12s-body .d12s-footer__mesh-title { color: var(--pb-color-on-dark); } /* ============================================================================= LOT 7 — Vue calendrier de la page Agenda ========================================================================== */ /* --- Sélecteur de vue (Liste / Calendrier) ----------------------------- */ .d12s-view-switch-wrap { padding: 8px 0; } .d12s-view-switch { display: inline-flex; gap: 4px; background: var(--pb-color-edito-bg); padding: 4px; border-radius: var(--pb-radius); } .d12s-view-switch__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--pb-radius-sm); color: var(--pb-color-text); background: transparent; text-decoration: none; font-family: var(--pb-font-body); font-weight: 500; font-size: 0.92rem; line-height: 1.2; transition: background 0.2s ease, color 0.2s ease; } .d12s-view-switch__btn:hover { background: var(--pb-color-surface); color: var(--pb-color-heading); } .d12s-view-switch__btn.is-active { background: var(--pb-color-primary); color: var(--pb-color-on-primary); } .d12s-view-switch__btn.is-active:hover { color: var(--pb-color-on-primary); } .d12s-view-switch__btn svg { opacity: 0.85; } /* --- Calendrier : conteneur + navigation ------------------------------- */ .d12s-calendar { margin-top: 16px; } .d12s-calendar__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--pb-color-border); margin-bottom: 20px; } .d12s-calendar__nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--pb-color-border); border-radius: var(--pb-radius-sm); background: var(--pb-color-surface); color: var(--pb-color-heading); text-decoration: none; font-family: var(--pb-font-body); font-weight: 500; font-size: 0.9rem; min-height: 40px; transition: background 0.2s ease, border-color 0.2s ease; } .d12s-calendar__nav-btn:hover { background: var(--pb-color-edito-bg); border-color: var(--pb-color-accent); color: var(--pb-color-heading); } .d12s-calendar__nav-label { display: none; } @media (min-width: 480px) { .d12s-calendar__nav-label { display: inline; } } .d12s-calendar__title { font-family: var(--pb-font-title); font-weight: 700; font-size: 1.2rem; color: var(--pb-color-heading); margin: 0; letter-spacing: -0.01em; text-transform: capitalize; text-align: center; flex: 1; } @media (min-width: 768px) { .d12s-calendar__title { font-size: 1.4rem; } } /* --- Grille calendrier desktop ----------------------------------------- */ .d12s-calendar__desktop { display: none; } .d12s-calendar__mobile { display: block; } @media (min-width: 768px) { .d12s-calendar__desktop { display: block; } .d12s-calendar__mobile { display: none; } } .d12s-calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; } .d12s-calendar__weekday { padding: 8px 6px; text-align: center; font-family: var(--pb-font-title); font-weight: 600; font-size: 0.78rem; color: var(--pb-color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .d12s-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: var(--pb-color-border); border-radius: var(--pb-radius); padding: 4px; } .d12s-calendar__day { background: var(--pb-color-surface); border-radius: var(--pb-radius-sm); padding: 8px 6px; min-height: 110px; position: relative; display: flex; flex-direction: column; } .d12s-calendar__day--out { background: var(--pb-color-edito-bg); } .d12s-calendar__day--out .d12s-calendar__daynum { color: var(--pb-color-text-muted); opacity: 0.5; } .d12s-calendar__day--today { background: var(--pb-color-surface); box-shadow: inset 0 0 0 2px var(--pb-color-accent); } .d12s-calendar__day--today .d12s-calendar__daynum { background: var(--pb-color-accent); color: var(--pb-color-on-accent); border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; } .d12s-calendar__daynum { font-family: var(--pb-font-title); font-weight: 700; font-size: 0.9rem; color: var(--pb-color-heading); margin-bottom: 4px; line-height: 1; } .d12s-calendar__events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .d12s-calendar__pill { display: block; padding: 3px 6px; font-size: 0.72rem; line-height: 1.25; color: var(--pb-color-heading); background: rgba(233, 69, 96, 0.12); /* --pb-color-accent atténué via rgba */ border-radius: 3px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--pb-color-accent); transition: background 0.15s ease; } .d12s-calendar__pill:hover { background: rgba(233, 69, 96, 0.22); color: var(--pb-color-heading); } /* Multi-day : visuel de continuité — bordures arrondies sélectives */ .d12s-calendar__pill--multi { background: rgba(233, 69, 96, 0.18); } .d12s-calendar__pill--multi.d12s-calendar__pill--start { border-radius: 3px 0 0 3px; } .d12s-calendar__pill--multi.d12s-calendar__pill--end { border-radius: 0 3px 3px 0; } .d12s-calendar__pill--multi:not(.d12s-calendar__pill--start):not(.d12s-calendar__pill--end) { border-radius: 0; } .d12s-calendar__more { display: block; padding: 3px 6px; font-size: 0.72rem; color: var(--pb-color-text-muted); font-weight: 600; text-decoration: none; } .d12s-calendar__more:hover { color: var(--pb-color-accent); } /* --- Calendrier MOBILE : liste chronologique compacte ------------------ */ .d12s-calendar__day-mobile { background: var(--pb-color-surface); border: 1px solid var(--pb-color-border); border-radius: var(--pb-radius); padding: 16px; margin-bottom: 12px; } .d12s-calendar__day-mobile--today { border-color: var(--pb-color-accent); } .d12s-calendar__day-mobile-label { font-family: var(--pb-font-title); font-weight: 700; font-size: 0.95rem; color: var(--pb-color-heading); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .d12s-calendar__today-badge { display: inline-block; padding: 2px 8px; background: var(--pb-color-accent); color: var(--pb-color-on-accent); border-radius: 3px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .d12s-calendar__day-mobile .d12s-calendar__pill { font-size: 0.88rem; padding: 8px 10px; white-space: normal; overflow: visible; text-overflow: clip; } /* ============================================================================= LOT 9 — Formulaires de captation de leads Mobile-first, breakpoints 768/1024. Toutes les couleurs via variables. ========================================================================== */ .d12s-form { background: var(--pb-color-surface); border: 1px solid var(--pb-color-border); border-radius: var(--pb-radius); padding: 24px; margin: 16px 0; font-family: var(--pb-font-body); } .d12s-form__title { font-family: var(--pb-font-title); font-size: 1.25rem; font-weight: 700; color: var(--pb-color-heading); margin: 0 0 16px; } /* --- Champs --------------------------------------------------------------- */ .d12s-form__field { margin-bottom: 16px; } .d12s-form__label { display: block; font-size: 0.92rem; font-weight: 600; color: var(--pb-color-heading); margin-bottom: 6px; } .d12s-form__input { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 1rem; font-family: inherit; color: var(--pb-color-heading); background: var(--pb-color-surface); border: 1px solid var(--pb-color-border); border-radius: var(--pb-radius-sm); transition: border-color .15s ease, box-shadow .15s ease; } .d12s-form__input:focus { outline: none; border-color: var(--pb-color-accent); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); } .d12s-form__textarea { min-height: 120px; resize: vertical; } .d12s-form__hint { font-size: 0.8rem; color: var(--pb-color-text-muted); margin-top: 4px; } /* --- Honeypot : invisible mais lisible des bots ---------------------------- */ .d12s-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- RGPD ---------------------------------------------------------------- */ .d12s-form__field--rgpd { margin-top: 20px; margin-bottom: 20px; } .d12s-form__rgpd { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--pb-color-heading); cursor: pointer; line-height: 1.4; } .d12s-form__rgpd input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--pb-color-accent); } .d12s-form__rgpd a { color: var(--pb-color-accent); text-decoration: underline; } /* --- Actions ------------------------------------------------------------- */ .d12s-form__actions { margin-top: 8px; } .d12s-form__submit { min-height: 44px; width: 100%; } @media (min-width: 768px) { .d12s-form__submit { width: auto; min-width: 220px; } } /* --- Messages ------------------------------------------------------------- */ .d12s-form__success, .d12s-form__error { padding: 14px 16px; border-radius: var(--pb-radius-sm); margin-bottom: 16px; font-size: 0.95rem; line-height: 1.4; } .d12s-form__success { background: rgba(31, 141, 58, 0.08); color: var(--pb-color-heading); border-left: 4px solid var(--pb-color-accent); } .d12s-form__error { background: rgba(196, 122, 0, 0.08); color: var(--pb-color-heading); border-left: 4px solid var(--pb-color-status-reporte); } /* --- Variante sur fond --pb-color-primary (bloc places offertes) ---------- */ /* Le bloc places offertes a un fond primary : le formulaire à l'intérieur doit avoir labels blancs et champs fond clair pour rester lisible. */ .d12s-bloc-places .d12s-form, .d12s-form--on-primary { background: transparent; border: 0; padding: 0; margin: 0; } .d12s-bloc-places .d12s-form__label, .d12s-form--on-primary .d12s-form__label { color: var(--pb-color-on-primary); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30); } .d12s-bloc-places .d12s-form__rgpd, .d12s-form--on-primary .d12s-form__rgpd { color: var(--pb-color-on-primary); } .d12s-bloc-places .d12s-form__rgpd a, .d12s-form--on-primary .d12s-form__rgpd a { color: var(--pb-color-on-primary); text-decoration: underline; } .d12s-bloc-places .d12s-form__hint, .d12s-form--on-primary .d12s-form__hint { color: var(--pb-color-on-dark-muted); } .d12s-bloc-places .d12s-form__input, .d12s-form--on-primary .d12s-form__input { background: var(--pb-color-surface); color: var(--pb-color-heading); border-color: transparent; } .d12s-bloc-places .d12s-form__input:focus, .d12s-form--on-primary .d12s-form__input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } .d12s-bloc-places .d12s-form__success, .d12s-form--on-primary .d12s-form__success { background: rgba(255, 255, 255, 0.12); color: var(--pb-color-on-primary); border-left-color: var(--pb-color-on-primary); } .d12s-bloc-places .d12s-form__error, .d12s-form--on-primary .d12s-form__error { background: rgba(255, 255, 255, 0.12); color: var(--pb-color-on-primary); border-left-color: var(--pb-color-status-reporte); } /* --- CTA organisateur : encart discret avec formulaire intégré ----------- */ .d12s-cta-organisateur--discret .d12s-form { margin-top: 0; } .d12s-cta-organisateur--plein > summary { cursor: pointer; list-style: none; } .d12s-cta-organisateur--plein > summary::-webkit-details-marker { display: none; } .d12s-cta-organisateur--plein[open] > summary { margin-bottom: 12px; } /* --- Statut lead dans la liste admin (puce colorée) ---------------------- */ .d12s-lead-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; background: rgba(0, 0, 0, 0.06); color: var(--pb-color-heading); } .d12s-lead-status--new { background: rgba(56, 88, 233, 0.12); } .d12s-lead-status--qualified { background: rgba(31, 141, 58, 0.12); } .d12s-lead-status--contacted { background: rgba(196, 122, 0, 0.12); } .d12s-lead-status--converted { background: rgba(31, 141, 58, 0.22); } .d12s-lead-status--archived { background: rgba(0, 0, 0, 0.08); } .d12s-lead-status--spam { background: rgba(180, 30, 30, 0.12); } /* ============================================================================= LOT 10 — Mode site vierge + bloc "Salons à proximité" Mobile-first, breakpoints 768/1024. Variables uniquement. ========================================================================== */ /* --- Empty state : écran d'attente site vierge --------------------------- */ .d12s-empty-state { display: flex; justify-content: center; padding: 32px 16px; } .d12s-empty-state__inner { max-width: 560px; text-align: center; background: var(--pb-color-surface); border: 1px solid var(--pb-color-border); border-radius: var(--pb-radius); padding: 40px 24px; box-shadow: var(--pb-shadow-light); } .d12s-empty-state__icon { color: var(--pb-color-accent); margin: 0 auto 16px; display: block; opacity: 0.85; } .d12s-empty-state__title { font-family: var(--pb-font-title); font-size: 1.4rem; font-weight: 700; color: var(--pb-color-heading); margin: 0 0 12px; line-height: 1.25; } .d12s-empty-state__text { font-size: 1rem; line-height: 1.55; color: var(--pb-color-text-muted); margin: 0; } @media (min-width: 768px) { .d12s-empty-state { padding: 56px 24px; } .d12s-empty-state__inner { padding: 56px 40px; } .d12s-empty-state__title { font-size: 1.6rem; } } /* --- Bloc "Salons à proximité" : même traitement que "Dans la même région" */ /* .d12s-nearby hérite de .d12s-similar (déjà stylé au Lot 5), aucune règle spécifique ajoutée ici : on garde la cohérence visuelle. */ /* ============================================================================= Compatibilité thèmes (GeneratePress en particulier) + admin bar WordPress ========================================================================== */ /* Reset défensif : neutralise les styles que le thème actif pourrait injecter sur le sélecteur body. Ces déclarations doivent gagner par spécificité (.d12s-body vs body : 0,1,0 vs 0,0,1). */ .d12s-body { font-family: var(--pb-font-body); color: var(--pb-color-text); background: var(--pb-color-bg); line-height: 1.5; } /* Cible explicitement les enfants directs du body pour éviter qu'un style global hérité du thème (ex: .site-content de GeneratePress) ne s'applique à nos sections principales par cascade involontaire. */ .d12s-body .d12s-header, .d12s-body .d12s-main, .d12s-body .d12s-listing, .d12s-body .d12s-single, .d12s-body .d12s-home, .d12s-body .d12s-footer { font-family: var(--pb-font-body); } /* Logo image : taille raisonnable, garde la verticalité du header propre */ .d12s-header__brand--has-logo { display: inline-flex; align-items: center; } .d12s-header__logo { max-height: 40px; width: auto; display: block; } @media (min-width: 768px) { .d12s-header__logo { max-height: 48px; } } /* Admin bar WordPress : décale uniquement le header fixed pour qu'il reste visible sous la barre admin. WordPress applique déjà html { margin-top: 32px } qui pousse body et toute son arborescence vers le bas — pas besoin d'ajuster le padding-top du body, sinon on crée un gap entre header et contenu. */ .admin-bar .d12s-header { top: 32px; } @media (max-width: 782px) { .admin-bar .d12s-header { top: 46px; } } /* Sous 600 px la barre admin se transforme en mode mobile et son margin-top sur html devient nul (le bouton flottant remplace la barre). */ @media (max-width: 600px) { .admin-bar .d12s-header { top: 0; } } /* Focus visible accessible (Tab navigation) — surcharge les défauts ternes du thème actif par un anneau cohérent avec la palette */ .d12s-body a:focus-visible, .d12s-body button:focus-visible, .d12s-body input:focus-visible, .d12s-body select:focus-visible, .d12s-body textarea:focus-visible { outline: 2px solid var(--pb-color-accent); outline-offset: 2px; border-radius: 3px; }