Kanbante 0.45.3 : étoile Spark monochrome pour la marque

CHANGELOG.md

@@ -1,3 +1,38 @@
+## 0.45.3 — 2026-10-29 — Barre commune v0.1.11 : marque monochrome, anneau rouge de l'avatar
+
+- **Barre d'apps v0.1.11 vendangée (dracodev-commons)** : `draco-barre.css` remplacé verbatim (le JS Kanbante est déjà identique à celui de commons, inchangé en v0.1.11) ; fragment `_draco_bar.html` porté à la v0.1.11, le reste de l'intégration Kanbante (URL Jinja `draco_urls` / `agent_url`, `onAction` complet y compris profil/déconnexion, compteurs) est inchangé. Les surcharges Kanbante dans `style.css` ne sont pas touchées.
+- **Marque monochrome** : la marque n'est plus le logo rouge — c'est l'étoile Spark monochrome (`static/img/brand-spark.png`, étoile blanche extraite du logo rouge, fond transparent, 26 px) : blanche sur barre foncée, noire sur barre claire via le filtre du CSS vendangé (`brightness(0)` par défaut, annulé en thème sombre). L'onglet agent et son entrée de menu gardent le logo rouge.
+- **Anneau rouge de l'avatar** : le bouton avatar flottant bas-centre gagne une bordure rouge `#c00000` de 3 px (règle du CSS vendangé, `var(--agent)`).
+- **Thème** : aucun correctif nécessaire — la barre Kanbante suit `html[data-theme]` (sombre par défaut, bascule mémorisée `kanbante-theme`) et `prefers-color-scheme`, tous deux couverts par le CSS vendangé ; vérifié, aucune surcharge `style.css` ajoutée.
+- **Cache** : le bump 0.45.2 → 0.45.3 change aussi le `?v=` des CSS/JS.
+
+## 0.45.2 — 2026-10-29 — Barre commune v0.1.10 : rouge Spark, marque logo, avatar flottant, Alertes icône seule
+
+- **Barre d'apps v0.1.10 vendangée (dracodev-commons)** : `draco-barre.css` remplacé verbatim (le JS Kanbante est déjà identique à celui de commons v0.1.10, inchangé) ; fragment `_draco_bar.html` porté à la v0.1.10, le reste de l'intégration Kanbante (URL Jinja `draco_urls` / `agent_url`, `onAction` complet y compris profil/déconnexion, compteurs) est inchangé. Les surcharges Kanbante dans `style.css` ne sont pas touchées.
+- **Rose → rouge Spark** : `--agent` passe de `#c2437e` à `#c00000` (rouge échantillonné dans le logo Spark) ; la marque ✦ devient le logo Spark (26 px) ; l'onglet agent passe à `--app #c00000`.
+- **Bouton Spark rose supprimé** de la barre, remplacé par le bouton avatar flottant bas-centre (`static/img/avatar-spark.png`, cercle personnage, `data-act="spark"` → le panneau Spark de l'hôte via le `onAction` existant).
+- **Alertes** : cloche seule, sans libellé — le bouton est moins large (pastille conservée).
+- **Test** : l'assertion de la marque dans `tests/test_draco_barre.py` suit le nouveau CSS (`.draco-brand-mark img` au lieu de `font-size: 24px`, disparu en v0.1.10) ; aucun test n'affirmait le bouton Spark ni le libellé Alertes.
+- **Cache** : le bump 0.45.1 → 0.45.2 change aussi le `?v=` des CSS/JS.
+
+## 0.45.1 — 2026-10-29 — Barre commune : les 5 logos en place dans le menu et la barre
+
+- **Barre d'apps v0.1.9 vendangée (dracodev-commons)** : `draco-barre.js` et `draco-barre.css` remplacés verbatim par la v0.1.9 (les fichiers vendangés précédents étaient identiques à l'octet près à ceux de commons avant la v0.1.9, aucune adaptation locale n'est perdue) ; fragment `_draco_bar.html` porté à la v0.1.9, le reste de l'intégration Kanbante (URL Jinja `draco_urls` / `agent_url`, `onAction` complet y compris profil/déconnexion, compteurs) est inchangé. Les surcharges Kanbante dans `style.css` ne sont pas touchées.
+- **Icônes** : les 5 tuiles de la barre — et donc du menu de la marque, qui les clone — sont désormais les logos fournis, tels quels, jamais redessinés : ObsiGate (arbre), Flowdeck (cartes), TikTak (logo officiel SVG), Kanbante (cycle vert), Console Spark (étoile rouge validée). Fichiers servis depuis `static/img/logos/` (copie de `ui/barre-apps/logos/` de commons, PNG 180 px) ; l'entrée « Console Spark » du menu clone l'icône de l'onglet agent. Les glyphes texte ▤/▦/✓/▥/✦ disparaissent des onglets (la marque ✦, le bouton Spark et le rappel d'en-tête gardent leur ✦).
+- **Cache** : le bump 0.45.0 → 0.45.1 change aussi le `?v=` des CSS/JS de la barre, donc les navigateurs ne garderont pas les anciennes icônes.
+
+## 0.45.0 — 2026-10-29 — Mobile : tiroir, pied et menu compte
+
+- **Tiroir mobile** : l'état « replié » mémorisé sur desktop ne rétrécit plus le tiroir (cause : `body.sidebar-collapsed .sidebar { width: 68px; }` gagnait par spécificité sur le 264 px mobile, libellés tronqués par overflow-x). Le tiroir fait 264 px, replié ou non ; le fond ne défile plus derrière lui ; le bouton de repli dans le tiroir le ferme ; un clic sur un lien de navigation le ferme aussi.
+- **Pied de sidebar visible en mobile** : version, fraîcheur des données, thème et Sortir sont désormais accessibles dans le tiroir (avant : pied masqué, aucun moyen de sortir depuis un téléphone).
+- **Menu compte draco** : Profil et Déconnexion fonctionnent enfin (ils étaient relayés par draco-barre.js mais jamais pris en charge par le onAction Kanbante — le menu se fermait sans rien faire). En mobile, c'était le seul accès au profil et à la déconnexion.
+- **Menus draco** : largeur plafonnée à 100vw - 20 px pour ne jamais déborder d'un petit écran.
+
+## 0.44.0 — 2026-10-29 — Ergonomie : tuile Projets et pied de sidebar
+
+- **Tuile Projets** : en-tête groupé (gauche : organisation + santé, droite : date + étoile + menu) au lieu de 5 éléments éparpillés ; avancement global labellisé (« Avancement — X/Y terminées ») au lieu d'une barre anonyme ; jalon séparé par un filet, avec étiquette « Prochain jalon » et échéance distincte ; pied en 2 rangées — (1) compte d'issues + bouton Board, (2) répartition par colonne labellisée (« En cours 8 », « Terminé 59 », au lieu de chiffres nus 8 / 59) + prévision ; activité de la semaine en texte secondaire (« Cette semaine : … »).
+- **Pied de sidebar** : 2 rangées séparées par un filet — (1) profil + bouton Sortir icône seule (⏻, aria-label, sans texte), (2) version + fraîcheur des données en pastille discrète (point vert + « à l'instant », infobulle expliquant les instantanés Gitea). En rail replié, la rangée méta est masquée, les icônes restent centrées.
+
 ## 0.43.0 — 2026-10-29 — Icônes monochromes sur tout le site (#59, suite)
 
 - **Icônes colorées retirées de toutes les pages** : emoji décoratifs devant titres, boutons et liens supprimés (le texte porte le sens) ; icônes fonctionnelles passées en trait/monochrome — étoile ★/☆ (couleur texte, plus jaune), recherche en SVG, épingler déjà en SVG, thème ☀/☾ en symboles texte.

app/config.py

@@ -177,7 +177,7 @@ from urllib.parse import urlparse
 
 BASE_DIR = Path(__file__).resolve().parent.parent
 
-APP_VERSION = "0.43.0"
+APP_VERSION = "0.45.3"
 
 
 def _env_bool(name: str, default: bool) -> bool:

app/templates/_draco_bar.html

@@ -1,5 +1,5 @@
 {# Barre d'apps commune dracodev — Fusion ACC-1 (issue kanbante#28).
-   Snippet vendangé depuis Projets/dracodev-commons v0.1.6
+   Snippet vendangé depuis Projets/dracodev-commons v0.1.10
    (ui/barre-apps/) : structure inchangée ; seule adaptation locale
    (0.32.0, dev/prod) = les URL des apps et l'adresse du service
    d'agents sont INJECTÉES par l'hôte depuis app.config
@@ -10,7 +10,25 @@
    « Console Spark » du menu de la marque est conservée.
    CSS/JS : /static/css/draco-barre.css, /static/js/draco-barre.js.
    Inclus par _header.html (toutes les pages applicatives ; ni le
-   wallboard ni l'écran de connexion, volontaires). #}
+   wallboard ni l'écran de connexion, volontaires).
+   Icônes logos v0.1.9 (2026-10-29) : les 5 tuiles sont les logos
+   fournis, tels quels, servis depuis /static/img/logos/ (copie de
+   ui/barre-apps/logos/ de dracodev-commons) — jamais de glyphe
+   texte, jamais de redessin ; l'entrée « Console Spark » du menu
+   clone l'icône de l'onglet agent (draco-barre.js).
+   Portage v0.1.10 (2026-10-29) : marque = logo Spark 26 px ;
+   --agent rouge Spark #c00000 ; bouton Spark rose supprimé,
+   remplacé par l'avatar flottant bas-centre (data-act="spark"
+   → panneau Spark de l'hôte) ; Alertes = cloche seule.
+   Portage v0.1.11 (2026-10-29) : marque = étoile Spark monochrome
+   (static/img/brand-spark.png, blanche sur barre foncée, noire
+   sur barre claire via le filtre du CSS vendangé) ; l'onglet
+   agent et son entrée de menu gardent le logo rouge ; anneau
+   rouge #c00000 autour de l'avatar flottant (CSS vendangé).
+   Thème : la barre suit html[data-theme] (sombre par défaut,
+   bascule mémorisée kanbante-theme) et prefers-color-scheme —
+   tous deux couverts par le CSS vendangé, aucune surcharge
+   style.css nécessaire. #}
 <link rel="stylesheet" href="/static/css/draco-barre.css?v={{ version }}">
 <link rel="stylesheet" href="/static/css/draco-panneau.css?v={{ version }}">
 <link rel="stylesheet" href="/static/css/draco-alertes.css?v={{ version }}">
@@ -19,29 +37,29 @@
     <div class="draco-bar-zone draco-bar-gauche">
         <button type="button" class="draco-icon-btn" data-act="rail" aria-label="Barre latérale">☰</button>
         <a class="draco-brand" href="/" data-act="apps" aria-haspopup="true" aria-expanded="false" aria-label="dracodev — changer d&#39;application" title="Changer d&#39;application">
-            <span class="draco-brand-mark">✦</span><span class="draco-brand-name">dracodev</span>
+            <span class="draco-brand-mark"><img src="/static/img/brand-spark.png" alt="dracodev" width="26" height="26"></span><span class="draco-brand-name">dracodev</span>
         </a>
         <nav class="draco-apptabs" aria-label="Applications">
             <a class="draco-apptab" data-app="obsigate" href="{{ draco_urls.obsigate }}/">
-                <span class="draco-apptab-ico" style="--app:#7a5af5">▤</span>
+                <span class="draco-apptab-ico" style="--app:#7a5af5"><img src="/static/img/logos/obsigate.png" alt="ObsiGate" width="30" height="30"></span>
                 <span class="draco-apptab-txt"><strong>ObsiGate</strong><small>Notes</small></span>
             </a>
             <a class="draco-apptab" data-app="flowdeck" href="{{ draco_urls.flowdeck }}/">
-                <span class="draco-apptab-ico" style="--app:#2f6fed">▦</span>
+                <span class="draco-apptab-ico" style="--app:#2f6fed"><img src="/static/img/logos/flowdeck.png" alt="Flowdeck" width="30" height="30"></span>
                 <span class="draco-apptab-txt"><strong>Flowdeck</strong><small>Projets</small></span>
             </a>
             <a class="draco-apptab" data-app="tiktak" href="{{ draco_urls.tiktak }}/">
-                <span class="draco-apptab-ico" style="--app:#e8762c">✓</span>
+                <span class="draco-apptab-ico" style="--app:#e8762c"><img src="/static/img/logos/tiktak.svg" alt="TikTak" width="30" height="30"></span>
                 <span class="draco-apptab-txt"><strong>TikTak</strong><small>Tâches</small></span>
                 <span class="draco-badge" data-badge="tiktak" hidden>0</span>
             </a>
             <a class="draco-apptab" data-app="kanbante" href="{{ draco_urls.kanbante }}/">
-                <span class="draco-apptab-ico" style="--app:#0d9488">▥</span>
+                <span class="draco-apptab-ico" style="--app:#0d9488"><img src="/static/img/logos/kanbante.png" alt="Kanbante" width="30" height="30"></span>
                 <span class="draco-apptab-txt"><strong>Kanbante</strong><small>Kanban</small></span>
                 <span class="draco-badge" data-badge="kanbante" hidden>0</span>
             </a>
             <a class="draco-apptab" data-app="agent" href="{{ agent_url }}/">
-                <span class="draco-apptab-ico" style="--app:#c2437e">✦</span>
+                <span class="draco-apptab-ico" style="--app:#c00000"><img src="/static/img/logos/spark.png" alt="Console Spark" width="30" height="30"></span>
                 <span class="draco-apptab-txt"><strong>Console Spark</strong><small>Agent commun</small></span>
             </a>
         </nav>
@@ -62,16 +80,12 @@
         </div>
         <button type="button" class="draco-alertes" data-act="alertes" aria-label="Alertes unifiées">
             <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
-            <span class="draco-alertes-txt">Alertes</span>
             <span class="draco-badge" data-badge="alertes" hidden>0</span>
         </button>
-        <button type="button" class="draco-spark" data-act="spark" aria-label="Ouvrir Spark, l'agent commun">
-            <span class="draco-spark-ico">✦</span><span class="draco-spark-txt">Spark</span>
-            <span class="draco-badge" data-badge="spark" hidden>0</span>
-        </button>
         <button type="button" class="draco-avatar" data-act="compte" aria-label="Compte" aria-haspopup="menu" aria-expanded="false" title="Opérateur Kanbante">{{ draco_avatar }}</button>
     </div>
 </header>
+<button type="button" class="draco-spark-flottant" data-act="spark" aria-label="Ouvrir Spark, l'agent commun"><img src="/static/img/avatar-spark.png" alt="" width="64" height="64"></button>
 <div class="draco-bar-rappel" data-act="rappel-entete" hidden>✦ dracodev — afficher l'en-tête</div>
 <script>
     /* Configuration Kanbante de la barre commune (Fusion ACC-1).
@@ -103,6 +117,13 @@
             };
             if (act === "domaine") { try { localStorage.setItem("draco_domain", el.dataset.dom); } catch (e) { } return; }
             if (act === "rail") { var b = document.getElementById("side-collapse"); if (b) b.click(); return; }
+            /* Menu compte (image 2) : ces deux actions étaient relayées
+               par draco-barre.js mais jamais prises en charge ici —
+               le menu se fermait sans rien faire. En mobile, c'est le
+               seul accès au profil et à la déconnexion (le pied de
+               sidebar était masqué). */
+            if (act === "profil") { location.href = "/profile"; return; }
+            if (act === "deconnexion") { location.href = "/logout"; return; }
             if (act === "palette") { location.href = "/recherche"; return; }
             if (act === "alertes") { if (window.DRACO_ALERTES) { window.DRACO_ALERTES.open(); } else { location.href = "/activity"; } return; }
             /* Correctif fusion #70 : action "menu" supprimée avec le bouton trois points (console agent dans le menu de la marque). */

app/templates/_header.html

@@ -137,19 +137,23 @@
         {% endfor %}
     </nav>
     <div class="side-foot">
-        {% if data_freshness %}
-        <span class="side-fresh side-label" title="Dernière actualisation des données Gitea (instantanés d'arrière-plan)">{{ data_freshness }}</span>
-        {% endif %}
-        {% if current_user %}
-        <a href="/profile" class="side-logout" title="Mon profil"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" style="width:18px;height:18px;display:inline-block;vertical-align:-3px"><circle cx="12" cy="8" r="3.5"/><path d="M4 20c0-3.5 3.5-5.5 8-5.5s8 2 8 5.5"/></svg><span class="side-label"> {{ current_user.display_name or current_user.username }}</span></a>
-        {% endif %}
-        <span class="side-version side-label">v{{ version }}</span>
-        {% if not is_admin %}
-        <button type="button" class="theme-toggle-foot" id="theme-toggle" title="Basculer entre thème sombre et clair" aria-label="Basculer entre thème sombre et clair"><span data-theme-ico>☀</span></button>
-        {% endif %}
-        {% if auth_enabled %}
-        <a href="/logout" class="side-logout" title="Se déconnecter">⏻<span class="side-label"> Sortir</span></a>
-        {% endif %}
+        <div class="side-foot-user">
+            {% if current_user %}
+            <a href="/profile" class="side-logout side-profile" title="Mon profil"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" style="width:18px;height:18px;display:inline-block;vertical-align:-3px"><circle cx="12" cy="8" r="3.5"/><path d="M4 20c0-3.5 3.5-5.5 8-5.5s8 2 8 5.5"/></svg><span class="side-label"> {{ current_user.display_name or current_user.username }}</span></a>
+            {% endif %}
+            {% if not is_admin %}
+            <button type="button" class="theme-toggle-foot" id="theme-toggle" title="Basculer entre thème sombre et clair" aria-label="Basculer entre thème sombre et clair"><span data-theme-ico>☀</span></button>
+            {% endif %}
+            {% if auth_enabled %}
+            <a href="/logout" class="side-logout logout-icon" title="Se déconnecter" aria-label="Se déconnecter">⏻</a>
+            {% endif %}
+        </div>
+        <div class="side-foot-meta">
+            <span class="side-version side-label">v{{ version }}</span>
+            {% if data_freshness %}
+            <span class="side-fresh" title="Dernière actualisation des données Gitea (instantanés d'arrière-plan) — les données affichées datent de cet instantané"><span class="fresh-dot" aria-hidden="true"></span><span class="side-label">{{ data_freshness }}</span></span>
+            {% endif %}
+        </div>
     </div>
 </aside>
 <div class="side-backdrop" id="side-backdrop" hidden></div>

app/templates/dashboard.html

@@ -91,14 +91,17 @@
                  data-search="{{ (repo.name ~ ' ' ~ repo.full_name ~ ' ' ~ (repo.description or ''))|lower }}"
                  x-show="search === '' || $el.dataset.search.includes(search.toLowerCase())">
                 <div class="card-header">
-                    <span class="org-tag">{{ repo.owner.login }}</span>
-                    {% if multi_conn %}<span class="conn-badge" title="Connexion {{ repo._conn_slug }}">{% if repo._conn_kind == 'github' %}GitHub{% else %}Gitea{% endif %} {{ repo._conn_slug }}</span>{% endif %}
-                    {% if repo.health_dot %}
-                    <a href="/health/{{ full }}" class="health-dot {{ repo.health_dot.level }}" title="Santé du flux — {{ repo.health_dot.tooltip }}" aria-label="Santé du flux : {{ repo.health_dot.tooltip }}"></a>
-                    {% endif %}
-                    <span class="date">{{ repo.updated_at[:10] }}</span>
-                    {% if not archived %}
-                    <button type="button" class="star-btn" data-full="{{ full }}" data-starred="{{ 1 if repo.starred else 0 }}" title="{{ 'Désépingler (étoile Gitea)' if repo.starred else 'Épingler (étoile Gitea)' }}" aria-label="Épingler {{ repo.name }}">{{ '' if repo.starred else '☆' }}</button>
+                    <div class="card-header-left">
+                        <span class="org-tag">{{ repo.owner.login }}</span>
+                        {% if multi_conn %}<span class="conn-badge" title="Connexion {{ repo._conn_slug }}">{% if repo._conn_kind == 'github' %}GitHub{% else %}Gitea{% endif %} {{ repo._conn_slug }}</span>{% endif %}
+                        {% if repo.health_dot %}
+                        <a href="/health/{{ full }}" class="health-dot {{ repo.health_dot.level }}" title="Santé du flux — {{ repo.health_dot.tooltip }}" aria-label="Santé du flux : {{ repo.health_dot.tooltip }}"></a>
+                        {% endif %}
+                    </div>
+                    <div class="card-header-actions">
+                        <span class="date" title="Dernière activité">{{ repo.updated_at[:10] }}</span>
+                        {% if not archived %}
+                        <button type="button" class="star-btn" data-full="{{ full }}" data-starred="{{ 1 if repo.starred else 0 }}" title="{{ 'Désépingler (étoile Gitea)' if repo.starred else 'Épingler (étoile Gitea)' }}" aria-label="Épingler {{ repo.name }}">{{ '' if repo.starred else '☆' }}</button>
                     <div class="card-menu-wrap">
                         <button type="button" class="card-menu-btn" data-menu-btn aria-haspopup="true" aria-expanded="false" title="Actions rapides pour {{ repo.name }}" aria-label="Actions rapides pour {{ repo.name }}">⋯</button>
                         <div class="card-menu" hidden>
@@ -115,26 +118,30 @@
                         </div>
                     </div>
                     {% endif %}
+                    </div>
                 </div>
                 <h3>
                     <a href="/project/{{ repo.owner.login }}/{{ repo.name }}">{{ repo.name }}</a>
                 </h3>
-                <p class="desc">{{ repo.description or '—' }}</p>
+                <p class="desc" title="{{ repo.description or '' }}">{{ repo.description or '—' }}</p>
                 {% if full in stats %}
                 {% set total = stats[full].values()|sum %}
                 {% set done_n = stats[full].get('done', 0) %}
                 {% if total > 0 %}
-                <div class="progress" title="{{ done_n }}/{{ total }} terminées">
-                    <span style="width: {{ (100 * done_n / total)|round|int }}%"></span>
+                <div class="card-progress">
+                    <div class="progress-head"><span>Avancement</span><span>{{ done_n }}/{{ total }} terminées</span></div>
+                    <div class="progress" title="{{ done_n }}/{{ total }} terminées">
+                        <span style="width: {{ (100 * done_n / total)|round|int }}%"></span>
+                    </div>
                 </div>
                 {% endif %}
                 {% endif %}
                 {% if repo.next_milestone %}
                 {% set ms = repo.next_milestone %}
                 <div class="ms-block">
+                    <div class="ms-head"><span class="ms-kicker">Prochain jalon</span>{% if ms.due_label %}<span class="ms-due{% if ms.late %} late{% endif %}">échéance {{ ms.due_label }}</span>{% endif %}</div>
                     <div class="ms-line">
                         <a href="/forecast#ms-{{ repo.owner.login }}-{{ repo.name }}" class="ms-title" title="Voir ce jalon dans le tableau des prévisions">{{ ms.title }}</a>
-                        {% if ms.due_label %}<span class="ms-due{% if ms.late %} late{% endif %}">{{ '' if ms.late }}échéance {{ ms.due_label }}</span>{% endif %}
                     </div>
                     {% if ms.total %}
                     <div class="progress ms-progress"><span style="width: {{ ms.pct }}%"></span></div>
@@ -143,28 +150,32 @@
                 </div>
                 {% endif %}
                 <div class="card-footer">
-                    <span>{{ repo.open_issues_count or 0 }} issues ouvertes</span>
-                    <a href="/board/{{ full }}" class="card-board-link">Board</a>
-                    {% if repo.forecast_label %}
-                    <span class="forecast-line" title="Prévision d'après le débit réel du journal (fermetures par semaine)">{{ repo.forecast_label }}</span>
-                    {% endif %}
-                    {% if full in stats %}
-                    <div class="mini-progress">
-                        {% for col in column_keys %}
-                        {% set n = stats[full].get(col, 0) %}
-                        {% if n > 0 %}
-                        <span class="chip" style="background: color-mix(in srgb, {{ COLUMN_COLORS[col] }} 25%, transparent); color: var(--text)">
-                            {{ n }}
-                        </span>
+                    <div class="foot-main">
+                        <span class="foot-count">{{ repo.open_issues_count or 0 }} issues ouvertes</span>
+                        <a href="/board/{{ full }}" class="card-board-link btn-sm">Board →</a>
+                    </div>
+                    <div class="foot-dist">
+                        {% if full in stats %}
+                        <div class="mini-progress" aria-label="Répartition par colonne">
+                            {% for col in column_keys %}
+                            {% set n = stats[full].get(col, 0) %}
+                            {% if n > 0 %}
+                            <span class="chip" title="{{ COLUMN_LABELS[col] }}" style="background: color-mix(in srgb, {{ COLUMN_COLORS[col] }} 25%, transparent); color: var(--text)">
+                                {{ COLUMN_LABELS[col] }} {{ n }}
+                            </span>
+                            {% endif %}
+                            {% endfor %}
+                        </div>
                         {% endif %}
-                        {% endfor %}
+                        {% if repo.forecast_label %}
+                        <span class="forecast-line" title="Prévision d'après le débit réel du journal (fermetures par semaine)">{{ repo.forecast_label }}</span>
+                        {% endif %}
                     </div>
-                    {% endif %}
                 </div>
                 {% if repo.activity %}
                 <div class="activity-line">
                     {% if repo.activity.closed or repo.activity.moved %}
-                    {{ repo.activity.closed }} fermée(s) · {{ repo.activity.moved }} déplacement(s) cette semaine
+                    Cette semaine : {{ repo.activity.closed }} fermée(s) · {{ repo.activity.moved }} déplacement(s)
                     {% elif repo.activity.idle_days is not none and repo.activity.idle_days > 7 %}
                     aucune activité kanban depuis {{ repo.activity.idle_days }} j
                     {% endif %}

static/css/draco-barre.css

@@ -7,6 +7,11 @@
    menu des applications) ; l'avatar est un vrai <button>.
    Correctif fusion #70 (SANS bump) : bouton trois points et menu par
    défaut supprimés ; le menu de la marque gagne « Console Spark ».
+   v0.1.10 : rose --agent → rouge Spark #c00000 ; marque = logo Spark ;
+   bouton Spark supprimé (remplacé par l'avatar flottant bas-centre) ;
+   Alertes icône seule.
+   v0.1.11 : marque = étoile Spark monochrome (blanche barre foncée,
+   noire barre claire) ; anneau rouge #c00000 autour de l'avatar flottant.
    Jetons repris du prototype validé Console v7.2.
    Thème : clair par défaut, sombre via [data-theme="dark"] sur <html>
    ou prefers-color-scheme si l'app intégratrice ne force rien. */
@@ -14,7 +19,7 @@
 .draco-bar {
   --bg: #f2f2f0; --surface: #ffffff; --surface-2: #e9eae6; --surface-3: #f6f6f3;
   --ink: #1b1d1a; --ink-2: #5c615a; --ink-3: #787d75; --line: #dedfd9;
-  --agent: #c2437e; --danger: #cf4444;
+  --agent: #c00000; --danger: #cf4444;
   position: relative;
   height: 60px; box-sizing: border-box;
   display: grid; grid-template-columns: auto minmax(200px, 520px) auto;
@@ -37,7 +42,15 @@
 .draco-brand { display: flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-weight: 800; cursor: pointer; border-radius: 10px; padding: 4px 6px; margin: -4px -6px; }
 .draco-brand:hover { background: var(--surface-2); }
 .draco-brand:focus-visible { outline: 2px solid var(--agent); outline-offset: 2px; }
-.draco-brand-mark { color: var(--agent); font-size: 24px; line-height: 1; }
+.draco-brand-mark { line-height: 0; }
+/* Marque monochrome v0.1.11 : étoile blanche extraite du logo rouge,
+   fond transparent — noire sur barre claire (filtre), blanche sur
+   barre foncée (filtre annulé par les règles thème ci-dessous). */
+.draco-brand-mark img { width: 26px; height: 26px; object-fit: cover; display: block; filter: brightness(0); }
+@media (prefers-color-scheme: dark) {
+  .draco-bar .draco-brand-mark img { filter: none; }
+}
+[data-theme="dark"] .draco-bar .draco-brand-mark img { filter: none; }
 
 /* Menu des applications — construit par le JS depuis les onglets */
 .draco-apps-menu {
@@ -94,6 +107,13 @@
   width: 30px; height: 30px; flex: none; display: grid; place-items: center;
   border-radius: 9px; background: var(--app); color: #fff; font-size: 15px;
 }
+/* Icônes logos (2026-10-29, corrigé le même jour) : l'image du logo
+ * fourni, telle quelle, remplit la tuile 30 px — jamais de glyphe
+ * texte, jamais de redessin. Le fond de la tuile est transparent :
+ * les logos PNG portent déjà leur fond (dégradé), le SVG TikTak
+ * reste sur le fond de la barre. */
+.draco-apptab-ico { background: transparent; }
+.draco-apptab-ico img { width: 30px; height: 30px; display: block; border-radius: 9px; object-fit: cover; }
 .draco-apptab-txt { display: none; flex-direction: column; line-height: 1.15; }
 .draco-apptab-txt strong { font-size: 14px; font-weight: 700; }
 .draco-apptab-txt small { font-size: 11.5px; color: var(--ink-2); }
@@ -131,18 +151,23 @@
 
 /* Alertes — la cloche ne disparaît JAMAIS (correctif v7.2) */
 .draco-alertes {
-  position: relative; display: flex; align-items: center; gap: 7px; height: 38px;
-  padding: 0 11px; border-radius: 10px; border: 1px solid var(--line);
+  position: relative; display: flex; align-items: center; height: 38px;
+  padding: 0 9px; border-radius: 10px; border: 1px solid var(--line);
   background: transparent; color: var(--ink); font: inherit; cursor: pointer;
 }
 
-/* Spark */
-.draco-spark {
-  position: relative; display: flex; align-items: center; gap: 7px; height: 38px;
-  padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
-  background: var(--agent); color: #fff; font: inherit; font-weight: 700;
+/* Bouton avatar Spark flottant — bas-centre, ouvre le panneau Spark
+   de l'hôte via data-act="spark" (délégation globale existante).
+   La console Spark ne l'inclut pas : son fragment est propre. */
+.draco-spark-flottant {
+  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
+  z-index: 65; width: 64px; height: 64px; padding: 0; border: 0;
+  border-radius: 50%; background: transparent; cursor: pointer;
+  box-shadow: 0 8px 28px rgb(0 0 0 / .45);
 }
-.draco-spark .draco-badge { border-color: var(--agent); }
+.draco-spark-flottant img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; box-sizing: border-box; border: 3px solid var(--agent); }
+.draco-spark-flottant:hover { transform: translateX(-50%) scale(1.05); }
+.draco-spark-flottant:focus-visible { outline: 2px solid var(--agent); outline-offset: 3px; }
 
 .draco-icon-btn {
   width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent;
@@ -169,7 +194,7 @@
   .draco-bar { grid-template-columns: auto minmax(200px, 440px) auto; }
 }
 @media (max-width: 1200px) {
-  .draco-search-txt, .draco-search kbd, .draco-alertes-txt, .draco-spark-txt { display: none; }
+  .draco-search-txt, .draco-search kbd { display: none; }
   .draco-search { width: 38px; padding: 0; justify-content: center; }
   .draco-bar { grid-template-columns: auto auto 1fr; }
   .draco-bar-droite { justify-content: flex-end; }

static/css/style.css

@@ -315,8 +315,15 @@ a.kpi:hover { background: var(--surface-2); text-decoration: none; }
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 10px;
+    gap: 12px;
+    margin-bottom: 12px;
 }
+.card-header-left, .card-header-actions {
+    display: flex; align-items: center; gap: 8px; min-width: 0;
+}
+.card-header-actions { flex-shrink: 0; }
+.card-header .date { white-space: nowrap; }
+.card-header .star-btn { margin-left: 0; }
 .org-tag {
     font-size: 0.68rem;
     text-transform: uppercase;
@@ -340,20 +347,33 @@ a.kpi:hover { background: var(--surface-2); text-decoration: none; }
     min-height: 2.4em;
 }
 .card-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 0.8rem;
-    color: var(--text-2);
-    gap: 10px;
+    display: flex; flex-direction: column; align-items: stretch;
+    font-size: 0.8rem; color: var(--text-2); gap: 10px;
+    border-top: 1px solid var(--border);
+    padding-top: 12px; margin-top: 14px;
 }
-.mini-progress { display: flex; gap: 4px; }
+.foot-main, .foot-dist {
+    display: flex; justify-content: space-between; align-items: center;
+    gap: 10px; flex-wrap: wrap;
+}
+.foot-count { font-weight: 600; color: var(--text); }
+.card-board-link.btn-sm { text-decoration: none; }
+.mini-progress { display: flex; gap: 4px; flex-wrap: wrap; }
+.mini-progress .chip { white-space: nowrap; }
+.forecast-line { white-space: nowrap; }
 .chip {
     padding: 2px 9px;
     border-radius: var(--radius-full);
     font-size: 0.7rem;
     font-weight: 700;
 }
+.card-progress { margin-bottom: 12px; }
+.progress-head {
+    display: flex; justify-content: space-between; align-items: baseline;
+    gap: 10px; margin-bottom: 6px;
+    font-size: 0.78rem; color: var(--text-2);
+}
+.progress-head span:last-child { font-weight: 600; color: var(--text); white-space: nowrap; }
 .progress {
     height: 6px;
     border-radius: var(--radius-full);
@@ -1387,7 +1407,24 @@ body.nav-closed-admin [data-group="admin"] .side-chevron { transform: rotate(-90
 .theme-toggle-foot:hover { color: var(--text); }
 .side-foot {
     margin-top: auto; padding-top: 12px;
-    display: flex; align-items: center; justify-content: space-between; gap: 8px;
+    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
+    border-top: 1px solid var(--border);
+}
+.side-foot-user { display: flex; align-items: center; gap: 8px; }
+.side-foot-user .side-profile { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.side-logout.logout-icon {
+    width: 36px; height: 36px; flex-shrink: 0;
+    display: inline-flex; align-items: center; justify-content: center;
+    border: 1px solid var(--border); border-radius: var(--radius-sm);
+}
+.side-logout.logout-icon:hover { border-color: var(--accent, #0d9488); }
+.side-foot-meta {
+    display: flex; justify-content: space-between; align-items: center; gap: 8px;
+}
+.fresh-dot {
+    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
+    background: var(--accent-2); display: inline-block; margin-right: 6px;
+    vertical-align: 1px;
 }
 .side-collapse {
     /* Depuis la 0.22.0 : bouton icône seule dans l'en-tête de la
@@ -1403,7 +1440,7 @@ body.nav-closed-admin [data-group="admin"] .side-chevron { transform: rotate(-90
     color: var(--text); border-color: var(--accent, #0d9488);
     transform: translateY(-1px);
 }
-.side-fresh { color: var(--text-3); font-size: 0.76rem; white-space: nowrap; }
+.side-fresh { color: var(--text-3); font-size: 0.76rem; white-space: nowrap; display: inline-flex; align-items: center; }
 .side-logout { color: var(--text-3); font-size: 0.85rem; white-space: nowrap; }
 .side-logout:hover { color: var(--text); text-decoration: none; }
 .side-collapse-ico { display: inline-block; transition: transform 0.18s ease; }
@@ -1412,7 +1449,9 @@ body.sidebar-collapsed .side-collapse-ico { transform: rotate(180deg); }
 body.sidebar-collapsed .side-label { display: none; }
 body.sidebar-collapsed .side-link { justify-content: center; padding-left: 0; padding-right: 0; }
 body.sidebar-collapsed .side-logo { justify-content: center; padding-left: 0; padding-right: 0; }
-body.sidebar-collapsed .side-foot { justify-content: center; }
+body.sidebar-collapsed .side-foot { align-items: center; }
+body.sidebar-collapsed .side-foot-meta { display: none; }
+body.sidebar-collapsed .side-foot-user { justify-content: center; }
 .side-backdrop {
     position: fixed; inset: 0; z-index: 190;
     background: rgba(4, 6, 10, 0.55);
@@ -1423,12 +1462,30 @@ body.sidebar-collapsed .side-foot { justify-content: center; }
     body.with-sidebar, body.with-sidebar.sidebar-collapsed { padding-left: 0; }
     .sidebar { width: 264px; transform: translateX(-105%); box-shadow: none; }
     body.sidebar-open .sidebar { transform: none; box-shadow: 18px 0 44px rgba(0,0,0,.5); }
+    /* Tiroir mobile : l'état « replié » mémorisé sur desktop ne doit
+       JAMAIS rétrécir le tiroir. Avant, `body.sidebar-collapsed
+       .sidebar { width: 68px; }` (spécificité supérieure à `.sidebar`)
+       gagnait en mobile : libellés tronqués par overflow-x hidden,
+       exactement la capture image 1. Le tiroir fait 264 px, replié
+       ou non, et le fond ne défile plus derrière lui. */
+    body.sidebar-collapsed .sidebar,
+    body.sidebar-open.sidebar-collapsed .sidebar { width: 264px; }
+    body.sidebar-open { overflow: hidden; }
     body.sidebar-collapsed .side-label { display: initial; }
     body.sidebar-collapsed .side-link { justify-content: flex-start; padding-left: 10px; padding-right: 10px; }
+    body.sidebar-collapsed .side-logo { justify-content: flex-start; padding-left: 8px; padding-right: 8px; }
     body.sidebar-collapsed .side-head { flex-direction: row; padding: 4px 6px 12px; }
     body.sidebar-collapsed .side-search { margin-left: auto; }
-    .side-foot { display: none; }
+    /* Pied visible dans le tiroir (avant : display:none en mobile —
+       aucun moyen de voir la version, la fraîcheur, le thème ni de
+       sortir depuis un téléphone). */
+    .side-foot { display: flex; }
+    body.sidebar-collapsed .side-foot { align-items: stretch; }
+    body.sidebar-collapsed .side-foot-meta { display: flex; }
+    body.sidebar-collapsed .side-foot-user { justify-content: flex-start; }
     .topbar-search { display: inline-flex; }
+    /* Menus draco (vendangés) : jamais plus larges que l'écran. */
+    header.draco-bar .draco-compte-menu, header.draco-bar .draco-apps-menu { max-width: calc(100vw - 20px); }
 }
 
 /* ── Dashboard vague 2 (0.17.0, #17 #18 #20) + page Projet (#25) ── */
@@ -1449,7 +1506,19 @@ body.sidebar-collapsed .side-foot { justify-content: center; }
 .star-btn:hover { transform: scale(1.2); }
 .star-btn:disabled { opacity: 0.5; }
 .card-board-link { font-weight: 600; }
-.ms-block { margin: 10px 0 2px; }
+.ms-block {
+    margin: 14px 0 2px; padding-top: 12px;
+    border-top: 1px solid var(--border);
+}
+.ms-head {
+    display: flex; justify-content: space-between; align-items: baseline;
+    gap: 10px; margin-bottom: 6px;
+}
+.ms-kicker {
+    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.6px;
+    color: var(--text-3); font-weight: 700;
+}
+.ms-block .ms-line { margin-bottom: 2px; }
 .ms-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
 .ms-title { font-weight: 600; font-size: 0.92rem; }
 .ms-due { font-size: 0.8rem; color: var(--text-2); white-space: nowrap; }
@@ -1485,7 +1554,7 @@ body.sidebar-collapsed .side-foot { justify-content: center; }
 .proj-notes-body { white-space: pre-wrap; font-size: 0.93rem; background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }
 
 /* ── Dashboard vague 2 suite (0.18.0, #19 #21 #22 #23) ── */
-.activity-line { margin-top: 8px; font-size: 0.82rem; color: var(--text-2); }
+.activity-line { margin-top: 10px; font-size: 0.78rem; color: var(--text-3); }
 /* Barre d'outils unique du dashboard (0.20.0) : onglets
    segmentés, filtre, tri, regroupement et vue dans UN cadre. */
 .dash-toolbar {

static/img/logos/tiktak.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <!-- TikTak — deux arcs (les deux temps), coche-flèche. Bleu #0076fb, orange #fc750c.
+       Géométrie mesurée sur le visuel validé par Bruno (variante B). -->
+  <path d="M 38.2 101.1 A 84 84 0 0 1 201.8 101.1" fill="none" stroke="#0076fb" stroke-width="28" stroke-linecap="round"/>
+  <path d="M 201.5 140.3 A 84 84 0 0 1 38.5 140.3" fill="none" stroke="#fc750c" stroke-width="28" stroke-linecap="round"/>
+  <polyline points="80,129 106,146 163,84" fill="none" stroke="#0076fb" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M 128 80 L 163 84 L 167 122" fill="none" stroke="#0076fb" stroke-width="22" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/js/draco-barre.js

@@ -369,7 +369,10 @@
      * de l'agent commun (URL agent résolue — explicite > -dev >
      * défaut prod ; aucun hôte spark-dev inventé). data-app="agent"
      * l'intègre à refreshMenuHrefs/applyUrls/setCurrent comme les
-     * autres items ; l'icône ✦ reprend la couleur agent du CSS. */
+     * autres items ; son icône CLONE celle de l'onglet agent
+     * (2026-10-29, logos barre-apps, corrigé le même jour) : le logo
+     * fourni, tel quel, jamais redessiné — le CSS --agent (rose) des
+     * autres éléments de la barre n'est pas changé ici. */
     var sep = document.createElement("div");
     sep.className = "draco-menu-sep";
     sep.setAttribute("aria-hidden", "true");
@@ -379,10 +382,18 @@
     sparkItem.href = resolvedUrls.agent || "#";
     sparkItem.dataset.app = "agent";
     sparkItem.setAttribute("role", "menuitem");
-    var sparkIco = document.createElement("span");
-    sparkIco.className = "draco-apptab-ico";
-    sparkIco.setAttribute("style", "--app:#c2437e");
-    sparkIco.textContent = "✦";
+    var sparkIco;
+    var agentTab = document.querySelector('.draco-apptab[data-app="agent"]');
+    var agentIco = agentTab ? agentTab.querySelector(".draco-apptab-ico") : null;
+    if (agentIco) {
+      sparkIco = agentIco.cloneNode(true);
+    } else {
+      sparkIco = document.createElement("span");
+      sparkIco.className = "draco-apptab-ico";
+      sparkIco.setAttribute("style", "--app:#d21f2c");
+      sparkIco.setAttribute("data-icon", "agent");
+      sparkIco.textContent = "✦";
+    }
     sparkItem.appendChild(sparkIco);
     var sparkTxt = document.createElement("span");
     sparkTxt.className = "draco-apps-item-txt";

static/js/nav.js

@@ -63,8 +63,18 @@
         });
     }
 
+    /* En mobile, le bouton de repli dans le tiroir FERME le tiroir :
+       replier un tiroir de 264 px n'a pas de sens, et avant ce
+       correctif il basculait l'état desktop (tiroir 68 px). */
+    var sideLinks = document.querySelectorAll('.side-link');
+    sideLinks.forEach(function (link) {
+        link.addEventListener('click', function () {
+            if (window.innerWidth <= 900) closeDrawer();
+        });
+    });
     if (collapseBtn) {
         collapseBtn.addEventListener('click', function () {
+            if (window.innerWidth <= 900) { closeDrawer(); return; }
             var collapsed = document.body.classList.toggle('sidebar-collapsed');
             try {
                 localStorage.setItem('kanbante-sidebar', collapsed ? 'collapsed' : 'open');

tests/test_draco_barre.py

@@ -198,7 +198,7 @@ def test_menu_des_applications_par_la_marque(client):
     js = client.get("/static/js/draco-barre.js").text
     assert "draco-apps-menu" in js
     css = client.get("/static/css/draco-barre.css").text
-    assert "font-size: 24px" in css
+    assert ".draco-brand-mark img" in css  # v0.1.10 : la marque est le logo Spark (26 px), plus de glyphe 24 px
 
 
 def test_barre_pleine_largeur_et_palier_mobile(client):

tests/test_mobile.py

@@ -0,0 +1,35 @@
+"""Mobile : tiroir, pied et menu compte.
+
+Bugs signalés sur captures (29 octobre 2026) :
+- tiroir rétréci à 68 px en mobile quand l'état « replié » desktop
+  était mémorisé (spécificité de `body.sidebar-collapsed .sidebar`) ;
+- pied de sidebar masqué en mobile (`display: none`) ;
+- Profil / Déconnexion du menu compte draco sans effet (onAction
+  ne les prenait pas en charge).
+"""
+
+
+def test_tiroir_mobile_largeur_fixe():
+    css = open("static/css/style.css", encoding="utf-8").read()
+    assert "body.sidebar-collapsed .sidebar,\n    body.sidebar-open.sidebar-collapsed .sidebar { width: 264px; }" in css
+    assert "body.sidebar-open { overflow: hidden; }" in css
+
+
+def test_pied_visible_en_mobile():
+    css = open("static/css/style.css", encoding="utf-8").read()
+    assert ".side-foot { display: none; }" not in css
+    assert "body.sidebar-collapsed .side-foot-meta { display: flex; }" in css
+
+
+def test_menu_compte_draco_fonctionnel():
+    tpl = open("app/templates/_draco_bar.html", encoding="utf-8").read()
+    assert 'act === "profil"' in tpl
+    assert 'location.href = "/profile"' in tpl
+    assert 'act === "deconnexion"' in tpl
+    assert 'location.href = "/logout"' in tpl
+
+
+def test_tiroir_ferme_en_mobile():
+    js = open("static/js/nav.js", encoding="utf-8").read()
+    assert "window.innerWidth <= 900" in js
+    assert "querySelectorAll('.side-link')" in js

tests/test_palier14.py

@@ -19,7 +19,7 @@ def test_activity_line_recent_week(client, fake_gitea):
                      from_column="backlog", to_column="todo",
                      created_at=_ts(0))
     page = client.get("/")
-    assert "2 fermée(s) · 1 déplacement(s) cette semaine" in page.text
+    assert "Cette semaine : 2 fermée(s) · 1 déplacement(s)" in page.text
 
 
 def test_activity_line_idle_project(client, fake_gitea):

tests/test_tuile_pied.py

@@ -0,0 +1,37 @@
+"""Tuile Projets et pied de sidebar : ergonomie refondue.
+
+Tuile : en-tête groupé, avancement labellisé, jalon étiqueté,
+pied en 2 rangées avec répartition labellisée par colonne.
+Pied : Sortir icône seule, fraîcheur en pastille discrète.
+"""
+
+
+def test_tuile_structure(client, fake_gitea):
+    page = client.get("/")
+    assert 'class="card-header-left"' in page.text
+    assert 'class="card-header-actions"' in page.text
+    assert 'class="foot-main"' in page.text
+    assert 'class="foot-dist"' in page.text
+    # Répartition, avancement et jalon sont conditionnels (stats /
+    # jalon) : on les vérifie dans le gabarit, pas dans la page de
+    # test sans données.
+    tpl = open("app/templates/dashboard.html", encoding="utf-8").read()
+    assert 'aria-label="Répartition par colonne"' in tpl
+    assert 'class="progress-head"' in tpl
+    assert "Avancement" in tpl
+    assert 'class="ms-kicker">Prochain jalon' in tpl
+    assert "COLUMN_LABELS[col]" in tpl
+
+
+def test_pied_sidebar_structure():
+    tpl = open("app/templates/_header.html", encoding="utf-8").read()
+    assert 'class="side-foot-user"' in tpl
+    assert 'class="side-foot-meta"' in tpl
+    assert 'class="side-logout logout-icon"' in tpl
+    assert 'aria-label="Se déconnecter"' in tpl
+    assert " Sortir</span>" not in tpl
+    assert 'class="fresh-dot"' in tpl
+    css = open("static/css/style.css", encoding="utf-8").read()
+    assert ".side-foot-meta" in css
+    assert ".fresh-dot" in css
+    assert ".logout-icon" in css