/* ═══════════════════════════════════════════════════════════════════════════ IDD Site Mariage — Reset + grille des sections (commun à tous les templates) Les variables --wpm-* sont définies par theme-engine.php (en tête du ) ═══════════════════════════════════════════════════════════════════════════ */ /* ────── ANIMATIONS PARTAGÉES ────── */ @keyframes wpm-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes wpm-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wpm-letter-spacing { from { letter-spacing: 0; opacity: 0; } to { letter-spacing: inherit; opacity: 1; } } @keyframes wpm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes wpm-shimmer { 0% { background-position: -200% 50%; } 100% { background-position: 200% 50%; } } @keyframes wpm-petals-fall { 0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(30px, 100vh) rotate(360deg); opacity: 0; } } /* Reveal on scroll : ajouter `.wpm-reveal` à un élément, sera animé via IntersectionObserver (view.js) */ .wpm-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); } .wpm-reveal.is-in { opacity: 1; transform: none; } .wpm-reveal[data-delay="1"] { transition-delay: .12s; } .wpm-reveal[data-delay="2"] { transition-delay: .24s; } .wpm-reveal[data-delay="3"] { transition-delay: .36s; } /* Respecte prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .wpm-reveal, .wpm-reveal.is-in { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; } } .wpm { font-family: var(--wpm-font-body, system-ui, sans-serif); color: var(--wpm-ink, #1d1819); background: var(--wpm-surface, #fff); line-height: 1.6; font-size: 16px; } .wpm *, .wpm *::before, .wpm *::after { box-sizing: border-box; } .wpm img { max-width: 100%; height: auto; display: block; } .wpm a { color: var(--wpm-primary); text-decoration: none; } .wpm a:hover { text-decoration: underline; } .wpm h1, .wpm h2, .wpm h3, .wpm h4 { font-family: var(--wpm-font-heading, serif); font-weight: 500; line-height: 1.15; margin: 0 0 .6em; color: var(--wpm-ink); } .wpm-section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); text-align: center; margin: 0 0 32px; letter-spacing: .01em; } .wpm-section-title::after { content: ''; display: block; width: 48px; height: 1px; background: var(--wpm-primary); margin: 14px auto 0; opacity: .6; } .wpm > section { padding: 80px 24px; max-width: 1080px; margin: 0 auto; } .wpm > section:first-child { padding-top: 0; max-width: none; margin: 0; } /* Responsive global mobile (avec spécificité élevée pour battre les templates qui définissent leur propre padding desktop) */ @media (max-width: 720px) { .wpm.wpm > section { padding: 56px 18px; max-width: 100%; } .wpm.wpm > section:first-child { padding: 0; } } @media (max-width: 480px) { .wpm.wpm > section { padding: 40px 14px; } } /* Hero sur mobile : utilise dvh (avec fallback vh) pour s'adapter à la barre URL. Spécificité élevée pour battre les overrides des templates */ @supports (height: 100dvh) { .wpm.wpm .wpm-hero { min-height: 92dvh; } } @media (max-width: 720px) { .wpm.wpm .wpm-hero { min-height: 88vh; min-height: 88dvh; } } /* ────── HERO ────── */ .wpm-hero { position: relative; min-height: 92vh; min-height: 92dvh; /* dvh : tient compte de la barre URL mobile */ background: var(--wpm-primary); background-size: cover; background-position: center; color: var(--wpm-on-primary); display: flex; align-items: center; justify-content: center; overflow: hidden; } .wpm-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.6) 100%); pointer-events: none; } .wpm-hero__inner { position: relative; z-index: 2; max-width: 880px; padding: 0 24px; text-align: center; } .wpm-hero--left .wpm-hero__inner { text-align: left; margin-right: auto; padding-left: 6vw; } .wpm-hero--right .wpm-hero__inner { text-align: right; margin-left: auto; padding-right: 6vw; } .wpm-hero__subtitle { font-family: var(--wpm-font-body); font-size: .85rem; letter-spacing: .35em; text-transform: uppercase; opacity: .85; margin: 0 0 28px; } .wpm-hero__names { font-family: var(--wpm-font-heading); font-size: clamp(2.8rem, 9vw, 6rem); font-weight: 400; margin: 0; color: inherit; display: flex; flex-direction: column; gap: .1em; align-items: center; } .wpm-hero--left .wpm-hero__names { align-items: flex-start; } .wpm-hero--right .wpm-hero__names { align-items: flex-end; } .wpm-hero__amp { font-size: .55em; opacity: .8; font-style: italic; } .wpm-hero__date { margin: 28px 0 0; font-family: var(--wpm-font-body); font-size: 1.1rem; letter-spacing: .15em; text-transform: uppercase; } /* ────── COUNTDOWN ────── */ .wpm-countdown { background: var(--wpm-accent); color: var(--wpm-on-accent); } .wpm-countdown__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 720px; margin: 0 auto; } .wpm-countdown__grid > div { text-align: center; padding: 24px 8px; background: rgba(255, 255, 255, .12); border-radius: var(--wpm-radius, 16px); backdrop-filter: blur(4px); } .wpm-countdown__grid strong { display: block; font-family: var(--wpm-font-heading); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 500; line-height: 1; } .wpm-countdown__grid small { display: block; margin-top: 8px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; opacity: .9; } @media (max-width: 540px) { .wpm-countdown__grid { grid-template-columns: repeat(2, 1fr); } } /* ────── HISTOIRE ────── */ .wpm-histoire { background: var(--wpm-surface); } .wpm-histoire__body { max-width: 720px; margin: 0 auto; font-size: 1.05rem; line-height: 1.8; color: var(--wpm-ink); } .wpm-histoire__body p { margin: 0 0 1.2em; } .wpm-histoire__body p:last-child { margin-bottom: 0; } /* ────── LIEU ────── */ .wpm-lieu { background: var(--wpm-surface); } .wpm-lieu__steps { display: grid; gap: 40px; } .wpm-lieu__step { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; background: var(--wpm-surface); border-radius: var(--wpm-radius-lg); overflow: hidden; box-shadow: var(--wpm-shadow); border: 1px solid var(--wpm-line); } .wpm-lieu__step:nth-child(even) { grid-template-columns: 1fr 1.1fr; } .wpm-lieu__step:nth-child(even) .wpm-lieu__step-img { order: 2; } @media (max-width: 720px) { .wpm-lieu__step, .wpm-lieu__step:nth-child(even) { grid-template-columns: 1fr; } .wpm-lieu__step:nth-child(even) .wpm-lieu__step-img { order: 0; } } .wpm-lieu__step-img img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; } .wpm-lieu__step-body { padding: 28px 28px 24px; } .wpm-lieu__step-head { margin-bottom: 16px; } .wpm-lieu__step-type { display: inline-block; padding: 4px 10px; background: var(--wpm-primary); color: var(--wpm-on-primary); border-radius: 999px; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; } .wpm-lieu__step-label { font-size: 1.8rem; margin: 12px 0 4px; } .wpm-lieu__step-time { color: var(--wpm-primary); font-weight: 500; margin: 0; letter-spacing: .04em; } .wpm-lieu__step-addr { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--wpm-primary); background: var(--wpm-accent); color: var(--wpm-on-accent); border-radius: 0 8px 8px 0; font-size: .95rem; } .wpm-lieu__step-dress, .wpm-lieu__step-parking, .wpm-lieu__step-notes { margin: 8px 0; font-size: .92rem; line-height: 1.6; } .wpm-lieu__map { height: 240px; margin: 20px 0 16px; border-radius: var(--wpm-radius); overflow: hidden; background: var(--wpm-accent); border: 1px solid var(--wpm-line); } .wpm-lieu__actions { display: flex; gap: 8px; flex-wrap: wrap; } .wpm-lieu__btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: var(--wpm-surface); border: 1px solid var(--wpm-line); border-radius: 999px; color: var(--wpm-ink); font-size: .88rem; font-weight: 500; text-decoration: none; transition: all .15s; } .wpm-lieu__btn:hover { border-color: var(--wpm-primary); background: var(--wpm-accent); text-decoration: none; } /* ────── PROGRAMME (timeline) ────── */ .wpm-programme__timeline { list-style: none; padding: 0; margin: 0; max-width: 720px; margin: 0 auto; position: relative; } .wpm-programme__timeline::before { content: ''; position: absolute; left: 80px; top: 8px; bottom: 8px; width: 2px; background: var(--wpm-primary); opacity: .25; } @media (max-width: 540px) { .wpm-programme__timeline::before { left: 60px; } } .wpm-programme__item { display: grid; grid-template-columns: 80px 32px 1fr; gap: 12px; padding: 18px 0; align-items: start; } @media (max-width: 540px) { .wpm-programme__item { grid-template-columns: 60px 24px 1fr; } } .wpm-programme__time { font-family: var(--wpm-font-heading); font-size: 1.3rem; font-weight: 500; color: var(--wpm-primary); text-align: right; line-height: 1.1; padding-top: 6px; } .wpm-programme__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--wpm-primary); border: 3px solid var(--wpm-surface); margin: 10px auto 0; box-shadow: 0 0 0 2px var(--wpm-primary); } .wpm-programme__title { font-size: 1.15rem; margin: 0 0 4px; } .wpm-programme__where, .wpm-programme__notes { margin: 4px 0; font-size: .9rem; color: var(--wpm-ink); opacity: .8; } /* ────── PLAYLIST ────── */ .wpm-playlist__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .wpm-playlist__item iframe { width: 100%; border-radius: var(--wpm-radius); box-shadow: var(--wpm-shadow); } .wpm-playlist__video { position: relative; padding-top: 56.25%; border-radius: var(--wpm-radius); overflow: hidden; box-shadow: var(--wpm-shadow); } .wpm-playlist__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .wpm-playlist__card { display: grid; gap: 4px; padding: 18px; background: var(--wpm-accent); color: var(--wpm-on-accent); border-radius: var(--wpm-radius); } .wpm-playlist__card strong { font-family: var(--wpm-font-heading); font-size: 1.15rem; } .wpm-playlist__card em { opacity: .8; font-style: italic; font-size: .9rem; } .wpm-playlist__card a { color: inherit; margin-top: 8px; font-weight: 500; } /* ────── GALERIE ────── */ .wpm-galerie__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .wpm-galerie__item { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--wpm-radius); cursor: zoom-in; } .wpm-galerie__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .wpm-galerie__item:hover img { transform: scale(1.05); } /* Lightbox */ .wpm-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; padding: 24px; } .wpm-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; } .wpm-lb__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 22px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .wpm-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 22px; border: 0; cursor: pointer; } .wpm-lb__nav--prev { left: 18px; } .wpm-lb__nav--next { right: 18px; } /* ────── RSVP ────── */ .wpm-rsvp { background: var(--wpm-accent); color: var(--wpm-on-accent); text-align: center; } .wpm-rsvp__inner { max-width: 560px; margin: 0 auto; } .wpm-rsvp__intro { font-size: 1.1rem; margin: 0 0 28px; line-height: 1.7; } .wpm-rsvp__cta { display: inline-block; padding: 16px 36px; background: var(--wpm-primary); color: var(--wpm-on-primary); border-radius: 999px; font-size: 1.05rem; font-weight: 500; letter-spacing: .03em; text-decoration: none; box-shadow: 0 12px 32px -8px rgba(0,0,0,.2); transition: transform .15s; } .wpm-rsvp__cta:hover { transform: translateY(-2px); text-decoration: none; color: var(--wpm-on-primary); } .wpm-rsvp__code { margin-top: 24px; font-size: .92rem; } .wpm-rsvp__code strong { display: inline-block; padding: 4px 12px; margin-left: 4px; background: rgba(0,0,0,.08); border-radius: 6px; letter-spacing: .3em; font-weight: 600; } /* ────── MENU ────── */ .wpm-menu__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .wpm-menu__card { padding: 28px 24px; border: 1px solid var(--wpm-line); border-radius: var(--wpm-radius-lg); background: var(--wpm-surface); text-align: center; } .wpm-menu__h3 { font-size: 1.4rem; margin: 0 0 12px; color: var(--wpm-primary); } .wpm-menu__h3::after { content: ''; display: block; width: 36px; height: 1px; background: var(--wpm-primary); margin: 10px auto; opacity: .5; } .wpm-menu__body { font-size: .95rem; line-height: 1.7; } /* ────── LISTE MARIAGE ────── */ .wpm-liste { background: var(--wpm-surface); text-align: center; } .wpm-liste__inner { max-width: 560px; margin: 0 auto; } .wpm-liste__intro { font-size: 1.05rem; line-height: 1.7; margin: 0 0 24px; } .wpm-liste__cta { display: inline-block; padding: 14px 32px; background: var(--wpm-primary); color: var(--wpm-on-primary); border-radius: 999px; font-weight: 500; text-decoration: none; transition: transform .15s; } .wpm-liste__cta:hover { transform: translateY(-2px); color: var(--wpm-on-primary); text-decoration: none; } /* ────── PRESTATAIRES ────── */ .wpm-prestas__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .wpm-prestas__card { padding: 22px 20px; background: var(--wpm-surface); border: 1px solid var(--wpm-line); border-radius: var(--wpm-radius); } .wpm-prestas__cat { display: inline-block; font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--wpm-primary); font-weight: 600; margin-bottom: 8px; } .wpm-prestas__name { font-size: 1.15rem; margin: 0 0 8px; } .wpm-prestas__link { font-size: .88rem; } /* ────── PLACES (hébergement + commerces) ────── */ .wpm-places__intro { text-align: center; max-width: 640px; margin: -16px auto 36px; font-size: 1.02rem; line-height: 1.6; color: var(--wpm-ink); opacity: .85; } .wpm-places__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .wpm-places__card { background: var(--wpm-surface); border: 1px solid var(--wpm-line); border-radius: var(--wpm-radius); overflow: hidden; box-shadow: var(--wpm-shadow); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; } .wpm-places__card:hover { transform: translateY(-4px); } .wpm-places__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--wpm-accent); } .wpm-places__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .wpm-places__card:hover .wpm-places__img img { transform: scale(1.06); } .wpm-places__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .wpm-places__cat { display: inline-block; padding: 3px 10px; background: var(--wpm-accent); color: var(--wpm-on-accent); border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; align-self: flex-start; } .wpm-places__name { font-size: 1.25rem; margin: 4px 0; font-family: var(--wpm-font-heading); } .wpm-places__addr { margin: 0; font-size: .82rem; color: var(--wpm-ink); opacity: .7; } .wpm-places__desc { margin: 4px 0 0; font-size: .92rem; line-height: 1.55; flex: 1; } .wpm-places__cta { margin-top: 8px; align-self: flex-start; font-size: .9rem; font-weight: 500; color: var(--wpm-primary); } /* ────── INFOS ────── */ .wpm-infos__intro { max-width: 720px; margin: 0 auto 32px; text-align: center; font-size: 1.05rem; } .wpm-infos__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .wpm-infos__card { padding: 22px; background: var(--wpm-accent); color: var(--wpm-on-accent); border-radius: var(--wpm-radius); text-align: center; } .wpm-infos__card h3 { font-size: 1.1rem; margin: 0 0 8px; } /* ────── LIVRE D'OR ────── */ .wpm-livre {} .wpm-livre__form { max-width: 560px; margin: 0 auto 40px; display: grid; gap: 12px; } .wpm-livre__form input, .wpm-livre__form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--wpm-line); border-radius: 12px; font-family: inherit; font-size: 1rem; background: var(--wpm-surface); color: var(--wpm-ink); } .wpm-livre__form textarea { min-height: 120px; resize: vertical; } .wpm-livre__form button { padding: 13px 24px; background: var(--wpm-primary); color: var(--wpm-on-primary); border: 0; border-radius: 999px; font-weight: 500; cursor: pointer; } .wpm-livre__honey { position: absolute; left: -9999px; } .wpm-livre__status { font-size: .9rem; text-align: center; min-height: 1.4em; } .wpm-livre__list { display: grid; gap: 16px; max-width: 720px; margin: 0 auto; } .wpm-livre__msg { padding: 20px 22px; background: var(--wpm-accent); color: var(--wpm-on-accent); border-radius: var(--wpm-radius); } .wpm-livre__msg-name { font-family: var(--wpm-font-heading); font-size: 1.15rem; margin: 0 0 6px; } .wpm-livre__msg-date { font-size: .75rem; opacity: .7; } .wpm-livre__msg-body { margin: 10px 0 0; line-height: 1.6; } /* ────── FOOTER ────── */ .wpm-footer { text-align: center; padding: 48px 24px; background: var(--wpm-primary); color: var(--wpm-on-primary); } .wpm-footer__love { font-family: var(--wpm-font-heading); font-size: 1.5rem; font-style: italic; margin: 0 0 12px; } .wpm-footer__watermark { font-size: .75rem; opacity: .7; margin: 0; letter-spacing: .05em; } .wpm-footer__watermark a { color: inherit; text-decoration: underline; }