/* =====================================================================
   Yovo — habillage premium des pages publiques
   Même design que la page d'accueil. Chargé APRÈS le <style> de chaque
   page : il ne change pas le contenu, seulement l'apparence.
   Portée : <body class="yp ..."> uniquement.
   ===================================================================== */

/* ---------- Tokens (palette premium : encre + papier + bleu Yovo) ---------- */
:root {
    --black: #0b0b0f;
    --dark-grey: #15151b;
    --grey: #efece6;
    --light-grey: #f6f4ef;
    --ds-blue: #1d4ed8;
    --ds-blue-soft: #e8eeff;
    --ds-blue-deep: #0f2d99;

    --yp-ink: #0b0b0f;
    --yp-ink-2: #15151b;
    --yp-paper: #f6f4ef;
    --yp-line: rgba(11, 11, 15, 0.10);
    --yp-line-dark: rgba(255, 255, 255, 0.12);
    --yp-muted: #5d5d66;
    --yp-muted-dark: rgba(255, 255, 255, 0.66);
    --yp-blue-light: #9db7ff;
    --yp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --yp-gutter: clamp(20px, 5vw, 56px);
}

body.yp {
    background: var(--yp-paper);
    color: var(--yp-ink);
    -webkit-font-smoothing: antialiased;
    font-family: 'Montserrat', sans-serif;
}

/* ---------- Header ---------- */
body.yp .yp-header, body.yp .yp-header *, body.yp .yp-footer, body.yp .yp-footer * { box-sizing: border-box; }
body.yp .yp-header {
    position: fixed; top: 0; left: 0; right: 0; width: 100%; height: auto; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px var(--yp-gutter); margin: 0;
    background: transparent; border: 0; border-bottom: 1px solid transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: background .4s var(--yp-ease), padding .4s var(--yp-ease), border-color .4s var(--yp-ease);
}
body.yp .yp-header .yp-logo { display: block; line-height: 0; }
body.yp .yp-header .yp-logo img { height: 44px; width: auto; display: block; transform: none; transition: height .4s var(--yp-ease); }
body.yp .yp-header .yp-logo img:hover { transform: none; }
body.yp .yp-header .yp-logo .yp-logo-dark { display: none; }
body.yp .yp-header .yp-logo .yp-logo-light { display: block; }
body.yp .yp-header .yp-nav { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; background: none; border: 0; }
body.yp .yp-header .yp-nav a {
    display: inline-flex; align-items: center; margin: 0; text-decoration: none;
    color: #fff; font-weight: 600; font-size: 0.82rem; letter-spacing: 0; text-transform: none;
    padding: 10px 14px; border-radius: 999px; background: transparent; border: 0; box-shadow: none;
    transition: color .3s, background .3s, border-color .3s;
}
body.yp .yp-header .yp-nav a:hover { background: rgba(255,255,255,0.1); color: #fff; }
body.yp .yp-header .yp-nav a.is-active { color: #fff; background: rgba(255,255,255,0.12); }
body.yp .yp-header .yp-nav a.yp-nav-btn {
    margin-left: 8px; background: #fff; color: var(--yp-ink); font-weight: 700;
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 20px;
    border: 1px solid #fff;
}
body.yp .yp-header .yp-nav a.yp-nav-btn:hover { background: var(--ds-blue); border-color: var(--ds-blue); color: #fff; }
body.yp .yp-header .yp-nav a.yp-nav-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
body.yp .yp-header .yp-nav a.yp-nav-btn--ghost:hover { background: #fff; color: var(--yp-ink); border-color: #fff; }
body.yp .yp-header .yp-nav a.yp-mobile-only { display: none; }

/* Header clair : au scroll, ou d'emblée sur les pages sans hero sombre */
body.yp .yp-header.is-scrolled,
body.yp .yp-header.yp-header--solid {
    background: rgba(246, 244, 239, 0.9);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--yp-line);
    padding-top: 12px; padding-bottom: 12px;
}
body.yp .yp-header.is-scrolled .yp-logo .yp-logo-dark,
body.yp .yp-header.yp-header--solid .yp-logo .yp-logo-dark { display: block; }
body.yp .yp-header.is-scrolled .yp-logo .yp-logo-light,
body.yp .yp-header.yp-header--solid .yp-logo .yp-logo-light { display: none; }
body.yp .yp-header.is-scrolled .yp-logo img,
body.yp .yp-header.yp-header--solid .yp-logo img { height: 40px; }
body.yp .yp-header.is-scrolled .yp-nav a,
body.yp .yp-header.yp-header--solid .yp-nav a { color: var(--yp-ink); }
body.yp .yp-header.is-scrolled .yp-nav a:hover,
body.yp .yp-header.yp-header--solid .yp-nav a:hover { background: rgba(11,11,15,0.06); color: var(--yp-ink); }
body.yp .yp-header.is-scrolled .yp-nav a.is-active,
body.yp .yp-header.yp-header--solid .yp-nav a.is-active { background: rgba(11,11,15,0.07); color: var(--yp-ink); }
body.yp .yp-header.is-scrolled .yp-nav a.yp-nav-btn,
body.yp .yp-header.yp-header--solid .yp-nav a.yp-nav-btn { background: var(--yp-ink); color: #fff; border-color: var(--yp-ink); }
body.yp .yp-header.is-scrolled .yp-nav a.yp-nav-btn:hover,
body.yp .yp-header.yp-header--solid .yp-nav a.yp-nav-btn:hover { background: var(--ds-blue); border-color: var(--ds-blue); }
body.yp .yp-header.is-scrolled .yp-nav a.yp-nav-btn--ghost,
body.yp .yp-header.yp-header--solid .yp-nav a.yp-nav-btn--ghost { background: transparent; color: var(--yp-ink); border-color: var(--yp-line); }
body.yp .yp-header.is-scrolled .yp-nav a.yp-nav-btn--ghost:hover,
body.yp .yp-header.yp-header--solid .yp-nav a.yp-nav-btn--ghost:hover { background: var(--yp-ink); color: #fff; border-color: var(--yp-ink); }

@media (max-width: 1080px) {
    body.yp .yp-header .yp-nav a.yp-nav-link { display: none; }
}
@media (max-width: 600px) {
    body.yp .yp-header { padding: 12px 18px; }
    body.yp .yp-header .yp-logo img,
    body.yp .yp-header.is-scrolled .yp-logo img,
    body.yp .yp-header.yp-header--solid .yp-logo img { height: 36px; }
    body.yp .yp-header .yp-nav a.yp-desktop-only { display: none; }
    body.yp .yp-header .yp-nav a.yp-mobile-only { display: inline-flex; padding: 11px 16px; margin-left: 0; }
}

/* Pages à header clair : espace sous le header fixe */
body.yp.yp-solid { padding-top: 76px; }

/* ---------- Footer ---------- */
body.yp footer.yp-footer {
    display: block; position: static; width: 100%; margin: 0;
    background: #060608; color: #888; text-align: left;
    padding: 80px var(--yp-gutter) 30px; border: 0; box-shadow: none; font-size: 1rem;
}
body.yp .yp-footer-inner { max-width: 1240px; margin: 0 auto; }
body.yp .yp-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 56px; }
body.yp .yp-footer-brand img { height: 40px; width: auto; display: block; margin: 0 0 20px; }
body.yp .yp-footer-tagline { color: rgba(255,255,255,0.55); font-size: .92rem; line-height: 1.65; max-width: 300px; margin: 0; font-weight: 400; }
body.yp .yp-footer-tagline strong { color: rgba(255,255,255,0.8); }
body.yp .yp-footer-phone { margin-top: 10px; }
body.yp .yp-footer-phone a { color: inherit; text-decoration: none; }
body.yp .yp-footer-col h5 { color: #fff; margin: 0 0 18px; text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; font-weight: 700; }
body.yp .yp-footer-col ul { list-style: none; margin: 0; padding: 0; }
body.yp .yp-footer-col li { margin: 0 0 10px; padding: 0; }
body.yp .yp-footer a,
body.yp .yp-footer-col button {
    text-decoration: none; color: rgba(255,255,255,0.55); font-size: .9rem; font-weight: 400;
    background: none; border: none; cursor: pointer; padding: 0; margin: 0; opacity: 1;
    transition: color .3s; text-transform: none; letter-spacing: 0; line-height: 1.5;
}
body.yp .yp-footer a:hover,
body.yp .yp-footer-col button:hover { color: #fff; }
body.yp .yp-copyright { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
body.yp .yp-copyright span { font-size: .82rem; color: rgba(255,255,255,0.4); }
body.yp .yp-socials { display: flex; gap: 10px; }
body.yp .yp-socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); display: grid; place-items: center; color: rgba(255,255,255,0.65); }
body.yp .yp-socials a:hover { background: #fff; color: var(--yp-ink); border-color: #fff; }
@media (max-width: 960px) {
    body.yp .yp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
    body.yp .yp-footer-grid { gap: 26px 16px; }
    body.yp .yp-footer-brand { grid-column: 1 / -1; }
    body.yp .yp-footer-col li a, body.yp .yp-footer-col li button { display: inline-block; padding: 6px 0; }
    body.yp .yp-copyright { flex-direction: column; text-align: center; }
}

/* ---------- Typographie ---------- */
body.yp h1, body.yp h2 { letter-spacing: -0.035em; }
body.yp h3 { letter-spacing: -0.02em; }
body.yp .section-title { font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; }
body.yp .section-subtitle {
    display: inline-flex; align-items: center; gap: 10px; background: none; padding: 0;
    font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ds-blue);
}
body.yp .section-subtitle::before { content: ""; width: 28px; height: 1px; background: currentColor; flex-shrink: 0; }
body.yp .section-lead, body.yp p.lead { font-weight: 500; }
body.yp .dot { color: var(--ds-blue); }

/* Eyebrow des heroes (style accueil) */
body.yp .hero-eyebrow {
    background: transparent; box-shadow: none; padding: 0; border: 0; border-radius: 0;
    font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- Boutons ---------- */
body.yp .btn-primary, body.yp .btn-ghost, body.yp .btn-white, body.yp .btn-light,
body.yp .btn-outline-white, body.yp .btn-cta, body.yp .btn-plan {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; padding: 0 30px; border-radius: 999px;
    font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    transition: background .35s var(--yp-ease), color .35s var(--yp-ease), border-color .35s var(--yp-ease), transform .35s var(--yp-ease), box-shadow .35s var(--yp-ease);
}
body.yp .btn-primary { background: var(--ds-blue); border: 1.5px solid var(--ds-blue); color: #fff; box-shadow: 0 14px 34px rgba(29,78,216,0.3); }
body.yp .btn-primary:hover { background: var(--ds-blue-deep); border-color: var(--ds-blue-deep); color: #fff; transform: translateY(-2px); }
body.yp .btn-ghost { background: transparent; border: 1.5px solid var(--yp-ink); color: var(--yp-ink); }
body.yp .btn-ghost:hover { background: var(--yp-ink); color: #fff; }
body.yp .btn-white, body.yp .btn-light { background: #fff; border: 1.5px solid #fff; color: var(--yp-ink); }
body.yp .btn-white:hover, body.yp .btn-light:hover { background: var(--ds-blue); border-color: var(--ds-blue); color: #fff; transform: translateY(-2px); }
body.yp .btn-outline-white { background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.35); color: #fff; }
body.yp .btn-outline-white:hover { background: #fff; border-color: #fff; color: var(--yp-ink); }
body.yp .btn-submit, body.yp .btn-wizard {
    border-radius: 999px; font-weight: 700; letter-spacing: .06em;
    transition: background .35s var(--yp-ease), color .35s var(--yp-ease), transform .35s var(--yp-ease);
}

/* Boutons secondaires sur fonds sombres (heroes, bandeaux CTA) */
body.yp-overlay .hero .btn-ghost, body.yp .hero-subpage .btn-ghost, body.yp .hero-content .btn-ghost,
body.yp .cta-band .btn-ghost, body.yp .cta-panel .btn-ghost, body.yp .cta-dark .btn-ghost {
    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.35); color: #fff;
}
body.yp-overlay .hero .btn-ghost:hover, body.yp .hero-subpage .btn-ghost:hover, body.yp .hero-content .btn-ghost:hover,
body.yp .cta-band .btn-ghost:hover, body.yp .cta-panel .btn-ghost:hover, body.yp .cta-dark .btn-ghost:hover {
    background: #fff; border-color: #fff; color: var(--yp-ink);
}

/* Bouton flottant (style accueil) */
body.yp .floating-cta {
    background: var(--yp-ink); color: #fff; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px; font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
    box-shadow: 0 16px 40px rgba(11,11,15,0.35);
}
body.yp .floating-cta:hover { background: var(--ds-blue); }

/* ---------- Cartes : bords fins, rayon généreux ---------- */
body.yp .bento-card, body.yp .price-card, body.yp .step-card, body.yp .use-case-card,
body.yp .shared-features-box, body.yp .cta-contact-box, body.yp .form-wrapper, body.yp .card {
    border-radius: 22px;
}
body.yp .bento-card:not(.bento-feature), body.yp .step-card, body.yp .use-case-card {
    background: #fff; border: 1px solid var(--yp-line);
}

/* FAQ (accordéons) */
body.yp .faq-item { background: #fff; border: 1px solid var(--yp-line); border-radius: 18px; box-shadow: none; }
body.yp .faq-item.active { border-color: var(--yp-ink); box-shadow: 0 14px 34px rgba(11,11,15,0.06); }
body.yp .faq-icon { background: transparent; border: 1px solid var(--yp-line); color: var(--yp-ink); }
body.yp .faq-item.active .faq-icon { background: var(--yp-ink); border-color: var(--yp-ink); color: #fff; }
body.yp .faq-answer-inner { color: var(--yp-muted); }

/* ---------- Heroes sombres (même ambiance que l'accueil) ---------- */
body.yp .yp-dark-hero {
    background:
        radial-gradient(60% 70% at 85% 10%, rgba(29,78,216,0.38) 0%, rgba(29,78,216,0) 60%),
        radial-gradient(50% 60% at 0% 100%, rgba(29,78,216,0.16) 0%, rgba(29,78,216,0) 60%),
        var(--yp-ink);
    color: #fff;
}

/* FAQ + Qui sommes-nous : hero clair -> sombre */
body.yp-faq .hero,
body.yp-qsn .hero-subpage {
    background:
        radial-gradient(60% 80% at 85% 0%, rgba(29,78,216,0.38) 0%, rgba(29,78,216,0) 60%),
        radial-gradient(50% 60% at 0% 100%, rgba(29,78,216,0.16) 0%, rgba(29,78,216,0) 60%),
        var(--yp-ink);
    color: #fff;
    padding-top: 170px; padding-bottom: 90px;
}
body.yp-faq .hero::before, body.yp-qsn .hero-subpage::before { display: none; }
body.yp-faq .hero h1, body.yp-qsn .hero-subpage h1 { color: #fff; font-weight: 800; letter-spacing: -0.04em; }
body.yp-faq .hero h1 .highlight, body.yp-qsn .hero-subpage h1 .highlight {
    background: linear-gradient(95deg, #fff 0%, #9db7ff 55%, #5b8bff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0;
}
body.yp-faq .hero p.lead, body.yp-qsn .hero-subpage p.lead { color: var(--yp-muted-dark); }
body.yp-faq .hero-eyebrow, body.yp-qsn .hero-eyebrow { color: rgba(255,255,255,0.8); }
body.yp-faq .hero-eyebrow .pulse, body.yp-qsn .hero-eyebrow .pulse { background: #5b8bff; }
body.yp-faq .faq-section, body.yp-qsn .section { position: relative; }
body.yp-faq .faq-category { border-bottom-color: var(--yp-line); letter-spacing: .22em; font-weight: 700; }
body.yp-faq .faq-contact { background: var(--yp-ink); color: #fff; border-radius: 24px; }
body.yp-faq .faq-contact p { color: var(--yp-muted-dark); }
body.yp-faq .faq-contact a { background: #fff; color: var(--yp-ink); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; padding: 15px 26px; }
body.yp-faq .faq-contact a:hover { background: var(--ds-blue); color: #fff; }
body.yp-qsn .bento-feature { background: var(--yp-ink); }
body.yp-qsn .bento-feature::after { background: radial-gradient(closest-side, rgba(29,78,216,0.55), transparent); }
@media (max-width: 600px) {
    body.yp-faq .hero, body.yp-qsn .hero-subpage { padding-top: 120px; padding-bottom: 56px; }
}

/* Contact + Découvrir : bloc hero en carte -> fond sombre plein */
body.yp-contact .hero-wrapper,
body.yp-decouvrir .hero-wrapper {
    background:
        radial-gradient(60% 80% at 90% 0%, rgba(29,78,216,0.35) 0%, rgba(29,78,216,0) 60%),
        var(--yp-ink);
    padding-top: 130px;
}
body.yp-contact .hero-container,
body.yp-decouvrir .hero-container {
    background: var(--yp-ink-2); border: 1px solid var(--yp-line-dark); color: #fff; border-radius: 32px;
}
body.yp-contact .hero-container::after,
body.yp-decouvrir .hero-container::after { background: radial-gradient(closest-side, rgba(29,78,216,0.45), transparent); filter: blur(30px); }
body.yp-contact .hero-content h1,
body.yp-decouvrir .hero-content h1 { color: #fff; font-weight: 800; letter-spacing: -0.04em; }
body.yp-contact .hero-content h1 .highlight,
body.yp-decouvrir .hero-content h1 .highlight { color: var(--yp-blue-light); }
body.yp-contact .hero-content p.lead,
body.yp-decouvrir .hero-content p.lead { color: var(--yp-muted-dark); }
body.yp-contact .hero-eyebrow,
body.yp-decouvrir .hero-eyebrow { color: rgba(255,255,255,0.8); }
body.yp-contact .hero-eyebrow .pulse,
body.yp-decouvrir .hero-eyebrow .pulse { background: #5b8bff; }
body.yp-contact .contact-info-item { color: #fff; }
body.yp-contact .contact-info-item a { color: #fff; }
body.yp-contact .contact-info-item .ci-icon { background: rgba(255,255,255,0.08); border: 1px solid var(--yp-line-dark); color: var(--yp-blue-light); box-shadow: none; }
body.yp-contact .form-wrapper, body.yp-decouvrir .hero-trust-box { color: var(--yp-ink); }
body.yp-decouvrir .hero-content .btn-ghost { border-color: rgba(255,255,255,0.35); color: #fff; }
body.yp-decouvrir .hero-content .btn-ghost:hover { background: #fff; color: var(--yp-ink); }
body.yp-decouvrir .cta-dark { background: var(--yp-ink); }
@media (max-width: 600px) {
    body.yp-contact .hero-wrapper, body.yp-decouvrir .hero-wrapper { padding-top: 96px; }
}

/* Entreprises : hero bleu -> encre + halo bleu (comme l'accueil) */
body.yp-entreprises .hero {
    background:
        radial-gradient(60% 80% at 85% 0%, rgba(29,78,216,0.45) 0%, rgba(29,78,216,0) 60%),
        radial-gradient(50% 60% at 0% 100%, rgba(29,78,216,0.18) 0%, rgba(29,78,216,0) 60%),
        var(--yp-ink);
}
body.yp-entreprises .hero::before, body.yp-entreprises .hero::after { opacity: .5; }
body.yp-entreprises .hero h1 { font-weight: 800; letter-spacing: -0.04em; }
body.yp-entreprises .hero-panel { background: rgba(255,255,255,0.05); border: 1px solid var(--yp-line-dark); backdrop-filter: blur(10px); }
body.yp-entreprises .pricing-section { background: var(--yp-paper); }
body.yp-entreprises .price-card { border: 1px solid var(--yp-line); box-shadow: none; }
body.yp-entreprises .price-card.featured { border-color: var(--yp-ink); box-shadow: 0 24px 60px rgba(11,11,15,0.12); }
body.yp-entreprises .cta-panel { background: var(--yp-ink); border-radius: 28px; }

/* Pages villes (Nantes, Angers) : hero bleu -> encre + halo bleu */
body.yp-city .hero {
    background:
        radial-gradient(60% 80% at 85% 0%, rgba(29,78,216,0.45) 0%, rgba(29,78,216,0) 60%),
        radial-gradient(50% 60% at 0% 100%, rgba(29,78,216,0.18) 0%, rgba(29,78,216,0) 60%),
        var(--yp-ink);
    padding-top: 170px; padding-bottom: 90px;
}
body.yp-city .hero h1 { font-weight: 800; letter-spacing: -0.04em; }
body.yp-city .hero-eyebrow { color: rgba(255,255,255,0.8); }
body.yp-city .cta-band { background: var(--yp-ink); border-radius: 28px; }
body.yp-city .card, body.yp-city .faq-item { background: #fff; border: 1px solid var(--yp-line); box-shadow: none; }
body.yp-city .zone-pill { background: #fff; border: 1px solid var(--yp-line); color: var(--yp-ink); }
@media (max-width: 600px) {
    body.yp-city .hero { padding-top: 120px; padding-bottom: 56px; }
}

/* Devenir chauffeur : hero vidéo déjà sombre, on harmonise */
body.yp-devenir .hero h1 { font-weight: 800; letter-spacing: -0.04em; }
body.yp-devenir .hero-overlay {
    background:
        radial-gradient(60% 70% at 85% 10%, rgba(29,78,216,0.35) 0%, rgba(29,78,216,0) 60%),
        linear-gradient(180deg, rgba(11,11,15,0.55) 0%, rgba(11,11,15,0.85) 100%);
}
body.yp-devenir .card { background: #fff; border: 1px solid var(--yp-line); box-shadow: none; }

/* ---------- Pages légales ---------- */
body.yp.yovo-legal-page { background: var(--yp-paper); color: var(--yp-ink); }
body.yp.yovo-legal-page main { padding-top: 56px; max-width: 920px; }
body.yp.yovo-legal-page h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
body.yp.yovo-legal-page .lead { color: var(--yp-muted); }
body.yp.yovo-legal-page section,
body.yp.yovo-legal-page .section-container { border-radius: 20px; border: 1px solid var(--yp-line); box-shadow: none; background: #fff; }
body.yp.yovo-legal-page .internal-nav { background: #fff; border: 1px solid var(--yp-line); border-left: 1px solid var(--yp-line); border-radius: 20px; }
body.yp.yovo-legal-page .internal-nav a { border-radius: 999px; border-color: var(--yp-line); color: var(--yp-ink); }
body.yp.yovo-legal-page .internal-nav a:hover { background: var(--yp-ink); border-color: var(--yp-ink); color: #fff; }

/* ---------- Articles ---------- */
body.yp-articles .wrap { padding-top: 64px; }
body.yp-articles h1 { font-weight: 800; letter-spacing: -0.04em; }
body.yp-articles .card { border-bottom-color: var(--yp-line); border-radius: 0; }
body.yp-articles .empty { background: #fff; border: 1px solid var(--yp-line); border-radius: 20px; }

/* ---------- 404 ---------- */
body.yp-404 { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; min-height: 100vh; }
body.yp-404 .box { margin: 150px auto 90px; width: calc(100% - 40px); border: 1px solid var(--yp-line); box-shadow: none; }
body.yp-404 .code { font-weight: 800; letter-spacing: -0.05em; }
body.yp-404 a.btn { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; padding: 17px 28px; }

@media (prefers-reduced-motion: reduce) {
    body.yp .yp-header, body.yp .yp-header .yp-logo img { transition: none; }
}