/* FACILIQO — Espaces (Pro, Location) : actions rapides, « Vos outils », rubriques séparées avec barre fixe,
 * annonce discrète du coffre-fort. Chargé seulement sur /espace-pro et /espace-location (en plus de app.css). */

/* Haut de page : action principale en bleu FACILIQO, accroche + phrase de présentation */
.space-pro .space-cta .btn-primary { background: var(--grad-brand); box-shadow: 0 10px 24px color-mix(in srgb, var(--c-primary) 30%, transparent); }
.space-lead2 { margin: -8px 0 18px; max-width: 62ch; font-size: .95rem; line-height: 1.55; color: var(--c-muted); }
.space-cta .btn-ghost { border: 1px solid var(--c-line); background: var(--c-surface); }

/* « Que voulez-vous faire ? » */
.sp-quick { margin: 0 0 22px; }
.sp-quick-title, .sp-mytools h2 { margin: 0 0 12px; font-size: 1.15rem; color: var(--c-ink); }
.sp-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp-quick-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 76px; padding: 12px; border-radius: 16px;
  background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); color: var(--c-ink); text-decoration: none;
  transition: border-color .12s, box-shadow .12s; }
.sp-quick-card:hover, .sp-quick-card:focus-visible { border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-line)); box-shadow: 0 8px 20px rgba(11, 35, 80, .08); color: var(--c-ink); }
.sp-quick-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--c-primary); background: var(--c-primary-soft); }
.sp-quick-ico .icon { width: 21px; height: 21px; }
.sp-quick-card.is-main .sp-quick-ico { color: #fff; background: var(--grad-brand); }
.sp-quick-txt { display: grid; gap: 2px; min-width: 0; }
.sp-quick-txt strong { font-size: .95rem; line-height: 1.25; }
.sp-quick-txt small { color: var(--c-muted); font-size: .8rem; line-height: 1.35; }
.sp-quick-chev { display: none; }

/* « Vos outils » : petit tableau de bord sans compte */
.sp-mytools { margin: 0 0 22px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--c-primary) 4%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-primary) 12%, var(--c-line)); }
.sp-mytools-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.sp-mytools h2 { margin: 0; font-size: 1rem; }
.sp-mytools-note { color: var(--c-muted); font-size: .8rem; font-weight: 700; }
.sp-mytools-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-tool-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; border-radius: 12px; background: var(--c-surface);
  border: 1px solid var(--c-line); color: var(--c-ink); font-weight: 700; font-size: .9rem; text-decoration: none; }
.sp-tool-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.sp-tool-chip-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--c-primary); background: var(--c-primary-soft); }
.sp-tool-chip-ico .icon { width: 17px; height: 17px; }

/* Barre des rubriques : fixe sous l'en-tête pendant le défilement */
.space-nav.is-sticky { position: sticky; top: var(--header-h); z-index: 20; margin: 0 calc(var(--gutter) * -1) 6px; padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--c-bg) 94%, transparent); border-bottom: 1px solid var(--c-line); scrollbar-width: none; }
.space-nav.is-sticky::-webkit-scrollbar { display: none; }
.space-nav a[aria-current] { border-color: var(--s1); background: color-mix(in srgb, var(--s1) 10%, var(--c-surface)); color: var(--s1); }
.space-nav .icon { color: var(--s1); }
.space-section { scroll-margin-top: calc(var(--header-h) + 70px); }
#coffre-fort, #mes-documents { scroll-margin-top: calc(var(--header-h) + 70px); }

/* Rubriques clairement séparées */
.space-sections .space-section { padding: 18px 0 6px; border-top: 1px solid var(--c-line); }
.space-sections .space-section:first-child { border-top: 0; }
.space-section-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.space-section-head h2 { margin: 0 0 2px; }
.space-section-head .muted { margin: 0; }
.space-section-head + .grid { margin-top: 0; }
.space-section .space-section-head h2::before { display: none; }
.space-section-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--s1), var(--s2)); }
.space-section-ico .icon { width: 20px; height: 20px; }
.space-section-count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; margin-left: 4px; border-radius: 999px; vertical-align: 3px;
  font-size: .75rem; font-weight: 800; color: var(--s1); background: color-mix(in srgb, var(--s1) 10%, var(--c-surface)); }

/* Outil pas encore utilisable : visible mais non cliquable */
.item-card.is-soon { opacity: .72; cursor: default; box-shadow: none; }
.badge-soon { background: var(--c-subtle); color: var(--c-muted); }

/* Coffre-fort annoncé (Premium pas encore en vente) : une ligne discrète, pas de bouton d'achat */
.space-soon { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin: 22px 0; padding: 14px 16px; border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--s1) 35%, var(--c-line)); background: var(--c-surface); }
.space-soon-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--s1); background: color-mix(in srgb, var(--s1) 10%, var(--c-surface)); }
.space-soon-ico .icon { width: 20px; height: 20px; }
.space-soon-k { display: flex; align-items: center; gap: 5px; margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--s1); }
.space-soon-k .icon { width: 14px; height: 14px; }
.space-soon h2 { margin: 2px 0 2px; font-size: 1rem; }
.space-soon p { margin: 0; color: var(--c-muted); font-size: .88rem; }
.space-soon-link { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .88rem; color: var(--s1); text-decoration: none; }
.space-soon-link .icon { width: 15px; height: 15px; }
.space-soon-link:hover { text-decoration: underline; }

@media (max-width: 359px) { .sp-quick-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 640px) {
  .sp-quick-card { grid-template-columns: auto 1fr auto; padding: 14px 16px; }
  .sp-quick-chev { display: block; width: 18px; height: 18px; color: var(--c-muted); }
}
@media (min-width: 1024px) {
  .sp-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-quick-card { grid-template-columns: 1fr; align-content: start; gap: 12px; min-height: 132px; padding: 18px; }
  .sp-quick-chev { display: none; }
  .sp-quick-ico { width: 46px; height: 46px; }
  .space-soon { grid-template-columns: auto 1fr auto; }
  .space-soon-link { grid-column: auto; }
}

/* Téléphone : actions d'abord (l'illustration laisse la place aux raccourcis), boutons faciles à toucher */
@media (max-width: 767px) {
  .space-pro .space-hero-art { display: none; }
  .space-pro .space-cta { display: grid; grid-template-columns: 1fr 1fr; }
  .space-pro .space-cta .btn { width: 100%; justify-content: center; padding-left: 10px; padding-right: 10px; }
  .space-pro .space-cta .btn-primary { grid-column: 1 / -1; }
  .space-lead2 { font-size: .9rem; }
  .sp-quick-card { grid-template-columns: 1fr; align-content: start; gap: 8px; min-height: 0; }
  .sp-quick-ico { width: 36px; height: 36px; }
  .sp-mytools-list { display: grid; grid-template-columns: 1fr 1fr; }
  .sp-tool-chip { min-width: 0; font-size: .84rem; line-height: 1.2; padding-right: 8px; }
  .sp-tool-chip > span:last-child { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sp-tool-chip-ico { flex: none; }
  .space-highlights li { padding: 10px 12px; }
}

/* ===== Espace Pro : espace de travail (badges, tableau de bord, coffre-fort, Premium) ===== */
.space-lead2 .icon { width: 17px; height: 17px; vertical-align: -3px; color: var(--s1); }
.space-lead2 strong { color: var(--c-ink); }
.sp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.sp-badges li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-ok-ink) 25%, var(--c-line)); font-size: .84rem; font-weight: 800; color: var(--c-ink); }
.sp-badges .icon { width: 15px; height: 15px; color: var(--c-ok-ink); }
.space-login { margin: 10px 0 0; font-size: .88rem; color: var(--c-muted); }
.space-intro { max-width: 78ch; margin: 4px 0 16px; color: var(--c-muted); line-height: 1.6; }

/* Apparition douce au défilement (une seule fois, désactivée si l'utilisateur limite les animations) */
.sp-reveal { opacity: 1; }
.js-reveal .sp-reveal:not(.is-in) { opacity: 0; transform: translateY(12px); }
.js-reveal .sp-reveal { transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 60ms); }
.sp-quick-card { transition: border-color .15s, box-shadow .15s, transform .15s; }
.sp-quick-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(11, 35, 80, .1); }
.sp-quick-card.is-account .sp-quick-ico { color: #4A3AA7; background: color-mix(in srgb, #4A3AA7 12%, var(--c-surface)); }

/* Tableau de bord : factures et devis */
.sp-dash { margin: 0 0 22px; padding: 16px; border-radius: 18px; background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.sp-dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sp-dash-head h2 { margin: 0; font-size: 1.1rem; }
.sp-dash-all { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: .88rem; text-decoration: none; }
.sp-dash-all .icon { width: 15px; height: 15px; }
.sp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sp-kpi { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-ink); text-decoration: none; transition: border-color .12s, transform .12s; }
.sp-kpi:hover { border-color: var(--c-primary); transform: translateY(-1px); color: var(--c-ink); }
.sp-kpi b { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sp-kpi span { font-size: .8rem; font-weight: 700; color: var(--c-muted); }
.sp-kpi.is-draft b { color: #B07800; } .sp-kpi.is-open b { color: #1F5BA8; } .sp-kpi.is-late b { color: var(--c-danger); } .sp-kpi.is-paid b { color: var(--c-ok-ink); } .sp-kpi.is-quote b { color: #6B3FD1; }
.sp-docs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.sp-docs li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--c-line); }
.sp-doc-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--c-primary); background: var(--c-primary-soft); }
.sp-doc-ico .icon { width: 17px; height: 17px; }
.sp-doc-main { flex: 1; min-width: 0; display: grid; text-decoration: none; color: var(--c-ink); }
.sp-doc-main strong { font-size: .92rem; }
.sp-doc-main small { color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-dash-empty { margin: 0 0 12px; color: var(--c-muted); font-size: .9rem; }
.sp-dash-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Grande carte coffre-fort */
.sp-vault { display: grid; gap: 18px; margin: 0 0 22px; padding: 20px; border-radius: 20px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .16) 0, transparent 55%), linear-gradient(135deg, #0B5CFF 0%, #4A3AA7 100%);
  box-shadow: 0 18px 40px color-mix(in srgb, #4A3AA7 28%, transparent); }
.sp-vault::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 240px; height: 240px; border-radius: 50%; border: 30px solid rgba(255, 255, 255, .07); pointer-events: none; }
.sp-vault-main { display: flex; gap: 14px; align-items: flex-start; position: relative; z-index: 1; }
.sp-vault-ico { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); }
.sp-vault-ico .icon { width: 30px; height: 30px; }
.sp-vault h2 { margin: 2px 0 6px; color: #fff; font-size: 1.45rem; }
.sp-vault p { margin: 0; color: rgba(255, 255, 255, .92); }
.sp-vault-k { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; }
.sp-free-badge { padding: 3px 10px; border-radius: 999px; background: #fff; color: #0E7A4F; font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sp-vault-points { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.sp-vault-points li { display: flex; gap: 8px; align-items: center; }
.sp-vault-points .icon { width: 17px; height: 17px; flex: none; }
.sp-vault-side { position: relative; z-index: 1; display: grid; gap: 10px; align-content: center; }
.sp-vault-side .btn-primary { background: #fff; color: #1A3A9E; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); justify-content: center; }
.sp-vault-side .btn-primary:hover { color: #1A3A9E; }
.sp-vault-login { color: #fff; font-size: .86rem; font-weight: 700; text-align: center; }
.sp-vault-quota { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.sp-vault-quota li { display: grid; place-items: center; padding: 10px 6px; border-radius: 14px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2); text-align: center; }
.sp-vault-quota b { font-size: 1.25rem; }
.sp-vault-quota span { font-size: .76rem; opacity: .9; }
.sp-meter { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.sp-meter-row { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; }
.sp-meter-row strong { font-variant-numeric: tabular-nums; }
.sp-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.sp-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: #fff; transition: width 1s cubic-bezier(.2, .8, .2, 1); }

/* Premium (bientôt disponible) */
.sp-premium { margin: 26px 0; padding: 20px; border-radius: 20px; border: 1px solid color-mix(in srgb, #7A4CE0 25%, var(--c-line)); background: linear-gradient(180deg, color-mix(in srgb, #7A4CE0 5%, var(--c-surface)), var(--c-surface)); }
.sp-premium-head h2 { margin: 4px 0 4px; }
.sp-premium-head .muted { margin: 0 0 14px; }
.sp-premium-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-weight: 800; color: #6B3FD1; }
.sp-premium-k .icon { width: 17px; height: 17px; }
.sp-soon-badge { padding: 3px 10px; border-radius: 999px; background: #6B3FD1; color: #fff; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sp-plans { display: grid; gap: 12px; }
.sp-plan { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 16px; border: 1px solid var(--c-line); background: var(--c-surface); }
.sp-plan.is-premium { border-color: color-mix(in srgb, #7A4CE0 40%, var(--c-line)); box-shadow: 0 12px 28px color-mix(in srgb, #7A4CE0 12%, transparent); }
.sp-plan-name { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 900; font-size: 1.05rem; color: var(--c-ink); }
.sp-plan.is-premium .sp-plan-name { color: #6B3FD1; }
.sp-plan-name .icon { width: 18px; height: 18px; }
.sp-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.sp-plan li { display: flex; gap: 8px; align-items: flex-start; }
.sp-plan li .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--c-ok-ink); }
.sp-plan-current { font-size: .85rem; font-weight: 800; color: var(--c-ok-ink); display: inline-flex; gap: 5px; align-items: center; }
.sp-plan-current .icon { width: 15px; height: 15px; }
.sp-plan-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: #6B3FD1; text-decoration: none; }
.sp-plan-more .icon { width: 15px; height: 15px; }
.sp-plan .btn { justify-self: start; }

@media (min-width: 640px) {
  .sp-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sp-plans { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .sp-vault { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); align-items: center; padding: 26px 28px; }
  .sp-quick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .sp-reveal:not(.is-in) { opacity: 1; transform: none; }
  .sp-quick-card, .sp-quick-card:hover, .sp-kpi:hover { transform: none; transition: none; }
  .sp-bar span { transition: none; }
}
@media (max-width: 767px) {
  .space-pro .space-cta { grid-template-columns: 1fr; }
  .sp-vault-main { flex-direction: column; }
  .sp-vault { padding: 18px 16px; }
}

/* Accès direct aux outils depuis le compte et les favoris. */
#outils{scroll-margin-top:calc(var(--header-h,60px) + 70px)}

/* Outils des espaces : rubriques et cartes plus lisibles, aux couleurs de l'espace (Pro violet, Location orange) */
.space-sections .space-section{padding:26px 0 10px}
.space-section-head{align-items:center;gap:14px;margin-bottom:18px;padding:14px 16px;border-radius:18px;background:linear-gradient(90deg,color-mix(in srgb,var(--s1,#0b5cff) 11%,var(--c-surface)),var(--c-surface) 75%);border:1px solid color-mix(in srgb,var(--s1,#0b5cff) 24%,var(--c-line))}
.space-section-head h2{font-size:clamp(20px,2.2vw,24px);line-height:1.2;color:var(--c-ink)}
.space-section-head .muted{font-size:14.5px;line-height:1.45}
.space-section-ico{width:50px;height:50px;border-radius:15px;box-shadow:0 10px 18px -12px var(--s1,#0b5cff)}
.space-section-ico .icon{width:25px;height:25px}
.space-section-count{background:var(--s1,#0b5cff);color:#fff;font-weight:800}
.space-sections .grid.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;align-items:stretch}
.space-sections .item-card{height:100%;display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:18px;border:1px solid var(--c-line);background:var(--c-surface);box-shadow:0 1px 2px rgba(15,40,85,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.space-sections .item-card:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px color-mix(in srgb,var(--s1,#0b5cff) 70%,transparent);border-color:color-mix(in srgb,var(--s1,#0b5cff) 55%,var(--c-line))}
.space-sections .item-card:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}
.space-sections .item-card .icon-tile{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--s1,#0b5cff) 14%,var(--c-surface));color:var(--s1,#0b5cff)}
.space-sections .item-card .icon-tile .icon{width:22px;height:22px}
.space-sections .item-card-body{flex:1;min-width:0;display:block}
.space-sections .item-card-title{display:block;font-size:16px;font-weight:800;line-height:1.3;color:var(--c-ink)}
.space-sections .item-card-text{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--c-muted)}
.space-sections .item-card .chev{flex:none;align-self:center;width:18px;height:18px;color:var(--s1,#0b5cff);opacity:.55;transition:transform .2s ease,opacity .2s ease}
.space-sections .item-card:hover .chev{transform:translateX(3px);opacity:1}
.space-sections .item-card.is-soon{opacity:.72}
.space-nav a{font-weight:700}
@media (prefers-reduced-motion:reduce){.space-sections .item-card,.space-sections .item-card .chev{transition:none}.space-sections .item-card:hover{transform:none}.space-sections .item-card:hover .chev{transform:none}}

/* Coffre-fort : bloc placé en fin de page, plus compact */
.sp-vault-end{margin-top:36px}
.sp-vault-end .sp-vault{padding:18px 20px;border-radius:18px}
.sp-vault-end .sp-vault h2{font-size:19px;margin:2px 0 6px}
.sp-vault-end .sp-vault-points li{font-size:13.5px}
.sp-vault-end .sp-vault-ico{width:40px;height:40px}