/* ==========================================================================
   WAF Social — systeme de design (coque, composants, mobile)
   Charte : noir #0d0b0b · rose #e84d70 · nude #e5cebb · creme
   ========================================================================== */

:root {
    /* Surfaces */
    --bg: #f6f2ee;
    --surface: #ffffff;
    --surface-2: #faf7f4;
    --line: #ebe3db;
    --line-2: #ddd1c6;

    /* Texte */
    --ink: #141111;
    --ink-2: #3d3532;
    --muted: #877b74;
    --faint: #b3a79f;

    /* Marque */
    --noir: #0d0b0b;
    --noir-2: #1b1817;
    --noir-3: #2a2624;
    --rose: #e84d70;
    --rose-dark: #c93a5c;
    --rose-soft: #fdeff2;
    --nude: #e5cebb;
    --nude-soft: #f3e7dc;
    --cream: #f6f2ee;
    --cream-2: #efe7df;
    --white: #ffffff;

    /* Etats */
    --ok: #23824f;
    --ok-soft: #e6f4ec;
    --warn: #b9741f;
    --warn-soft: #fdf3e3;
    --err: #c13d3d;
    --err-soft: #fdecec;
    --info: #3a64c8;
    --info-soft: #ebf0fc;

    /* Alias des anciennes variables (pages existantes) */
    --color-coral: var(--rose);
    --color-coral-light: #f29ab0;
    --color-coral-dark: var(--rose-dark);
    --color-cream: var(--cream);
    --color-cream-dark: var(--cream-2);
    --color-nude: #a8826a;
    --color-nude-light: var(--nude);
    --color-nude-dark: var(--ink);
    --color-dark: var(--ink);
    --color-dark-muted: var(--ink-2);
    --color-mid: var(--muted);
    --color-light: #c9bcb3;
    --color-white: #fff;
    --color-primary-active: var(--rose-dark);
    --color-border: var(--line);
    --color-border-strong: var(--line-2);

    --font-display: 'League Spartan', 'Poppins', system-ui, sans-serif;
    --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 9999px;
    --shadow-sm: 0 1px 2px rgba(20,17,17,.04), 0 1px 1px rgba(20,17,17,.03);
    --shadow-md: 0 4px 16px rgba(20,17,17,.06), 0 1px 3px rgba(20,17,17,.04);
    --shadow-lg: 0 18px 48px rgba(20,17,17,.14), 0 2px 6px rgba(20,17,17,.05);
    --shadow-coral: 0 1px 2px rgba(201,58,92,.25), 0 4px 12px rgba(232,77,112,.22);

    --sidebar-w: 244px;
    --topbar-h: 60px;
    --tabbar-h: 58px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */
[hidden] { display: none !important; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, .font-display { font-family: var(--font-display); letter-spacing: -.012em; color: var(--ink); }
a { transition: color .15s, background-color .15s, border-color .15s; }
img { max-width: 100%; }
::selection { background: rgba(232,77,112,.18); }
.tabular, .stat-value, .an-tile .v, .db-kpi .v, .num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; border-radius: 6px; }

/* ==========================================================================
   Coque : barre laterale + barre du haut
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
    width: var(--sidebar-w); flex-shrink: 0; background: var(--noir); color: #fff;
    display: flex; flex-direction: column; padding: 1.1rem .75rem .9rem;
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; z-index: 60;
    border-right: 1px solid #000; scrollbar-width: thin; scrollbar-color: #3a3433 transparent;
}
.sheet-handle { display: none; }
.brand { display: flex; align-items: center; gap: .6rem; padding: .2rem .55rem 1.1rem; color: #fff; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(145deg, #2a2523, #141111); border: 1px solid #332d2b; display: flex; align-items: center; justify-content: center; color: var(--rose); font-size: .95rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-txt b { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: .04em; }
.brand-txt span { font-size: .66rem; color: var(--nude); letter-spacing: .14em; text-transform: uppercase; margin-top: .22rem; }

.nav-group { font-size: .6rem; text-transform: uppercase; letter-spacing: .16em; color: #7d716b; padding: .95rem .65rem .35rem; font-weight: 600; }
.sidebar nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar .nav-link {
    position: relative; display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; border-radius: 8px;
    font-size: .835rem; font-weight: 500; color: #bdb1aa; width: 100%; text-align: left; text-decoration: none; background: none; border: 0; cursor: pointer;
}
.sidebar .nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidebar .nav-link.active { background: rgba(255,255,255,.08); color: #fff; box-shadow: none; }
.sidebar .nav-link.active::before { content: ''; position: absolute; left: -.75rem; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rose); }
.sidebar .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.sidebar .nav-link.active svg { color: var(--rose); opacity: 1; }
.sidebar .nav-count { margin-left: auto; font-size: .66rem; font-weight: 600; background: var(--noir-3); color: #e9e2dd; border-radius: var(--radius-pill); padding: .02rem .48rem; min-width: 20px; text-align: center; }
.sidebar .nav-count.alert { background: var(--rose); color: #fff; }
.sidebar-footer { margin-top: auto; padding-top: .8rem; border-top: 1px solid #241f1e; }
.me { display: flex; align-items: center; gap: .6rem; padding: .35rem .55rem .55rem; }
a.me { text-decoration: none; border-radius: 10px; padding-top: .45rem; }
a.me:hover { background: rgba(255,255,255,.05); }
.me .av { width: 32px; height: 32px; border-radius: 50%; background: var(--nude); color: var(--noir); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: .78rem; flex-shrink: 0; }
.me div { font-size: .78rem; line-height: 1.25; color: #fff; }
.me small { color: #8a7e78; }

.content-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .9rem;
    min-height: var(--topbar-h); padding: .65rem 2rem;
    background: rgba(246,242,238,.82); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.topbar-title { min-width: 0; }
.topbar h1 { font-size: 1.12rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumb { font-size: .72rem; color: var(--muted); }
.topbar .actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.burger { display: none; }
.content-inner { padding: 1.6rem 2rem 3.5rem; max-width: 1280px; width: 100%; margin: 0 auto; }
.scrim { display: none; }

/* Selecteur de marque (facon Metricool) */
.brand-switch { position: relative; display: inline-flex; align-items: center; margin: 0; }
.brand-switch .bs-dot { position: absolute; left: .7rem; width: 9px; height: 9px; border-radius: 50%; background: var(--bc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc) 20%, transparent); pointer-events: none; }
.brand-switch select { min-height: 36px !important; padding: .3rem 2rem .3rem 1.65rem !important; font-size: .82rem !important; font-weight: 600; background-color: var(--surface); border-radius: 999px !important; box-shadow: var(--shadow-sm); max-width: 200px; text-overflow: ellipsis; }

/* Barre d'onglets mobile (cachee sur ordinateur) */
.tabbar { display: none; }

/* ==========================================================================
   Composants
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.05rem 1.2rem; box-shadow: var(--shadow-sm); }
.stat-tile .stat-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--ink); }
.stat-tile .stat-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-top: .15rem; font-weight: 500; }

/* Boutons */
.btn {
    font-family: var(--font-body); font-weight: 500; font-size: .835rem; border-radius: 9px;
    min-height: 36px; padding: .45rem .95rem; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
    display: inline-flex; align-items: center; justify-content: center; gap: .42rem;
    cursor: pointer; border: 1px solid transparent; line-height: 1.2; white-space: nowrap; text-decoration: none; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: var(--rose); color: #fff; box-shadow: var(--shadow-coral); }
.btn-primary:hover { background: var(--rose-dark); color: #fff; }
.btn-dark { background: var(--noir); color: #fff; }
.btn-dark:hover { background: var(--noir-3); color: #fff; }
.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: #c9b9ac; background: var(--surface-2); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--cream-2); }
.btn-sm { min-height: 30px; padding: .3rem .7rem; font-size: .78rem; border-radius: 8px; }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-icon { width: 36px; padding: 0; }

/* Badges & statuts */
.badge { display: inline-flex; align-items: center; gap: .3rem; background: var(--cream-2); color: var(--ink-2); border-radius: var(--radius-pill); padding: .12rem .55rem; font-size: .7rem; font-weight: 500; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; display: none; }
.badge-instagram { background: #fbe9f3; color: #a7287a; }
.badge-facebook, .badge-fb { background: #e9effc; color: #2f5fd6; }
.badge-tiktok { background: #ededed; color: #111; }
.badge-youtube { background: var(--err-soft); color: #c62828; }
.badge-google_business { background: #e6f4eb; color: #1e7b45; }
.badge-instagram::before, .badge-facebook::before, .badge-fb::before, .badge-tiktok::before, .badge-youtube::before, .badge-google_business::before { display: inline-block; }

.pf { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font-family: var(--font-display); font-size: .58rem; font-weight: 800; color: #fff; flex-shrink: 0; letter-spacing: 0; }
.pf-instagram { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
.pf-facebook { background: #2f5fd6; }
.pf-tiktok { background: #111; }
.pf-youtube { background: #e02424; }
.pf-google_business { background: #1e8a4c; }

/* Logos officiels des reseaux (Simple Icons, licence CC0) a la place des initiales */
.pf { font-size: 0 !important; color: transparent !important; letter-spacing: 0; overflow: hidden; background-repeat: no-repeat !important; }
.pf-instagram { background: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23fff%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228%201.3877-.6652.6677-1.075%201.3368-1.3802%202.127-.2954.7638-.4956%201.6365-.552%202.914-.0564%201.2775-.0689%201.6882-.0626%204.947.0062%203.2586.0206%203.6671.0825%204.9473.061%201.2765.264%202.1482.5635%202.9107.308.7889.72%201.4573%201.388%202.1228.6679.6655%201.3365%201.0743%202.1285%201.38.7632.295%201.6361.4961%202.9134.552%201.2773.056%201.6884.069%204.9462.0627%203.2578-.0062%203.668-.0207%204.9478-.0814%201.28-.0607%202.147-.2652%202.9098-.5633.7889-.3086%201.4578-.72%202.1228-1.3881.665-.6682%201.0745-1.3378%201.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982%201.33%2020.628.9208%2019.8378.6165%2019.074.321%2018.2017.1197%2016.9244.0645%2015.6471.0093%2015.236-.005%2011.977.0014%208.718.0076%208.31.0215%207.0301.0839m.1402%2021.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814%201.3783-.9003.423-.1651%201.0575-.3614%202.227-.4171%201.2655-.06%201.6447-.072%204.848-.079%203.2033-.007%203.5835.005%204.8495.0608%201.169.0508%201.8053.2445%202.228.408.5608.216.96.4754%201.3816.895.4217.4194.6816.8176.9005%201.3787.1653.4217.3617%201.056.4169%202.2263.0602%201.2655.0739%201.645.0796%204.848.0058%203.203-.0055%203.5834-.061%204.848-.051%201.17-.245%201.8055-.408%202.2294-.216.5604-.4763.96-.8954%201.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953%205.5864A1.44%201.44%200%201%200%2018.39%204.144a1.44%201.44%200%200%200-1.437%201.4424M5.8385%2012.012c.0067%203.4032%202.7706%206.1557%206.173%206.1493%203.4026-.0065%206.157-2.7701%206.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156%202.771-6.1496%206.1738M8%2012.0077a4%204%200%201%201%204.008%203.9921A3.9996%203.9996%200%200%201%208%2012.0077%22%2F%3E%3C%2Fsvg%3E") center / 60% no-repeat, radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; }
.pf-facebook { background: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23fff%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.101%2023.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085%201.848-5.978%205.858-5.978.401%200%20.955.042%201.468.103a8.68%208.68%200%200%201%201.141.195v3.325a8.623%208.623%200%200%200-.653-.036%2026.805%2026.805%200%200%200-.733-.009c-.707%200-1.259.096-1.675.309a1.686%201.686%200%200%200-.679.622c-.258.42-.374.995-.374%201.752v1.297h3.919l-.386%202.103-.287%201.564h-3.246v8.245C19.396%2023.238%2024%2018.179%2024%2012.044c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.628%203.874%2010.35%209.101%2011.647Z%22%2F%3E%3C%2Fsvg%3E") center / 60% no-repeat, #1877F2 !important; }
.pf-tiktok { background: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23fff%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.525.02c1.31-.02%202.61-.01%203.91-.02.08%201.53.63%203.09%201.75%204.17%201.12%201.11%202.7%201.62%204.24%201.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01%202.92.01%205.84-.02%208.75-.08%201.4-.54%202.79-1.35%203.94-1.31%201.92-3.58%203.17-5.91%203.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9%201.12-3.72%202.58-4.96%201.66-1.44%203.98-2.13%206.15-1.72.02%201.48-.04%202.96-.04%204.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11%201.04-1.36%201.75-.21.51-.15%201.07-.14%201.61.24%201.64%201.82%203.02%203.5%202.87%201.12-.01%202.19-.66%202.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z%22%2F%3E%3C%2Fsvg%3E") center / 60% no-repeat, #000 !important; }
.pf-youtube { background: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23fff%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M23.498%206.186a3.016%203.016%200%200%200-2.122-2.136C19.505%203.545%2012%203.545%2012%203.545s-7.505%200-9.377.505A3.017%203.017%200%200%200%20.502%206.186C0%208.07%200%2012%200%2012s0%203.93.502%205.814a3.016%203.016%200%200%200%202.122%202.136c1.871.505%209.376.505%209.376.505s7.505%200%209.377-.505a3.015%203.015%200%200%200%202.122-2.136C24%2015.93%2024%2012%2024%2012s0-3.93-.502-5.814zM9.545%2015.568V8.432L15.818%2012l-6.273%203.568z%22%2F%3E%3C%2Fsvg%3E") center / 60% no-repeat, #FF0000 !important; }
.pf-google_business { background: url("data:image/svg+xml,%3Csvg%20fill%3D%22%234285F4%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.48%2010.92v3.28h7.84c-.24%201.84-.853%203.187-1.787%204.133-1.147%201.147-2.933%202.4-6.053%202.4-4.827%200-8.6-3.893-8.6-8.72s3.773-8.72%208.6-8.72c2.6%200%204.507%201.027%205.907%202.347l2.307-2.307C18.747%201.44%2016.133%200%2012.48%200%205.867%200%20.307%205.387.307%2012s5.56%2012%2012.173%2012c3.573%200%206.267-1.173%208.373-3.36%202.16-2.16%202.84-5.213%202.84-7.667%200-.76-.053-1.467-.173-2.053H12.48z%22%2F%3E%3C%2Fsvg%3E") center / 60% no-repeat, #fff !important; box-shadow: inset 0 0 0 1px #e3dcd4; }


.st { white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; padding: .12rem .55rem; border-radius: var(--radius-pill); }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-draft { background: #f0ebe6; color: #6d625b; }
.st-scheduled { background: var(--info-soft); color: var(--info); }
.st-publishing, .st-pending { background: var(--warn-soft); color: var(--warn); }
.st-published { background: var(--ok-soft); color: var(--ok); }
.st-failed { background: var(--err-soft); color: var(--err); }
.st-review { background: #fdf3e3; color: #b9741f; }
.st-manual { background: var(--rose-soft); color: var(--rose-dark); }
.pl-chip.s-review { outline: 1.5px dashed #d9a35a; outline-offset: -1.5px; }

/* Champs */
input, textarea, select {
    font-family: var(--font-body); font-size: .875rem; background:var(--surface); color: var(--ink);
    border: 1px solid var(--line-2) !important; border-radius: 9px !important;
    transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select { min-height: 38px; }
input:hover, textarea:hover, select:hover { border-color: #cdbdb0 !important; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--rose) !important; box-shadow: 0 0 0 3px rgba(232,77,112,.14); }
input[type=checkbox], input[type=radio] { accent-color: var(--rose); }
input::placeholder, textarea::placeholder { color: var(--faint); }
select { appearance: none; -webkit-appearance: none; padding-right: 2rem !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23877b74' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; }
label.lbl { display: block; font-size: .76rem; font-weight: 600; color: var(--ink-2); margin-bottom: .35rem; }
code { font-size: .82em; background: var(--cream-2); padding: .08rem .35rem; border-radius: 5px; }

/* Tableaux */
table.styled th { font-family: var(--font-body); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); border-bottom: 1px solid var(--line); }
table.styled td { border-bottom: 1px solid var(--line); }
table.styled tr:last-child td { border-bottom: 0; }
table tbody tr { transition: background-color .12s; }
table tbody tr:hover > td { background-color: var(--surface-2); }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Messages */
.flash-errors { background:var(--surface); border: 1px solid #f1c9c9; border-left: 4px solid var(--err); border-radius: var(--radius-md); color: #8f2a2a; font-size: .84rem; }
.toast-wrap { position: fixed; top: calc(var(--topbar-h) + 12px); right: 20px; z-index: 90; display: flex; flex-direction: column; gap: .5rem; max-width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.toast {
    pointer-events: auto; display: flex; gap: .7rem; align-items: flex-start; background: var(--noir); color: #f3ece7;
    border-radius: 12px; padding: .75rem .85rem .75rem 1rem; box-shadow: var(--shadow-lg); font-size: .82rem; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word; animation: toast-in .25s ease-out;
}
.toast::before { content: '✦'; color: var(--rose); flex-shrink: 0; }
.toast button { margin-left: auto; color: #8a7e78; background: none; border: 0; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.toast.out { opacity: 0; transform: translateY(-6px); transition: all .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Calendrier (anciennes pages) */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cal-day-head { background: var(--surface-2); padding: .5rem; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); text-align: center; }
.cal-cell { background: var(--white); min-height: 104px; padding: .4rem; }
.cal-cell.outside { background: #fbf8f5; }
.cal-date { font-size: .75rem; color: var(--muted); font-weight: 600; }
.cal-date.today { color: #fff; background: var(--rose); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-chip { display: block; font-size: .65rem; padding: .1rem .35rem; border-radius: var(--radius-sm); margin-top: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sparkle { color: var(--rose); }

/* Etats vides */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty-state b { display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; margin-bottom: .25rem; }

/* ==========================================================================
   Tablette & mobile (iPhone)
   ========================================================================== */
@media (max-width: 960px) {
    body { font-size: 14.5px; }
    .content-inner { --pad: 1rem; padding: 1.1rem var(--pad) calc(var(--tabbar-h) + var(--safe-bottom) + 1.75rem); }

    /* Barre du haut compacte, sous l'encoche */
    .topbar { padding: calc(.5rem + var(--safe-top)) 1rem .5rem; min-height: calc(52px + var(--safe-top)); gap: .6rem; background: rgba(246,242,238,.9); }
    .topbar h1 { font-size: 1.05rem; }
    .topbar .crumb { display: none; }
    .topbar .actions .btn-newpost { display: none; }
    .topbar .actions .btn { min-height: 34px; }
    .topbar .actions .btn-label { display: none; }
    .brand-switch select { min-height: 34px !important; max-width: 150px; font-size: 16px !important; transform-origin: right center; }
    .toast-wrap { top: calc(60px + var(--safe-top)); left: 12px; right: 12px; max-width: none; }

    /* Le menu complet devient une feuille qui monte du bas */
    .sidebar {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: auto; max-height: 86vh; max-height: 86dvh;
        border-radius: 22px 22px 0 0; padding: .4rem 1rem calc(1rem + var(--safe-bottom));
        transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -20px 50px rgba(0,0,0,.35);
        overscroll-behavior: contain; z-index: 80;
    }
    body.nav-open .sidebar { transform: none; }
    body.nav-open { overflow: hidden; }
    .sheet-handle { display: block; width: 40px; height: 5px; border-radius: 3px; background: #3b3533; margin: .35rem auto .8rem; }
    .sidebar .brand { display: none; }
    .sidebar nav { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
    .sidebar .nav-link { padding: .7rem .7rem; background: rgba(255,255,255,.04); border-radius: 12px; font-size: .84rem; min-height: 46px; }
    .sidebar .nav-link.active::before { display: none; }
    .sidebar .nav-link.active { background: rgba(232,77,112,.16); color: #fff; }
    .nav-group { padding: .85rem .2rem .4rem; }
    .sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
    .sidebar-footer form { margin: 0; }
    .sidebar-footer .nav-link { background: none; width: auto; color: #a99c95; }
    .scrim { display: block; position: fixed; inset: 0; background: rgba(13,11,11,.45); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .25s; }
    body.nav-open .scrim { opacity: 1; pointer-events: auto; }

    /* Barre d'onglets */
    .tabbar {
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        height: calc(var(--tabbar-h) + var(--safe-bottom)); padding: 0 .4rem var(--safe-bottom);
        background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid var(--line);
    }
    .tabbar a, .tabbar button {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        height: var(--tabbar-h); color: #8f837c; font-size: .64rem; font-weight: 500; text-decoration: none; background: none; border: 0; padding: 0; font-family: var(--font-body);
    }
    .tabbar svg { width: 23px; height: 23px; }
    .tabbar .on { color: var(--ink); }
    .tabbar .on svg { color: var(--rose); }
    .tabbar .dot { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 17px; height: 17px; border-radius: 9px; background: var(--rose); color: #fff; font-size: .6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff; }
    .tabbar .plus span { width: 46px; height: 46px; border-radius: 15px; background: var(--rose); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-coral); margin-bottom: 2px; }
    .tabbar .plus svg { width: 24px; height: 24px; }
    body.no-tabbar .tabbar { display: none; }
    body.no-tabbar .content-inner { padding-bottom: calc(1.5rem + var(--safe-bottom)); }

    /* Tactile : pas de zoom auto d'iOS sur les champs (16 px mini), cibles 44 px */
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea { font-size: 16px !important; }
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select { min-height: 44px; }
    .btn { min-height: 42px; }
    .btn-sm { min-height: 34px; }

    /* Garde-fous generaux */
    .content-inner > * { max-width: 100%; }
    .content-inner img, .content-inner video, .content-inner canvas { max-width: 100%; }
    pre, code { white-space: pre-wrap; word-break: break-word; }
}

@media (max-width: 420px) {
    .content-inner { --pad: .85rem; }
}

/* Appli installee sur l'ecran d'accueil (iPhone) */
@media (display-mode: standalone) {
    body { overscroll-behavior-y: none; }
}

/* ===================================================================== V14 : fluidite
   Transitions entre pages, palette de commandes (Ctrl K), barre de chargement,
   boutons « en cours », micro-interactions. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .16s ease both; }
::view-transition-new(root) { animation: vt-in .22s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(4px); } }
.sidebar, .tabbar, .topbar { view-transition-name: none; }
.sidebar { view-transition-name: sidebar; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(sidebar), ::view-transition-new(sidebar), ::view-transition-old(tabbar), ::view-transition-new(tabbar) { animation: none; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

.content-inner > * { animation: page-in .28s cubic-bezier(.2, .7, .3, 1) both; }
.content-inner > *:nth-child(2) { animation-delay: .03s; }
.content-inner > *:nth-child(3) { animation-delay: .06s; }
@keyframes page-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .content-inner > * { animation: none; } }

/* barre de chargement en haut */
.nprog { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; background: linear-gradient(90deg, var(--rose), #ff9db4); box-shadow: 0 0 10px rgba(232, 77, 112, .6); opacity: 0; pointer-events: none; }
.nprog.go { opacity: 1; animation: nprog 8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes nprog { 0% { width: 0; } 10% { width: 35%; } 40% { width: 70%; } 100% { width: 92%; } }

/* bouton qui travaille */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: rgba(255,255,255,.9) rgba(255,255,255,.9) transparent transparent; animation: spin .7s linear infinite; }
.btn-outline.is-loading::after, .btn-ghost.is-loading::after { border-color: var(--ink) var(--ink) transparent transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* micro-interactions */
.btn { transition: transform .12s ease, background-color .15s, box-shadow .15s, border-color .15s, color .15s; }
.btn:active { transform: scale(.97); }
.nav-link { transition: background-color .15s, color .15s; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; border-radius: 6px; }

/* recherche / palette */
.cmdk-btn { display: inline-flex; align-items: center; gap: .5rem; height: 38px; padding: 0 .55rem 0 .75rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; font-size: .82rem; min-width: 210px; transition: border-color .15s, box-shadow .15s; }
.cmdk-btn:hover { border-color: var(--ink-2); box-shadow: 0 1px 6px rgba(20, 17, 17, .06); }
.cmdk-btn-t { flex: 1; text-align: left; }
.cmdk-kbd, .cmdk kbd { font-family: inherit; font-size: .66rem; font-weight: 600; color: var(--ink-2); background: var(--cream-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: .05rem .4rem; }
.cmdk { position: fixed; inset: 0; z-index: 9000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.cmdk[hidden] { display: none; }
.cmdk-scrim { position: absolute; inset: 0; background: rgba(13, 11, 11, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .15s ease; }
.cmdk-box { position: relative; width: min(600px, 100%); background:var(--surface); border-radius: 18px; box-shadow: 0 24px 70px rgba(13, 11, 11, .35); overflow: hidden; animation: pop .18s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-6px); } }
@keyframes fade { from { opacity: 0; } }
.cmdk-in { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmdk-in input { flex: 1; border: 0 !important; box-shadow: none !important; outline: none; font-size: 1rem; padding: .2rem 0; background: transparent; }
.cmdk-in kbd { cursor: pointer; }
.cmdk-list { max-height: min(56vh, 420px); overflow-y: auto; padding: .4rem; }
.cmdk-g { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; padding: .6rem .7rem .25rem; }
.cmdk-it { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: .9rem; }
.cmdk-it span { flex: 1; }
.cmdk-it i { font-style: normal; color: var(--faint); opacity: 0; }
.cmdk-it.on, .cmdk-it:hover { background: var(--rose-soft); color: var(--rose-dark); }
.cmdk-it.on i { opacity: 1; }
.cmdk-empty { padding: 1.4rem; text-align: center; color: var(--muted); font-size: .86rem; }
.cmdk-foot { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: 1px solid var(--line); background: var(--surface-2); font-size: .7rem; color: var(--muted); }
.cmdk-foot kbd { margin-right: .2rem; }
@media (max-width: 960px) {
    .cmdk-btn { min-width: 0; width: 38px; padding: 0; justify-content: center; border-radius: 50%; }
    .cmdk-btn-t, .cmdk-kbd { display: none; }
    .cmdk { padding-top: calc(10px + env(safe-area-inset-top, 0px)); align-items: flex-start; }
    .cmdk-foot { display: none; }
    .cmdk-list { max-height: 60vh; }
}
body.cmdk-on { overflow: hidden; }

/* ===================================================================== V16 : mode sombre
   data-theme="dark" (choisi) ou "auto" + appareil en sombre. */
.theme-sw { display: flex; gap: 2px; background: var(--noir-3); border-radius: 999px; padding: 3px; margin: .3rem .2rem .5rem; width: max-content; }
.theme-sw button { width: 30px; height: 26px; border-radius: 999px; border: 0; background: transparent; color: #a99d96; cursor: pointer; font-size: .85rem; line-height: 1; }
.theme-sw button.on { background: #fff; color: #141111; }
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #110f0e; --surface: #1a1716; --surface-2: #211d1c; --line: #2d2826; --line-2: #3d3634;
    --ink: #f2ece8; --ink-2: #cdc3bd; --muted: #9a8f89; --faint: #6c625d;
    --rose-soft: #3a1c25; --nude: #4a3b31; --nude-soft: #2a221e; --cream: #1f1b1a; --cream-2: #2a2523; --white: #1a1716;
    --ok: #4cc286; --ok-soft: #13301f; --warn: #e3a54b; --warn-soft: #33260f; --err: #ff7b7b; --err-soft: #3a1818; --info: #7ea3ff; --info-soft: #172240;
    --rose-dark: #ff8fab;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 18px 48px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        color-scheme: dark;
        --bg: #110f0e; --surface: #1a1716; --surface-2: #211d1c; --line: #2d2826; --line-2: #3d3634;
        --ink: #f2ece8; --ink-2: #cdc3bd; --muted: #9a8f89; --faint: #6c625d;
        --rose-soft: #3a1c25; --nude: #4a3b31; --nude-soft: #2a221e; --cream: #1f1b1a; --cream-2: #2a2523; --white: #1a1716;
        --ok: #4cc286; --ok-soft: #13301f; --warn: #e3a54b; --warn-soft: #33260f; --err: #ff7b7b; --err-soft: #3a1818; --info: #7ea3ff; --info-soft: #172240;
        --rose-dark: #ff8fab;
        --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 18px 48px rgba(0,0,0,.6);
    }
}
/* elements qui gardent des couleurs fixes */
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line-2) !important; }
:root[data-theme="dark"] .btn-dark { background: #f2ece8 !important; color: #141111 !important; border-color: #f2ece8 !important; }
:root[data-theme="dark"] .btn-outline { background: transparent !important; color: var(--ink) !important; border-color: var(--line-2) !important; }
:root[data-theme="dark"] .btn-ghost { color: var(--ink-2); }
:root[data-theme="dark"] .db-kpi.dark, :root[data-theme="dark"] .an-tile.accent { background: #2a1720 !important; border-color: #3a1c25 !important; }
:root[data-theme="dark"] .topbar { background: color-mix(in srgb, var(--bg) 88%, transparent) !important; border-color: var(--line) !important; }
:root[data-theme="dark"] .tabbar { background: color-mix(in srgb, var(--surface) 92%, transparent) !important; border-color: var(--line) !important; }
:root[data-theme="dark"] .cmdk-box, :root[data-theme="dark"] dialog { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] img { filter: brightness(.94); }
:root[data-theme="dark"] .fm-phone, :root[data-theme="dark"] .pl-ghost { background: var(--surface); }
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] input, :root[data-theme="auto"] textarea, :root[data-theme="auto"] select { background-color: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line-2) !important; }
    :root[data-theme="auto"] .btn-dark { background: #f2ece8 !important; color: #141111 !important; border-color: #f2ece8 !important; }
    :root[data-theme="auto"] .btn-outline { background: transparent !important; color: var(--ink) !important; border-color: var(--line-2) !important; }
    :root[data-theme="auto"] .btn-ghost { color: var(--ink-2); }
    :root[data-theme="auto"] .db-kpi.dark, :root[data-theme="auto"] .an-tile.accent { background: #2a1720 !important; border-color: #3a1c25 !important; }
    :root[data-theme="auto"] .topbar { background: color-mix(in srgb, var(--bg) 88%, transparent) !important; border-color: var(--line) !important; }
    :root[data-theme="auto"] .tabbar { background: color-mix(in srgb, var(--surface) 92%, transparent) !important; border-color: var(--line) !important; }
    :root[data-theme="auto"] .cmdk-box, :root[data-theme="auto"] dialog { background: var(--surface); color: var(--ink); }
    :root[data-theme="auto"] img { filter: brightness(.94); }
}

/* cloche (centre de notifications) */
.bell { position: relative; }
.bell-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.bell-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.bell-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--rose); color: #fff; font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--bg); }
.bell-panel { position: absolute; right: 0; top: 46px; width: min(380px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); z-index: 80; overflow: hidden; animation: pop .16s ease; }
.bell-panel[hidden] { display: none; }
.bell-h { display: flex; justify-content: space-between; align-items: center; padding: .75rem .9rem; border-bottom: 1px solid var(--line); }
.bell-h a { font-size: .74rem; color: var(--rose-dark); text-decoration: none; font-weight: 600; }
.bell-list { max-height: min(60vh, 460px); overflow-y: auto; }
.bell-it { display: flex; gap: .6rem; padding: .65rem .9rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.bell-it:hover { background: var(--surface-2); }
.bell-it.new { background: var(--rose-soft); }
.bell-it .ic { width: 28px; text-align: center; font-size: 1rem; flex-shrink: 0; }
.bell-it .tx { display: flex; flex-direction: column; min-width: 0; }
.bell-it b { font-size: .8rem; font-weight: 600; }
.bell-it small { font-size: .74rem; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bell-it i { font-style: normal; font-size: .66rem; color: var(--muted); margin-top: .1rem; }
.bell-empty { padding: 1.4rem; text-align: center; color: var(--muted); font-size: .84rem; }
@media (max-width: 960px) { .bell-panel { position: fixed; right: 12px; top: calc(56px + var(--safe-top)); } }
:root[data-theme="dark"] .pl-evt { background: #2a2140 !important; color: #c9b5ff !important; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .pl-evt { background: #2a2140 !important; color: #c9b5ff !important; } }