/**
 * GESTION PRO v15.0 — thème « Clay »
 * Sombre par défaut, clair au bouton ☀️ (html[data-theme="clair"]).
 * Zéro CDN : polices système uniquement.
 * Les anciens jetons (--gold, --header, --sage…) sont conservés et remappés :
 * les styles en ligne générés par script.js restent justes sans y toucher.
 */

/* ── Jetons Clay — sombre par défaut ──────────────────────────────────────── */
:root {
    --fond:       #0f0f10;
    --side:       #1a1a1c;
    --side-text:  #e8e8e6;
    --side-hover: rgba(255, 255, 255, .06);
    --carte:      #1e1e20;
    --carte-2:    #262628;
    --texte:      #f2f2f0;
    --muted:      #9a9a98;
    --ligne:      rgba(255, 255, 255, .08);

    --peach: #2a2a2d; --sun: #2a2a2d; --sky: #2a2a2d; --mint: #2a2a2d; --lilac: #2a2a2d;
    --peach-ink: #f0a68f; --sun-ink: #e0b96a; --sky-ink: #93b4e0; --mint-ink: #8fd6a8; --lilac-ink: #b9a6e8;

    --accent:      #ef9a83;
    --accent-fort: #f4b19e;
    --accent-ink:  #241611;

    --ok: #8fd6a8;   --ok-tint: #1f2c24;
    --ko: #f0908c;   --ko-tint: #33221f;   --ko-ink: #0f0f10;
    --run: #e0b96a;  --run-tint: #2e2920;
    --none: #8a8a88; --none-tint: #2a2a2d;

    --clay:    inset 1px 1px 2px rgba(255, 255, 255, .07), inset -3px -3px 8px rgba(0, 0, 0, .6), 0 10px 24px rgba(0, 0, 0, .55);
    --clay-sm: inset 1px 1px 2px rgba(255, 255, 255, .07), inset -2px -2px 5px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .5);
    --inset:   inset 2px 2px 6px rgba(0, 0, 0, .6), inset -1px -1px 2px rgba(255, 255, 255, .05);
    --glass:   rgba(15, 15, 16, .74);
    --scrim:   rgba(0, 0, 0, .6);
    --donut-rest: #3a3a3d;
    --pouss:   0 5px 0 rgba(0, 0, 0, .45);
    --pouss-bas: 0 2px 0 rgba(0, 0, 0, .45);

    --font:   -apple-system, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
    --mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --bounce: cubic-bezier(.34, 1.56, .64, 1);

    --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px;
    --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 30px;

    /* Compatibilité : anciens noms utilisés dans les styles en ligne */
    --bg-base: var(--fond); --bg-elev-1: var(--carte); --bg-elev-2: var(--carte-2); --bg-elev-3: var(--carte-2);
    --border: var(--ligne); --border-strong: var(--ligne); --border-accent: var(--accent);
    --text-main: var(--texte); --text-muted: var(--muted); --text-dim: var(--muted);
    --gold: var(--accent); --header: var(--carte-2); --sage: var(--ok); --danger: var(--ko);
    --accent-hover: var(--accent-fort); --accent-dim: rgba(239, 154, 131, .22);
    --titre: var(--font);
}

/* ── Clair ────────────────────────────────────────────────────────────────── */
html[data-theme="clair"] {
    --fond:       #efe3d6;
    --side:       #cfe2d8;
    --side-text:  #3f5a4c;
    --side-hover: rgba(255, 255, 255, .3);
    --carte:      #fffaf4;
    --carte-2:    #f3e7db;
    --texte:      #4a4238;
    --muted:      #6d6259;   /* assombri : #8b8076 tombait sous le seuil de lisibilité sur fond clair */
    --ligne:      rgba(74, 66, 56, .1);

    --peach: #f6d5c9; --sun: #f9e9b8; --sky: #cfdcef; --mint: #d8e9dc; --lilac: #e4d9f3;
    --peach-ink: #b5563a; --sun-ink: #8a6410; --sky-ink: #395884; --mint-ink: #2f6b4a; --lilac-ink: #59418f;

    --accent:      #e8907a;
    --accent-fort: #f0a48f;
    --accent-ink:  #33190f;

    --ok: #3d7f55;   --ok-tint: #d9ead9;
    --ko: #c1523f;   --ko-tint: #f6d5c9;   --ko-ink: #fff;
    --run: #96660f;  --run-tint: #f9e9b8;
    --none: #7d7670; --none-tint: #ebe4dc;

    --clay:    inset 2px 2px 5px rgba(255, 255, 255, .9), inset -3px -3px 8px rgba(120, 90, 60, .14), 0 10px 22px rgba(120, 90, 60, .16);
    --clay-sm: inset 1px 1px 3px rgba(255, 255, 255, .95), inset -2px -2px 5px rgba(120, 90, 60, .14), 0 5px 12px rgba(120, 90, 60, .16);
    --inset:   inset 2px 2px 6px rgba(120, 90, 60, .12), inset -1px -1px 3px rgba(255, 255, 255, .6);
    --glass:   rgba(239, 227, 214, .74);
    --scrim:   rgba(40, 30, 20, .45);
    --donut-rest: var(--sun);
    --pouss:   0 5px 0 rgba(120, 90, 60, .22);
    --pouss-bas: 0 2px 0 rgba(120, 90, 60, .22);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    background: var(--fond);
    color: var(--texte);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    zoom: 1.6;
    transition: background .3s, color .3s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-fort); }
::selection { background: var(--accent); color: var(--accent-ink); }
b, strong { font-variant-numeric: tabular-nums; }

@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
html[data-anim="off"] *, html[data-anim="off"] *::before, html[data-anim="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { body { zoom: 1 !important; } }

/* ════════════════════════════════════════
   OSSATURE : barre latérale permanente + contenu
════════════════════════════════════════ */
#gp-shell { display: flex; align-items: flex-start; min-height: 100vh; }

#gp-rail {
    width: 92px; flex: none;
    background: var(--side); color: var(--side-text);
    border-radius: 0 var(--r-xl) var(--r-xl) 0;
    padding: 16px 10px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: sticky; top: 0; max-height: 62.5vh; overflow-y: auto;
    scrollbar-width: none;
    box-shadow: inset -6px 0 14px rgba(0, 0, 0, .05);
    transition: background .3s, color .3s;
}
#gp-rail::-webkit-scrollbar { display: none; }
#gp-rail .rail-logo {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    background: var(--carte); box-shadow: var(--clay-sm); margin-bottom: 8px; flex: none;
}
#gp-rail nav { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.rail-item {
    width: 100%; border: 0; background: transparent; color: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 4px; border-radius: var(--r-md);
    font-family: inherit; font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
    transition: transform .18s var(--bounce), background .2s;
}
.rail-item:hover { background: var(--side-hover); }
/* Liens vers Drama Studio (Publicité, Autre) : des <a>, pas des boutons. */
a.rail-item { text-decoration: none; color: inherit; }
.rail-item:active { transform: scale(.94); }
.rail-item.active { background: var(--carte); color: var(--texte); box-shadow: var(--clay-sm); }
.rail-item .ico {
    width: 34px; height: 34px; border-radius: var(--r-sm); flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    background: var(--carte); box-shadow: var(--clay-sm);
}
.rail-item .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gp-rail .rail-sep { height: 1px; width: 60%; background: currentColor; opacity: .15; margin: 8px 0; flex: none; }

/* Sous-navigation « Mes apps » fusionnée dans le rail (remplit #rail-dash-slot
   uniquement quand la page Mes apps est ouverte ; display:contents laisse ses
   boutons suivre la mise en page du rail, verticale comme horizontale). */
#rail-dash-slot { display: contents; }
/* Mode focus « Mes apps » : les entrées métier de Gestion Pro n'ont pas de
   raison de rester pendant qu'on navigue dans le module — seuls Accueil,
   Mes apps et ses sous-entrées subsistent. Tout revient en quittant la page. */
#gp-rail.dash-mode .rail-item:not(.rail-sub):not(.rail-studio):not([data-page="home"]):not([data-page="dash"]),
#gp-rail.dash-mode .rail-sep { display: none; }
/* Les sous-entrées héritent exactement de la taille des boutons Accueil /
   Mes apps (.rail-item) — seule la pastille d'état s'ajoute en coin d'icône. */
#gp-rail .rail-sub .ico { position: relative; overflow: visible; }
/* Groupes du rail « Mes apps » : Applis / Sites */
#gp-rail .rail-grp {
    width: 100%; text-align: center; flex: none;
    font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    opacity: .55; margin: 8px 0 0;
}
#gp-rail .rail-sub .ico .dot {
    position: absolute; right: -3px; top: -3px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--none); border: 2px solid var(--side);
}
#gp-rail .rail-sub .ico .dot.ci-ok  { background: var(--ok); }
#gp-rail .rail-sub .ico .dot.ci-ko  { background: var(--ko); }
#gp-rail .rail-sub .ico .dot.ci-run { background: var(--run); }

#gp-main { flex: 1 1 0; min-width: 0; width: 0; }

/* ════════════════════════════════════════
   EN-TÊTE
════════════════════════════════════════ */
header {
    background: var(--glass);
    backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--ligne);
    padding: 14px 24px;
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 9000;
}
.hd-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hd-title {
    font-size: 22px; font-weight: 800; color: var(--texte); letter-spacing: -.01em;
    text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.hd-clock { display: flex; align-items: center; gap: 10px; flex: none; font-size: 11px; font-weight: 700; color: var(--muted); }
.hd-clock-text { text-align: right; line-height: 1.35; }
#hd-date { text-transform: uppercase; letter-spacing: .06em; }
#hd-time {
    font-size: 15px !important; color: var(--texte) !important; font-weight: 800;
    letter-spacing: 0 !important; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) { #hd-date { display: none; } }

/* Boutons ronds en relief de l'en-tête */
.hd-anim-btn, .global-back-btn, .hd-btn {
    width: 40px; height: 40px; flex: none; border: 0; border-radius: var(--r-md); cursor: pointer;
    background: var(--carte); color: var(--texte); font-size: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--clay-sm); font-family: inherit;
    transition: transform .18s var(--bounce);
}
.hd-anim-btn:hover, .global-back-btn:hover, .hd-btn:hover { transform: translateY(-1px); }
.hd-anim-btn:active, .global-back-btn:active, .hd-btn:active { transform: scale(.9); }
.global-back-btn { display: none; }

/* ════════════════════════════════════════
   TOASTS
════════════════════════════════════════ */
#toast-holder {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9999;
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none; width: min(420px, calc(100% - 32px));
}
.toast {
    pointer-events: auto; width: 100%; padding: 14px 18px; border-radius: var(--r-lg);
    background: var(--carte); color: var(--texte); box-shadow: var(--clay);
    font-size: 13.5px; font-weight: 700; line-height: 1.4;
    animation: toast-in .25s var(--bounce) both;
}
.toast-success { border-left: 4px solid var(--ok); }
.toast-error   { border-left: 4px solid var(--ko); }
.toast-warn    { border-left: 4px solid var(--run); }
.toast.toast-out { animation: toast-out .18s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* ════════════════════════════════════════
   PAGES
════════════════════════════════════════ */
.page { display: none; padding: 22px 26px 130px; max-width: 1200px; margin: 0 auto; }
.page.active { display: block; animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }

/* ════════════════════════════════════════
   ACCUEIL : tuiles pastel, une teinte par métier
════════════════════════════════════════ */
/* Bandeau « d'un coup d'œil » : l'essentiel du jour au-dessus des tuiles */
.home-resume {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.home-resume:empty { display: none; }
.hr-card {
    background: var(--carte);
    box-shadow: var(--clay-sm);
    border-radius: var(--r-md);
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    transition: transform .2s var(--bounce);
}
.hr-card:hover { transform: translateY(-2px); }
.hr-card b { font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hr-card span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hr-card small { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.hr-mint  b { color: var(--mint-ink); }
.hr-peach b { color: var(--peach-ink); }
.hr-sun   b { color: var(--sun-ink); }
.hr-sky   b { color: var(--sky-ink); }
@media (max-width: 620px) {
    .home-resume { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 6px; }
.home-btn {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px;
    padding: 24px; border-radius: var(--r-xl); cursor: pointer; position: relative;
    min-height: 132px; color: var(--texte); background: var(--carte); box-shadow: var(--clay);
    transition: transform .2s var(--bounce), background .3s;
}
.home-btn:hover { transform: translateY(-3px); }
.home-btn:active { transform: scale(.98); }
.home-btn.large { grid-column: span 2; }
.home-btn .icon {
    width: 52px; height: 52px; flex: none; padding: 12px; border-radius: var(--r-md);
    background: var(--carte); box-shadow: var(--clay-sm); stroke-width: 2;
}
.home-btn span:not(.icon) { font-size: 15.5px; font-weight: 800; letter-spacing: -.005em; min-width: 0; overflow-wrap: anywhere; }
/* Une teinte par tuile, dans l'ordre du DOM */
.home-grid > .home-btn:nth-child(1) { background: var(--peach); }
.home-grid > .home-btn:nth-child(1) .icon { color: var(--peach-ink); }
.home-grid > .home-btn:nth-child(2) { background: var(--mint); }
.home-grid > .home-btn:nth-child(2) .icon { color: var(--mint-ink); }
.home-grid > .home-btn:nth-child(3) { background: var(--sky); }
.home-grid > .home-btn:nth-child(3) .icon { color: var(--sky-ink); }
.home-grid > .home-btn:nth-child(4) { background: var(--sun); }
.home-grid > .home-btn:nth-child(4) .icon { color: var(--sun-ink); }
.home-grid > .home-btn:nth-child(5) { background: var(--lilac); }
.home-grid > .home-btn:nth-child(5) .icon { color: var(--lilac-ink); }
.home-grid > .home-btn:nth-child(6) { background: var(--mint); }
.home-grid > .home-btn:nth-child(6) .icon { color: var(--mint-ink); }
.home-grid > .home-btn:nth-child(7) { background: var(--sky); }
.home-grid > .home-btn:nth-child(7) .icon { color: var(--sky-ink); }
.home-grid > .home-btn:nth-child(8) { background: var(--peach); }
.home-grid > .home-btn:nth-child(8) .icon { color: var(--peach-ink); }
.home-grid > .home-btn:nth-child(9) { background: var(--carte-2); }
.home-grid > .home-btn:nth-child(9) .icon { color: var(--muted); }
/* Bandeau des apps : Mes Apps (large) + Drama Studio (Publicité, Autre) */
.home-apps-row { grid-column: span 2; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
a.home-btn { text-decoration: none; color: var(--texte); }
.home-apps-row .hb-apps { background: var(--peach); }
.home-apps-row .hb-apps .icon { color: var(--peach-ink); }
.home-apps-row .hb-pub { background: var(--lilac); }
.home-apps-row .hb-pub .icon { color: var(--lilac-ink); }
.home-apps-row .hb-autre { background: var(--sun); }
.home-apps-row .hb-autre .icon { color: var(--sun-ink); }
@media (max-width: 620px) {
    .home-apps-row { grid-column: auto; grid-template-columns: 1fr; }
    .home-grid { grid-template-columns: 1fr; }
    .home-btn.large { grid-column: auto; }
    .home-btn { min-height: 100px; padding: 20px; gap: 12px; }
}

/* ════════════════════════════════════════
   SOUS-ONGLETS (contrôle segmenté)
════════════════════════════════════════ */
.sub-tabs {
    display: flex; gap: 4px; margin-bottom: 22px; padding: 5px; border-radius: var(--r-lg);
    background: var(--carte-2); box-shadow: var(--inset);
    position: sticky; top: 68px; z-index: 5000;
}
.sub-tab {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 11px 12px; text-align: center; border: 0; border-radius: var(--r-sm); cursor: pointer;
    background: transparent; color: var(--muted); font-family: inherit;
    font-size: 13px; font-weight: 800; text-transform: none;
    transition: color .25s, transform .18s var(--bounce), background .25s;
}
.sub-tab:hover { color: var(--texte); }
.sub-tab:active { transform: scale(.96); }
.sub-tab.active { background: var(--carte); color: var(--texte); box-shadow: var(--clay-sm); }

/* ════════════════════════════════════════
   CARTES
════════════════════════════════════════ */
.card {
    background: var(--carte); border-radius: var(--r-lg); box-shadow: var(--clay);
    padding: 18px 20px; margin-bottom: 12px; min-width: 0; color: var(--texte);
    display: flex; justify-content: space-between; align-items: center; position: relative;
    transition: transform .2s var(--bounce), background .3s;
}
.card b { font-weight: 800; }
.card-link { cursor: pointer; }
.card-link:hover { transform: translateY(-2px); }
.card-link:active { transform: scale(.98); }
.card[style*="flex-direction: column"], .card[style*="flex-direction:column"] { flex-direction: column !important; align-items: stretch !important; }
.card[style*="background: var(--header)"], .card[style*="background:var(--header)"] {
    background: var(--carte-2) !important; color: var(--texte) !important;
}
.card[style*="background:var(--bg-elev-2)"], .card[style*="background: var(--bg-elev-2)"] { background: var(--carte-2) !important; }

/* ════════════════════════════════════════
   TITRES DE SECTION
════════════════════════════════════════ */
.section-title {
    font-size: 11.5px; font-weight: 800; color: var(--muted);
    margin-bottom: 12px; text-transform: uppercase; letter-spacing: .08em;
}
.section-title[style*="margin-top"] { margin-top: 30px !important; }

/* ════════════════════════════════════════
   FORMULAIRES
════════════════════════════════════════ */
.field { margin-bottom: 14px; }
label {
    display: block; font-size: 11px; font-weight: 800; color: var(--muted);
    letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px 2px;
}
input, select, textarea {
    width: 100%; padding: 13px 15px; border: 0; border-radius: var(--r-md);
    background: var(--carte-2); color: var(--texte); box-shadow: var(--inset);
    font-family: inherit; font-size: 15px; font-weight: 600; outline: none;
    -webkit-appearance: none; appearance: none;
    transition: box-shadow .2s, background .3s;
}
input:focus, select:focus, textarea:focus { box-shadow: var(--inset), 0 0 0 3px var(--accent-dim); }
input[readonly] { background: var(--carte) !important; color: var(--muted) !important; box-shadow: none !important; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { min-height: 90px; resize: vertical; }
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9a98' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; padding-right: 42px; cursor: pointer;
}
.r2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.r2 > * { min-width: 0; }
@media (max-width: 520px) { .r2 { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════
   BOUTONS
════════════════════════════════════════ */
.btn {
    padding: 13px 20px; border: 0; border-radius: var(--r-md); cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .01em;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--carte-2) !important; color: var(--texte);
    box-shadow: var(--clay-sm); outline: none;
    transition: transform .18s var(--bounce), background .25s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { box-shadow: var(--clay-sm), 0 0 0 3px var(--accent-dim); }
/* Même anneau de focus sur le menu, l'en-tête et les éléments rendus
   cliquables au clavier : sans lui, on ne sait pas où l'on est. */
.rail-item:focus-visible, .hd-btn:focus-visible, .hd-anim-btn:focus-visible,
[role="button"]:focus-visible, .sub-tab:focus-visible, .home-btn:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

.btn-gold {
    width: 100%; background: var(--accent) !important; color: var(--accent-ink) !important;
    box-shadow: var(--pouss);
}
.btn-gold:hover { background: var(--accent-fort) !important; transform: none; }
.btn-gold:active { transform: translateY(3px) scale(.98); box-shadow: var(--pouss-bas); }
.btn.btn-gold[style*="width:auto"], .btn.btn-gold[style*="width: auto"] { width: auto !important; }
.btn.btn-gold[style*="width:100px"] { width: 100px !important; }
.btn.btn-gold[style*="width: 60px"], .btn.btn-gold[style*="width:60px"] { width: 60px !important; }
.btn.btn-gold[style*="background:#fff"], .btn.btn-gold[style*="background: #fff"],
.btn.btn-gold[style*="background:#555"], .btn.btn-gold[style*="background: #555"],
.btn.btn-gold[style*="background:#888"], .btn.btn-gold[style*="background: #888"] {
    background: var(--carte) !important; color: var(--texte) !important; box-shadow: var(--clay-sm) !important;
}
.btn.btn-gold[style*="background:var(--header)"], .btn.btn-gold[style*="background: var(--header)"] {
    background: var(--carte) !important; color: var(--accent) !important; box-shadow: var(--clay-sm) !important;
}
.btn-red {
    width: 100%; margin-top: 8px;
    background: var(--ko-tint) !important; color: var(--ko) !important; box-shadow: var(--clay-sm) !important;
}
.btn-red:hover { background: var(--ko) !important; color: var(--ko-ink) !important; }

/* ════════════════════════════════════════
   GRILLE PRODUITS (prise de commande) & STOCK
════════════════════════════════════════ */
#bl-prod-grid {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)) !important;
    gap: 14px !important; margin-top: 14px !important;
}
#bl-prod-grid button, .qty-btn {
    background: var(--carte-2) !important; border: 0 !important; border-radius: var(--r-sm) !important;
    color: var(--texte) !important; font-size: 22px; width: 48px; height: 48px; cursor: pointer;
    box-shadow: var(--clay-sm) !important;
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s var(--bounce), background .25s;
}
#bl-prod-grid button:hover { background: var(--accent) !important; color: var(--accent-ink) !important; }
#bl-prod-grid button:active { transform: scale(.92); }
#bl-prod-grid input[type="number"] { text-align: center; }
#list-stock { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)) !important; gap: 14px !important; }

/* ════════════════════════════════════════
   ÉTIQUETTES & PASTILLES
════════════════════════════════════════ */
.mini-tag {
    background: var(--carte-2); box-shadow: var(--clay-sm); padding: 5px 11px; border-radius: 10px;
    font-size: 11.5px; font-weight: 800; color: var(--muted); display: inline-block;
}
.alert-badge {
    position: absolute; top: 14px; right: 14px; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px; background: var(--ko); color: var(--ko-ink);
    font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.badge-statut {
    padding: 4px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em; display: inline-block;
}
.badge-payee   { background: var(--ok-tint); color: var(--ok); }
.badge-attente { background: var(--run-tint); color: var(--run); }
.badge-retard  { background: var(--ko-tint); color: var(--ko); }
.stock-low { box-shadow: var(--clay), inset 0 0 0 2px var(--ko) !important; }

.draft-card { flex-direction: column !important; align-items: stretch !important; position: relative; }
.draft-total-val {
    position: absolute; top: 20px; right: 22px;
    font-size: 22px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums;
}
.sep { height: 1px; background: var(--ligne); margin: 20px 0; }

/* ════════════════════════════════════════
   MODALES (feuille montante)
════════════════════════════════════════ */
.modal-overlay {
    position: fixed; inset: 0; z-index: 9500; display: none; align-items: flex-end;
    background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal {
    width: 100%; max-height: 92vh; overflow-y: auto;
    background: var(--fond); border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 26px 24px 34px; box-shadow: 0 -14px 44px rgba(0, 0, 0, .35);
    animation: sheet-up .35s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal::before {
    content: ''; display: block; width: 44px; height: 5px; border-radius: 3px;
    background: var(--muted); opacity: .45; margin: -10px auto 22px;
}

/* ════════════════════════════════════════
   BARRE D'ACTION FLOTTANTE
════════════════════════════════════════ */
.action-bar, #bl-bar {
    background: var(--carte) !important; color: var(--texte) !important;
    border-radius: var(--r-lg) !important; box-shadow: var(--clay) !important;
    padding: 14px 18px !important; font-weight: 800;
}

/* ════════════════════════════════════════
   ASSISTANT TVA
════════════════════════════════════════ */
.tva-drop {
    border: 2px dashed var(--ligne); border-radius: var(--r-xl); padding: 34px 20px;
    text-align: center; cursor: pointer; background: var(--carte); box-shadow: var(--clay);
    transition: border-color .2s, background .25s;
}
.tva-drop:hover, .tva-drop-active { border-color: var(--accent) !important; background: var(--carte-2) !important; }
.tva-bank-tag {
    background: var(--ok-tint); color: var(--ok); border-radius: 999px; padding: 5px 12px;
    font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px;
}
.tva-stat {
    background: var(--carte); border-radius: var(--r-md); box-shadow: var(--clay-sm);
    padding: 13px 16px; text-align: center; font-family: inherit; font-weight: 800; font-size: 15px;
    display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums;
}
.tva-stat small { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tva-defaults-bar {
    background: var(--carte); border-radius: var(--r-md); box-shadow: var(--clay-sm);
    padding: 11px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.tva-sel, .tva-search, .tva-btn-ghost {
    background: var(--carte-2); color: var(--texte); border: 0; border-radius: 10px;
    box-shadow: var(--inset); font-family: inherit; font-weight: 700; outline: none;
}
.tva-sel { padding: 6px 9px; font-size: 12px; cursor: pointer; }
.tva-search { padding: 9px 13px; font-size: 13px; flex: 1; min-width: 140px; }
.tva-btn-ghost { padding: 8px 13px; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: var(--clay-sm); color: var(--muted); }
.tva-btn-ghost:hover { color: var(--texte); }
.tva-taux-zero { color: var(--muted); }
.tva-taux-low  { color: var(--sky-ink); }
.tva-taux-mid  { color: var(--lilac-ink); }
.tva-taux-high { color: var(--peach-ink); }
.tva-flt {
    padding: 7px 14px; border: 0; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 800;
    transition: transform .18s var(--bounce), background .25s;
}
.tva-flt:active { transform: scale(.95); }
.tva-flt-on { background: var(--ok); color: var(--ko-ink); }
.tva-flt-off, .tva-flt-rejet-off { background: var(--carte-2); color: var(--muted); box-shadow: var(--clay-sm); }
.tva-flt-off:hover, .tva-flt-rejet-off:hover { color: var(--texte); }
.tva-flt-rejet-on { background: var(--lilac-ink); color: #fff; }
.tva-btn-export {
    background: var(--ok-tint); color: var(--ok); border: 0; border-radius: 10px; padding: 9px 15px;
    font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; box-shadow: var(--clay-sm);
}
.tva-table {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;
    background: var(--carte); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--clay-sm);
}
.tva-table th, .tva-table td { padding: 9px 11px; border-bottom: 1px solid var(--ligne); text-align: left; }
.tva-table th { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tva-table tr:hover td { background: var(--carte-2) !important; }

/* ════════════════════════════════════════
   APERÇU & IMPRESSION (facture, BL, chargement)
════════════════════════════════════════ */
#preview-wrap {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: var(--fond); padding: 12px; overflow-y: auto;
}
.prev-actions .btn { box-shadow: var(--clay-sm); }
.inv-wrap {
    background: #fffdfa; width: min(210mm, 100%); min-height: 297mm; margin: 0 auto; padding: 20mm;
    color: #3f3a33; font-family: var(--font); font-size: 14px;
    display: flex; flex-direction: column; position: relative;
    border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.inv-wrap h1 {
    font-size: 46px; font-weight: 800; color: #241f19; letter-spacing: -.02em;
    line-height: 1; margin-bottom: 26px;
}
.inv-header-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    margin-bottom: 28px; font-size: 13.5px; line-height: 1.6;
}
.inv-header-grid b {
    display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em; color: #b5563a;
}
.inv-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.inv-table th {
    text-align: left; padding: 10px 6px; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em; color: #241f19;
    border-top: 2px solid #241f19; border-bottom: 1px solid #d8cfc2;
}
.inv-table td { padding: 13px 6px; border-bottom: 1px solid #ece5da; font-size: 13.5px; }
.inv-totals { margin-left: auto; width: 260px; margin-top: 20px; font-size: 13.5px; }
.inv-total-line { display: flex; justify-content: space-between; padding: 5px 0; }
.inv-total-final {
    display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px;
    border-top: 2px solid #241f19; font-size: 18px; font-weight: 800; color: #241f19;
}
.payment-box {
    margin-top: auto; padding: 22px 24px; border-radius: 10px; background: #f3e7db;
    display: flex; flex-direction: column; gap: 10px; font-size: 12px; line-height: 1.6;
}
.payment-box h3 { margin-bottom: 8px; font-size: 15px; font-weight: 800; color: #241f19; }
.payment-mentions { border-top: 1px solid #ded2c3; padding-top: 10px; width: 100%; font-size: 11px; color: #6b6259; }

@media print {
    body { background: #fff !important; color: #000 !important; margin: 0 !important; }
    #gp-rail, header, .sub-tabs, .action-bar, .page, .prev-actions, .modal-overlay, .toast, #toast-holder { display: none !important; }
    #gp-shell, #gp-main { display: block !important; }
    #preview-wrap { display: block !important; position: static !important; background: #fff !important; padding: 0 !important; }
    /* Hauteur libre : une facture de plus de onze lignes était coupée, avec
       ses mentions légales, sans rien signaler à l'écran. */
    .inv-wrap {
        width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important;
        margin: 0 auto !important; padding: 10mm 15mm !important; border-radius: 0 !important; box-shadow: none !important;
        overflow: visible !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    /* L'en-tête du tableau se répète sur chaque page, aucune ligne n'est
       coupée en deux, et le bloc de paiement reste d'un seul tenant. */
    .inv-table thead { display: table-header-group !important; }
    .inv-table tr, .inv-totals { break-inside: avoid !important; page-break-inside: avoid !important; }
    .payment-box { margin-top: 18px !important; break-inside: avoid !important; page-break-inside: avoid !important; }
    @page { margin: 10mm 0; }
    @page { size: A4 portrait; margin: 0; }
}

/* ── Barre latérale réduite en bandeau sur petit écran ────────────────────── */
@media (max-width: 900px) {
    #gp-shell { flex-direction: column; align-items: stretch; }
    #gp-rail {
        width: 100%; max-height: none; position: static; overflow: visible;
        border-radius: 0 0 var(--r-xl) var(--r-xl);
        flex-direction: row; align-items: center; gap: 8px; padding: 12px 14px;
    }
    #gp-rail .rail-logo { width: 40px; height: 40px; margin: 0; }
    #gp-rail nav { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
    #gp-rail nav::-webkit-scrollbar { display: none; }
    #gp-rail .rail-sep { display: none; }
    .rail-item { width: auto; flex: none; flex-direction: row; padding: 8px 12px; font-size: 12px; }
    .rail-item .ico { width: 26px; height: 26px; font-size: 14px; border-radius: 9px; }
    #gp-main { flex: none; width: auto; }
    .page { padding: 18px 16px 120px; }
    header { padding: 12px 16px; }
    .hd-title { font-size: 19px; }
    .sub-tabs { top: 62px; }
}

/* ════════════════════════════════════════
   ANALYSE EBE (onglet Compta → sous-onglet)
   Remplace intégralement l'ancienne section « ANALYSE EBE » de style.css,
   y compris son bloc @media print.
   Uniquement des jetons du thème : clair et sombre suivent d'eux-mêmes.
════════════════════════════════════════ */
:root { --ebe-serie-1: var(--sky-ink); --ebe-serie-2: var(--peach-ink); --ebe-serie-3: var(--mint-ink); }
.ebe-serie-1 { --ebe-c: var(--ebe-serie-1); }
.ebe-serie-2 { --ebe-c: var(--ebe-serie-2); }
.ebe-serie-3 { --ebe-c: var(--ebe-serie-3); }

.ebe-espace { flex: 1; }
.ebe-indice, .ebe-note { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ebe-siren { font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
b.ebe-neg, span.ebe-neg { color: var(--ko); }
.ebe-signe { display: none; }

/* ── Onglets internes : Analyse · Documents ─────────────────────────────── */
.ebe-onglets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ebe-onglet {
    border: 0; background: transparent; color: var(--muted); cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 8px 14px; border-radius: 10px;
    transition: transform .18s var(--bounce), background .25s, color .25s;
}
.ebe-onglet:hover { color: var(--texte); }
.ebe-onglet:active { transform: scale(.96); }
.ebe-onglet.actif { background: var(--carte); color: var(--texte); box-shadow: var(--clay-sm); }

/* ── Filtres ───────────────────────────────────────────────────────────── */
.card.ebe-controles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 12px 22px; align-items: start; padding: 14px 18px;
}
.ebe-ligne-indicateur { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ebe-ligne-indicateur label, .ebe-ligne-indicateur .section-title { margin: 0; }
.ebe-ligne-indicateur select { width: auto; padding: 8px 36px 8px 12px; font-size: 13px; border-radius: 12px; background-position: right 12px center; }
.ebe-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ebe-tete .section-title { margin: 0; }
.ebe-lien { border: 0; background: none; padding: 0; font-family: inherit; font-size: 11px; font-weight: 800; color: var(--accent); cursor: pointer; }
.ebe-lien:hover { color: var(--accent-fort); }
.ebe-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.ebe-puces .tva-flt { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; text-align: left; }
/* Sélection : le même vert clair que les pastilles « disponibles » des documents. */
.ebe-puces .tva-flt-on { background: var(--ok-tint); color: var(--ok); box-shadow: var(--clay-sm); }

.ebe-avis { border-radius: var(--r-md); padding: 12px 16px; margin: 4px 0 12px; font-size: 13px; box-shadow: var(--clay-sm); color: var(--texte); }
.ebe-avis-run { background: var(--run-tint); border-left: 4px solid var(--run); }
.ebe-avis-ko { background: var(--ko-tint); border-left: 4px solid var(--ko); }

/* ── Chiffres clés ─────────────────────────────────────────────────────── */
.ebe-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ebe-tuile { padding: 12px 14px; text-align: left; gap: 3px; }
.ebe-tuile b { font-size: 16px; white-space: nowrap; }
.ebe-sub { font-size: 11px; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 1100px) { .ebe-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ebe-tuiles { grid-template-columns: minmax(0, 1fr); } }

/* ── Carte tableau / courbes (aussi utilisée par l'onglet Documents) ───── */
.card.ebe-carte-tableau { display: block; padding: 0; overflow: hidden; }
.ebe-carte-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--ligne); }
.ebe-carte-tete .section-title { margin: 0; }
.ebe-segment { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--carte-2); box-shadow: var(--inset); }
.ebe-segment button {
    border: 0; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap;
    font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 9px;
    transition: background .25s, color .25s;
}
.ebe-segment button.actif { background: var(--carte); color: var(--texte); box-shadow: var(--clay-sm); }
.ebe-carte-tableau[data-vue="courbes"] #ebe-tableau, .ebe-carte-tableau[data-vue="tableau"] #ebe-graphe { display: none; }
.ebe-graphe { padding: 12px 16px 4px; }

.ebe-defile { overflow-x: auto; }
.ebe-carte-tableau .tva-table { box-shadow: none; border-radius: 0; }
.tva-table .ebe-d { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tva-table .ebe-c { text-align: center; }
.ebe-croise th, .ebe-croise td { padding: 8px 9px; }
.ebe-croise th:first-child, .ebe-croise td:first-child { padding-left: 14px; padding-right: 12px; }
.ebe-croise td.ebe-d { position: relative; }
.ebe-croise td.ebe-neg { color: var(--ko); background: var(--ko-tint); font-weight: 800; }
.ebe-croise td.ebe-vide { color: var(--muted); font-style: italic; font-size: 12px; }
.ebe-croise td.ebe-moy, .ebe-croise th.ebe-moy { font-weight: 800; background: var(--carte-2); }
.tva-table tr.ebe-total td { font-weight: 800; background: var(--carte-2); }
/* La colonne « Société » reste visible quand le tableau défile en largeur. */
.ebe-croise th:first-child, .ebe-croise td:first-child { position: sticky; left: 0; z-index: 1; background: var(--carte); white-space: nowrap; }
.ebe-croise tr.ebe-total td:first-child { background: var(--carte-2); }
.ebe-croise .ebe-pastille[class*="ebe-serie-"] { margin-right: 7px; }
/* ↗ vers la page du document source : discret, en coin de case */
.ebe-src { position: absolute; top: 2px; right: 3px; font-size: 9px; line-height: 1; color: var(--muted); opacity: .7; }
.ebe-src:hover { color: var(--accent); opacity: 1; }

.ebe-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; background: var(--carte-2); box-shadow: inset 0 0 0 1px var(--ligne); }
.ebe-pastille.ebe-neg { background: var(--ko-tint); box-shadow: inset 0 0 0 1.5px var(--ko); }
.ebe-pastille[class*="ebe-serie-"] { background: var(--ebe-c); box-shadow: none; margin-right: 0; }
.ebe-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; font-weight: 600; color: var(--muted); padding: 9px 16px; }
.ebe-legende-courbes { padding: 0 0 8px; }

.ebe-svg { display: block; width: 100%; height: auto; }
.ebe-grille { stroke: var(--ligne); stroke-width: 1; }
.ebe-axe { fill: var(--muted); font-size: 11px; font-weight: 700; font-family: var(--font); }
.ebe-zero { stroke: var(--muted); stroke-width: 1.4; }
.ebe-courbe { fill: none; stroke: var(--ebe-c); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.ebe-courbe.ebe-serie-2 { stroke-dasharray: 9 6; }
.ebe-courbe.ebe-serie-3 { stroke-dasharray: 2 6; }
.ebe-point { fill: var(--carte); stroke: var(--ebe-c); stroke-width: 2.2; }
.ebe-trait { display: inline-block; width: 22px; border-top: 3px solid var(--ebe-c); margin-right: 7px; }
.ebe-trait.ebe-serie-2 { border-top-style: dashed; }
.ebe-trait.ebe-serie-3 { border-top-style: dotted; }

.btn:disabled { opacity: .45; cursor: default; transform: none; }

/* Nom du fournisseur réel, à droite du nom générique du service. */
.chip .chip-f {
    margin-left: 6px; padding: 1px 6px; border-radius: 6px;
    background: var(--carte); color: var(--texte);
    font-size: 10px; font-weight: 800; letter-spacing: .01em;
    display: inline-block; max-width: 100%; overflow-wrap: anywhere;
}

/* ── Documents ─────────────────────────────────────────────────────────── */
.ebe-documents td { vertical-align: top; }
.ebe-documents td:first-child { white-space: nowrap; font-weight: 700; }
.ebe-documents a.badge-statut { cursor: pointer; }
.ebe-documents a.badge-statut:hover { filter: brightness(.95); }
.ebe-doc-autres { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; font-size: 11px; font-weight: 700; }
.ebe-doc-autres a { color: var(--muted); }
.ebe-doc-autres a:hover { color: var(--accent); }
.ebe-doc-autres a.ebe-doc-verif { color: var(--run); }
.ebe-doc-autres a.ebe-doc-absent { text-decoration: line-through; }
.ebe-hors { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }
.ebe-impression { display: none; }

/* Impression de l'analyse : A4, noir et blanc, sans navigation ni contrôles.
   La classe impression-ebe n'est posée que le temps d'imprimer cette vue :
   l'impression des factures et des BL reste inchangée. */
@media print {
    body.impression-ebe {
        --fond: #fff; --carte: #fff; --carte-2: #ececec; --texte: #000; --muted: #333; --ligne: #999;
        --ok: #000; --ko: #000; --run: #000; --ok-tint: #f6f6f6; --ko-tint: #d9d9d9; --run-tint: #fff;
        --ebe-serie-1: #000; --ebe-serie-2: #000; --ebe-serie-3: #000;
        --clay: none; --clay-sm: none; --inset: none;
        font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    body.impression-ebe #page-compta {
        display: block !important; animation: none !important; max-width: none !important;
        padding: 12mm 12mm 10mm !important; margin: 0 !important;
    }
    body.impression-ebe #view-compta-bilan, body.impression-ebe .ebe-ecran, body.impression-ebe .ebe-src,
    body.impression-ebe #ebe-vue-documents, body.impression-ebe #preview-wrap { display: none !important; }
    body.impression-ebe #ebe-vue-analyse, body.impression-ebe #ebe-tableau, body.impression-ebe #ebe-graphe { display: block !important; }
    body.impression-ebe .ebe-impression { display: block !important; }
    body.impression-ebe .section-title { color: #000; font-size: 8pt; margin: 0; }
    body.impression-ebe .card { border: .5pt solid #000; border-radius: 0; padding: 5pt 8pt; margin-bottom: 5pt; break-inside: avoid; box-shadow: none; }
    body.impression-ebe .card.ebe-carte-tableau { padding: 0; }
    body.impression-ebe .ebe-carte-tete { padding: 3pt 6pt; border-bottom: .5pt solid #000; }
    body.impression-ebe .ebe-graphe { padding: 4pt 6pt; border-top: .5pt solid #000; }
    body.impression-ebe .ebe-avis { border: .5pt solid #000; border-radius: 0; padding: 4pt 8pt; font-size: 8.5pt; box-shadow: none; }
    body.impression-ebe .ebe-tuiles { grid-template-columns: repeat(4, 1fr); gap: 5pt; }
    body.impression-ebe .tva-stat { border: .5pt solid #000; border-radius: 0; padding: 4pt 6pt; box-shadow: none; }
    body.impression-ebe .ebe-tuile b { font-size: 11.5pt; }
    body.impression-ebe .ebe-sub { font-size: 7.5pt; }
    body.impression-ebe .ebe-defile { overflow: visible; }
    body.impression-ebe .tva-table { font-size: 8pt; }
    body.impression-ebe .tva-table th, body.impression-ebe .tva-table td { padding: 3pt 4pt; }
    body.impression-ebe .ebe-croise th:first-child, body.impression-ebe .ebe-croise td:first-child { position: static; }
    body.impression-ebe .ebe-croise td.ebe-neg { font-weight: 800; }
    body.impression-ebe .ebe-signe { display: inline; }
    body.impression-ebe .ebe-svg { max-height: 45mm; }
    body.impression-ebe .ebe-legende { font-size: 7.5pt; padding: 3pt 6pt; }
    .ebe-entete-impression { border-bottom: 2pt solid #000; padding-bottom: 6pt; margin-bottom: 8pt; }
    .ebe-entete-impression .t { font-size: 14pt; font-weight: 800; }
    .ebe-entete-impression .d { font-size: 8.5pt; margin-top: 2pt; }
    .ebe-entete-impression dl { display: grid; grid-template-columns: auto 1fr; gap: 1.5pt 10pt; margin-top: 6pt; font-size: 9pt; }
    .ebe-entete-impression dt { font-weight: 800; }
    body.impression-ebe .ebe-pied-impression, .ebe-pied-impression {
        display: flex !important; justify-content: space-between; gap: 10pt; margin-top: 5pt;
        border-top: .5pt solid #000; padding-top: 3pt; font-size: 7pt; break-inside: avoid;
    }
    .ebe-pied-impression span:last-child { white-space: nowrap; }
}

/* ── Barres de défilement ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--carte-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ============================================================================
   MODULE « MES APPS » — thème « Clay » (clair / sombre)
   Barre latérale menthe, tuiles pastel en relief, verre dépoli, rebond au toucher.
   Tout est confiné à #page-dash (+ .dash-overlay pour la fiche service).
   Polices système uniquement (ui-rounded → SF Pro Rounded sur Apple).
   ========================================================================== */

@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slidein { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
html[data-anim="off"] *, html[data-anim="off"] *::before, html[data-anim="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── Jetons ───────────────────────────────────────────────────────────────── */
#page-dash, .dash-overlay {
  --d-bg: var(--fond); --d-side: var(--side); --d-side-text: var(--side-text);
  --d-card: var(--carte); --d-card2: var(--carte-2);
  --d-text: var(--texte); --d-muted: var(--muted); --d-line: var(--ligne);
  --d-peach: var(--peach); --d-sun: var(--sun); --d-sky: var(--sky); --d-mint: var(--mint); --d-lilac: var(--lilac);
  --d-accent: var(--accent); --d-accent-text: var(--accent-ink);
  --d-ok: var(--ok); --d-ok-tint: var(--ok-tint); --d-ko: var(--ko); --d-ko-tint: var(--ko-tint);
  --d-run: var(--run); --d-run-tint: var(--run-tint); --d-none: var(--none); --d-none-tint: var(--none-tint);
  --d-clay: var(--clay); --d-clay-sm: var(--clay-sm); --d-inset: var(--inset); --d-glass: var(--glass);
  --d-font: var(--font); --d-bounce: var(--bounce);
  --d-top: 92px; /* hauteur de l'en-tête, remise à l'échelle du zoom .75 du module */
}

/* ── Ossature : #page-dash = [barre latérale | contenu] (flex) ─────────────── */
#page-dash {
  zoom: .75; /* body est à 1.6 : le module travaille à 1.2 effectif */
  font-family: var(--d-font); color: var(--d-text);
  background: var(--d-bg);
  transition: background .3s, color .3s;
  -webkit-font-smoothing: antialiased;
}
#page-dash.active {
  display: flex; align-items: flex-start;
  padding: 0; padding-bottom: 60px; max-width: none; margin: 0; min-height: 90vh;
}
#page-dash * { box-sizing: border-box; }
#page-dash a { color: inherit; text-decoration: none; }
#page-dash a:hover { opacity: .85; }
#page-dash button { font-family: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
#page-dash h1, #page-dash h2, #page-dash h3, #page-dash h4 { text-transform: none; letter-spacing: normal; }
#page-dash label { display: flex; font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: normal; text-transform: none; margin: 0; }
#page-dash ul, #page-dash ol { margin: 0; padding-left: 22px; }
#page-dash ::selection { background: var(--d-accent); color: var(--d-accent-text); }

/* Teintes réutilisables */
#page-dash .tint-peach, .dash-overlay .tint-peach { background: var(--d-peach); }
#page-dash .tint-sun, .dash-overlay .tint-sun { background: var(--d-sun); }
#page-dash .tint-sky, .dash-overlay .tint-sky { background: var(--d-sky); }
#page-dash .tint-mint, .dash-overlay .tint-mint { background: var(--d-mint); }
#page-dash .tint-lilac, .dash-overlay .tint-lilac { background: var(--d-lilac); }
#page-dash .tint-ok { background: var(--d-ok-tint); }
#page-dash .tint-ko { background: var(--d-ko-tint); }
#page-dash .tint-none { background: var(--d-none-tint); }
#page-dash .sw, .dash-overlay .sw { width: 10px; height: 10px; border-radius: 4px; display: inline-block; flex: none; }
#page-dash .sw-peach { background: #e8907a; } #page-dash .sw-sun { background: var(--donut-rest); } #page-dash .sw-sky { background: #6f8fc4; }
#page-dash .sw-mint { background: #5e9f7a; } #page-dash .sw-lilac { background: #9a86c9; } #page-dash .sw-accent { background: var(--d-accent); }
#page-dash .c-ok { color: var(--d-ok) !important; } #page-dash .c-ko { color: var(--d-ko) !important; }

/* Bouton rond en relief (retour, thème, cloche) */
#page-dash .clay-btn, .dash-overlay .clay-btn {
  width: 44px; height: 44px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--d-card); color: var(--d-text); font-size: 17px; line-height: 1;
  box-shadow: var(--d-clay-sm); position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .18s var(--d-bounce);
}
#page-dash .clay-btn:hover, .dash-overlay .clay-btn:hover { transform: translateY(-1px); }
#page-dash .clay-btn:active, .dash-overlay .clay-btn:active { transform: scale(.9); }
#page-dash .clay-btn.sm, .dash-overlay .clay-btn.sm { width: 38px; height: 38px; border-radius: 13px; font-size: 16px; }
#page-dash .badge-n {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--d-ko); color: var(--ko-ink); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* ── Barre latérale ───────────────────────────────────────────────────────── */
#dash-titre { display: none; } /* barre latérale du module fusionnée dans le rail global (#rail-dash-slot) */

/* Pastille d'état CI */
#page-dash .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--d-none); }
#page-dash .dot.ci-ok, #page-dash .ci-ok .dot { background: var(--d-ok); }
#page-dash .dot.ci-ko, #page-dash .ci-ko .dot { background: var(--d-ko); }
#page-dash .dot.ci-run, #page-dash .ci-run .dot { background: var(--d-run); }
#page-dash .ci {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; flex: none;
  font-size: 12.5px; font-weight: 800; white-space: nowrap; background: var(--d-none-tint); color: var(--d-none);
}
#page-dash .ci-ok { background: var(--d-ok-tint); color: var(--d-ok); }
#page-dash .ci-ko { background: var(--d-ko-tint); color: var(--d-ko); }
#page-dash .ci-run { background: var(--d-run-tint); color: var(--d-run); }
#page-dash .ci-big { padding: 12px 16px; border-radius: 20px; gap: 12px; font-size: 15px; box-shadow: var(--d-clay-sm); }
#page-dash .ci-big .dot { width: 12px; height: 12px; }
#page-dash .ci-lbl { display: flex; flex-direction: column; line-height: 1.25; }
#page-dash .ci-lbl small { font-size: 12px; font-weight: 700; color: var(--d-muted); }

/* ── Contenu ──────────────────────────────────────────────────────────────── */
#dash-contenu { flex: 1 1 0; min-width: 0; width: 0; padding: 0 28px; overflow-x: clip; }
#dash-contenu .topbar {
  position: sticky; top: var(--d-top); z-index: 20; margin: 0 -28px; padding: 16px 28px;
  background: var(--d-glass); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--d-line);
}
#dash-contenu .tb-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#dash-contenu .tb-title h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; color: var(--d-text); }
#dash-contenu .tb-sub { font-size: 13px; font-weight: 700; color: var(--d-muted); }
#dash-contenu .tb-search {
  display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 44px; width: 260px; border-radius: 18px;
  background: var(--d-card); box-shadow: var(--d-clay-sm); color: var(--d-muted); font-size: 14px; font-weight: 600; flex: none;
}
#dash-contenu .tb-search input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none;
  font: inherit; color: var(--d-text); border-radius: 0;
}
#dash-contenu .tb-search input::placeholder { color: var(--d-muted); }
#dash-contenu .tb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
#dash-contenu .dash-body { padding-top: 22px; display: flex; flex-direction: column; gap: 18px; }

/* Tuile en relief */
#page-dash .tile {
  background: var(--d-card); border-radius: 26px; box-shadow: var(--d-clay); padding: 20px 22px; min-width: 0;
  transition: background .3s, box-shadow .3s;
}
#page-dash .rise { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
#page-dash .tile-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
#page-dash .tile-h b { font-size: 16px; font-weight: 800; }
#page-dash .tile-h span { font-size: 12px; font-weight: 700; color: var(--d-muted); text-align: right; }
#page-dash .empty-note { font-size: 13.5px; font-weight: 600; color: var(--d-muted); }

/* Grilles */
#page-dash .hero-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
#page-dash .kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
#page-dash .two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
#page-dash .three-col { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 18px; align-items: start; }
#page-dash .pub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }

/* Bandeau d'accueil */
#page-dash .hero { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; padding: 24px 26px; }
#page-dash .hero-img { width: 150px; height: 150px; border-radius: 24px; object-fit: cover; background: #fff; box-shadow: var(--d-clay-sm); }
#page-dash .hero-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#page-dash .hero-txt h3 { margin: 0; font-size: 24px; font-weight: 800; }
#page-dash .hero-txt p { margin: 0; font-size: 15px; font-weight: 600; color: var(--d-muted); line-height: 1.45; }
#page-dash .cta, .dash-overlay .cta {
  align-self: flex-start; margin-top: 6px; border: 0; border-radius: 16px; padding: 12px 20px; cursor: pointer;
  background: var(--d-accent); color: var(--d-accent-text); font: inherit; font-size: 14px; font-weight: 800; display: inline-block;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .12); transition: transform .18s var(--d-bounce), box-shadow .18s;
}
#page-dash .cta:active, .dash-overlay .cta:active { transform: translateY(3px) scale(.97); box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.dash-overlay .cta.ghost { background: var(--d-card2); color: var(--d-text); box-shadow: var(--d-clay-sm); }

/* Donut */
#page-dash .donut-row { display: flex; align-items: center; gap: 18px; }
#page-dash .donut {
  width: 104px; height: 104px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--d-clay-sm); background: conic-gradient(var(--d-accent) 0 calc(var(--p) * 1%), var(--donut-rest) calc(var(--p) * 1%) 100%);
}
#page-dash .donut > div { width: 70px; height: 70px; border-radius: 50%; background: var(--d-card); display: flex; align-items: center; justify-content: center; box-shadow: var(--d-inset); }
#page-dash .donut b { font-size: 19px; font-weight: 800; }
#page-dash .donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; font-weight: 700; min-width: 0; }
#page-dash .donut-legend span { display: flex; align-items: center; gap: 8px; }
#page-dash .donut-legend small { font-size: 12px; font-weight: 600; color: var(--d-muted); }

/* KPI */
#page-dash .kpi { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
#page-dash .kpi-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--d-card); box-shadow: var(--d-clay-sm); display: flex; align-items: center; justify-content: center; font-size: 20px; }
#page-dash .kpi-lab { font-size: 13.5px; font-weight: 700; color: var(--d-muted); }
#page-dash .kpi b { font-size: 30px; font-weight: 800; line-height: 1; }
#page-dash .kpi b.kpi-txt { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
#page-dash .kpi small { font-size: 12.5px; font-weight: 700; }

/* Lignes d'apps */
#page-dash .rows { display: flex; flex-direction: column; gap: 10px; }
/* Sous-titres de groupe dans une liste de lignes (Applis / Sites internet) */
#page-dash .rows .rows-grp {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--d-muted); margin: 6px 2px 0;
}
#page-dash .rows .rows-grp:first-child { margin-top: 0; }
#page-dash .row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 20px;
  background: var(--d-card2); box-shadow: var(--d-clay-sm); cursor: pointer; animation: rise .5s cubic-bezier(.2, .8, .2, 1) both;
  transition: transform .2s var(--d-bounce), background .3s;
}
#page-dash .row:hover { transform: translateY(-2px); opacity: 1; }
#page-dash .row:active { transform: scale(.98); }
#page-dash .row-ico, .dash-overlay .row-ico {
  width: 46px; height: 46px; border-radius: 15px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 21px; box-shadow: var(--d-clay-sm); background: var(--d-card);
}
.dash-overlay .row-ico.big { width: 64px; height: 64px; border-radius: 20px; font-size: 30px; }
#page-dash .row-txt { display: flex; flex-direction: column; min-width: 0; }
#page-dash .row-txt b { font-size: 15px; font-weight: 800; }
#page-dash .row-txt small { font-size: 12.5px; font-weight: 600; color: var(--d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cases « prochaines actions » */
#page-dash .todos { display: flex; flex-direction: column; gap: 10px; }
#page-dash .todo {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: var(--d-card2); box-shadow: var(--d-clay-sm);
  cursor: pointer; transition: transform .18s var(--d-bounce);
}
#page-dash .todo:active { transform: scale(.98); }
#page-dash input[type="checkbox"][data-todo] {
  -webkit-appearance: none; appearance: none; display: block; width: 22px; height: 22px; margin: 1px 0 0; flex: none; border: 0; border-radius: 8px;
  background: var(--d-card); box-shadow: var(--d-clay-sm); cursor: pointer; position: relative; transition: background .2s, transform .18s var(--d-bounce);
}
#page-dash input[type="checkbox"][data-todo]:checked { background: var(--d-accent); transform: scale(1.05); }
#page-dash input[type="checkbox"][data-todo]:checked::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--d-accent-text); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
#page-dash .todo-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
#page-dash .todo-txt small { font-size: 12px; font-weight: 700; color: var(--d-muted); }
#page-dash .todo.done .todo-txt > span { text-decoration: line-through; color: var(--d-muted); }

/* En-tête d'application */
#page-dash .app-head { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 24px 26px; }
#page-dash .app-big { width: 92px; height: 92px; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 44px; background: var(--d-card); box-shadow: var(--d-clay); }
#page-dash .app-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#page-dash .app-txt h3 { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.1; }
#page-dash .app-txt p { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--d-muted); }
#page-dash .app-side { display: flex; flex-direction: column; gap: 10px; min-width: 190px; }
#page-dash .mini { border-radius: 20px; padding: 12px 16px; background: var(--d-card); box-shadow: var(--d-clay-sm); display: flex; flex-direction: column; line-height: 1.3; }
#page-dash .mini a { display: flex; flex-direction: column; }
#page-dash .mini b { font-size: 14.5px; font-weight: 800; }
#page-dash .mini small { font-size: 12px; font-weight: 700; color: var(--d-muted); overflow-wrap: anywhere; }

/* Puces */
#page-dash .chips, .dash-overlay .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
#page-dash .chip, .dash-overlay .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 14px; cursor: default;
  font-size: 12.5px; font-weight: 800; background: var(--d-card); color: var(--d-text); box-shadow: var(--d-clay-sm);
  white-space: normal; text-align: left; flex-wrap: wrap; max-width: 100%; transition: transform .18s var(--d-bounce);
}
#page-dash button.chip, #page-dash a.chip, .dash-overlay a.chip { cursor: pointer; font-family: inherit; }
#page-dash button.chip:hover, #page-dash a.chip:hover, .dash-overlay a.chip:hover { transform: translateY(-2px); opacity: 1; }
#page-dash button.chip:active, #page-dash a.chip:active { transform: scale(.93); }

/* Contrôle segmenté */
/* Fraîcheur de la fiche affichée (sous les volets Technique/Marketing/Publication) */
#page-dash .fiche-date { margin-top: 8px; font-size: 12px; color: var(--d-muted); }
#page-dash .fiche-date.stale { color: var(--run); font-weight: 700; }

#page-dash .seg {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(460px, 100%); padding: 5px; border-radius: 20px;
  background: var(--d-card2); box-shadow: var(--d-inset);
}
#page-dash .seg-thumb {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--n)); border-radius: 15px;
  background: var(--d-card); box-shadow: var(--d-clay-sm); transform: translateX(calc(var(--i) * 100%)); transition: transform .35s cubic-bezier(.34, 1.3, .64, 1);
}
#page-dash .seg button {
  position: relative; border: 0; background: transparent; padding: 11px 0; border-radius: 15px; cursor: pointer;
  font-size: 14px; font-weight: 800; color: var(--d-muted); transition: color .25s, transform .18s var(--d-bounce);
}
#page-dash .seg button.active { color: var(--d-text); }
#page-dash .seg button:active { transform: scale(.95); }

/* Faits clés */
#page-dash .facts { display: flex; flex-direction: column; gap: 8px; }
#page-dash .fact { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--d-card2); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
#page-dash .fact span:first-child { font-weight: 800; color: var(--d-muted); }
#page-dash .fact span:last-child { font-weight: 600; }
#page-dash .fact a { text-decoration: underline; text-underline-offset: 2px; }
#page-dash .resume { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; }

/* Services par famille */
#page-dash .fam { margin-top: 14px; }
#page-dash .fam:first-of-type { margin-top: 0; }
#page-dash .fam-h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--d-muted); margin-bottom: 8px; }

/* Publication */
#page-dash .store-h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
#page-dash .store-h b { font-size: 16px; font-weight: 800; display: block; }
#page-dash .store-h small { font-size: 13px; font-weight: 700; color: var(--d-muted); }
#page-dash .note { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--d-card2); font-size: 13.5px; line-height: 1.5; }
#page-dash .note b { display: block; font-weight: 800; margin-bottom: 2px; }
#page-dash .note p { margin: 0; font-weight: 600; color: var(--d-muted); }

/* Marketing : cap & jalons */
#page-dash .cap-label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--d-muted); margin-bottom: 6px; }
#page-dash .cap-model { font-size: 17px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
#page-dash .jalons { display: flex; flex-direction: column; gap: 10px; }
#page-dash .jalon { font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; }
#page-dash .jalon b { font-weight: 800; }
#page-dash .jalon span { font-weight: 600; color: var(--d-muted); }

/* Fiche dépliable (Markdown) */
#page-dash .fiche { padding: 0; overflow: hidden; }
#page-dash .fiche-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 22px; border: 0; background: transparent; cursor: pointer; text-align: left;
}
#page-dash .fiche-t { display: flex; flex-direction: column; gap: 2px; }
#page-dash .fiche-t b { font-size: 15px; font-weight: 800; }
#page-dash .fiche-t small { font-size: 13px; font-weight: 600; color: var(--d-muted); }
#page-dash .chev { padding: 9px 14px; border-radius: 14px; background: var(--d-card); box-shadow: var(--d-clay-sm); font-size: 13px; font-weight: 800; flex: none; transition: transform .18s var(--d-bounce); }
#page-dash .fiche-toggle:active .chev { transform: scale(.94); }
#page-dash .fiche:not(.open) > .toc, #page-dash .fiche:not(.open) > .md { display: none; }
#page-dash .fiche.open .chev::after { content: " ▴"; }
#page-dash .fiche:not(.open) .chev::after { content: " ▾"; }
#page-dash .toc { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 22px 14px; }
#page-dash .toc a { font-size: 12px; font-weight: 700; color: var(--d-muted); }
#page-dash .toc a:hover { color: var(--d-text); opacity: 1; }
#page-dash .toc a.lvl-3 { padding-left: 12px; opacity: .8; }
#page-dash .md { margin: 0 6px 6px; padding: 8px 20px 20px; border-radius: 22px; background: var(--d-card); font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; }
#page-dash .md h1, #page-dash .md h2, #page-dash .md h3, #page-dash .md h4 { font-weight: 800; color: var(--d-text); margin: 26px 0 10px; scroll-margin-top: 140px; }
#page-dash .md h1 { font-size: 22px; } #page-dash .md h2 { font-size: 18px; border-bottom: 1px solid var(--d-line); padding-bottom: 6px; } #page-dash .md h3 { font-size: 16px; }
#page-dash .md p { margin: 10px 0; text-wrap: pretty; }
#page-dash .md li { margin: 4px 0; }
#page-dash .md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--d-card2); padding: 1px 6px; border-radius: 6px; overflow-wrap: normal; }
#page-dash .md pre { background: var(--d-card2); border-radius: 16px; padding: 14px 16px; overflow: auto; }
#page-dash .md pre code { background: none; padding: 0; }
#page-dash .md blockquote { margin: 14px 0; padding: 10px 16px; border-radius: 16px; background: var(--d-card2); color: var(--d-muted); }
#page-dash .md table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
#page-dash .md th, #page-dash .md td { border-bottom: 1px solid var(--d-line); padding: 8px 10px; text-align: left; vertical-align: top; }
#page-dash .md th { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--d-muted); }
#page-dash .md a { text-decoration: underline; text-underline-offset: 2px; }
#page-dash .md .anchor { opacity: 0; margin-left: 6px; font-size: .8em; text-decoration: none; }
#page-dash .md h1:hover .anchor, #page-dash .md h2:hover .anchor, #page-dash .md h3:hover .anchor, #page-dash .md h4:hover .anchor { opacity: .6; }

/* ── Catalogue ────────────────────────────────────────────────────────────── */
#page-dash .cat-nav { display: flex; flex-wrap: wrap; gap: 8px; }
#page-dash .legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--d-muted); }
#page-dash .badge, .dash-overlay .badge { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 8px; background: var(--d-none-tint); color: var(--d-none); }
#page-dash .badge-requis, .dash-overlay .badge-requis { background: var(--d-ko-tint); color: var(--d-ko); }
#page-dash .badge-gratuit, .dash-overlay .badge-gratuit { background: var(--d-ok-tint); color: var(--d-ok); }
#page-dash .cat-section { scroll-margin-top: 140px; }
#page-dash .cat-section h2 { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; font-size: 15px; font-weight: 800; }
#page-dash .svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
#page-dash .svc-card {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px; border: 0; border-radius: 22px; cursor: pointer;
  transition: transform .2s var(--d-bounce), background .3s;
}
#page-dash .svc-card:hover { transform: translateY(-3px); }
#page-dash .svc-card:active { transform: scale(.98); }
#page-dash .svc-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#page-dash .svc-txt b { font-size: 14.5px; font-weight: 800; }
#page-dash .svc-txt small { font-size: 12.5px; font-weight: 600; color: var(--d-muted); line-height: 1.45; }
#page-dash .svc-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
#page-dash .svc-meta em { font-style: normal; font-size: 13px; letter-spacing: 2px; }

/* ── Fiche service (panneau latéral) ──────────────────────────────────────── */
.dash-overlay {
  position: fixed; inset: 0; z-index: 10000; background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; justify-content: flex-end; animation: fadein .2s ease both; zoom: .75;
  font-family: var(--d-font); color: var(--d-text);
}
/* Sur grand écran, le module « Mes apps » retrouve une échelle proche du reste
   du site (le .75 ci-dessus est pensé pour téléphone/tablette : 1.2 effectif).
   À .9 le module travaille à 1.44 effectif ; l'en-tête collant se recale en
   conséquence : 92px × .75 ÷ .9 ≈ 77px. */
@media (min-width: 1200px) {
  #page-dash, .dash-overlay { zoom: .9; }
  #page-dash { --d-top: 77px; }
}
.dash-sheet {
  width: min(520px, 100%); height: 100%; overflow: auto; padding: 22px 26px 40px;
  background: var(--d-bg); border-radius: 34px 0 0 34px; box-shadow: -10px 0 40px rgba(0, 0, 0, .2);
  animation: slidein .35s cubic-bezier(.2, .8, .2, 1) both;
}
.dash-sheet * { box-sizing: border-box; }
.dash-sheet .close-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.dash-sheet .grow { flex: 1; }
.dash-sheet .sheet-nav { display: flex; align-items: center; gap: 8px; }
.dash-sheet .pos { font-size: 12px; font-weight: 800; color: var(--d-muted); }
.dash-sheet .sheet-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 24px; background: var(--d-card); box-shadow: var(--d-clay); }
.dash-sheet h2 { margin: 0; font-size: 20px; font-weight: 800; text-transform: none; letter-spacing: normal; color: var(--d-text); }
.dash-sheet .svc-cat { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--d-muted); }
.dash-sheet h3 { margin: 22px 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--d-muted); }
.dash-sheet p, .dash-sheet li, .dash-sheet dd { margin: 0; font-size: 14px; line-height: 1.6; font-weight: 600; }
.dash-sheet ul { margin: 0; padding-left: 20px; }
.dash-sheet li { margin: 4px 0; }
.dash-sheet dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-sheet dt { font-weight: 800; font-size: 14px; padding: 10px 14px 0; border-radius: 16px 16px 0 0; background: var(--d-card); }
.dash-sheet dd { padding: 2px 14px 10px; border-radius: 0 0 16px 16px; background: var(--d-card); color: var(--d-muted); }
.dash-sheet .sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.dash-sheet a { color: inherit; text-decoration: none; }

/* ── Réactif (tablette portrait / téléphone) ──────────────────────────────── */
@media (max-width: 1180px) {
  #page-dash .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-dash .three-col { grid-template-columns: 1fr 1fr; }
  #page-dash .three-col > .tile:last-child { grid-column: 1 / -1; }
  #page-dash .hero-row { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  #page-dash.active { flex-direction: column; align-items: stretch; }
  #dash-titre { width: 100%; max-width: 100%; min-width: 0; align-self: auto; position: static; border-radius: 0 0 30px 30px; padding: 14px 16px 18px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  #dash-titre .side-id { flex-direction: row; padding: 0; gap: 10px; }
  #dash-titre .avatar { width: 44px; height: 44px; }
  #dash-titre .side-nav { flex-direction: row; overflow-x: auto; width: 100%; gap: 6px; scrollbar-width: none; padding-bottom: 2px; }
  #dash-titre .side-nav::-webkit-scrollbar { display: none; }
  #dash-titre .side-label { display: none; }
  #dash-titre .nav-item { width: auto; flex: none; padding: 8px 12px; font-size: 13.5px; }
  #dash-titre .side-card { display: none; }
  #dash-contenu { flex: none; width: auto; padding: 0 18px; }
  #dash-contenu .topbar { position: static; margin: 0 -18px; padding: 14px 18px; flex-wrap: wrap; }
  #dash-contenu .tb-search { width: 100%; order: 3; }
  #page-dash .two-col, #page-dash .pub-grid, #page-dash .three-col { grid-template-columns: 1fr; }
  #page-dash .app-head { grid-template-columns: 72px minmax(0, 1fr); }
  #page-dash .app-big { width: 72px; height: 72px; font-size: 34px; border-radius: 22px; }
  #page-dash .app-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  #page-dash .app-side > * { flex: 1 1 180px; }
  #page-dash .hero { grid-template-columns: 110px 1fr; }
  #page-dash .hero-img { width: 110px; height: 110px; }
}
@media (max-width: 600px) {
  #page-dash .kpi-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  #page-dash .hero { grid-template-columns: 1fr; }
  #page-dash .hero-img { display: none; }
  #page-dash .row { grid-template-columns: 40px minmax(0, 1fr); }
  #page-dash .row .ci { grid-column: 2; justify-self: start; }
  #page-dash .fact { grid-template-columns: 1fr; gap: 2px; }
  .dash-sheet { border-radius: 0; }
}