/** * Styles des pages hommage démo (famille-martin, exemple-defunt). * Dépend de style.css (site) pour header / typo globale ; tokens locaux --h-* ci-dessous. */ :root { --h-space-gutter: clamp(0.85rem, 2.4vw, 1.2rem); --h-bg-sable-image: url("../../images/bg-sable.png"); --h-bg-sable-blur-d: 14px; --h-bg-sable-blur-m: 7px; --h-bg: #e2d5bc; --h-card: #f2e8d5; --h-zone-shadow: #cfc3a8; --h-text: #2c3628; --h-soft: #5a5248; --h-pale: #8a8070; --h-green: #3d6b4f; --h-green-hover: #6a9e7a; --h-gold: #b8975a; --h-line: rgba(100, 82, 56, 0.34); --h-warm: #f4efe4; --h-zone-lumiere: 0 2px 8px rgba(139, 115, 75, 0.08), inset 0 1px 0 rgba(255, 248, 225, 0.8); --h-portee: 0 4px 16px rgba(139, 115, 75, 0.12), 0 1px 3px rgba(139, 115, 75, 0.08); --h-serif: "Cormorant Garamond", "Times New Roman", Times, serif; --h-sans: "Source Sans 3", system-ui, sans-serif; --ease: cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html:has(body.hommage-body) { background-color: var(--h-bg); } body.hommage-body { margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* momentum scroll iOS */ overscroll-behavior-y: none; /* supprime rubber-band Android */ font-family: var(--h-sans); font-size: 0.9375rem; font-weight: 400; line-height: 1.62; color: var(--h-soft); background-color: transparent; position: relative; -webkit-font-smoothing: antialiased; } body.hommage-body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; background-color: var(--h-bg); background-image: var(--h-bg-sable-image); background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.04); transform-origin: center center; /* Sur mobile : pas de filter blur — trop coûteux à chaque frame de scroll */ filter: saturate(0.82) brightness(1.04) contrast(0.96); } @media (min-width: 768px) { body.hommage-body::before { position: fixed; top: -64px; left: -64px; right: -64px; bottom: -64px; width: auto; height: auto; transform: scale(1.08); filter: blur(var(--h-bg-sable-blur-d)) saturate(0.8) brightness(1.05) contrast(0.95); } } @supports not (filter: blur(1px)) { body.hommage-body::before { filter: none; opacity: 0.32; transform: scale(1.03); } } body.hommage-body::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; background-color: rgba(241, 234, 220, 0.28); background-image: linear-gradient( 168deg, rgba(252, 250, 246, 0.42) 0%, rgba(236, 228, 212, 0.36) 38%, rgba(222, 212, 194, 0.32) 72%, rgba(216, 206, 188, 0.28) 100% ), radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 252, 246, 0.22) 0%, transparent 52%); background-size: auto, auto; background-repeat: no-repeat, no-repeat; } @media (min-width: 768px) { body.hommage-body::after { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; } } @media (prefers-reduced-motion: reduce) { body.hommage-body::before { filter: saturate(0.78) brightness(1.03) contrast(0.97); transform: scale(1.02); } body.hommage-body::after { background-color: rgba(241, 234, 220, 0.55); } } /* Exclure menu mobile (#nav-principale, #site-nav-backdrop) : en fin de , fixed + z-index (style.css). */ body.hommage-body > *:not(#nav-principale):not(#site-nav-backdrop) { position: relative; z-index: 1; } /* Bandeau d’orientation — maquettes de démonstration */ .hommage-site-hint { max-width: 40rem; margin: 0 auto; padding: 0.55rem var(--h-space-gutter) 0.65rem; text-align: center; font-family: var(--h-sans); font-size: 0.78rem; line-height: 1.45; color: var(--h-soft); background: rgba(255, 252, 246, 0.55); border-bottom: 1px solid var(--h-line); } .hommage-site-hint p { margin: 0; } .hommage-site-hint a { font-weight: 500; white-space: nowrap; } .hommage-site-hint--reserved { border-left: 3px solid var(--h-gold); background: rgba(255, 252, 248, 0.65); } .hommage-site-hint--libre { border-left: 3px solid var(--h-green); background: rgba(248, 252, 249, 0.55); } @media (max-width: 480px) { .hommage-site-hint a { white-space: normal; } } .hommage-topnav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 0.55rem; padding: 0.65rem var(--h-space-gutter); font-family: var(--h-sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--h-pale); background: rgba(241, 234, 220, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--h-line); } @media (max-width: 767px) { .hommage-topnav { backdrop-filter: none; -webkit-backdrop-filter: none; } } .hommage-topnav a { text-decoration: none; color: var(--h-green); } .hommage-topnav a:hover { color: var(--h-green-hover); } .hommage-topnav__sep { opacity: 0.45; user-select: none; pointer-events: none; } .hommage-body ::selection { background: rgba(139, 115, 75, 0.22); color: var(--h-text); } .hommage-body a { color: var(--h-green); transition: color 150ms var(--ease); } .hommage-body a:hover { color: var(--h-green-hover); } /* Porte d’entrée — démo « accès réservé » (vérification serveur possible + repli démo) */ #hommage-gate { max-width: 24rem; margin: 0 auto; padding: 0.35rem var(--h-space-gutter) 1.25rem; } .hommage-gate__card { background: rgba(255, 252, 246, 0.94); border: 1px solid var(--h-line); border-radius: 14px; padding: 1.35rem 1.35rem 1.45rem; box-shadow: var(--h-zone-lumiere); text-align: center; } .hommage-gate__title { margin: 0 0 0.4rem; font-family: var(--h-serif); font-size: 1.35rem; font-weight: 600; color: var(--h-text); line-height: 1.25; } .hommage-gate__text { margin: 0 0 1rem; font-size: 0.86rem; line-height: 1.55; color: var(--h-soft); } .hommage-gate__demo-hint { margin: 0 0 1rem; padding: 0.55rem 0.7rem; font-size: 0.82rem; line-height: 1.45; color: var(--h-text); text-align: center; background: rgba(61, 107, 79, 0.1); border: 1px solid rgba(61, 107, 79, 0.22); border-radius: 8px; } .hommage-gate__kbd { display: inline-block; padding: 0.2rem 0.5rem; font-family: ui-monospace, monospace; font-size: 0.9em; font-weight: 600; letter-spacing: 0.04em; color: var(--h-text); background: #fff; border: 1px solid var(--h-line); border-radius: 5px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .hommage-gate__form { display: flex; flex-direction: column; gap: 0.65rem; align-items: stretch; text-align: left; } .hommage-gate__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--h-pale); } .hommage-gate__input { width: 100%; padding: 0.65rem 0.85rem; font-family: var(--h-sans); font-size: 1rem; border: 1px solid var(--h-line); border-radius: 8px; background: #fff; color: var(--h-text); } .hommage-gate__input:focus { outline: 2px solid rgba(61, 107, 79, 0.35); outline-offset: 1px; } .hommage-gate__submit { margin-top: 0.15rem; padding: 0.65rem 1rem; font-family: var(--h-sans); font-size: 0.88rem; font-weight: 600; color: #fff; background: var(--h-green); border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s var(--ease); } .hommage-gate__submit:hover { background: var(--h-green-hover); } .hommage-gate__error { margin: 0; font-size: 0.8rem; color: #8b4a42; line-height: 1.45; } .hommage-gate__note { margin: 0.85rem 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--h-pale); } .hommage-gate__note a { font-weight: 500; } /* Contenu hommage — maquettes web (avec ou sans porte d’entrée selon la page) */ .hommage-content { max-width: 26rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 2.5rem) var(--h-space-gutter) 1.85rem; } .hommage-content[hidden] { display: none !important; } .hommage-content__kicker { margin: 0 0 0.5rem; font-family: var(--h-sans); font-size: 0.67rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-green); text-align: center; } .hommage-content h2 { margin: 0 0 0.35rem; font-family: var(--h-serif); font-size: clamp(1.85rem, 6vw, 2.7rem); font-weight: 600; text-align: center; line-height: 1.08; color: var(--h-text); text-shadow: 0 1px 2px rgba(139, 115, 75, 0.15); } .hommage-content__dates { margin: 0 0 1.5rem; font-size: 0.88rem; font-weight: 400; text-align: center; color: var(--h-soft); } .hommage-content__demo-tag { margin: -0.85rem 0 1.25rem; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: var(--h-pale); } .hommage-content__photo { width: 100%; max-width: 13rem; aspect-ratio: 3 / 4; margin: 0 auto 2rem; padding: 0; border-radius: 50% 50% 12px 12px; overflow: hidden; background: var(--h-card); border: 3px solid rgba(255,255,255,0.7); box-shadow: 0 4px 24px rgba(100,80,60,.18), 0 1px 4px rgba(100,80,60,.10); } .hommage-content__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Claire Fontenay — redressement léger du cadrage (plan de table légèrement en pente) */ .hommage-content__photo--level img { transform: rotate(2.25deg) scale(1.1); transform-origin: 50% 42%; } .hommage-content__text { margin: 0 0 0.9rem; font-size: 0.9375rem; font-weight: 400; color: var(--h-soft); line-height: 1.62; text-align: center; } .hommage-content__text--lead { font-family: var(--h-serif); font-size: clamp(1.05rem, 2.5vw, 1.2rem); font-weight: 400; font-style: italic; color: var(--h-soft); line-height: 1.65; } .hommage-content__text--note { font-size: 0.81rem; line-height: 1.75; color: var(--h-pale); } .hommage-content__panel { margin: 0 0 1.5rem; padding: 1rem 1.1rem; text-align: left; background: var(--h-card); border: 1px solid var(--h-line); border-radius: 12px; box-shadow: var(--h-zone-lumiere); } .hommage-content__panel h3 { margin: 0 0 0.65rem; font-family: var(--h-serif); font-size: 1rem; font-weight: 600; color: var(--h-text); text-align: center; } .hommage-content__panel p { margin: 0 0 0.65rem; font-size: 0.86rem; line-height: 1.8; color: var(--h-soft); } .hommage-content__panel p:last-child { margin-bottom: 0; } .hommage-content__panel-links { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--h-line); font-size: 0.78rem; text-align: center; line-height: 1.65; } .hommage-content__panel-links a { white-space: nowrap; } .hommage-content__gallery-wrap { margin: 0 0 1.75rem; padding: 1rem; background: var(--h-card); border: 1px solid var(--h-line); border-radius: 12px; box-shadow: var(--h-zone-lumiere); } .hommage-content__h3 { margin: 0 0 0.85rem; font-family: var(--h-serif); font-size: 1.1rem; font-weight: 600; text-align: center; color: var(--h-text); } .hommage-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .hommage-gallery__cell { margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--h-card); border: 1px solid var(--h-line); box-shadow: var(--h-zone-lumiere); } .hommage-gallery__cell img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Carrousel Swiper : ne pas hériter de la grille mosaïque .hommage-gallery (2 colonnes) */ .hommage-gallery.hommage-gallery--swiper { display: block; max-width: min(640px, 100%); margin-left: auto; margin-right: auto; width: 100%; } .hommage-gallery.hommage-gallery--swiper #gallery-title, .hommage-gallery.hommage-gallery--swiper > .hommage-content__kicker { text-align: center; } .hommage-gallery .hommage-swiper { border-radius: 10px; overflow: hidden; border: 1px solid var(--h-line); background: var(--h-card); box-shadow: var(--h-zone-lumiere); } /* Variante carrousel « moderne » : fondu, contrôles flottants, pagination élargie */ .hommage-gallery .hommage-swiper--modern { --hommage-swiper-radius: clamp(14px, 3.5vw, 20px); border-radius: var(--hommage-swiper-radius); border: 1px solid rgba(100, 82, 56, 0.2); box-shadow: 0 1px 0 rgba(255, 252, 248, 0.85) inset, 0 20px 48px rgba(60, 48, 36, 0.1), 0 6px 16px rgba(60, 48, 36, 0.06); /* Swiper 11 applique overflow:hidden sur .swiper ; clip évite de masquer les boutons flottants */ overflow: clip; position: relative; user-select: none; } .hommage-gallery .hommage-swiper--modern .swiper-slide { aspect-ratio: 4 / 3; background: var(--h-card); } .hommage-gallery .hommage-swiper--modern.swiper-fade .swiper-slide { pointer-events: none; } .hommage-gallery .hommage-swiper--modern.swiper-fade .swiper-slide-active { pointer-events: auto; } .hommage-gallery .hommage-swiper--modern .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0) scale(1.008); } .hommage-gallery .hommage-swiper--modern .hommage-swiper__pagination.swiper-pagination { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.85rem 0 1rem; background: linear-gradient(to top, rgba(44, 54, 40, 0.42) 0%, transparent 100%); z-index: 4; } .hommage-gallery .hommage-swiper--modern .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 4px !important; background: rgba(255, 252, 248, 0.55); opacity: 1; transition: width 0.28s var(--ease), background 0.28s var(--ease), transform 0.28s var(--ease); } .hommage-gallery .hommage-swiper--modern .swiper-pagination-bullet-active { width: 26px; border-radius: 6px; background: rgba(255, 252, 248, 0.95); box-shadow: 0 0 0 1px rgba(61, 107, 79, 0.35); } .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-prev, .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-next { width: 2.75rem; height: 2.75rem; top: 50%; margin-top: -1.375rem; border-radius: 50%; color: var(--h-green); background: rgba(255, 252, 248, 0.88); border: 1px solid rgba(100, 82, 56, 0.18); box-shadow: 0 4px 20px rgba(44, 54, 40, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease); } .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-prev:hover, .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-next:hover { background: rgba(255, 252, 248, 0.98); box-shadow: 0 6px 24px rgba(44, 54, 40, 0.16); } .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-prev::after, .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-next::after { font-size: 0.85rem; font-weight: 700; } .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-prev { left: 10px; } .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-next { right: 10px; } @media (max-width: 480px) { .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-prev { left: 6px; } .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-next { right: 6px; } .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-prev, .hommage-gallery .hommage-swiper--modern .hommage-swiper__btn.swiper-button-next { width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; } } .hommage-gallery .hommage-swiper .swiper-slide { aspect-ratio: 4 / 3; background: var(--h-card); } .hommage-gallery .hommage-swiper:not(.hommage-swiper--modern) .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .hommage-back { display: block; margin-top: 2.5rem; font-size: 0.81rem; font-weight: 500; text-align: center; color: var(--h-green); } .hommage-body .site-main { opacity: 1; } .hommage-body .site-main.site-main--ready { animation: none; } @keyframes hommageMainFadeIn { to { opacity: 1; } } .hommage-body .fade-in-section { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); } .hommage-body .fade-in-section.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 767px) and (prefers-reduced-motion: no-preference) { .hommage-topnav a { transition: color 180ms var(--ease), opacity 180ms var(--ease); } .hommage-topnav a:active { opacity: 0.65; } } @media (prefers-reduced-motion: reduce) { .hommage-body .site-main { opacity: 1; } .hommage-body .site-main.site-main--ready { animation: none; } .hommage-body .fade-in-section { opacity: 1; transform: none; transition: none; } .hommage-topnav a:active { opacity: 1; } } .hommage-topnav a:focus-visible, .hommage-content a:focus-visible { outline: 2px solid var(--h-green); outline-offset: 3px; border-radius: 2px; } /* ── Perf mobile scroll ──────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { html:has(body.hommage-body) { scroll-behavior: smooth; } } /* Délai tactile supprimé */ body.hommage-body a, body.hommage-body button, body.hommage-body [role="button"], body.hommage-body label { touch-action: manipulation; } /* GPU sur le fond fixe desktop uniquement */ @media (min-width: 768px) { body.hommage-body::before, body.hommage-body::after { will-change: transform; } }