/* Outil · Défi créatif (Creative challenge), id defi : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : df-
   Une colonne centrée : les disciplines en onglets, la carte du défi (thème en grand, une contrainte, le livrable, la
   deadline ; un cadenas par ligne ; chaque texte a sa hauteur fixe de deux lignes), l'info, Tirer / Copier / Lancer le
   décompte, puis le temps voulu. */
.df { max-width: 620px; gap: 18px; }
.df-onglets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.df-onglets .puce { cursor: pointer; }
.df-carte { display: flex; flex-direction: column; padding: 8px 10px 14px 20px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.df-ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 12px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--filet-doux); }
.df-nom { font: var(--repere); letter-spacing: .1em; color: var(--texte2); }
.df-ligne b { font: 500 15px/1.35 var(--corps); color: var(--papier); height: 2.7em; display: flex; align-items: center; overflow: hidden; }
.df-theme { min-height: 92px; }
.df-theme b { font: 700 24px/1.15 var(--display); letter-spacing: -.02em; height: 2.3em; color: var(--peche); }
.df-deadline b { font: 600 15px/1.35 var(--mono); }
.df-quand { margin: 10px 0 0; height: 1.3em; font: 500 11.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-melange .df-ligne b { opacity: .55; }
.df-cadenas { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte2); opacity: .45;
  transition: opacity .3s var(--courbe), color .3s var(--courbe), background .3s var(--courbe); }
.df-cadenas svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.df-cadenas:hover { opacity: .9; }
.df-cadenas[aria-pressed="true"] { opacity: 1; color: var(--noir); background: var(--papier); }
.df-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.df-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.df-actions .pastille { cursor: pointer; }
.df-actions .pastille:hover { translate: none; }
.df-actions .pastille:disabled { opacity: .3; cursor: default; }
.df-delai .groupe { text-align: center; }
.df-delais { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.df-delais .puce { cursor: pointer; }
@media (max-width: 559px) { .df-ligne { grid-template-columns: 90px minmax(0, 1fr) 36px; gap: 8px; } .df-carte { padding-left: 14px; } .df-theme b { font-size: 18px; } }