/* ============================================================================= 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 { --d12s-color-surface: white; --d12s-color-on-primary: white; --d12s-color-border: rgba(0, 0, 0, 0.08); --d12s-color-text-muted: rgba(0, 0, 0, 0.6); --d12s-color-overlay-dark: rgba(0, 0, 0, 0.4); --d12s-color-light-overlay: rgba(255, 255, 255, 0.06); --d12s-color-on-dark: rgba(255, 255, 255, 0.85); --d12s-color-on-dark-muted: rgba(255, 255, 255, 0.65); --d12s-color-on-dark-faint: rgba(255, 255, 255, 0.5); --d12s-shadow-light: 0 2px 12px rgba(0, 0, 0, 0.06); --d12s-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08); --d12s-radius: 8px; --d12s-radius-sm: 6px; --d12s-header-height: 72px; --d12s-container-max: 1200px; --d12s-container-padding: 20px; } /* --- Reset léger + base --------------------------------------------------- */ .d12s-body, .d12s-body * { box-sizing: border-box; } .d12s-body { margin: 0; font-family: var(--d12s-font-body); font-size: 16px; line-height: 1.7; color: var(--d12s-color-text); background: var(--d12s-color-bg); padding-top: var(--d12s-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(--d12s-font-title); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--d12s-color-heading); margin: 0 0 0.6em; } .d12s-body a { color: var(--d12s-color-accent); text-decoration: none; transition: color 0.2s ease; } .d12s-body a:hover { color: var(--d12s-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(--d12s-container-max); margin: 0 auto; padding: 0 var(--d12s-container-padding); } /* --- Bouton CTA ----------------------------------------------------------- */ .d12s-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border: 0; border-radius: var(--d12s-radius-sm); font-family: var(--d12s-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(--d12s-color-accent); color: var(--d12s-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(--d12s-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(--d12s-color-border); transition: box-shadow 0.25s ease, background 0.25s ease; } @supports not (backdrop-filter: blur(1px)) { .d12s-header { background: var(--d12s-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(--d12s-header-height); gap: 24px; } .d12s-header__brand { font-family: var(--d12s-font-title); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--d12s-color-heading); text-decoration: none; transition: opacity 0.2s ease; } .d12s-header__brand:hover { color: var(--d12s-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(--d12s-font-body); font-weight: 500; font-size: 0.95rem; color: var(--d12s-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(--d12s-color-heading); background: rgba(0, 0, 0, 0.05); } .d12s-nav__item--current > .d12s-nav__link { color: var(--d12s-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(--d12s-color-on-accent); background: var(--d12s-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(--d12s-color-surface); box-shadow: var(--d12s-shadow-medium); border-radius: var(--d12s-radius); } .d12s-nav__list li:hover > .sub-menu { display: block; } .d12s-nav__list .sub-menu a { display: block; padding: 8px 12px; border-radius: var(--d12s-radius-sm); } .d12s-nav__list .sub-menu a::after { display: none; } .d12s-nav__list .sub-menu a:hover { background: var(--d12s-color-bg); } .d12s-header__cta { margin-left: 8px; } /* --- Burger mobile -------------------------------------------------------- */ .d12s-burger { display: none; background: var(--d12s-color-surface); border: 1px solid var(--d12s-color-border); border-radius: 8px; cursor: pointer; padding: 8px; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: background 0.15s ease, border-color 0.15s ease; } .d12s-burger:hover { background: rgba(0, 0, 0, 0.04); } .d12s-burger span { display: block; width: 22px; height: 2px; /* Couleur des barres : heading (toujours suffisamment sombre via ensure_dark_enough côté Frontend) → contraste garanti sur le surface blanc du bouton, peu importe la palette utilisateur. */ background: var(--d12s-color-heading); 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; } /* Nav mobile : panneau drawer plein écran sous le header. CSS défensif (!important sur les propriétés critiques) pour parer à toute règle parente (thème actif, plugin tiers, contexte d'empilement crée par transform/filter/backdrop-filter sur un ancêtre) qui contraindrait la taille ou la position du panneau. */ .d12s-nav { position: fixed !important; top: var(--d12s-header-height) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; /* 100dvh = viewport dynamique (Safari mobile : exclut la barre URL quand elle se rétracte au scroll). Fallback 100vh - header. */ height: calc(100vh - var(--d12s-header-height)) !important; height: calc(100dvh - var(--d12s-header-height)) !important; z-index: 1100 !important; background: var(--d12s-color-surface) !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; padding: 20px 0 !important; margin: 0 !important; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto !important; overflow-x: hidden !important; box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12); visibility: hidden; } .d12s-nav.is-open { transform: translateX(0) !important; visibility: visible !important; } /* Header en mobile : z-index très haut pour garantir que tout son sous-arbre (dont le panneau de navigation) reste AU-DESSUS de n'importe quel contenu de page positionné. */ .d12s-header { z-index: 9999 !important; } /* Sécurise l'affichage des items dans la liste (au cas où une règle parente imposerait display:none ou max-height) */ .d12s-nav__list { display: block !important; } .d12s-nav__list > li { display: block !important; } .d12s-nav__list > li > a { display: block !important; } .d12s-header__cta { display: inline-flex !important; } .d12s-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .d12s-nav__list > li { border-bottom: 1px solid var(--d12s-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(--d12s-color-on-primary); } /* --- Zone 1 : navigation éditoriale --------------------------------------- */ .d12s-footer__zone--main { background: var(--d12s-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(--d12s-font-title); font-weight: 700; font-size: 1.4rem; color: var(--d12s-color-on-primary); margin-bottom: 12px; } .d12s-footer__desc { color: var(--d12s-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(--d12s-color-light-overlay); color: var(--d12s-color-on-primary); transition: background 0.2s ease, color 0.2s ease; } .d12s-footer__social-link:hover { background: var(--d12s-color-accent); color: var(--d12s-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(--d12s-color-on-dark); text-decoration: none; font-size: 0.95rem; transition: color 0.2s ease; } .d12s-footer__menu a:hover { color: var(--d12s-color-accent); } /* --- Zone 2 : maillage SEO géographique ----------------------------------- */ .d12s-footer__zone--mesh { background: var(--d12s-color-secondary); padding: 50px 0; border-top: 1px solid var(--d12s-color-light-overlay); } .d12s-footer__mesh-title { font-family: var(--d12s-font-title); font-weight: 600; font-size: 1rem; color: var(--d12s-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(--d12s-font-title); font-size: 0.95rem; font-weight: 600; margin: 0 0 10px; } .d12s-footer__mesh-region a { color: var(--d12s-color-on-secondary); text-decoration: none; } .d12s-footer__mesh-region a:hover { color: var(--d12s-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(--d12s-color-on-dark-muted); text-decoration: none; font-size: 0.82rem; transition: color 0.2s ease; } .d12s-footer__mesh-list a:hover { color: var(--d12s-color-on-primary); } /* --- Zone 3 : copyright + légal ------------------------------------------- */ .d12s-footer__zone--copyright { background: var(--d12s-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(--d12s-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(--d12s-color-on-dark-muted); text-decoration: none; transition: color 0.2s ease; } .d12s-footer__legal a:hover { color: var(--d12s-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 { --d12s-color-fb: #1877F2; --d12s-color-wa: #25D366; --d12s-color-status-annule: #777777; --d12s-color-status-reporte: #c47a00; --d12s-color-edito-bg: rgba(0, 0, 0, 0.03); --d12s-color-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } /* --- Fil d'ariane ------------------------------------------------------ */ .d12s-breadcrumb { background: var(--d12s-color-bg); padding: 14px 0; font-size: 0.85rem; color: var(--d12s-color-text-muted); border-bottom: 1px solid var(--d12s-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(--d12s-color-heading); text-decoration: none; transition: color 0.2s ease; } .d12s-breadcrumb__list a:hover { color: var(--d12s-color-accent); } .d12s-breadcrumb__sep { opacity: 0.5; user-select: none; } .d12s-breadcrumb__list [aria-current="page"] { color: var(--d12s-color-text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Hero -------------------------------------------------------------- */ /* Aspect-ratio 16/9 : réserve l'espace AVANT chargement de l'image → aucun layout shift (CLS = 0 pour cet élément, conformément aux Core Web Vitals). min-height assure une hauteur raisonnable même sur petit écran où 16/9 donnerait un hero trop court (375px de large × 9/16 ≈ 211px). */ .d12s-single-hero { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 320px; overflow: hidden; background: linear-gradient(135deg, var(--d12s-color-primary), var(--d12s-color-secondary)); } @media (min-width: 1024px) { .d12s-single-hero { min-height: 480px; } } .d12s-single-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; /* Apparition discrète sans bloquer le rendu (l'image démarre opaque et reste opaque ; l'animation ne joue que si la source change). */ animation: d12s-hero-fade 320ms ease-out; } @keyframes d12s-hero-fade { from { opacity: 0; } to { opacity: 1; } } .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(--d12s-color-on-primary); } .d12s-single-hero__badge { display: inline-block; padding: 4px 12px; background: var(--d12s-color-accent); color: var(--d12s-color-on-accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--d12s-radius-sm); margin-bottom: 14px; } .d12s-single-hero__badge--passe { background: rgba(0, 0, 0, 0.5); } .d12s-single-hero__badge--annule { background: var(--d12s-color-status-annule); } .d12s-single-hero__badge--reporte { background: var(--d12s-color-status-reporte); } .d12s-single-hero__title { font-size: 1.8rem; font-weight: 700; color: var(--d12s-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(--d12s-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(--d12s-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(--d12s-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(--d12s-font-title); font-weight: 700; font-size: 1.6rem; color: var(--d12s-color-heading); margin: 0 0 20px; position: relative; padding-bottom: 14px; } .d12s-bloc__title::after { content: ''; display: block; width: 48px; height: 3px; background: var(--d12s-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(--d12s-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(--d12s-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(--d12s-color-edito-bg); border-radius: 12px; padding: 40px 32px 32px; overflow: hidden; } .d12s-bloc-edito__quote { position: absolute; top: 16px; left: 16px; color: var(--d12s-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(--d12s-color-border); } .d12s-faq-item { border-bottom: 1px solid var(--d12s-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(--d12s-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(--d12s-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(--d12s-color-text-muted); } /* --- bloc_places_offertes -------------------------------------------- */ .d12s-bloc-places { background: var(--d12s-color-primary); color: var(--d12s-color-on-primary); border-radius: 12px; padding: 32px; } .d12s-bloc-places__title { color: var(--d12s-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(--d12s-color-accent); } .d12s-bloc-places__form-slot { background: var(--d12s-color-light-overlay); border: 1px dashed var(--d12s-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(--d12s-color-on-dark-muted); font-style: italic; } /* --- COLONNE LATÉRALE : infos pratiques + CTA --------------------------- */ .d12s-bloc-infos { background: var(--d12s-color-surface); border-radius: 12px; padding: 24px; box-shadow: var(--d12s-color-card-shadow); border-left: 4px solid var(--d12s-color-accent); } .d12s-bloc-infos__title { font-family: var(--d12s-font-title); font-weight: 700; font-size: 1.05rem; color: var(--d12s-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(--d12s-color-border); } .d12s-bloc-infos__item:last-child { border-bottom: 0; } .d12s-bloc-infos__icon { flex-shrink: 0; color: var(--d12s-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(--d12s-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .d12s-bloc-infos__value { font-size: 0.95rem; color: var(--d12s-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(--d12s-color-surface); border: 1px solid var(--d12s-color-border); border-radius: 8px; padding: 20px; } .d12s-cta-organisateur__text { margin: 0 0 12px; font-size: 0.95rem; color: var(--d12s-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(--d12s-color-border); } .d12s-share__label { font-size: 0.85rem; color: var(--d12s-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(--d12s-radius-sm); font-size: 0.85rem; font-weight: 600; font-family: var(--d12s-font-body); color: var(--d12s-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(--d12s-color-on-primary); } .d12s-share__btn--fb { background: var(--d12s-color-fb); } .d12s-share__btn--wa { background: var(--d12s-color-wa); } .d12s-share__btn--copy { background: var(--d12s-color-secondary); color: var(--d12s-color-on-secondary); } .d12s-share__btn.is-copied { background: var(--d12s-color-accent); color: var(--d12s-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(--d12s-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(--d12s-color-primary), var(--d12s-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(--d12s-color-primary), var(--d12s-color-secondary)); } .d12s-card__badge { position: absolute; top: 12px; left: 12px; background: var(--d12s-color-accent); color: var(--d12s-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(--d12s-color-status-annule); } .d12s-card__badge--reporte { background: var(--d12s-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(--d12s-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(--d12s-font-title); font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--d12s-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(--d12s-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(--d12s-color-accent); font-weight: 600; flex-shrink: 0; } .d12s-card__price--free { color: var(--d12s-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(--d12s-font-title); font-size: 1.8rem; font-weight: 700; color: var(--d12s-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(--d12s-color-accent); font-weight: 700; } .d12s-listing__intro, .d12s-listing__editorial { font-size: 1rem; line-height: 1.7; color: var(--d12s-color-text); max-width: 70ch; } .d12s-listing__editorial p { margin: 0 0 1em; } .d12s-listing__section-title { font-family: var(--d12s-font-title); font-size: 1.15rem; font-weight: 700; color: var(--d12s-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(--d12s-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(--d12s-color-surface); border: 1px solid var(--d12s-color-border); border-radius: 999px; color: var(--d12s-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(--d12s-color-primary); color: var(--d12s-color-on-primary); border-color: var(--d12s-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(--d12s-color-surface); border-radius: 12px; box-shadow: var(--d12s-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(--d12s-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(--d12s-color-border); border-radius: var(--d12s-radius-sm); background: var(--d12s-color-surface); font-family: var(--d12s-font-body); font-size: 0.95rem; color: var(--d12s-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(--d12s-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(--d12s-radius-sm); background: var(--d12s-color-surface); border: 1px solid var(--d12s-color-border); color: var(--d12s-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(--d12s-color-edito-bg); border-color: var(--d12s-color-accent); } .d12s-pagination .current, .d12s-pagination .page-numbers.current { background: var(--d12s-color-primary); color: var(--d12s-color-on-primary); border-color: var(--d12s-color-heading); } .d12s-pagination .dots { background: transparent; border: 0; } /* --- AUCUN RÉSULTAT --------------------------------------------------- */ .d12s-no-results { text-align: center; padding: 60px 20px; background: var(--d12s-color-edito-bg); border-radius: 12px; color: var(--d12s-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(--d12s-color-border); } .d12s-similar__title { font-family: var(--d12s-font-title); font-size: 1.4rem; font-weight: 700; color: var(--d12s-color-heading); margin: 0 0 20px; position: relative; padding-bottom: 14px; } .d12s-similar__title::after { content: ''; display: block; width: 48px; height: 3px; background: var(--d12s-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(--d12s-color-primary), var(--d12s-color-secondary)); color: var(--d12s-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(--d12s-font-title); font-weight: 700; color: var(--d12s-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(--d12s-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(--d12s-color-on-dark); } .d12s-home-hero__search-select { padding: 10px 12px; border: 0; border-radius: var(--d12s-radius-sm); background: var(--d12s-color-surface); color: var(--d12s-color-text); font-family: var(--d12s-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(--d12s-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(--d12s-color-on-primary); border-bottom-color: var(--d12s-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(--d12s-color-edito-bg); } .d12s-home-section__head { margin-bottom: 32px; text-align: center; } .d12s-home-section__title { font-family: var(--d12s-font-title); font-weight: 700; font-size: 1.6rem; color: var(--d12s-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(--d12s-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(--d12s-color-surface); border: 1px solid var(--d12s-color-border); border-radius: var(--d12s-radius); text-decoration: none; color: var(--d12s-color-text); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .d12s-region-card:hover { border-color: var(--d12s-color-accent); transform: translateY(-2px); box-shadow: var(--d12s-color-card-shadow); } .d12s-region-card__name { font-family: var(--d12s-font-title); font-weight: 600; font-size: 1.05rem; color: var(--d12s-color-heading); } .d12s-region-card__count { font-size: 0.85rem; color: var(--d12s-color-text-muted); } /* --- SECTION CTA ACCUEIL ----------------------------------------------- */ .d12s-home-section--cta { padding: 80px 0; background: var(--d12s-color-primary); } .d12s-home-cta { text-align: center; max-width: 640px; margin: 0 auto; color: var(--d12s-color-on-primary); } .d12s-home-cta__title { font-family: var(--d12s-font-title); font-weight: 700; color: var(--d12s-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(--d12s-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(--d12s-font-title); font-weight: 800; font-size: clamp(5rem, 18vw, 9rem); color: var(--d12s-color-accent); line-height: 1; margin: 0 0 14px; letter-spacing: -0.05em; } .d12s-404__title { font-family: var(--d12s-font-title); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--d12s-color-heading); margin: 0 0 14px; } .d12s-404__lede { font-size: 1.05rem; color: var(--d12s-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(--d12s-color-border); border-radius: var(--d12s-radius-sm); font-family: var(--d12s-font-body); font-size: 1rem; background: var(--d12s-color-surface); color: var(--d12s-color-text); min-height: 44px; } .d12s-404__search-input:focus { outline: none; border-color: var(--d12s-color-accent); } .d12s-404__links { margin-top: 40px; } .d12s-404__section-title { font-family: var(--d12s-font-title); font-weight: 700; font-size: 1.05rem; color: var(--d12s-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 --d12s-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 --d12s-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(--d12s-color-on-primary); } .d12s-body .d12s-footer__mesh-title { color: var(--d12s-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(--d12s-color-edito-bg); padding: 4px; border-radius: var(--d12s-radius); } .d12s-view-switch__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--d12s-radius-sm); color: var(--d12s-color-text); background: transparent; text-decoration: none; font-family: var(--d12s-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(--d12s-color-surface); color: var(--d12s-color-heading); } .d12s-view-switch__btn.is-active { background: var(--d12s-color-primary); color: var(--d12s-color-on-primary); } .d12s-view-switch__btn.is-active:hover { color: var(--d12s-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(--d12s-color-border); margin-bottom: 20px; } .d12s-calendar__nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--d12s-color-border); border-radius: var(--d12s-radius-sm); background: var(--d12s-color-surface); color: var(--d12s-color-heading); text-decoration: none; font-family: var(--d12s-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(--d12s-color-edito-bg); border-color: var(--d12s-color-accent); color: var(--d12s-color-heading); } .d12s-calendar__nav-label { display: none; } @media (min-width: 480px) { .d12s-calendar__nav-label { display: inline; } } .d12s-calendar__title { font-family: var(--d12s-font-title); font-weight: 700; font-size: 1.2rem; color: var(--d12s-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(--d12s-font-title); font-weight: 600; font-size: 0.78rem; color: var(--d12s-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(--d12s-color-border); border-radius: var(--d12s-radius); padding: 4px; } .d12s-calendar__day { background: var(--d12s-color-surface); border-radius: var(--d12s-radius-sm); padding: 8px 6px; min-height: 110px; position: relative; display: flex; flex-direction: column; } .d12s-calendar__day--out { background: var(--d12s-color-edito-bg); } .d12s-calendar__day--out .d12s-calendar__daynum { color: var(--d12s-color-text-muted); opacity: 0.5; } .d12s-calendar__day--today { background: var(--d12s-color-surface); box-shadow: inset 0 0 0 2px var(--d12s-color-accent); } .d12s-calendar__day--today .d12s-calendar__daynum { background: var(--d12s-color-accent); color: var(--d12s-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(--d12s-font-title); font-weight: 700; font-size: 0.9rem; color: var(--d12s-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(--d12s-color-heading); background: rgba(233, 69, 96, 0.12); /* --d12s-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(--d12s-color-accent); transition: background 0.15s ease; } .d12s-calendar__pill:hover { background: rgba(233, 69, 96, 0.22); color: var(--d12s-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(--d12s-color-text-muted); font-weight: 600; text-decoration: none; } .d12s-calendar__more:hover { color: var(--d12s-color-accent); } /* --- Calendrier MOBILE : liste chronologique compacte ------------------ */ .d12s-calendar__day-mobile { background: var(--d12s-color-surface); border: 1px solid var(--d12s-color-border); border-radius: var(--d12s-radius); padding: 16px; margin-bottom: 12px; } .d12s-calendar__day-mobile--today { border-color: var(--d12s-color-accent); } .d12s-calendar__day-mobile-label { font-family: var(--d12s-font-title); font-weight: 700; font-size: 0.95rem; color: var(--d12s-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(--d12s-color-accent); color: var(--d12s-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(--d12s-color-surface); border: 1px solid var(--d12s-color-border); border-radius: var(--d12s-radius); padding: 24px; margin: 16px 0; font-family: var(--d12s-font-body); } .d12s-form__title { font-family: var(--d12s-font-title); font-size: 1.25rem; font-weight: 700; color: var(--d12s-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(--d12s-color-heading); margin-bottom: 6px; } .d12s-form__input { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 1rem; font-family: inherit; color: var(--d12s-color-heading); background: var(--d12s-color-surface); border: 1px solid var(--d12s-color-border); border-radius: var(--d12s-radius-sm); transition: border-color .15s ease, box-shadow .15s ease; } .d12s-form__input:focus { outline: none; border-color: var(--d12s-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(--d12s-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(--d12s-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(--d12s-color-accent); } .d12s-form__rgpd a { color: var(--d12s-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(--d12s-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(--d12s-color-heading); border-left: 4px solid var(--d12s-color-accent); } .d12s-form__error { background: rgba(196, 122, 0, 0.08); color: var(--d12s-color-heading); border-left: 4px solid var(--d12s-color-status-reporte); } /* --- Variante sur fond --d12s-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(--d12s-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(--d12s-color-on-primary); } .d12s-bloc-places .d12s-form__rgpd a, .d12s-form--on-primary .d12s-form__rgpd a { color: var(--d12s-color-on-primary); text-decoration: underline; } .d12s-bloc-places .d12s-form__hint, .d12s-form--on-primary .d12s-form__hint { color: var(--d12s-color-on-dark-muted); } .d12s-bloc-places .d12s-form__input, .d12s-form--on-primary .d12s-form__input { background: var(--d12s-color-surface); color: var(--d12s-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(--d12s-color-on-primary); border-left-color: var(--d12s-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(--d12s-color-on-primary); border-left-color: var(--d12s-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(--d12s-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(--d12s-color-surface); border: 1px solid var(--d12s-color-border); border-radius: var(--d12s-radius); padding: 40px 24px; box-shadow: var(--d12s-shadow-light); } .d12s-empty-state__icon { color: var(--d12s-color-accent); margin: 0 auto 16px; display: block; opacity: 0.85; } .d12s-empty-state__title { font-family: var(--d12s-font-title); font-size: 1.4rem; font-weight: 700; color: var(--d12s-color-heading); margin: 0 0 12px; line-height: 1.25; } .d12s-empty-state__text { font-size: 1rem; line-height: 1.55; color: var(--d12s-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(--d12s-font-body); color: var(--d12s-color-text); background: var(--d12s-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(--d12s-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(--d12s-color-accent); outline-offset: 2px; border-radius: 3px; } /* --- Chips Région / Département sur le hero événement -------------------- */ .d12s-single-hero__geochips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .d12s-geochip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255, 255, 255, 0.18); color: var(--d12s-color-on-primary); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px; font-size: 0.85rem; font-weight: 500; font-family: var(--d12s-font-body); text-decoration: none; transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease; backdrop-filter: blur(4px); } .d12s-geochip:hover { background: rgba(255, 255, 255, 0.30); border-color: rgba(255, 255, 255, 0.5); color: var(--d12s-color-on-primary); transform: translateY(-1px); text-decoration: none; } .d12s-geochip__icon { opacity: 0.85; flex-shrink: 0; }