/* Faire-P Digital — illustrations animées des thèmes. Un élément .fpd-art (couverture, carte de collection, fond du
   Save the Date, fiche design) reçoit le motif du design via la classe fpd-motif-* de son parent. Tout est dessiné en CSS. */
.fpd-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; --m-accent: color-mix(in srgb, var(--fpd-accent) 24%, transparent); --m-accent2: color-mix(in srgb, var(--fpd-accent2) 30%, transparent); }
.fpd-art::before, .fpd-art::after { content: ''; position: absolute; pointer-events: none; }
.fpd-cover.has-photo .fpd-art::before, .fpd-cover.has-photo .fpd-art::after { display: none; }
.fpd-std__card { --m-accent: color-mix(in srgb, var(--fpd-accent) 24%, transparent); --m-accent2: color-mix(in srgb, var(--fpd-accent2) 30%, transparent); }

@keyframes fpd-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); } 50% { transform: translate3d(0, -16px, 0) rotate(calc(var(--r, 0deg) + 3deg)); } }
@keyframes fpd-sway { 0%, 100% { transform: rotate(var(--r, 0deg)); } 50% { transform: rotate(calc(var(--r, 0deg) + 5deg)); } }
@keyframes fpd-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes fpd-shimmer { 0% { background-position: 200% 0, 0 0, 0 0; } 100% { background-position: -200% 0, 0 0, 0 0; } }
@keyframes fpd-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; opacity: .7; } 50% { box-shadow: 0 0 34px color-mix(in srgb, var(--fpd-accent) 45%, transparent); opacity: 1; } }
@keyframes fpd-fall { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 240px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } }
@keyframes fpd-sweep { 0% { transform: translateX(-80%) rotate(14deg); } 100% { transform: translateX(260%) rotate(14deg); } }
@keyframes fpd-rise { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -18px); } }
@keyframes fpd-draw { from { height: 0; } to { height: 40px; } }
@keyframes fpd-spin { from { transform: translate(-50%, -54%) rotate(-6deg); } to { transform: translate(-50%, -54%) rotate(6deg); } }
@keyframes fpd-pan { from { background-position: 0 0; } to { background-position: 140px 140px; } }
@keyframes fpd-seal { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes fpd-bubble { 0% { transform: translateY(0) scale(1); opacity: .9; } 100% { transform: translateY(-120px) scale(1.15); opacity: 0; } }

/* Ornement classique : reflet doré qui glisse, double cadre qui respire */
.fpd-motif-ornament .fpd-art { background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%) 0 0 / 300% 100%, radial-gradient(circle at 50% 28%, var(--m-accent), transparent 62%), linear-gradient(var(--fpd-bg), var(--fpd-paper)); animation: fpd-shimmer 7s linear infinite; }
.fpd-motif-ornament .fpd-art::before { inset: 7%; border: 1px solid var(--fpd-accent); animation: fpd-glow 4.5s ease-in-out infinite; }
.fpd-motif-ornament .fpd-art::after { inset: 9.5%; border: 1px solid color-mix(in srgb, var(--fpd-accent) 45%, transparent); }

/* Velours : rayon de lumière qui balaie le tissu */
.fpd-motif-velvet .fpd-art { background: radial-gradient(ellipse at 30% 15%, rgba(255,255,255,.16), transparent 55%), radial-gradient(ellipse at 75% 85%, rgba(0,0,0,.4), transparent 60%), var(--fpd-bg); }
.fpd-motif-velvet .fpd-art::before { top: -20%; left: 0; width: 34%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); animation: fpd-sweep 8s ease-in-out infinite; }
.fpd-motif-velvet .fpd-art::after { inset: 7%; border: 1px solid var(--fpd-accent); opacity: .8; }
.fpd-motif-velvet .fpd-std__card { background: radial-gradient(ellipse at 30% 15%, rgba(255,255,255,.12), transparent 55%), var(--fpd-paper); }

/* Sceau de cire : papier kraft strié, sceau qui palpite */
.fpd-motif-wax .fpd-art { background: repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 2px, transparent 2px 6px), linear-gradient(var(--fpd-bg), var(--fpd-paper)); }
.fpd-motif-wax .fpd-art::before { left: 50%; bottom: 9%; width: 24%; max-width: 92px; aspect-ratio: 1; margin-left: -12%; border-radius: 50%; background: radial-gradient(circle at 36% 32%, color-mix(in srgb, var(--fpd-seal) 60%, white), var(--fpd-seal) 55%, color-mix(in srgb, var(--fpd-seal) 65%, black)); box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 0 0 5px color-mix(in srgb, var(--fpd-seal) 85%, black); animation: fpd-seal 3.2s ease-in-out infinite; }
.fpd-motif-wax .fpd-art::after { inset: 8%; border: 1px dashed color-mix(in srgb, var(--fpd-accent2) 70%, transparent); }

/* Feuillages : deux grandes feuilles qui se balancent */
.fpd-motif-leaves .fpd-art { background: linear-gradient(var(--fpd-bg), var(--fpd-paper)); }
.fpd-motif-leaves .fpd-art::before, .fpd-motif-leaves .fpd-art::after, .fpd-motif-leaves .fpd-std__card::after { width: 42%; height: 72%; background: linear-gradient(160deg, var(--m-accent), color-mix(in srgb, var(--fpd-accent) 45%, transparent)); border-radius: 0 100% 0 100%; animation: fpd-sway 6s ease-in-out infinite; }
.fpd-motif-leaves .fpd-art::before { left: -14%; top: -10%; --r: -35deg; transform-origin: 0 100%; }
.fpd-motif-leaves .fpd-art::after { right: -14%; bottom: -12%; --r: 145deg; transform-origin: 100% 0; animation-delay: -3s; }
.fpd-motif-leaves .fpd-std__card::after { content: ''; position: absolute; right: -60px; bottom: -80px; width: 140px; height: 240px; --r: 150deg; pointer-events: none; }

/* Arabesques : étoiles géométriques qui dérivent, cadre doré */
.fpd-motif-arabesque .fpd-art { background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--fpd-accent) 16%, transparent) 0 8deg, transparent 8deg 45deg) 0 0 / 140px 140px, radial-gradient(circle at 50% 40%, transparent, rgba(0,0,0,.35)), var(--fpd-bg); animation: fpd-pan 40s linear infinite; }
.fpd-motif-arabesque .fpd-art::before { inset: 7%; border: 2px solid var(--fpd-accent); animation: fpd-glow 5s ease-in-out infinite; }
.fpd-motif-arabesque .fpd-art::after { inset: 9.5%; border: 1px solid color-mix(in srgb, var(--fpd-accent) 55%, transparent); }
.fpd-motif-arabesque .fpd-std__card { background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--fpd-accent) 10%, transparent) 0 8deg, transparent 8deg 45deg) 0 0 / 120px 120px, var(--fpd-paper); }

/* Lignes : cadre graphique, trait qui se dessine */
.fpd-motif-lines .fpd-art { background: var(--fpd-bg); }
.fpd-motif-lines .fpd-art::before { inset: 6%; border: 1px solid var(--fpd-accent); animation: fpd-glow 6s ease-in-out infinite; }
.fpd-motif-lines .fpd-art::after { left: 6%; right: 50%; top: 6%; bottom: 6%; border-right: 1px solid color-mix(in srgb, var(--fpd-accent) 35%, transparent); }

/* Verre : halos nacrés, bulles qui montent */
.fpd-motif-glass .fpd-art { background: radial-gradient(circle at 20% 25%, var(--m-accent2), transparent 45%), radial-gradient(circle at 80% 70%, var(--m-accent), transparent 50%), linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.15)), var(--fpd-bg); }
.fpd-motif-glass .fpd-art::before, .fpd-motif-glass .fpd-art::after { bottom: -10%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.2) 60%, transparent 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); animation: fpd-bubble 9s ease-in infinite; }
.fpd-motif-glass .fpd-art::before { left: 18%; }
.fpd-motif-glass .fpd-art::after { right: 22%; width: 11%; animation-delay: -4.5s; animation-duration: 11s; }
.fpd-motif-glass .fpd-cover__content { padding: 36px 28px; background: rgba(255,255,255,.35); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.6); }

/* Floral : pivoines aquarellées, pétales qui tombent, feuillage qui ondule */
.fpd-motif-floral .fpd-art { background: radial-gradient(circle, color-mix(in srgb, var(--fpd-accent) 55%, transparent) 3px, transparent 4px) 0 0 / 180px 240px, radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--fpd-accent) 38%, transparent) 0 70px, transparent 72px), radial-gradient(circle at 22% 6%, color-mix(in srgb, var(--fpd-accent) 26%, transparent) 0 44px, transparent 46px), radial-gradient(circle at 5% 30%, color-mix(in srgb, var(--fpd-accent) 22%, transparent) 0 36px, transparent 38px), radial-gradient(circle at 90% 88%, color-mix(in srgb, var(--fpd-accent) 38%, transparent) 0 70px, transparent 72px), radial-gradient(circle at 78% 94%, color-mix(in srgb, var(--fpd-accent) 26%, transparent) 0 44px, transparent 46px), radial-gradient(circle at 95% 70%, color-mix(in srgb, var(--fpd-accent) 22%, transparent) 0 36px, transparent 38px), linear-gradient(var(--fpd-bg), var(--fpd-paper)); animation: fpd-fall 14s linear infinite; }
.fpd-motif-floral .fpd-art::before, .fpd-motif-floral .fpd-art::after { width: 30%; height: 50%; background: var(--m-accent2); border-radius: 0 100% 0 100%; animation: fpd-sway 7s ease-in-out infinite; }
.fpd-motif-floral .fpd-art::before { left: 2%; top: 14%; --r: -60deg; transform-origin: 0 100%; }
.fpd-motif-floral .fpd-art::after { right: 2%; bottom: 12%; --r: 120deg; transform-origin: 100% 0; animation-delay: -3.5s; }
.fpd-motif-floral .fpd-std__card { background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--fpd-accent) 30%, transparent) 0 60px, transparent 62px), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--fpd-accent) 30%, transparent) 0 60px, transparent 62px), var(--fpd-paper); }

/* Arche bohème : soleil qui se lève derrière l'arche */
.fpd-motif-arch .fpd-art { background: linear-gradient(var(--fpd-bg), var(--fpd-paper)); }
.fpd-motif-arch .fpd-art::after { left: 50%; bottom: 36%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--fpd-accent2) 90%, white), color-mix(in srgb, var(--fpd-accent) 70%, transparent)); box-shadow: 0 0 60px color-mix(in srgb, var(--fpd-accent2) 60%, transparent); animation: fpd-rise 6s ease-in-out infinite; }
.fpd-motif-arch .fpd-art::before { left: 50%; bottom: 0; width: 74%; height: 78%; transform: translateX(-50%); background: linear-gradient(color-mix(in srgb, var(--fpd-accent) 30%, transparent), color-mix(in srgb, var(--fpd-accent2) 40%, transparent)); border-radius: 999px 999px 0 0; box-shadow: inset 0 0 0 1px var(--fpd-accent); }
.fpd-motif-arch .fpd-std__card::before { border-radius: 999px 999px 0 0; inset: 10px 10px 0; border-bottom: 0; }

/* Éditorial : esperluette monumentale qui oscille lentement */
.fpd-motif-editorial .fpd-art { background: var(--fpd-bg); }
.fpd-motif-editorial .fpd-art::before { content: '&'; left: 50%; top: 50%; transform: translate(-50%, -54%); font-family: var(--fpd-display); font-style: italic; font-size: 140cqmin; font-size: min(120vw, 820px); line-height: 1; color: var(--fpd-ink); opacity: .06; animation: fpd-spin 12s ease-in-out infinite alternate; }
.fpd-motif-editorial .fpd-art::after { left: 6%; right: 6%; top: 6%; border-top: 2px solid var(--fpd-ink); }
.fpd-design-card__preview.fpd-motif-editorial .fpd-art::before { font-size: 260px; }

/* Carreaux de majolique : trame qui glisse */
.fpd-motif-tiles .fpd-art { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--fpd-accent) 12%, transparent) 0 22px, transparent 22px 44px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--fpd-accent2) 22%, transparent) 0 22px, transparent 22px 44px), var(--fpd-bg); animation: fpd-pan 30s linear infinite; }
.fpd-motif-tiles .fpd-cover__content { padding: 36px 28px; background: color-mix(in srgb, var(--fpd-paper) 92%, transparent); border: 1px solid var(--fpd-accent); }
.fpd-motif-tiles .fpd-std__card { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--fpd-accent) 6%, transparent) 0 22px, transparent 22px 44px), var(--fpd-paper); }

/* Dentelle : semis de perles scintillant, cadre brodé */
.fpd-motif-lace .fpd-art { background: radial-gradient(circle, color-mix(in srgb, var(--fpd-accent) 32%, transparent) 1.6px, transparent 2.2px) 0 0 / 16px 16px, linear-gradient(var(--fpd-bg), var(--fpd-paper)); }
.fpd-motif-lace .fpd-art::before { inset: 0; background: radial-gradient(circle, color-mix(in srgb, var(--fpd-accent) 60%, white) 1.4px, transparent 2px) 8px 8px / 32px 32px; animation: fpd-twinkle 3.5s ease-in-out infinite; }
.fpd-motif-lace .fpd-art::after { inset: 7%; border: 1px solid color-mix(in srgb, var(--fpd-accent) 60%, transparent); outline: 1px solid color-mix(in srgb, var(--fpd-accent) 30%, transparent); outline-offset: 5px; }
.fpd-motif-lace .fpd-cover__content { padding: 36px 28px; background: var(--fpd-paper); box-shadow: 0 0 0 1px var(--fpd-accent), 0 0 0 6px var(--fpd-paper), 0 0 0 7px color-mix(in srgb, var(--fpd-accent) 50%, transparent); }
.fpd-motif-lace .fpd-std__card { background: radial-gradient(circle, color-mix(in srgb, var(--fpd-accent) 18%, transparent) 1.4px, transparent 2px) 0 0 / 16px 16px, var(--fpd-paper); }

/* Nuit étoilée : deux couches d'étoiles qui scintillent en alternance */
.fpd-motif-stars .fpd-art { background: radial-gradient(1.6px 1.6px at 12% 22%, var(--fpd-accent) 60%, transparent 61%), radial-gradient(1.2px 1.2px at 28% 68%, var(--fpd-accent) 60%, transparent 61%), radial-gradient(2px 2px at 46% 14%, var(--fpd-accent) 60%, transparent 61%), radial-gradient(1.2px 1.2px at 62% 42%, var(--fpd-accent) 60%, transparent 61%), radial-gradient(1.8px 1.8px at 78% 24%, var(--fpd-accent) 60%, transparent 61%), radial-gradient(1.4px 1.4px at 88% 76%, var(--fpd-accent) 60%, transparent 61%), linear-gradient(180deg, var(--fpd-bg), color-mix(in srgb, var(--fpd-accent2) 35%, var(--fpd-bg))); }
.fpd-motif-stars .fpd-art::before { inset: 0; background: radial-gradient(1.2px 1.2px at 36% 88%, #fff 60%, transparent 61%), radial-gradient(1.5px 1.5px at 70% 90%, #fff 60%, transparent 61%), radial-gradient(1.2px 1.2px at 8% 52%, #fff 60%, transparent 61%), radial-gradient(1.6px 1.6px at 94% 48%, #fff 60%, transparent 61%), radial-gradient(1.3px 1.3px at 52% 60%, #fff 60%, transparent 61%), radial-gradient(1.1px 1.1px at 20% 40%, #fff 60%, transparent 61%), radial-gradient(1.4px 1.4px at 82% 8%, #fff 60%, transparent 61%); animation: fpd-twinkle 2.8s ease-in-out infinite; }
.fpd-motif-stars .fpd-art::after { inset: 7%; border: 1px solid color-mix(in srgb, var(--fpd-accent) 70%, transparent); }
.fpd-motif-stars .fpd-std__card { background: radial-gradient(1.5px 1.5px at 14% 20%, var(--fpd-accent) 60%, transparent 61%), radial-gradient(1.5px 1.5px at 84% 30%, var(--fpd-accent) 60%, transparent 61%), radial-gradient(1.5px 1.5px at 30% 84%, var(--fpd-accent) 60%, transparent 61%), radial-gradient(1.5px 1.5px at 72% 78%, var(--fpd-accent) 60%, transparent 61%), var(--fpd-paper); }

/* Minimal : un trait qui se dessine, rien d'autre */
.fpd-motif-none .fpd-art { background: var(--fpd-bg); }
.fpd-motif-none .fpd-art::before { left: 50%; top: 6%; width: 1px; height: 40px; background: var(--fpd-ink); animation: fpd-draw 2.4s cubic-bezier(.2,.8,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  .fpd-art, .fpd-art::before, .fpd-art::after { animation: none !important; }
}