/*
 * Le tableau de bord : la mosaïque de cartes (préfixe dc-) et, dessous, la réserve des autres cartes (dc-shelf).
 * La carte reprend la grammaire des tuiles du pilotage : son sujet, le constat (h3), la référence (p), le dessin de la carte
 * en grand dans le coin, le détail au clic.
 * Couleurs : la carte ordinaire est blanche, à la couleur de l'application (--g) : son surtitre, le disque sous son dessin et
 * le chiffre du constat (dc-num, filtre dashboard_card_title). Pas de couleur par module, qui se confondrait avec celles qui ont un sens :
 * la carte se reconnaît à ce qu'elle dit, son sujet en surtitre et son dessin.
 * La couleur pleine (is-solid) est réservée aux cartes qui ont quelque chose d'important à dire aujourd'hui : rouge quand
 * ça dérape (is-alert), orange à surveiller (is-warning), vert pour une bonne nouvelle (is-good),
 * et la nuit pour une prévision (is-night). Vert, orange et rouge ne servent à rien d'autre. Ce qui est à traiter garde la carte
 * blanche, bordée de la couleur de l'application (is-todo) ; une carte personnelle porte la photo de l'utilisateur (dc-me) ;
 * rien à faire, une grosse coche verte sur le dessin (dc-ok).
 * Grille de 12 colonnes qui se range seule (row dense) ; une rangée vaut deux colonnes et une gouttière : la carte
 * carrée est carrée (~247 px dans la fenêtre de 1920 px). Moins de colonnes quand la place manque. Le tableau est rangé par
 * module : une section chacun (dc-section), son titre puis ses cartes, sur les colonnes du tableau.
 */

/* ================= La mosaïque ================= */
.dc-board { container: dc-board / inline-size; position: relative; padding-bottom: 2.5rem; }
.dc-grid {
    --cols: 12; --gap: 1.25rem;
    --row: clamp(13.5rem, calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * 2 + var(--gap)), 17rem);
    display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--row); grid-auto-flow: row dense; gap: var(--gap);
}

/* Les sections : une par module. Une section prend les colonnes de ses cartes (--span : la somme de leurs largeurs, tenue à
   jour par la page), au plus toute la largeur ; les petites se rangent côte à côte, chacune à la première rangée où elle
   tient (row dense). Ses cartes suivent les colonnes du tableau (subgrid) : d'une section à l'autre, elles restent alignées. */
.dc-sections { --cols: 12; --gap: 1.25rem; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-flow: row dense; gap: 1.75rem var(--gap); align-items: start; }
.dc-section { grid-column: span min(var(--span, 2), var(--cols)); display: grid; grid-template-columns: subgrid; row-gap: .75rem; min-width: 0; }
.dc-section > .dc-grid { grid-column: 1 / -1; grid-template-columns: subgrid; }
.dc-section-head { grid-column: 1 / -1; display: flex; align-items: center; gap: .625rem; min-width: 0; padding: 0 .125rem; }
.dc-section-icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .625rem; background: var(--color-card-icon-soft); color: var(--color-card-icon); font-size: .875rem; --fa-secondary-opacity: .45; }
.dc-section-title { min-width: 0; margin: 0 auto 0 0; overflow: hidden; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--color-ink); text-overflow: ellipsis; white-space: nowrap; }
.dc-section-tools { flex: none; display: flex; gap: .125rem; }
.dc-section-tools button { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: .625rem; background: transparent; color: var(--color-muted); cursor: pointer; font-size: .8125rem; }
.dc-section-tools button:is(:hover, :focus-visible) { background: var(--color-tile); color: var(--color-ink); }
/* La poignée paraît au survol (toujours, au doigt) ; à la souris, tout le titre se prend. */
.dc-section-grip { cursor: grab; touch-action: none; opacity: 0; transition: opacity .15s; }
.dc-section-head:is(:hover, :focus-within) .dc-section-grip { opacity: 1; }
.dc-section-head:has(.dc-section-grip) { cursor: grab; }
@media (pointer: coarse) { .dc-section-grip { opacity: 1; } }

/* ================= La carte ================= */
/* --g : la couleur de la carte, celle de l'application ; la couleur pleine la remplace (plus bas). */
.dc {
    --g: var(--color-primary-600); --dc-shadow: var(--shadow-card); --dc-top: 2.5rem;
    --dc-ink: var(--color-ink); --dc-muted: var(--color-muted);
    --g-ink: color-mix(in oklab, var(--g) 82%, #000);
    --g-soft: color-mix(in oklab, var(--g) 13%, var(--color-surface));
    --dc-float: #fff; --dc-float-ink: #181c32; --dc-float-ink-2: #3c3b42; --dc-float-muted: #8b8a93; --dc-float-line: rgb(29 21 49 / .07);
    --dc-float-shadow: 0 0 0 1px color-mix(in oklab, var(--g) 10%, transparent), 0 18px 36px -18px color-mix(in oklab, var(--g) 45%, rgb(30 21 53 / .5));
    --dc-line: rgb(29 21 49 / .07);
    position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; grid-column: span 2; container: dc / inline-size;
    background: var(--color-surface);
    color: var(--dc-ink); border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--dc-line), var(--dc-shadow);
    overflow: hidden; isolation: isolate; font-variant-numeric: tabular-nums;
}
.dc.dc-wide { grid-column: span 4; }
.dc.dc-big { grid-column: span 4; grid-row: span 2; }
.dc.dc-hero { grid-column: span 8; grid-row: span 2; }
/* Moins de colonnes quand la place manque (après les tailles, qu'elles doivent pouvoir réduire). */
@container dc-board (min-width: 2000px) { :is(.dc-sections, .dc-grid) { --cols: 16; } }
@container dc-board (max-width: 1299px) { :is(.dc-sections, .dc-grid) { --cols: 8; } }
@container dc-board (max-width: 939px) { :is(.dc-sections, .dc-grid) { --cols: 4; } .dc.dc-hero { grid-column: span 4; } }
@container dc-board (max-width: 559px) {
    :is(.dc-sections, .dc-grid) { --cols: 2; }
    .dc-grid { --row: minmax(15rem, auto); }
    .dc.dc-wide, .dc.dc-big, .dc.dc-hero { grid-column: span 2; }
}

.dc-top { flex: none; display: flex; align-items: center; gap: .5rem; height: var(--dc-top); padding: 0 .625rem 0 1.125rem; }
/* Le surtitre : ce dont parle la carte, en petites capitales ; le constat est le titre. */
.dc-topic { min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--g); }
/* La référence en pastille, dans le coin (CardView::$pill) ; les outils, repliés au repos, la poussent au survol. */
.dc-badge { flex: none; display: inline-flex; align-items: center; padding: .25rem .5rem; border-radius: 99px; font-size: .6875rem; font-weight: 700; white-space: nowrap; background: var(--g-soft); color: var(--g-ink); }
.dc.is-solid .dc-badge { background: rgb(255 255 255 / .2); color: #fff; }
.dc-tools { display: flex; gap: .125rem; width: 0; margin-left: -.5rem; overflow: hidden; opacity: 0; transition: opacity .15s; }
.dc:hover .dc-tools, .dc:focus-within .dc-tools, .dc.is-menu-open .dc-tools { width: auto; margin-left: 0; opacity: 1; }
.dc-tools button { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: .5rem; background: transparent; color: var(--dc-muted); cursor: pointer; font-size: .8125rem; }
.dc-tools button:hover, .dc-tools button:focus-visible { background: color-mix(in oklab, var(--g) 12%, transparent); color: var(--dc-ink); }
.dc-tools .dc-grip { cursor: grab; touch-action: none; }
.dc[data-key]:not(.is-static) .dc-top:has(.dc-grip) { cursor: grab; }

.dc-copy { flex: none; padding: .375rem 1.125rem 0; }
.dc-title { margin: 0; font-size: 1.03125rem; font-weight: 700; letter-spacing: -.022em; line-height: 1.24; color: var(--dc-ink);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-wrap: pretty; }
.dc-link { color: inherit; text-decoration: none; }
.dc-link::after { content: ""; position: absolute; inset: var(--dc-top) 0 0; z-index: 1; }
.dc-link:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.dc-link:focus-visible { outline: none; } .dc:has(.dc-link:focus-visible) { box-shadow: 0 0 0 2px var(--g), var(--dc-shadow); }
/* Le chiffre du constat, dans la couleur de la carte (sur la couleur pleine, il reste blanc). */
.dc-num { font-style: normal; }
.dc:not(.is-solid) .dc-num { color: var(--g); }
.dc-text { margin: .3125rem 0 0; font-size: .78125rem; line-height: 1.42; color: var(--dc-muted);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: pretty; }
.dc-wide .dc-title { font-size: 1.125rem; -webkit-line-clamp: 2; }
.dc:is(.dc-big, .dc-hero) { --dc-top: 3rem; }
.dc:is(.dc-big, .dc-hero) .dc-top { padding-left: 1.375rem; }
.dc:is(.dc-big, .dc-hero) .dc-copy { padding: .5rem 1.375rem 0; }
.dc-big .dc-title { font-size: 1.25rem; } .dc-hero .dc-title { font-size: 1.4375rem; }
.dc:is(.dc-big, .dc-hero) .dc-text { margin-top: .4375rem; font-size: .84375rem; -webkit-line-clamp: 3; }
/* Sans chiffres, la carte n'a pas de scène : ce qu'elle apprend a la place de finir sa phrase. */
.dc.is-quiet .dc-text { -webkit-line-clamp: 4; }
/* Sur deux colonnes, les rangées prennent la hauteur du contenu : les textes ont la place de finir leur phrase. */
@container dc-board (max-width: 559px) { .dc-grid .dc .dc-text { -webkit-line-clamp: 4; } .dc-grid .dc-wide .dc-title { -webkit-line-clamp: 3; } }
/* Ce qui se clique dans une scène passe devant le lien de la carte. */
.dc .dc-scene :is(a, button) { position: relative; z-index: 2; }

/* Le bas de la carte (sans chiffres, ou en attente de calcul) et la scène teintée des grandes tailles. */
.dc-mini { margin-top: auto; padding: .625rem 1.125rem 1rem; min-width: 0; }
.dc:is(.dc-big, .dc-hero) .dc-mini { padding: .75rem 1.375rem 1.25rem; }
.dc-scene { position: relative; flex: 1; min-height: 0; margin: .875rem .625rem .625rem; border-radius: .875rem; overflow: hidden;
    background: color-mix(in oklab, var(--color-ink) 3.5%, var(--color-surface)); }
.dc-float { border-radius: .8125rem; background: var(--dc-float); color: var(--dc-float-ink); box-shadow: var(--dc-float-shadow); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.dc:hover .dc-float { transform: translateY(-2px); }
.dc-float-list { position: absolute; z-index: 2; top: 1.25rem; left: .875rem; right: .875rem; padding: .25rem .875rem; }
.dc-float-foot { position: absolute; z-index: 3; left: 1.75rem; right: 1.75rem; bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .625rem; padding: .625rem .875rem; font-size: .75rem; font-weight: 700; }
.dc-float-foot > span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
/* Le geste au pied d'une liste, dans la couleur de la carte. */
.dc .dc-act { flex: none; }
.dc .dc-act.btn-primary { border-color: var(--g); background: var(--g); color: #fff; }
.dc .dc-act.btn-primary:hover { border-color: var(--g-ink); background: var(--g-ink); }

/* ================= Les scènes ================= */
/* Liste (en grande ; ses lignes servent aussi au dessin) */
.dc-li { display: flex; align-items: center; gap: .625rem; min-width: 0; padding: .4375rem 0; font-size: .75rem; font-weight: 600; color: var(--dc-float-ink-2); }
.dc-li + .dc-li { border-top: 1px solid var(--dc-float-line); }
.dc-li-l { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dc-li-l > :is(span, a) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.dc-li-l > a:hover { color: var(--g-ink); }
.dc-li-l small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65625rem; font-weight: 600; color: var(--dc-float-muted); }
.dc-li b { font-weight: 800; color: var(--dc-float-ink); white-space: nowrap; }
.dc:is(.dc-big, .dc-hero) .dc-li { padding: .5625rem 0; font-size: .78125rem; }
.dc-av { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: .5625rem; background: var(--a, var(--g)); color: #fff; font-size: .65625rem; font-weight: 800; letter-spacing: .01em; }
.dc-pill { flex: none; padding: .125rem .5rem; border-radius: 2rem; font-size: .6875rem; font-weight: 800; white-space: nowrap; color: var(--d, var(--color-ink-2)); background: color-mix(in srgb, var(--d, var(--color-ink)) 11%, var(--dc-float)); }
.dc-pill.is-warning { --d: var(--color-warning); } .dc-pill.is-danger { --d: var(--color-danger); } .dc-pill.is-success { --d: var(--color-success); }

/* Rien à signaler : la carte n'a pas de chiffres (module sans données), elle garde sa place avec son nom */
.dc-quiet { display: inline-flex; align-items: center; gap: .5rem; font-size: .71875rem; font-weight: 600; line-height: 1.35; color: var(--g-ink); }
.dc-quiet i { flex: none; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: .5rem; background: var(--g-soft); --fa-secondary-opacity: .45; }

/* ================= Les dessins ================= */
/* Le dessin d'une carte (CardInterface::getArt(), Card/Art/*) : ce qu'elle raconte, en illustration, que sa scène pose à côté
   des chiffres : la carte se reconnaît à sa silhouette. Les couleurs viennent des classes et de cette palette, jamais d'un
   url(#…) : un dégradé référencé disparaît quand la carte est dans un volet caché de la réserve. */
.dc-art {
    --art-paper: #fff; --art-paper-2: #fff0c2; --art-paper-3: #ffdce7; --art-rule: rgb(29 35 71 / .3);
    --art-gold: #ffc53a; --art-gold-2: #f2a516; --art-gold-ink: #9a5b00; --art-ink: #1d2347; --art-steel: #8c93b0;
    --art-wood: #b5793f; --art-wood-2: #8f5a2a; --art-coral: #ff6f61; --art-coral-2: #e5484d;
    --art-motion: var(--g); --art-ground: rgb(0 0 0 / .16);
    display: block; flex: none; overflow: visible;
}
.dc.is-solid .dc-art { --art-motion: #fff; --art-ground: rgb(0 0 0 / .22); }

/* Liste en grande : dans le coin bas gauche de la scène, sorti de son bord ; le pied se pousse à droite. Sur une carte étroite,
   le pied n'aurait plus la place de sa phrase : pas de dessin. */
.dc-scene.has-art > .dc-art { position: absolute; z-index: 1; left: .75rem; bottom: -.625rem; height: 5rem; }
.dc-scene.has-art > .dc-float-foot { left: 7rem; }
@container dc (max-width: 26rem) {
    .dc-scene.has-art > .dc-art { display: none; }
    .dc-scene.has-art > .dc-float-foot { left: 1.75rem; }
}

/* Les étoiles de la nuit (la carte phare), qui scintillent derrière le dessin. */
.dc-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .75; }
.dc-stars i:nth-child(1) { left: 24%; top: 14%; }
.dc-stars i:nth-child(2) { left: 41%; top: 80%; width: 3px; height: 3px; }
.dc-stars i:nth-child(3) { left: 57%; top: 8%; }
.dc-stars i:nth-child(4) { left: 72%; top: 88%; }
.dc-stars i:nth-child(5) { left: 88%; top: 12%; width: 3px; height: 3px; }
.dc-stars i:nth-child(6) { left: 7%; top: 86%; }
.dc-stars i:nth-child(7) { left: 64%; top: 46%; width: 1.5px; height: 1.5px; }
.dc-stars i:nth-child(8) { left: 95%; top: 58%; }
.dc .dc-drawing .dc-stars i { animation: dc-twinkle 3.2s ease-in-out infinite; }
.dc .dc-drawing .dc-stars i:nth-child(2n) { animation-duration: 4.4s; animation-delay: -1.3s; }
.dc .dc-drawing .dc-stars i:nth-child(3n) { animation-duration: 5.1s; animation-delay: -2.6s; }
@keyframes dc-twinkle { 50% { opacity: .2; transform: scale(.6); } }

/* Fait : rien à faire, tout est en ordre. La coche en grand dans le coin, comme un dessin (plus bas), ou au milieu de la scène
   en grande. */
.dc-scene.dc-done { display: grid; place-items: center; }
.dc-scene.dc-done .dc-art { height: 11rem; margin: 0; }

/* Dessin : le dessin de la carte en vedette, en grand dans le coin bas droit, sous le texte (le lien de la carte passe devant).
   Sur la carte blanche, un disque pâle dessous ; sur la nuit, un ciel étoilé ; sur la couleur pleine, rien. */
.dc-drawing > :is(.dc-stage, .dc-stars, .dc-art) { position: absolute; z-index: -1; }
.dc-drawing > .dc-art { right: .25rem; bottom: .125rem; width: 8.75rem; }
.dc-wide .dc-drawing > .dc-art { right: 1.5rem; width: 10.5rem; }
.dc-stage { right: -4rem; bottom: -4.875rem; width: 14.75rem; aspect-ratio: 1; border-radius: 50%; background: var(--g-soft); }
.dc.is-solid .dc-stage { display: none; }
.dc-drawing > .dc-stars { inset: 0 0 0 46%; }
.dc:not(.is-night) .dc-drawing > .dc-stars { display: none; }
/* Le chiffre en tête du constat, en grand sur sa ligne ; le texte laisse la place au dessin. */
.dc:has(> .dc-drawing) .dc-title { -webkit-line-clamp: 4; }
.dc:has(> .dc-drawing) .dc-num.is-lead { display: block; margin-bottom: .375rem; font-size: 2.875rem; font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.dc:has(> .dc-drawing) .dc-num.is-long { font-size: min(2.875rem, 14.5cqi); }
.dc:has(> .dc-drawing) .dc-num.is-longer { font-size: min(2.875rem, 12cqi); }
.dc-wide:has(> .dc-drawing) .dc-copy { max-width: 64%; }
.dc-wide:has(> .dc-drawing) .dc-text { -webkit-line-clamp: 3; }
/* Les lignes, en bas à gauche, à côté du dessin ; en blanc sur la couleur pleine. */
.dc-drawing-rows { margin-top: auto; max-width: 62%; padding: 0 1.125rem .875rem; }
.dc-drawing-rows a { position: relative; z-index: 2; }
.dc.is-solid .dc-drawing-rows { --dc-float-ink: #fff; --dc-float-ink-2: rgb(255 255 255 / .9); --dc-float-muted: rgb(255 255 255 / .7); --dc-float-line: rgb(255 255 255 / .2); }
/* Chaque dessin à sa place : le parasol sort du bas de la carte, la tirelire attend ses pièces. */
.dc-drawing > .dc-parasol { right: -.75rem; bottom: -.625rem; width: 10.625rem; }
.dc-sq:has(> .dc-drawing > .dc-parasol) .dc-title { max-width: 10.5rem; }
/* Le texte passe sur le dessin quand il tient trois lignes (carte étroite) : plus foncé, détouré de la couleur de la carte. Et le
   parasol de « fait » rapetisse en carrée : c'est la coche qui parle. */
.dc:not(.is-solid):has(> .dc-drawing) .dc-text { color: var(--color-ink-2); text-shadow: 0 0 .1875rem var(--color-surface), 0 0 .375rem var(--color-surface), 0 0 .625rem var(--color-surface); }
.dc-sq > .dc-done > .dc-parasol { width: 8.75rem; right: -.5rem; bottom: -.75rem; }
.dc-drawing > .dc-pig { right: .75rem; bottom: .625rem; width: 8.5rem; }
.dc-drawing > .dc-parcel { right: .875rem; width: 9.5rem; }
.dc-drawing > .dc-trophy { right: 1.25rem; bottom: .375rem; width: 6.25rem; }
.dc-wide .dc-drawing > .dc-trophy { right: 2.5rem; width: 7rem; }
.dc-wide .dc-drawing > .dc-pig { right: 1.625rem; bottom: .875rem; width: 11.875rem; }
/* En carrée, tous les dessins à la même taille, plus petits, sous le texte (le constat tient souvent deux lignes sous le grand
   chiffre) : sauf le parasol, qui sort du bas de la carte, et la coupe, déjà plus petite. */
.dc-sq .dc-drawing > .dc-art:not(.dc-parasol, .dc-trophy) { width: 7.5rem; }
/* Une double étroite (au téléphone, une carte par rangée, ~343 px) : à 64 % de cette largeur, le grand chiffre et le texte
   seraient à l'étroit, à côté d'un dessin réglé pour ~513 px qui les recouvrirait. Elle se range comme une carrée du même
   écran : le texte sur toute la largeur, le dessin à la taille de la carrée, dans une bande en bas qui lui est gardée
   (--dc-band : sa hauteur et un peu d'air ; les pièces de la tirelire tombent d'au-dessus) ; les lignes s'y posent à sa
   gauche, sinon la bande reste vide. Le dessin ne touche jamais le texte. */
@container dc (max-width: 28rem) {
    .dc-wide > :is(.dc-drawing, .dc-drawing-rows) { --dc-band: 7.25rem; }
    .dc-wide:has(> .dc-drawing > :is(.dc-trophy, .dc-parasol)) > :is(.dc-drawing, .dc-drawing-rows) { --dc-band: 8rem; }
    .dc-wide:has(> .dc-drawing > .dc-pig) > :is(.dc-drawing, .dc-drawing-rows) { --dc-band: 8.5rem; }
    .dc-wide:has(> .dc-drawing) > .dc-copy { max-width: none; }
    .dc-wide > .dc-drawing > .dc-art { right: .25rem; width: 7.5rem; }
    .dc-wide > .dc-drawing > .dc-pig { right: .75rem; bottom: .25rem; width: 7rem; }
    .dc-wide > .dc-drawing > .dc-trophy { right: 1.25rem; width: 6.25rem; }
    .dc-wide > .dc-drawing > .dc-parasol { right: -.5rem; bottom: -.5rem; width: 8rem; }
    .dc-wide:not(:has(> .dc-drawing-rows)) > .dc-drawing { flex: none; margin-top: auto; height: var(--dc-band); }
    .dc-wide > .dc-drawing-rows { display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--dc-band); max-width: calc(100% - 7.5rem); }
}

/* Les encaissements par mois : trois montants lisibles et les retards séparés, dans les deux tailles. */
.dc-months { position: relative; margin-top: auto; padding: .25rem 1.125rem .5rem; }
.dc-months-rows { position: relative; margin: 0; }
.dc-months-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .25rem 0; font-size: .8125rem; line-height: 1.35; }
.dc-months-row dt { min-width: 0; color: var(--dc-muted); }
.dc-months-row dd { flex: none; margin: 0; font-weight: 700; white-space: nowrap; }
.dc-months-aside { margin-top: .375rem; padding-top: .5rem; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 20%, transparent); font-size: .75rem; }
.dc-months-aside a { position: relative; z-index: 2; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dc-months-art { display: none; pointer-events: none; }
@container dc (max-width: 15rem) {
    .dc-months-row { padding: .125rem 0; font-size: .75rem; line-height: 1.25; }
    .dc-months-aside { margin-top: .25rem; padding-top: .375rem; }
}
@container dc (min-width: 28rem) {
    .dc-months-rows { max-width: calc(100% - 9rem); }
    .dc-months-art { position: absolute; display: block; right: 1rem; bottom: .625rem; width: 8.5rem; }
    .dc-months-art > .dc-art { width: 100%; }
}

/* La tirelire. */
.dc-pig { --pig: #ffa9c4; --pig-2: #f68cb1; --pig-3: #ffd3e0; --pig-ink: #3d1f33; }
.dc-pig .pg-ground { fill: rgb(0 0 0 / .28); }
.dc-pig :is(.pg-skin, .pg-leg) { fill: var(--pig); }
.dc-pig :is(.pg-far, .pg-belly, .pg-ear, .pg-snout) { fill: var(--pig-2); }
.dc-pig .pg-belly { opacity: .55; }
.dc-pig .pg-leg { fill: color-mix(in oklab, var(--pig) 55%, var(--pig-2)); }
.dc-pig .pg-tail { fill: none; stroke: var(--pig-2); stroke-width: 2.6; stroke-linecap: round; }
.dc-pig :is(.pg-ear-in, .pg-snout-end) { fill: var(--pig-3); }
.dc-pig .pg-shine { fill: #fff; opacity: .4; }
.dc-pig .pg-nose { fill: color-mix(in oklab, var(--pig-2) 60%, var(--pig-ink)); }
.dc-pig .pg-eye { fill: var(--pig-ink); }
.dc-pig .pg-glint { fill: #fff; }
.dc-pig .pg-cheek { fill: #ff6d9d; opacity: .5; }
.dc-pig .pg-slot { fill: color-mix(in oklab, var(--pig-2) 45%, var(--pig-ink)); }
.dc-pig .pg-coin-face { fill: var(--art-gold); }
.dc-pig .pg-coin-ring { fill: none; stroke: var(--art-gold-ink); stroke-width: 1; opacity: .5; }
.dc-pig .pg-coin-mark { fill: var(--art-gold-ink); font-size: 6.5px; font-weight: 800; text-anchor: middle; }
.dc-pig :is(.pg-body, .pg-coin) { transform-box: fill-box; }
.dc-pig .pg-body { transform-origin: 50% 100%; }
.dc-pig .pg-coin { transform-origin: 50% 50%; }
.dc:hover .dc-pig .pg-coin { animation: dc-pig-coin 1.3s cubic-bezier(.45, 0, .55, 1) both; }
.dc:hover .dc-pig .pg-body { animation: dc-pig-hop .55s .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes dc-pig-coin { 38% { opacity: 1; transform: translateY(13px) scale(.85, .3); } 42%, 72% { opacity: 0; transform: translateY(14px) scale(.85, .2); } 73% { opacity: 0; transform: translateY(-8px); } }
@keyframes dc-pig-hop { 40% { transform: translateY(-4px) rotate(-3deg); } 75% { transform: translateY(0) rotate(1.5deg); } }

/* Le contrat : une pile de contrats, celui du dessus signé et scellé. La signature s'écrit à l'arrivée du tableau et au survol. */
.dc-contract .ct-ground { fill: var(--art-ground); }
.dc-contract .ct-back { fill: color-mix(in oklab, var(--g) 22%, #fff); }
.dc-contract .ct-back.is-near { fill: color-mix(in oklab, var(--g) 10%, #fff); }
.dc-contract .ct-paper { fill: var(--art-paper); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .25)); }
.dc-contract .ct-head { fill: var(--g); }
.dc-contract .ct-line { fill: color-mix(in oklab, var(--g) 16%, #e9e8f0); }
.dc-contract .ct-base { fill: none; stroke: color-mix(in oklab, var(--g) 16%, #e9e8f0); stroke-width: 1.2; stroke-dasharray: 2 2; }
.dc-contract .ct-ink { fill: none; stroke: color-mix(in oklab, var(--g) 55%, #0b1440); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.dc-contract .ct-seal circle { fill: var(--art-gold); filter: drop-shadow(0 1.5px 1.5px rgb(120 70 0 / .35)); }
.dc-contract .ct-seal path { fill: none; stroke: var(--art-gold-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dc-contract .ct-nib { fill: #c9cfe0; }
.dc-contract .ct-grip, .dc-contract .ct-clip { fill: var(--art-gold); }
.dc-contract .ct-barrel { fill: var(--art-ink); }
.dc-contract :is(.ct-pen, .ct-seal) { transform-box: fill-box; transform-origin: 50% 50%; }
.dc-grid:not(.is-settled) > .dc .dc-contract .ct-ink { animation: dc-sign-in 1.1s calc(var(--i, 0) * 60ms + .45s) ease-in-out both; }
.dc-grid:not(.is-settled) > .dc .dc-contract .ct-pen { animation: dc-pen-in 1.1s calc(var(--i, 0) * 60ms + .45s) ease-in-out both; }
.dc-grid:not(.is-settled) > .dc .dc-contract .ct-seal { animation: dc-seal-in .45s calc(var(--i, 0) * 60ms + 1.55s) cubic-bezier(.3, 1.6, .5, 1) both; }
.dc:hover .dc-contract .ct-ink { animation: dc-sign 1.1s ease-in-out both; }
.dc:hover .dc-contract .ct-pen { animation: dc-pen 1.1s ease-in-out both; }
.dc:hover .dc-contract .ct-seal { animation: dc-seal .45s 1.1s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes dc-sign-in { from { stroke-dashoffset: 100; } }
@keyframes dc-sign { from { stroke-dashoffset: 100; } }
@keyframes dc-pen-in { 0% { transform: translate(-24px, 5px); } 18% { transform: translate(-19px, -3px); } 36% { transform: translate(-14px, 4px); } 54% { transform: translate(-10px, -2px); } 72% { transform: translate(-6px, 3px); } 86% { transform: translate(-3px, 0); } }
@keyframes dc-pen { 0% { transform: translate(-24px, 5px); } 18% { transform: translate(-19px, -3px); } 36% { transform: translate(-14px, 4px); } 54% { transform: translate(-10px, -2px); } 72% { transform: translate(-6px, 3px); } 86% { transform: translate(-3px, 0); } }
@keyframes dc-seal-in { from { opacity: 0; transform: scale(1.8) rotate(-30deg); } }
@keyframes dc-seal { from { opacity: 0; transform: scale(1.8) rotate(-30deg); } }
/* Sur la couleur pleine : le papier reste blanc, les feuilles de dessous passent en blanc voilé. */
.dc.is-solid .dc-contract .ct-back { fill: rgb(255 255 255 / .35); }
.dc.is-solid .dc-contract .ct-back.is-near { fill: rgb(255 255 255 / .6); }

/* Le réveil qui sonne, sur une pile de factures. */
.dc-clock .ck-ground { fill: var(--art-ground); }
.dc-clock .ck-paper { fill: var(--art-paper); stroke: var(--art-rule); stroke-width: .8; }
.dc-clock .ck-ring { fill: none; stroke: var(--art-motion); stroke-width: 2.4; stroke-linecap: round; }
.dc-clock .ck-leg { fill: none; stroke: var(--art-steel); stroke-width: 3.4; stroke-linecap: round; }
.dc-clock .ck-bell { fill: var(--art-gold-2); }
.dc-clock .ck-steel { fill: var(--art-steel); }
.dc-clock .ck-body { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(10 16 60 / .22)); }
.dc-clock .ck-face { fill: var(--art-paper); }
.dc-clock .ck-tick { fill: none; stroke: var(--art-ink); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.dc-clock .ck-hand { fill: none; stroke: var(--art-ink); stroke-width: 2.6; stroke-linecap: round; }
.dc-clock .ck-ink { fill: var(--art-ink); }
.dc-clock .ck-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .65; }

/* La boîte aux lettres qui déborde, drapeau levé. */
.dc-mailbox .mb-wood { fill: var(--art-wood); }
.dc-mailbox .mb-wood-2 { fill: var(--art-wood-2); }
.dc-mailbox .mb-side { fill: var(--art-coral); }
.dc-mailbox .mb-front { fill: var(--art-coral-2); }
.dc-mailbox .mb-in { fill: #5c1a2b; }
.dc-mailbox .mb-door { fill: color-mix(in oklab, var(--art-coral) 75%, #fff); }
.dc-mailbox .mb-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .45; }
.dc-mailbox .mb-pole { fill: var(--art-steel); }
.dc-mailbox .mb-flag { fill: var(--art-gold); }
.dc-mailbox .mb-env { fill: var(--art-paper); }
.dc-mailbox .mb-env.is-2 { fill: var(--art-paper-2); }
.dc-mailbox .mb-env.is-3 { fill: var(--art-paper-3); }
.dc-mailbox .mb-flap { fill: none; stroke: var(--art-rule); stroke-width: 1.2; stroke-linejoin: round; }

/* Le cadenas fermé, une bulle « ? » au-dessus. */
.dc-padlock .pl-ground { fill: var(--art-ground); }
.dc-padlock .pl-shackle { fill: none; stroke: var(--art-steel); stroke-width: 7; stroke-linecap: round; }
.dc-padlock .pl-shine-steel { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; opacity: .5; }
.dc-padlock .pl-body { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(10 16 60 / .22)); }
.dc-padlock .pl-body-2 { fill: var(--art-gold-2); }
.dc-padlock .pl-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .6; }
.dc-padlock .pl-hole { fill: var(--art-ink); }
.dc-padlock .pl-bubble { fill: var(--art-paper); stroke: var(--art-motion); stroke-width: 1.6; filter: drop-shadow(0 2px 2px rgb(10 16 60 / .18)); }
.dc-padlock .pl-mark { fill: none; stroke: var(--art-ink); stroke-width: 2.6; stroke-linecap: round; }
.dc-padlock .pl-dot { fill: var(--art-ink); }

/* Le trousseau : l'anneau, deux clés et l'étiquette étoilée. */
.dc-keyring .kr-ground { fill: var(--art-ground); }
.dc-keyring .kr-ring { fill: none; stroke: var(--art-steel); stroke-width: 3; }
.dc-keyring .kr-key { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(10 16 60 / .2)); }
.dc-keyring .kr-key.is-steel { fill: var(--art-steel); }
.dc-keyring .kr-eye { fill: var(--art-ink); opacity: .55; }
.dc-keyring .kr-shine { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .6; }
.dc-keyring .kr-string { fill: none; stroke: var(--art-wood); stroke-width: 1.4; stroke-linecap: round; }
.dc-keyring .kr-tag { fill: var(--art-paper); stroke: var(--art-rule); stroke-width: .8; }
.dc-keyring .kr-tag-hole { fill: var(--art-rule); }
.dc-keyring .kr-star { fill: var(--art-motion); }

/* La coche dans son sceau, des confettis autour : dans la couleur de la carte sur le blanc, blanche sur la couleur pleine. */
.dc-check .ok-ground { fill: var(--art-ground); }
.dc-check .ok-seal { fill: var(--g); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-check .ok-inner { fill: color-mix(in oklab, var(--g) 84%, #fff); }
.dc-check .ok-shine { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; opacity: .45; }
.dc-check .ok-tick { fill: none; stroke: #fff; stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.dc-check :is(.ok-cf.is-1, .ok-spark) { fill: var(--art-gold); }
.dc-check .ok-cf.is-2 { fill: var(--art-coral); }
.dc-check .ok-cf.is-3 { fill: var(--g); }
.dc-check .ok-cf.is-line { fill: none; stroke: var(--art-coral); stroke-width: 2.2; stroke-linecap: round; }
.dc.is-solid .dc-check .ok-seal { fill: #fff; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .2)); }
.dc.is-solid .dc-check .ok-inner { fill: color-mix(in oklab, var(--g) 10%, #fff); }
.dc.is-solid .dc-check .ok-shine { display: none; }
.dc.is-solid .dc-check .ok-tick { stroke: var(--g); }
.dc.is-solid .dc-check .ok-cf.is-3 { fill: rgb(255 255 255 / .8); }

/* La pile d'enveloppes fermées, une araignée qui y a tissé sa toile. */
.dc-envelopes .ev-env { fill: var(--art-paper); filter: drop-shadow(0 1.5px 1.5px rgb(10 16 60 / .22)); }
.dc-envelopes .ev-env.is-2 { fill: var(--art-paper-2); }
.dc-envelopes .ev-env.is-3 { fill: var(--art-paper-3); }
.dc-envelopes .ev-flap { fill: none; stroke: var(--art-rule); stroke-width: 1.3; stroke-linejoin: round; }
.dc-envelopes .ev-seal { fill: var(--art-coral-2); }
.dc-envelopes .ev-seal-in { fill: color-mix(in oklab, var(--art-coral-2) 70%, #000); }
.dc-envelopes :is(.ev-web, .ev-thread) { fill: none; stroke: var(--art-steel); stroke-width: .75; stroke-linecap: round; }
.dc-envelopes .ev-legs { fill: none; stroke: var(--art-ink); stroke-width: 1.1; stroke-linecap: round; }
.dc-envelopes .ev-spider { fill: var(--art-ink); }

/* La coupe du premier. */
.dc-trophy .tp-ground { fill: var(--art-ground); }
.dc-trophy .tp-spark { fill: var(--art-gold); }
.dc.is-solid .dc-trophy .tp-spark { fill: #fff; }
.dc-trophy .tp-handle { fill: none; stroke: var(--art-gold-2); stroke-width: 3.4; stroke-linecap: round; }
.dc-trophy .tp-gold { fill: var(--art-gold); }
.dc-trophy :is(.tp-gold-2, .tp-shade) { fill: var(--art-gold-2); }
.dc-trophy .tp-shade { opacity: .6; }
.dc-trophy .tp-shine { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: .7; }
.dc-trophy .tp-mark { fill: var(--art-gold-ink); font-size: 14px; font-weight: 800; text-anchor: middle; }
.dc-trophy .tp-base { fill: var(--art-wood-2); }

/* Le parasol dans le sable, sous le soleil : rayé de corail et d'or, de corail et de blanc sur la couleur pleine. */
.dc-parasol .ps-halo { fill: var(--art-gold); opacity: .25; }
.dc-parasol .ps-sun { fill: #ffd04d; }
.dc-parasol .ps-sand { fill: #f3d29a; }
.dc-parasol .ps-sand-2 { fill: #e6bd7a; }
.dc-parasol .ps-pole { fill: none; stroke: var(--art-wood); stroke-width: 3; stroke-linecap: round; }
.dc-parasol .ps-cloth { fill: var(--art-coral); filter: drop-shadow(0 2px 2px rgb(10 16 60 / .2)); }
.dc-parasol .ps-stripe { fill: var(--art-gold); }
.dc.is-solid .dc-parasol .ps-stripe { fill: #fff; }
.dc-parasol .ps-tip { fill: var(--art-wood-2); }
.dc-deckchairs .dk-halo { fill: var(--art-gold); opacity: .25; }
.dc-deckchairs .dk-sun { fill: #ffd04d; }
.dc-deckchairs .dk-sand { fill: #f3d29a; }
.dc-deckchairs .dk-sand-2 { fill: #e6bd7a; }
.dc-deckchairs .dk-shadow { fill: none; stroke: var(--art-ground); stroke-width: 3; stroke-linecap: round; }
.dc-deckchairs .dk-wood { fill: none; stroke: var(--art-wood); stroke-width: 3; stroke-linecap: round; }
.dc-deckchairs .dk-cloth { fill: var(--art-coral); filter: drop-shadow(0 2px 2px rgb(10 16 60 / .2)); }
.dc-deckchairs .dk-cloth.is-second { fill: var(--g, var(--color-accent)); }
.dc-deckchairs .dk-stripe { fill: none; stroke: #fff; stroke-width: 1.3; opacity: .75; }

/* Les bulles : la question du client, la réponse de l'équipe dans la couleur de la carte (blanche sur la couleur pleine), le chrono. */
.dc-talk .tk-ground { fill: var(--art-ground); }
.dc-talk .tk-bubble { fill: var(--art-paper); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .18)); }
.dc-talk .tk-q { fill: var(--art-coral-2); font-size: 30px; font-weight: 800; text-anchor: middle; }
.dc-talk .tk-reply { fill: var(--g); filter: drop-shadow(0 4px 6px rgb(60 20 140 / .3)); }
.dc-talk .tk-check { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.dc-talk .tk-speed { fill: none; stroke: var(--art-motion); stroke-width: 3; stroke-linecap: round; opacity: .45; }
.dc-talk .tk-gold { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-talk .tk-face { fill: var(--art-paper); }
.dc-talk .tk-steel { fill: var(--art-steel); }
.dc-talk .tk-hand { fill: none; stroke: var(--art-ink); stroke-width: 2; stroke-linecap: round; }
.dc.is-solid .dc-talk .tk-reply { fill: #fff; }
.dc.is-solid .dc-talk .tk-check { stroke: var(--g); }

/* Le carton livré, son étiquette de prix qui attend. */
.dc-parcel .pc-ground { fill: var(--art-ground); }
.dc-parcel .pc-top { fill: #f0c486; }
.dc-parcel .pc-left { fill: #dca062; }
.dc-parcel .pc-right { fill: #c4854b; }
.dc-parcel .pc-tape { fill: #f7dcaa; opacity: .9; }
.dc-parcel .pc-label { fill: var(--art-paper); }
.dc-parcel .pc-line { fill: none; stroke: var(--art-rule); stroke-width: 1.6; stroke-linecap: round; }
.dc-parcel .pc-string { fill: none; stroke: var(--art-ink); stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.dc-parcel .pc-tag { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-parcel .pc-hole { fill: var(--art-paper); stroke: var(--art-gold-2); stroke-width: 1; }
.dc-parcel .pc-mark { fill: var(--art-gold-ink); font-size: 10px; font-weight: 800; text-anchor: middle; }

/* Le ticket de caisse sous le tampon, une pièce à côté. */
.dc-receipt .rc-ground { fill: var(--art-ground); }
.dc-receipt .rc-paper { fill: var(--art-paper); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .2)); }
.dc-receipt .rc-rule { fill: none; stroke: var(--art-rule); stroke-width: 2.4; stroke-linecap: round; }
.dc-receipt .rc-total { fill: none; stroke: var(--art-ink); stroke-width: 3; stroke-linecap: round; }
.dc-receipt .rc-knob { fill: var(--art-wood); }
.dc-receipt .rc-neck { fill: var(--art-wood-2); }
.dc-receipt .rc-base { fill: var(--art-coral); filter: drop-shadow(0 3px 3px rgb(10 16 60 / .25)); }
.dc-receipt .rc-rubber { fill: var(--art-coral-2); }
.dc-receipt .rc-motion { fill: none; stroke: var(--art-motion); stroke-width: 2.4; stroke-linecap: round; opacity: .6; }
.dc-receipt .rc-coin { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-receipt .rc-coin-ring { fill: none; stroke: var(--art-gold-ink); stroke-width: 1; opacity: .5; }
.dc-receipt .rc-coin-mark { fill: var(--art-gold-ink); font-size: 8px; font-weight: 800; text-anchor: middle; }

/* La page du calendrier, son jour d'or ; les flèches qui tournent dans la couleur de la carte, sur blanc en couleur pleine. */
.dc-calendar .cl-ground { fill: var(--art-ground); }
.dc-calendar .cl-back { fill: color-mix(in oklab, var(--g) 22%, #fff); }
.dc-calendar .cl-page { fill: var(--art-paper); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-calendar .cl-head { fill: var(--art-coral); }
.dc-calendar .cl-hole { fill: color-mix(in oklab, var(--art-coral-2) 60%, #000); }
.dc-calendar .cl-ring { fill: var(--art-steel); }
.dc-calendar .cl-cell { fill: color-mix(in oklab, var(--g) 14%, #ebeaf2); }
.dc-calendar .cl-day { fill: var(--art-gold); }
.dc-calendar .cl-mark { fill: var(--art-gold-ink); font-size: 8px; font-weight: 800; text-anchor: middle; }
.dc-calendar .cl-badge { fill: var(--g); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .25)); }
.dc-calendar .cl-arrow { fill: none; stroke: #fff; stroke-width: 3; }
.dc-calendar .cl-tip { fill: #fff; }
.dc.is-solid .dc-calendar .cl-back { fill: rgb(255 255 255 / .45); }
.dc.is-solid .dc-calendar .cl-badge { fill: #fff; }
.dc.is-solid .dc-calendar .cl-arrow { stroke: var(--g); }
.dc.is-solid .dc-calendar .cl-tip { fill: var(--g); }

/* La valise, ses autocollants de voyage, son étiquette. */
.dc-suitcase .sc-ground { fill: var(--art-ground); }
.dc-suitcase .sc-rod { fill: none; stroke: var(--art-steel); stroke-width: 3.4; stroke-linecap: round; }
.dc-suitcase :is(.sc-grip, .sc-wheel) { fill: var(--art-ink); }
.dc-suitcase .sc-body { fill: var(--art-coral); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-suitcase .sc-strap { fill: var(--art-coral-2); }
.dc-suitcase :is(.sc-buckle, .sc-sun) { fill: var(--art-gold); }
.dc-suitcase .sc-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .5; }
.dc-suitcase .sc-sticker { fill: var(--art-paper); }
.dc-suitcase .sc-sticker.is-2 { fill: var(--art-paper-3); }
.dc-suitcase .sc-line { fill: none; stroke: var(--art-rule); stroke-width: 1.6; stroke-linecap: round; }
.dc-suitcase .sc-string { fill: none; stroke: var(--art-ink); stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.dc-suitcase .sc-tag { fill: var(--art-paper-2); filter: drop-shadow(0 2px 2px rgb(10 16 60 / .2)); }
.dc-suitcase .sc-hole { fill: var(--art-paper); stroke: var(--art-gold-2); stroke-width: 1; }
.dc.is-solid .dc-suitcase .sc-string { stroke: #fff; opacity: .75; }

/* Les silhouettes : celles de derrière dans la couleur de la carte (en blanc voilé sur la couleur pleine), le nouveau devant. */
.dc-newcomers { --skin: #f0bf98; }
.dc-newcomers .nc-ground { fill: var(--art-ground); }
.dc-newcomers .nc-back { fill: color-mix(in oklab, var(--g) 50%, #fff); }
.dc-newcomers .nc-back-head { fill: color-mix(in oklab, var(--g) 32%, #fff); }
.dc-newcomers .nc-shirt { fill: var(--art-coral); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-newcomers .nc-collar { fill: var(--art-paper); }
.dc-newcomers .nc-head { fill: var(--skin); }
.dc-newcomers .nc-hair { fill: var(--art-wood-2); }
.dc-newcomers .nc-eye { fill: var(--art-ink); }
.dc-newcomers .nc-smile { fill: none; stroke: var(--art-ink); stroke-width: 1.6; stroke-linecap: round; }
.dc-newcomers .nc-badge { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-newcomers .nc-plus { fill: none; stroke: var(--art-gold-ink); stroke-width: 2.8; stroke-linecap: round; }
.dc-newcomers .nc-cf.is-1 { fill: var(--art-gold); }
.dc-newcomers .nc-cf.is-2 { fill: var(--art-coral); }
.dc-newcomers .nc-cf.is-3 { fill: var(--g); }
.dc-newcomers .nc-cf.is-line { fill: none; stroke: var(--art-coral); stroke-width: 2.2; stroke-linecap: round; }
.dc.is-solid .dc-newcomers .nc-back { fill: rgb(255 255 255 / .4); }
.dc.is-solid .dc-newcomers .nc-back-head { fill: rgb(255 255 255 / .6); }
.dc.is-solid .dc-newcomers .nc-cf.is-3 { fill: rgb(255 255 255 / .8); }

/* L'entonnoir : des devis qui tombent, le sceau d'or à la sortie. */
.dc-funnel .fn-ground { fill: var(--art-ground); }
.dc-funnel .fn-sheet { fill: var(--art-paper); filter: drop-shadow(0 2px 2px rgb(10 16 60 / .2)); }
.dc-funnel .fn-sheet.is-2 { fill: var(--art-paper-2); }
.dc-funnel .fn-sheet.is-3 { fill: var(--art-paper-3); }
.dc-funnel .fn-rule { fill: none; stroke: var(--art-rule); stroke-width: 1.6; stroke-linecap: round; }
.dc-funnel .fn-in { fill: color-mix(in oklab, var(--art-coral-2) 55%, #000); }
.dc-funnel .fn-cone { fill: var(--art-coral); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-funnel .fn-rim { fill: none; stroke: color-mix(in oklab, var(--art-coral) 60%, #fff); stroke-width: 2.4; }
.dc-funnel .fn-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .45; }
.dc-funnel .fn-spout { fill: var(--art-coral-2); }
.dc-funnel .fn-motion { fill: none; stroke: var(--art-motion); stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.dc-funnel .fn-seal { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-funnel .fn-tick { fill: none; stroke: var(--art-gold-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* La caisse enregistreuse, son ticket qui sort. */
.dc-register .rg-ground { fill: var(--art-ground); }
.dc-register .rg-motion { fill: none; stroke: var(--art-motion); stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.dc-register .rg-receipt { fill: var(--art-paper); filter: drop-shadow(0 2px 2px rgb(10 16 60 / .2)); }
.dc-register .rg-line { fill: none; stroke: var(--art-rule); stroke-width: 1.6; stroke-linecap: round; }
.dc-register :is(.rg-tower, .rg-neck) { fill: var(--art-ink); }
.dc-register .rg-screen { fill: var(--art-paper-2); }
.dc-register .rg-mark { fill: var(--art-gold-ink); font-size: 11px; font-weight: 800; text-anchor: middle; }
.dc-register .rg-body { fill: var(--art-coral); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-register .rg-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .45; }
.dc-register .rg-key { fill: color-mix(in oklab, var(--art-coral) 35%, #fff); }
.dc-register .rg-enter { fill: var(--art-gold); }
.dc-register .rg-drawer { fill: var(--art-coral-2); }
.dc-register .rg-slot { fill: color-mix(in oklab, var(--art-coral-2) 55%, #000); }
.dc-register .rg-coin { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-register .rg-coin-ring { fill: none; stroke: var(--art-gold-ink); stroke-width: 1; opacity: .5; }
.dc-register .rg-coin-mark { fill: var(--art-gold-ink); font-size: 7.5px; font-weight: 800; text-anchor: middle; }

/* Le robinet qui goutte des pièces dans le bocal. */
.dc-faucet .fc-ground { fill: var(--art-ground); }
.dc-faucet :is(.fc-flange, .fc-tip) { fill: color-mix(in oklab, var(--art-steel) 75%, #000); }
.dc-faucet :is(.fc-body, .fc-stem) { fill: var(--art-steel); filter: drop-shadow(0 3px 3px rgb(10 16 60 / .2)); }
.dc-faucet .fc-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .6; }
.dc-faucet .fc-handle { fill: var(--art-coral); }
.dc-faucet .fc-knob { fill: var(--art-gold); }
.dc-faucet .fc-motion { fill: none; stroke: var(--art-motion); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.dc-faucet .fc-coin { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-faucet .fc-coin-ring { fill: none; stroke: var(--art-gold-ink); stroke-width: .9; opacity: .5; }
.dc-faucet .fc-coin-mark { fill: var(--art-gold-ink); font-size: 5.5px; font-weight: 800; text-anchor: middle; }
.dc-faucet .fc-pile { fill: var(--art-gold-2); }
.dc-faucet .fc-pile-coin { fill: var(--art-gold); stroke: var(--art-gold-ink); stroke-width: .6; stroke-opacity: .5; }
.dc-faucet .fc-jar { fill: rgb(255 255 255 / .35); stroke: var(--art-steel); stroke-width: 2; }
.dc-faucet .fc-lip { fill: var(--art-steel); }
.dc-faucet .fc-glint { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .8; }
.dc.is-solid .dc-faucet .fc-jar { stroke: #fff; }

/* La part de tarte et son drapeau « % ». */
.dc-pie .pi-ground { fill: var(--art-ground); }
.dc-pie .pi-plate { fill: var(--art-paper); filter: drop-shadow(0 2px 3px rgb(10 16 60 / .2)); }
.dc-pie .pi-plate-in { fill: color-mix(in oklab, var(--g) 10%, #eef0f6); }
.dc-pie .pi-side { fill: #e9b26b; }
.dc-pie .pi-cream { fill: var(--art-paper-2); }
.dc-pie .pi-end { fill: #d1914a; }
.dc-pie .pi-top { fill: var(--art-paper-2); }
.dc-pie .pi-crust { fill: #d99a4e; }
.dc-pie .pi-berry { fill: var(--art-coral-2); }
.dc-pie .pi-glint { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .9; }
.dc-pie .pi-stick { fill: none; stroke: var(--art-wood); stroke-width: 2; stroke-linecap: round; }
.dc-pie .pi-flag { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-pie .pi-mark { fill: var(--art-gold-ink); font-size: 10px; font-weight: 800; text-anchor: middle; }
.dc-pie .pi-crumb { fill: #d99a4e; }

/* Le contrat signé, déchiré en deux ; la pièce qui s'en va. */
.dc-torn .tn-ground { fill: var(--art-ground); }
.dc-torn .tn-motion { fill: none; stroke: var(--art-motion); stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.dc-torn .tn-sheet { fill: var(--art-paper); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-torn .tn-head { fill: var(--art-coral); }
.dc-torn .tn-rule { fill: none; stroke: var(--art-rule); stroke-width: 1.6; stroke-linecap: round; }
.dc-torn .tn-seal { fill: var(--art-gold); }
.dc-torn .tn-tick { fill: none; stroke: var(--art-gold-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dc-torn .tn-scrap { fill: var(--art-paper); stroke: var(--art-rule); stroke-width: .8; stroke-linejoin: round; }
.dc-torn .tn-coin { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-torn .tn-coin-ring { fill: none; stroke: var(--art-gold-ink); stroke-width: 1; opacity: .5; }
.dc-torn .tn-coin-mark { fill: var(--art-gold-ink); font-size: 7.5px; font-weight: 800; text-anchor: middle; }

/* Le sablier et son sable d'or, le contrat appuyé contre lui. */
.dc-hourglass .hg-ground { fill: var(--art-ground); }
.dc-hourglass .hg-sheet { fill: var(--art-paper); filter: drop-shadow(0 2px 3px rgb(10 16 60 / .2)); }
.dc-hourglass .hg-head { fill: var(--art-coral); }
.dc-hourglass .hg-rule { fill: none; stroke: var(--art-rule); stroke-width: 1.6; stroke-linecap: round; }
.dc-hourglass .hg-glass { fill: color-mix(in oklab, var(--g) 8%, #fff); stroke: var(--art-steel); stroke-width: 2; }
.dc-hourglass .hg-sand { fill: var(--art-gold); }
.dc-hourglass .hg-pile { fill: var(--art-gold-2); }
.dc-hourglass .hg-shine { fill: none; stroke: color-mix(in oklab, var(--g) 22%, #fff); stroke-width: 2.4; stroke-linecap: round; }
.dc-hourglass .hg-plate { fill: var(--art-wood); filter: drop-shadow(0 2px 2px rgb(10 16 60 / .2)); }
.dc-hourglass .hg-post { fill: var(--art-wood-2); }
.dc.is-solid .dc-hourglass .hg-glass { fill: rgb(255 255 255 / .22); stroke: #fff; }
.dc.is-solid .dc-hourglass .hg-shine { stroke: #fff; opacity: .7; }

/* La facture qui revient : la flèche du retour dans la couleur de la carte (en blanc sur la couleur pleine), le « − » de l'avoir. */
.dc-refund .rf-ground { fill: var(--art-ground); }
.dc-refund .rf-back { fill: color-mix(in oklab, var(--g) 22%, #fff); }
.dc-refund .rf-sheet { fill: var(--art-paper); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-refund .rf-head { fill: var(--art-coral); }
.dc-refund .rf-rule { fill: none; stroke: var(--art-rule); stroke-width: 1.6; stroke-linecap: round; }
.dc-refund .rf-total { fill: var(--art-paper-2); }
.dc-refund .rf-arrow { fill: none; stroke: var(--g); stroke-width: 5; stroke-linecap: round; }
.dc-refund .rf-tip { fill: var(--g); }
.dc-refund .rf-badge { fill: var(--art-coral); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .25)); }
.dc-refund .rf-minus { fill: #fff; }
.dc.is-solid .dc-refund .rf-back { fill: rgb(255 255 255 / .45); }
.dc.is-solid .dc-refund .rf-arrow { stroke: #fff; }
.dc.is-solid .dc-refund :is(.rf-tip, .rf-badge) { fill: #fff; }
.dc.is-solid .dc-refund .rf-minus { fill: var(--g); }

/* La camionnette qui livre, le bon de livraison sur le côté. */
.dc-truck .tk-ground { fill: var(--art-ground); }
.dc-truck .tk-motion { fill: none; stroke: var(--art-motion); stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.dc-truck .tk-box { fill: var(--art-coral); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-truck .tk-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .45; }
.dc-truck .tk-stripe { fill: var(--art-gold); }
.dc-truck .tk-sheet { fill: var(--art-paper); filter: drop-shadow(0 2px 2px rgb(10 16 60 / .2)); }
.dc-truck .tk-rule { fill: none; stroke: var(--art-rule); stroke-width: 1.6; stroke-linecap: round; }
.dc-truck .tk-cab { fill: var(--art-coral-2); }
.dc-truck .tk-window { fill: color-mix(in oklab, var(--g) 16%, #fff); }
.dc-truck .tk-light { fill: var(--art-gold); }
.dc-truck :is(.tk-bumper, .tk-wheel) { fill: var(--art-ink); }
.dc-truck .tk-hub { fill: var(--art-steel); }

/* Le sac d'écus noué de rouge, sa pile de pièces. */
.dc-moneybag .mb-ground { fill: var(--art-ground); }
.dc-moneybag .mb-top { fill: color-mix(in oklab, var(--art-wood) 70%, #fff); }
.dc-moneybag .mb-sack { fill: color-mix(in oklab, var(--art-wood) 50%, #fff); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-moneybag .mb-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .5; }
.dc-moneybag .mb-mark { fill: var(--art-wood-2); font-size: 28px; font-weight: 800; text-anchor: middle; }
.dc-moneybag .mb-tie { fill: var(--art-coral); }
.dc-moneybag .mb-rope { fill: none; stroke: var(--art-coral); stroke-width: 2.4; stroke-linecap: round; }
.dc-moneybag .mb-stack { fill: var(--art-gold-2); }
.dc-moneybag .mb-edge { fill: none; stroke: var(--art-gold-ink); stroke-width: 1; opacity: .4; }
.dc-moneybag .mb-coin { fill: var(--art-gold); }
.dc-moneybag .mb-coin-ring { fill: none; stroke: var(--art-gold-ink); stroke-width: 1; opacity: .5; }
.dc-moneybag .mb-coin-mark { fill: var(--art-gold-ink); font-size: 7.5px; font-weight: 800; text-anchor: middle; }

/* Le client assoupi : son bonnet de nuit dans la couleur de la carte, ses « z » qui montent. */
.dc-sleeper { --skin: #f0bf98; }
.dc-sleeper .sl-ground { fill: var(--art-ground); }
.dc-sleeper .sl-shirt { fill: var(--art-coral); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-sleeper .sl-collar { fill: var(--art-paper); }
.dc-sleeper .sl-head { fill: var(--skin); }
.dc-sleeper .sl-cheek { fill: var(--art-coral); opacity: .3; }
.dc-sleeper .sl-eye { fill: none; stroke: var(--art-ink); stroke-width: 1.6; stroke-linecap: round; }
.dc-sleeper .sl-mouth { fill: var(--art-ink); opacity: .75; }
.dc-sleeper .sl-cap { fill: color-mix(in oklab, var(--g) 78%, #fff); }
.dc-sleeper .sl-brim { fill: var(--art-paper); }
.dc-sleeper .sl-pompom { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-sleeper .sl-z { fill: var(--art-motion); font-weight: 800; }
.dc-sleeper .sl-z.is-1 { font-size: 15px; }
.dc-sleeper .sl-z.is-2 { font-size: 11px; opacity: .8; }
.dc-sleeper .sl-z.is-3 { font-size: 8px; opacity: .6; }

/* Le caddie chargé de colis : le panier dans la couleur de la carte (en blanc sur la couleur pleine). */
.dc-cart .ct-ground { fill: var(--art-ground); }
.dc-cart .ct-motion { fill: none; stroke: var(--art-motion); stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.dc-cart .ct-box { fill: #dca062; filter: drop-shadow(0 2px 3px rgb(10 16 60 / .2)); }
.dc-cart .ct-box.is-gold { fill: var(--art-gold); }
.dc-cart .ct-tape { fill: none; stroke: #f7dcaa; stroke-width: 5; }
.dc-cart .ct-tape.is-gold { stroke: var(--art-gold-2); }
.dc-cart .ct-basket { fill: color-mix(in oklab, var(--g) 80%, #fff); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-cart .ct-wire { fill: none; stroke: #fff; stroke-width: 2; opacity: .45; }
.dc-cart :is(.ct-handle, .ct-frame) { fill: none; stroke: var(--art-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.dc-cart .ct-wheel { fill: var(--art-ink); }
.dc-cart .ct-hub { fill: var(--art-steel); }
.dc.is-solid .dc-cart .ct-basket { fill: #fff; }
.dc.is-solid .dc-cart .ct-wire { stroke: var(--g); opacity: .3; }

/* L'étiquette de prix au pourcentage, sa pastille qui descend (en blanc sur la couleur pleine). */
.dc-pricetag .pt-ground { fill: var(--art-ground); }
.dc-pricetag .pt-tag { fill: var(--art-paper-2); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-pricetag .pt-hole { fill: var(--art-paper); stroke: var(--art-gold-2); stroke-width: 1.2; }
.dc-pricetag .pt-mark { fill: var(--g); font-size: 34px; font-weight: 800; text-anchor: middle; }
.dc-pricetag .pt-badge { fill: var(--art-coral); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .25)); }
.dc-pricetag .pt-arrow { fill: none; stroke: var(--color-surface); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.dc.is-solid .dc-pricetag .pt-badge { fill: #fff; }
.dc.is-solid .dc-pricetag .pt-arrow { stroke: var(--g); }

/* Le portefeuille de cuir, son ticket, sa pièce. */
.dc-wallet .wl-ground { fill: var(--art-ground); }
.dc-wallet .wl-back { fill: var(--art-wood-2); }
.dc-wallet .wl-paper { fill: var(--art-paper); filter: drop-shadow(0 2px 3px rgb(10 16 60 / .2)); }
.dc-wallet .wl-rule { fill: none; stroke: var(--art-rule); stroke-width: 2; stroke-linecap: round; }
.dc-wallet .wl-front { fill: var(--art-wood); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-wallet .wl-stitch { fill: none; stroke: #f0c486; stroke-width: 1.4; stroke-dasharray: 3 3; stroke-linecap: round; opacity: .8; }
.dc-wallet .wl-strap { fill: var(--art-wood-2); }
.dc-wallet .wl-stud { fill: var(--art-gold); }
.dc-wallet .wl-coin { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-wallet .wl-coin-ring { fill: none; stroke: var(--art-gold-ink); stroke-width: 1; opacity: .5; }
.dc-wallet .wl-coin-mark { fill: var(--art-gold-ink); font-size: 8px; font-weight: 800; text-anchor: middle; }

/* Les cartes de paiement en éventail, la pile de pièces. */
.dc-creditcard .cc-ground { fill: var(--art-ground); }
.dc-creditcard .cc-card { fill: var(--art-ink); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .25)); }
.dc-creditcard .cc-card.is-back { fill: var(--art-coral); }
.dc-creditcard .cc-band { fill: var(--art-coral-2); }
.dc-creditcard .cc-chip { fill: var(--art-gold); }
.dc-creditcard .cc-wave { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; opacity: .7; }
.dc-creditcard .cc-digits { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .1 3.2; opacity: .6; }
.dc-creditcard .cc-stack { fill: var(--art-gold-2); }
.dc-creditcard .cc-edge { fill: none; stroke: var(--art-gold-ink); stroke-width: 1; opacity: .4; }
.dc-creditcard .cc-coin { fill: var(--art-gold); }

/* Le client qui attend : sa barbe blanche jusqu'au sol, son ticket jauni, ses points de suspension. */
.dc-waiting { --skin: #f0bf98; }
.dc-waiting .wt-ground { fill: var(--art-ground); }
.dc-waiting .wt-shirt { fill: var(--art-coral); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-waiting :is(.wt-skin, .wt-head) { fill: var(--skin); }
.dc-waiting .wt-nose { fill: #e3a37a; }
.dc-waiting :is(.wt-hair, .wt-beard, .wt-mustache) { fill: var(--art-paper); stroke: var(--art-rule); stroke-width: .8; stroke-linejoin: round; }
.dc-waiting .wt-beard { filter: drop-shadow(0 2px 3px rgb(10 16 60 / .18)); }
.dc-waiting .wt-strand { fill: none; stroke: var(--art-rule); stroke-width: .9; stroke-linecap: round; }
.dc-waiting .wt-brow { fill: none; stroke: var(--art-paper); stroke-width: 2.6; stroke-linecap: round; }
.dc-waiting .wt-eye { fill: none; stroke: var(--art-ink); stroke-width: 1.6; stroke-linecap: round; }
.dc-waiting .wt-ticket { fill: var(--art-paper-2); filter: drop-shadow(0 2px 3px rgb(10 16 60 / .22)); }
.dc-waiting .wt-perf { fill: none; stroke: var(--art-gold-2); stroke-width: 1.2; stroke-dasharray: 2 2; }
.dc-waiting .wt-num { fill: var(--g); font-size: 14px; font-weight: 800; text-anchor: middle; }
.dc-waiting .wt-dot { fill: var(--art-motion); }
.dc-waiting .wt-dot.is-2 { opacity: .75; }
.dc-waiting .wt-dot.is-3 { opacity: .5; }

/* Le pique-notes : ses tickets enfilés, le dernier arrivé en haut, à la couleur de la carte. */
.dc-spike .sp-ground { fill: var(--art-ground); }
.dc-spike .sp-rod { fill: none; stroke: var(--art-steel); stroke-width: 2.6; stroke-linecap: round; }
.dc-spike .sp-tip { fill: var(--art-steel); }
.dc-spike .sp-base { fill: var(--art-ink); filter: drop-shadow(0 2px 3px rgb(10 16 60 / .22)); }
.dc-spike .sp-base-top { fill: #3b4272; }
.dc-spike .sp-slip { fill: var(--art-paper); filter: drop-shadow(0 2px 2px rgb(10 16 60 / .2)); }
.dc-spike .sp-slip.is-2 { fill: var(--art-paper-2); }
.dc-spike .sp-slip.is-3 { fill: var(--art-paper-3); }
.dc-spike .sp-band { fill: var(--g); }
.dc-spike .sp-rule { fill: none; stroke: var(--art-rule); stroke-width: 2; stroke-linecap: round; }
.dc-spike .sp-hole { fill: var(--art-ink); }

/* La sonnette dorée du comptoir et ses ondes. */
.dc-bell .bl-ground { fill: var(--art-ground); }
.dc-bell .bl-ring { fill: none; stroke: var(--art-motion); stroke-width: 3; stroke-linecap: round; opacity: .6; }
.dc-bell .bl-stem { fill: var(--art-steel); }
.dc-bell .bl-knob { fill: var(--art-ink); }
.dc-bell .bl-dome { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-bell .bl-shine { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; opacity: .55; }
.dc-bell .bl-base { fill: var(--art-ink); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-bell .bl-lip { fill: none; stroke: #3b4272; stroke-width: 2; stroke-linecap: round; }

/* Le petit robot de l'IA, à la couleur de la carte, ses yeux qui brillent, sa pièce. */
.dc-robot .rb-ground { fill: var(--art-ground); }
.dc-robot .rb-spark { fill: var(--art-gold); }
.dc-robot :is(.rb-arm, .rb-neck, .rb-ear) { fill: var(--art-steel); }
.dc-robot .rb-body { fill: var(--g); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-robot .rb-light { fill: var(--art-gold); }
.dc-robot .rb-light.is-2 { fill: var(--art-coral); }
.dc-robot .rb-light.is-3 { fill: #7df3e1; }
.dc-robot .rb-head { fill: color-mix(in oklab, var(--g) 80%, #fff); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-robot :is(.rb-slot, .rb-face) { fill: var(--art-ink); }
.dc-robot :is(.rb-eye, .rb-mouth) { fill: none; stroke: #7df3e1; stroke-width: 3; stroke-linecap: round; }
.dc-robot .rb-mouth { stroke-width: 2.4; }
.dc-robot .rb-coin { fill: var(--art-gold); filter: drop-shadow(0 2px 2px rgb(120 70 0 / .3)); }
.dc-robot .rb-coin-ring { fill: none; stroke: var(--art-gold-ink); stroke-width: 1; opacity: .5; }
.dc-robot .rb-coin-mark { fill: var(--art-gold-ink); font-size: 9px; font-weight: 800; text-anchor: middle; }

/* Le stéthoscope posé sur la fiche de visite : le tuyau à la couleur de la carte (en blanc sur la couleur pleine). */
.dc-stethoscope .st-ground { fill: var(--art-ground); }
.dc-stethoscope .st-board { fill: var(--art-wood); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-stethoscope .st-paper { fill: var(--art-paper); }
.dc-stethoscope .st-clip { fill: var(--art-steel); }
.dc-stethoscope .st-clip-hole { fill: var(--art-wood-2); }
.dc-stethoscope .st-cross { fill: var(--art-coral-2); }
.dc-stethoscope .st-rule { fill: none; stroke: var(--art-rule); stroke-width: 2; stroke-linecap: round; }
.dc-stethoscope .st-metal { fill: none; stroke: var(--art-steel); stroke-width: 2.6; stroke-linecap: round; }
.dc-stethoscope .st-tip { fill: var(--art-ink); }
.dc-stethoscope .st-tube { fill: none; stroke: var(--g); stroke-width: 4.2; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgb(10 16 60 / .2)); }
.dc-stethoscope .st-bell { fill: var(--art-steel); filter: drop-shadow(0 2px 3px rgb(10 16 60 / .25)); }
.dc-stethoscope .st-bell-in { fill: #e4e7f2; }
.dc.is-solid .dc-stethoscope .st-tube { stroke: #fff; }

/* La petite voiture à la couleur de la carte (en blanc sur la couleur pleine), sa page de calendrier, un jour entouré. */
.dc-car .cr-ground { fill: var(--art-ground); }
.dc-car .cr-page { fill: var(--art-paper); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-car .cr-head { fill: var(--art-coral-2); }
.dc-car .cr-ring { fill: var(--art-ink); }
.dc-car .cr-days { fill: none; stroke: var(--art-rule); stroke-width: 3.4; stroke-linecap: round; }
.dc-car .cr-mark { fill: none; stroke: var(--art-coral-2); stroke-width: 1.8; }
.dc-car .cr-body { fill: color-mix(in oklab, var(--g) 85%, #fff); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-car .cr-window { fill: color-mix(in oklab, var(--g) 16%, #fff); }
.dc-car .cr-line { fill: none; stroke: rgb(255 255 255 / .45); stroke-width: 1.4; stroke-linecap: round; }
.dc-car .cr-light { fill: var(--art-gold); }
.dc-car .cr-tail { fill: var(--art-coral); }
.dc-car .cr-wheel { fill: var(--art-ink); }
.dc-car .cr-hub { fill: var(--art-steel); }
.dc.is-solid .dc-car .cr-body { fill: #fff; }
.dc.is-solid .dc-car .cr-window { fill: color-mix(in oklab, var(--g) 30%, #fff); }
.dc.is-solid .dc-car .cr-line { stroke: var(--art-rule); }

/* L'écran en panne à la couleur de la carte (en blanc sur la couleur pleine), son pansement en croix, la clé à molette. */
.dc-repair { --band: #f4c38f; --band-2: #fbe3c4; }
.dc-repair .rp-ground { fill: var(--art-ground); }
.dc-repair .rp-stand { fill: var(--art-steel); }
.dc-repair .rp-base { fill: var(--art-ink); }
.dc-repair .rp-frame { fill: color-mix(in oklab, var(--g) 85%, #fff); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-repair .rp-screen { fill: color-mix(in oklab, var(--g) 16%, #fff); }
.dc-repair .rp-crack { fill: none; stroke: var(--art-ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .4; }
.dc-repair .rp-band { fill: var(--band); filter: drop-shadow(0 1px 1.5px rgb(10 16 60 / .2)); }
.dc-repair .rp-pad { fill: var(--band-2); }
.dc-repair .rp-dot { fill: #d99a5b; }
.dc-repair .rp-wrench { fill: var(--art-steel); filter: drop-shadow(0 2px 3px rgb(10 16 60 / .25)); }
.dc-repair .rp-shine { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .45; }
.dc-repair .rp-hole { fill: var(--art-ink); opacity: .35; }
.dc.is-solid .dc-repair .rp-frame { fill: #fff; }
.dc.is-solid .dc-repair .rp-screen { fill: color-mix(in oklab, var(--g) 30%, #fff); }

/* La clé dorée de la location, son étiquette au bandeau à la couleur de la carte, un jour entouré. */
.dc-key .ky-ground { fill: var(--art-ground); }
.dc-key .ky-ring { fill: none; stroke: var(--art-steel); stroke-width: 2.6; }
.dc-key .ky-string { fill: none; stroke: var(--art-ink); stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.dc-key .ky-tag { fill: var(--art-paper); filter: drop-shadow(0 3px 4px rgb(10 16 60 / .22)); }
.dc-key .ky-eyelet { fill: none; stroke: var(--art-gold-2); stroke-width: 2; }
.dc-key .ky-band { fill: var(--g); }
.dc-key .ky-days { fill: none; stroke: var(--art-rule); stroke-width: 3.4; stroke-linecap: round; }
.dc-key .ky-mark { fill: none; stroke: var(--art-coral-2); stroke-width: 1.8; }
.dc-key .ky-key { fill: var(--art-gold); filter: drop-shadow(0 2px 3px rgb(120 70 0 / .3)); }
.dc-key .ky-collar { fill: var(--art-gold-2); }

/* ================= La couleur pleine ================= */
.dc.is-alert { --g: #e5383b; }
/* Un orange brûlé, où le blanc se lit encore. */
.dc.is-warning { --g: #c96a04; }
.dc.is-good { --g: #1c9a52; }
.dc.is-solid {
    --dc-ink: #fff; --dc-muted: rgb(255 255 255 / .84);
    background:
        radial-gradient(110% 85% at 100% 0%, rgb(255 255 255 / .2), transparent 55%),
        linear-gradient(155deg, color-mix(in oklab, var(--g) 94%, #000), color-mix(in oklab, var(--g) 70%, #000));
    box-shadow: 0 16px 34px -20px color-mix(in oklab, var(--g) 85%, #000), var(--dc-shadow);
}
.dc.is-night { --g: #7f4df0; background: radial-gradient(110% 85% at 100% 0%, rgb(153 102 255 / .28), transparent 60%), #1e1535; box-shadow: 0 16px 34px -20px rgb(30 21 53 / .8); }
.dc.is-solid .dc-topic { color: rgb(255 255 255 / .62); }
/* Le blanc sur la couleur paraît plus gras que l'encre sur le blanc : le constat et la pastille un cran plus légers. */
.dc.is-solid :is(.dc-title, .dc-badge), .dc.is-solid:has(> .dc-drawing) .dc-num.is-lead { font-weight: 600; }
.dc.is-solid .dc-scene { background: rgb(255 255 255 / .1); }
.dc.is-solid .dc-tools button { color: rgb(255 255 255 / .75); }
.dc.is-solid .dc-tools button:is(:hover, :focus-visible) { background: rgb(255 255 255 / .16); color: #fff; }
.dc.is-solid .dc-quiet { color: #fff; }

/* ================= À traiter, à moi, rien à faire ================= */
/* À traiter (CardTone::ACCENT) : la carte reste blanche, bordée de la couleur de l'application, un point devant son surtitre. */
.dc.is-todo { box-shadow: 0 0 0 2px var(--g), 0 12px 26px -16px color-mix(in oklab, var(--g) 70%, transparent), var(--dc-shadow); }
.dc.is-todo .dc-topic::before { content: ""; display: inline-block; width: .4375rem; height: .4375rem; margin-right: .375rem; border-radius: 50%; background: var(--g); vertical-align: .0625rem; }
/* À moi (CardInterface::isPersonal()) : la photo de l'utilisateur, en bas à gauche, au-dessus du lien de la carte. */
.dc-me { position: absolute; left: 1.125rem; bottom: 1.125rem; z-index: 2; width: 2.125rem; height: 2.125rem; border-radius: 50%; object-fit: cover; pointer-events: none; box-shadow: 0 0 0 3px var(--color-surface), 0 2px 8px rgb(0 0 0 / .18); }
.dc.is-solid .dc-me { box-shadow: 0 0 0 3px rgb(255 255 255 / .85), 0 2px 8px rgb(0 0 0 / .25); }
.dc:is(.dc-big, .dc-hero) .dc-me { left: 1.375rem; bottom: 1.375rem; }
/* Ses lignes en bas à gauche laissent la place à la photo. */
.dc.is-mine .dc-drawing-rows { padding-left: 3rem; }
/* Rien à faire (scène done) : une grosse coche verte posée sur le dessin de la carte. */
.dc-drawing > .dc-ok { position: absolute; z-index: 0; right: 2.75rem; bottom: 2.25rem; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 4px var(--color-surface), 0 6px 14px -4px rgb(10 60 30 / .45); }
.dc-drawing > .dc-ok svg { width: 62%; height: 62%; fill: none; stroke: var(--color-surface); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.dc-wide .dc-drawing > .dc-ok { right: 4rem; }
.dc:is(.dc-big, .dc-hero) .dc-drawing > .dc-ok { right: 3.5rem; bottom: 3rem; width: 4.25rem; height: 4.25rem; }

/* ================= Les gestes ================= */
.dc.is-placeholder { background: var(--g-soft); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--g) 45%, transparent); }
.dc.is-placeholder > * { visibility: hidden; }
.dc-ghost { position: fixed !important; z-index: calc(var(--z-dialog, 1051) + 2); margin: 0 !important; pointer-events: none; box-shadow: 0 30px 60px -20px rgb(27 20 51 / .45), 0 0 0 1px rgb(30 21 53 / .06) !important; transition: none !important; filter: none !important; opacity: 1 !important; }
.dc-ghost::after { display: none !important; }
.dc.dc-ghost .dc-tools { width: auto; margin-left: 0; opacity: 1; }
/* Une section en main : sa place en pâle ; son fantôme garde le fond de la page. */
.dc-section.is-placeholder { border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-primary-600) 7%, transparent); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--color-primary-600) 30%, transparent); }
.dc-section.is-placeholder > * { visibility: hidden; }
.dc-section.dc-ghost { border-radius: calc(var(--radius-card) + .25rem); background: var(--color-canvas); }
.dc-resize { position: absolute; right: .25rem; bottom: .25rem; z-index: 4; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; cursor: nwse-resize; opacity: 0; transition: opacity .15s; touch-action: none; }
.dc-resize::before { content: ""; width: .5625rem; height: .5625rem; border-right: 2.5px solid color-mix(in oklab, var(--g) 45%, var(--color-muted-2)); border-bottom: 2.5px solid color-mix(in oklab, var(--g) 45%, var(--color-muted-2)); border-radius: 0 0 .25rem 0; }
.dc:hover .dc-resize { opacity: 1; }
@media (pointer: coarse) { .dc-tools, .dc-resize { opacity: 1; } .dc-tools { width: auto; margin-left: 0; } }
.dc.is-solid .dc-resize::before { border-color: rgb(255 255 255 / .6); }
.dc.is-resizing { box-shadow: 0 0 0 2px var(--g), var(--shadow-pop); }
.dc.is-loading { opacity: .55; transition: opacity .2s; }
/* Une carte en attente de calcul : sa place et son module tout de suite, des lignes pâles qui respirent ; puis son contenu en fondu. */
.dc-sk { display: block; border-radius: .375rem; background: color-mix(in oklab, var(--g) 15%, var(--color-surface)); animation: dc-sk 1.5s ease-in-out infinite; }
.dc-sk.is-title { width: 86%; height: 1rem; margin-top: .3125rem; }
.dc-sk.is-title.is-short { width: 52%; margin-top: .5rem; }
.dc-sk.is-text { width: 70%; height: .6875rem; margin-top: .875rem; }
.dc-mini.dc-wait { flex: 1; display: flex; min-height: 3rem; }
.dc-sk.is-scene { flex: 1; border-radius: .8125rem; }
.dc.is-solid .dc-sk { background: rgb(255 255 255 / .16); }
.dc-grid.is-settled > .dc .dc-sk { animation: dc-sk 1.5s ease-in-out infinite; }
@keyframes dc-sk { 50% { opacity: .45; } }
@keyframes dc-fade { from { opacity: 0; } }
.dc-grid.is-settled > .dc.is-arrived > :not(.dc-top) { animation: dc-fade .45s ease both; }
@media (prefers-reduced-motion: reduce) { .dc-grid > .dc .dc-sk, .dc-grid.is-settled > .dc .dc-sk, .dc-grid.is-settled > .dc.is-arrived > * { animation: none; } }
.dc-size-tip { position: fixed; z-index: calc(var(--z-dialog, 1051) + 3); transform: translate(-50%, -130%); padding: .375rem .75rem; border-radius: 2rem; background: #1e1535; color: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap; pointer-events: none; }
.dc.is-new { animation: dc-new 1.6s cubic-bezier(.2, .8, .2, 1); }
@keyframes dc-new { 20% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--g) 60%, transparent), var(--shadow-pop); } 100% { box-shadow: 0 0 0 0 transparent, var(--dc-shadow); } }
body.is-dc-dragging, body.is-dc-dragging * { cursor: grabbing !important; user-select: none; }
body.is-dc-resizing, body.is-dc-resizing * { cursor: nwse-resize !important; user-select: none; }

/* Le menu d'une carte */
.dc-menu { position: fixed; z-index: var(--z-popover, 100); width: 16.25rem; padding: .375rem; border-radius: .875rem; background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-pop), 0 0 0 1px var(--color-line); font-size: .8125rem; }
.dc-menu-t { padding: .5rem .625rem .25rem; font-size: .71875rem; font-weight: 600; color: var(--color-muted); }
.dc-menu-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; padding: .25rem .375rem .5rem; }
.dc-menu-sizes button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .375rem; height: 3.75rem; padding: 0 .125rem .4375rem; border: 1px solid var(--color-line); border-radius: .625rem; background: var(--color-surface); cursor: pointer; font: inherit; font-size: .625rem; font-weight: 600; color: var(--color-ink-2); }
.dc-menu-sizes button i { display: block; border-radius: .1875rem; background: var(--color-primary-300); }
.dc-menu-sizes button[aria-pressed="true"] { border-color: var(--color-primary-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-500) 20%, transparent); color: var(--color-accent); }
.dc-menu-sizes button:disabled { opacity: .35; cursor: default; }
.dc-menu hr { margin: .25rem .375rem; border: 0; border-top: 1px solid var(--color-line); }
.dc-menu-i { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5625rem .625rem; border: 0; border-radius: .5625rem; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; text-decoration: none; }
.dc-menu-i:hover, .dc-menu-i:focus-visible { background: var(--color-tile); outline: none; }
.dc-menu-i i { width: 1rem; color: var(--color-muted); }
.dc-menu-i.is-danger, .dc-menu-i.is-danger i { color: var(--color-danger); }

/* La notification d'un geste, avec « Annuler » */
.dc-toast { position: fixed; z-index: calc(var(--z-dialog, 1051) + 4); left: 50%; bottom: 1.625rem; display: flex; align-items: center; gap: .875rem; padding: .625rem .625rem .625rem 1.125rem; border-radius: 2rem; background: #1e1535; color: #fff; box-shadow: var(--shadow-pop); font-size: .8125rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, 1.25rem); transition: opacity .25s, transform .25s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.dc-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dc-toast > i { color: #6ee7a7; }
.dc-toast button { padding: .375rem .75rem; border: 0; border-radius: 2rem; background: rgb(255 255 255 / .14); color: #fff; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; }
.dc-toast button:hover { background: rgb(255 255 255 / .24); }
.dc-toast button[hidden] { display: none; }

/* Le tableau vide : un titre, et juste dessous la réserve, où l'on choisit ses cartes. */
.dc-empty { margin-bottom: 1.25rem; }
.dc-empty[hidden] { display: none; }

/* ================= L'arrivée ================= */
@keyframes dc-in { from { opacity: 0; transform: translateY(1rem); } }
@keyframes dc-float-in { from { opacity: 0; transform: translateY(1.375rem) scale(.97); } }
.dc-grid > .dc { animation: dc-in .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.dc-grid > .dc .dc-float { animation: dc-float-in .75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms + .2s); }
.dc-grid.is-settled > .dc, .dc-grid.is-settled > .dc * { animation: none; }
.dc-grid.is-settled > .dc.is-new { animation: dc-new 1.6s cubic-bezier(.2, .8, .2, 1); }

/* ================= La réserve ================= */
/*
 * Sous le tableau, toutes les autres cartes, déjà remplies, rangées comme l'écran des permissions (permission-split) : les
 * modules à gauche, chacun avec sa pastille (aucune carte sur le tableau, quelques-unes, toutes) ; les cartes du module choisi
 * à droite, en couleurs, avec leur « + ». En dessous de 56rem de large, les modules passent au-dessus, en pastilles ; sur un
 * téléphone, en bandeau qui défile. Le fond de la colonne est peint par la grille : la liste reste collée en haut de l'écran
 * sans que sa colonne s'arrête avec elle.
 */
.dc-shelf { container: dc-shelf / inline-size; margin-top: 3rem; scroll-margin-top: 1.5rem; }
.dc-board.is-empty .dc-shelf { margin-top: 0; }
.dc-board.is-empty .dc-shelf-head { display: none; }
.dc-shelf-head { margin-bottom: 1.25rem; }
:is(.dc-empty, .dc-shelf-head) h2 { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: var(--color-ink); text-wrap: balance; }
:is(.dc-empty, .dc-shelf-head) p { margin: .375rem 0 0; max-width: 46rem; font-size: .875rem; line-height: 1.5; color: var(--color-muted); }
.dc-shelf-split {
    --nav: 16.5rem; --nav-bg: color-mix(in srgb, var(--color-tile) 55%, var(--color-surface));
    display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip;
    border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card);
}
.dc-shelf-nav { display: flex; flex-wrap: wrap; gap: .375rem; padding: .75rem; border-bottom: 1px solid var(--color-line); background: var(--nav-bg); }
.dc-shelf-caption { display: none; }
.dc-shelf-module {
    display: flex; flex: none; align-items: center; gap: .625rem; padding: .4375rem .75rem; border: 0; border-radius: 999px; background: none;
    color: var(--color-ink); font: inherit; font-size: .8125rem; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .15s, box-shadow .15s;
}
.dc-shelf-module > i { flex: none; width: 1.25rem; color: var(--color-card-icon); text-align: center; --fa-secondary-opacity: .45; }
.dc-shelf-module:hover { background: color-mix(in srgb, var(--color-surface) 70%, transparent); }
.dc-shelf-module:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 1px; }
.dc-shelf-module[aria-current="true"] { background: var(--color-surface); box-shadow: 0 1px 2px rgb(29 21 49 / .08), 0 0 0 1px var(--color-line); }
.dc-shelf-module[hidden] { display: none; }
.dc-shelf-module-copy { display: grid; min-width: 0; }
.dc-shelf-module-copy strong { font-weight: 600; }
.dc-shelf-module-copy small { display: none; overflow: hidden; color: var(--color-muted); font-size: .71875rem; text-overflow: ellipsis; white-space: nowrap; }
.dc-shelf-dot { flex: none; width: .4375rem; height: .4375rem; margin-left: auto; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-field); }
.dc-shelf-dot.is-partial { background: #f59e0b; box-shadow: none; }
.dc-shelf-dot.is-full { background: #16a34a; box-shadow: none; }
.dc-shelf-pane { container: dc-pane / inline-size; min-width: 0; padding: 1.25rem 1.5rem 1.5rem; }
.dc-shelf-pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-line); scroll-margin-top: 1.5rem; }
.dc-shelf-pane-icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--color-card-icon-soft); color: var(--color-card-icon); font-size: 1.0625rem; --fa-secondary-opacity: .45; }
.dc-shelf-pane-copy { flex: 1; min-width: 12rem; }
.dc-shelf-pane-copy h3 { margin: 0; font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.dc-shelf-pane-copy p { margin: .125rem 0 0; color: var(--color-muted); font-size: .8125rem; }
.dc-shelf-pane-head .btn[hidden] { display: none; }
@container dc-shelf (width > 56rem) {
    .dc-shelf-split { grid-template-columns: var(--nav) minmax(0, 1fr); background: linear-gradient(90deg, var(--nav-bg) 0 var(--nav), var(--color-line) var(--nav) calc(var(--nav) + 1px), var(--color-surface) 0); }
    .dc-shelf-nav { position: sticky; top: 1rem; align-self: start; flex-direction: column; flex-wrap: nowrap; gap: .125rem; max-height: calc(100dvh - 2rem); padding: .75rem .5rem; overflow: hidden auto; border-bottom: 0; background: none; }
    .dc-shelf-caption { display: block; margin: 0; padding: .625rem .75rem .25rem; color: var(--color-muted); font-size: .65625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .dc-shelf-module { width: 100%; padding: .5rem .75rem; border-radius: .625rem; white-space: normal; }
    .dc-shelf-module-copy small { display: block; }
    .dc-shelf-pane { padding: 1.5rem 2rem 2rem; }
}
@container dc-shelf (width < 30rem) {
    .dc-shelf-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .dc-shelf-pane { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .dc-shelf-module { transition: none; } }

/* Les cartes du module, à leur taille : la grille suit la largeur du panneau (une carte carrée garde ~240 px de côté). */
.dc-shelf .dc-shelf-grid { --cols: 4; }
.dc-shelf .dc-shelf-grid > .dc.dc-hero { grid-column: span 4; }
@container dc-pane (min-width: 740px) { .dc-shelf .dc-shelf-grid { --cols: 6; } .dc-shelf .dc-shelf-grid > .dc.dc-hero { grid-column: span 6; } }
@container dc-pane (min-width: 1000px) { .dc-shelf .dc-shelf-grid { --cols: 8; } .dc-shelf .dc-shelf-grid > .dc.dc-hero { grid-column: span 8; } }
@container dc-pane (min-width: 1250px) { .dc-shelf .dc-shelf-grid { --cols: 10; } }
@container dc-pane (min-width: 1500px) { .dc-shelf .dc-shelf-grid { --cols: 12; } }
@container dc-pane (max-width: 479px) {
    .dc-shelf .dc-shelf-grid { --cols: 2; --row: minmax(15rem, auto); }
    .dc-shelf .dc-shelf-grid > .dc:is(.dc-wide, .dc-big, .dc-hero) { grid-column: span 2; }
}
/* La grille de la réserve porte is-settled : pas d'animation d'entrée, seulement le fondu d'une carte qui arrive. Les
   cartes y sont en couleurs, avec leur « + » ; au survol, elles se soulèvent et le « + » dit « Ajouter ». */
.dc-shelf-grid > .dc { cursor: pointer; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.dc-shelf-grid > .dc .dc-float { transform: none; }
.dc-shelf-grid > .dc:is(:hover, :focus-visible) { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--g), 0 24px 44px -24px color-mix(in oklab, var(--g) 80%, #000); outline: none; }
.dc-shelf-grid > .dc::after {
    content: "+"; position: absolute; z-index: 3; top: .625rem; right: .625rem; display: grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .5rem;
    border-radius: 2rem; background: var(--g-soft); color: var(--g-ink); font-size: 1rem; font-weight: 700; line-height: 1; pointer-events: none;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.dc-shelf-grid > .dc:is(:hover, :focus-visible)::after { content: "+\2002 Ajouter"; background: var(--g); color: #fff; font-size: .75rem; font-weight: 800; box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--g) 80%, #000); }
.dc-shelf-grid > .dc.is-solid::after { background: rgb(255 255 255 / .18); color: #fff; }
.dc-shelf-grid > .dc.is-solid:is(:hover, :focus-visible)::after { background: #fff; color: var(--g-ink); }
/* On ne glisse qu'à la souris (le doigt fait défiler la page). */
@media (pointer: coarse) { .dc-shelf-drag { display: none; } }
/* La carte en main (glissée vers le tableau) s'efface presque : on voit d'où elle vient. */
.dc-shelf-grid > .dc.is-lifted { filter: grayscale(1); opacity: .2 !important; transform: none; box-shadow: none; }
.dc-shelf-grid > .dc.is-lifted::after { opacity: 0; }
.dc-shelf-grid :is(.dc-tools, .dc-resize) { display: none; }
/* La pastille de la carte se range à gauche du « + ». */
.dc-shelf-grid > .dc .dc-top { padding-right: 2.875rem; }
.dc-shelf-grid > .dc[hidden] { display: none; }
.dc-shelf-done { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; padding: 2.5rem 1rem; color: var(--color-muted); font-size: .875rem; font-weight: 600; text-align: center; }
.dc-shelf-done i { color: var(--color-success); --fa-secondary-opacity: .35; font-size: 1.125rem; }
.dc-shelf-done[hidden] { display: none; }

/* ================= Thème sombre ================= */
[data-theme=dark] .dc { --dc-shadow: 0 0 #0000; }
[data-theme=dark] .dc {
    --g-ink: color-mix(in oklab, var(--g) 58%, #fff);
    --dc-float: #2a2937; --dc-float-ink: var(--color-ink); --dc-float-ink-2: var(--color-ink-2); --dc-float-muted: var(--color-muted); --dc-float-line: rgb(255 255 255 / .07);
    --dc-float-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 18px 36px -18px rgb(0 0 0 / .7);
    --dc-line: rgb(255 255 255 / .07);
}
[data-theme=dark] .dc.is-solid { box-shadow: 0 0 0 1px rgb(255 255 255 / .06); }
[data-theme=dark] .dc.is-todo { box-shadow: 0 0 0 2px var(--g-ink); }
[data-theme=dark] .dc-drawing > .dc-ok { box-shadow: 0 0 0 4px var(--color-surface), 0 6px 14px -4px rgb(0 0 0 / .6); }
[data-theme=dark] .dc:not(.is-solid) :is(.dc-num, .dc-topic) { color: var(--g-ink); }
[data-theme=dark] .dc.is-night { background: radial-gradient(110% 85% at 100% 0%, rgb(153 102 255 / .22), transparent 60%), #110c22; box-shadow: 0 0 0 1px rgb(153 102 255 / .25); }
[data-theme=dark] :is(.dc-size-tip, .dc-toast) { background: #3a2f5c; }
[data-theme=dark] .dc-shelf-module[aria-current="true"] { background: var(--color-tile); box-shadow: 0 0 0 1px var(--color-line); }
[data-theme=dark] .dc-art { --art-paper: #e9e8f1; --art-paper-2: #ebe2c4; --art-paper-3: #ecd6de; }

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

/* ---------- Une carte posée sur une page de statistiques (Card/_tile.html.twig, classes stat- du ui-bundle) ----------
   Le graphique remplace le dessin, sous le constat. Le contrôleur du graphique lit l'encre et le trait dans les jetons : sur la nuit, ils
   passent en clair, en clair comme en sombre. Il est posé sur le cadre, hors du flux : sa hauteur est celle de la place qui reste, et ce
   qu'il dessine ne la fait jamais grandir. */
.stat-page .dc-board { min-width: 0; margin: 0; padding-bottom: 0; }
.dc-chart { position: relative; flex: 1; min-height: 12rem; }
.dc-chart > [data-controller] { position: absolute; inset: .25rem .875rem .5rem; }
.dc.is-night .dc-chart {
    --color-ink: var(--color-primary-50);
    --color-muted: color-mix(in srgb, var(--color-primary-50) 60%, transparent);
    --color-line: color-mix(in srgb, var(--color-primary-50) 12%, transparent);
}
/* Sans dessin, le chiffre du constat reste en grand, sur sa ligne (`.dc:has(> .dc-drawing)` ne s'applique pas à une carte à graphique). */
.dc:has(> .dc-chart) .dc-num.is-lead { display: block; margin-bottom: .375rem; font-size: min(3.5rem, 12cqi); font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.dc:has(> .dc-chart) .dc-title { -webkit-line-clamp: 3; }
.stat-page .dc.dc-hero .dc-text { -webkit-line-clamp: 3; }
.stat-page .dc.dc-big .dc-title { -webkit-line-clamp: 3; }