/* Outil · Décompte (Countdown), id decompte : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : dc-
   À gauche : la carte du décompte choisi (Pro : sombre, chiffres en mono, la couleur en filet ; Fun : la couleur en dégradé, gros
   chiffres), l'info (jours ouvrés, part de l'attente), Exporter en image et Plein écran. À droite : les décomptes (zone fixe),
   Ajouter, le nom, la date et l'heure, le style et le format d'image, la couleur. */
.dc .outil-fixe { align-items: stretch; }
.dc-carte { --c: #ff5a1f; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 22px; border-radius: 18px; overflow: hidden;
  background: #171412; box-shadow: inset 0 0 0 1px var(--filet-doux); transition: background .4s var(--courbe); }
.dc-carte[data-style="pro"]::before { content: ''; position: absolute; left: 24px; top: 0; width: 46px; height: 4px; border-radius: 0 0 3px 3px; background: var(--c); }
.dc-carte[data-style="fun"] { background: linear-gradient(135deg, var(--c), #12100e 92%); box-shadow: none; }
.dc-nom { font: 600 16px/24px var(--corps); color: var(--papier); height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-carte[data-style="fun"] .dc-nom { font: 700 20px/24px var(--display); letter-spacing: -.01em; }
.dc-chiffres { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 8px; align-items: end; }
.dc-chiffres div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dc-chiffres b { font: 700 clamp(30px, 6.5vw, 52px)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--papier); white-space: nowrap; }
.dc-chiffres div:first-child b { font-size: clamp(36px, 8vw, 64px); }
.dc-carte[data-style="fun"] .dc-chiffres b { font-family: var(--display); }
.dc-chiffres span { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: rgba(242, 240, 235, .65); }
.dc-sens { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; color: rgba(242, 240, 235, .7); height: 1em; }
.dc-barre { height: 5px; border-radius: 3px; background: rgba(242, 240, 235, .14); overflow: hidden; }
.dc-barre i { display: block; height: 100%; border-radius: 3px; background: var(--c); transition: width .5s var(--courbe); }
.dc-carte[data-style="fun"] .dc-barre i { background: var(--papier); }
.dc-date { font: 500 11.5px/1.3 var(--mono); color: rgba(242, 240, 235, .7); height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-info { flex: none; height: 1lh; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dc-actions .pastille { cursor: pointer; }
.dc-actions .pastille:hover, .dc-ajouter:hover { translate: none; }

.dc-liste { height: 230px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.dc-ligne { flex: none; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; height: 48px; padding: 0 6px 0 14px; border-radius: 12px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--filet-doux); transition: background .2s var(--courbe), box-shadow .2s var(--courbe); }
.dc-ligne:hover { background: rgba(242, 240, 235, .04); }
.dc-ligne.actuelle { background: rgba(242, 240, 235, .07); box-shadow: inset 0 0 0 1px var(--papier); }
.dc-point { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.dc-lnom { font: 500 13.5px/1.2 var(--corps); color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-lreste { font: 500 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--texte2); }
.dc-mini { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte2); }
.dc-mini svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dc-mini:hover { color: var(--papier); }
.dc-mini:disabled { opacity: .25; cursor: default; }
.dc-ajouter { cursor: pointer; }
.dc-ajouter:disabled { opacity: .3; cursor: default; }
.dc-champ { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dc-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dc .saisie[type="date"], .dc .saisie[type="time"] { color-scheme: dark; }
.dc-couleurs { display: flex; gap: 10px; flex-wrap: wrap; }
.dc-pastille { width: 34px; height: 34px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px var(--filet); }
.dc-pastille[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--papier), inset 0 0 0 4px var(--noir); }

/* Plein écran : le décompte seul, centré, en grand */
.dc-plein { position: fixed; inset: 0; z-index: 60; background: #0d0b0a; display: grid; place-items: center; padding: 24px; }
.dc-plein[hidden] { display: none; }
.dc-plein-carte { width: min(1100px, 100%); }
.dc-plein-carte .dc-carte { padding: 48px 44px 40px; gap: 22px; }
.dc-plein-carte .dc-nom { font-size: 26px; line-height: 32px; height: 32px; }
.dc-plein-carte .dc-chiffres b { font-size: clamp(48px, 9vw, 110px); }
.dc-plein-carte .dc-chiffres div:first-child b { font-size: clamp(56px, 11vw, 136px); }
.dc-fermer { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 2; }