/* ==========================================================================
   Kapiro — feuille de style partagée
   Asphalte #2A2A2A · Terracotta #B1653A · Limestone #E2DCCF · Sage #A4C5A0 · Slate Gray #D3D8D1
   ========================================================================== */

:root {
  --asphalte: #2A2A2A;
  --terracotta: #B1653A;
  --limestone: #E2DCCF;
  --sage: #A4C5A0;
  --slate-gray: #D3D8D1;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #2A2A2A; background: #E2DCCF; }

.pw-serif, .pw-sans { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.pw-navitem { text-decoration: none; }
.pw-btn { cursor: pointer; border: none; }
.pw-btn:hover { opacity: 0.92; }
a { color: inherit; }
button, input, select, textarea { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
input::placeholder { color: #9A948A; }
label.pw-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: box-shadow .16s ease, transform .12s ease; }
label.pw-check:hover { box-shadow: inset 0 0 0 1.5px #B1653A; transform: translateX(2px); }

/* === Kapiro interactivity kit === */
@keyframes k-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes k-scale-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes k-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes k-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes k-pulse-a { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.k-pulse { animation: k-pulse-a 2.2s ease-in-out infinite; }
.k-fade { opacity: 0; animation: k-fade-up .6s cubic-bezier(.16,1,.3,1) forwards; }
.k-fade.d1 { animation-delay: .04s; } .k-fade.d2 { animation-delay: .09s; }
.k-fade.d3 { animation-delay: .14s; } .k-fade.d4 { animation-delay: .19s; }
.k-fade.d5 { animation-delay: .24s; } .k-fade.d6 { animation-delay: .29s; }
.k-fade.d7 { animation-delay: .34s; } .k-fade.d8 { animation-delay: .39s; }
.k-fade.d9 { animation-delay: .44s; } .k-fade.d10 { animation-delay: .49s; }
.k-pop { opacity: 0; animation: k-scale-in .5s cubic-bezier(.16,1,.3,1) forwards; }
.k-card { transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, border-color .22s ease; }
.k-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(42,42,42,0.12); border-color: #B1653A; }
.k-btn { transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, filter .18s ease; }
.k-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(177,101,58,0.30); filter: brightness(1.05); }
.k-btn:active { transform: translateY(0); box-shadow: none; filter: brightness(0.97); }
.k-btn-ghost { transition: transform .18s cubic-bezier(.16,1,.3,1), background .18s ease, border-color .18s ease; }
.k-btn-ghost:hover { transform: translateY(-1px); background: #EFEAE0; border-color: #B1653A; }
.k-link { transition: color .18s ease; text-decoration: none; }
.k-link:hover { color: #B1653A; }
.k-link:hover .k-chev { transform: translateX(3px); }
.k-chev { display: inline-flex; transition: transform .18s ease; }
.k-nav { position: relative; transition: background .2s ease, color .2s ease, padding-left .2s ease; }
.k-nav:hover { background: #3A3A38; color: #E2DCCF; padding-left: 16px; }
.k-nav-active { position: relative; }
.k-nav-active::before { content: ''; position: absolute; left: -20px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: #B1653A; transform-origin: center; animation: k-grow-y .35s cubic-bezier(.16,1,.3,1); }
.k-row { transition: background .16s ease, transform .16s ease; }
.k-row:hover { background: #EFEAE0; }
.k-icon-spin { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.k-card:hover .k-icon-spin { transform: scale(1.1) rotate(-4deg); }
.k-menu-wrap { position: relative; }
/* Bridges the visual gap between the trigger and the dropdown (top: calc(100% + Npx))
   so the mouse never leaves :hover while crossing it on the way down — without this,
   the menu closes before the pointer reaches items like "Se déconnecter". */
.k-menu-wrap::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 24px; }
.k-menu { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility .16s; pointer-events: none; z-index: 40; }
.k-menu-wrap:hover .k-menu, .k-menu-wrap:focus-within .k-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.k-draw-line { stroke-dasharray: 1000; animation: k-draw 1.4s cubic-bezier(.16,1,.3,1) forwards; }
.k-bar-fill { transition: width .6s cubic-bezier(.16,1,.3,1); }
.k-toggle { transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
.k-toggle:hover { transform: translateY(-1px); }
.k-avatar { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.k-avatar:hover { transform: scale(1.08); }
.k-input { transition: border-color .18s ease, box-shadow .18s ease; }
.k-input:focus { outline: none; border-color: #B1653A !important; box-shadow: 0 0 0 3px rgba(177,101,58,0.15); }
.k-topnav { transition: color .2s ease; text-decoration: none; }
.k-topnav:hover { color: #E2DCCF !important; }
.k-navuser:hover { background: #3A3A38; }

/* Hides the scrollbar on the horizontally-scrollable app nav (mobile fallback
   when the nav links don't all fit) while keeping it scrollable. */
.k-navpill-wrap::-webkit-scrollbar { display: none; }

/* === Layout helpers used across pages === */
.site-root { width: 100%; max-width: 1440px; margin: 0 auto; box-sizing: border-box; background: #E2DCCF; color: #2A2A2A; display: flex; flex-direction: column; min-height: 100vh; }
@media (max-width: 1023px) {
  .k-topnav span, .k-topnav-label { display: none; }
}