/* ════════════════════════════════════════════════════════════════
   Comité de quartier — identité visuelle
   Vert sapin (structure) · jaune tournesol (attention, fête)
   brun châtaigne (texte) · lin (fond)
   ════════════════════════════════════════════════════════════════ */

html:root {
    --cq-vert: #2F6B47;
    --cq-vert-fonce: #1E4A31;
    --cq-vert-clair: #DCEAD7;
    --cq-jaune: #F2B930;
    --cq-jaune-clair: #FBEDC4;
    --cq-brun: #7A5233;
    --cq-brun-clair: #EEDFCC;
    --cq-encre: #3A2A1D;
    --cq-encre-douce: #7B6653;
    --cq-lin: #F4EDE0;
    --cq-papier: #FFFCF6;
    --cq-trait: #E5D7C0;
    --cq-rouge: #B5432A;

    --cq-titres: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
    --cq-texte: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Polices de MudBlazor (spécificité html:root > :root du thème). */
    --mud-typography-default-family: var(--cq-texte);
    --mud-typography-body1-family: var(--cq-texte);
    --mud-typography-body2-family: var(--cq-texte);
    --mud-typography-button-family: var(--cq-texte);
    --mud-typography-caption-family: var(--cq-texte);
    --mud-typography-subtitle1-family: var(--cq-texte);
    --mud-typography-subtitle2-family: var(--cq-texte);
    --mud-typography-overline-family: var(--cq-texte);
    --mud-typography-h1-family: var(--cq-titres);
    --mud-typography-h2-family: var(--cq-titres);
    --mud-typography-h3-family: var(--cq-titres);
    --mud-typography-h4-family: var(--cq-titres);
    --mud-typography-h5-family: var(--cq-titres);
    --mud-typography-h6-family: var(--cq-titres);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--cq-texte);
    background: var(--cq-lin);
    color: var(--cq-encre);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: var(--cq-titres) !important;
    letter-spacing: -0.01em;
}

.mud-typography-h4 { font-weight: 700 !important; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem) !important; }
.mud-typography-h5 { font-weight: 700 !important; }
.mud-typography-h6 { font-weight: 650 !important; font-size: 1.15rem !important; }

a { color: var(--cq-vert); }

:focus-visible { outline: 3px solid var(--cq-jaune); outline-offset: 2px; border-radius: 8px; }

/* ── Écran de chargement ── */
.chargement {
    height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; color: var(--cq-vert); font-family: var(--cq-titres); font-weight: 600; font-size: 1.1rem;
}
.chargement img { width: 72px; height: 72px; border-radius: 20px; animation: cq-respire 1.6s ease-in-out infinite; }
@keyframes cq-respire { 50% { transform: scale(1.06) rotate(-3deg); } }

#blazor-error-ui {
    background: var(--cq-jaune-clair); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none;
    left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 2000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ════════════════ Structure de l'application ════════════════ */

.cq-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
}

.cq-lateral {
    position: sticky; top: 0; height: 100vh;
    background: var(--cq-vert-fonce);
    color: var(--cq-lin);
    display: flex; flex-direction: column;
    padding: 22px 14px 16px;
    gap: 22px;
}

.cq-marque {
    display: flex; align-items: center; gap: 12px; padding: 0 8px;
    color: inherit; text-decoration: none;
    font-family: var(--cq-titres); font-weight: 700; font-size: 1.2rem; line-height: 1.05;
}
.cq-marque img { width: 42px; height: 42px; border-radius: 13px; }
.cq-marque small { font-weight: 500; font-size: 0.85rem; opacity: 0.75; }

.cq-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cq-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 999px;
    color: rgba(244, 237, 224, 0.82); text-decoration: none; font-weight: 600;
    transition: background-color .15s, color .15s;
}
.cq-nav a:hover { background: rgba(244, 237, 224, 0.08); color: var(--cq-lin); }
.cq-nav a.active { background: var(--cq-jaune); color: var(--cq-encre); }
.cq-nav a .mud-icon-root { font-size: 1.3rem; }
.cq-nav-separateur { height: 1px; background: rgba(244, 237, 224, 0.14); margin: 8px 12px; }

.cq-pastille {
    margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    background: var(--cq-jaune); color: var(--cq-encre);
    font-size: 0.75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.cq-nav a.active .cq-pastille { background: var(--cq-encre); color: var(--cq-jaune); }

.cq-moi {
    display: flex; align-items: center; gap: 10px; padding: 10px 8px 0;
    border-top: 1px solid rgba(244, 237, 224, 0.14);
}
.cq-moi-nom { flex: 1; font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-moi .mud-icon-button { color: rgba(244, 237, 224, 0.75) !important; }

.cq-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cq-jaune); color: var(--cq-encre);
    font-family: var(--cq-titres); font-weight: 700; font-size: 0.85rem;
}

.cq-contenu { padding: 28px clamp(16px, 3vw, 40px) 56px; max-width: 1200px; width: 100%; margin: 0 auto; }
.cq-contenu-seul { padding: 0; max-width: none; }

.cq-entete-mobile, .cq-bas { display: none; }

@media (max-width: 959.98px) {
    .cq-app { grid-template-columns: minmax(0, 1fr); }
    .cq-lateral { display: none; }

    .cq-entete-mobile {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 30;
        padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
        background: color-mix(in srgb, var(--cq-lin) 88%, transparent);
        backdrop-filter: blur(10px);
        color: var(--cq-encre);
    }
    .cq-marque-petite { padding: 0; font-size: 1.05rem; }
    .cq-marque-petite img { width: 32px; height: 32px; border-radius: 10px; }

    .cq-contenu { padding: 6px 14px 104px; }

    .cq-bas {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; z-index: 40; left: 10px; right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        background: var(--cq-vert-fonce); border-radius: 22px;
        padding: 6px; box-shadow: 0 10px 30px -10px rgba(30, 74, 49, 0.55);
    }
    .cq-bas a {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 7px 2px 6px; border-radius: 16px;
        color: rgba(244, 237, 224, 0.75); text-decoration: none;
        font-size: 0.7rem; font-weight: 700;
    }
    .cq-bas a.active { background: var(--cq-jaune); color: var(--cq-encre); }
    .cq-bas-icone { position: relative; display: inline-flex; }
    .cq-bas .cq-pastille {
        position: absolute; top: -6px; right: -12px; margin: 0;
        min-width: 18px; height: 18px; font-size: 0.65rem; padding: 0 5px;
        box-shadow: 0 0 0 2px var(--cq-vert-fonce);
    }
    .cq-bas a.active .cq-pastille { box-shadow: 0 0 0 2px var(--cq-jaune); }
}

/* ════════════════ Titres de page ════════════════ */

.cq-page-tete { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin: 6px 0 22px; }
.cq-page-tete h1 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); font-weight: 750; line-height: 1.05; }
.cq-page-tete p { margin: 4px 0 0; color: var(--cq-encre-douce); }
.cq-page-tete .cq-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.cq-section-titre { font-family: var(--cq-titres); font-weight: 700; font-size: 1.15rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.cq-section-titre .cq-compteur { font-family: var(--cq-texte); font-size: 0.8rem; font-weight: 700; color: var(--cq-encre-douce); background: var(--cq-brun-clair); border-radius: 999px; padding: 1px 9px; }

/* ════════════════ Surfaces ════════════════ */

.cq-bloc {
    background: var(--cq-papier); border: 1.5px solid var(--cq-trait); border-radius: 22px;
    padding: 18px 18px 14px;
}
.cq-bloc + .cq-bloc { margin-top: 16px; }

.cq-ligne {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 6px; border-radius: 14px; cursor: pointer;
}
.cq-ligne + .cq-ligne { border-top: 1px dashed var(--cq-trait); }
.cq-ligne:hover { background: var(--cq-lin); }
.cq-ligne-corps { flex: 1; min-width: 0; }
.cq-ligne-titre { font-weight: 650; }
.cq-ligne-meta { font-size: 0.8rem; color: var(--cq-encre-douce); }

.cq-vide { color: var(--cq-encre-douce); padding: 8px 4px; }

/* Teintes des activités */
.teinte-vert { --teinte: var(--cq-vert-clair); --teinte-fort: var(--cq-vert); }
.teinte-jaune { --teinte: var(--cq-jaune-clair); --teinte-fort: #C48A0E; }
.teinte-brun { --teinte: var(--cq-brun-clair); --teinte-fort: var(--cq-brun); }
.teinte-lin { --teinte: #E9E4D2; --teinte-fort: #6E6A3A; }

.cq-pastille-emoji {
    width: 56px; height: 56px; flex: none; border-radius: 18px;
    background: var(--teinte, var(--cq-vert-clair));
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.cq-pastille-emoji.petite { width: 38px; height: 38px; border-radius: 12px; font-size: 1.2rem; }

/* ════════════════ Accueil : la fête du quartier ════════════════ */

.cq-hero {
    position: relative; overflow: hidden;
    background: var(--cq-vert); color: var(--cq-lin);
    border-radius: 28px; margin-bottom: 22px;
    padding: 0 clamp(18px, 3vw, 34px) clamp(20px, 3vw, 30px);
}
.cq-fanions { display: block; width: calc(100% + 2 * clamp(18px, 3vw, 34px)); height: 58px; margin: 0 calc(-1 * clamp(18px, 3vw, 34px)); }
.cq-hero-corps { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.cq-hero-texte { flex: 1 1 320px; }
.cq-hero h1 { font-family: var(--cq-titres); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); font-weight: 800; line-height: 1; margin: 0 0 10px; }
.cq-hero p { margin: 0 0 14px; font-size: 1.02rem; color: rgba(244, 237, 224, 0.9); max-width: 60ch; }
.cq-hero p a { color: var(--cq-jaune); font-weight: 700; text-decoration: none; }
.cq-hero-raccourcis { display: flex; gap: 8px; flex-wrap: wrap; }
.cq-hero-raccourcis a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 8px; border-radius: 999px;
    background: rgba(244, 237, 224, 0.12); color: var(--cq-lin); text-decoration: none; font-weight: 600; font-size: 0.92rem;
}
.cq-hero-raccourcis a b {
    min-width: 26px; height: 26px; border-radius: 999px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cq-lin); color: var(--cq-vert-fonce); font-weight: 800;
}
.cq-hero-raccourcis a.alerte b { background: var(--cq-jaune); color: var(--cq-encre); }

/* Le macaron du compte à rebours */
.cq-macaron {
    flex: none; width: 128px; height: 128px; border-radius: 50%;
    background: var(--cq-jaune); color: var(--cq-encre);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: rotate(-8deg);
    box-shadow: 0 0 0 6px rgba(242, 185, 48, 0.28), 0 14px 26px -12px rgba(0, 0, 0, 0.45);
    text-align: center; line-height: 1;
}
.cq-macaron b { font-family: var(--cq-titres); font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; }
.cq-macaron span { font-size: 0.74rem; font-weight: 700; margin-top: 5px; max-width: 92px; line-height: 1.15; }
.cq-macaron.aujourdhui b { font-size: 1.7rem; }
.cq-macaron.petit { width: 84px; height: 84px; box-shadow: 0 0 0 4px rgba(242, 185, 48, 0.28); }
.cq-macaron.petit b { font-size: 1.9rem; }
.cq-macaron.petit span { font-size: 0.66rem; }

@media (prefers-reduced-motion: no-preference) {
    .cq-hero .cq-macaron { animation: cq-macaron 0.7s cubic-bezier(.3, 1.6, .5, 1) both 0.15s; }
    @keyframes cq-macaron { from { transform: rotate(-30deg) scale(0.4); opacity: 0; } }
}

@media (max-width: 599.98px) {
    .cq-hero { border-radius: 24px; }
    .cq-hero-corps { flex-wrap: nowrap; align-items: flex-start; }
    .cq-macaron { width: 92px; height: 92px; margin-top: 4px; }
    .cq-macaron b { font-size: 2.1rem; }
    .cq-macaron span { font-size: 0.66rem; }
}

/* Coche ronde des tâches */
.cq-coche {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    border: 2.5px solid var(--cq-trait); background: var(--cq-papier);
    display: inline-flex; align-items: center; justify-content: center; color: transparent;
}
.cq-coche.en-cours { border-color: var(--cq-jaune); background: var(--cq-jaune-clair); }
.cq-coche.fait { border-color: var(--cq-vert); background: var(--cq-vert); color: var(--cq-lin); }
.cq-coche .mud-icon-root { font-size: 1rem; }

.cq-echeance {
    flex: none; font-size: 0.78rem; font-weight: 700; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px; background: var(--cq-lin); color: var(--cq-encre-douce);
}
.cq-echeance.bientot { background: var(--cq-jaune); color: var(--cq-encre); font-size: 0.82rem; padding: 4px 11px; box-shadow: 0 0 0 2px var(--cq-papier), 0 0 0 4px var(--cq-jaune); }
.cq-echeance.retard { background: var(--cq-rouge); color: #FFF6EE; font-size: 0.82rem; padding: 4px 11px; }

/* Tuiles de chiffres (trésorerie) */
.cq-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cq-tuile { background: var(--cq-lin); border-radius: 16px; padding: 12px 14px; }
.cq-tuile small { display: block; color: var(--cq-encre-douce); font-weight: 600; font-size: 0.78rem; }
.cq-tuile b { font-family: var(--cq-titres); font-size: 1.35rem; font-weight: 750; }
.cq-tuile.accent { background: var(--cq-vert); color: var(--cq-lin); }
.cq-tuile.accent small { color: rgba(244, 237, 224, 0.8); }
.cq-tuile.attention { background: var(--cq-jaune-clair); }

/* ════════════════ Activités ════════════════ */

.cq-activites { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.cq-activite { background: var(--cq-papier); border: 1.5px solid var(--cq-trait); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.cq-activite-tete { background: var(--teinte); padding: 16px 16px 14px; display: flex; align-items: center; gap: 14px; }
.cq-activite-tete .cq-pastille-emoji { background: var(--cq-papier); }
.cq-activite-tete h2 { margin: 0; font-size: 1.3rem; font-weight: 750; }
.cq-activite-tete p { margin: 2px 0 0; font-size: 0.85rem; color: var(--cq-encre-douce); }
.cq-activite-corps { padding: 6px 10px 4px; flex: 1; }
.cq-activite-pied { padding: 6px 12px 12px; display: flex; gap: 6px; flex-wrap: wrap; }

.cq-statut { flex: none; font-size: 0.74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.cq-statut.prepa { background: var(--cq-jaune-clair); color: #8A5F05; }
.cq-statut.cours { background: var(--cq-vert-clair); color: var(--cq-vert-fonce); }
.cq-statut.close { background: var(--cq-brun-clair); color: var(--cq-brun); }

/* ════════════════ Édition ════════════════ */

.cq-edition-tete {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--teinte); border-radius: 26px; padding: 18px 20px; margin-bottom: 14px;
}
.cq-edition-tete h1 { margin: 0; font-family: var(--cq-titres); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 800; line-height: 1.05; }
.cq-edition-tete p { margin: 4px 0 0; color: var(--cq-encre-douce); font-weight: 500; }
.cq-edition-tete .cq-edition-texte { flex: 1 1 260px; }

/* ════════════════ Discussions ════════════════ */

.cq-canaux { background: var(--cq-papier); border: 1.5px solid var(--cq-trait); border-radius: 22px; padding: 6px; }
.cq-canaux-groupe { font-family: var(--cq-titres); font-weight: 700; font-size: 0.9rem; color: var(--cq-encre-douce); padding: 12px 12px 4px; }
.cq-canal { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 16px; cursor: pointer; }
.cq-canal:hover { background: var(--cq-lin); }
.cq-canal.actif { background: var(--cq-vert-clair); }
.cq-canal-avatar {
    width: 40px; height: 40px; flex: none; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--teinte, var(--cq-lin)); font-size: 1.1rem; font-family: var(--cq-titres); font-weight: 700; color: var(--cq-encre);
}
.cq-canal-nom { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-canal.non-lu .cq-canal-nom { font-weight: 800; }
.cq-canal-apercu { font-size: 0.8rem; color: var(--cq-encre-douce); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cq-conversation { background: var(--cq-papier); border: 1.5px solid var(--cq-trait); border-radius: 22px; padding: 8px 10px 10px; }

.chat-messages {
    display: flex; flex-direction: column-reverse; overflow-y: auto; gap: 10px; padding: 10px 6px;
    background-image: radial-gradient(var(--cq-trait) 1px, transparent 1px);
    background-size: 18px 18px;
    border-radius: 16px;
}
.chat-hauteur-canal { height: calc(100vh - 290px); min-height: 300px; }
.chat-hauteur-tache { height: 300px; }

.bulle {
    max-width: min(82%, 560px); padding: 9px 13px 10px;
    border-radius: 18px 18px 18px 6px;
    background: var(--cq-papier); border: 1.5px solid var(--cq-trait);
    white-space: pre-wrap; word-break: break-word; align-self: flex-start;
}
.bulle.moi { align-self: flex-end; background: var(--cq-vert); color: var(--cq-lin); border-color: var(--cq-vert); border-radius: 18px 18px 6px 18px; }
.bulle.moi .bulle-entete { color: rgba(244, 237, 224, 0.75); }
.bulle.moi .mud-icon-button { color: rgba(244, 237, 224, 0.8) !important; }
.bulle.epingle { box-shadow: inset 0 0 0 2px var(--cq-brun-clair); }
.bulle.decision { background: var(--cq-jaune-clair); border-color: var(--cq-jaune); color: var(--cq-encre); }
.bulle.decision .bulle-entete { color: #8A5F05; }
.bulle-entete { font-size: 0.74rem; color: var(--cq-encre-douce); margin-bottom: 2px; display: flex; gap: 6px; align-items: center; }

.cq-saisie { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cq-saisie .mud-input-outlined-border { border-radius: 999px !important; }

/* ════════════════ Connexion ════════════════ */

.cq-accueil-public { min-height: 100vh; display: flex; flex-direction: column; background: var(--cq-vert); }
.cq-accueil-public .cq-fanions { width: 100%; margin: 0; height: 72px; }
.cq-accueil-public-corps { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 16px 40px; }
.cq-carte-connexion { width: 100%; max-width: 420px; background: var(--cq-papier); border-radius: 28px; padding: 28px 24px 22px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); }
.cq-carte-connexion h1 { font-family: var(--cq-titres); font-weight: 800; font-size: 1.9rem; line-height: 1.05; margin: 14px 0 4px; }
.cq-carte-connexion p { color: var(--cq-encre-douce); margin: 0 0 20px; }
.cq-carte-connexion img { width: 56px; height: 56px; border-radius: 17px; }

/* ════════════════ Composants MudBlazor ════════════════ */

.mud-button-root.mud-button { border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 650 !important; }
.mud-button-filled.mud-button-filled-primary { box-shadow: none !important; }
.mud-button-filled.mud-button-filled-secondary { color: var(--cq-encre) !important; box-shadow: none !important; }

.mud-chip { border-radius: 999px !important; font-weight: 650; }

.mud-paper { background-color: var(--cq-papier); }
.mud-paper-outlined { border: 1.5px solid var(--cq-trait) !important; border-radius: 18px !important; }
.mud-elevation-1, .mud-elevation-2 { box-shadow: 0 1px 0 rgba(58, 42, 29, 0.04), 0 10px 24px -18px rgba(58, 42, 29, 0.45) !important; }

.mud-input-outlined-border { border-radius: 14px !important; border-color: var(--cq-trait) !important; }
.mud-input.mud-input-outlined { background: var(--cq-papier); border-radius: 14px; }

.mud-dialog { border-radius: 26px !important; background: var(--cq-papier) !important; }
.mud-dialog .mud-dialog-title .mud-typography { font-family: var(--cq-titres); font-weight: 750; }

.mud-tabs-tabbar { background: transparent !important; }
.mud-tabs-tabbar-wrapper { gap: 6px; }
.mud-tab { border-radius: 999px !important; text-transform: none !important; font-weight: 650 !important; min-height: 40px !important; color: var(--cq-encre-douce) !important; }
.mud-tab.mud-tab-active { background: var(--cq-encre) !important; color: var(--cq-lin) !important; }
.mud-tab-slider { display: none !important; }
.mud-tabs-panels { background: transparent !important; }
.cq-onglets > .mud-tabs-tabbar { margin-bottom: 6px; }

.mud-table { border: 1.5px solid var(--cq-trait); border-radius: 20px !important; overflow: hidden; box-shadow: none !important; background: var(--cq-papier) !important; }
.mud-table-head .mud-table-cell { background: var(--cq-lin); color: var(--cq-encre-douce); font-weight: 700; border-bottom: none; }
.mud-table-cell { border-bottom-color: var(--cq-trait) !important; }
.mud-simple-table table { border-collapse: separate; border-spacing: 0; }
.mud-simple-table th { color: var(--cq-encre-douce) !important; font-weight: 700 !important; }

.mud-alert { border-radius: 16px !important; }
.mud-progress-linear { border-radius: 999px; }
.mud-snackbar { border-radius: 16px !important; }

/* ════════════════ Petites classes métier ════════════════ */

.montant-entree { color: var(--cq-vert); font-weight: 700; font-variant-numeric: tabular-nums; }
.montant-sortie { color: var(--cq-rouge); font-weight: 700; font-variant-numeric: tabular-nums; }
.tache-faite { text-decoration: line-through; color: var(--cq-encre-douce); }
.retard { color: var(--cq-rouge); font-weight: 700; }
.canal-actif { background: var(--cq-vert-clair); }
.input-file-cache input[type=file] { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Bouton-coche des listes de tâches */
button.cq-coche { padding: 0; font: inherit; }
button.cq-coche:not(:disabled):hover { border-color: var(--cq-vert); }
button.cq-coche:disabled { cursor: default !important; opacity: 0.7; }

/* Zone de dépôt des extraits bancaires */
.cq-depot { border-style: dashed !important; background: var(--cq-papier) !important; }


/* ───────── Recette lot 1 : urgence, filtres, encarts ───────── */

/* Une tâche à boucler dans les 7 jours (ou en retard) se repère de loin. */
.cq-ligne.ligne-urgente { background: var(--cq-jaune-clair); border-left: 5px solid var(--cq-jaune); padding-left: 10px; }
.cq-ligne.ligne-urgente:hover { background: #F8E3A6; }
.cq-ligne.ligne-retard { background: #F8E0D6; border-left: 5px solid var(--cq-rouge); padding-left: 10px; }
.cq-ligne.ligne-retard:hover { background: #F3D0C3; }
.cq-ligne.ligne-retard .cq-ligne-titre { color: #7E2A16; }
.cq-ligne.ligne-urgente + .cq-ligne, .cq-ligne.ligne-retard + .cq-ligne,
.cq-ligne + .cq-ligne.ligne-urgente, .cq-ligne + .cq-ligne.ligne-retard { border-top-color: transparent; margin-top: 4px; }
.cq-echeance.retard { animation: cq-pouls 1.6s ease-in-out 3; }
@keyframes cq-pouls { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .cq-echeance.retard { animation: none; } }

.cq-hero-raccourcis a.urgent { background: var(--cq-jaune); color: var(--cq-encre); }
.cq-hero-raccourcis a.urgent b { background: var(--cq-encre); color: var(--cq-jaune); }

/* Pilules de filtre « À faire / Faites / Toutes » */
.cq-filtres { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--cq-lin); }
.cq-filtres button {
    border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600;
    color: var(--cq-encre-douce); padding: 5px 12px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center;
}
.cq-filtres button b { font-weight: 800; font-size: 0.78rem; }
.cq-filtres button.actif { background: var(--cq-vert); color: var(--cq-lin); }
.cq-filtres button:focus-visible { outline: 2px solid var(--cq-jaune); outline-offset: 1px; }

.cq-voir-plus {
    display: block; width: 100%; margin-top: 8px; padding: 9px 12px; border: 1.5px dashed var(--cq-trait); border-radius: 12px;
    background: transparent; color: var(--cq-vert); font: inherit; font-weight: 700; text-align: center; cursor: pointer; text-decoration: none;
}
.cq-voir-plus:hover { background: var(--cq-lin); }
.cq-section-titre.mb-0 { margin-bottom: 0; }

/* Encart du trésorier : les écritures à valider, en tête de l'accueil */
.cq-a-valider {
    background: var(--cq-jaune); border-radius: 22px; padding: 18px 18px 12px; margin-bottom: 24px;
    box-shadow: 0 6px 0 #C99512;
}
.cq-a-valider-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 8px; }
.cq-a-valider-tete h2 { font-family: var(--cq-titres); font-size: 1.35rem; font-weight: 800; margin: 0; line-height: 1.1; }
.cq-a-valider-tete p { margin: 2px 0 0; font-size: 0.9rem; color: #5C4513; }
.cq-a-valider-nombre {
    flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--cq-encre); color: var(--cq-jaune);
    display: grid; place-items: center; font-family: var(--cq-titres); font-size: 1.7rem; font-weight: 800;
}
.cq-a-valider .cq-ligne { background: var(--cq-papier); border-radius: 14px; padding: 10px 12px; margin-top: 6px; }
.cq-a-valider .cq-ligne + .cq-ligne { border-top: 0; }
.cq-a-valider .cq-ligne:hover { background: #FFFFFF; }
.cq-a-valider .cq-voir-plus { border-color: rgba(58, 42, 29, 0.35); color: var(--cq-encre); }
.cq-sans-piece { color: var(--cq-rouge); font-weight: 700; }

/* Bandeaux d'information dans les dialogues */
.cq-bandeau { border-radius: 12px; padding: 9px 12px; font-size: 0.9rem; font-weight: 600; }
.cq-bandeau-info { background: var(--cq-lin); color: var(--cq-encre); }
.cq-bandeau-lecture { background: var(--cq-brun-clair); color: var(--cq-encre); display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }

/* Discussions : un groupe repliable par activité */
.cq-groupe { margin-bottom: 4px; }
.cq-groupe-entete {
    width: 100%; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
    display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 4px; border-radius: 14px; font-weight: 700;
}
.cq-groupe-entete:hover { background: var(--cq-lin); }
.cq-groupe-entete:focus-visible { outline: 2px solid var(--cq-vert); outline-offset: -2px; }
.cq-groupe-entete .cq-chevron { transition: transform 0.15s; color: var(--cq-encre-douce); flex: none; }
.cq-groupe-entete.ouvert .cq-chevron { transform: rotate(90deg); }
.cq-groupe-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-groupe-nb { font-size: 0.78rem; font-weight: 700; color: var(--cq-encre-douce); background: var(--cq-lin); border-radius: 999px; padding: 1px 8px; }
.cq-canal-avatar.petit { width: 30px; height: 30px; font-size: 0.95rem; }
.cq-groupe-corps { margin: 2px 0 6px 18px; padding-left: 8px; border-left: 2px solid var(--cq-trait); }
.cq-pastille.dans-groupe { position: static; flex: none; }
@media (prefers-reduced-motion: reduce) { .cq-groupe-entete .cq-chevron { transition: none; } }

/* Activités : les éditions défilent au-delà de trois */
.cq-activite-compte { font-size: 0.78rem; color: var(--cq-encre-douce); padding: 4px 6px 2px; }
.cq-editions-defilantes { max-height: 204px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--cq-trait) transparent; }

/* Sélecteur d'emoji */
.cq-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.cq-emojis button {
    height: 44px; border-radius: 12px; border: 1.5px solid var(--cq-trait); background: var(--cq-papier);
    font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.cq-emojis button.actif { border-color: var(--cq-vert); background: var(--cq-vert-clair); box-shadow: inset 0 0 0 1px var(--cq-vert); }

/* Choix du rôle d'un membre : un seul possible */
.cq-roles { display: grid; gap: 8px; }
.cq-role {
    display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
    border: 1.5px solid var(--cq-trait); border-radius: 14px; background: var(--cq-papier); padding: 10px 12px; cursor: pointer; font: inherit;
}
.cq-role .cq-role-rond { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--cq-encre-douce); }
.cq-role.actif { border-color: var(--cq-vert); background: var(--cq-vert-clair); }
.cq-role.actif .cq-role-rond { border-color: var(--cq-vert); background: radial-gradient(circle, var(--cq-vert) 0 45%, transparent 50%); }
.cq-role b { display: block; }
.cq-role small { color: var(--cq-encre-douce); }
.cq-role:disabled { opacity: 0.55; cursor: default; }

.cq-retour { display: inline-flex; align-items: center; gap: 4px; color: var(--cq-vert); font-weight: 700; text-decoration: none; margin-bottom: 10px; }
.cq-retour:hover { text-decoration: underline; }