/* ============================================================
ÉMALIA — Composants UI réutilisables
============================================================ */
/* ---------- Eyebrow / badge pilule ---------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.4rem 0.85rem;
border-radius: var(--r-pill);
background: var(--primary-soft);
color: var(--primary-deep);
font-size: var(--fs-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
}
.eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--primary);
}
.eyebrow--coral { background: var(--accent-soft); color: var(--coral-600); }
.eyebrow--coral::before { background: var(--accent); }
.eyebrow--invert { background: rgba(255,255,255,0.10); color: #EAF4F0; }
.badge {
display: inline-flex; align-items: center; gap: 0.4em;
padding: 0.3rem 0.7rem;
border-radius: var(--r-pill);
font-size: var(--fs-xs); font-weight: 600;
background: var(--surface-sand); color: var(--text-soft);
border: 1px solid var(--border-soft);
}
.badge--accent { background: var(--accent-soft); color: var(--coral-600); border-color: transparent; }
.badge--primary { background: var(--primary-soft); color: var(--primary-deep); border-color: transparent; }
/* ---------- Boutons ---------- */
.btn {
--_bg: var(--primary);
--_fg: #fff;
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.9rem 1.35rem 0.9rem 1.5rem;
border-radius: var(--r-pill);
background: var(--_bg);
color: var(--_fg);
font-weight: 600;
font-size: var(--fs-sm);
letter-spacing: 0.01em;
line-height: 1;
white-space: nowrap;
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform var(--dur-fast) var(--ease-soft),
box-shadow var(--dur-base) var(--ease-soft),
background var(--dur-base) var(--ease-soft);
box-shadow: var(--shadow-teal);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 30px 60px -22px rgba(31,92,83,0.55); }
.btn:active { transform: translateY(0) scale(0.985); }
/* ---- CTA verts pleins : dégradé subtil + reflet glossy + balayage de lumière ---- */
.btn--cta, .btn:not(.btn--ghost):not(.btn--soft):not(.btn--light) {
background: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-600) 50%, var(--teal-700) 100%);
}
.btn:not(.btn--ghost):not(.btn--soft):not(.btn--light)::before,
.btn:not(.btn--ghost):not(.btn--soft):not(.btn--light)::after {
content: ""; position: absolute; inset: 0; z-index: -1;
border-radius: inherit; pointer-events: none;
}
/* reflet glossy statique en haut (effet verre) */
.btn:not(.btn--ghost):not(.btn--soft):not(.btn--light)::before {
background: linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.10) 46%, transparent 66%);
}
/* fine bande de lumière, hors-champ au repos */
.btn:not(.btn--ghost):not(.btn--soft):not(.btn--light)::after {
background: linear-gradient(115deg, transparent 24%, rgba(255,255,255,0.30) 42%, rgba(255,255,255,0.70) 50%, rgba(255,255,255,0.30) 58%, transparent 76%);
transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
.btn:not(.btn--ghost):not(.btn--soft):not(.btn--light)::after {
transition: transform 0.85s var(--ease-soft);
}
.btn:not(.btn--ghost):not(.btn--soft):not(.btn--light):hover::after {
transform: translateX(120%);
}
}
/* icône nichée dans son propre cercle (button-in-button) */
.btn__ico {
display: grid; place-items: center;
width: 1.85rem; height: 1.85rem;
border-radius: 50%;
background: rgba(255,255,255,0.16);
transition: transform var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
}
.btn:hover .btn__ico { transform: translate(3px, -2px) scale(1.06); background: rgba(255,255,255,0.26); }
.btn__ico svg { width: 0.95rem; height: 0.95rem; stroke: currentColor; }
.btn--ghost {
--_bg: transparent; --_fg: var(--text);
box-shadow: none;
border: 1px solid var(--border);
background: var(--surface);
}
.btn--ghost:hover { box-shadow: var(--shadow-md); background: var(--surface); }
.btn--ghost .btn__ico { background: var(--primary-soft); color: var(--primary-deep); }
.btn--ghost:hover .btn__ico { background: var(--primary-soft); }
.btn--soft {
--_bg: var(--primary-soft); --_fg: var(--primary-deep);
box-shadow: none;
}
.btn--soft:hover { box-shadow: var(--shadow-sm); }
.btn--soft .btn__ico { background: rgba(39,117,104,0.14); color: var(--primary-deep); }
.btn--light {
--_bg: #fff; --_fg: var(--teal-800);
box-shadow: var(--shadow-md);
}
.btn--light .btn__ico { background: var(--primary-soft); color: var(--primary-deep); }
.btn--lg { padding: 1.05rem 1.5rem 1.05rem 1.75rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; justify-content: center; }
.link-arrow {
display: inline-flex; align-items: center; gap: 0.5rem;
font-weight: 600; color: var(--primary-deep); font-size: var(--fs-sm);
}
.link-arrow svg { width: 1rem; height: 1rem; stroke: currentColor; transition: transform var(--dur-base) var(--ease-soft); }
.link-arrow:hover svg { transform: translateX(4px); }
/* ---------- Double-Bezel : coque + cœur ---------- */
.bezel {
background: var(--shell);
border: 1px solid var(--shell-line);
border-radius: var(--r-2xl);
padding: 0.5rem;
}
.bezel__core {
background: var(--surface);
border-radius: calc(var(--r-2xl) - 0.5rem);
box-shadow: var(--inset-hi);
overflow: hidden;
}
/* Interactive 3D tooth (model-viewer) — gradient backdrop matches the editorial render */
.bezel__core--3d {
background: radial-gradient(125% 125% at 22% 85%,
var(--sand) 0%, var(--cream) 38%, var(--teal-300) 118%);
/* model-viewer is a custom element with no intrinsic width, unlike the ![]()
this layout was built around. Without a definite width the surrounding grid
track and this core collapse toward 0 (the tooth then can't render or receive
pointer drags). Sizing the core off the viewport gives a definite width that
aspect-ratio turns into a height, independent of model-viewer's 0 intrinsic
size. clamp() keeps it responsive; the parent's max-width still caps it. */
width: 100%;
min-width: 220px;
}
/* Three.js mounts its