/* MissPom' — Signature shapes & image masks Les photos ne sont JAMAIS dans de simples rectangles. Applique une forme à un conteneur d'image :
Varie forme ET taille d'une tuile à l'autre. */ :root { --mask-scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M 180.00 100.00 Q 189.69 120.47 172.08 134.71 Q 171.93 157.36 149.88 162.55 Q 139.92 182.89 117.80 177.99 Q 100.00 192.00 82.20 177.99 Q 60.08 182.89 50.12 162.55 Q 28.07 157.36 27.92 134.71 Q 10.31 120.47 20.00 100.00 Q 10.31 79.53 27.92 65.29 Q 28.07 42.64 50.12 37.45 Q 60.08 17.11 82.20 22.01 Q 100.00 8.00 117.80 22.01 Q 139.92 17.11 149.88 37.45 Q 171.93 42.64 172.08 65.29 Q 189.69 79.53 180.00 100.00 Z' fill='%23000'%3E%3C/path%3E%3C/svg%3E"); --mask-scallop-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M 180.00 100.00 Q 188.87 123.81 169.28 140.00 Q 165.05 165.05 140.00 169.28 Q 123.81 188.87 100.00 180.00 Q 76.19 188.87 60.00 169.28 Q 34.95 165.05 30.72 140.00 Q 11.13 123.81 20.00 100.00 Q 11.13 76.19 30.72 60.00 Q 34.95 34.95 60.00 30.72 Q 76.19 11.13 100.00 20.00 Q 123.81 11.13 140.00 30.72 Q 165.05 34.95 169.28 60.00 Q 188.87 76.19 180.00 100.00 Z' fill='%23000'%3E%3C/path%3E%3C/svg%3E"); --mask-daisy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M 148.00 100.00 C 215.83 116.49 186.84 135.97 186.84 135.97 C 193.56 170.25 133.94 133.94 133.94 133.94 C 170.25 193.56 135.97 186.84 135.97 186.84 C 116.49 215.83 100.00 148.00 100.00 148.00 C 83.51 215.83 64.03 186.84 64.03 186.84 C 29.75 193.56 66.06 133.94 66.06 133.94 C 6.44 170.25 13.16 135.97 13.16 135.97 C -15.83 116.49 52.00 100.00 52.00 100.00 C -15.83 83.51 13.16 64.03 13.16 64.03 C 6.44 29.75 66.06 66.06 66.06 66.06 C 29.75 6.44 64.03 13.16 64.03 13.16 C 83.51 -15.83 100.00 52.00 100.00 52.00 C 116.49 -15.83 135.97 13.16 135.97 13.16 C 170.25 6.44 133.94 66.06 133.94 66.06 C 193.56 29.75 186.84 64.03 186.84 64.03 C 215.83 83.51 148.00 100.00 148.00 100.00 Z' fill='%23000'%3E%3C/path%3E%3C/svg%3E"); --mask-daisy-10: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M 148.00 100.00 C 216.25 113.20 189.40 129.05 189.40 129.05 C 201.81 157.65 138.83 128.21 138.83 128.21 C 186.29 179.01 155.25 176.05 155.25 176.05 C 148.48 206.48 114.83 145.65 114.83 145.65 C 123.37 214.64 100.00 194.00 100.00 194.00 C 76.63 214.64 85.17 145.65 85.17 145.65 C 51.52 206.48 44.75 176.05 44.75 176.05 C 13.71 179.01 61.17 128.21 61.17 128.21 C -1.81 157.65 10.60 129.05 10.60 129.05 C -16.25 113.20 52.00 100.00 52.00 100.00 C -16.25 86.80 10.60 70.95 10.60 70.95 C -1.81 42.35 61.17 71.79 61.17 71.79 C 13.71 20.99 44.75 23.95 44.75 23.95 C 51.52 -6.48 85.17 54.35 85.17 54.35 C 76.63 -14.64 100.00 6.00 100.00 6.00 C 123.37 -14.64 114.83 54.35 114.83 54.35 C 148.48 -6.48 155.25 23.95 155.25 23.95 C 186.29 20.99 138.83 71.79 138.83 71.79 C 201.81 42.35 189.40 70.95 189.40 70.95 C 216.25 86.80 148.00 100.00 148.00 100.00 Z' fill='%23000'%3E%3C/path%3E%3C/svg%3E"); --mask-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M 8 200 L 8 96 C 8 40 48 6 100 6 C 152 6 192 40 192 96 L 192 200 Z' fill='%23000'%3E%3C/path%3E%3C/svg%3E"); --mask-torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='18' viewBox='0 0 160 18'%3E%3Cpath d='M 0 3 L 10 2.9616598079561043 L 20 1.4618998628257889 L 30 2.7728395061728395 L 40 1.3142318244170097 L 50 3.357681755829904 L 60 2.1377572016460906 L 70 3.629766803840878 L 80 2.99420438957476 L 90 3.687860082304527 L 100 3.2415980795610424 L 110 1.70480109739369 L 120 4.756481481481481 L 130 1.4830589849108367 L 140 4.822805212620027 L 150 2.6769547325102883 L 160 3 L 160 15 L 150 14.79874828532236 L 140 16.24343278463649 L 130 15.22309670781893 L 120 13.120456104252401 L 110 16.799708504801096 L 100 15.050977366255143 L 90 16.36808984910837 L 80 16.059687928669412 L 70 16.693672839506174 L 60 13.874982853223594 L 50 15.35670438957476 L 40 13.48451646090535 L 30 14.974468449931413 L 20 16.02409122085048 L 10 14.756841563786008 L 0 15 Z' fill='%23000'/%3E%3C/svg%3E"); --mask-blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M 100 8 C 150 4 196 44 192 96 C 188 148 156 196 100 192 C 44 196 6 150 10 98 C 14 46 50 12 100 8 Z' fill='%23000'%3E%3C/path%3E%3C/svg%3E"); } /* — Masques bitmap (festbusés / pétales / blob) : data-URI, scalables — */ .mp-mask { position: relative; overflow: hidden; } .mp-mask > img, .mp-mask > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; } .mp-mask--scallop { -webkit-mask: var(--mask-scallop) center / 100% 100% no-repeat; mask: var(--mask-scallop) center / 100% 100% no-repeat; } .mp-mask--scallop12 { -webkit-mask: var(--mask-scallop-12) center / 100% 100% no-repeat; mask: var(--mask-scallop-12) center / 100% 100% no-repeat; } .mp-mask--daisy { -webkit-mask: var(--mask-daisy) center / 100% 100% no-repeat; mask: var(--mask-daisy) center / 100% 100% no-repeat; } .mp-mask--daisy10 { -webkit-mask: var(--mask-daisy-10) center / 100% 100% no-repeat; mask: var(--mask-daisy-10) center / 100% 100% no-repeat; } .mp-mask--blob { -webkit-mask: var(--mask-blob) center / 100% 100% no-repeat; mask: var(--mask-blob) center / 100% 100% no-repeat; } /* — Formes géométriques pures (pas de masque bitmap nécessaire) — */ .mp-mask--arch { border-radius: 50% 50% var(--r-lg) var(--r-lg) / 46% 46% var(--r-lg) var(--r-lg); } .mp-mask--circle { border-radius: 50%; } .mp-mask--blobcss{ border-radius: 42% 58% 63% 37% / 45% 38% 62% 55%; } .mp-mask--pill { border-radius: var(--r-pill); } .mp-mask--soft { border-radius: var(--r-lg); } /* — Masques additionnels : nuage, cactus, cœur, cacahuète (collage « bulles ») — */ :root { --mask-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='62' cy='118' r='38' fill='%23000'/%3E%3Ccircle cx='104' cy='86' r='48' fill='%23000'/%3E%3Ccircle cx='150' cy='118' r='34' fill='%23000'/%3E%3Crect x='40' y='116' width='124' height='48' rx='24' fill='%23000'/%3E%3C/svg%3E"); --mask-cactus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect x='66' y='24' width='68' height='172' rx='34' fill='%23000'/%3E%3Crect x='26' y='68' width='36' height='70' rx='18' fill='%23000'/%3E%3Crect x='26' y='102' width='56' height='36' rx='18' fill='%23000'/%3E%3Crect x='138' y='82' width='36' height='70' rx='18' fill='%23000'/%3E%3Crect x='118' y='116' width='56' height='36' rx='18' fill='%23000'/%3E%3C/svg%3E"); --mask-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M100 176 C34 124 24 74 60 52 C86 35 100 58 100 76 C100 58 114 35 140 52 C176 74 166 124 100 176 Z' fill='%23000'/%3E%3C/svg%3E"); --mask-peanut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='66' r='60' fill='%23000'/%3E%3Ccircle cx='100' cy='134' r='60' fill='%23000'/%3E%3Crect x='40' y='66' width='120' height='68' fill='%23000'/%3E%3C/svg%3E"); } .mp-mask--cloud { -webkit-mask: var(--mask-cloud) center / 100% 100% no-repeat; mask: var(--mask-cloud) center / 100% 100% no-repeat; } .mp-mask--cactus { -webkit-mask: var(--mask-cactus) center / 100% 100% no-repeat; mask: var(--mask-cactus) center / 100% 100% no-repeat; } .mp-mask--heart { -webkit-mask: var(--mask-heart) center / 100% 100% no-repeat; mask: var(--mask-heart) center / 100% 100% no-repeat; } .mp-mask--peanut { -webkit-mask: var(--mask-peanut) center / 100% 100% no-repeat; mask: var(--mask-peanut) center / 100% 100% no-repeat; }