/* =============================================================
   DÉPANN'DIRECT — Design System (thème sur mesure)
   Sprint 0 : tokens, reset, layout, composants de base
   ============================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
    /* Couleurs de marque */
    --dd-nuit:   #12233A;
    --dd-nuit-90:#1a2f4a;
    --dd-corail: #FF5A3C;
    --dd-menthe: #3FD8A4;
    --dd-creme:  #F7F4EF;
    --dd-encre:  #0D0D0D;
    --dd-gris:   #5a6b7d;

    /* États dérivés */
    --dd-menthe-soft: rgba(63, 216, 164, 0.18);
    --dd-menthe-text: #14805a;
    --dd-corail-soft: rgba(255, 90, 60, 0.10);
    --dd-corail-text: #c0392b;

    /* Bordures / fonds */
    --dd-border: #ece7dd;
    --dd-border-strong: #dcdad2;

    /* Rayons */
    --dd-radius-sm: 11px;
    --dd-radius: 16px;
    --dd-radius-lg: 22px;

    /* Ombres */
    --dd-shadow: 0 8px 30px rgba(18, 35, 58, 0.10);
    --dd-shadow-lg: 0 14px 40px rgba(18, 35, 58, 0.14);

    /* Typographie */
    --dd-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --dd-font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Espacements de section */
    --dd-section-y: 60px;
    --dd-gutter: 20px;
    --dd-maxw: 1080px;
}

/* ---------- 2. RESET LÉGER ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--dd-font-body);
    color: var(--dd-encre);
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
svg { display: inline-block; vertical-align: middle; }
a { color: var(--dd-nuit); text-decoration: none; }
a:hover { color: var(--dd-corail); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
    font-family: var(--dd-font-display);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.12;
    color: var(--dd-nuit);
}
ul { padding-left: 1.2em; }

/* Accessibilité */
.dd-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--dd-nuit); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.dd-skip-link:focus { left: 0; color: #fff; }
:focus-visible { outline: 3px solid var(--dd-corail); outline-offset: 2px; }

/* ---------- 3. LAYOUT ---------- */
.dd-container { max-width: var(--dd-maxw); margin: 0 auto; padding-inline: var(--dd-gutter); }
.dd-section { padding-block: var(--dd-section-y); }
.dd-section--creme { background: var(--dd-creme); }
.dd-section--nuit { background: var(--dd-nuit); color: #fff; }
.dd-display { font-family: var(--dd-font-display); font-weight: 800; letter-spacing: -0.5px; }

.dd-section-head { text-align: center; margin-bottom: 42px; }
.dd-eyebrow {
    font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--dd-corail); font-weight: 600; margin-bottom: 10px;
}
.dd-section-title { font-size: 1.9rem; margin-bottom: 8px; }
.dd-section-sub { color: var(--dd-gris); max-width: 540px; margin: 0 auto; }
.dd-section--nuit .dd-section-title { color: #fff; }
.dd-section--nuit .dd-section-sub { color: #9fb0c0; }

/* ---------- 4. HEADER / NAV ---------- */
.dd-site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(18, 35, 58, 0.98);
    backdrop-filter: blur(8px);
    color: #fff;
}
.dd-nav {
    max-width: var(--dd-maxw); margin: 0 auto;
    padding: 12px var(--dd-gutter);
    display: flex; align-items: center; justify-content: space-between;
}
.dd-nav__brand { display: flex; align-items: center; }
.dd-nav__brand .dd-logo { height: 46px; width: auto; }
.dd-nav__links { display: flex; align-items: center; gap: 24px; }
.dd-nav__menu { display: flex; align-items: center; gap: 24px; list-style: none; padding: 0; margin: 0; }
.dd-nav__links a, .dd-nav__menu a { color: #cdd8e2; font-size: 0.92rem; font-weight: 500; }
.dd-nav__links a:hover, .dd-nav__menu a:hover { color: #fff; }
.dd-nav__cta {
    background: var(--dd-corail); color: #fff !important;
    padding: 9px 18px; border-radius: 10px; font-weight: 700 !important;
}
.dd-nav__cta:hover { filter: brightness(1.06); }
@media (max-width: 760px) {
    /* Sur mobile, on ne garde que le CTA « Je suis artisan » dans le header.
       Les liens de menu (menu WordPress ou liens de repli) sont masqués ;
       la navigation complète passe par le footer et les sections. */
    .dd-nav__menu,
    .dd-nav__links > a:not(.dd-nav__cta) { display: none; }
    .dd-nav__cta { padding: 9px 16px; font-size: 0.88rem; }
    .dd-nav__brand .dd-logo { height: 40px; }
}

/* ---------- 5. BOUTONS ---------- */
.dd-btn {
    display: inline-block; background: var(--dd-corail); color: #fff !important;
    font-family: var(--dd-font-body); font-weight: 700; font-size: 1rem;
    padding: 15px 30px; border: none; border-radius: 12px; text-decoration: none;
    transition: filter .15s, transform .1s;
}
.dd-btn:hover { filter: brightness(1.06); }
.dd-btn:active { transform: translateY(1px); }
.dd-btn--ghost {
    background: transparent; color: var(--dd-nuit) !important;
    border: 2px solid var(--dd-nuit);
}
.dd-btn--ghost:hover { background: var(--dd-nuit); color: #fff !important; filter: none; }
.dd-btn--block { display: block; width: 100%; text-align: center; }

/* ---------- 6. HERO ---------- */
.dd-hero {
    background: var(--dd-nuit); color: #fff;
    padding: 52px 0 66px; position: relative; overflow: hidden;
}
.dd-hero::after {
    content: ''; position: absolute; right: -100px; top: -80px;
    width: 440px; height: 440px;
    background: radial-gradient(circle, rgba(63,216,164,.12) 0%, transparent 70%);
}
.dd-hero::before {
    content: ''; position: absolute; left: -120px; bottom: -140px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(255,90,60,.10) 0%, transparent 70%);
}
.dd-hero__grid {
    max-width: var(--dd-maxw); margin: 0 auto; padding-inline: var(--dd-gutter);
    display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
    position: relative; z-index: 2;
}
.dd-hero h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); color: #fff; }
.dd-hero__accent { color: var(--dd-corail); }
.dd-hero__sub { color: #9fb0c0; font-size: 1.12rem; margin-top: 18px; max-width: 440px; }
@media (max-width: 860px) {
    .dd-hero__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Barre de confiance */
.dd-trust { display: flex; gap: 20px; margin-top: 24px; flex-wrap: wrap; }
.dd-trust__item { display: flex; align-items: center; gap: 8px; color: #cdd8e2; font-size: 0.9rem; }
.dd-trust__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dd-menthe); flex-shrink: 0; }

/* ---------- 7. CARTE FORMULAIRE (hero) ---------- */
.dd-form-card {
    background: var(--dd-creme); border-radius: var(--dd-radius-lg);
    padding: 26px; color: var(--dd-encre); box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* ---------- 8. ÉTAPES « COMMENT ÇA MARCHE » ---------- */
.dd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dd-step { text-align: center; padding: 10px; }
.dd-step__num {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--dd-nuit); color: #fff;
    font-family: var(--dd-font-display); font-weight: 800; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; position: relative;
}
.dd-step__num::after {
    content: ''; position: absolute; inset: -6px;
    border: 2px dashed rgba(18,35,58,.15); border-radius: 50%;
}
.dd-section--nuit .dd-step__num { background: #fff; color: var(--dd-nuit); }
.dd-section--nuit .dd-step__num::after { border-color: rgba(255,255,255,.2); }
.dd-step h3 { font-size: 1.12rem; margin-bottom: 8px; }
.dd-step p { color: var(--dd-gris); font-size: 0.94rem; }
.dd-section--nuit .dd-step h3 { color: #fff; }
.dd-section--nuit .dd-step p { color: #9fb0c0; }
@media (max-width: 760px) { .dd-steps { grid-template-columns: 1fr; } }

/* ---------- 9. GRILLE MÉTIERS ---------- */
.dd-metier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dd-metier {
    background: #fff; border: 1px solid var(--dd-border); border-radius: var(--dd-radius);
    padding: 24px 18px; text-align: center; box-shadow: var(--dd-shadow);
    transition: transform .18s; display: block; color: inherit;
}
.dd-metier:hover { transform: translateY(-4px); color: inherit; }
.dd-metier__ic {
    width: 52px; height: 52px; margin: 0 auto 12px;
    background: rgba(18,35,58,.06); border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
}
.dd-metier__ic .dd-ico { stroke: var(--dd-nuit); }
.dd-metier h3 { font-size: 1rem; }
.dd-metier p { font-size: 0.82rem; color: var(--dd-gris); margin-top: 2px; }
@media (max-width: 760px) { .dd-metier-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- 10. GARANTIES (why) ---------- */
.dd-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 820px; margin: 0 auto; }
.dd-why-item { display: flex; gap: 14px; align-items: flex-start; }
.dd-why-check {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    background: var(--dd-menthe); color: var(--dd-nuit);
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.dd-why-item h3 { font-size: 1.05rem; margin-bottom: 3px; }
.dd-why-item p { font-size: 0.9rem; color: var(--dd-gris); }
@media (max-width: 680px) { .dd-why-grid { grid-template-columns: 1fr; } }

/* ---------- 11. AVIS ---------- */
.dd-test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dd-test {
    background: var(--dd-nuit); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--dd-radius); padding: 24px;
}
.dd-test__stars { color: var(--dd-corail); margin-bottom: 10px; letter-spacing: 2px; }
.dd-test p { font-size: 0.94rem; color: #e3e8ee; margin-bottom: 16px; }
.dd-test__who { display: flex; align-items: center; gap: 10px; }
.dd-test__av {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--dd-menthe); color: var(--dd-nuit);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
}
.dd-test__n { font-weight: 600; font-size: 0.9rem; color: #fff; }
.dd-test__c { font-size: 0.8rem; color: #9fb0c0; }
@media (max-width: 760px) { .dd-test-grid { grid-template-columns: 1fr; } }

/* ---------- 12. BLOC ARTISAN (CTA) ---------- */
.dd-artisan-box {
    background: var(--dd-creme); border-radius: var(--dd-radius-lg);
    padding: 44px; text-align: center;
}
.dd-artisan-box h2 { font-size: 1.7rem; margin-bottom: 10px; }
.dd-artisan-box p { color: var(--dd-gris); max-width: 500px; margin: 0 auto 24px; }

/* ---------- 13. FOOTER ---------- */
.dd-site-footer { background: var(--dd-nuit); color: #9fb0c0; padding: 44px 0 30px; }
.dd-footer__grid {
    max-width: var(--dd-maxw); margin: 0 auto; padding-inline: var(--dd-gutter);
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 30px;
}
.dd-footer__brand .dd-logo { height: 42px; width: auto; margin-bottom: 12px; }
.dd-footer__brand p { font-size: 0.88rem; max-width: 280px; }
.dd-footer__col h4 { color: #fff; font-size: 0.9rem; margin-bottom: 12px; font-weight: 600; }
.dd-footer__col a, .dd-footer__menu a {
    display: block; color: #9fb0c0; font-size: 0.88rem; margin-bottom: 8px;
}
.dd-footer__menu { list-style: none; padding: 0; margin: 0; }
.dd-footer__col a:hover, .dd-footer__menu a:hover { color: #fff; }
.dd-footer__bottom {
    max-width: var(--dd-maxw); margin: 0 auto; padding: 24px var(--dd-gutter) 0;
    text-align: center; font-size: 0.82rem; border-top: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 680px) { .dd-footer__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- 14. POSTS (fallback blog) ---------- */
.dd-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dd-post-card { background: #fff; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); overflow: hidden; }
.dd-post-card__thumb img { width: 100%; height: 180px; object-fit: cover; }
.dd-post-card__title { font-size: 1.15rem; padding: 16px 16px 0; }
.dd-post-card__excerpt { padding: 8px 16px 18px; color: var(--dd-gris); font-size: 0.92rem; }
@media (max-width: 760px) { .dd-posts { grid-template-columns: 1fr; } }

/* ---------- 15. ACCESSIBILITÉ MOUVEMENT ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
}

/* =============================================================
   SPRINT 1 — Accueil : carte formulaire du hero + intégration
   du formulaire multi-étapes du plugin nsw-lead-directory
   ============================================================= */
.dd-form-card__head { margin-bottom: 18px; }
.dd-form-card__title {
    font-family: var(--dd-font-display); font-weight: 800;
    font-size: 1.3rem; color: var(--dd-nuit); margin-bottom: 4px;
}
.dd-form-card__sub { color: var(--dd-gris); font-size: 0.9rem; }

/* Styles d'intégration du formulaire plugin (.nswld-*) dans la carte.
   Le plugin fournit son propre CSS ; ici on aligne sur la charte au cas
   où il n'est pas chargé, et on neutralise sa marge de carte (déjà portée
   par .dd-form-card). */
.dd-form-card .nswld-form {
    max-width: none; margin: 0; padding: 0; background: transparent; border-radius: 0;
}
.dd-form-card .nswld-choice { font-family: var(--dd-font-body); }
.dd-form-card .nswld-submit { background: var(--dd-corail); }

/* Fallback si le plugin est inactif */
.dd-form-fallback {
    background: #fff; border: 2px dashed var(--dd-border-strong);
    border-radius: var(--dd-radius-sm); padding: 20px; text-align: center;
    color: var(--dd-gris); font-size: 0.92rem;
}

/* =============================================================
   SPRINT 2 — Pages SEO ville × métier
   ============================================================= */
.dd-hero--landing { padding: 44px 0 56px; }

/* Fil d'ariane */
.dd-breadcrumb { font-size: 0.85rem; color: #9fb0c0; margin-bottom: 16px; }
.dd-breadcrumb a { color: #9fb0c0; }
.dd-breadcrumb a:hover { color: #fff; }
.dd-breadcrumb span { margin: 0 2px; }

/* Contenu SEO */
.dd-landing-content { max-width: 820px; }
.dd-landing-content h2 { font-size: 1.5rem; margin: 0 0 14px; }
.dd-landing-content h3 { font-size: 1.2rem; margin: 32px 0 14px; color: var(--dd-nuit); }
.dd-landing-content p { color: #3f4a57; margin-bottom: 14px; }
.dd-landing-list { margin: 0 0 14px; color: #3f4a57; }
.dd-landing-list li { margin-bottom: 8px; }
/* Les étapes réutilisent .dd-steps mais plus compactes dans le contenu */
.dd-landing-content .dd-steps { margin: 20px 0; gap: 18px; }

/* Liste d'artisans */
.dd-artisan-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px;
}
.dd-art-card {
    background: #fff; border: 1px solid var(--dd-border); border-radius: var(--dd-radius);
    padding: 20px; box-shadow: var(--dd-shadow);
}
.dd-art-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--dd-menthe-soft); color: var(--dd-menthe-text);
    font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px;
}
.dd-art-badge .dd-ico { stroke: var(--dd-menthe-text); }
.dd-art-card h4 { font-size: 1.1rem; color: var(--dd-nuit); margin-bottom: 4px; }
.dd-art-card__meta { font-size: 0.85rem; color: var(--dd-gris); margin-bottom: 10px; }
.dd-art-card__stars { color: var(--dd-corail); font-size: 0.85rem; margin-bottom: 14px; }
.dd-art-card__stars span { color: var(--dd-gris); }
.dd-btn--sm { padding: 10px 20px; font-size: 0.9rem; }
@media (max-width: 680px) { .dd-artisan-list { grid-template-columns: 1fr; } }

/* =============================================================
   SPRINT 3 — Espace artisan (front, mobile-first)
   ============================================================= */
.dd-app {
    max-width: 480px; margin: 0 auto; background: var(--dd-creme);
    min-height: 100vh; padding-bottom: 82px; position: relative;
}
.dd-app__top {
    position: sticky; top: 0; z-index: 20; background: var(--dd-nuit); color: #fff;
    padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
}
.dd-app__brand { display: flex; align-items: center; gap: 9px; font-family: var(--dd-font-display); font-size: 1.05rem; }
.dd-app__brand .dd-mark { width: 28px; height: 28px; }
.dd-app__avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--dd-corail); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
}
.dd-app__screen { padding: 18px 16px 0; }
.dd-app__greet { font-size: 1.35rem; margin-bottom: 2px; }
.dd-app__greet-sub { color: var(--dd-gris); font-size: 0.92rem; margin-bottom: 18px; }
.dd-app__scr-title { font-size: 1.25rem; margin-bottom: 14px; }

/* Solde hero */
.dd-balance-hero {
    background: var(--dd-nuit); color: #fff; border-radius: var(--dd-radius-lg);
    padding: 22px; margin-bottom: 16px; position: relative; overflow: hidden;
}
.dd-balance-hero::after {
    content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(63,216,164,.14) 0%, transparent 70%);
}
.dd-balance-hero__lbl { font-size: 0.85rem; color: #9fb0c0; position: relative; z-index: 2; }
.dd-balance-hero__val {
    font-family: var(--dd-font-display); font-weight: 800; font-size: 3rem; line-height: 1;
    margin: 4px 0 2px; position: relative; z-index: 2;
}
.dd-balance-hero__val.is-low { color: var(--dd-corail); }
.dd-balance-hero__val small { font-size: 1rem; color: #9fb0c0; font-family: var(--dd-font-body); font-weight: 500; }
.dd-balance-hero__btn {
    display: block; width: 100%; margin-top: 16px; background: var(--dd-corail); color: #fff !important;
    border: none; border-radius: 12px; padding: 14px; font-size: 1rem; font-weight: 700;
    text-align: center; position: relative; z-index: 2;
}

/* Mini stats */
.dd-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.dd-mini { background: #fff; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); padding: 16px; box-shadow: var(--dd-shadow); }
.dd-mini__val { font-family: var(--dd-font-display); font-weight: 800; font-size: 1.7rem; color: var(--dd-nuit); line-height: 1; }
.dd-mini__val.is-teal { color: var(--dd-menthe-text); }
.dd-mini__lbl { font-size: 0.82rem; color: var(--dd-gris); margin-top: 4px; }

.dd-app__section-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dd-app__section-h h2 { font-size: 1.05rem; }
.dd-app__section-h a { font-size: 0.85rem; color: var(--dd-corail); font-weight: 600; }

/* Carte lead */
.dd-lead { background: #fff; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); box-shadow: var(--dd-shadow); padding: 16px; margin-bottom: 12px; }
.dd-lead__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dd-lead__title { font-weight: 700; color: var(--dd-nuit); font-size: 1rem; line-height: 1.3; }
.dd-lead__meta { font-size: 0.82rem; color: var(--dd-gris); margin-top: 2px; }
.dd-badge { flex-shrink: 0; padding: 4px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.dd-badge.urgent { background: var(--dd-corail-soft); color: var(--dd-corail-text); }
.dd-badge.semaine { background: var(--dd-menthe-soft); color: var(--dd-menthe-text); }
.dd-badge.devis { background: rgba(18,35,58,.08); color: var(--dd-nuit); }
.dd-lead__desc { font-size: 0.87rem; color: #3f4a57; background: var(--dd-creme); border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }
.dd-lead__client { font-size: 0.85rem; color: var(--dd-gris); margin-bottom: 12px; }
.dd-lead__client strong { color: var(--dd-nuit); }
.dd-lead__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dd-lead__actions a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 11px; font-size: 0.9rem; font-weight: 700; }
.dd-lead__call { background: var(--dd-corail); color: #fff !important; }
.dd-lead__sms { background: #fff; color: var(--dd-nuit) !important; border: 2px solid var(--dd-nuit); }

.dd-app-empty { background: #fff; border: 1px dashed var(--dd-border-strong); border-radius: var(--dd-radius); padding: 28px 20px; text-align: center; color: var(--dd-gris); font-size: 0.92rem; }

/* Recharge */
.dd-warn-banner { background: var(--dd-corail-soft); color: var(--dd-corail-text); padding: 12px 16px; border-radius: 12px; font-size: 0.88rem; font-weight: 500; margin-bottom: 18px; }
.dd-pack { background: #fff; border: 2px solid var(--dd-border); border-radius: var(--dd-radius-lg); padding: 20px; margin-bottom: 14px; position: relative; display: flex; align-items: center; gap: 16px; }
.dd-pack.is-featured { border-color: var(--dd-corail); }
.dd-pack__tag { position: absolute; top: -10px; left: 20px; background: var(--dd-corail); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 11px; border-radius: 999px; }
.dd-pack__info { flex: 1; }
.dd-pack__info h3 { font-size: 1.1rem; color: var(--dd-nuit); margin-bottom: 3px; }
.dd-pack__credits { font-size: 0.85rem; color: var(--dd-menthe-text); font-weight: 600; }
.dd-pack__unit { font-size: 0.78rem; color: var(--dd-gris); margin-top: 2px; }
.dd-pack__buy { text-align: right; }
.dd-pack__price { font-family: var(--dd-font-display); font-weight: 800; font-size: 1.7rem; color: var(--dd-nuit); line-height: 1; }
.dd-pack__buy button { margin-top: 8px; background: var(--dd-corail); color: #fff; border: none; border-radius: 10px; padding: 9px 18px; font-family: inherit; font-weight: 700; font-size: 0.9rem; }
.dd-pack:not(.is-featured) .dd-pack__buy button { background: var(--dd-nuit); }
.dd-secure-note { text-align: center; color: var(--dd-gris); font-size: 0.82rem; margin-top: 8px; }

/* Recharge — rendu du shortcode plugin [nswld_recharge] (classes .dd-recharge*) */
.dd-recharge__balance { font-size: 0.92rem; color: var(--dd-gris); margin-bottom: 18px; }
.dd-recharge__balance strong { color: var(--dd-nuit); }
.dd-recharge__packs { display: flex; flex-direction: column; gap: 14px; }
.dd-recharge__pack {
    background: #fff; border: 2px solid var(--dd-border); border-radius: var(--dd-radius-lg);
    padding: 22px 20px; position: relative;
}
.dd-recharge__pack h3 { font-size: 1.15rem; color: var(--dd-nuit); margin-bottom: 6px; }
.dd-recharge__credits { font-size: 0.9rem; color: var(--dd-menthe-text); font-weight: 600; }
.dd-recharge__price { font-family: var(--dd-font-display); font-weight: 800; font-size: 1.9rem; color: var(--dd-nuit); line-height: 1; margin: 8px 0 2px; }
.dd-recharge__unit { font-size: 0.8rem; color: var(--dd-gris); margin-bottom: 16px; }
.dd-recharge__buy {
    width: 100%; background: var(--dd-corail); color: #fff; border: none;
    border-radius: 11px; padding: 13px; font-family: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.dd-recharge__error { color: var(--dd-corail-text); font-size: 0.88rem; margin-top: 12px; }

/* Fiche */
.dd-field { margin-bottom: 16px; }
.dd-field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--dd-nuit); margin-bottom: 6px; }
.dd-field input, .dd-field textarea { width: 100%; padding: 13px 14px; border: 2px solid var(--dd-border-strong); border-radius: 11px; font-family: inherit; font-size: 1rem; background: #fff; }
.dd-field input:focus, .dd-field textarea:focus { outline: none; border-color: var(--dd-nuit); }
.dd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dd-chip { padding: 10px 16px; border: 2px solid var(--dd-border-strong); border-radius: 999px; font-size: 0.9rem; background: #fff; font-family: inherit; }
.dd-chip.is-on { border-color: var(--dd-nuit); background: rgba(18,35,58,.05); color: var(--dd-nuit); font-weight: 600; }
.dd-save-btn { width: 100%; background: var(--dd-corail); color: #fff; border: none; border-radius: 12px; padding: 15px; font-family: inherit; font-size: 1rem; font-weight: 700; }
.dd-app__exit { display: block; text-align: center; padding: 16px; color: var(--dd-gris); font-size: 0.85rem; }

/* Bottom nav */
.dd-bottom-nav {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; background: #fff; border-top: 1px solid #e6e2d8;
    display: flex; z-index: 30; height: 66px; box-shadow: 0 -4px 20px rgba(18,35,58,.06);
}
.dd-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; color: var(--dd-gris); font-size: 0.7rem; font-weight: 600; position: relative;
}
.dd-nav-item .dd-ico { stroke: var(--dd-gris); }
.dd-nav-item.is-active { color: var(--dd-corail); }
.dd-nav-item.is-active .dd-ico { stroke: var(--dd-corail); }
.dd-nav-item__dot { position: absolute; top: 8px; right: calc(50% - 16px); width: 8px; height: 8px; background: var(--dd-corail); border-radius: 50%; border: 1.5px solid #fff; }

/* Login / no-fiche card */
.dd-login-card { background: #fff; border: 1px solid var(--dd-border); border-radius: var(--dd-radius-lg); padding: 32px; box-shadow: var(--dd-shadow); text-align: center; }
.dd-login-card .dd-mark { margin: 0 auto 14px; }
.dd-login-card h1 { font-size: 1.5rem; margin-bottom: 8px; }
.dd-login-card p { color: var(--dd-gris); font-size: 0.92rem; margin-bottom: 20px; }
.dd-login-card .login-username, .dd-login-card .login-password { text-align: left; margin-bottom: 14px; }
.dd-login-card label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--dd-nuit); margin-bottom: 6px; }
.dd-login-card input[type=text], .dd-login-card input[type=password] { width: 100%; padding: 13px 14px; border: 2px solid var(--dd-border-strong); border-radius: 11px; font-size: 1rem; }
.dd-login-card .button-primary { width: 100%; background: var(--dd-corail); color: #fff; border: none; border-radius: 12px; padding: 14px; font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: 4px; }
.dd-login-card__alt { margin-top: 18px; font-size: 0.88rem; }
.dd-login-card .login-remember { text-align: left; font-size: 0.85rem; color: var(--dd-gris); }

/* =============================================================
   SPRINT 5 — Espace artisan : disposition DESKTOP (≥ 980px)
   L'app mobile (colonne + barre du bas) devient un vrai tableau
   de bord : barre latérale de navigation à gauche, contenu large
   à droite. Le mobile-first reste intact sous 980px.
   ============================================================= */
@media (min-width: 980px) {

    /* Conteneur : grille [sidebar | contenu], largeur généreuse et centrée. */
    .dd-app {
        max-width: 1120px;
        margin: 28px auto;
        padding-bottom: 0;
        min-height: 0;
        display: grid;
        grid-template-columns: 236px 1fr;
        grid-template-rows: auto 1fr;
        gap: 0;
        background: #fff;
        border: 1px solid var(--dd-border);
        border-radius: var(--dd-radius-lg);
        box-shadow: 0 18px 60px rgba(18,35,58,.12);
        overflow: hidden;
    }

    /* Topbar : s'étire sur toute la largeur (les 2 colonnes). */
    .dd-app__top {
        grid-column: 1 / -1;
        position: static;
        padding: 16px 28px;
    }

    /* Barre du bas → barre latérale verticale à gauche. */
    .dd-bottom-nav {
        position: static;
        transform: none;
        left: auto; bottom: auto;
        width: auto; max-width: none; height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 20px 14px;
        background: var(--dd-creme);
        border-top: none;
        border-right: 1px solid var(--dd-border);
        box-shadow: none;
        grid-row: 2;
        grid-column: 1;
    }
    .dd-nav-item {
        flex: none;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        transition: background .15s ease;
    }
    .dd-nav-item .dd-ico { width: 20px; height: 20px; }
    .dd-nav-item:hover { background: rgba(18,35,58,.05); }
    .dd-nav-item.is-active { background: var(--dd-corail-soft); }
    /* La pastille « nouveau » repasse à côté du label, pas au-dessus. */
    .dd-nav-item__dot { position: static; margin-left: auto; top: auto; right: auto; }

    /* Zone de contenu : colonne de droite, large et aérée. */
    .dd-app__screen {
        grid-row: 2;
        grid-column: 2;
        padding: 30px 40px 40px;
    }
    .dd-app__screen[hidden] { display: none; }

    .dd-app__greet { font-size: 1.7rem; }

    /* Solde hero + mini-stats côte à côte. */
    .dd-dash-row {
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: 18px;
        align-items: start;
        margin-bottom: 26px;
    }
    .dd-dash-row .dd-balance-hero { margin-bottom: 0; }
    .dd-dash-row .dd-mini-stats { margin-bottom: 0; grid-template-columns: 1fr 1fr; align-self: stretch; }
    .dd-dash-row .dd-mini { display: flex; flex-direction: column; justify-content: center; }
    .dd-mini__val { font-size: 2rem; }

    /* Les demandes passent en grille 2 colonnes pour remplir l'espace. */
    .dd-leads-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .dd-leads-grid .dd-lead { margin-bottom: 0; }

    /* Formulaire fiche : 2 colonnes pour les champs courts. */
    .dd-profile-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
    }
    .dd-profile-form .dd-field--full,
    .dd-profile-form > .dd-save-btn { grid-column: 1 / -1; }
    .dd-save-btn { width: auto; min-width: 220px; justify-self: start; }

    /* Packs de recharge : 3 colonnes (fallback thème ET shortcode plugin). */
    .dd-app__screen[data-app="recharge"] .dd-pack { margin-bottom: 0; }
    .dd-packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
    .dd-packs-grid .dd-pack { flex-direction: column; align-items: flex-start; }
    .dd-packs-grid .dd-pack__buy { text-align: left; width: 100%; margin-top: auto; }

    /* Shortcode [nswld_recharge] : grille 3 colonnes, cartes de hauteur égale. */
    .dd-recharge__packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
    .dd-recharge__pack { display: flex; flex-direction: column; }
    .dd-recharge__buy { margin-top: auto; }
}

/* =============================================================
   SPRINT 5 — Page inscription artisan
   ============================================================= */
.dd-signup {
    max-width: 520px; margin: 48px auto; background: #fff;
    border: 1px solid var(--dd-border); border-radius: var(--dd-radius-lg);
    padding: 36px; box-shadow: var(--dd-shadow);
}
.dd-signup__head { text-align: center; margin-bottom: 24px; }
.dd-signup__head h1 { font-size: 1.6rem; margin-bottom: 6px; }
.dd-signup__intro { color: var(--dd-gris); font-size: 0.92rem; }
.dd-signup__steps { display: flex; gap: 6px; margin-bottom: 24px; }
.dd-ss-dot { flex: 1; height: 5px; border-radius: 999px; background: #e3e1da; transition: background .2s; }
.dd-ss-dot.is-on { background: var(--dd-corail); }
.dd-su-back { display: block; text-align: center; padding: 14px; color: var(--dd-gris); font-size: 0.85rem; }
.dd-su-error { color: var(--dd-corail-text); text-align: center; font-size: 0.9rem; margin-top: 12px; }
.dd-signup .dd-chip.is-on { border-color: var(--dd-corail); background: var(--dd-corail-soft); color: var(--dd-corail-text); font-weight: 600; }
.dd-signup-done { max-width: 520px; margin: 48px auto; text-align: center; color: var(--dd-gris); }
.dd-signup-done a { color: var(--dd-corail); font-weight: 600; }

/* FAQ sur les landings SEO */
.dd-faq { margin-top: 8px; }
.dd-faq__item { padding: 16px 0; border-bottom: 1px solid var(--dd-border); }
.dd-faq__item:last-child { border-bottom: none; }
.dd-faq__item h4 { font-size: 1.02rem; color: var(--dd-nuit, #12233A); margin: 0 0 6px; }
.dd-faq__item p { margin: 0; color: var(--dd-gris, #5a6b7d); line-height: 1.6; }