/* =========================================================================== Tombola Patrimoine — feuille de styles principale (non-critique) Le CSS critique above-the-fold (fonts, reset, :root, header, hero, sticky CTA, reveal initial, overlays) reste inline dans (cf. layer-guidelines.md §7 et §9). Ce fichier regroupe les styles des sections below-the-fold et les effets décoratifs. =========================================================================== */ /* ===== FONDATION ===== */ .fondation { background: var(--blanc); border-bottom: 1px solid #eee; } .fondation-grid { display: flex; align-items: center; flex-direction: column; text-align: center; } .fondation-grid > * + * { margin-top: 28px; } @media (min-width: 600px) { .fondation-grid { flex-direction: row; text-align: left; } .fondation-grid > * + * { margin-top: 0; margin-left: 28px; } } .fondation-logo { width: 140px; flex-shrink: 0; } .fondation-grid p { color: var(--gris); line-height: 1.7; } .fondation-grid strong { color: var(--noir); } /* ===== INTRO + VIDEO ===== */ .maserati-intro { background: var(--blanc); } .intro-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } @media (min-width: 769px) { .intro-grid { grid-template-columns: 1fr 1fr; gap: 48px; } } .intro-text p { color: var(--gris); margin-bottom: 14px; } .intro-text strong { color: var(--noir); } .emoji-list { list-style: none; padding: 0; margin: 20px 0 0; } .emoji-list li { padding: 4px 0; font-size: 1.05rem; } .video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.1); } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* ===== LOT ===== */ .lot { background: var(--blanc); } .lot-block { border: 2px solid var(--beige); border-radius: 12px; padding: 32px; box-shadow: 0 2px 16px rgba(1,73,142,.06); } @media (max-width: 600px) { .lot-block { padding: 20px 16px; } } .lot-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } @media (min-width: 769px) { .lot-grid { grid-template-columns: 1fr 1fr; gap: 48px; } } .lot-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lot-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .lot-photos .main-photo { grid-column: 1 / -1; } .lot-info .car-label { font-family: var(--font-titre); color: var(--bleu); font-size: 1.3rem; margin-bottom: 4px; text-transform: uppercase; } .lot-info .car-sub { color: var(--gris); font-style: italic; margin-bottom: 16px; } .lot-info .car-desc { color: var(--gris); margin-bottom: 16px; line-height: 1.75; } .specs-list { list-style: none; padding: 0; margin: 0 0 20px; } .specs-list li { padding: 3px 0; font-size: 1rem; } .lot-info .car-note { font-size: .88rem; color: var(--gris); margin-bottom: 6px; } .lot-info .car-conditions { font-size: .85rem; color: #707070; margin-bottom: 20px; } .car-value-tag { display: inline-block; font-family: var(--font-titre); color: var(--bleu); font-size: 1.5rem; margin-bottom: 20px; } /* ===== CHAPELLE ===== */ .chapelle { background: var(--blanc); } .chapelle-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } @media (min-width: 769px) { .chapelle-grid { grid-template-columns: 2fr 3fr; gap: 48px; } } .chapelle-text p { color: var(--gris); margin-bottom: 14px; line-height: 1.75; } .chapelle-text strong { color: var(--noir); } .chapelle-img img { border-radius: 6px; } .btn-brochure { display: inline-block; margin-top: 8px; background: var(--bleu); color: var(--beige); font-family: var(--font-titre); font-size: 1.05rem; padding: 12px 30px; border-radius: 50px; transition: transform .2s; text-transform: uppercase; } .btn-brochure:hover { transform: scale(1.03); text-decoration: none; color: var(--beige); } /* ===== DON ===== */ .don-section p { color: var(--gris); max-width: 600px; margin: 0 auto 24px; font-size: 1.05rem; } /* ===== REGLEMENT ===== */ .reglement-section { text-align: center; padding: 24px 0 56px; } .btn-reglement { display: inline-block; font-family: var(--font-titre); font-size: 1.1rem; color: var(--bleu); border: 2px solid var(--beige); padding: 16px 40px; border-radius: 50px; transition: background .2s, color .2s; text-transform: uppercase; } .btn-reglement:hover { background: var(--bleu); color: var(--beige); border-color: var(--bleu); text-decoration: none; } /* ===== BUTTONS ===== */ .btn-primary { display: inline-block; background: var(--bleu); color: var(--beige); font-family: var(--font-titre); font-size: 1.4rem; padding: 16px 44px; border-radius: 50px; border: none; cursor: pointer; transition: transform .2s; text-transform: uppercase; } .btn-primary:hover { transform: scale(1.04); text-decoration: none; color: var(--beige); } /* ===== FOOTER ===== */ footer { background: var(--bleu); color: var(--beige); padding: 48px 0 32px; text-align: center; } footer .logo-footer { height: 80px; width: auto; margin: 0 auto 24px; object-fit: contain; } footer .legal { font-size: .82rem; opacity: .75; max-width: 600px; margin: 0 auto; line-height: 1.7; } footer a { color: var(--beige); opacity: .85; } footer a:hover { opacity: 1; } footer .gotombola-link { display: inline-flex; align-items: center; margin-top: 24px; opacity: .7; font-size: .9rem; transition: opacity .2s; } footer .gotombola-link > * + * { margin-left: 8px; } footer .gotombola-link:hover { opacity: .8; text-decoration: none; } @media (max-width: 768px) { footer { padding-bottom: 100px; } } /* ===== MICRO-ANIMATIONS AU TAP ===== */ .btn-primary, .btn-participer, .btn-brochure, .btn-reglement { position: relative; overflow: hidden; transition: transform .15s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s, color .2s; } .btn-primary:active, .btn-participer:active, .btn-brochure:active, .btn-reglement:active { transform: scale(.94) !important; transition: transform .08s; } /* Ripple */ .ripple-effect { position: absolute; border-radius: 50%; background: rgba(255,255,255,.35); transform: scale(0); animation: ripple-anim .5s ease-out forwards; pointer-events: none; } @keyframes ripple-anim { to { transform: scale(3); opacity: 0; } } /* ===== GRAIN TEXTURE OVERLAY ===== */ .grain-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: .035; } /* ===== MESH GRADIENT — don section ===== */ .don-section { background: radial-gradient(ellipse at 20% 50%, rgba(1,73,142,.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 30%, rgba(248,234,196,.25) 0%, transparent 55%), radial-gradient(ellipse at 50% 90%, rgba(1,73,142,.04) 0%, transparent 50%), var(--blanc); text-align: center; padding: 48px 0; position: relative; } /* ===== SCROLL PROGRESS BAR ===== */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 999; background: linear-gradient(90deg, var(--beige), var(--bleu)); width: 0%; transition: none; will-change: width; } /* ===== IMAGE HOVER LIFT (photos lot) ===== */ .lot-photos img { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s; } .lot-photos img:hover { transform: scale(1.03) translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.12); } /* ===== MOBILE FULLSCREEN GALLERY ===== */ .gallery-scroll-wrap { display: none; } @media (max-width: 768px) { .gallery-scroll-wrap { display: block; position: relative; margin: 0 -24px 32px; } .gallery-scroll-spacer { /* height set by JS: numImages * 100vh */ } .gallery-viewport { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; background: var(--blanc); z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gallery-slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; padding: 20px 16px 140px; } .gallery-slide.active { opacity: 1; transform: translateY(0) scale(1); } .gallery-slide.prev { opacity: 0; transform: translateY(-30px) scale(.97); } .gallery-slide img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 8px 40px rgba(1,73,142,.12), 0 2px 12px rgba(0,0,0,.06); } /* Caption below image */ .gallery-slide::after { content: attr(data-alt); position: absolute; bottom: 92px; left: 20px; right: 20px; color: var(--bleu); font-family: var(--font-corps); font-size: .95rem; font-weight: 300; text-align: center; opacity: .7; pointer-events: none; } /* No dark gradients — white bg doesn't need them */ .gallery-viewport::before, .gallery-viewport::after { display: none; } /* Counter pill */ .gallery-counter { position: absolute; top: 14px; right: 16px; z-index: 3; background: var(--bleu); color: var(--beige); font-family: var(--font-titre); font-size: 1rem; padding: 6px 16px; border-radius: 20px; letter-spacing: 1px; } /* Dots */ .gallery-dots { position: absolute; bottom: 68px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; } .gallery-dot + .gallery-dot { margin-left: 10px; } .gallery-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(1,73,142,.2); transition: background .3s, transform .3s; } .gallery-dot.active { background: var(--bleu); transform: scale(1.4); } /* Up/Down arrows */ .gallery-arrow { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(1,73,142,.08); color: var(--bleu); transition: opacity .3s, background .2s; pointer-events: none; } .gallery-arrow svg { width: 22px; height: 22px; } .gallery-arrow-up { top: 14px; } .gallery-arrow-down { bottom: 108px; } .gallery-arrow.hidden { opacity: 0; } .gallery-arrow.pulse { animation: arrowPulse 1.8s ease-in-out infinite; } @keyframes arrowPulse { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: .6; } 50% { transform: translateX(-50%) translateY(5px); opacity: 1; } } /* Scroll instruction text */ .gallery-instruction { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--bleu); font-size: .82rem; font-family: var(--font-corps); font-weight: 300; text-align: center; opacity: .55; white-space: nowrap; pointer-events: none; transition: opacity .4s; letter-spacing: .3px; } .gallery-instruction.hidden { opacity: 0; } /* Hide original grid on mobile */ .lot-photos-mobile-hidden { display: none !important; } } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { .fade-up, .fade-left, .fade-right, .scale-in, .stagger > *, .kinetic-title .word { transition: none !important; opacity: 1 !important; transform: none !important; } .scroll-progress { display: none; } .ripple-effect { display: none; } .lot-photos img { transition: none; } .gallery-slide { transition: none !important; } .gallery-arrow.pulse { animation: none; } .sticky-cta .btn-cta { animation: none !important; } } /* =========================================================================== PREMIUM POLISH — rehausse de la qualité visuelle (+20-30 %) Profondeur & ombres premium sur les cartes (lot, chapelle), micro-interactions au survol, transitions plus fluides, halos/dégradés subtils et raffinement des espacements. Strictement dans la charte : bleu #01498e / beige #f8eac4, polices Sultan / Louis George Cafe inchangées. Ton sobre patrimonial préservé. (Charte Tombola Patrimoine — palette bleu/beige.) =========================================================================== */ :root { /* Échelle d'ombres cohérente, teintée bleu patrimoine (jamais de noir pur) */ --shadow-sm: 0 1px 2px rgba(0,51,102,.05), 0 2px 8px rgba(1,73,142,.06); --shadow-md: 0 4px 12px rgba(1,73,142,.07), 0 14px 32px rgba(0,51,102,.08); --shadow-lg: 0 10px 22px rgba(1,73,142,.10), 0 28px 64px rgba(0,51,102,.14); --ease-premium: cubic-bezier(.22, 1, .36, 1); } /* --- LOT : carte premium (profondeur empilée, dégradé & halo subtils) --- */ .lot-block { position: relative; isolation: isolate; border-color: #efe2b8; background: linear-gradient(180deg, var(--blanc) 0%, var(--beige-clair) 100%); box-shadow: var(--shadow-md); transition: box-shadow .55s var(--ease-premium), transform .55s var(--ease-premium); } /* Liseré supérieur beige→bleu, signature discrète */ .lot-block::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--beige) 18%, var(--bleu) 50%, var(--beige) 82%, transparent); opacity: .55; pointer-events: none; } /* Halo lumineux qui se révèle au survol */ .lot-block::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 80% at 50% -10%, rgba(1,73,142,.07), transparent 60%); opacity: 0; transition: opacity .55s ease; pointer-events: none; z-index: -1; } @media (min-width: 769px) { .lot-block:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .lot-block:hover::before { opacity: 1; } } /* Photos du lot : coins plus doux + ombre premium au survol */ .lot-photos img { border-radius: 8px; box-shadow: var(--shadow-sm); } .lot-photos img:hover { box-shadow: var(--shadow-md); } /* Étiquette de valeur : badge premium dans la charte */ .car-value-tag { padding: 8px 22px; border-radius: 50px; background: linear-gradient(135deg, var(--beige) 0%, #fff3cf 100%); box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(1,73,142,.10); } /* Listes : micro-interaction de survol (glissement doux) */ .specs-list li, .emoji-list li { border-radius: 8px; transition: transform .3s var(--ease-premium), background .3s ease, padding .3s ease; } @media (min-width: 769px) { .specs-list li:hover, .emoji-list li:hover { transform: translateX(5px); background: rgba(1,73,142,.04); padding-left: 10px; } } /* --- CHAPELLE : profondeur premium sur le visuel --- */ .chapelle-img img { box-shadow: var(--shadow-md); transition: transform .55s var(--ease-premium), box-shadow .55s var(--ease-premium); } @media (min-width: 769px) { .chapelle-img img:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--shadow-lg); } } /* --- VIDÉO : ombre premium + léger relief au survol --- */ .video-wrapper { box-shadow: var(--shadow-md); transition: box-shadow .55s var(--ease-premium), transform .55s var(--ease-premium); } @media (min-width: 769px) { .video-wrapper:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } } /* --- BOUTONS : profondeur portée + relèvement fluide au survol --- */ .btn-primary { box-shadow: 0 4px 14px rgba(1,73,142,.22); } .btn-primary:hover { transform: scale(1.04) translateY(-2px); box-shadow: 0 12px 28px rgba(1,73,142,.30); } .btn-brochure { box-shadow: 0 4px 14px rgba(1,73,142,.20); } .btn-brochure:hover { transform: scale(1.03) translateY(-2px); box-shadow: 0 12px 26px rgba(1,73,142,.28); } .btn-reglement { box-shadow: var(--shadow-sm); } .btn-reglement:hover { box-shadow: var(--shadow-md); } /* En-tête : le bouton « Je participe » gagne en relief */ header .btn-participer { box-shadow: 0 2px 10px rgba(0,51,102,.18); transition: transform .2s, box-shadow .3s; } header .btn-participer:hover { box-shadow: 0 8px 20px rgba(0,51,102,.28); } /* --- FONDATION : logo légèrement détaché du fond --- */ .fondation-logo { filter: drop-shadow(0 6px 14px rgba(1,73,142,.12)); transition: transform .5s var(--ease-premium); } @media (min-width: 769px) { .fondation-logo:hover { transform: translateY(-3px); } } /* --- TITRES : raffinement typographique subtil (interlettrage) --- */ .big-title { letter-spacing: .3px; } .section-subtitle { letter-spacing: .2px; } /* Grain légèrement adouci pour une finition plus soignée */ .grain-overlay { opacity: .028; } /* --- CTA PREMIUM : halo pulsé + glow au survol (teinte bleu/beige existante) --- Généralise l'effet du sticky-CTA mobile aux boutons primaires « Je participe ». Halo bleu patrimoine pulsé en continu, renforcé au survol d'une pointe de beige. */ .btn-primary, .btn-participer { position: relative; animation: ctaPulse 3.2s ease-in-out infinite; } .btn-primary:hover, .btn-participer:hover { animation: none; } .btn-primary:hover { box-shadow: 0 14px 32px rgba(1,73,142,.34), 0 0 0 6px rgba(1,73,142,.10), 0 0 24px rgba(248,234,196,.50); } header .btn-participer:hover { box-shadow: 0 10px 24px rgba(0,51,102,.30), 0 0 0 5px rgba(1,73,142,.10), 0 0 18px rgba(248,234,196,.45); } @keyframes ctaPulse { 0%, 100% { box-shadow: 0 4px 14px rgba(1,73,142,.22), 0 0 0 0 rgba(1,73,142,0); } 50% { box-shadow: 0 7px 22px rgba(1,73,142,.34), 0 0 0 10px rgba(1,73,142,.07), 0 0 16px rgba(248,234,196,.30); } } /* Respect strict de prefers-reduced-motion sur les ajouts premium */ @media (prefers-reduced-motion: reduce) { .lot-block, .lot-photos img, .chapelle-img img, .video-wrapper, .specs-list li, .emoji-list li, .fondation-logo, .btn-primary, .btn-brochure, .btn-reglement, .btn-participer { transition: none !important; } .btn-primary, .btn-participer { animation: none !important; } .lot-block:hover, .chapelle-img img:hover, .video-wrapper:hover, .fondation-logo:hover, .specs-list li:hover, .emoji-list li:hover { transform: none !important; } .lot-block::before { display: none; } } /* =========================================================================== MODERNISATION DES FORMES — request-2026-06-25-1240 / item-006 Le site était jugé « un peu trop classique ». On retravaille subtilement le LANGAGE DES FORMES sans refonte : rayons de bordure plus généreux et cohérents, cadres beige « mat » autour des visuels, accent géométrique discret sous les titres, séparateur dégradé. 100 % dans la charte bleu #01498e / beige #f8eac4, polices inchangées, sans animation supplémentaire (zéro impact reduced-motion). Volontairement léger pour ne pas déstabiliser la mise en page. =========================================================================== */ :root { --radius-card: 18px; /* cartes / blocs (était 12px) */ --radius-media: 14px; /* visuels, vidéo, photo principale (était 6px) */ --radius-soft: 10px; /* éléments secondaires (vignettes, puces) */ } /* --- Cartes & blocs : coins plus doux, plus contemporains --- */ .lot-block { border-radius: var(--radius-card); } .lot-block::after { left: 28px; right: 28px; } /* liseré recadré sur le nouveau rayon */ /* --- Visuels : rayons modernisés + cadre beige « mat » discret --- */ .chapelle-img img { border-radius: var(--radius-media); border: 6px solid var(--blanc); outline: 1px solid var(--beige); outline-offset: -1px; } .video-wrapper { border-radius: var(--radius-media); } /* Photos du lot : vignettes adoucies, photo principale encadrée (cadre beige) */ .lot-photos img { border-radius: var(--radius-soft); } .lot-photos .main-photo { border-radius: var(--radius-media); border: 5px solid var(--blanc); outline: 1px solid var(--beige); outline-offset: -1px; } /* Logo fondation : pastille douce pour détacher le bloc du fond blanc */ @media (min-width: 600px) { .fondation-logo { padding: 6px; border-radius: var(--radius-soft); background: var(--beige-clair); } } /* --- Accent géométrique : barre dégradée sous chaque grand titre --- */ .big-title::after { content: ""; display: block; width: 60px; height: 4px; margin: 18px auto 0; border-radius: 50px; background: linear-gradient(90deg, var(--beige), var(--bleu)); opacity: .9; } /* --- Séparateur modernisé : la fondation se ferme sur un filet dégradé --- */ .fondation { border-bottom: none; position: relative; } .fondation::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: min(420px, 70%); height: 2px; border-radius: 50px; background: linear-gradient(90deg, transparent, var(--beige) 20%, var(--bleu) 50%, var(--beige) 80%, transparent); opacity: .6; } /* --- Boutons « capsule » : on assume la forme pill, coins parfaitement ronds --- */ .btn-primary, .btn-brochure, .btn-reglement, header .btn-participer, .sticky-cta .btn-cta { border-radius: 999px; } /* Liens de navigation : coins un peu plus doux que le 4px d'origine */ header nav a { border-radius: 8px; }