entre items */
.nc-page-header #seopress-bc > span + span:not(:has(a)):not(.current),
.nc-page-header .seopress-breadcrumbs > span + span:not(:has(a)):not(.current) {
margin: 0 6px;
opacity: 0.5;
}
/* ============================================
HERO VISUAL — disque flottant + badges
============================================ */
.hero-visual {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
max-width: 520px;
margin-left: auto;
}
.hero-visual .disc {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--wp--preset--color--primary-light);
border: 3px solid #000;
box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.2);
}
.hero-visual img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
top: -55px;
}
.hero-visual .sparkle {
position: absolute;
font-family: var(--wp--preset--font-family--script);
font-size: 44px;
font-weight: 700;
color: var(--wp--preset--color--accent);
transform: rotate(-8deg);
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
pointer-events: none;
line-height: 1;
}
.hero-visual .sparkle.one { top: -4%; right: -2%; }
.hero-visual .sparkle.two { bottom: 6%; left: -6%; transform: rotate(6deg); }
.hero-badge {
position: absolute;
background: #fff;
color: #000;
padding: 10px 16px;
border-radius: 14px;
font-size: 13px;
font-weight: 600;
box-shadow: 6px 6px 0 #000;
border: 2px solid #000;
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.hero-badge .ico {
width: 26px;
height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--wp--preset--color--primary);
color: #fff;
flex-shrink: 0;
}
.hero-badge.b1 { top: 8%; left: -24px; transform: rotate(-4deg); }
.hero-badge.b2 { bottom: 14%; right: -28px; transform: rotate(3deg);
background: var(--wp--preset--color--accent); }
.hero-badge.b2 .ico { background: #000; }
@keyframes nc-floaty {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.floaty { animation: nc-floaty 4s ease-in-out infinite; }
.floaty.delay { animation-delay: 1.2s; }
@media (max-width: 781px) {
.hero-visual { max-width: 340px; margin-left: auto; margin-right: auto; }
.hero-visual .sparkle { font-size: 30px; }
.hero-badge { font-size: 11px; padding: 7px 12px; }
.hero-badge.b1 { left: 0; }
.hero-badge.b2 { right: 0; }
}
/* ============================================
GLASSMORPHISME — is-style-glassmorphism
Appliqué sur un bloc Groupe via l'éditeur
============================================ */
.wp-block-group.is-style-glassmorphism {
background: rgba(255, 255, 255, 0.08) !important;
border: 2px solid rgba(255, 255, 255, 0.35) !important;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background .2s ease, border-color .2s ease;
}
.wp-block-group.is-style-glassmorphism:hover {
background: rgba(255, 255, 255, 0.13) !important;
border-color: rgba(255, 255, 255, 0.55) !important;
}
/* ============================================
WHY SECTION — numéro + icône
============================================ */
.nc-why-num {
font-family: var(--wp--preset--font-family--mono);
font-size: 13px;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.55);
margin: 0 0 20px;
}
.nc-why-ico {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--wp--preset--color--accent);
border: 2px solid #000;
box-shadow: 4px 4px 0 #000;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #000;
flex-shrink: 0;
}
/* ============================================
TILT — is-style-tilt
Appliqué sur un Paragraphe ou Heading via l'éditeur
Note : WP ne met pas .wp-block-paragraph sur le en front,
on cible donc le tag directement + la classe éditeur.
============================================ */
p.is-style-tilt,
.wp-block-paragraph.is-style-tilt,
h1.is-style-tilt, h2.is-style-tilt, h3.is-style-tilt,
h4.is-style-tilt, h5.is-style-tilt, h6.is-style-tilt,
.wp-block-heading.is-style-tilt {
transform: rotate(-2deg);
transform-origin: center center;
display: block;
}