/* QuiPrendQuoi — feuille de style unique (§ 6.2, § 8.9).
   Aucune bibliothèque, aucun service de polices tiers, mobile d'abord.
   Reprend les maquettes : barre latérale sur ordinateur, en-tête et barre
   basse sur mobile, carte de progression foncée, tuiles de pages,
   cartes d'objet avec les trois réponses. */

/* ------------------------------------------------------------- Polices */
/* § 6.2 — titres en Poppins (OFL), auto-hébergée, sous-ensemble latin,
   deux graisses au format WOFF2, font-display: swap. Aucun appel à un
   service de polices tiers. Si les fichiers ne sont pas déposés, le repli
   sur la pile système s'applique sans rien casser. */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- Charte */
:root {
    /* Palette du § 6.2 */
    --bleu-nuit: #1F3A60;
    --bleu-nuit-fonce: #172A48;
    --bleu-action: #2563EB;
    --bleu-action-fonce: #1D4ED8;
    --vert: #15803D;
    --vert-clair: #DCFCE7;
    --ambre: #B45309;
    --ambre-clair: #FEF3C7;
    --ardoise: #64748B;
    --rose: #E11D48;
    --rose-clair: #FFE4E6;
    --bleu-clair: #DBEAFE;
    --bleu-clair-texte: #1E40AF;

    --fond: #F4F6F9;
    --surface: #FFFFFF;
    --surface-douce: #F8FAFC;
    --texte: #101828;
    --texte-secondaire: #667085;
    --bordure: #E6EAF0;
    --bordure-forte: #CDD5DF;

    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-full: 999px;

    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 24px;
    --e-6: 32px;

    --ombre: 0 1px 2px rgba(16, 24, 40, .05);
    --ombre-carte: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --ombre-haute: 0 8px 24px rgba(16, 24, 40, .12);

    --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --police-titres: "Poppins", var(--police);
    --barre-basse: 68px;
    --sidebar: 264px;

    /* § 6.3 — cible tactile minimale des actions principales, au-delà du
       minimum de 24 px du critère WCAG 2.2 « Target Size (Minimum) ». */
    --cible: 44px;

    /* Hauteur de la barre du haut, collée en haut de l'écran : ce qui se
       colle sous elle s'y aligne (list.js la remesure). */
    --haut-barre: calc(60px + env(safe-area-inset-top, 0px));
}
@media (min-width: 1000px) {
    :root { --haut-barre: 61px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--police);
    font-size: 1rem;                 /* 16 px minimum sur mobile (§ 6.2) */
    line-height: 1.5;
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
}

/* § 6.2 : titres en Poppins, texte courant en polices système. Les deux
   graisses livrées sont réellement employées — 600 pour les titres et la
   marque, 400 pour le libellé de famille et de maison de l'en-tête. La
   graisse 600 est déclarée explicitement : sans cela le navigateur
   choisirait la fonte la plus proche de 700 et l'épaissirait lui-même. */
h1, h2, h3 { font-family: var(--police-titres); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--e-3); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 var(--e-3); }

a { color: var(--bleu-action); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {                      /* § 6.3 : focus toujours visible */
    outline: 3px solid var(--bleu-action);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--bleu-nuit); color: #fff; padding: var(--e-2) var(--e-3); z-index: 100; }
.skip-link:focus { left: var(--e-2); top: var(--e-2); }

/* Sprite SVG (§ 6.2) — masqué hors du flux de rendu */
.sprite-icons, svg[hidden] {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ------------------------------------------------------------- Structure */
.app { display: flex; min-height: 100vh; }

.shell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
body.has-bottom-nav .shell {
    padding-bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1000px) {
    body.has-bottom-nav .shell { padding-bottom: 0; }
}

.main {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--e-4) var(--e-3) var(--e-6);
}
.main--bare { max-width: 440px; padding-top: var(--e-6); }
/* Pages de lecture (CGU, mentions, confidentialité, aide, FAQ) sans navigation : assez larges pour un ordinateur. */
.main--bare.main--wide { max-width: 860px; }

.footer {
    margin-top: auto;
    background: var(--surface);
    border-top: 1px solid var(--bordure);
    padding: var(--e-5) var(--e-3);
    font-size: .84rem;
    color: var(--texte-secondaire);
}
.footer__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-3);
    text-align: center;
}
.footer__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
}
.footer__nav a {
    color: var(--texte-secondaire);
    text-decoration: none;
    font-weight: 500;
}
.footer__nav a:hover {
    color: var(--bleu-action);
    text-decoration: underline;
}
.footer__sep {
    color: var(--bordure-forte);
    font-size: .8rem;
}
.footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    font-size: .78rem;
    color: var(--texte-secondaire);
}
.footer__app {
    color: var(--texte-secondaire);
}
/* Lien vers les nouveautés : aucun décalage, seule la couleur change. */
.version-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    transition: color .15s ease;
}
.version-link:hover,
.version-link:focus-visible { color: var(--bleu-action); }
@media (prefers-reduced-motion: reduce) { .version-link { transition: none; } }

/* Page « Nouveautés » : une carte par version, la plus récente en tête. */
.changelog__release {
    border-top: 1px solid var(--bordure);
    padding-top: var(--e-4);
}
.changelog__release:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.changelog__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--e-2);
}
.changelog__head h2 { margin: 0; }
.changelog__date { color: var(--texte-secondaire); font-size: .875rem; }
.changelog__title { margin: 0; font-weight: 600; }
.changelog__group h3 { margin: var(--e-3) 0 var(--e-1); font-size: 1rem; }
.changelog__group ul { margin: 0; padding-left: 1.25rem; }
.changelog__group li + li { margin-top: var(--e-1); }
@media (min-width: 1000px) {
    .footer {
        padding: var(--e-4) var(--e-5);
    }
    .footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.sidebar__version {
    font-size: .75rem;
    padding: var(--e-2) var(--e-2) 0;
    text-align: center;
}

/* -------------------------------------------------- Barre latérale (PC) */
.sidebar { display: none; }

@media (min-width: 1000px) {
    .sidebar {
        display: flex;
        flex-direction: column;
        width: var(--sidebar);
        flex: none;
        background: var(--surface);
        border-right: 1px solid var(--bordure);
        padding: var(--e-4) var(--e-3);
        gap: var(--e-4);
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
    .shell { padding-bottom: 0; }
    .main { padding: var(--e-5) var(--e-5) var(--e-6); }
}

.brand { display: flex; align-items: center; gap: var(--e-2); font-family: var(--police-titres); font-weight: 600; color: var(--texte); font-size: 1.02rem; }
.brand:hover { text-decoration: none; }
/* Le logo tient lieu de pastille : son fond est transparent, il se pose
   donc tel quel sur la barre latérale claire (§ 6.2). */
.brand__mark { width: 34px; height: 34px; flex: 0 0 auto; }

/* Pages sans navigation (connexion, invitation, erreurs) : le logo au-dessus
   du titre est le seul repère de marque de l'écran. */
.bare-brand { display: block; width: 76px; height: 76px; margin: 0 auto var(--e-4); }

/* Écrans d'authentification (connexion, double facteur) : marque avec logo à gauche du titre */
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
}
.auth-brand__logo {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
}
.auth-brand__title {
    font-family: var(--police-titres);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--texte);
    margin: 0;
}
.auth-subtitle {
    font-size: 1.2rem;
    margin: 0;
}
.stack > .auth-subtitle + p {
    margin-top: var(--e-1);
}


/* Cartes d'accès (connexion, invitation) : bandeau bleu nuit comme la carte
   de l'accueil, corps blanc, fond doux. */
body.bare {
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(37, 99, 235, .10), transparent 70%),
        var(--fond);
}
.auth-card { overflow: hidden; padding: 0; box-shadow: var(--ombre-haute); }
.auth-card__head {
    background: linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-nuit-fonce) 100%);
    color: #fff;
    text-align: center;
    padding: var(--e-5) var(--e-4) var(--e-4);
}
.auth-card__logo {
    display: block; width: 64px; height: 64px; margin: 0 auto var(--e-3);
    padding: 8px; background: #fff; border-radius: var(--r-xl);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.auth-card__kicker { margin: 0 0 var(--e-1); font-size: .82rem; opacity: .9; }
.auth-card__title { margin: 0; color: #fff; font-size: 1.45rem; }
.auth-card__lead { margin: var(--e-2) 0 0; font-size: .88rem; opacity: .92; }
.auth-card__body { padding: var(--e-4); }
@media (min-width: 1000px) { .auth-card__body { padding: var(--e-5); } }
.auth-card__body > h2 { font-size: 1.1rem; }
.auth-card input[type="text"], .auth-card input[type="email"], .auth-card input[type="password"] {
    background: var(--surface-douce);
}
.auth-card input:focus { background: var(--surface); }
.auth-card .btn { min-height: 48px; font-weight: 600; }
.auth-card__foot {
    border-top: 1px solid var(--bordure); background: var(--surface-douce);
    padding: var(--e-3) var(--e-4); margin: 0;
}

/* Sélecteur de maison : la famille reste visible en permanence (MAI-03) */
.house-switch {
    display: block; width: 100%; text-align: left;
    background: var(--bleu-nuit); color: #fff; border: 0;
    border-radius: var(--r-lg); padding: var(--e-3);
    font: inherit; cursor: pointer;
}
.house-switch:hover { background: var(--bleu-nuit-fonce); text-decoration: none; color: #fff; }
.house-switch__house { display: flex; align-items: center; gap: var(--e-2); font-weight: 600; }
.house-switch__family { display: block; font-size: .76rem; opacity: .95; margin-top: 2px; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav__title {
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--texte-secondaire); padding: var(--e-3) var(--e-2) var(--e-1);
}
.side-nav__item {
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-2) var(--e-2); border-radius: var(--r-md);
    color: var(--texte); font-size: .92rem; min-height: var(--cible);
}
.side-nav__item:hover { background: var(--surface-douce); text-decoration: none; }
.side-nav__item[aria-current="page"] { background: #EEF4FF; color: var(--bleu-action-fonce); font-weight: 600; }
.side-nav__item .icon { width: 18px; height: 18px; color: var(--texte-secondaire); }
.side-nav__item[aria-current="page"] .icon { color: var(--bleu-action); }
.side-nav__item.side-nav__logout, .side-nav__item.side-nav__logout .icon { color: var(--rose); }
:where(html[data-theme="dark"]) .side-nav__item.side-nav__logout, :where(html[data-theme="dark"]) .side-nav__item.side-nav__logout .icon { color: var(--t-rose); }
.side-nav__count { margin-left: auto; font-size: .8rem; color: var(--texte-secondaire); }
/* Seconde ligne d'une entrée : la maison visée, hors du contexte d'une maison. */
.side-nav__sub { display: block; font-size: .76rem; color: var(--texte-secondaire); }
/* Encart des boutons réservés au chef de maison, comme dans le menu mobile. */
.side-nav__manager {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: var(--e-3); padding: 0 var(--e-1) var(--e-1);
    border: 1px solid #F5D9A6; border-radius: var(--r-md); background: var(--ambre-clair);
}
.side-nav__manager .side-nav__title { color: var(--ambre); padding-left: var(--e-1); }
.side-nav__manager .side-nav__item .icon { color: var(--ambre); }
.side-nav__dot { width: 12px; height: 12px; border-radius: var(--r-sm); flex: none; background: var(--teinte, var(--ardoise)); }
/* Une page : pastille pleine de sa couleur et ligne légèrement teintée (la page ouverte garde le style actif, plus bas). */
.side-nav__page { background: color-mix(in srgb, var(--teinte, transparent) 9%, transparent); }
.side-nav__page:hover { background: color-mix(in srgb, var(--teinte, transparent) 16%, transparent); }

/* -------------------------------------------------------------- En-tête */
.topbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--bleu-nuit); color: #fff;
    padding: var(--e-2) var(--e-3);
    padding-top: calc(var(--e-2) + env(safe-area-inset-top, 0px));
}
.topbar__bar { display: flex; align-items: center; gap: var(--e-2); max-width: 1180px; margin: 0 auto; }
.topbar a, .topbar button { color: #fff; }
.topbar__spacer { flex: 1; }
/* MAI-03 : le nom de la famille reste affiché en permanence. Titre en
   Poppins 600, libellé de famille en Poppins 400. */
.topbar__title { min-width: 0; font-family: var(--police-titres); }
.topbar__title strong { display: block; font-size: 1.05rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__title span { font-size: .76rem; font-weight: 400; opacity: .92; }
.topbar__action {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--cible); min-height: var(--cible); border-radius: var(--r-md);
    background: rgba(255, 255, 255, .12); border: 0; cursor: pointer;
}
.topbar__action:hover { background: rgba(255, 255, 255, .22); text-decoration: none; }
/* La cloche : le nombre de demandes à confirmer, en pastille sur l'icône. */
.topbar__bell { position: relative; }
/* Raccourci du chef de maison vers son tableau de bord : orange, à gauche de la cloche. */
.topbar .topbar__dash { background: #F97316; color: #fff; }
.topbar .topbar__dash:hover { background: #EA580C; }
.topbar .topbar__dash[aria-current="page"] { background: #C2410C; color: #fff; }
.topbar__badge {
    position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-full); background: var(--rose); color: #fff !important;
    font-size: .75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--bleu-nuit);
}
/* Hors d'une maison, le logo précède le nom du site : version blanche, le
   fond de la barre étant bleu nuit sur mobile. */
.topbar__logo { width: 32px; height: 32px; flex: 0 0 auto; }

@media (min-width: 1000px) {
    /* Sur ordinateur, la barre du haut devient claire : recherche, cloche,
       avatar — comme la maquette D01. */
    .topbar { background: var(--surface); color: var(--texte); border-bottom: 1px solid var(--bordure); }
    .topbar a, .topbar button { color: var(--texte); }
    .topbar__action { background: transparent; }
    .topbar__action:hover { background: var(--surface-douce); }
    .topbar .topbar__dash { background: color-mix(in srgb, #F97316 16%, var(--surface)); color: #C2410C; }
    .topbar .topbar__dash:hover { background: color-mix(in srgb, #F97316 28%, var(--surface)); }
    .topbar .topbar__dash[aria-current="page"] { background: #F97316; color: #fff; }
    .topbar__badge { box-shadow: 0 0 0 2px var(--surface); }
    .topbar__title { display: none; }
    .topbar__back { display: none; }
    /* La barre latérale porte déjà la marque, et la barre devient claire. */
    .topbar__logo { display: none; }
    .topbar__menu { display: none; }
}

/* NAV-01 — sur mobile la recherche est une entrée de la barre basse
   (Accueil, Rechercher, photo, Mes choix, Menu) ; la barre de recherche de
   l'en-tête appartient à l'ordinateur (maquette D01). La garder sur mobile
   écrasait le champ à quelques dizaines de pixels entre le titre et les
   actions. Le titre prend alors toute la largeur disponible. */
.search { display: none; }
.topbar__title { flex: 1; }

@media (min-width: 1000px) {
    .search {
        flex: 1; display: flex; align-items: center; gap: var(--e-2);
        background: var(--surface-douce); border: 1px solid var(--bordure);
        border-radius: var(--r-full); max-width: 480px;
        padding: 0 var(--e-3); min-height: var(--cible);
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }
    .search:hover { border-color: var(--bordure-forte); }
    .search:focus-within {
        background: var(--surface);
        border-color: var(--famille);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--famille) 12%, transparent);
    }
    .search .icon {
        width: 18px; height: 18px; color: var(--texte-secondaire); flex: none;
        stroke-width: 2.2;
    }
    .search:focus-within .icon { color: var(--famille); }
    .search input[type="search"],
    .search input {
        flex: 1; width: 100%; height: 100%;
        background: transparent !important; border: 0 !important;
        box-shadow: none !important; outline: none !important;
        color: var(--texte); font: inherit; font-size: .92rem;
        padding: 0 !important; margin: 0;
    }
    .search input::placeholder { color: var(--texte-secondaire); opacity: .85; }
    .topbar .row--tight { margin-left: auto; }
}

.breadcrumb { display: none; font-size: .82rem; color: var(--texte-secondaire); margin-bottom: var(--e-3); }
.breadcrumb a { color: var(--texte-secondaire); }
@media (min-width: 1000px) { .breadcrumb { display: block; } }

/* --------------------------------------------------- Barre basse mobile */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--surface); border-top: 1px solid var(--bordure);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 1000px) { .bottom-nav { display: none; } }

.bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: var(--barre-basse); color: var(--texte-secondaire); font-size: .75rem;
}
.bottom-nav__item:hover { text-decoration: none; }
.bottom-nav__item[aria-current="page"] { color: var(--bleu-nuit); font-weight: 600; }
.bottom-nav__item .icon { width: 22px; height: 22px; }

.bottom-nav__shoot {           /* OBJ-01 : bouton photo central, carré arrondi dans la barre */
    align-self: center; justify-self: center;
    width: 46px; height: 46px;
    border-radius: 15px;
    background: var(--bleu-nuit); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .15s ease;
}
.bottom-nav__shoot:hover { background: var(--bleu-action-fonce); text-decoration: none; }
.bottom-nav__shoot:active { transform: scale(.94); }
.bottom-nav__shoot:focus-visible { outline: 3px solid var(--bleu-action); outline-offset: 3px; }
.bottom-nav__shoot .icon { width: 24px; height: 24px; stroke-width: 2.4; }
@media (prefers-reduced-motion: reduce) { .bottom-nav__shoot { transition: none; } }

/* ------------------------------------------------------------- Éléments */
.card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-xl);
    box-shadow: var(--ombre-carte);
}
a.card {
    color: inherit;
    text-decoration: none;
}
a.card:hover {
    text-decoration: none;
}
.card--pad { padding: var(--e-4); }
@media (min-width: 1000px) { .card--pad { padding: var(--e-5); } }

.stack > * + * { margin-top: var(--e-3); }
.stack-lg > * + * { margin-top: var(--e-5); }
.row { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--tight { gap: var(--e-1); }
.muted { color: var(--texte-secondaire); }
.small { font-size: .85rem; }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }   /* l'attribut l'emporte sur display: flex des boutons */

.page-head { display: flex; align-items: flex-start; gap: var(--e-3); flex-wrap: wrap; justify-content: space-between; margin-bottom: var(--e-4); }
.page-head h1 { margin: 0; }
.page-head__meta { color: var(--texte-secondaire); font-size: .85rem; margin-top: 2px; }

/* Boutons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-height: var(--cible); padding: 0 var(--e-4);
    border-radius: var(--r-md); border: 1px solid transparent;
    font: inherit; font-size: .93rem; font-weight: 600; cursor: pointer;
    background: var(--bleu-action); color: #fff;
}
.btn:hover { background: var(--bleu-action-fonce); color: #fff; text-decoration: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn .icon { width: 17px; height: 17px; }
.btn--navy { background: var(--bleu-nuit); }
.btn--navy:hover { background: var(--bleu-nuit-fonce); }
.btn--secondary { background: var(--surface); color: var(--texte); border-color: var(--bordure-forte); }
.btn--secondary:hover { background: var(--surface-douce); color: var(--texte); }
.btn--quiet { background: transparent; color: var(--bleu-action); }
.btn--quiet:hover { background: #EEF4FF; color: var(--bleu-action-fonce); }
.btn--quiet[disabled], .btn--quiet[aria-disabled="true"],
.btn--quiet[disabled]:hover, .btn--quiet[aria-disabled="true"]:hover { background: transparent; color: var(--texte-secondaire); }
.btn--special { background: var(--ambre); }
.btn--special:hover { background: #92400E; }
/* Demande « spéciale » (chef de famille) : carte teintée d'ambre sur tout le tour, médaillon rond, bouton ambre. */
.card--special {
    border-color: color-mix(in srgb, var(--ambre) 30%, var(--bordure));
    background: linear-gradient(160deg, var(--ambre-clair) 0%, var(--surface) 70%);
}
.special-head { display: flex; align-items: flex-start; gap: var(--e-3); }
.special-head__icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--ambre) 16%, var(--surface)); color: var(--ambre);
}
.special-head__icon .icon { width: 22px; height: 22px; }
.special-head__text { display: grid; gap: var(--e-1); min-width: 0; }
.special-head__text h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; }
.special-head__text p { margin: 0; }
.btn--special { box-shadow: 0 6px 14px color-mix(in srgb, var(--ambre) 28%, transparent); }
.btn--danger { background: var(--rose); }
.btn--danger:hover { background: #BE123C; }
.btn--block { width: 100%; }
.btn--small { min-height: 34px; padding: 0 var(--e-3); font-size: .85rem; }
.btn--light { background: #fff; color: var(--bleu-nuit); }
.btn--light:hover { background: #F1F5F9; color: var(--bleu-nuit); }

.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px var(--e-2); border-radius: var(--r-full);
    font-size: .75rem; font-weight: 600; background: #EEF2F6; color: #566176;
    white-space: nowrap;
}
.badge .icon { width: 13px; height: 13px; }
.badge--multiple { background: var(--ambre-clair); color: var(--ambre); }
.badge--pending, .badge--assigned { background: var(--bleu-clair); color: var(--bleu-clair-texte); }
.badge--new { background: var(--rose-clair); color: #BE123C; }
.badge--ok { background: var(--vert-clair); color: var(--vert); }
.badge--draft { background: #F1F5F9; color: var(--texte-secondaire); }

.flashes { margin-bottom: var(--e-4); }
.flash { padding: var(--e-3) var(--e-4); border-radius: var(--r-lg); margin-bottom: var(--e-2); font-size: .92rem; }
.flash--success { background: var(--vert-clair); color: #14532D; }
.flash--error { background: #FEE2E2; color: #7F1D1D; }
.flash--info { background: var(--bleu-clair); color: var(--bleu-clair-texte); }

.toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    max-width: min(calc(100vw - 32px), 480px);
    width: max-content;
    box-sizing: border-box;
    background: #0F172A; color: #fff;
    padding: var(--e-2) var(--e-4); border-radius: var(--r-full);
    box-shadow: var(--ombre-haute); font-size: .88rem;
    line-height: 1.4; text-align: center;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.toast[hidden], .toast:empty {
    display: none !important;
}

body.has-bottom-nav .toast {
    bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom, 0px) + 24px);
}

@media (min-width: 1000px) {
    .toast, body.has-bottom-nav .toast {
        bottom: var(--e-5);
    }
}

/* --------------------------------------------------------- Formulaires */
.field { margin-bottom: var(--e-4); }
.field > label, .field-label { display: block; font-weight: 600; margin-bottom: var(--e-1); font-size: .9rem; }
.hint { color: var(--texte-secondaire); font-size: .82rem; margin-top: var(--e-1); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="url"], select, textarea {
    width: 100%; min-height: var(--cible); padding: var(--e-2) var(--e-3);
    font: inherit; font-size: .95rem; color: var(--texte); background: var(--surface);
    border: 1px solid var(--bordure-forte); border-radius: var(--r-md);
}
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--famille); outline-offset: 0; }
/* Contour de tous les champs au focus : couleur de la famille (bleu nuit hors maison). */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--famille); outline-offset: 2px; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--e-4); }
legend { font-weight: 600; padding: 0; margin-bottom: var(--e-2); font-size: .9rem; }
.checkbox { display: flex; align-items: center; gap: var(--e-2); min-height: var(--cible); }
.checkbox input { width: 20px; height: 20px; flex: none; }

/* Acceptation des CGU, sous le texte : espacé du texte, case dans un encadré, bouton pleine largeur. */
.cgu-accept { margin-top: var(--e-5); }
@media (min-width: 1000px) { .cgu-accept { margin-top: var(--e-6); } }
.cgu-accept__form { display: flex; flex-direction: column; gap: var(--e-4); }
.cgu-accept__check {
    display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-4);
    border: 1px solid var(--bordure-forte); border-radius: var(--r-md); background: var(--surface-douce);
    cursor: pointer; line-height: 1.5;
}
.cgu-accept__check input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--bleu-action); }
.cgu-accept__submit {
    min-height: 52px; font-size: 1rem;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--bleu-action) 28%, transparent);
}
@media (min-width: 640px) { .cgu-accept__submit { align-self: flex-start; min-width: 280px; } }
.cgu-accept__decline { margin-top: var(--e-3); text-align: center; }

.strength { display: flex; gap: 4px; margin-top: var(--e-2); }
.strength__bar { height: 5px; flex: 1; border-radius: var(--r-full); background: var(--bordure); }
.strength__bar.on-1 { background: var(--rose); }
.strength__bar.on-2 { background: var(--ambre); }
.strength__bar.on-3, .strength__bar.on-4 { background: var(--vert); }

/* ------------------------------------------------ Carte de progression */
/* « Il vous reste N objets à voir », anneau de progression (NAV-02) */
.hero {
    background: linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-nuit-fonce) 100%);
    color: #fff; border-radius: var(--r-xl); padding: var(--e-5) var(--e-4);
    display: flex; flex-direction: column; gap: var(--e-4);
}
.hero__top { display: flex; align-items: center; gap: var(--e-4); justify-content: space-between; }
.hero__lead { font-size: .88rem; opacity: .92; margin: 0; }
.hero__count { font-size: 1.7rem; font-weight: 700; line-height: 1.15; margin: 2px 0 0; }
.hero .btn--light { width: 100%; }

.ring { width: 68px; height: 68px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .ring__track { stroke: rgba(255, 255, 255, .22); }
.ring .ring__value { stroke: #22C55E; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.ring__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; }

/* Tuiles de chiffres */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
/* Écran large : des rectangles au nombre d'or (largeur / hauteur = 1,618), groupés au centre, aérés. */
@media (min-width: 700px) {
    .stats { grid-template-columns: repeat(3, 170px); justify-content: center; gap: var(--e-4); }
    .stats .stat { aspect-ratio: 1.618; align-content: center; }
    /* Tableau de bord du chef : pleine largeur, calées à gauche comme le reste de la page. */
    .stats.stats--wide { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--e-3); }
}
/* Tableau de bord du chef : place pour trois lignes de libellé, donc toutes les cartes ont la même taille (téléphone compris). */
.stats--wide .stat__label { min-height: 3.75em; }
.stats--wide { grid-auto-rows: 1fr; }
.stat {
    display: grid; grid-template-columns: auto auto; justify-content: center; align-content: start; align-items: center; gap: var(--e-2) var(--e-4);
    padding: var(--e-3); text-decoration: none; color: var(--texte);
    background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); box-shadow: var(--ombre);
}
a.stat:hover { text-decoration: none; }
.stat__icon {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-full);
    background: var(--famille-clair, #EEF4FF); color: var(--famille, var(--bleu-action));
}
.stat__icon .icon { width: 18px; height: 18px; }
.stat__value { font-size: 1.7rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.stat__label { grid-column: 1 / -1; grid-row: 1; width: 0; min-width: 100%; min-height: 2.5em; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--texte-secondaire); font-size: .78rem; line-height: 1.25; text-wrap: balance; }
.stat__value--accent { color: var(--bleu-action); }
.stat__scope { display: block; font-size: .75rem; opacity: .8; }

/* --------------------------------------------------------- Barres et % */
.progress { display: block; height: 6px; background: var(--bordure); border-radius: var(--r-full); overflow: hidden; }
.progress__fill { display: block; height: 100%; background: var(--vert); border-radius: var(--r-full); }
.progress--thin { height: 4px; }
/* Barre à segments : gardés, réponses, puis le gris du fond pour le reste. */
.progress--stack { display: flex; }
.progress--stack .progress__fill { flex: none; border-radius: 0; }
.progress__fill--kept { background: var(--bleu-action); }

.stacked { display: flex; height: 10px; border-radius: var(--r-full); overflow: hidden; background: var(--bordure); }
.stacked span { display: block; height: 100%; }

/* ----------------------------------------------------- Tuiles de pages */
.tiles { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

.tile {
    position: relative; display: flex; flex-direction: column; gap: var(--e-2);
    padding: var(--e-4); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--bordure);
    color: inherit; box-shadow: var(--ombre); min-height: 120px;
}
.tile:hover { text-decoration: none; border-color: var(--bordure-forte); box-shadow: var(--ombre-carte); }
.tile__icon { width: 38px; height: 38px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; }
.tile__icon .icon { width: 20px; height: 20px; stroke-width: 2; }
.tile__name { font-weight: 600; line-height: 1.25; }
.tile__count { color: var(--texte-secondaire); font-size: .8rem; }
.tile__badge { position: absolute; top: var(--e-3); right: var(--e-3); }

/* Couleurs de page (PAG-01 : 8 couleurs contrastées) */
/* --teinte-vive : ton intermédiaire, pour l'image par défaut d'un objet
   sans photo (dégradé du fond vers lui ; pictogramme ≥ 3:1 dessus). */
.c-bleu     { --teinte: #1F3A60; --teinte-fond: #E8EDF5; --teinte-vive: #C9D6EC; }
.c-azur     { --teinte: #2563EB; --teinte-fond: #E6EDFD; --teinte-vive: #BFDBFE; }
.c-vert     { --teinte: #15803D; --teinte-fond: #DCFCE7; --teinte-vive: #BBF7D0; }
.c-ambre    { --teinte: #B45309; --teinte-fond: #FEF3C7; --teinte-vive: #FDE68A; }
.c-rose     { --teinte: #E11D48; --teinte-fond: #FFE4E6; --teinte-vive: #FECDD3; }
.c-ardoise  { --teinte: #64748B; --teinte-fond: #EEF2F6; --teinte-vive: #CBD5E1; }
.c-violet   { --teinte: #7C3AED; --teinte-fond: #EDE9FE; --teinte-vive: #DDD6FE; }
.c-emeraude { --teinte: #0F766E; --teinte-fond: #CCFBF1; --teinte-vive: #99F6E4; }
.c-indigo    { --teinte: #4338CA; --teinte-fond: #E0E7FF; --teinte-vive: #C7D2FE; }
.c-fuchsia   { --teinte: #A21CAF; --teinte-fond: #FAE8FF; --teinte-vive: #F5D0FE; }
.c-rouge     { --teinte: #B91C1C; --teinte-fond: #FEE2E2; --teinte-vive: #FECACA; }
.c-orange    { --teinte: #C2410C; --teinte-fond: #FFEDD5; --teinte-vive: #FED7AA; }
.c-brun      { --teinte: #8A5A3B; --teinte-fond: #F3E8DF; --teinte-vive: #E3CDB9; }
.c-olive     { --teinte: #4D7C0F; --teinte-fond: #ECFCCB; --teinte-vive: #D9F99D; }
.c-turquoise { --teinte: #0E7490; --teinte-fond: #CFFAFE; --teinte-vive: #A5F3FC; }
.c-graphite  { --teinte: #374151; --teinte-fond: #E5E7EB; --teinte-vive: #D1D5DB; }
.teinte { color: var(--teinte, var(--bleu-nuit)); }
.teinte-fond { background: var(--teinte-fond, #EEF2F6); color: var(--teinte, var(--bleu-nuit)); }

/* --------------------------------------------------------- Puces et filtres */
.chips { display: flex; gap: var(--e-2); overflow-x: auto; padding-bottom: var(--e-2); scrollbar-width: thin; }
.chip {
    display: inline-flex; align-items: center; gap: var(--e-1);
    white-space: nowrap; min-height: 34px; padding: 0 var(--e-3);
    border-radius: var(--r-full); border: 1px solid var(--bordure-forte);
    background: var(--surface); color: var(--texte); font-size: .85rem;
}
.chip:hover { text-decoration: none; border-color: var(--ardoise); }
.chip.is-on { background: var(--bleu-nuit); color: #fff; border-color: var(--bleu-nuit); }
.chip__count { opacity: .85; font-variant-numeric: tabular-nums; }
.chip--multiple { background: var(--ambre-clair); border-color: #FDE68A; color: var(--ambre); }
.chip--multiple.is-on { background: var(--ambre); color: #fff; border-color: var(--ambre); }

.goto { display: flex; gap: var(--e-2); overflow-x: auto; align-items: center; font-size: .85rem; padding-bottom: var(--e-1); }
.goto__label { color: var(--texte-secondaire); white-space: nowrap; }
.goto a { white-space: nowrap; color: var(--texte); font-weight: 500; }

.filters-bar { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.select-chip:hover { text-decoration: none; background: var(--surface-douce); }
.select-chip .icon { width: 14px; height: 14px; color: var(--texte-secondaire); }

.legend-choices { display: flex; gap: var(--e-3); flex-wrap: wrap; font-size: .8rem; color: var(--texte-secondaire); }
.legend-choices span { display: inline-flex; align-items: center; gap: 5px; }
.legend-choices .dot { width: 9px; height: 9px; border-radius: var(--r-full); }
.dot--favorite { background: var(--vert); }
.dot--fallback { background: var(--ambre); }
.dot--no { background: var(--ardoise); }

/* ------------------------------------------ Catégories d'une page (PAG-06) */
/* Chaque catégorie s'annonce par une tuile glissée parmi les objets — un
   carré de la grille, une ligne de la liste — qui défile avec eux, sans
   jamais rester collée par-dessus. C'est la barre « Page › Catégorie »,
   collée sous l'en-tête, qui dit en permanence où l'on est (list.js la
   met à jour au fil du défilement). */
.cat-bar {
    position: sticky; top: var(--haut-barre); z-index: 10;
    display: none; margin: 0;
    background: var(--surface); border-bottom: 1px solid var(--bordure);
    box-shadow: 0 4px 12px rgba(16, 24, 40, .06);
    font-size: .92rem; white-space: nowrap;
}
.stack > .cat-bar { margin-top: 0; }
.cat-bar.is-visible {
    display: block;
    position: fixed;
    top: var(--haut-barre);
    margin: 0;
    left: 0;
    right: 0;
    z-index: 15;
}
@media (min-width: 1000px) {
    .cat-bar.is-visible {
        left: var(--sidebar);
        right: 0;
    }
}
.cat-bar__inner {
    display: flex; align-items: center; gap: var(--e-2);
    min-height: var(--cible);
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--e-1) var(--e-3);
}
@media (min-width: 1000px) {
    .cat-bar__inner {
        padding: var(--e-1) var(--e-5);
    }
}
.cat-bar__mark {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--r-sm);
    background: var(--teinte-plein, var(--teinte)); color: #fff;
}
.cat-bar__mark .icon { width: 16px; height: 16px; stroke-width: 2; }
.cat-bar__page { flex: none; font-weight: 600; color: var(--texte-secondaire); }
.cat-bar__sep { width: 16px; height: 16px; color: var(--texte-secondaire); }
.cat-bar__cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--police-titres); font-weight: 600; }
.cat-bar__count { margin-left: auto; padding-left: var(--e-2); font-size: .8rem; color: var(--texte-secondaire); }

/* En liste : une ligne, marquée d'un carré aux couleurs de la page. Un saut
   par l'index « Aller à » s'arrête sous les deux barres collées. */
.cat-tile {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-3) 0 var(--e-1);
    scroll-margin-top: calc(var(--haut-barre) + 56px);
}
.cat-tile__mark {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-md);
    background: var(--teinte-plein, var(--teinte)); color: #fff;
}
.cat-tile__mark .icon { width: 22px; height: 22px; stroke-width: 2; }
.cat-tile__text { display: flex; flex-direction: column; min-width: 0; }
.cat-tile__name { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.cat-tile__count { font-size: .8rem; color: var(--texte-secondaire); }

/* En grille : un carré parmi les objets, de la couleur de la page. */
.items--grid .cat-tile {
    flex-direction: column; align-items: flex-start; justify-content: space-between;
    min-height: 150px; padding: var(--e-4);
    border-radius: var(--r-lg); box-shadow: var(--ombre);
    background: linear-gradient(160deg, rgba(16, 24, 40, 0) 40%, rgba(16, 24, 40, .22)), var(--teinte-plein, var(--teinte));
    color: #fff;
}
.items--grid .cat-tile__mark { background: rgba(255, 255, 255, .2); }
.items--grid .cat-tile__name { font-size: 1.3rem; color: #fff; }
.items--grid .cat-tile__count { color: #fff; }

/* ------------------------------------------ Mes choix (M10, CHX-07) */
/* Résumé : mes réponses en une barre, aux couleurs des trois réponses. */
.mine-summary { display: flex; flex-direction: column; gap: var(--e-3); }
.mine-summary__head { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.mine-summary__lead { margin: 0; color: var(--texte-secondaire); }
.mine-summary__lead strong { font-family: var(--police-titres); font-size: 1.6rem; font-weight: 600; color: var(--texte); }
.mine-bar { display: flex; gap: 3px; height: 12px; border-radius: var(--r-full); overflow: hidden; background: var(--bordure); }
.mine-bar__seg { display: block; min-width: 6px; }
.mine-bar__seg--kept, .mine-legend__dot--kept { background: var(--bleu-action); }
.mine-bar__seg--favorite, .mine-legend__dot--favorite { background: var(--vert); }
.mine-bar__seg--fallback, .mine-legend__dot--fallback { background: var(--ambre); }
.mine-bar__seg--no, .mine-legend__dot--no { background: var(--ardoise); }
.mine-bar__seg--to-see, .mine-legend__dot--to-see { background: var(--bordure-forte); }
.mine-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: .82rem; color: var(--texte-secondaire); }
.mine-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mine-legend strong { color: var(--texte); font-variant-numeric: tabular-nums; }
.mine-legend__dot { width: 10px; height: 10px; border-radius: var(--r-full); flex: none; }

/* ATT-11 : une demande de renoncement attend ma réponse. */
.mine-alert {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-3) var(--e-4); border-radius: var(--r-lg);
    background: var(--bleu-clair); border: 1px solid #BFDBFE; color: var(--bleu-clair-texte);
}
.mine-alert:hover { text-decoration: none; border-color: var(--bleu-action); }
.mine-alert + .mine-alert { margin-top: var(--e-2); }
.mine-alert__icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--r-full); background: #BFDBFE;
}
.mine-alert__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mine-alert__text span { font-size: .88rem; color: var(--texte); overflow-wrap: anywhere; }
.mine-alert > .icon { flex: none; width: 20px; height: 20px; }

/* Onglets : tous mes choix, ou une seule réponse. Chacun à sa couleur. */
.mine-tabs { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-3); }   /* de l'air avant la liste */
/* Titre des onglets : il annonce les filtres, et un trait les sépare des blocs du dessus. */
.mine-tabs-title { margin-bottom: calc(var(--e-1) * -1); }
.mine-tabs-title--sep { margin-top: var(--e-4); padding-top: var(--e-5); border-top: 1px solid var(--bordure); }
.mine-tab {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--cible); padding: 0 var(--e-2) 0 var(--e-3);
    border: 1px solid var(--bordure-forte); border-radius: var(--r-full);
    background: var(--surface); color: var(--texte); font-size: .88rem; font-weight: 600;
}
.mine-tab:hover { text-decoration: none; border-color: var(--ardoise); }
.mine-tab .icon { width: 17px; height: 17px; }
.mine-tab--favorite .icon { color: var(--vert); }
.mine-tab--fallback .icon { color: var(--ambre); }
.mine-tab--no .icon { color: var(--ardoise); }
.mine-tab--gardes .icon { color: var(--bleu-clair-texte); }
.mine-tab--avoir .icon { color: var(--bleu-action); }
.mine-tab__count {
    min-width: 26px; padding: 1px 8px; border-radius: var(--r-full);
    background: #EEF2F6; font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums;
}
.mine-tab[aria-current="page"] { border-color: transparent; background: var(--bleu-nuit); color: #fff; }
.mine-tab--favorite[aria-current="page"] { background: var(--vert); }
.mine-tab--fallback[aria-current="page"] { background: var(--ambre); }
.mine-tab--no[aria-current="page"] { background: var(--ardoise); }
.mine-tab--gardes[aria-current="page"] { background: var(--bleu-clair-texte); }
.mine-tab--avoir[aria-current="page"] { background: var(--bleu-action); }
.mine-tab[aria-current="page"] .icon { color: #fff; }
.mine-tab[aria-current="page"] .mine-tab__count { background: rgba(255, 255, 255, .22); }

/* La liste : une seule carte, page par page, une ligne par objet. */
.mine-list {
    list-style: none; margin-block: 0; padding: 0;
    background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-xl);
    box-shadow: var(--ombre); overflow: hidden;
}
.mine-page {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-3) var(--e-4); background: var(--surface-douce);
    border-top: 1px solid var(--bordure);
}
.mine-page:first-child { border-top: 0; }
.stack-lg > .mine-list { margin-top: var(--e-5); }   /* sinon la liste colle aux tuiles de résumé */
.mine-page__mark {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--teinte-plein, var(--teinte)); color: #fff;
}
.mine-page__mark .icon { width: 18px; height: 18px; stroke-width: 2; }
.mine-page__name { flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; }
.mine-page__count { font-size: .82rem; color: var(--texte-secondaire); white-space: nowrap; }

.mine-item {
    /* Le titre garde au moins 220 px ; la colonne des réponses prend le reste et passe à la ligne si besoin. */
    display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, max-content); align-items: center; gap: var(--e-2) var(--e-4);
    padding: var(--e-3) var(--e-4); border-top: 1px solid var(--bordure);
    content-visibility: auto; contain-intrinsic-size: auto 80px;
}
.mine-item__link { display: flex; align-items: center; gap: var(--e-3); min-width: 0; color: inherit; }
.mine-item__link:hover { text-decoration: none; }
.mine-item__link:hover .mine-item__title { color: var(--bleu-action); }
.mine-item__thumb {
    position: relative; flex: none; width: 56px; height: 56px;
    border-radius: var(--r-md); overflow: hidden; background: #EEF2F6;
}
.mine-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mine-item__thumb .no-photo .icon { stroke-width: 1.8; }
.mine-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mine-item__title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mine-item__meta { font-size: .82rem; color: var(--texte-secondaire); }
.mine-item__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--e-2) var(--e-3); min-width: 0; }
.mine-item__side .choices { flex: none; width: 150px; margin-left: auto; }
/* « Combien ? … J'en garde » : sa propre ligne sous la rangée, à droite — jamais dans la colonne
   des réponses, qui écraserait le titre. */
.mine-item__keep { grid-column: 1 / -1; justify-self: end; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }

/* Statut de l'objet vu de moi (CHX-07). Neutre par défaut : gardé par un
   autre, voulu par d'autres, personne n'en veut. */
.mine-status {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: var(--r-md);
    font-size: .8rem; font-weight: 600; line-height: 1.3;
    background: #EEF2F6; color: #475467;
}
a.mine-status:hover { text-decoration: none; box-shadow: inset 0 0 0 1px currentColor; }
.mine-status--alone { background: var(--vert-clair); color: var(--vert); }
.mine-status--multiple { background: var(--rose-clair); color: #BE123C; }
.mine-status--kept { background: var(--bleu-clair); color: var(--bleu-clair-texte); }
.mine-status--awaiting, .mine-status--also { background: var(--bleu-clair); color: var(--bleu-clair-texte); }
.mine-status--pending { background: #EEF4FF; color: var(--bleu-action-fonce); }

.mine-more { padding: var(--e-3); text-align: center; border-top: 1px solid var(--bordure); }

/* Téléphone : le statut et les réponses passent sous le titre. */
@media (max-width: 699px) {
    .mine-item { grid-template-columns: minmax(0, 1fr); padding: var(--e-3); }
    .mine-page { padding: var(--e-3); }
    .mine-item__side { justify-content: space-between; }
    .mine-item__side .choices { width: 138px; }
}

/* ------------------------------ Demandes multiples (CHX-04, ATT-10, TDB-05) */
/* Rose pour « Demande multiple », bleu pour « En attente d'accord » : les
   couleurs du tableau 11 (§ 6.2). */
.conflicts-intro {
    display: flex; align-items: flex-start; gap: var(--e-2); margin: 0;
    padding: var(--e-3) var(--e-4); border-radius: var(--r-lg);
    background: var(--bleu-clair); color: var(--bleu-clair-texte); font-size: .88rem;
}
.conflicts-intro .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.conflicts-title { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: 1.1rem; }
.conflicts-subtitle { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: .95rem; color: var(--texte-secondaire); }
.conflicts-title__count {
    min-width: 26px; padding: 1px 8px; border-radius: var(--r-full);
    background: #EEF2F6; color: #475467; font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums;
}
.conflicts { display: grid; gap: var(--e-3); }
@media (min-width: 1100px) { .conflicts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.conflict {
    display: flex; flex-direction: column; gap: var(--e-3);
    padding: var(--e-4); border-radius: var(--r-xl);
    background: var(--famille-voile); border: 1px solid var(--famille-bord);
    box-shadow: var(--ombre-carte);
}
.conflict__head { display: flex; align-items: center; gap: var(--e-3); min-width: 0; color: inherit; }
.conflict__head:hover { text-decoration: none; }
.conflict__head:hover .conflict__title { color: var(--bleu-action); }
.conflict__thumb {
    position: relative; flex: none; width: 56px; height: 56px;
    border-radius: var(--r-md); overflow: hidden; background: #EEF2F6;
}
.conflict__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.conflict__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conflict__title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.conflict__meta { font-size: .82rem; color: var(--texte-secondaire); }
.conflict__since {
    flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
    font-size: .78rem; color: var(--texte-secondaire); white-space: nowrap;
}
.conflict__since .icon { width: 14px; height: 14px; }

.conflict__people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.conflict__people li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.conflict__answer {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--r-full); font-size: .78rem; font-weight: 600;
}
.conflict__answer .icon { width: 14px; height: 14px; }
.conflict__answer--favorite { background: var(--vert-clair); color: var(--vert); }
.conflict__answer--fallback { background: var(--ambre-clair); color: var(--ambre); }
.conflict__person { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }

.conflict__proposal { margin: 0; font-size: .92rem; }
.conflict__approvals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.approval { display: flex; align-items: center; gap: var(--e-2); }
.approval .icon { flex: none; width: 18px; height: 18px; }
.approval--done { color: var(--vert); }
.approval--waiting { color: var(--ambre); }
.approval span { color: var(--texte); }

.conflict__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.conflict__actions form { margin: 0; }
/* Réponse de la personne concernée, juste au-dessus des gestes « Je le garde ». */
.conflict__choices { display: grid; gap: var(--e-2); }
.conflict__hint { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--texte-secondaire); }

/* « À régler avec les autres » sur « Mes choix » : une ligne par objet, tout à portée. */
.conflicts-hint {
    display: flex; align-items: center; gap: var(--e-2); margin: 0;
    font-size: .85rem; color: var(--texte-secondaire);
}
.conflicts-hint .icon { flex: none; width: 16px; height: 16px; }
.conflicts--compact { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
.conflict--row { gap: var(--e-2); padding: var(--e-3); border-radius: var(--r-lg); box-shadow: none; }
.crow__main { display: flex; align-items: center; gap: var(--e-3); }
.crow__head { flex: 1; min-width: 0; }
.conflict__thumb--small { width: 48px; height: 48px; }
.conflict--row .conflict__title {
    font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.crow__choices { flex: none; width: 138px; display: grid; gap: 3px; }
.crow__label { font-size: .75rem; font-weight: 600; color: var(--texte-secondaire); line-height: 1.2; white-space: nowrap; }
.crow__people { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.crow__who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.conflict__state {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-full);
    font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.conflict__state .icon { width: 13px; height: 13px; }
.conflict__state--todo { background: var(--bleu-clair); color: var(--bleu-clair-texte); }
.conflict__state--waiting { background: var(--ambre-clair); color: var(--ambre); }
.crow__actions { padding-top: 0; }
.conflict--row .conflict__hint { display: none; }
@media (max-width: 480px) {
    .crow__main { flex-wrap: wrap; }
    /* Petit écran : le texte et les trois boutons sur une seule ligne, pour rester compact. */
    .crow__choices { width: 100%; display: flex; align-items: center; gap: var(--e-3); }
    .crow__choices .choices { flex: 1; min-width: 0; }
}
@media (min-width: 900px) {
    /* Grand écran : tout tient sur deux lignes, les gestes à droite des noms. */
    .conflict--row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--e-4); }
    .crow__main { grid-column: 1; grid-row: 1; }
    .crow__people { grid-column: 1; grid-row: 2; }
    .crow__actions { grid-column: 2; grid-row: 1 / span 2; border-top: 0; padding-top: 0; justify-content: flex-end; max-width: 340px; }
}
.conflicts-more__toggle {
    list-style: none; cursor: pointer; text-align: center; padding: var(--e-2);
    font-size: .88rem; font-weight: 600; color: var(--bleu-action); border-radius: var(--r-lg);
}
.conflicts-more__toggle::-webkit-details-marker { display: none; }
.conflicts-more__toggle:hover { background: var(--surface-douce); }
.conflicts-more__close { display: none; }
.conflicts-more[open] .conflicts-more__open { display: none; }
.conflicts-more[open] .conflicts-more__close { display: inline; }
.conflicts-more[open] > .conflicts { margin-top: var(--e-2); }

/* ------------------------------------------------------- Cartes d'objet */
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.items--grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .items--grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .items--grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .items--grid { grid-template-columns: repeat(5, 1fr); } }

.item {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--ombre);
    content-visibility: auto; contain-intrinsic-size: 300px;
    display: flex; flex-direction: column;
}
.item:hover { border-color: var(--bordure-forte); }

.item__link { display: flex; gap: var(--e-3); padding: var(--e-3); color: inherit; align-items: flex-start; }
.item__link:hover { text-decoration: none; }
.items--grid .item__link { flex-direction: column; gap: var(--e-2); padding: 0; }

.item__thumb {
    width: 76px; height: 76px; flex: none; border-radius: var(--r-md);
    background: #EEF2F6; overflow: hidden; position: relative;
}
.items--grid .item__thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item__flags { position: absolute; top: var(--e-2); left: var(--e-2); display: flex; gap: 4px; flex-wrap: wrap; z-index: 1; }

/* Objet sans photo : image par défaut aux couleurs de sa page (partiel
   no-photo), qui remplit le cadre qui la reçoit — un dégradé coloré et un
   appareil photo barré, qu'on ne confond ni avec une photo ni avec une
   image qui n'a pas chargé. Le pictogramme suit la taille du cadre, de la
   vignette de liste à la carte du tri rapide. */
.no-photo {
    position: absolute; inset: 0;
    container-type: size;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: var(--e-2);
    background: linear-gradient(135deg, var(--teinte-fond, #EEF2F6) 0%, var(--teinte-vive, #CBD5E1) 100%);
    color: var(--teinte, var(--ardoise));
    text-align: center; line-height: 1.2;
}
.no-photo .icon {
    width: 32px; height: 32px;
    width: min(50cqmin, 64px); height: min(50cqmin, 64px);
    stroke-width: 1.6;
}
.no-photo__label { font-size: .78rem; font-weight: 600; color: var(--texte); }
.no-photo--large .icon { width: 72px; height: 72px; width: min(26cqmin, 88px); height: min(26cqmin, 88px); stroke-width: 1.4; }
.no-photo--large .no-photo__label { font-size: .95rem; }

/* Fiche d'un objet sans photo : même cadre qu'une photo de la fiche. */
.photo-empty { position: relative; width: 150px; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; }

.item__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.items--grid .item__body { padding: 0 var(--e-3); }
.item__title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.item__meta { color: var(--texte-secondaire); font-size: .82rem; }
.item__avatars { display: flex; gap: 3px; margin-top: var(--e-1); flex-wrap: wrap; }
.item__choices { padding: 0 var(--e-3) var(--e-3); margin-top: auto; }
.items--grid .item__choices { padding-top: var(--e-2); }

.avatar {
    width: 24px; height: 24px; border-radius: var(--r-full);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: .75rem; font-weight: 700; flex: none;
    border: 2px solid var(--surface);
}
.avatar--lg { width: 40px; height: 40px; font-size: .88rem; }
.avatar--ring-favorite { box-shadow: 0 0 0 2px var(--vert); }
.avatar--ring-fallback { box-shadow: 0 0 0 2px var(--ambre); }
.avatar--ring-no { box-shadow: 0 0 0 2px var(--ardoise); }

.banner {
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-2) var(--e-3); font-size: .85rem; font-weight: 600;
}
.banner .icon { width: 15px; height: 15px; }
.banner--assigned { background: var(--bleu-clair); color: var(--bleu-clair-texte); }
.banner--pending { background: var(--ambre-clair); color: var(--ambre); }
.banner--right { margin-left: auto; font-weight: 500; opacity: .8; }

/* --------------------------------------------------------- Les réponses */
/* CHX-01 : couleur + icône + libellé, jamais la couleur seule (§ 6.3) */
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); }
.choice {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    min-height: var(--cible); padding: var(--e-1) var(--e-2);
    background: var(--surface); border: 1px solid var(--bordure-forte);
    border-radius: var(--r-md); color: var(--texte-secondaire);
    font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.15;
    text-align: center; cursor: pointer;
}
.choice .icon { width: 15px; height: 15px; flex: none; }
.choice:hover { border-color: var(--ardoise); }
.choice[disabled] { opacity: .45; cursor: not-allowed; }
.choice--favorite[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.choice--fallback[aria-pressed="true"] { background: var(--ambre); border-color: var(--ambre); color: #fff; }
.choice--no[aria-pressed="true"] { background: var(--ardoise); border-color: var(--ardoise); color: #fff; }

.choices--compact { grid-template-columns: repeat(3, 1fr); }
/* § 6.3 : même en grille, la réponse reste une action principale — 44 px. */
.choices--compact .choice { min-height: var(--cible); padding: 0; }
.choices--compact .choice .icon { width: 17px; height: 17px; }

/* ------------------------------------------------------------ Tableaux */
.table-wrap { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--r-lg); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: var(--e-2) var(--e-3); text-align: left; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
table.data thead th {
    font-size: .75rem; color: var(--texte-secondaire); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; background: var(--surface-douce);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-douce); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Colonnes triables : le nom de la colonne est un bouton, avec une flèche sur la colonne triée. */
.sort-button {
    display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: inherit;
}
.sort-button:hover { color: var(--texte); }
.sort-button:focus-visible { outline: 3px solid var(--famille); outline-offset: 2px; border-radius: var(--r-sm); }
th[aria-sort="ascending"] .sort-button::after { content: "\2191"; }
th[aria-sort="descending"] .sort-button::after { content: "\2193"; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--texte); }
table.data thead th.num { text-align: right; }

/* Téléphone : l'en-tête est masqué, la barre « Trier par » prend le relais. */
.sort-bar { display: none; }
@media (max-width: 699px) {
    .sort-bar { display: flex; align-items: center; gap: var(--e-2); font-size: .88rem; color: var(--texte-secondaire); }
    .sort-bar select { flex: 1; min-width: 0; }
}

/* Suivi des votes sur téléphone : le tableau devient une pile de cartes, une par
   personne (chiffres en petites tuiles) ou par objet (une ligne par membre), au
   lieu de déborder de l'écran. L'ordinateur garde le tableau tel quel. */
@media (max-width: 699px) {
    .table-wrap:has(.data--stats, .data--cards) { overflow: visible; border: 0; background: none; border-radius: 0; }
    table.data--stats, table.data--cards,
    table.data--stats tbody, table.data--cards tbody { display: block; }
    table.data--stats thead, table.data--cards thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    table.data--stats tbody, table.data--cards tbody { display: grid; gap: var(--e-3); }
    table.data--stats tbody tr, table.data--cards tbody tr {
        display: grid; gap: var(--e-1) var(--e-2); padding: var(--e-3);
        border: 1px solid var(--bordure); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--ombre);
    }
    table.data--stats tbody tr:hover, table.data--cards tbody tr:hover { background: var(--surface); }
    table.data--stats td, table.data--cards td { padding: 0; border: 0; min-width: 0; }
    table.data--stats tbody tr:last-child td, table.data--cards tbody tr:last-child td { border: 0; }
    table.data--stats td.cell-main, table.data--cards td.cell-main { font-weight: 600; overflow-wrap: anywhere; }

    /* Par personne : le nom, la barre, puis six petites tuiles chiffrées (3 par ligne). */
    table.data--stats tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    table.data--stats td.cell-main { grid-column: 1 / -1; }
    table.data--stats td.num {
        display: flex; flex-direction: column-reverse; align-items: center; gap: 2px;
        padding: var(--e-2) var(--e-1); border-radius: var(--r-md); background: var(--surface-douce);
        text-align: center; font-size: 1.05rem; font-weight: 700;
    }
    table.data--stats td.num::after {
        content: attr(data-label); font-size: .75rem; font-weight: 600; color: var(--texte-secondaire);
        text-transform: uppercase; letter-spacing: .04em;
    }

    /* Par objet : le titre, puis une ligne « membre … réponse ». */
    table.data--cards td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
    table.data--cards td[data-label]::before { content: attr(data-label); color: var(--texte-secondaire); font-size: .84rem; min-width: 0; overflow-wrap: anywhere; }
    table.data--cards td.cell-main { padding-bottom: var(--e-2); border-bottom: 1px solid var(--bordure); margin-bottom: var(--e-1); }
}

/* ------------------------------------------------------------ Dialogues */
details.panel { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: var(--e-3) var(--e-4); }
details.panel > summary { cursor: pointer; font-weight: 600; font-size: .93rem; list-style: none; display: flex; align-items: center; gap: var(--e-2); }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel[open] > summary { margin-bottom: var(--e-3); }

dialog { border: 0; border-radius: var(--r-xl); padding: var(--e-5); max-width: 460px; width: calc(100% - 2 * var(--e-3)); box-shadow: var(--ombre-haute); }
dialog::backdrop { background: rgba(16, 24, 40, .5); }

/* ---------------------------------------------------------- Visionneuse */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 100%; max-height: 100%; touch-action: pinch-zoom; }
.lightbox__close { position: absolute; top: env(safe-area-inset-top, 10px); right: 10px; min-width: 44px; min-height: 44px; background: rgba(0, 0, 0, .45); border: 0; color: #fff; border-radius: var(--r-full); cursor: pointer; font-size: 1.1rem; }

/* ------------------------------------------ Photos d'un objet (OBJ-03, OBJ-04) */
.photo-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, 150px); gap: var(--e-3); align-items: start; }
.photo-list__item { display: grid; gap: var(--e-2); align-content: start; justify-items: start; width: 150px; }
.photo-list__item img { display: block; width: 150px; height: 150px; object-fit: cover; border-radius: var(--r-md); }
/* La carte « Ajouter une photo » (et les photos en cours d'envoi) partagent la grille des photos. */
.photo-list__add, .photo-list__add > form, .photo-list__add .uploads { display: contents; }
.photo-list .upload-card { width: 150px; }
.photo-list .upload-add__btn { width: 150px; height: 150px; min-height: 0; }
.photo-list__add > form > :is(p, button, .hint) { grid-column: 1 / -1; justify-self: start; }
.photo-list__add > form > button[hidden] { display: none; }
.file-input:focus-visible + .btn { outline: 3px solid var(--famille); outline-offset: 2px; }
.uploads { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.upload-item { display: grid; gap: 6px; padding: var(--e-2) var(--e-3); border: 1px solid var(--bordure); border-radius: var(--r-md); background: var(--surface-douce); font-size: .85rem; }
.upload-item .progress, .upload-item .progress__fill { display: block; }
.upload-item .progress__fill { transition: width .2s ease; }
.upload-item--done .progress__fill { background: var(--vert); }
.upload-item--error { border-color: #FCA5A5; background: #FEF2F2; color: #7F1D1D; }
.upload-item--error .progress { display: none; }
.upload-item .btn { justify-self: start; }

/* Nouvel objet : une carte par photo + carte « + » (camera.js, upload.js) */
.uploads--cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--e-3); }
.upload-card { position: relative; align-content: start; padding: 0; overflow: hidden; gap: 0; }
.upload-card__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-douce); }
.upload-card > span:not(.progress) { padding: 4px var(--e-2); font-size: .75rem; }
.upload-card .progress { margin: 0 var(--e-2) var(--e-2); }
.upload-card .btn { margin: 0 var(--e-2) var(--e-2); }
.upload-card__remove { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: var(--r-full); background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.upload-add[hidden] { display: none; }
.upload-add__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); min-height: 130px; height: 100%; border: 2px dashed var(--bleu-action); border-radius: var(--r-md); color: var(--bleu-action); font-size: .85rem; font-weight: 600; text-align: center; cursor: pointer; }
.upload-add__btn .icon { width: 28px; height: 28px; }
.file-input:focus-visible ~ .uploads .upload-add__btn { outline: 3px solid var(--famille); outline-offset: 2px; }

/* Écran caméra plein écran. Le flux est montré entier, dans son format
   (horizontal ou vertical selon l'appareil), au-dessus des commandes ; le
   même flux, flouté et agrandi, remplit le reste de l'écran (dvh : la
   hauteur réellement visible sur mobile). */
/* Fond bleu nuit tant que la caméra est ouverte : le téléphone reprend la
   couleur de la page sous sa barre de gestes, qui restait claire. */
body.camera-open { overflow: hidden; background: var(--cam-fond); }
/* camera.js recale top et height sur la zone visible réelle (visualViewport). */
.camera { position: fixed; top: 0; right: 0; left: 0; z-index: 100; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background: var(--cam-fond); }
.camera[hidden] { display: none; }
/* Rangée dans le formulaire (.stack), la caméra hériterait de son espacement de 12 px en haut. */
.stack > .camera { margin: 0; }
/* Pas de zoom au double appui : deux photos prises coup sur coup comptent pour deux. */
.camera button { touch-action: manipulation; }
.camera__backdrop {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    /* Agrandi pour que le flou ne laisse pas de liseré clair sur les bords. */
    transform: scale(1.25); filter: blur(28px) brightness(.65) saturate(1.2);
    pointer-events: none;
}
.camera__video { position: relative; display: block; flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.camera__close {
    position: absolute; z-index: 2; left: var(--e-3); top: max(var(--e-3), env(safe-area-inset-top));
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border-radius: var(--r-full); border: 1px solid rgba(255, 255, 255, .32); color: #fff; cursor: pointer;
    background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.camera__close .icon { width: 22px; height: 22px; stroke-width: 2.4; }
/* Changement de caméra : dans le coin opposé à la croix. */
.camera__flip {
    position: absolute; z-index: 2; right: var(--e-3); top: max(var(--e-3), env(safe-area-inset-top));
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border-radius: var(--r-full); border: 1px solid rgba(255, 255, 255, .32); color: #fff; cursor: pointer;
    background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform .3s ease;
}
.camera__flip[hidden] { display: none; }
.camera__flip .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.camera__flip--turn { transform: rotate(180deg); }
/* Caméra avant : aperçu en miroir, comme un selfie ; la photo, elle, reste dans le bon sens. */
.camera--front .camera__video, .camera--front .camera__backdrop { transform: scaleX(-1); }
.camera--front .camera__backdrop { transform: scale(-1.25, 1.25); }
.camera__video { touch-action: none; }
@media (prefers-reduced-motion: reduce) { .camera__flip { transition: none; } }
/* Retour d'envoi, en haut au centre, à hauteur de la croix. */
.camera__toast {
    position: absolute; z-index: 2; left: 50%; top: max(var(--e-3), env(safe-area-inset-top));
    max-width: calc(100% - 140px); padding: 12px 16px; border-radius: var(--r-full);
    font-size: .9rem; font-weight: 600; text-align: center; color: #fff;
    background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transform: translateX(-50%); animation: camera-toast-in .25s ease-out;
}
.camera__toast[hidden] { display: none; }
.camera__toast--sent { background: var(--vert); }
.camera__toast--error { background: #B91C1C; }
.camera__toast--sending::after {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
    animation: camera-spin .8s linear infinite;
}
.camera__badge--pop { animation: camera-pop .4s ease-out; }
@keyframes camera-toast-in { from { opacity: 0; transform: translate(-50%, -8px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes camera-spin { to { transform: rotate(360deg); } }
@keyframes camera-pop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .camera__toast, .camera__toast--sending::after, .camera__badge--pop { animation: none; }
}
.camera__bar {
    position: relative; flex: none;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center;
    /* Rien en haut ; 65 px sous la rangée de boutons, qui contiennent les
       libellés et la barre de gestes du téléphone. */
    padding: 0 var(--e-4) 38px;
    background: linear-gradient(to top, color-mix(in srgb, var(--cam-fond) 90%, transparent) 0%, color-mix(in srgb, var(--cam-fond) 55%, transparent) 70%, transparent 100%);
}
/* Le libellé est sous le rond, hors de la boîte : les ronds et le
   déclencheur partagent ainsi le même axe horizontal. */
.camera__action { position: relative; padding: 0; background: none; border: 0; color: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.camera__round {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--famille) 70%, transparent); border: 1px solid color-mix(in srgb, #fff 45%, var(--famille));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform .12s ease, background .15s ease;
}
.camera__round .icon { width: 26px; height: 26px; stroke-width: 2; }
.camera__action:active .camera__round { transform: scale(.92); }
.camera__action--done .camera__round { background: var(--famille); border-color: #fff; color: #fff; }
.camera__action--done .camera__round .icon { stroke-width: 2.6; }
.camera__label {
    position: absolute; top: calc(100% + var(--e-2)); left: 50%; transform: translateX(-50%);
    font-family: var(--police-titres); font-size: .95rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.camera__badge {
    position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 7px;
    border-radius: var(--r-full); border: 2px solid #fff;
    background: var(--famille-fonce); color: #fff; font-size: .78rem; font-weight: 700; line-height: 20px; text-align: center;
}
.camera__badge[hidden] { display: none; }
.camera__shutter {
    width: 78px; height: 78px; padding: 0; border-radius: var(--r-full); border: 4px solid #fff;
    background: #fff; box-shadow: inset 0 0 0 4px var(--famille), 0 4px 16px rgba(0, 0, 0, .3);
    cursor: pointer; transition: transform .12s ease; -webkit-tap-highlight-color: transparent;
}
.camera__shutter:active { transform: scale(.92); }
.camera__action:focus-visible { outline: none; }
.camera__action:focus-visible .camera__round, .camera__shutter:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.camera--flash .camera__video { opacity: .4; }
@media (prefers-reduced-motion: reduce) { .camera__round, .camera__shutter { transition: none; } }
/* Téléphone tenu à l'horizontale : les commandes passent en colonne à droite,
   comme sur l'appareil photo du téléphone, pour laisser la hauteur à l'image. */
@media (orientation: landscape) and (max-height: 500px) {
    .camera { flex-direction: row; }
    .camera__bar {
        grid-template-columns: none; grid-template-rows: repeat(3, minmax(0, 1fr));
        padding: var(--e-3) calc(var(--e-5) + env(safe-area-inset-right, 0px)) var(--e-5) var(--e-5);
        background: linear-gradient(to left, color-mix(in srgb, var(--cam-fond) 90%, transparent) 0%, color-mix(in srgb, var(--cam-fond) 55%, transparent) 70%, transparent 100%);
    }
    .camera__shutter { order: 0; }
}
.thumb-preview { display: block; width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); object-fit: cover; }

/* Photo de couverture d'une maison (MAI-01, MAI-02) */
.house-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 4; object-fit: cover; border-radius: var(--r-md); }
.house-cover--preview { max-width: 320px; }
.savebar {
    position: fixed; left: 50%; transform: translateX(-50%); z-index: 40;
    bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom, 0px) + var(--e-3));
    width: min(calc(100vw - 32px), 560px); box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
    padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-radius: var(--r-lg);
    background: #0F172A; color: #fff; box-shadow: var(--ombre-haute);
}
.savebar[hidden] { display: none; }
.savebar__text { display: inline-flex; align-items: center; gap: var(--e-2); font-size: .9rem; }
@media (min-width: 1000px) { .savebar { bottom: var(--e-5); } }
.cover-field { display: grid; gap: var(--e-3); max-width: 520px; }
.cover-field .label { font-weight: 600; }
.cover-current { margin: 0; display: grid; gap: var(--e-2); }
.cover-current .house-cover { height: auto; aspect-ratio: 16 / 4; max-width: 520px; }
.cover-current--replaced { opacity: .5; }
.dropzone {
    position: relative; display: grid; justify-items: center; gap: var(--e-1); padding: var(--e-5) var(--e-4);
    border: 2px dashed var(--bordure-forte); border-radius: var(--r-lg); background: var(--surface-douce);
    text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone--over, .dropzone:focus-within { border-color: var(--bleu-nuit); background: var(--surface); }
.dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone__icon .icon { width: 32px; height: 32px; }
.dropzone__title { font-weight: 600; }
.dropzone__sub { color: var(--texte-secondaire); font-size: .85rem; }
.cover-editor__head { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.cover-editor__name { font-size: .88rem; overflow-wrap: anywhere; }
.cover-editor__zoomrow { display: flex; align-items: center; gap: var(--e-3); font-size: .88rem; }
.cover-editor__zoomrow .cover-editor__zoom { flex: 1; }
.cover-editor__placeholder {
    display: grid; gap: var(--e-1); place-content: center; text-align: center; aspect-ratio: 16 / 4;
    padding: var(--e-4); border-radius: var(--r-md); background: var(--surface-douce); font-size: .88rem;
}
.cover-editor { display: grid; gap: var(--e-2); max-width: 520px; padding: var(--e-3); border: 1px solid var(--bordure); border-radius: var(--r-lg); background: var(--surface); }
.cover-editor__canvas { display: block; width: 100%; aspect-ratio: 16 / 4; border-radius: var(--r-md); background: #000; cursor: grab; touch-action: none; }
.cover-editor__canvas:active { cursor: grabbing; }
.cover-editor__zoom { width: 100%; }

/* ------------------------------------------------------ Écran de conflit */
.conflict { display: grid; gap: var(--e-3); }
.conflict__row { display: grid; gap: var(--e-2); padding: var(--e-3); border: 1px solid var(--bordure); border-radius: var(--r-md); }
@media (min-width: 700px) { .conflict__row { grid-template-columns: 1fr 1fr; } }
.conflict__side { background: var(--surface-douce); padding: var(--e-3); border-radius: var(--r-sm); }

/* ----------------------------------------------------------- Mot de passe */
.secret {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem; letter-spacing: .02em;
    background: var(--surface-douce); border: 1px dashed var(--bordure-forte);
    border-radius: var(--r-md); padding: var(--e-3); word-break: break-all;
}

/* ------------------------------------------------------- Administration */
.admin-nav { display: flex; gap: var(--e-2); overflow-x: auto; padding-bottom: var(--e-2); margin-bottom: var(--e-4); }
.admin-nav a {
    display: inline-flex; align-items: center; gap: var(--e-1);
    white-space: nowrap; min-height: var(--cible); padding: 0 var(--e-3);
    border-radius: var(--r-md); color: var(--texte); font-size: .88rem; font-weight: 500;
}
.admin-nav a:hover { background: var(--surface-douce); text-decoration: none; }
.admin-nav a[aria-current="page"] { background: var(--bleu-nuit); color: #fff; }
.admin-nav .icon { width: 16px; height: 16px; }

.kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
@media (min-width: 760px) { .kpi { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.kpi__card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-lg);
    padding: var(--e-4);
    color: inherit;
    text-decoration: none;
}
.kpi__card:hover { text-decoration: none; }
.kpi__label { color: var(--texte-secondaire); font-size: .78rem; display: flex; align-items: center; gap: var(--e-1); }
.kpi__value { font-size: 1.6rem; font-weight: 700; margin-top: var(--e-1); }
.kpi__hint { font-size: .76rem; color: var(--texte-secondaire); }

.two-cols { display: grid; gap: var(--e-4); }
@media (min-width: 1000px) { .two-cols { grid-template-columns: 1fr 1fr; } }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--e-1) var(--e-4); font-size: .88rem; }
.kv dt { color: var(--texte-secondaire); }
.kv dd { margin: 0; }

.state { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; }
.state::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--ardoise); }
.state--ok { color: var(--vert); }
.state--ok::before { background: var(--vert); }
.state--warn { color: var(--ambre); }
.state--warn::before { background: var(--ambre); }
.state--ko { color: var(--rose); }
.state--ko::before { background: var(--rose); }

/* ---------------------------------------- Tri rapide (M07, CHX-06) */
/* Plein écran, sans défilement, sur téléphone comme sur ordinateur :
   l'écran est une colonne de la hauteur exacte de la fenêtre (position
   fixe, qui suit aussi les barres escamotables des navigateurs mobiles).
   En-tête, boutons et pied gardent leur taille ; seule la carte est
   élastique, et la photo s'y loge entière, quel que soit son format. */
body.immersive { overflow: hidden; overscroll-behavior: none; }
.immersive-main { position: fixed; inset: 0; overflow: hidden; }
body.immersive .toast { top: calc(env(safe-area-inset-top, 0px) + 76px); bottom: auto; }
/* Message rendu par le serveur (après « Annuler ») : il s'efface seul,
   même sans JavaScript. */
.toast--flash { animation: toast-out .3s ease 4s forwards; }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }

.qs {
    --qs-largeur: 560px;
    height: 100%;
    width: 100%;
    max-width: var(--qs-largeur);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: env(safe-area-inset-top, 0px) var(--e-4) env(safe-area-inset-bottom, 0px);
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
/* Ordinateur : colonne centrée, plus large quand la fenêtre est haute,
   pour que la photo garde des proportions équilibrées. */
@media (min-width: 700px) {
    .qs { --qs-largeur: min(680px, max(480px, calc(100vh - 220px))); }
}

.qs__head {
    flex: none; position: relative; z-index: 5;
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-3) 0 var(--e-2);
}
.qs__icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--cible); min-height: var(--cible);
    border-radius: var(--r-lg); background: var(--surface); color: var(--bleu-nuit);
    box-shadow: var(--ombre-carte); cursor: pointer; list-style: none;
}
.qs__icon:hover { background: var(--surface-douce); text-decoration: none; }
.qs__icon::-webkit-details-marker { display: none; }
.qs__icon .icon { width: 22px; height: 22px; }
.qs__heading { flex: 1; min-width: 0; text-align: center; }
.qs__title { margin: 0; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs__count { margin: 0; font-size: .82rem; color: var(--texte-secondaire); }

/* Filtre : trier toute la maison ou une seule page. */
.qs__filter { position: relative; flex: none; }
.qs__filter[open] > .qs__icon { background: var(--bleu-nuit); color: #fff; }
/* Fermé, le menu ne doit ni s'afficher ni capter le doigt : sans cette
   règle, « display: flex » le laisse en place, invisible, sur la carte. */
.qs__filter:not([open]) > .qs__menu { display: none; }
.qs__menu {
    position: absolute; top: calc(100% + var(--e-2)); right: 0; z-index: 20;
    width: min(300px, calc(100vw - 2 * var(--e-4)));
    max-height: min(60vh, 420px); overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px; padding: var(--e-2);
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--r-lg); box-shadow: var(--ombre-haute);
}
.qs__menu a {
    display: flex; align-items: center; gap: var(--e-2);
    min-height: var(--cible); padding: 0 var(--e-2); border-radius: var(--r-md);
    color: var(--texte); font-size: .92rem;
}
.qs__menu a:hover { background: var(--surface-douce); text-decoration: none; }
.qs__menu a[aria-current="page"] { background: #EEF4FF; color: var(--bleu-action-fonce); font-weight: 600; }
.qs__menu-icon { width: 28px; height: 28px; flex: none; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; }
.qs__menu-icon .icon { width: 16px; height: 16px; }
.qs__menu-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs__menu-count { color: var(--texte-secondaire); font-size: .8rem; font-variant-numeric: tabular-nums; }

.qs__progress { flex: none; height: 4px; border-radius: var(--r-full); background: var(--bordure); overflow: hidden; }
.qs__progress span { display: block; height: 100%; border-radius: var(--r-full); background: var(--vert); transition: width .3s ease; }

/* La scène : tout l'espace restant, jamais plus. */
.qs__stage { flex: 1 1 auto; min-height: 0; display: flex; padding: var(--e-3) 0; }
.qs__deck { position: relative; flex: 1; min-width: 0; }

/* ------------------------------------------------------------- La carte */
.qs-card {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    background: var(--surface); border-radius: 22px; overflow: hidden;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
    transform-origin: 50% 90%;
    touch-action: none;
    -webkit-touch-callout: none;
}
.qs-card[data-card] { cursor: grab; }
.qs-card.is-dragging { cursor: grabbing; }
.qs-card.is-settling { transition: transform .3s cubic-bezier(.2, .9, .3, 1.15); }
.qs-card.is-leaving { transition: transform .28s ease-in; }
/* La suivante attend dessous, réduite depuis son bord bas : seule une
   lisière blanche dépasse, jamais son texte. */
.qs-card--next {
    transform-origin: 50% 100%;
    transform: translateY(8px) scale(.95);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .08);
    pointer-events: none;
    animation: qs-arrivee .35s ease-out;
}
.qs-card--next.is-rising { transition: transform .28s ease-out; }
@keyframes qs-arrivee { from { opacity: 0; transform: translateY(8px) scale(.9); } }
/* Retour d'une carte après « Annuler », depuis le côté où elle était partie. */
.qs-card.is-back-favorite { animation: qs-retour-droite .35s ease-out; }
.qs-card.is-back-no { animation: qs-retour-gauche .35s ease-out; }
.qs-card.is-back-fallback { animation: qs-retour-haut .35s ease-out; }
@keyframes qs-retour-droite { from { transform: translateX(120%) rotate(16deg); } }
@keyframes qs-retour-gauche { from { transform: translateX(-120%) rotate(-16deg); } }
@keyframes qs-retour-haut { from { transform: translateY(-120%); } }

.qs-card__media { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #E6EAF0; }
.qs-card__media img { -webkit-user-drag: none; user-select: none; }
.qs-card__backdrop {
    position: absolute; inset: -24px;
    width: calc(100% + 48px); height: calc(100% + 48px);
    object-fit: cover; filter: blur(22px) saturate(1.15); opacity: .8;
}
.qs-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Plusieurs photos : repères en haut, moitiés gauche et droite pour passer
   de l'une à l'autre (visibles au survol sur ordinateur). */
.qs-card__bars { position: absolute; top: 8px; left: 12px; right: 12px; z-index: 2; display: flex; gap: 4px; pointer-events: none; }
.qs-card__bars span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .5); box-shadow: 0 0 2px rgba(16, 24, 40, .35); }
.qs-card__bars .is-on { background: #fff; }
.qs-card__nav { display: none; }
.qs.is-enhanced .qs-card__nav {
    position: absolute; top: 0; bottom: 0; z-index: 1; width: 50%;
    display: flex; align-items: center; padding: 0 var(--e-2);
    background: none; border: 0; color: #fff; cursor: pointer;
}
.qs-card__nav--prev { left: 0; justify-content: flex-start; }
.qs-card__nav--next { right: 0; justify-content: flex-end; }
.qs-card__nav .icon {
    width: 36px; height: 36px; padding: 7px; border-radius: var(--r-full);
    background: rgba(16, 24, 40, .45); opacity: 0; pointer-events: none;
}
/* Au changement de photo, la flèche apparaît brièvement dans le sens du geste, puis disparaît. */
.qs-card__nav--next .icon.is-flashing { animation: qs-fleche-suivante .5s ease-out; }
.qs-card__nav--prev .icon.is-flashing { animation: qs-fleche-precedente .5s ease-out; }
@keyframes qs-fleche-suivante {
    0%   { opacity: 0; transform: translateX(-14px) scale(.7); }
    35%  { opacity: 1; transform: translateX(0) scale(1.1); }
    70%  { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0; transform: translateX(8px) scale(.9); }
}
@keyframes qs-fleche-precedente {
    0%   { opacity: 0; transform: translateX(14px) scale(.7); }
    35%  { opacity: 1; transform: translateX(0) scale(1.1); }
    70%  { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0; transform: translateX(-8px) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
    .qs-card__nav .icon.is-flashing { animation-duration: .01s; }
}

/* Tampons du geste, comme sur les sites de rencontre. */
.qs-stamp {
    position: absolute; top: 24px; z-index: 3;
    padding: 2px 12px; border: 4px solid currentColor; border-radius: 12px;
    background: rgba(255, 255, 255, .88);
    font-family: var(--police-titres); font-weight: 600; font-size: clamp(1.1rem, 5.5vw, 1.5rem); line-height: 1.2;
    text-transform: uppercase; white-space: nowrap;
    opacity: 0; pointer-events: none;
}
.qs-stamp--favorite { left: 18px; color: var(--vert); transform: rotate(-12deg); }
.qs-stamp--no { right: 18px; color: var(--ardoise); transform: rotate(12deg); }
.qs-stamp--fallback { top: auto; bottom: 24px; left: 50%; color: var(--ambre); font-size: clamp(1rem, 4.4vw, 1.15rem); transform: translateX(-50%) rotate(-4deg); }

.qs-card__body { flex: none; position: relative; padding: var(--e-3) calc(var(--e-4) + 52px) var(--e-4) var(--e-4); }
.qs-card__where { margin: 0; font-size: .82rem; color: var(--texte-secondaire); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-card__title {
    margin: 2px 0 0; font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qs-card__chips { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: flex; gap: 6px; overflow: hidden; }
.qs-card__chips li {
    flex: none; display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--r-sm); background: #EEF2F6;
    font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.qs-card__chips .icon { width: 14px; height: 14px; color: var(--texte-secondaire); }
/* Champs personnalisés « sur la carte » : « Nom  valeur », une ligne chacun. */
.qs-card__fields { margin: var(--e-2) 0 0; display: grid; gap: 2px; font-size: .82rem; }
.qs-card__fields > div { display: flex; gap: var(--e-2); min-width: 0; }
.qs-card__fields dt { flex: none; color: var(--texte-secondaire); }
.qs-card__fields dt::after { content: " :"; }
.qs-card__fields dd { margin: 0; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-card__others { display: flex; align-items: center; gap: var(--e-2); margin: var(--e-2) 0 0; font-size: .8rem; color: var(--texte-secondaire); white-space: nowrap; }
.qs-card__avatars { display: flex; flex: none; }
.qs-card__avatars .avatar + .avatar { margin-left: -6px; }
/* Seul le texte se tronque : l'anneau des avatars (box-shadow) déborde de
   2 px autour de la ligne, et un overflow sur celle-ci le coupait. */
.qs-card__others-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qs-card__info {
    position: absolute; top: var(--e-3); right: var(--e-3);
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--cible); min-height: var(--cible); border-radius: var(--r-full);
    background: var(--surface-douce); border: 1px solid var(--bordure); color: var(--bleu-nuit);
}
.qs-card__info:hover { background: #EEF4FF; text-decoration: none; }
.qs-card__info .icon { width: 20px; height: 20px; }

/* ------------------------------------------- Les trois boutons ronds */
.qs__actions {
    flex: none; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--e-2);
    width: 100%; max-width: 380px; margin: 0 auto; padding-top: var(--e-1);
}
.qs-choice {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-height: var(--cible); padding: 0; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: .78rem; line-height: 1.25; color: var(--texte-secondaire); text-align: center;
}
.qs-choice__disc {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 64px; height: 64px; border-radius: var(--r-full);
    background: var(--surface); box-shadow: 0 6px 16px rgba(16, 24, 40, .12);
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.qs-choice__disc .icon { width: 28px; height: 28px; stroke-width: 2.2; }
.qs-choice--no .qs-choice__disc { color: var(--ardoise); }
.qs-choice--fallback .qs-choice__disc { width: 54px; height: 54px; margin-top: 5px; color: var(--ambre); }
.qs-choice--fallback .qs-choice__disc .icon { width: 24px; height: 24px; }
.qs-choice--favorite .qs-choice__disc { background: var(--vert); color: #fff; box-shadow: 0 8px 22px rgba(21, 128, 61, .35); }
.qs-choice:hover .qs-choice__disc { transform: scale(1.06); }
.qs-choice:active .qs-choice__disc, .qs-choice.is-armed .qs-choice__disc { transform: scale(1.14); }
.qs-choice--no.is-armed .qs-choice__disc { background: var(--ardoise); color: #fff; }
.qs-choice--fallback.is-armed .qs-choice__disc { background: var(--ambre); color: #fff; }
.qs-choice:focus-visible { outline: none; }
.qs-choice:focus-visible .qs-choice__disc { outline: 3px solid var(--bleu-action); outline-offset: 3px; }

.qs__foot {
    flex: none; display: flex; align-items: center; justify-content: center; gap: var(--e-3);
    min-height: 52px; padding-bottom: var(--e-1);
    font-size: .82rem; color: var(--texte-secondaire);
}
.qs__undo {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--cible); padding: 0 var(--e-2); border: 0; border-radius: var(--r-md);
    background: none; color: var(--texte-secondaire); font: inherit; font-weight: 600; cursor: pointer;
}
.qs__undo:hover { background: #EEF4FF; color: var(--bleu-action-fonce); }
.qs__undo .icon { width: 17px; height: 17px; }
.qs__hint { margin: 0; text-align: center; }
.qs__hint--keys { display: none; }
@media (hover: hover) and (pointer: fine) {
    .qs__hint--touch { display: none; }
    .qs__hint--keys { display: inline; }
}

/* Plus rien à trier. */
.qs-done {
    margin: auto; max-width: 380px; text-align: center;
    padding: var(--e-6) var(--e-5); border-radius: 22px;
    background: var(--surface); box-shadow: var(--ombre-carte);
}
.qs-done__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; margin-bottom: var(--e-3); border-radius: var(--r-full);
    background: var(--vert-clair); color: var(--vert);
}
.qs-done__icon .icon { width: 36px; height: 36px; stroke-width: 2.4; }
.qs-done__actions { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-4); }

/* Petits écrans en hauteur : on resserre, sans jamais rien couper
   d'essentiel (photo, titre, trois réponses). */
@media (max-height: 680px) {
    .qs__head { padding: var(--e-2) 0 var(--e-1); }
    .qs__stage { padding: var(--e-2) 0; }
    .qs-card__body { padding-top: var(--e-2); padding-bottom: var(--e-3); }
    .qs-card__title { font-size: 1.12rem; -webkit-line-clamp: 1; }
    .qs-card__others { display: none; }
    .qs-card__fields > div:nth-child(n+2) { display: none; }
    .qs-choice__disc { width: 56px; height: 56px; }
    .qs-choice--fallback .qs-choice__disc { width: 48px; height: 48px; margin-top: 4px; }
    .qs__foot { min-height: var(--cible); }
}
@media (max-height: 560px) {
    .qs__hint { display: none; }
    .qs-card__chips, .qs-card__fields { display: none; }
}

/* Téléphone à l'horizontale : la carte à gauche (photo et texte côte à
   côte), les trois réponses en colonne à droite. */
@media (max-height: 500px) and (orientation: landscape) {
    .qs {
        --qs-largeur: 100%;
        display: grid; column-gap: var(--e-4);
        grid-template-columns: minmax(0, 1fr) 190px;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        padding-left: max(var(--e-4), env(safe-area-inset-left, 0px));
        padding-right: max(var(--e-4), env(safe-area-inset-right, 0px));
    }
    .qs__head, .qs__progress { grid-column: 1 / -1; }
    .qs__stage { grid-column: 1; grid-row: 3 / 5; }
    .qs-card { flex-direction: row; }
    /* La suivante reste entièrement cachée : dessous, c'est sa photo qui
       dépasserait, et non une lisière blanche. */
    .qs-card--next { transform: scale(.96); }
    .qs-card__media { flex: 1 1 62%; }
    .qs-card__body { flex: 0 0 38%; padding-right: var(--e-4); padding-top: calc(var(--e-3) + 52px); }
    .qs-card__info { top: var(--e-2); right: var(--e-2); }
    .qs-card__title { -webkit-line-clamp: 3; }
    /* La colonne de texte a la place que la hauteur refuse ailleurs. */
    .qs-card__chips { display: flex; flex-wrap: wrap; }
    .qs-card__fields { display: grid; }
    .qs-card__fields > div:nth-child(n+2) { display: flex; }
    .qs-card__others { display: flex; }
    .qs__actions {
        grid-column: 2; grid-row: 3; align-self: center;
        display: flex; flex-direction: column; gap: var(--e-2); max-width: none; padding: 0;
    }
    .qs-choice { flex-direction: row; gap: var(--e-2); text-align: left; }
    .qs-choice__disc, .qs-choice--fallback .qs-choice__disc { width: 50px; height: 50px; margin: 0; }
    .qs__foot { grid-column: 2; grid-row: 4; min-height: var(--cible); }
}

/* ------------------------------------------------------------ Divers */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
    .sidebar, .topbar, .bottom-nav, .footer, .chips, .choices, .toast, .admin-nav { display: none !important; }
    body { background: #fff; }
    .shell { padding: 0; }
    .item { break-inside: avoid; box-shadow: none; }
}

/* ------------------------------------------------------------ Menu mobile */
.menu { display: flex; flex-direction: column; gap: var(--e-5); max-width: 560px; margin: 0 auto; }

.menu-id {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-4); border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-nuit-fonce) 100%);
    color: #fff; box-shadow: var(--ombre-carte);
}
.menu-id:hover { color: #fff; text-decoration: none; }
.menu-id .avatar--lg { width: 48px; height: 48px; flex: none; }
.menu-id__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
.menu-id__text strong { font-family: var(--police-titres); font-size: 1.05rem; }
.menu-id__text > span:not(.badge) { font-size: .82rem; opacity: .9; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.menu-id__text .badge { margin-top: 4px; }
.menu-id__switch { margin-left: auto; display: inline-flex; align-items: center; font-size: .8rem; opacity: .92; white-space: nowrap; }
.menu-id__switch .icon { width: 16px; height: 16px; }

.menu-group { display: flex; flex-direction: column; gap: var(--e-2); }
.menu-group__title {
    margin: 0 var(--e-2); font-size: .75rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--texte-secondaire); font-family: var(--police);
}
.menu-group--manager .menu-group__title { color: var(--ambre); }
.menu-group--manager .menu-list { border-color: #F5D9A6; }

.menu-list {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--r-xl); box-shadow: var(--ombre-carte); overflow: hidden;
}
.menu-item {
    display: flex; align-items: center; gap: var(--e-3);
    min-height: 52px; padding: var(--e-2) var(--e-4);
    color: var(--texte); border-top: 1px solid var(--bordure);
}
.menu-item:first-child { border-top: 0; }
.menu-item:hover, .menu-item:active { background: var(--surface-douce); text-decoration: none; color: var(--texte); }
.menu-item__icon {
    flex: none; width: 34px; height: 34px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    background: #EEF4FF; color: var(--bleu-action);
}
.menu-item__icon .icon { width: 18px; height: 18px; }
.menu-item__icon .dot { width: 12px; height: 12px; border-radius: var(--r-full); }
.menu-group--manager .menu-item__icon { background: var(--ambre-clair); color: var(--ambre); }
.menu-item__text { display: flex; flex-direction: column; min-width: 0; }
.menu-item__label { font-size: .95rem; font-weight: 500; }
.menu-item__sub { font-size: .76rem; color: var(--texte-secondaire); }
.menu-item__count {
    margin-left: auto; min-width: 24px; padding: 2px 8px; border-radius: var(--r-full);
    background: var(--surface-douce); border: 1px solid var(--bordure);
    font-size: .76rem; font-weight: 600; text-align: center; color: var(--texte-secondaire);
}
.menu-item__count--alert { background: var(--ambre-clair); border-color: transparent; color: var(--ambre); }
.menu-item__chevron { flex: none; width: 16px; height: 16px; color: var(--bordure-forte); }
.menu-item__count + .menu-item__chevron { margin-left: 0; }
.menu-item__text + .menu-item__chevron { margin-left: auto; }

.menu-members {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--r-xl); box-shadow: var(--ombre-carte);
}
.menu-members summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: var(--e-3) var(--e-4); margin: 0; }
.menu-members summary::-webkit-details-marker { display: none; }
.menu-members summary .icon { width: 16px; height: 16px; transition: transform .15s; }
.menu-members[open] summary .icon { transform: rotate(90deg); }
.menu-members__list { list-style: none; margin: 0; padding: 0 var(--e-4) var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); }

.menu-logout { width: 100%; justify-content: center; margin-top: var(--e-2); color: var(--rose); }
.btn.menu-logout { color: var(--rose); }   /* .btn--secondary, plus bas, reprenait la couleur du texte */
:where(html[data-theme="dark"]) .btn.menu-logout { color: var(--t-rose); }

/* ------------------------------------------------- Couleur de la famille */
/* layout.php pose --famille sur <body> quand on est dans une maison ; sans
   elle, le bleu nuit habituel. Les teintes sont volontairement légères :
   un voile sur les fonds, un liseré sur les bordures, la couleur pleine
   seulement sur l'en-tête, la carte d'accueil et les éléments actifs. */
:root { --famille: var(--bleu-nuit); }
body {
    --famille-fonce: color-mix(in srgb, var(--famille) 78%, #000);
    /* Fond de l'écran caméra : la couleur de la maison, assombrie. */
    --cam-fond: color-mix(in srgb, var(--famille) 42%, #000);
    --famille-bord: color-mix(in srgb, var(--famille) 24%, var(--bordure));
    --famille-voile: color-mix(in srgb, var(--famille) 5%, #fff);
    --famille-clair: color-mix(in srgb, var(--famille) 12%, #fff);
    /* Fond des en-têtes à texte blanc : la couleur choisie, un peu assombrie, pour que le blanc
       reste lisible même sur l'orange ou le turquoise (≥ 4,5:1 sur les 12 couleurs). */
    --famille-fond: color-mix(in srgb, var(--famille) 80%, #000);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    body {
        --famille-fonce: var(--famille); --famille-fond: var(--famille); --famille-bord: var(--bordure);
        --famille-voile: var(--surface); --famille-clair: #EEF4FF;
    }
}

@media (max-width: 999px) { .topbar { background: var(--famille-fond); } }
@media (min-width: 1000px) {
    .topbar { border-bottom-color: var(--famille-bord); box-shadow: inset 0 3px 0 var(--famille); }
}
.hero { background: linear-gradient(135deg, var(--famille-fond) 0%, var(--famille-fonce) 100%); }
.stat, .tile, .item { background: var(--famille-voile); border-color: var(--famille-bord); }
.tile:hover, .item:hover { border-color: var(--famille); }
.tile .progress__fill { background: var(--famille); }
.stat__value--accent { color: var(--famille); }
.chip.is-on { background: var(--famille-fond); border-color: var(--famille-fond); }
.bottom-nav { border-top-color: var(--famille-bord); }
.bottom-nav__item[aria-current="page"] { color: var(--famille); }
.bottom-nav__shoot { background: var(--famille-fond); }
.bottom-nav__shoot:hover { background: var(--famille-fonce); }
.side-nav__item[aria-current="page"] { background: var(--famille-clair); color: var(--famille-fonce); }
.side-nav__item[aria-current="page"] .icon { color: var(--famille); }
.house-switch { background: var(--famille-fond); }
.house-switch:hover { background: var(--famille-fonce); }

/* ------------------------------------- Choix de couleur et d'icône (pages) */
.picker { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.swatch { position: relative; display: block; cursor: pointer; }
.swatch__dot {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--r-full);
    background: var(--teinte-plein, var(--teinte)); color: #fff;
    border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--bordure-forte);
    transition: transform .12s ease, box-shadow .12s ease;
}
.swatch__dot .icon { width: 18px; height: 18px; stroke-width: 3; opacity: 0; }
.swatch:hover .swatch__dot { transform: scale(1.08); }
.swatch input:checked + .swatch__dot { box-shadow: 0 0 0 3px var(--teinte); }
.swatch input:checked + .swatch__dot .icon { opacity: 1; }
.swatch input:focus-visible + .swatch__dot { outline: 3px solid var(--famille); outline-offset: 3px; }

.icon-picker {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: var(--e-2);
    max-height: 232px; overflow-y: auto; padding: var(--e-2);
    background: var(--surface); border: 2px solid var(--teinte, var(--bordure-forte)); border-radius: var(--r-lg);
    transition: border-color .15s ease;
}
.icon-choice { position: relative; display: block; cursor: pointer; }
.icon-choice__box {
    display: flex; align-items: center; justify-content: center; height: 48px;
    border: 1px solid var(--bordure); border-radius: var(--r-md);
    color: var(--texte-secondaire); background: var(--surface-douce);
    transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.icon-choice__box .icon { width: 24px; height: 24px; }
.icon-choice:hover .icon-choice__box { background: var(--teinte-fond, var(--famille-clair)); color: var(--teinte, var(--famille)); }
.icon-choice input:checked + .icon-choice__box {
    background: var(--teinte-fond, var(--famille-clair)); color: var(--teinte, var(--famille));
    border-color: var(--teinte, var(--famille)); box-shadow: 0 0 0 2px var(--teinte, var(--famille));
}
.icon-choice input:focus-visible + .icon-choice__box { outline: 3px solid var(--famille); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .swatch__dot, .icon-choice__box { transition: none; } }

/* ------------------------------------ Demandes multiples : cartes « à régler » */
/* Pas de bandeau sur le côté : une étiquette en tête dit de quoi il s'agit,
   les réponses se lisent dans un panneau blanc, les boutons sont séparés
   par un filet — comme les autres cartes teintées de la famille. */
.conflict__top { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.conflict__tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--r-full);
    background: var(--ambre-clair); color: var(--ambre);
    font-size: .76rem; font-weight: 700; letter-spacing: .02em;
}
.conflict__tag .icon { width: 14px; height: 14px; }
.conflict__tag--pending { background: var(--bleu-clair); color: var(--bleu-clair-texte); }
.conflict__since { align-self: auto; }
.conflict__thumb { border: 1px solid var(--famille-bord); }
.conflict__title { font-family: var(--police-titres); font-size: 1.02rem; }
.conflict__people, .conflict__approvals {
    padding: var(--e-3); background: var(--surface);
    border: 1px solid var(--bordure); border-radius: var(--r-lg);
}
.conflict__proposal { font-weight: 600; }
.conflict__actions { padding-top: var(--e-3); border-top: 1px solid var(--famille-bord); }

/* ------------------------------------------- Liste déroulante à pictogrammes */
.icon-select { position: relative; }
.icon-select__native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.icon-select__button {
    display: flex; align-items: center; gap: var(--e-2); width: 100%; min-height: var(--cible);
    padding: 0 var(--e-3); font: inherit; color: var(--texte); text-align: left; cursor: pointer;
    background: var(--surface); border: 1px solid var(--bordure-forte); border-radius: 10px;
}
.icon-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-select__caret { flex: none; color: var(--texte-secondaire); transform: rotate(90deg); }
.icon-select .icon { flex: none; width: 20px; height: 20px; }
.icon-select .avatar { border: 0; }
.row > .icon-select { flex: 1 1 220px; max-width: 280px; }
.icon-select__list {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: var(--e-1);
    max-height: 260px; overflow-y: auto; list-style: none; background: var(--surface);
    border: 1px solid var(--bordure-forte); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
}
.icon-select__list[hidden] { display: none; }
.icon-select__option { display: flex; align-items: center; gap: var(--e-2); min-height: var(--cible); padding: 0 var(--e-3); border-radius: 8px; cursor: pointer; }
.icon-select__option.is-active, .icon-select__option:hover { background: var(--surface-douce); }
.icon-select__option[aria-selected="true"] { font-weight: 600; }

/* Pictogramme d'une pièce : la grille de choix s'ouvre en fenêtre sous le bouton. */
.icon-menu { position: relative; flex: none; }
.icon-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--e-2); }
.icon-menu > summary::-webkit-details-marker { display: none; }
.icon-menu[open] > .icon-picker {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: min(340px, 80vw);
    max-height: 260px; background: var(--surface); box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
}

/* Pièces de la maison : une carte par pièce. En haut son pictogramme et son nom,
   en dessous ses actions regroupées : l'ordre (flèches liées entre elles, avec le
   menu « ⋮ ») d'un côté, la suppression (rouge, à part) de l'autre. */
.room-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.room-card {
    display: grid; gap: var(--e-3); padding: var(--e-3);
    background: var(--surface-douce); border: 1px solid var(--bordure); border-radius: var(--r-lg);
}
.room-form { flex: 1 1 260px; min-width: 0; flex-wrap: nowrap; }
.room-form__name { flex: 1 1 140px; min-width: 0; max-width: 360px; }
.room-form--add { flex-wrap: wrap; }
.room-card__main { flex-basis: auto; }
.room-card__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3);
    padding-top: var(--e-3); border-top: 1px solid var(--bordure);
}
.room-card__count { font-size: .85rem; color: var(--texte-secondaire); white-space: nowrap; }
.room-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-left: auto; }
.room-order {
    display: inline-flex; align-items: stretch; background: var(--surface);
    border: 1px solid var(--bordure-forte); border-radius: var(--r-md);
}
.room-order > form, .room-order > .move-menu { display: flex; }
.room-order .btn { border-radius: 0; border: 0; min-width: var(--cible); justify-content: center; }
.room-order > :first-child .btn { border-radius: calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px); }
.room-order > :last-child .btn, .room-order > :last-child > summary { border-radius: 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0; }
.room-order > * + * { border-left: 1px solid var(--bordure); }
.room-order .btn:disabled { opacity: .35; }
/* Le panneau « ⋮ » s'ouvre sous tout le groupe, aligné à sa gauche : il ne sort jamais de l'écran. */
.room-order { position: relative; }
.room-order > .move-menu { position: static; }
.room-order .move-menu__panel { left: 0; right: auto; }
.room-order .move-menu > summary { min-width: var(--cible); justify-content: center; }
.room-card__delete { display: flex; }
.room-card__delete .btn { gap: var(--e-2); }
@media (min-width: 640px) {
    .room-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .room-card__foot { border-top: 0; padding-top: 0; flex-wrap: nowrap; gap: var(--e-4); }
}
@media (max-width: 420px) {
    .room-form__name { max-width: none; }
    .room-card__foot { display: grid; grid-template-columns: 1fr; }
    .room-card__actions { justify-content: space-between; margin-left: 0; }
    .room-card__delete { margin-left: auto; }
}

/* Ajout d'une pièce : le formulaire est en fin de page, la grille s'ouvre donc
   dans le flux (la page s'allonge) au lieu de déborder sous le bas de page. */
.room-form--add .icon-menu[open] { flex-basis: 100%; order: -1; }
.room-form--add .icon-menu[open] > .icon-picker { position: static; width: 100%; max-height: 240px; margin-top: var(--e-2); box-shadow: none; }

/* ------------------------------------------- Achats à plusieurs (ACH) */
.refund { display: grid; gap: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--bordure); }
.refund:first-of-type { border-top: 0; padding-top: 0; }
.refund__head { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.refund__arrow { width: 16px; height: 16px; color: var(--texte-secondaire); flex: none; }
.refund__amount { margin-left: auto; font-size: 1.1rem; white-space: nowrap; }
.mine-item__amount { font-size: 1.05rem; white-space: nowrap; }
.stat--money { grid-template-columns: 1fr; justify-items: center; gap: var(--e-2); min-width: 0; }
.stat--money .stat__value { font-size: 1.25rem; white-space: nowrap; }

/* --- Achats à plusieurs : même langage que la fiche (cartes, tuiles, pastilles) */
.cobuy__head { display: flex; align-items: center; gap: var(--e-3); }
.cobuy__head h2 { margin: 0; }
.cobuy__icon {
    width: 40px; height: 40px; border-radius: var(--r-md); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--famille-clair, var(--bleu-clair)); color: var(--famille, var(--bleu-nuit));
}
.cobuy__icon .icon { width: 20px; height: 20px; }
.cobuy__sub { margin: 2px 0 0; font-size: .82rem; color: var(--texte-secondaire); }
.cobuy__people { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cobuy__people .chip { cursor: default; gap: var(--e-2); padding-left: 4px; }
.cobuy__people .chip:hover { border-color: inherit; }
.cobuy__note {
    display: flex; gap: var(--e-2); align-items: flex-start;
    padding: var(--e-3); border-radius: var(--r-lg); font-size: .88rem; line-height: 1.45;
    background: var(--famille-voile, var(--surface-douce)); border: 1px solid var(--famille-bord, var(--bordure));
}
.cobuy__note > .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--famille, var(--bleu-nuit)); }
.cobuy__note--private { background: var(--vert-clair); border-color: #BBF7D0; }
.cobuy__note--private > .icon { color: var(--vert); }
.cobuy__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e-3); }
.cobuy__tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: var(--e-3) var(--e-4); border-radius: var(--r-lg);
    background: var(--surface-douce); border: 1px solid var(--bordure);
}
.cobuy__label { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--texte-secondaire); }
.cobuy__label .icon { width: 14px; height: 14px; }
.cobuy__value { font-family: var(--police-titres); font-size: 1.6rem; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.cobuy__value--hidden { letter-spacing: .15em; color: var(--ardoise); }
.cobuy__hint { font-size: .8rem; color: var(--texte-secondaire); line-height: 1.4; }
.cobuy__progress { display: grid; gap: var(--e-2); }
.cobuy__bar { height: 8px; border-radius: var(--r-full); background: var(--bordure); overflow: hidden; }
.cobuy__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ambre); transition: width .3s; }
.cobuy details.panel > summary { color: var(--famille, var(--bleu-nuit)); }
.cobuy details.panel > summary .icon { width: 17px; height: 17px; }
.cobuy details.panel .stack { margin-top: var(--e-3); }
.cobuy__log > summary { cursor: pointer; font-size: .82rem; color: var(--texte-secondaire); }
.cobuy__log > ul { margin: var(--e-2) 0 0; padding-left: var(--e-4); font-size: .85rem; display: grid; gap: var(--e-1); }

.cobuy__proposal {
    display: flex; flex-direction: column; gap: var(--e-2);
    padding: var(--e-3) var(--e-4); border-radius: var(--r-lg);
    background: var(--surface-douce); border: 1px solid var(--bordure);
    font-size: .88rem; line-height: 1.45;
}
.cobuy__proposal-title { margin: 0; }
.cobuy__proposal-main { margin: 0; display: flex; align-items: flex-start; gap: 8px; }
.cobuy__proposal-main .icon { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.cobuy__summary-list { margin: 0; padding-left: var(--e-4); display: grid; gap: 4px; font-size: .85rem; }
.cobuy__proposal-msg { margin: 0; font-style: italic; color: var(--texte-secondaire); font-size: .84rem; }
.cobuy__proposal-keeper { margin: 0; font-size: .82rem; color: var(--texte-secondaire); display: flex; align-items: center; gap: 6px; }
.cobuy__proposal-keeper .icon { width: 15px; height: 15px; flex-shrink: 0; }
.keeper-status { padding: var(--e-3); border-radius: var(--r-lg); background: var(--surface-douce); border: 1px solid var(--bordure); }
.keeper-status--pending { border-style: dashed; }

/* Champ de montant avec « € » intégré, calé à droite */
.money { position: relative; max-width: 200px; }
.money input { padding-right: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.money > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--texte-secondaire); pointer-events: none; }

/* Ligne de choix : toute la ligne est cliquable, surlignée une fois cochée */
.pick { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border: 1px solid var(--bordure); border-radius: var(--r-lg); background: var(--surface); }
.pick:has(input[type="checkbox"]:checked) { border-color: var(--famille-bord, var(--bordure-forte)); background: var(--famille-voile, var(--surface-douce)); }
.pick__who { flex: 1; display: flex; align-items: center; gap: var(--e-2); min-height: var(--cible); cursor: pointer; min-width: 0; font-size: .92rem; }
.pick__who small { display: block; }
.pick__who input { width: 20px; height: 20px; flex: none; }
.pick .pick__part { width: 84px; flex: none; text-align: right; }
.pick--money .money { width: 130px; flex: none; }

/* Choix à deux positions (parts égales / personnalisées) */
.seg { display: inline-grid; grid-auto-flow: column; padding: 3px; gap: 3px; border-radius: var(--r-full); background: #EEF2F6; justify-self: start; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 8px var(--e-4); border-radius: var(--r-full); font-size: .88rem; font-weight: 600; color: var(--texte-secondaire); cursor: pointer; }
.seg input:checked + span { background: var(--surface); color: var(--texte); box-shadow: var(--ombre-carte); }
.seg input:focus-visible + span { outline: 3px solid var(--famille, var(--bleu-nuit)); outline-offset: 2px; }

/* Avancement d'un remboursement : Proposé › Accepté › Payé › Confirmé */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.steps li { display: grid; gap: 6px; font-size: .75rem; font-weight: 600; color: var(--texte-secondaire); }
.steps li::before { content: ""; height: 6px; border-radius: var(--r-full); background: var(--bordure); }
.steps li.is-done::before { background: var(--vert); }
.steps li.is-now { color: var(--texte); }
.steps li.is-now::before { background: var(--bleu-action); }
.refund { background: var(--surface); }
.refund__head { padding: var(--e-3); background: var(--surface-douce); border-radius: var(--r-lg); }
@media (max-width: 480px) { .cobuy__value { font-size: 1.4rem; } .pick { flex-wrap: wrap; } .pick--money .money { width: 100%; max-width: none; } }

/* Apports en % ou en € (cobuy-fields) */
.pick .pick__amount { width: 120px; flex: none; max-width: none; }
.pick .pick__amount[hidden], .cobuy__total[hidden], [data-cobuy-hint] [hidden] { display: none; }
.pick input[type="text"]:disabled { background: #F4F6F9; color: var(--texte-secondaire); }
.chip__amount { font-variant-numeric: tabular-nums; font-weight: 700; padding-left: var(--e-2); margin-left: 2px; border-left: 1px solid var(--bordure-forte); }
.cobuy__total { margin: 0; padding: var(--e-2) var(--e-3); border-radius: var(--r-md); background: var(--surface-douce); font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.cobuy__total.is-ok { background: var(--vert-clair); color: var(--vert); }
.cobuy__total.is-off { background: var(--ambre-clair); color: var(--ambre); }
.cobuy__tile--sum { grid-column: 1 / -1; }
.refund__valid { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: .82rem; color: var(--texte-secondaire); }
.refund__valid span { display: inline-flex; align-items: center; gap: 6px; }
.refund__valid .icon { width: 14px; height: 14px; }
.refund__valid .is-ok { color: var(--vert); font-weight: 600; }
.refund-validate { margin-bottom: 0; }
.refund-validate .mine-item__side { flex-wrap: wrap; }

.nudge--done { display: inline-flex; align-items: center; gap: 6px; }
.nudge--done .icon { width: 14px; height: 14px; color: var(--vert); }

/* ------------------------------------------------------------------------
   Passe UX/UI (priorité 1) : cibles tactiles de 44 px sur téléphone et
   écran tactile, liens du pied de page et des tableaux assez hauts pour le
   doigt. Sur ordinateur à la souris, les boutons compacts gardent 34 px.
   ------------------------------------------------------------------------ */
@media (max-width: 999px), (pointer: coarse) {
    .btn--small, .chip { min-height: var(--cible); }
    details.panel > summary, .menu-members summary, .icon-menu > summary { min-height: var(--cible); }
    details:not(.panel):not(.menu-members):not(.icon-menu) > summary { padding-block: 12px; }
    table.data a:not(.btn):not(.chip) { display: inline-flex; align-items: center; min-height: var(--cible); }
}
.footer__nav a { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 var(--e-2); }
.footer__nav { gap: 0; }
.auth-card .center.small a, .auth-card__foot a, .link-tap {
    display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 var(--e-2);
}
.goto a, a.mine-status { display: inline-flex; align-items: center; min-height: var(--cible); }
.link-tap { display: inline-flex; align-items: center; min-height: var(--cible); }

/* Valeurs longues (adresses, chemins) : elles passent à la ligne au lieu
   d'élargir la page ; en dessous de 480 px, étiquette et valeur s'empilent. */
.kv dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 0 var(--e-4); } .kv dd { margin-bottom: var(--e-2); } }
/* Le texte masqué d'un en-tête de tableau est positionné : sans cela il
   échappe au défilement du tableau et élargit toute la page. */
.table-wrap { position: relative; }
input[type="file"]:not(.visually-hidden) { min-height: var(--cible); padding: 10px 0; }
.stat { min-width: 0; }
@media (max-width: 340px) { .stat__value { font-size: 1.4rem; } .stat { padding-inline: var(--e-2); } }
/* Libellé long (ex. « Demandes multiples dans la maison ») : il garde de l'air autour,
   la tuile grandit au besoin au lieu de coller aux bords et au pictogramme. */
.stat { padding: var(--e-4) var(--e-2); row-gap: var(--e-3); column-gap: var(--e-3); }
.stat__label { font-size: .75rem; text-wrap: pretty; }
.stat__scope { margin-top: 2px; font-size: .75rem; white-space: nowrap; }
@media (min-width: 700px) { .stat { padding-inline: var(--e-3); column-gap: var(--e-4); } .stat__label { font-size: .78rem; } }
@media (min-width: 700px) { .stats .stat { aspect-ratio: auto; min-height: 105px; } }
.stats-hint { margin-top: var(--e-2); }

/* Suivi par objet sur téléphone : deux membres par ligne au lieu d'un, et
   un bouton qui révèle la suite d'une longue liste (fold-rows.js). */
@media (max-width: 699px) {
    table.data--cards tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-4); }
    table.data--cards td.cell-main, table.data--cards td[data-label="Gardé par"] { grid-column: 1 / -1; }
}
.fold-more { margin: 0; }
.fold-more[hidden], table.data tbody tr[hidden] { display: none; }
#identite, #chefs, #pieces, #achat-commun, #qui-garde { scroll-margin-top: calc(var(--haut-barre) + var(--e-3)); }

/* Filtres de « Mes choix » : une seule ligne qui défile, pour que les objets
   remontent au lieu de rester sous cinq pastilles empilées. */
@media (max-width: 699px) {
    .mine-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--e-2); scrollbar-width: thin; }
    .mine-tabs > * { flex: none; }
}
.qs__hint { font-size: .85rem; color: var(--texte-secondaire); }

/* ------------------------------------------------------------------------
   Thème sombre : choisi par chaque personne dans son profil (enregistré sur
   son compte, donc le même sur tous ses appareils). Les couleurs vives
   (boutons, en-tête de la maison) ne changent pas ; les fonds clairs
   deviennent sombres et les textes colorés, plus clairs. Le thème clair
   reste le thème par défaut.
   ------------------------------------------------------------------------ */
    html[data-theme="dark"] {
        color-scheme: dark;
        --fond: #0F1722; --surface: #172131; --surface-douce: #1C283A;
        --texte: #E6EBF2; --texte-secondaire: #9DAABF;
        --bordure: #27344A; --bordure-forte: #364560;
        --vert-clair: #12351F; --ambre-clair: #3A2A0C; --rose-clair: #3C1722;
        --bleu-clair: #172A4E; --bleu-clair-texte: #9CC2FF;
        --ombre: 0 1px 2px rgba(0, 0, 0, .4);
        --ombre-carte: 0 1px 3px rgba(0, 0, 0, .45);
        --ombre-haute: 0 8px 24px rgba(0, 0, 0, .55);
        --t-bleu: #8DB8FF; --t-vert: #86EFAC; --t-ambre: #FCD34D; --t-rose: #FDA4AF;
    }
    html[data-theme="dark"] body {
        --famille-texte: color-mix(in srgb, var(--famille) 45%, #fff);
        --famille-bord: color-mix(in srgb, var(--famille) 35%, var(--bordure));
        --famille-voile: color-mix(in srgb, var(--famille) 12%, var(--surface));
        --famille-clair: color-mix(in srgb, var(--famille) 24%, var(--surface));
    }
    html[data-theme="dark"] body.bare {
        background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(96, 165, 250, .14), transparent 70%), var(--fond);
    }

    /* Liens et textes bleus */
    :where(html[data-theme="dark"]) a,
    :where(html[data-theme="dark"]) .footer__nav a:hover,
    :where(html[data-theme="dark"]) .btn--quiet,
    :where(html[data-theme="dark"]) .side-nav__item[aria-current="page"] .icon,
    :where(html[data-theme="dark"]) .stat__value--accent,
    :where(html[data-theme="dark"]) .mine-tab--avoir .icon,
    :where(html[data-theme="dark"]) .mine-item__link:hover .mine-item__title,
    :where(html[data-theme="dark"]) .conflict__head:hover .conflict__title,
    :where(html[data-theme="dark"]) .menu-item__icon,
    :where(html[data-theme="dark"]) .refund__head a { color: var(--t-bleu); }
    :where(html[data-theme="dark"]) .btn--quiet:hover, :where(html[data-theme="dark"]) .qs__undo:hover, :where(html[data-theme="dark"]) .qs-card__info:hover { background: rgba(141, 184, 255, .14); color: var(--t-bleu); }
    :where(html[data-theme="dark"]) .btn--light { color: var(--bleu-nuit); }
    :where(html[data-theme="dark"]) .bottom-nav__item[aria-current="page"], :where(html[data-theme="dark"]) .qs-card__info, :where(html[data-theme="dark"]) .qs__menu a { color: var(--t-bleu); }
    :where(html[data-theme="dark"]) .qs__menu a[aria-current="page"], :where(html[data-theme="dark"]) .side-nav__item[aria-current="page"], :where(html[data-theme="dark"]) .mine-status--pending { background: rgba(141, 184, 255, .14); color: var(--t-bleu); }
    :where(html[data-theme="dark"]) .menu-item__icon { background: rgba(141, 184, 255, .14); }

    /* Pastilles et états : fond sombre teinté, texte clair de la même famille */
    :where(html[data-theme="dark"]) .badge { background: #26334A; color: #B6C2D6; }
    :where(html[data-theme="dark"]) .badge--draft { background: #26334A; color: var(--texte-secondaire); }
    :where(html[data-theme="dark"]) .badge--multiple,
    :where(html[data-theme="dark"]) .chip--multiple,
    :where(html[data-theme="dark"]) .conflict__answer--fallback,
    :where(html[data-theme="dark"]) .banner--pending,
    :where(html[data-theme="dark"]) .menu-item__count--alert,
    :where(html[data-theme="dark"]) .menu-group--manager .menu-item__icon,
    :where(html[data-theme="dark"]) .conflict__tag,
    :where(html[data-theme="dark"]) .cobuy__total.is-off { color: var(--t-ambre); }
    :where(html[data-theme="dark"]) .chip--multiple { border-color: #5A430F; }
    :where(html[data-theme="dark"]) .badge--new, :where(html[data-theme="dark"]) .mine-status--multiple { color: var(--t-rose); }
    :where(html[data-theme="dark"]) .badge--ok,
    :where(html[data-theme="dark"]) .mine-status--alone,
    :where(html[data-theme="dark"]) .conflict__answer--favorite,
    :where(html[data-theme="dark"]) .cobuy__total.is-ok,
    :where(html[data-theme="dark"]) .qs-done__icon { color: var(--t-vert); }
    :where(html[data-theme="dark"]) .approval--done,
    :where(html[data-theme="dark"]) .state--ok,
    :where(html[data-theme="dark"]) .mine-tab--favorite .icon,
    :where(html[data-theme="dark"]) .cobuy__note--private > .icon,
    :where(html[data-theme="dark"]) .refund__valid .is-ok,
    :where(html[data-theme="dark"]) .nudge--done .icon { color: var(--t-vert); }
    :where(html[data-theme="dark"]) .approval--waiting,
    :where(html[data-theme="dark"]) .state--warn,
    :where(html[data-theme="dark"]) .mine-tab--fallback .icon,
    :where(html[data-theme="dark"]) .side-nav__manager .side-nav__title,
    :where(html[data-theme="dark"]) .side-nav__manager .side-nav__item .icon,
    :where(html[data-theme="dark"]) .menu-group--manager .menu-group__title { color: var(--t-ambre); }
    :where(html[data-theme="dark"]) .state--ko, :where(html[data-theme="dark"]) .menu-logout { color: var(--t-rose); }
    :where(html[data-theme="dark"]) .conflict__tag--pending { color: var(--bleu-clair-texte); }
    :where(html[data-theme="dark"]) .flash--success { background: var(--vert-clair); color: #BBF7D0; }
    :where(html[data-theme="dark"]) .flash--error, :where(html[data-theme="dark"]) .upload-item--error { background: #3D1A1F; color: #FECACA; }
    :where(html[data-theme="dark"]) .upload-item--error { border-color: #7F1D1D; }
    :where(html[data-theme="dark"]) .flash--info { background: var(--bleu-clair); color: var(--bleu-clair-texte); }

    /* Fonds neutres clairs devenus sombres */
    :where(html[data-theme="dark"]) .mine-status,
    :where(html[data-theme="dark"]) .teinte-fond,
    :where(html[data-theme="dark"]) .seg,
    :where(html[data-theme="dark"]) .qs-card__media,
    :where(html[data-theme="dark"]) .pick input[type="text"]:disabled { background: #223048; }
    :where(html[data-theme="dark"]) .mine-status { color: #B6C2D6; }
    :where(html[data-theme="dark"]) .mine-status--alone { background: var(--vert-clair); color: var(--t-vert); }
    :where(html[data-theme="dark"]) .mine-status--multiple { background: var(--rose-clair); color: var(--t-rose); }
    :where(html[data-theme="dark"]) .mine-status--kept, :where(html[data-theme="dark"]) .mine-status--awaiting, :where(html[data-theme="dark"]) .mine-status--also { background: var(--bleu-clair); color: var(--bleu-clair-texte); }
    :where(html[data-theme="dark"]) .mine-status--pending { background: rgba(141, 184, 255, .14); color: var(--t-bleu); }
    :where(html[data-theme="dark"]) .mine-tab__count { background: #26334A; color: var(--texte); }
    :where(html[data-theme="dark"]) .mine-tab[aria-current="page"] .mine-tab__count { background: rgba(255, 255, 255, .22); }
    :where(html[data-theme="dark"]) .mine-alert { border-color: rgba(141, 184, 255, .4); }
    :where(html[data-theme="dark"]) .mine-alert__icon { background: rgba(141, 184, 255, .22); color: var(--t-bleu); }
    :where(html[data-theme="dark"]) .teinte-fond { color: var(--teinte, var(--t-bleu)); }
    :where(html[data-theme="dark"]) .bottom-nav__item, :where(html[data-theme="dark"]) .tile .progress__fill { color: inherit; }
    :where(html[data-theme="dark"]) .bottom-nav__item { color: var(--texte-secondaire); }
    :where(html[data-theme="dark"]) .bottom-nav__item[aria-current="page"] { color: var(--t-bleu); }
    :where(html[data-theme="dark"]) .chip { background: var(--surface); color: var(--texte); }
    :where(html[data-theme="dark"]) .chip.is-on { background: var(--famille-fond); color: #fff; }
    :where(html[data-theme="dark"]) .chip--multiple { background: var(--ambre-clair); color: var(--t-ambre); }
    :where(html[data-theme="dark"]) .btn--secondary { background: var(--surface); color: var(--texte); }
    :where(html[data-theme="dark"]) .btn--secondary:hover { background: var(--surface-douce); color: var(--texte); }
    :where(html[data-theme="dark"]) table.data thead th { color: var(--texte-secondaire); }
    :where(html[data-theme="dark"]) .stat, :where(html[data-theme="dark"]) .tile, :where(html[data-theme="dark"]) .item { color: var(--texte); }
    :where(html[data-theme="dark"]) .auth-card, :where(html[data-theme="dark"]) .menu-group, :where(html[data-theme="dark"]) .card { color: var(--texte); }
    /* Couleurs de page : teinte éclaircie, fond et ton vif assombris. */
    :where(html[data-theme="dark"]) .c-bleu { --teinte: #7D8DA3; --teinte-fond: #19283F; --teinte-vive: #1B2F4B; }
    :where(html[data-theme="dark"]) .c-azur { --teinte: #81A5F3; --teinte-fond: #1B3569; --teinte-vive: #1F4597; }
    :where(html[data-theme="dark"]) .c-vert { --teinte: #77B58E; --teinte-fond: #163E35; --teinte-vive: #165538; }
    :where(html[data-theme="dark"]) .c-ambre { --teinte: #D49B70; --teinte-fond: #463025; --teinte-vive: #6D3C1B; }
    :where(html[data-theme="dark"]) .c-rose { --teinte: #EE7C95; --teinte-fond: #542038; --teinte-vive: #861F3E; }
    :where(html[data-theme="dark"]) .c-ardoise { --teinte: #A5AEBC; --teinte-fond: #2E3A4C; --teinte-vive: #414F62; }
    :where(html[data-theme="dark"]) .c-violet { --teinte: #B38DF5; --teinte-fond: #352869; --teinte-vive: #4F2F98; }
    :where(html[data-theme="dark"]) .c-emeraude { --teinte: #74B0AB; --teinte-fond: #153A43; --teinte-vive: #135053; }
    :where(html[data-theme="dark"]) .c-indigo { --teinte: #928CE0; --teinte-fond: #24285F; --teinte-vive: #2F2E85; }
    :where(html[data-theme="dark"]) .c-fuchsia { --teinte: #C97BD1; --teinte-fond: #412057; --teinte-vive: #631E76; }
    :where(html[data-theme="dark"]) .c-rouge { --teinte: #D67B7B; --teinte-fond: #48202B; --teinte-vive: #701E25; }
    :where(html[data-theme="dark"]) .c-orange { --teinte: #DC9172; --teinte-fond: #4A2B26; --teinte-vive: #75331D; }
    :where(html[data-theme="dark"]) .c-brun { --teinte: #BB9F8D; --teinte-fond: #3A3234; --teinte-vive: #564036; }
    :where(html[data-theme="dark"]) .c-olive { --teinte: #98B374; --teinte-fond: #273C27; --teinte-vive: #35531E; }
    :where(html[data-theme="dark"]) .c-turquoise { --teinte: #73AEBF; --teinte-fond: #143A4E; --teinte-vive: #124F65; }
    :where(html[data-theme="dark"]) .c-graphite { --teinte: #8B919A; --teinte-fond: #212B3B; --teinte-vive: #293343; }
    :where(html[data-theme="dark"]) .qs-card__chips li { background: #26334A; }
    :where(html[data-theme="dark"]) .upload-add__btn { color: var(--t-bleu); }
    :where(html[data-theme="dark"]) .teinte { color: var(--teinte, var(--t-bleu)); }
    :where(html[data-theme="dark"]) .cobuy details.panel > summary,
    :where(html[data-theme="dark"]) .cobuy__note > .icon,
    :where(html[data-theme="dark"]) .stat__value--accent,
    :where(html[data-theme="dark"]) .bottom-nav__item[aria-current="page"],
    :where(html[data-theme="dark"]) .side-nav__item[aria-current="page"] .icon,
    :where(html[data-theme="dark"]) .search:focus-within .icon { color: var(--famille-texte); }
    :where(html[data-theme="dark"]) .side-nav__item[aria-current="page"] { color: var(--famille-texte); }
.footer__sep { display: none; }
.seg span { color: #566176; }
:where(html[data-theme="dark"]) .seg span { color: var(--texte-secondaire); }
.seg span { display: flex; align-items: center; min-height: var(--cible); padding-block: 0; }

::placeholder { color: var(--texte-secondaire); opacity: 1; }
.chip.is-on .chip__count { opacity: .95; }
.chip--multiple .chip__count { opacity: 1; }
.side-nav__count { color: #566176; }
:where(html[data-theme="dark"]) .side-nav__count { color: var(--texte-secondaire); }

/* Sur mobile, la marque (hors d'une maison) et le titre de la maison sont des
   liens : accueil de la maison, puis famille et biens depuis cet accueil. */
.topbar__brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e-2); min-height: var(--cible); }
.topbar__brand .topbar__title { flex: 1; }
.topbar__home { display: flex; flex-direction: column; justify-content: center; min-height: var(--cible); }
.topbar__brand:hover, .topbar__home:hover { text-decoration: none; }
@media (min-width: 1000px) { .topbar__brand, .topbar__home { display: none; } }
.topbar__brand ~ .topbar__spacer { display: none; }

/* Demandes à régler (lignes compactes de « Mes choix ») : pas de filet au-dessus des
   actions, ni sur téléphone ni sur ordinateur ; « Voir la fiche » s'aligne sur le texte. */
.conflict--row .crow__actions { border-top: 0; padding-top: 0; }
.conflict--row .crow__actions .btn--quiet { padding-left: 0; }

/* ------------------------------------------------------------------------
   Barres de défilement : une seule direction artistique, clair et sombre,
   sur tous les navigateurs.
   - Standard (Firefox, Chrome et Edge 121+, Safari 18.2+) : scrollbar-width
     et scrollbar-color, lus sur chaque zone qui défile.
   - Anciens Chrome, Edge et Safari : ::-webkit-scrollbar, utilisé seulement
     quand scrollbar-color n'existe pas (sinon les deux se contrarieraient).
   Sur téléphone, les barres sont de toute façon discrètes, gérées par le
   système ; ces règles s'appliquent surtout à l'ordinateur et à la tablette.
   ------------------------------------------------------------------------ */
:root {
    --sb-thumb: #94A3B8;
    --sb-thumb-hover: #64748B;
    --sb-track: #EDF1F6;
}
html[data-theme="dark"] {
    --sb-thumb: #4A5B78;
    --sb-thumb-hover: #7189B0;
    --sb-track: #111A28;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
}
@supports not (scrollbar-color: auto) {
    ::-webkit-scrollbar { width: 12px; height: 12px; background: var(--sb-track); }
    ::-webkit-scrollbar-track { background: var(--sb-track); }
    ::-webkit-scrollbar-thumb {
        background: var(--sb-thumb); border-radius: var(--r-full);
        border: 3px solid var(--sb-track); background-clip: padding-box; min-height: 44px; min-width: 44px;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; }
    ::-webkit-scrollbar-thumb:active { background: var(--bleu-action); background-clip: padding-box; }
    ::-webkit-scrollbar-corner { background: var(--sb-track); }
}
/* Fonds sombres posés sur la page (appareil photo, visionneuse) : la piste s'y fond. */
.camera, .lightbox { --sb-track: transparent; --sb-thumb: rgba(255, 255, 255, .35); --sb-thumb-hover: rgba(255, 255, 255, .6); }

/* « Mes maisons » : cartes des biens à largeur maximale, et plus d'air autour du contenu
   (le padding de <main id="contenu">) pour une page plus lisible. */
.main--maisons { max-width: 860px; padding: var(--e-5) var(--e-4) calc(var(--e-6) * 1.5); }
@media (min-width: 700px) { .main--maisons { padding: var(--e-6) var(--e-5) calc(var(--e-6) * 1.75); } }
@media (min-width: 1000px) { .main--maisons { padding: calc(var(--e-6) * 1.25) var(--e-6) calc(var(--e-6) * 2); } }

/* Tuile « Mes remboursements » de l'accueil : un montant en euros, plus large qu'un
   compteur ; sur petit écran l'icône s'efface pour lui laisser la place. */
.stat--euros .stat__value { font-size: clamp(1.05rem, 5.2vw, 1.5rem); white-space: nowrap; line-height: 36px; }
@media (max-width: 460px) { .stat--euros .stat__icon { display: none; } }

/* Mes remboursements, par personne : un total, un bouton, la liste des objets repliée. */
.settle { display: grid; gap: var(--e-3); }   /* .card est en block : sans grille, le gap ne jouait pas et tout était collé */
.settle__head { display: flex; align-items: center; gap: var(--e-3); padding-bottom: var(--e-3); border-bottom: 1px solid var(--bordure); }
.settle__who { flex: 1; min-width: 0; }
.settle__who h3 { margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settle__who p { margin: 0; }
.settle__total { font-family: var(--police-titres); font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.settle--owe .settle__total { color: var(--texte); }
.settle--owed .settle__total { color: var(--vert); }
.settle__line { display: flex; gap: var(--e-2); align-items: flex-start; margin: 0; font-size: .88rem; color: var(--texte); }
.settle__line .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--texte-secondaire); }
.settle__line--soft { color: var(--texte-secondaire); }
.settle__items summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--bleu-action); }
.settle__list { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.settle__list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: .9rem; }
.settle__list li a { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.settle form { margin: 0; }
:where(html[data-theme="dark"]) .settle--owed .settle__total { color: var(--t-vert); }
:where(html[data-theme="dark"]) .settle__items summary { color: var(--t-bleu); }
.settle__list { margin-bottom: var(--e-2); }

/* ------------------------------------------------------------------------
   Mon profil : en-tête, deux colonnes sur ordinateur, cartes par thème.
   ------------------------------------------------------------------------ */
.main--profil { max-width: 1040px; padding: var(--e-5) var(--e-4) calc(var(--e-6) * 1.5); }
@media (min-width: 700px) { .main--profil { padding: var(--e-6) var(--e-5) calc(var(--e-6) * 1.75); } }
.avatar--xl { width: 76px; height: 76px; font-size: 1.6rem; border-width: 3px; }

.profile-hero {
    display: flex; align-items: center; gap: var(--e-4);
    padding: var(--e-5) var(--e-4); border-radius: var(--r-xl); color: #fff;
    background: linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-nuit-fonce) 100%);
}
.profile-hero__text { min-width: 0; display: grid; gap: 2px; }
.profile-hero h1 { margin: 0; color: #fff; font-size: 1.6rem; overflow-wrap: anywhere; }
.profile-hero__kicker { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.profile-hero__mail { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: .92rem; opacity: .95; overflow-wrap: anywhere; }
.profile-hero__mail .icon { width: 16px; height: 16px; }
.profile-hero__badges { margin: var(--e-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.profile-hero__badges .muted { color: #fff; opacity: .85; }
@media (max-width: 520px) { .profile-hero { padding: var(--e-4); gap: var(--e-3); align-items: flex-start; } .profile-hero .avatar--xl { width: 60px; height: 60px; font-size: 1.3rem; } .profile-hero h1 { font-size: 1.35rem; } }

.profile-grid { display: grid; gap: var(--e-5); }
.profile-col { display: grid; gap: var(--e-5); align-content: start; min-width: 0; }
@media (min-width: 900px) { .profile-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }

.profile-card { gap: var(--e-4); }
.profile-card h2 { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: 1.05rem; }
.profile-card h2 .icon { width: 20px; height: 20px; color: var(--texte-secondaire); }
.profile-fields { display: grid; gap: var(--e-4); }
@media (min-width: 560px) { .profile-fields { grid-template-columns: 1fr 1fr; } }

.profile-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.profile-row {
    display: flex; align-items: center; gap: var(--e-3); min-height: var(--cible);
    padding: var(--e-2) var(--e-3); border: 1px solid var(--bordure); border-radius: var(--r-md);
    background: var(--surface-douce); color: var(--texte);
}
.profile-row:hover { text-decoration: none; border-color: var(--bordure-forte); background: var(--surface); }
.profile-row > .icon:last-child { margin-left: auto; width: 18px; height: 18px; color: var(--texte-secondaire); }
.profile-row .badge { margin-left: auto; }
.profile-row__text { display: grid; min-width: 0; flex: 1; }
.profile-row__text strong { font-weight: 600; overflow-wrap: anywhere; }
.profile-row__icon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; flex: none; border-radius: var(--r-md); background: var(--bleu-clair); color: var(--bleu-clair-texte); }
.profile-row__icon .icon { width: 18px; height: 18px; }
.profile-row__dot { width: 14px; height: 14px; border-radius: var(--r-full); flex: none; }
.profile-logout { color: var(--rose); }
/* Dans l'en-tête : à droite, dans le vide à côté du nom ; sous le texte sur téléphone. */
.profile-hero { flex-wrap: wrap; }
.profile-hero__logout { margin: 0 0 0 auto; align-self: center; }
.profile-hero__logout .btn { background: #fff; border-color: transparent; }
.profile-hero__logout .btn:hover { background: #FFF1F2; }
@media (max-width: 520px) { .profile-hero__logout { flex-basis: 100%; margin: var(--e-1) 0 0; } .profile-hero__logout .btn { width: 100%; justify-content: center; } }
:where(html[data-theme="dark"]) .profile-hero__logout .btn { background: var(--surface); border-color: var(--bordure-forte); }
:where(html[data-theme="dark"]) .profile-hero__logout .btn:hover { background: var(--surface-douce); }
/* La règle « margin: 0 » de .profile-list annulait l'espace sous le titre de la carte. */
.profile-card > .profile-list { margin-top: var(--e-3); }

/* Choix du thème : deux cartes avec un aperçu. */
.theme-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
@media (max-width: 420px) { .theme-choice { gap: var(--e-2); } .theme-card__name { font-size: .82rem; gap: 4px; } }
.theme-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-width: 0; gap: var(--e-2); padding: var(--e-2); border: 2px solid var(--bordure); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card:hover { border-color: var(--bordure-forte); }
.theme-card:has(input:checked) { border-color: var(--bleu-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bleu-action) 20%, transparent); }
.theme-card:has(input:focus-visible) { outline: 3px solid var(--bleu-action); outline-offset: 2px; }
.theme-card__preview { display: grid; gap: 6px; padding: 10px; border-radius: var(--r-md); min-height: 64px; align-content: center; }
.theme-card__preview i { display: block; height: 10px; border-radius: 5px; }
.theme-card__preview i:last-child { width: 60%; }
.theme-card__preview--light { background: #F4F6F9; }
.theme-card__preview--light i { background: #FFFFFF; box-shadow: 0 0 0 1px #E6EAF0; }
.theme-card__preview--dark { background: #0F1722; }
.theme-card__preview--dark i { background: #26334A; }
/* Automatique : moitié clair, moitié sombre. */
.theme-card__preview--auto { background: linear-gradient(105deg, #F4F6F9 50%, #0F1722 50%); }
.theme-card__preview--auto i { background: linear-gradient(105deg, #FFFFFF 50%, #26334A 50%); box-shadow: 0 0 0 1px rgba(128, 140, 160, .35); }
/* Le nom peut passer à la ligne (l'icône au-dessus du mot) au lieu d'élargir la carte et de faire déborder l'aperçu. */
.theme-card__name { align-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; min-width: 0; text-align: center; overflow-wrap: anywhere; font-weight: 600; font-size: .92rem; padding-block: 4px; }
.theme-card__name .icon { width: 16px; height: 16px; }

:where(html[data-theme="dark"]) .profile-row__icon { background: rgba(141, 184, 255, .14); color: var(--t-bleu); }
:where(html[data-theme="dark"]) .profile-logout { color: var(--t-rose); }
:where(html[data-theme="dark"]) .profile-hero { background: linear-gradient(135deg, #1F3A60 0%, #14253F 100%); }
.profile-status { margin: 0; min-height: 1.4em; } .profile-status.is-error { color: var(--rose); }
:where(html[data-theme="dark"]) .profile-status.is-error { color: var(--t-rose); }

/* Barre latérale : un simple filet sépare la navigation de la maison du compte. */
.side-nav__divider { height: 0; margin: var(--e-3) var(--e-2) var(--e-2); border-top: 1px solid var(--bordure); }
.menu-group__divider { height: 0; margin: var(--e-2) var(--e-1) var(--e-1); border-top: 1px solid var(--bordure-forte); }

/* ------------------------------------------------------------------------
   Thème sombre, passe de contraste : fonds pleins portant du blanc, pictogrammes
   et contours teintés par la couleur de la famille, champs de saisie.
   ------------------------------------------------------------------------ */
/* --teinte-plein : la couleur d'origine, assez sombre pour porter un pictogramme blanc ;
   --teinte (éclaircie plus haut) ne sert qu'aux textes et aux pastilles sur fond sombre. */
:where(html[data-theme="dark"]) .c-bleu { --teinte-plein: #2D5290; }
:where(html[data-theme="dark"]) .c-azur { --teinte-plein: #2563EB; }
:where(html[data-theme="dark"]) .c-vert { --teinte-plein: #15803D; }
:where(html[data-theme="dark"]) .c-ambre { --teinte-plein: #B45309; }
:where(html[data-theme="dark"]) .c-rose { --teinte-plein: #E11D48; }
:where(html[data-theme="dark"]) .c-ardoise { --teinte-plein: #64748B; }
:where(html[data-theme="dark"]) .c-violet { --teinte-plein: #7C3AED; }
:where(html[data-theme="dark"]) .c-emeraude { --teinte-plein: #0F766E; }
:where(html[data-theme="dark"]) .c-indigo { --teinte-plein: #4338CA; }
:where(html[data-theme="dark"]) .c-fuchsia { --teinte-plein: #A21CAF; }
:where(html[data-theme="dark"]) .c-rouge { --teinte-plein: #B91C1C; }
:where(html[data-theme="dark"]) .c-orange { --teinte-plein: #C2410C; }
:where(html[data-theme="dark"]) .c-brun { --teinte-plein: #8A5A3B; }
:where(html[data-theme="dark"]) .c-olive { --teinte-plein: #4D7C0F; }
:where(html[data-theme="dark"]) .c-turquoise { --teinte-plein: #0E7490; }
:where(html[data-theme="dark"]) .c-graphite { --teinte-plein: #4B5563; }
html[data-theme="dark"] {
    --champ-bord: #647696;
}
/* Champs : un contour qui se distingue du fond (3:1), puis le focus à la couleur de la maison. */
:where(html[data-theme="dark"]) input[type="text"], :where(html[data-theme="dark"]) input[type="email"], :where(html[data-theme="dark"]) input[type="password"], :where(html[data-theme="dark"]) input[type="number"], :where(html[data-theme="dark"]) input[type="date"], :where(html[data-theme="dark"]) input[type="search"], :where(html[data-theme="dark"]) input[type="url"], :where(html[data-theme="dark"]) select, :where(html[data-theme="dark"]) textarea { border-color: var(--champ-bord); }
:where(html[data-theme="dark"]) .search { border-color: var(--champ-bord); }
:where(html[data-theme="dark"]) input:focus, :where(html[data-theme="dark"]) select:focus, :where(html[data-theme="dark"]) textarea:focus,
:where(html[data-theme="dark"]) .search:focus-within { border-color: var(--famille-texte); }
:where(html[data-theme="dark"]) .search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--famille-texte) 25%, transparent); }
:where(html[data-theme="dark"]) :focus-visible,
:where(html[data-theme="dark"]) input:focus-visible, :where(html[data-theme="dark"]) select:focus-visible, :where(html[data-theme="dark"]) textarea:focus-visible,
:where(html[data-theme="dark"]) .sort-button:focus-visible,
:where(html[data-theme="dark"]) .file-input:focus-visible + .btn,
:where(html[data-theme="dark"]) .file-input:focus-visible ~ .uploads .upload-add__btn,
:where(html[data-theme="dark"]) .swatch input:focus-visible + .swatch__dot,
:where(html[data-theme="dark"]) .icon-choice input:focus-visible + .icon-choice__box,
:where(html[data-theme="dark"]) .seg input:focus-visible + span { outline-color: var(--famille-texte); }
:where(html[data-theme="dark"]) .tile:hover, :where(html[data-theme="dark"]) .item:hover { border-color: var(--famille-texte); }
:where(html[data-theme="dark"]) .dropzone:hover, :where(html[data-theme="dark"]) .dropzone--over, :where(html[data-theme="dark"]) .dropzone:focus-within { border-color: var(--famille-texte); }

/* Pictogrammes qui prenaient la couleur de la maison (bleu nuit) ou une bordure. */
:where(html[data-theme="dark"]) .stat__icon, :where(html[data-theme="dark"]) .cobuy__icon { color: var(--famille-texte); }
:where(html[data-theme="dark"]) .qs__icon { color: var(--texte); }
:where(html[data-theme="dark"]) .qs__filter[open] > .qs__icon { background: var(--famille-fond); color: #fff; }
:where(html[data-theme="dark"]) .menu-item__chevron { color: var(--texte-secondaire); }
:where(html[data-theme="dark"]) .footer__sep { color: var(--texte-secondaire); }
:where(html[data-theme="dark"]) .mine-bar__seg--to-see, :where(html[data-theme="dark"]) .mine-legend__dot--to-see { background: #7B8CA8; }
:where(html[data-theme="dark"]) .mine-bar__seg--no, :where(html[data-theme="dark"]) .mine-legend__dot--no { background: #8A9BB5; }
:where(html[data-theme="dark"]) .conflict__state--waiting { background: var(--ambre-clair); color: var(--t-ambre); }
:where(html[data-theme="dark"]) .conflict__state--todo { background: var(--bleu-clair); color: var(--bleu-clair-texte); }
:where(html[data-theme="dark"]) .side-nav__manager { border-color: #5A430F; }
:where(html[data-theme="dark"]) .side-nav__manager .side-nav__item:not([aria-current="page"]) { color: var(--texte); }
/* Pastilles pleines posées sur les couleurs de page : un fin liseré clair les détache du fond. */
:where(html[data-theme="dark"]) .cat-tile__mark, :where(html[data-theme="dark"]) .mine-page__mark, :where(html[data-theme="dark"]) .cat-bar__mark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
:where(html[data-theme="dark"]) .swatch__dot { box-shadow: 0 0 0 1px var(--champ-bord); }
:where(html[data-theme="dark"]) .swatch input:checked + .swatch__dot { box-shadow: 0 0 0 3px var(--texte); }

:where(html[data-theme="dark"]) .toast, :where(html[data-theme="dark"]) .savebar { background: #26334A; border: 1px solid #3F506E; }
:where(html[data-theme="dark"]) .conflicts-title__count { background: #26334A; color: var(--texte); }
:where(html[data-theme="dark"]) .menu-group--manager .menu-list { border-color: #5A430F; }
:where(html[data-theme="dark"]) .cobuy__note--private { border-color: rgba(134, 239, 172, .35); }
:where(html[data-theme="dark"]) .version-link:hover, :where(html[data-theme="dark"]) .version-link:focus-visible,
:where(html[data-theme="dark"]) .conflicts-more__toggle { color: var(--t-bleu); }
:where(html[data-theme="dark"]) .cobuy__value--hidden { color: var(--texte-secondaire); }
:where(html[data-theme="dark"]) .qs-choice--no .qs-choice__disc { color: var(--texte-secondaire); }
:where(html[data-theme="dark"]) .qs-choice--fallback .qs-choice__disc { color: var(--t-ambre); }
:where(html[data-theme="dark"]) .qs-choice--no.is-armed .qs-choice__disc { color: #fff; }
:where(html[data-theme="dark"]) .qs-choice--fallback.is-armed .qs-choice__disc { color: #fff; }
:where(html[data-theme="dark"]) .qs-choice:focus-visible .qs-choice__disc { outline-color: var(--t-bleu); }
:where(html[data-theme="dark"]) .side-nav__manager .side-nav__item[aria-current="page"] { color: var(--t-ambre); background: rgba(252, 211, 77, .12); }

/* « À régler avec les autres » : « Je le garde » et « Je le laisse à… » l'un sous l'autre,
   au texte complet et de même poids (aucun bouton mis en avant). */
.conflict--row .crow__actions { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.conflict--row .crow__actions form { width: 100%; }
.conflict--row .crow__actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
.conflict--row .crow__actions .conflict__take-form { flex-direction: column; align-items: stretch; gap: var(--e-2); }
.conflict--row .crow__actions .qty-field {
    justify-content: space-between; width: 100%; padding: 4px var(--e-3);
    border: 1px solid var(--bordure); border-radius: var(--r-md); background: var(--surface);
}
@media (min-width: 900px) {
    .conflict--row .crow__actions { justify-content: center; width: 240px; }
    .conflict--row .crow__actions:has(.conflict__take-form) { width: 280px; }
}
.conflict:not(.conflict--row) .conflict__take-form .btn--small,
.answer__take .btn--small,
.row > select ~ .btn--small,
.row > .icon-select ~ .btn--small { min-height: var(--cible); }

/* Bandeau « Gardé par… » en tête de la fiche d'objet et sur les cartes. */
.banner-assigned {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); margin: 0;
    padding: var(--e-3) var(--e-4); border-radius: var(--r-lg);
    background: var(--bleu-clair); border: 1px solid color-mix(in srgb, var(--bleu-clair-texte) 22%, transparent);
    color: var(--bleu-clair-texte); font-size: .92rem; font-weight: 600; line-height: 1.35;
}
.banner-assigned .icon { flex: none; width: 18px; height: 18px; }
.banner { flex-wrap: wrap; gap: var(--e-1) var(--e-2); line-height: 1.3; }
.banner .icon { flex: none; }
.banner--right { white-space: nowrap; }
.item > .banner:first-of-type { margin-top: auto; }
.items--grid .item__body { padding: 0 var(--e-3) var(--e-2); }
.item > .banner + .item__choices { padding-top: var(--e-2); margin-top: 0; }
.item > .banner + .banner { border-top: 1px solid rgba(16, 24, 40, .08); }

/* Part déjà confiée rappelée sur une demande multiple et dans « Mes choix ». */
.conflict__kept {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 600; color: var(--bleu-clair-texte);
}
.conflict__kept .icon { flex: none; width: 15px; height: 15px; }
.conflict__people > .conflict__kept {
    width: 100%; padding-bottom: var(--e-2); border-bottom: 1px solid var(--bordure);
}
.crow__people .conflict__kept {
    padding: 2px 8px; border-radius: var(--r-full);
    background: var(--bleu-clair); color: var(--bleu-clair-texte); font-size: .76rem;
}
.mine-status { max-width: 320px; overflow-wrap: anywhere; }
@media (max-width: 699px) {
    .mine-item__side { flex-wrap: wrap; }
    .mine-status { max-width: none; }
}
.row > select { flex: 1 1 220px; max-width: 280px; width: auto; }
.small > .icon, .hint > .icon { width: 16px; height: 16px; vertical-align: -3px; }

/* Combien d'exemplaires garde la personne désignée : la quantité de l'objet à côté du champ. */
.qty-field { display: inline-flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.qty-field label { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.qty-field input { width: 4.75em; text-align: center; font-variant-numeric: tabular-nums; }
.qty-field__of { color: var(--texte-secondaire); font-size: .88rem; }

/* Réponse à une demande sur un objet en plusieurs exemplaires : la part dite en toutes lettres,
   puis « j'en prends aussi » avec sa quantité, puis le refus et ce qu'il implique. */
.answer { display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; width: 100%; flex: 1 1 100%; }
.answer > * + * { margin-top: 0; }
.answer__take {
    gap: var(--e-2); align-items: center; padding: var(--e-2) var(--e-3);
    border: 1px solid var(--bordure); border-radius: var(--r-lg); background: var(--surface);
}
.answer__take-label { font-weight: 600; font-size: .9rem; }
.answer__hint { margin: 0; font-size: .84rem; line-height: 1.4; color: var(--texte-secondaire); }
.answer__hint .icon { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }
.flash--info .answer__hint { color: var(--bleu-clair-texte); }

/* « Répartir entre plusieurs personnes » : une ligne par personne, son nombre à droite,
   le total réparti en bas, qui passe en alerte au-delà de ce qui reste. */
.split { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--bordure); }
.split__title { margin: 0; font-size: 1rem; }
.split__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.split__row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3);
    padding: var(--e-2) var(--e-3); border: 1px solid var(--bordure); border-radius: var(--r-lg);
    background: var(--surface);
}
.split__row.is-chosen {
    border-color: var(--famille-bord, var(--bordure-forte));
    background: var(--famille-voile, var(--surface-douce));
}
.split__who { flex: 1; display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; min-width: 0; font-size: .92rem; }
label.split__who { cursor: pointer; }
.split__answer {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-full);
    background: var(--surface-douce); border: 1px solid var(--bordure);
    font-size: .76rem; font-weight: 600; color: var(--texte-secondaire);
}
.split__count { display: flex; align-items: center; justify-content: flex-end; gap: var(--e-1); flex-shrink: 0; margin-left: auto; }
.split__count input { width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.split__more summary { cursor: pointer; padding: var(--e-1) 0; font-weight: 600; color: var(--bleu-action); }
.split__more[open] > .split__rows { margin-top: var(--e-2); }
.split__sum {
    margin: 0; padding: var(--e-2) var(--e-3); border-radius: var(--r-md);
    background: var(--surface-douce); color: var(--texte-secondaire);
    font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.split__sum.is-ok { background: var(--vert-clair); color: var(--vert); }
.split__sum.is-over { background: var(--rose-clair); color: #BE123C; }
:where(html[data-theme="dark"]) .split__more summary { color: var(--t-bleu); }
:where(html[data-theme="dark"]) .split__sum.is-ok { color: var(--t-vert); }
:where(html[data-theme="dark"]) .split__sum.is-over { color: var(--t-rose); }

/* Objet en plusieurs exemplaires dont une partie est déjà prise : qui, et ce qu'il reste. */
.mine-item__taken { font-size: .84rem; line-height: 1.35; color: var(--texte-secondaire); }
.mine-item__taken strong { color: var(--texte); font-weight: 600; }

/* « Encore des exemplaires pour vous » : une carte par objet, qui a pris quoi, de quoi en prendre. */
.leftovers { display: grid; gap: var(--e-2); }
.leftover { display: grid; gap: var(--e-2); padding: var(--e-3); border: 1px solid var(--bordure);
    border-radius: 14px; background: var(--surface); }
.leftover__head { display: flex; align-items: center; gap: var(--e-3); color: inherit; min-width: 0; }
.leftover__head:hover { text-decoration: none; }
.leftover__thumb { position: relative; flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: #EEF2F6; }
.leftover__thumb .no-photo .icon { stroke-width: 1.8; }
.leftover__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.leftover__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leftover__title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.leftover__meta { font-size: .82rem; color: var(--texte-secondaire); }
.leftover__taken { margin: 0; font-size: .92rem; line-height: 1.4; }
.leftover__take { gap: var(--e-2); align-items: center; }
.leftover__hint { margin: 0; display: flex; gap: var(--e-2); align-items: flex-start; flex-wrap: wrap;
    font-size: .86rem; color: var(--texte-secondaire); }

/* Fiche : une partie de l'objet est déjà prise — qui, ce qu'il reste, et « J'en prends ». */
.take-panel { display: grid; gap: var(--e-2); padding: var(--e-3); border: 1px solid var(--bordure);
    border-radius: 12px; background: var(--surface-douce); }
.take-panel__line { margin: 0; line-height: 1.45; }

/* Tri rapide : une partie des exemplaires est déjà prise. */
.qs-card__taken { display: flex; gap: var(--e-2); align-items: flex-start; margin: 0; font-size: .88rem; color: var(--texte-secondaire); }
.qs-card__taken .icon { flex: none; margin-top: 2px; }

/* Les filtres ne collent plus aux objets qu'ils filtrent : un peu d'air après la légende de la liste. */
.legend-choices { margin-bottom: var(--e-2); }

/* Le message bleu d'introduction ne colle pas aux cartes de chiffres qui le suivent. */
.conflicts-intro + .stats { margin-top: var(--e-4); }

/* Tableau de bord du chef, onglet « En attente » : une ligne par chose à faire, avec son bouton de relance. */
/* Texte à gauche, action dans une colonne de largeur fixe à droite : les boutons s'alignent d'une ligne à l'autre. */
.pending-task { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; align-items: center; gap: var(--e-2); padding: var(--e-1) 0; min-height: 2.75rem; }
.pending-task > :last-child:not(:only-child) { justify-self: end; }
@media (max-width: 520px) { .pending-task { grid-template-columns: 1fr; } .pending-task > :last-child:not(:only-child) { justify-self: start; } }
/* Tableaux de suivi : en-têtes sur une ligne, alignés en bas, nom et badge sans retour à la ligne. */
@media (min-width: 701px) {
    table.data--stats thead th { white-space: nowrap; vertical-align: bottom; }
    table.data--stats td.cell-main .row { flex-wrap: nowrap; white-space: nowrap; }
}
.pending-task__what { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pending-task__what .icon { align-self: center; width: 16px; height: 16px; color: var(--texte-secondaire); flex: none; }
.pending-task + .pending-task { border-top: 1px solid var(--bordure); }
.pending-task form { margin: 0; flex: none; }
/* Rappel groupé : un bouton plus large, en bas de la personne. */
.pending-task--all { grid-template-columns: minmax(0, 1fr) auto; border-top: 1px dashed var(--bordure); margin-top: var(--e-1); }

/* Raccourcis et barres de filtres collées sous l'en-tête au défilement, et délimiteur de section. */
.mine-tabs {
    position: sticky; top: var(--haut-barre); z-index: 12;
    padding: var(--e-2) 0;
    background: color-mix(in srgb, var(--fond) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bordure);
}
[id] { scroll-margin-top: calc(var(--haut-barre) + 76px); }
.activity-shortcuts .mine-tab { display: inline-flex; align-items: center; gap: 6px; }
.activity-shortcuts .mine-tab .icon { width: 15px; height: 15px; flex: none; }
.section-divider {
    display: flex; align-items: center; gap: var(--e-3);
    margin: var(--e-2) 0; color: var(--texte-secondaire);
}
.section-divider__line { flex: 1; height: 1px; background: var(--bordure-forte); }
.section-divider__label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--e-1) var(--e-3); border-radius: var(--r-full);
    background: var(--surface-douce); border: 1px solid var(--bordure);
    font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.section-divider__label .icon { width: 14px; height: 14px; flex: none; }

/* PAG-05 · Gestion des pages, catégories et champs personnalisés */
.section-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.section-nav a {
    padding: 6px 12px; border-radius: var(--r-full); border: 1px solid var(--bordure);
    background: var(--surface); color: var(--texte); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.section-nav a:hover, .section-nav a:focus-visible { border-color: var(--bleu-action); outline: none; }
.section-nav__count { font-weight: 600; color: var(--texte-secondaire); margin-left: 4px; }
.cat-list { display: grid; gap: 12px; }
.cat-card {
    display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
    border: 1px solid var(--bordure); background: var(--surface);
}
.cat-card__head { flex-wrap: wrap; gap: 8px; }
.cat-card__fields > summary, .cat-card__more > summary, .field-list__edit > summary, .field-add > summary {
    cursor: pointer; list-style: none;
}
.cat-card__fields > summary { font-weight: 600; font-size: .92rem; }
.field-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.field-list__item {
    display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--bordure); background: var(--surface-douce);
}
.field-list__main { display: grid; gap: 4px; min-width: 0; }
.field-list__flags { flex-wrap: wrap; }
.danger-zone { border-color: var(--danger); }
.settings-card > summary { cursor: pointer; list-style: none; }
.settings-card > summary::-webkit-details-marker { display: none; }

/* Suites de l'attribution (2F) : objets sans preneur, pris en charge pour être vendus, donnés ou recyclés. */
.outlets { display: grid; gap: var(--e-2); }
.outlet { display: grid; gap: var(--e-2); padding: var(--e-3); border: 1px solid var(--bordure);
    border-radius: 14px; background: var(--surface); }
.outlet--done { background: var(--surface-douce); }
.outlet__head { display: flex; align-items: center; gap: var(--e-3); color: inherit; min-width: 0; }
.outlet__head:hover { text-decoration: none; }
.outlet__line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); line-height: 1.4; }
.outlet__who { display: inline-flex; align-items: center; gap: var(--e-1); font-size: .9rem; }
.outlet__alert { margin: 0; display: flex; gap: var(--e-2); align-items: flex-start; font-size: .88rem;
    padding: var(--e-2) var(--e-3); border-radius: 10px; background: var(--ambre-clair); color: var(--ambre); }
.outlet__alert .icon { flex: none; margin-top: 2px; }
.outlet__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: flex-start; }
.outlet__more > summary, .outlet-take > summary { list-style: none; cursor: pointer; }
.outlet__more > summary::-webkit-details-marker, .outlet-take > summary::-webkit-details-marker { display: none; }
.outlet__more[open], .outlet-take[open] { flex-basis: 100%; }
.outlet__form { display: grid; gap: var(--e-2); margin-top: var(--e-2); padding: var(--e-3);
    border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface-douce); max-width: 32rem; }
.outlet__form .field { margin-bottom: 0; }
.outlet__choice { display: flex; align-items: center; gap: var(--e-2); min-height: 2.25rem; }
.outlet__networks { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------------------
   Activité · « À faire » : une seule carte pour tout ce qui attend une
   réponse. Même taille, mêmes couleurs, même ordre : une pastille dit
   POURQUOI (la raison), puis l'objet, puis ce qu'on attend de moi, puis
   le bouton. Les cartes issues d'autres écrans (vente, exemplaires,
   remboursements) reprennent ces règles quand elles sont dans la liste.
   ------------------------------------------------------------------------ */
.todo-list { display: grid; gap: var(--e-3); }
.todo-group { display: contents; }
.todo-list .todo {
    display: flex; flex-direction: column; gap: var(--e-3);
    padding: var(--e-4); border: 1px solid var(--bordure); border-radius: var(--r-xl);
    background: var(--surface); box-shadow: var(--ombre-carte); min-width: 0;
}
.todo__tag {
    margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--r-full); font-size: .8rem; font-weight: 700; line-height: 1.4;
    background: var(--bleu-clair); color: var(--bleu-clair-texte);
}
.todo__tag .icon { width: 14px; height: 14px; flex: none; }
.todo__head { display: flex; align-items: center; gap: var(--e-3); min-width: 0; color: inherit; }
.todo__head:hover { text-decoration: none; }
.todo__head:hover .todo__title { color: var(--bleu-action); }
.todo__thumb, .todo-list .leftover__thumb {
    position: relative; flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: #EEF2F6;
    display: inline-flex; align-items: center; justify-content: center; color: var(--bleu-clair-texte);
}
.todo__thumb img, .todo-list .leftover__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.todo__thumb .icon { width: 26px; height: 26px; }
.todo__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.todo__title, .todo-list .leftover__title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.todo__meta, .todo-list .leftover__meta { font-size: .82rem; color: var(--texte-secondaire); }
.todo__reason, .todo-list .leftover__taken { margin: 0; font-size: .92rem; line-height: 1.45; }
.todo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding-top: var(--e-3); border-top: 1px solid var(--bordure); }
.todo__actions form { margin: 0; }
.todo__side { font-weight: 700; font-variant-numeric: tabular-nums; }
.todo-list .outlet__actions { padding-top: var(--e-3); border-top: 1px solid var(--bordure); }
:where(html[data-theme="dark"]) .todo__thumb { background: #26334A; }
/* ------------------------------------------------ Lot 2G : aide, visite, retrait */
.menu-item--button { width: 100%; background: none; border: 0; border-top: 1px solid var(--bordure); font: inherit; text-align: left; cursor: pointer; }
.menu-item--button[hidden], [data-install][hidden] { display: none !important; }

/* AID-02 : bulle d'aide contextuelle (« ? » qui déplie une explication) */
.help-bubble { display: inline-block; position: relative; vertical-align: middle; margin-left: var(--e-2); font-family: var(--police); font-weight: 400; }
.help-bubble__button {
    list-style: none; cursor: pointer; width: 28px; height: 28px; border-radius: var(--r-full);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bleu-clair); color: var(--bleu-clair-texte); font-size: .9rem; font-weight: 600;
}
.help-bubble__button::-webkit-details-marker { display: none; }
.help-bubble__button:hover { filter: brightness(.96); }
.help-bubble[open] .help-bubble__button { background: var(--bleu-action); color: #fff; }
.help-bubble__text {
    position: absolute; z-index: 20; top: calc(100% + var(--e-2)); left: 0; width: min(320px, 80vw);
    padding: var(--e-3); border-radius: var(--r-lg); background: var(--surface); color: var(--texte);
    border: 1px solid var(--bordure-forte); box-shadow: var(--ombre-carte); font-size: .88rem; line-height: 1.45;
}
.help-bubble__text p { margin: 0; }
.help-bubble__text p + p { margin-top: var(--e-2); }

/* AID-01 : visite guidée */
.tour { max-width: 480px; margin: var(--e-5) auto; text-align: center; }
.tour__steps { display: flex; gap: var(--e-2); justify-content: center; margin: 0; }
.tour__dot { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--bordure-forte); }
.tour__dot--on { background: var(--bleu-action); width: 26px; }
.tour__icon { margin: 0; }
.tour__icon .icon { width: 64px; height: 64px; color: var(--bleu-action); }
.tour__actions { margin-top: var(--e-4); }

/* AID-02 : FAQ */
.faq { display: flex; flex-direction: column; gap: var(--e-2); }
.faq__item { border: 1px solid var(--bordure); border-radius: var(--r-lg); background: var(--surface); }
.faq__item summary { cursor: pointer; padding: var(--e-3) var(--e-4); font-weight: 600; min-height: var(--cible); display: flex; align-items: center; }
.faq__item p { margin: 0; padding: 0 var(--e-4) var(--e-3); color: var(--texte-secondaire); }
.faq__item p a { color: var(--bleu-action); text-decoration: underline; }
:where(html[data-theme="dark"]) .faq__item p a { color: var(--t-bleu); }
/* Rubrique réservée à un rôle (chef de famille) : teinte orange et mention avant chaque réponse. */
.faq-rubrique--reservee > h2 { color: var(--ambre); }
.faq-rubrique--reservee .faq__item { border-color: color-mix(in srgb, var(--ambre) 32%, var(--bordure)); background: color-mix(in srgb, var(--ambre-clair) 60%, var(--surface)); }
.faq__item .faq__reserve { display: flex; align-items: center; gap: 6px; padding-bottom: var(--e-2); color: var(--ambre); font-size: .8rem; font-weight: 700; }
.faq__reserve .icon { width: 15px; height: 15px; }
.faq-sommaire a.faq-sommaire__reserve { background: var(--ambre-clair); border-color: color-mix(in srgb, var(--ambre) 35%, var(--bordure)); color: var(--ambre); }
:where(html[data-theme="dark"]) .faq-rubrique--reservee > h2, :where(html[data-theme="dark"]) .faq__item .faq__reserve, :where(html[data-theme="dark"]) .faq-sommaire a.faq-sommaire__reserve { color: var(--t-ambre); }
.faq-sommaire { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.faq-sommaire a { padding: var(--e-1) var(--e-3); border: 1px solid var(--bordure); border-radius: 999px; background: var(--surface); font-size: 0.875rem; text-decoration: none; min-height: var(--cible); display: inline-flex; align-items: center; }
.faq-rubrique { scroll-margin-top: var(--e-4); }
.faq-rubrique > h2 { margin-top: var(--e-4); scroll-margin-top: 72px; }

.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); font-size: .88rem; }

/* Vignettes et liste de la page Récupération */
.pickup__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.pickup__item { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border: 1px solid var(--bordure); border-radius: var(--r-lg); background: var(--surface); break-inside: avoid; }
.pickup__thumb { position: relative; width: 64px; height: 64px; flex: none; border-radius: var(--r-md); overflow: hidden; background: var(--surface-douce); }
.pickup__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pickup__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }

.title-row { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.title-row h1 { margin: 0; }
.title-row .help-bubble { margin-left: 0; }

/* Récupération : cases à cocher sur téléphone, filtre par personne */
.recovery__filter { align-items: center; }
.recovery__filter select { min-width: 200px; }
.recovery__room { display: flex; align-items: center; gap: var(--e-2); font-size: 1rem; margin-top: var(--e-3); }
.recovery__form, .recovery__check { display: flex; align-items: center; flex: none; margin: 0; }
.recovery__check { min-width: var(--cible); min-height: var(--cible); justify-content: center; cursor: pointer; }
/* Coche maison : pastille arrondie qui se remplit de vert, le trait se dessine, un petit rebond. */
.recovery__box {
    -webkit-appearance: none; appearance: none; position: relative; margin: 0; flex: none; cursor: pointer;
    width: 28px; height: 28px; border-radius: var(--r-md);
    border: 2px solid var(--bordure-forte); background: var(--surface);
    transition: background-color .25s ease, border-color .25s ease, transform .15s ease;
}
.recovery__box::after {
    content: ""; position: absolute; left: 50%; top: 46%; width: 7px; height: 13px;
    border: solid #fff; border-width: 0 3px 3px 0; border-radius: 1px;
    transform: translate(-50%, -55%) rotate(45deg) scale(.4); opacity: 0;
    clip-path: inset(0 100% 100% 0);
    transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), opacity .15s ease, clip-path .3s ease .05s;
}
.recovery__box:hover:not(:disabled) { border-color: var(--vert); }
.recovery__box:checked { background: var(--vert); border-color: var(--vert); }
.recovery__box:active:not(:disabled) { transform: scale(.92); }
.recovery__box:checked::after { opacity: 1; transform: translate(-50%, -55%) rotate(45deg) scale(1); clip-path: inset(0 0 0 0); }
.recovery__box:focus-visible { outline: 3px solid var(--bleu-action); outline-offset: 2px; }
.recovery__box:disabled { cursor: default; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .recovery__box, .recovery__box::after { transition: none; } }
.recovery__item { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border: 1px solid var(--bordure); border-radius: var(--r-lg); background: var(--surface); break-inside: avoid; }
.recovery__item--done { opacity: .85; }

/* AID-01 : guide pas à pas */
.guide-wrap { max-width: 640px; margin: var(--e-4) auto; display: flex; flex-direction: column; gap: var(--e-4); }
/* Carte de taille fixe : « Précédent » et « Suivant » restent toujours au même endroit ; le contenu défile dedans. */
.guide { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); height: min(680px, calc(100dvh - 120px)); min-height: 440px; }
.guide__head { flex: none; display: flex; flex-direction: column; gap: var(--e-2); }
.guide__head p { margin: 0; }
.guide__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: var(--e-1); }
.guide__logo { margin: 0; }
.guide__logo img { height: 56px; width: auto; }
.guide__more { padding-bottom: var(--e-4); }
.guide__bar { width: 100%; height: 8px; accent-color: var(--bleu-action); }
.guide__icon { margin: 0; }
.guide__icon .icon { width: 48px; height: 48px; color: var(--bleu-action); }
.guide__intro { font-size: 1.05rem; }
.guide__where { display: flex; gap: var(--e-2); align-items: flex-start; padding: var(--e-3); border-radius: var(--r-lg); background: var(--bleu-clair); color: var(--bleu-clair-texte); margin: 0; font-size: .9rem; }
.guide__where .icon { flex: none; margin-top: 2px; }
.guide__steps { margin: 0; padding-left: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); }
.guide__steps li::marker { font-weight: 700; color: var(--bleu-action); }
.guide__actions { flex: none; margin: 0; padding-top: var(--e-3); border-top: 1px solid var(--bordure); }
.guide__toc { border-top: 1px solid var(--bordure); padding-top: var(--e-3); }
.guide__toc summary { cursor: pointer; font-weight: 600; min-height: var(--cible); display: flex; align-items: center; }
.guide__group { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-secondaire); margin: var(--e-3) 0 var(--e-1); }
.guide__list { margin: 0; padding-left: var(--e-5); }
.guide__list a[aria-current="step"] { font-weight: 700; }
.guide__quit { text-align: center; margin: 0; }
.guide__install { display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.guide__install [data-install][hidden] { display: none !important; }

/* Pages et catégories : écran de structure */
.struct-intro { margin: 0; max-width: 62ch; }
.struct-page { gap: var(--e-3); transition: border-color .15s, box-shadow .15s; }
.struct-page:hover { border-color: var(--bordure-forte); }
.struct-page__title { gap: var(--e-3); flex-wrap: nowrap; min-width: 0; }
.struct-page__tile {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--surface-douce);
    border: 1px solid var(--bordure);
}
.struct-page__tile .icon { width: 24px; height: 24px; }
.struct-page__cats { padding-top: var(--e-3) !important; border-top: 1px dashed var(--bordure); }
.struct-empty { display: grid; justify-items: center; text-align: center; gap: var(--e-3); padding: var(--e-6, 32px) var(--e-4); }
.struct-empty h2, .struct-empty p { margin: 0; }
.struct-empty__icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: var(--r-full); background: var(--bleu-clair); color: var(--bleu-action); }
.struct-empty__icon .icon { width: 28px; height: 28px; }
.struct-edit-head .struct-page__title { gap: var(--e-3); }
.struct-add-cat { padding: var(--e-3); border: 1px dashed var(--bordure-forte); border-radius: var(--r-lg); background: var(--surface-douce); }
/* Champ + bouton sur une ligne ; sous 420 px le bouton passe dessous, le champ garde toute sa largeur. */
.struct-add-cat__line { display: flex; flex-wrap: wrap; gap: var(--e-2, 8px); align-items: stretch; }
.struct-add-cat__line input[type="text"] { flex: 1 1 240px; min-width: 0; width: auto; min-height: 44px; }
.struct-add-cat__line .btn { flex: 0 0 auto; }
.cat-card__head { align-items: center; flex-wrap: nowrap; }
.cat-card__head > .stack { min-width: 0; }
.cat-card__more-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-3); padding: var(--e-3); border-radius: var(--r-md); background: var(--surface-douce); border: 1px solid var(--bordure); }
.cat-card__more-panel[hidden] { display: none; }
.cat-card__more-panel input[type="text"] { width: min(260px, 100%); }
.cat-card__fields { margin-top: var(--e-3); }
.struct-toast {
    position: fixed; left: 50%; bottom: calc(var(--e-5, 20px) + env(safe-area-inset-bottom, 0px)); z-index: 60;
    transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
    max-width: min(92vw, 480px); padding: var(--e-2) var(--e-4); border-radius: var(--r-full);
    background: var(--bleu-nuit); color: #fff; font-size: .9rem; box-shadow: var(--ombre);
}
.struct-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.struct-toast.is-error { background: #B42318; }
.is-moved { animation: struct-moved .7s ease; }
@keyframes struct-moved { 0% { box-shadow: 0 0 0 3px var(--bleu-action); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .is-moved { animation: none; } .struct-toast { transition: none; } }

/* Menu « ⋮ » : déplacer un élément à une position précise (pages, catégories, pièces). */
.move-menu { position: relative; flex: none; }
.move-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.move-menu > summary::-webkit-details-marker { display: none; }
.move-menu__panel {
    position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; width: min(260px, 80vw);
    display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3);
    background: var(--surface); border: 1px solid var(--bordure, rgba(128, 128, 128, .3)); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
}
.move-menu__panel label { font-size: .875rem; font-weight: 600; }
.move-menu__quick { display: flex; gap: var(--e-1); flex-wrap: wrap; }
[data-sortable] > li[draggable="true"] { cursor: grab; }
[data-sortable] > li.is-drop-target { box-shadow: 0 -3px 0 var(--bleu-action); }

/* ------------------------------------------------- Pages d'erreur (err-) */
/* Même carte que la connexion : bandeau bleu nuit, corps blanc. Le code
   d'erreur rebondit, son « 0 » est le logo, des cartons flottent derrière. */
.err-card { overflow: hidden; padding: 0; box-shadow: var(--ombre-haute); animation: err-entree .45s ease-out both; }
.err-card__head {
    position: relative; overflow: hidden; text-align: center;
    padding: var(--e-6) var(--e-4) var(--e-5);
    background: linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-nuit-fonce) 100%);
    color: #fff;
}
.err-code { position: relative; display: flex; justify-content: center; align-items: center; gap: var(--e-1); }
.err-code__digit {
    font-family: var(--police-titres); font-weight: 600; font-size: 5.2rem; line-height: 1;
    letter-spacing: -.03em; color: #fff;
    text-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    animation: err-rebond 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .18s);
}
.err-code__logo {
    width: 84px; height: 84px; flex: 0 0 auto;
    animation: err-oscille 3.6s ease-in-out infinite; transform-origin: 50% 90%;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .3));
}
.err-box {
    position: absolute; display: block; border-radius: 6px;
    background: rgba(255, 255, 255, .13); border: 1.5px solid rgba(255, 255, 255, .22);
    animation: err-flotte 6s ease-in-out infinite;
}
.err-box--1 { width: 26px; height: 26px; left: 9%;  top: 22%; }
.err-box--2 { width: 18px; height: 18px; left: 21%; top: 68%; animation-delay: -2s; animation-duration: 7s; background: rgba(238, 114, 105, .35); }
.err-box--3 { width: 22px; height: 22px; right: 12%; top: 18%; animation-delay: -4s; background: rgba(101, 186, 129, .35); }
.err-box--4 { width: 30px; height: 30px; right: 22%; top: 66%; animation-delay: -1s; animation-duration: 8s; }
.err-card__body { padding: var(--e-5) var(--e-4) var(--e-4); text-align: center; }
@media (min-width: 1000px) { .err-card__body { padding: var(--e-5) var(--e-5) var(--e-4); } }
.err-card__kicker {
    display: inline-block; margin: 0 auto; padding: 2px var(--e-3); border-radius: var(--r-full);
    background: var(--bleu-clair); color: var(--bleu-clair-texte); font-size: .8rem; font-weight: 600;
}
.err-card__title { margin: 0; font-size: 1.45rem; }
.err-card__message { margin: 0; color: var(--texte-secondaire); }
.err-card__actions { display: grid; gap: var(--e-2); margin-top: var(--e-2); }
.err-card .btn { min-height: 48px; font-weight: 600; }
.err-card__foot { border-top: 1px solid var(--bordure); background: var(--surface-douce); padding: var(--e-3) var(--e-4); margin: 0; }
@keyframes err-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes err-rebond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes err-oscille { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-6px); } }
@keyframes err-flotte { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(14deg); } }
@media (prefers-reduced-motion: reduce) {
    .err-card, .err-code__digit, .err-code__logo, .err-box { animation: none; }
}

/* ------------------------------------------------------------------------
   Page de famille : pastilles de rôle et cartes de membre.
   Les rôles se lisent d'un coup d'œil (couleur + pictogramme + mot) ; chaque
   carte garde la même structure quelle que soit la longueur des textes :
   identité et rôles en haut, progression, puis les actions alignées dessous.
   ------------------------------------------------------------------------ */
.role-badges { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); list-style: none; margin: 0; padding: 0; }
.role-badge {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
    padding: 3px 10px 3px 8px; border-radius: var(--r-full); border: 1px solid transparent;
    font-size: .78rem; font-weight: 600; line-height: 1.35; vertical-align: middle;
    background: #EEF2F6; color: #4B5668;
}
.role-badge .icon { flex: none; width: 14px; height: 14px; }
.role-badge__where { font-weight: 500; overflow-wrap: anywhere; }
.role-badge--famille { background: var(--bleu-nuit); color: #fff; }
.role-badge--maison { background: var(--bleu-clair); color: var(--bleu-clair-texte); border-color: #BFD3FB; }
.role-badge--membre { background: #EEF2F6; color: #4B5668; border-color: var(--bordure); }
.role-badge--admin { background: #F3E8FF; color: #6B21A8; border-color: #E4CCFB; }
.role-badge--attente { background: var(--ambre-clair); color: var(--ambre); border-color: #F6DDA0; }
.role-badge--procuration { background: var(--vert-clair); color: var(--vert); border-color: #B6EBC6; }
:where(html[data-theme="dark"]) .role-badge--famille { background: #3C5B8C; color: #fff; }
:where(html[data-theme="dark"]) .role-badge--maison { background: rgba(141, 184, 255, .16); color: var(--t-bleu); border-color: rgba(141, 184, 255, .3); }
:where(html[data-theme="dark"]) .role-badge--membre { background: #26334A; color: #B6C2D6; border-color: transparent; }
:where(html[data-theme="dark"]) .role-badge--admin { background: rgba(196, 160, 255, .16); color: #D4B8FF; border-color: transparent; }
:where(html[data-theme="dark"]) .role-badge--attente { background: rgba(252, 211, 77, .14); color: var(--t-ambre); border-color: transparent; }
:where(html[data-theme="dark"]) .role-badge--procuration { background: rgba(134, 239, 172, .14); color: var(--t-vert); border-color: transparent; }

.roles-legend > summary { cursor: pointer; }
.roles-legend__list { display: grid; gap: var(--e-3); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.roles-legend__list .role-badge { margin-right: var(--e-1); }
.member-me { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; }

.member-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.member-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); padding: var(--e-4); }
.member-card--invited { border-style: dashed; }
.member-card__head { display: flex; align-items: flex-start; gap: var(--e-3); min-width: 0; }
.member-card__id { display: grid; gap: var(--e-2); min-width: 0; flex: 1; }
.member-card__name { margin: 0; overflow-wrap: anywhere; }
.member-card__progress { display: grid; gap: var(--e-1); min-width: 0; }
.member-card__progress p { margin: 0; }
.member-card__progress .progress { max-width: 260px; }
/* Actions : une grille de colonnes égales sur mobile (même place pour chaque bouton, quelle que
   soit la longueur de son texte) ; à droite de la carte, sur ordinateur. */
.member-card__actions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--e-2);
    padding-top: var(--e-3); border-top: 1px solid var(--bordure); min-width: 0;
}
.member-card__actions > form, .member-card__actions > .member-roles { min-width: 0; display: flex; }
.member-card__actions .btn { width: 100%; justify-content: center; text-align: center; line-height: 1.2; background: var(--surface); border: 1px solid var(--bordure-forte); }
.member-card__actions .btn .icon { flex: none; width: 16px; height: 16px; }
.member-card__remove, .member-card__remove:hover { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 40%, var(--bordure)); }
.member-roles { flex-direction: column; }
.member-roles > summary { list-style: none; cursor: pointer; }
.member-roles > summary::-webkit-details-marker { display: none; }
.member-roles[open] { grid-column: 1 / -1; order: 9; }
.member-roles[open] > summary { width: auto; align-self: flex-start; }
.member-roles__panel { margin-top: var(--e-3); padding: var(--e-3); background: var(--surface-douce); border: 1px solid var(--bordure); border-radius: var(--r-md); }
.member-roles__panel form.row { flex-wrap: wrap; }
.member-roles__panel select { flex: 1 1 180px; min-width: 0; width: auto; max-width: none; }
.member-roles__panel .btn { width: auto; }
@media (min-width: 720px) {
    .member-card { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-5); align-items: center; }
    .member-card__head, .member-card__progress { grid-column: 1; }
    .member-card__actions {
        grid-column: 2; grid-row: 1 / span 2; border-top: 0; padding-top: 0;
        display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: 440px;
    }
    .member-card__actions .btn { width: auto; white-space: nowrap; }
    .member-roles[open] { flex-basis: 100%; }
}

/* ------------------------------------------------------------------------
   Procurations nominatives (CHX-08) : page « Procurations » et page du lien reçu par e-mail.
   ------------------------------------------------------------------------ */
.proxy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.proxy-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); padding: var(--e-4); }
.proxy-card__who { display: flex; align-items: flex-start; gap: var(--e-3); min-width: 0; }
.proxy-card__who > div { min-width: 0; display: grid; gap: var(--e-1); }
.proxy-card__who p { margin: 0; }
.proxy-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); overflow-wrap: anywhere; }
.proxy-card > form { display: flex; }
.proxy-card > form .btn { width: 100%; justify-content: center; }
.proxy-card__end { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 40%, var(--bordure)); }
.proxy-terms { margin: 0; padding-left: var(--e-5); display: grid; gap: var(--e-2); font-size: .95rem; line-height: 1.45; }
@media (min-width: 640px) {
    .proxy-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .proxy-card > form .btn { width: auto; }
}