/* ============================================================ CREA AI — Premium Styles ============================================================ */ /* Échelle racine pilotée par le Universal Interface Engine (src/crea-uie.js) — la quasi-totalité des classes Tailwind par défaut de l'app est en `rem`, donc relative à cette taille de police racine : ce point unique fait bouger texte, marges, paddings et la plupart des icônes selon la densité calculée (téléphone étroit → un peu plus compact, grand écran → un peu plus spacieux), sans toucher chaque composant un par un. `%` (pas px) pour rester relatif au réglage navigateur de l'utilisateur. Fallback 100% (comportement identique à avant) si le script n'a pas encore tourné ou est indisponible. */ html { font-size: calc(100% * var(--uie-root-scale, 1)); } /* Animation Engine (src/crea-uie.js) : coupe transitions/animations quand le plan le décide — mode voiture (sécurité, aucun signal OS standard ne couvre ce cas) ou accessibilité. S'ajoute à la règle prefers-reduced-motion plus bas (redondant pour ce cas précis, mais pas en conflit) : celle-là ne réagit qu'à la préférence système, celle-ci réagit aussi au tier calculé par l'UIE. */ html.uie-motion-reduced *, html.uie-motion-reduced *::before, html.uie-motion-reduced *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } /* Component Engine (src/crea-uie.js) : boutons d'icônes du header pilotés par la densité calculée. Liste explicite (pas de sélecteur générique `.w-8.h-8`) car ces classes Tailwind sont partagées avec des avatars, pastilles de statut et swatches de couleur qui ne doivent PAS suivre cette règle. */ #btn-close-notices, #btn-fullscreen-mode, #btn-tools-panel, #btn-close-tracking, #btn-bgtasks-panel, #btn-new-chat-top, #btn-ephemeral, #btn-close-work-panel, #btn-work-panel { width: var(--uie-button-height, 32px); height: var(--uie-button-height, 32px); } /* CETTE LISTE EST POUR LES BOUTONS CARRÉS. DEUX N'EN SONT PAS. • #btn-top-menu vit en paire avec #btn-new-chat-barre, qui n'y a jamais été. La densité en faisait un 36 à côté d'un 28 — deux tailles pour deux boutons collés. • #btn-categories-menu n'est pas une icône : il porte l'icône ET le nom de l'espace ouvert (Le Fil, Finance, Projets…). Mesuré : le bouton bloqué à 36 px de large, et le nom écrasé à ZÉRO. Le mot était rendu, personne ne le voyait, et le bouton ne disait plus où l'on est — c'est-à-dire tout ce pour quoi il avait été écrit. Les deux portent leur taille dans leur balisage, et c'est le balisage qui décide. */ /* … sauf la HAUTEUR de #btn-categories-menu, qui reste à la densité. Il partage sa pilule avec #btn-ephemeral : deux voisins de 32 et 36 se lisent comme un défaut d'alignement, et une hauteur écrite dans le balisage se figerait pendant que le voisin suivrait le réglage. La largeur, elle, appartient au contenu — icône plus nom d'espace, ce n'est pas un carré. */ #btn-categories-menu { height: var(--uie-button-height, 32px); } #btn-close-notices svg, #btn-fullscreen-mode svg, #btn-tools-panel svg, #btn-close-tracking svg, #btn-bgtasks-panel svg, #btn-new-chat-top svg, #btn-ephemeral svg, #btn-close-work-panel svg, #btn-work-panel svg { width: var(--uie-icon-size, 18px); height: var(--uie-icon-size, 18px); } /* --- CSS Variables — LIGHT par défaut (comme ChatGPT/Claude) --- */ :root { /* ===== BLANC CASSÉ ===== SEULS LES FONDS sont légèrement cassés — les textes et les bordures restent NEUTRES. Première version : tout avait été teinté, y compris les gris de texte (#7B7365) et les bordures (#E6E1D6) ; l'écran entier virait au beige sale. C'est l'erreur classique : ce qui donne à un blanc cassé son élégance, c'est précisément que l'encre reste neutre par-dessus. Deux fonds, et rien d'autre. Le blanc demandé est un blanc LÉGÈREMENT GRIS, pas un crème : les versions précédentes tiraient sur le jaune (#FAF9F5 / #F1EFE9) et l'écran paraissait beige à côté d'une interface grise. Ces deux valeurs sont donc neutres — aucune dominante chaude, juste un blanc légèrement descendu vers le gris. */ --bg-primary: #FCFCFC; /* La barre latérale doit se DEVINER, pas trancher. À #F0F0F0 elle formait une bande franchement grise à côté de la page : deux zones au lieu d'une seule interface. L'écart est ramené à quelques points — assez pour délimiter, trop peu pour faire une couleur à part. */ --bg-secondary: #F6F6F6; /* LE FOND DU TERMINAL — IL ÉTAIT LU ET DÉCLARÉ NULLE PART. `crea-terminal-atelier.js` lit `--bg-terminal` pour le thème de xterm, avec `#0a0e16` en repli. Le jeton n'existait dans aucun thème : le repli gagnait toujours. Or l'encre, elle, vient de `--t-primary` — qui suit le thème. MESURÉ : en thème clair, texte #0d0d0d sur fond #0a0e16 → contraste de 1,01 : 1. Le terminal n'était pas « noir » : il était ILLISIBLE. En sombre il tombait juste, ce qui est exactement pourquoi ça n'a jamais sauté aux yeux de qui travaille en sombre. Un terminal suit maintenant l'application. LA VALEUR N'EST PAS CHOISIE À L'ŒIL : c'est le fond le plus sombre sur lequel les CINQ intentions (danger, succès, avertissement, info, accent-texte) tiennent encore le seuil de lecture en thème clair — mesuré, #F3F3F3. Un cran de plus et la sortie d'erreur repasse sous 4,5 : la palette n'est pas calibrée pour un ardoise en thème clair, et le prétendre en assombrissant aurait rendu illisible ce que le terminal a de plus important à dire. */ --bg-terminal: #F3F3F3; /* FOND DE LA BARRE LATÉRALE — CELUI DE L'ESPACE CHAT, PAS UN AUTRE. Demandé explicitement : « la barre latérale doit être de la même couleur que celle que contient l'espace chat ». Elle en était séparée dans les deux thèmes — #F6F6F6 contre #FCFCFC en clair, #1A1A1A contre #1E1E1E en sombre. Peu d'écart, mais assez pour lire deux zones au lieu d'une seule interface. La valeur n'est pas recopiée : elle RENVOIE à --bg-primary, qui change avec le thème. Recopier les deux teintes, c'est se garantir qu'un jour l'une bougera sans l'autre. Ce qui sépare la barre du fil n'est plus la couleur mais le liseré d'un pixel déjà posé sur #sidebar (voir plus bas). */ --sidebar-bg: var(--bg-primary); /* LA LARGEUR DE LA BARRE LATÉRALE, DÉCLARÉE UNE FOIS. Elle était écrite en clair à cinq endroits de src/app.js (`width:264px`) et nulle part ailleurs — donc invisible pour tout ce qui n'est pas dans la mise en page. La barre de fenêtre d'Electron, qui est POSÉE AU-DESSUS de celle-ci, en avait pourtant besoin : c'est le seul chiffre qui manque pour centrer ses onglets sur la conversation plutôt que sur l'écran. Elle passait donc par une MESURE, qui arrivait toujours une image trop tard — 234 px d'écart relevés pendant l'ouverture de la barre. Une variable, lue par l'aside comme par les onglets, et le retard n'a plus de place où exister. */ /* 264 px, C'ÉTAIT ÉTROIT — « j'ai demandé d'agrandir en largeur la barre latérale, tu as oublié de le faire ». 300 px, la mesure de la référence : de quoi loger un titre en grand, les deux mondes à sa droite, et des noms de session qui ne se coupent plus au troisième mot. */ --crea-sb-largeur: 300px; /* Le rail de la barre Créative — une barre posée, mais de 84 px. Elle était écrite en clair à son seul point d'usage, et la feuille décalait les onglets comme si elle en faisait 264 : 80 px d'écart avec la barre de questions. Un jeton pour que l'emprise se calcule sur la vraie largeur. */ --crea-sb-largeur-rail: 84px; /* La marge qui DÉTACHE la barre survolée des bords de la fenêtre. C'est elle * qui la fait lire comme une carte posée par-dessus la page, et non comme la * barre ordinaire qui vient de s'ouvrir. Voir .sidebar-carte. */ --crea-sb-marge: 12px; /* CE QUI L'EMPÊCHE DE DEVENIR UNE COLONNE. * * « Tu l'as fait trop long. Le but de cette barre-là, c'est qu'elle est * COURTE, et que tout le reste à l'intérieur d'elle est scrollable. » * * Mesuré avant correction : 876 px de haut sur une fenêtre de 900. D'un bord * à l'autre — c'est-à-dire exactement la barre ordinaire, avec des coins * arrondis. Une carte qui occupe toute la hauteur ne se lit plus comme une * carte posée par-dessus la page : elle se lit comme la page. * * Ce nombre-ci est un CHOIX, pas une mesure — d'où la variable : il se * change ici, en un endroit, sans toucher au rendu. Le plafond réel est le * plus petit des deux (voir cadreDeLaCarteFlottante) : sur une petite * fenêtre c'est la fenêtre qui commande, sur une grande c'est ce chiffre. */ --crea-sb-survol-hauteur: 620px; /* ET SON MOUVEMENT, pour la même raison. Les onglets de la barre de fenêtre doivent partir en même temps que la colonne et arriver en même temps qu'elle : sans ça ils sautent à leur place finale pendant que la conversation glisse encore — mesuré, 43 px d'écart au milieu du geste. Deux objets qui doivent bouger ensemble ne peuvent pas avoir chacun leur durée. */ --crea-sb-duree: .32s; --crea-sb-courbe: cubic-bezier(.16,1,.3,1); /* LE TRAIT QUI SÉPARE LA BARRE DU FIL — plus marqué que --border, et pour une raison mesurable : --border contre le fond de l'application donne un contraste de 1,24 en thème clair. C'est assez pour souligner une carte qui a déjà sa couleur propre ; ce n'est pas assez quand le trait porte SEUL la séparation, ce qui est le cas depuis que la barre a pris la couleur du fil. Une variable à part, parce que --border sert partout ailleurs et n'a aucune raison de s'assombrir avec lui. */ --sidebar-trait: #D5D5D5; /* Anneau de découpe des pastilles de compteur (notifications, onglets Mode). Doit toujours valoir le fond RÉEL derrière la pastille, sinon on voit un halo. Les groupes de boutons du header n'ayant plus de fond propre, c'est celui de la page — d'où une variable qui s'hérite : chaque coquille qui change de fond la redéfinit (cf. .studio-shell). */ --badge-ring: var(--bg-primary); --bg-tertiary: #E7E7E7; --bg-glass: rgba(252,252,252,0.9); --bg-glass-hov: rgba(246,246,246,0.95); --bg-input: #FFFFFF; --bg-elevated: #FFFFFF; --bg-hover: rgba(0,0,0,0.045); --border: #E4E4E4; --border-dim: #EFEFEF; --border-hov: #D4D4D4; --border-focus: rgba(16,163,127,0.4); --accent-dim: rgba(16,163,127,0.55); --t-primary: #0d0d0d; --t-secondary: #171717; --t-muted: #404040; --t-dim: #737373; --t-faint: #a3a3a3; --accent: #10a37f; --accent-l: #1db992; --accent-ll: #34c4a0; --accent-glow: rgba(16,163,127,0.18); --accent-bg: rgba(16,163,127,0.07); /* ═══════════════════════════════════════════════════════════════════════ * LES COULEURS QUI DISENT QUELQUE CHOSE — ET QUI SE LISENT * * ── CE QUI A ÉTÉ MESURÉ ──────────────────────────────────────────────── * * Le contraste de chaque couleur sémantique, calculé sur les deux fonds * réels de CRÉA (#FCFCFC en clair, #0a0a0a en sombre). Le seuil de lecture * d'un texte est 4,5 pour 1. * * --success #22c55e sur clair : 2,22 — À PEINE VISIBLE * --warn #f59e0b sur clair : 2,09 — PIRE * --danger #ef4444 sur clair : 3,67 — insuffisant * --accent #10a37f sur clair : 3,12 — insuffisant pour du texte * * Un mot « Succès » écrit en vert sur le fond clair était donc à la limite * de l'invisible. Ce n'est pas une affaire de goût : c'est une affaire de * lecture, et ça se calcule. * * ── LA CAUSE, ET ELLE EST STRUCTURELLE ───────────────────────────────── * * UNE SEULE VALEUR PAR INTENTION NE PEUT PAS TENIR DANS DEUX THÈMES. Ce qui * se détache sur du noir se dissout sur du blanc — c'est de la physique, pas * un réglage. Ces trois jetons étaient déclarés une fois, jamais redéfinis * en sombre : il fallait donc qu'une seule valeur serve les deux, et aucune * ne le peut. * * Même correction que pour l'élévation : la valeur claire ici, la valeur * sombre dans `html.dark`. Le nom ne bouge pas, ce qu'il vaut change. * * ── DEUX RÔLES, DEUX JETONS ──────────────────────────────────────────── * * `--X` est la couleur du TEXTE et du TRAIT : elle doit se lire, donc elle * est foncée en clair et vive en sombre. `--X-fond` est le fond teinté : * il n'a pas à se lire, il a à rester discret — d'où l'opacité faible et la * teinte vive dans les deux thèmes. * * Les confondre était l'autre moitié du défaut : un même jeton servait de * texte ici et de fond là, et satisfaire l'un condamnait l'autre. */ --danger: #c81e1e; /* 5,59 sur le fond primaire, 5,31 sur le secondaire */ --success: #15803d; /* 4,89 */ --warn: #b45309; /* 4,89 */ --info: #2563eb; /* 5,04 */ --accent-texte: #0a7558; /* 5,53 — le vert CRÉA, assez foncé pour se lire */ --danger-fond: rgba(200,30,30,.08); --success-fond: rgba(21,128,61,.08); --warn-fond: rgba(180,83,9,.08); --info-fond: rgba(37,99,235,.08); --danger-trait: rgba(200,30,30,.28); --success-trait: rgba(21,128,61,.28); --warn-trait: rgba(180,83,9,.28); --info-trait: rgba(37,99,235,.28); /* ═══════════════════════════════════════════════════════════════════════ * LA FORME — CINQ PALIERS, ET UN ROND * * Relevé : 524 rayons dans l'interface, 55 VALEURS DISTINCTES. Les quatre * jetons ci-dessous existaient déjà et servaient QUATRE fois. * * Ce que la dispersion cachait, en regardant ce que chaque valeur habille : * * 8px, 9px, 10px la MÊME famille — petits boutons, vignettes, puces. * Trois valeurs pour un seul geste, à un pixel près. * 14px, 16px les conteneurs moyens — panneau, barre, carte. * 50% un CERCLE. Ce n'est pas une taille, c'est une nature : * il reste tel quel. * 999px, 9999px, une PILULE. Trois écritures du même effet — le rayon * 99px dépasse la demi-hauteur, donc les trois donnent * exactement le même dessin. * 0 un angle vif, choisi. Il reste. * * UN RAYON SE LIT PAR RAPPORT À LA TAILLE DE L'OBJET : 8px sur un bouton de * 24px est un galet, le même sur un panneau de 400px est presque un angle. * C'est pour ça qu'une échelle de forme suit les FAMILLES d'objets, et pas * une progression abstraite. * * On garde le vocabulaire existant plutôt que d'en poser un second à côté : * quatre usages en dépendent déjà, et deux vocabulaires pour une dimension, * c'est la dispersion qui recommence sous un autre nom. */ --radius-xs: 4px; /* puce, pastille, marqueur */ --radius-sm: 8px; /* le courant : bouton, vignette, petit champ */ --radius: 12px; /* champ, carte compacte */ --radius-lg: 16px; /* panneau, carte, image dans une réponse */ --radius-xl: 20px; /* grande surface, feuille, boîte de dialogue */ --radius-rond: 999px; /* pilule — une nature, pas une taille */ /* L'écart qui détache les panneaux de la tablette droite de leurs bords. C'est une DISTANCE, pas un rayon : elle se lit avec --radius (12 px) que ces cartes portent. 10 px suffit à faire exister la courbe sans que la colonne principale perde une bande visible. */ --carte-marge: 10px; --rail-bg: #F6F6F6; --rail-border: #E4E4E4; --msg-user-bg: #F1F1F1; /* ═══════════════════════════════════════════════════════════════════════ * L'ÉLÉVATION — CINQ NIVEAUX, ET PLUS QUATRE-VINGT-ONZE OMBRES * * Relevé avant d'écrire : quatre-vingt-onze ombres distinctes dans * `app.js` + `styles.css`, dont TRENTE-SEPT de la même famille — « une * surface au-dessus des autres, en noir ». * * Trente-sept, ce n'était pas trente-sept intentions. Deux causes : * * 1. la même élévation écrite UNE FOIS POUR LE CLAIR et une fois pour le * sombre — une ombre à .08 est invisible sur #1E1E1E, il en fallait * une à .45. Deux valeurs pour une seule idée, et rien pour les relier. * 2. la dérive : .10 ici, .12 là, 28px un jour, 32px le lendemain. * * Un jeton qui se REDÉFINIT PAR THÈME supprime la première cause d'un coup. * L'échelle supprime la seconde. * * DEUX COUCHES PAR NIVEAU, ET C'EST CE QUI FAIT LE MODERNE : une ombre de * CONTACT, courte et serrée, qui pose l'objet sur la page ; et une ombre * AMBIANTE, large et très diluée, qui donne la profondeur. Une seule couche * donne toujours l'un ou l'autre — soit un objet collé, soit un objet qui * flotte sans être posé. * * Le décalage négatif (« -6px ») resserre l'ambiante sous l'objet au lieu de * la laisser déborder en halo. C'est la différence entre une ombre portée et * une auréole. * ═══════════════════════════════════════════════════════════════════════ */ --ombre-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06); --ombre-2: 0 2px 4px rgba(0,0,0,.04), 0 6px 16px -6px rgba(0,0,0,.10); --ombre-3: 0 4px 8px -2px rgba(0,0,0,.05), 0 12px 28px -8px rgba(0,0,0,.12); --ombre-4: 0 8px 16px -4px rgba(0,0,0,.06), 0 24px 48px -12px rgba(0,0,0,.16); --ombre-5: 0 12px 24px -6px rgba(0,0,0,.08), 0 40px 80px -20px rgba(0,0,0,.22); /* ═══════════════════════════════════════════════════════════════════════ * LE MOUVEMENT — TROIS DURÉES, ET PLUS SOIXANTE-SEIZE * * Soixante-seize transitions distinctes, dont cinq paires qui sont la MÊME * durée écrite de deux façons (« .2s » et « 0.2s »). Deux écrans qui * répondent au doigt à des vitesses différentes se lisent comme deux * applications — c'est ce qu'on ressent avant de savoir le nommer. * * Trois durées suffisent, et le choix se fait sur la DISTANCE parcourue : * une couleur qui change ne bouge pas, elle doit être immédiate ; un panneau * qui traverse l'écran a besoin qu'on suive son trajet. * * La courbe est la même partout : départ franc, arrivée qui se pose. C'est * elle, plus que la durée, qui fait la différence entre « ça bouge » et * « c'est vivant » — une transition linéaire s'arrête net, comme un objet * qui n'aurait pas de masse. * ═══════════════════════════════════════════════════════════════════════ */ --duree-1: 120ms; /* couleur, opacité — ce qui ne se déplace pas */ --duree-2: 200ms; /* survol, apparition d'un petit élément */ --duree-3: 320ms; /* un panneau, un tiroir — ce qui traverse */ /* ═══════════════════════════════════════════════════════════════════════ * LA TYPOGRAPHIE — SEIZE MARCHES, ET PLUS TRENTE-DEUX TAILLES * * L'échelle ne vient pas d'une théorie : elle vient du RELEVÉ. La * distribution des trente-deux tailles montre six pics nets — * 13px (151 fois), 11px (112), 12px (69), 10px (35), 14px (34), 15px (27) — * et, tout autour, soixante-douze demi-pixels : 9.5, 10.5, 11.5, 12.5, * 13.5, 14.5, 15.5. * * Un demi-pixel n'est jamais une décision. C'est la trace d'un ajustement à * l'œil, sur un écran, un jour — et personne ne l'a jamais remis en question * parce qu'il ne se voit pas isolément. Il se voit en MASSE : c'est ce qui * fait qu'un texte de 12.5 à côté d'un texte de 13 donne une impression de * flou sans qu'on sache la nommer. * * L'échelle est donc le vocabulaire réel de l'application, NETTOYÉ : chaque * marche existe déjà et porte du poids ; ce qui disparaît, c'est le bruit * entre les marches. Aucun déplacement ne dépasse deux pixels. * * LES TAILLES D'AFFICHE GARDENT LEURS MARCHES (32, 36, 44, 48). Elles * apparaissent une fois par écran : les rapprocher ne gagne aucune cohérence * — personne ne voit deux titres de page côte à côte — et changerait la * proportion entière de la page. * * CE QUE CETTE ÉCHELLE NE COMMANDE PAS : la taille de lecture des messages. * Elle a son propre réglage (`--msg-font-size`, 13 à 18) que la personne * choisit. Poser une marche par-dessus lui retirerait son choix. * ═══════════════════════════════════════════════════════════════════════ */ --texte-1: max(0.625rem, 10px); /* mention, étiquette minuscule */ --texte-2: max(0.6875rem, 11px); /* petit — deuxième plus employé */ --texte-3: max(0.75rem, 12px); --texte-4: max(0.8125rem, 13px); /* le courant : une déclaration sur cinq */ --texte-5: max(0.875rem, 14px); --texte-6: max(0.9375rem, 15px); --texte-7: max(1rem, 16px); /* accroche */ --texte-8: max(1.125rem, 18px); --texte-9: max(1.25rem, 20px); --texte-10: max(1.375rem, 22px); --texte-11: max(1.625rem, 26px); --texte-12: max(1.75rem, 28px); --texte-13: max(2rem, 32px); /* à partir d'ici : de l'affiche, une par écran */ --texte-14: max(2.25rem, 36px); --texte-15: max(2.75rem, 44px); --texte-16: max(3rem, 48px); /* ═══════════════════════════════════════════════════════════════════════ * L'ESPACE — LE RYTHME DE DEUX, QUI EXISTAIT DÉJÀ SANS ÊTRE DIT * * Relevé sur les propriétés d'espacement (padding, margin, gap, y compris * les raccourcis) : quarante-deux valeurs distinctes, mille deux cents * occurrences. Et une évidence dans la distribution — * * les valeurs PAIRES portent 880 occurrences * les IMPAIRES en portent 210 * * L'application avait donc déjà son rythme : DEUX. Personne ne l'avait * écrit, et c'est pour ça qu'il fuyait — un 9 par-ci, un 11 par-là, chacun * posé une fois pour régler un cas particulier et jamais revu. * * L'échelle ne décide donc rien de neuf : elle NOMME ce qui était là, et * absorbe les deux cent dix exceptions. Chaque déplacement vaut un pixel. * * ON ARRONDIT VERS LE HAUT, et c'est un choix : dans une interface dense, un * texte qui frôle son bord se voit tout de suite, une boîte un pixel plus * large ne se voit pas. Le risque n'est pas symétrique. * * CE QUI RESTE ÉCRIT À LA MAIN, ET POURQUOI : * * les marges NÉGATIVES elles servent à faire chevaucher deux éléments, * à un pixel près et volontairement. Les arrondir * défait le chevauchement qu'elles existent pour * créer. * au-delà de 20px ce ne sont plus des respirations mais des * dimensions (une gouttière de page, un retrait de * colonne). Elles sont rares et chacune répond à * une contrainte précise. * ═══════════════════════════════════════════════════════════════════════ */ --espace-1: max(0.125rem, 2px); --espace-2: max(0.25rem, 4px); --espace-3: max(0.375rem, 6px); --espace-4: max(0.5rem, 8px); /* le plus employé : 213 fois */ --espace-5: max(0.625rem, 10px); --espace-6: max(0.75rem, 12px); --espace-7: max(0.875rem, 14px); --espace-8: max(1rem, 16px); --espace-9: max(1.125rem, 18px); --espace-10: max(1.25rem, 20px); --courbe: cubic-bezier(.2, .8, .2, 1); } html.dark { /* Sombre : à peine tiédi, jamais brun. Même règle qu'en clair — les fonds bougent d'un cheveu, l'encre reste neutre. */ --bg-primary: #1E1E1E; --bg-secondary: #232323; /* En sombre, le terminal descend d'un cran sous le fond secondaire — même geste qu'en clair, dans l'autre sens. */ --bg-terminal: #1A1A1A; --bg-tertiary: #343434; --bg-glass: rgba(30,30,30,0.9); --bg-glass-hov: rgba(35,35,35,0.9); --bg-input: #232323; --bg-elevated: #303030; --bg-hover: rgba(255,255,255,0.06); --border: #404040; --border-dim: #313131; --border-hov: #525252; --border-focus: rgba(16,163,127,0.5); --accent-dim: rgba(16,163,127,0.55); --t-primary: #ececec; --t-secondary: #d1d1d1; --t-muted: #a8a8a8; --t-dim: #8a8a8a; --t-faint: #555555; --accent: #10a37f; --accent-l: #1db992; --accent-ll: #34c4a0; --accent-glow: rgba(16,163,127,0.2); /* LES MÊMES NOMS, DES VALEURS QUI SE LISENT SUR CE FOND-CI. Mesuré sur les DEUX surfaces sombres (#1E1E1E et #232323, la pire des deux) : #ef4444 tombe à 4,18 sur la seconde — sous le seuil de lecture. On monte donc d'un cran en clarté, là où le clair descendait d'un cran. */ --danger: #f87171; /* 6,03 / 5,68 */ --success: #22c55e; /* 7,32 / 6,90 */ --warn: #f59e0b; /* 7,76 / 7,32 */ --info: #60a5fa; /* 6,56 / 6,18 */ --accent-texte: #1db992; /* 6,67 / 6,29 */ --danger-fond: rgba(248,113,113,.12); --success-fond: rgba(34,197,94,.12); --warn-fond: rgba(245,158,11,.12); --info-fond: rgba(96,165,250,.12); --danger-trait: rgba(248,113,113,.32); --success-trait: rgba(34,197,94,.32); --warn-trait: rgba(245,158,11,.32); --info-trait: rgba(96,165,250,.32); --accent-bg: rgba(16,163,127,0.1); --rail-bg: #1A1A1A; --sidebar-trait: #4A4A4A; --rail-border: #313131; --msg-user-bg: #292929; /* L'ÉLÉVATION EN SOMBRE — MÊME GÉOMÉTRIE, ENCRE PLUS DENSE. * * Une ombre à .06 sur un fond #1E1E1E n'existe pas : il n'y a pas assez * d'écart pour qu'un œil la voie. C'est POUR ÇA qu'il y avait deux séries * d'ombres dans ce dépôt, et pas parce que quelqu'un avait deux intentions. * * Les distances ne bougent pas — un objet ne monte pas plus haut parce qu'il * fait sombre. Seule l'encre se densifie. */ --ombre-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.24); --ombre-2: 0 2px 4px rgba(0,0,0,.30), 0 6px 16px -6px rgba(0,0,0,.40); --ombre-3: 0 4px 8px -2px rgba(0,0,0,.34), 0 12px 28px -8px rgba(0,0,0,.46); --ombre-4: 0 8px 16px -4px rgba(0,0,0,.38), 0 24px 48px -12px rgba(0,0,0,.55); --ombre-5: 0 12px 24px -6px rgba(0,0,0,.44), 0 40px 80px -20px rgba(0,0,0,.65); } /* --- Reset / Global --- */ *, *::before, *::after { box-sizing: border-box; } * { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,0.25) transparent; } *::-webkit-scrollbar { width: 5px; height: 5px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.25); border-radius: var(--radius); } *::-webkit-scrollbar-thumb:hover { background: var(--crea-universe, rgba(100,116,139,0.45)); } ::selection { background: var(--accent-glow); color: var(--t-primary); } body { background: var(--bg-primary); color: var(--t-primary); transition: background var(--duree-2), color var(--duree-2) var(--courbe); } /* --- Glass / Surface --- */ .glass { background: var(--bg-glass); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--border); /* LA COURBE MANQUAIT SUR LA PREMIÈRE PROPRIÉTÉ. `background var(--duree-2)` sans courbe tombe sur `ease` par défaut, pas sur la nôtre : le fond et la bordure de la même surface partaient ensemble et n'arrivaient pas ensemble. L'idiome majoritaire ici (36 usages) dit les deux d'un mot. */ transition: all var(--duree-2) var(--courbe); } .glass:hover { border-color: var(--border-hov); } .surface { background: var(--bg-secondary); border: 1px solid var(--border); } /* Gradient text */ .gradient-text { background: linear-gradient(130deg, var(--accent) 0%, var(--accent-ll) 60%, var(--accent-l) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* --- Animations --- */ @keyframes fadeInUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes slideLeft { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } } @keyframes slideRight { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } } @keyframes slideUp { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:translateY(0); } } @keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } } @keyframes pulseDot { 0%,100%{opacity:.3;}50%{opacity:1;} } @keyframes blink { 50%{opacity:0;} } @keyframes scaleIn { from{opacity:0;transform:scale(.94);} to{opacity:1;transform:scale(1);} } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} } @keyframes gradMove { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} } /* voicePulse et glow : opacity au lieu de box-shadow → composite-only, pas de repaint */ @keyframes voicePulse { 0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.08);} } @keyframes glow { 0%,100%{opacity:.6;}50%{opacity:1;} } @keyframes bounceIn { 0%{transform:scale(.3);opacity:0;} 50%{transform:scale(1.06);} 70%{transform:scale(.97);} 100%{transform:scale(1);opacity:1;} } @keyframes ripple { to { transform:scale(4); opacity:0; } } @keyframes skeletonPulse { 0%,100%{opacity:.6;} 50%{opacity:.3;} } .anim-fade-up { animation: fadeInUp .35s ease-out both; } .anim-fade { animation: fadeIn .25s ease-out both; } /* Tiroir de travail : supprimé — voir renderReflexion dans src/app.js. */ /* ── Step cards — expand/collapse chevron ─────────────────── */ details[open] > summary .step-chevron { transform: rotate(90deg); } .step-chevron { transition: transform var(--duree-2) var(--courbe); } details > summary::-webkit-details-marker { display: none; } details > summary::marker { display: none; } .crea-step-card { border-radius: 0; } .crea-step-card:last-child { border-bottom: none !important; } .anim-slide-l { animation: slideLeft .25s ease-out both; } .anim-slide-r { animation: slideRight .25s ease-out both; } .anim-slide-up { animation: slideUp .3s cubic-bezier(.16,1,.3,1) both; } .anim-slide-down { animation: slideDown .2s ease-out both; } .anim-scale-in { animation: scaleIn .2s cubic-bezier(.16,1,.3,1) both; } .anim-bounce-in { animation: bounceIn .45s ease-out both; } .anim-spin { animation: spin 1s linear infinite; } .anim-glow { animation: glow 2s ease-in-out infinite; } /* ── ON N'ENTRE PAS DEUX FOIS DANS LE MÊME ÉCRAN ────────────────────────── * Toutes les animations ci-dessus sont des ENTRÉES : elles font passer un * élément de opacity:0 / translate / scale à son état normal. Une animation CSS * démarre quand l'élément entre dans le document — or render() fait * `app.innerHTML = …`, donc TOUS les nœuds sont recréés à chaque rendu, et * toutes ces entrées rejouent. Pendant que le modèle écrit, c'est plusieurs fois * par seconde : la barre latérale, les panneaux et les boutons repartent sans * cesse de scale(.96) et d'opacité nulle. C'est « ça tremble », « les boutons * bougent », « ça se fait en deux temps ». * * `sans-entrees` est posée sur #app quand le rendu redessine le MÊME écran * (voir marquerEntrees dans app.js). `entree-voulue` est l'exception : ce que le * rendu déclare comme réellement nouveau (un message qui arrive), via animEntree. * * Les animations en boucle — anim-spin, anim-glow, typing-dot, pulse — ne sont * pas des entrées et ne sont pas touchées : un chargement doit continuer de * tourner pendant que le modèle écrit. */ .sans-entrees .anim-fade-up:not(.entree-voulue), .sans-entrees .anim-fade:not(.entree-voulue), .sans-entrees .anim-slide-l:not(.entree-voulue), .sans-entrees .anim-slide-r:not(.entree-voulue), .sans-entrees .anim-slide-up:not(.entree-voulue), .sans-entrees .anim-slide-down:not(.entree-voulue), .sans-entrees .anim-slide-in-right:not(.entree-voulue), .sans-entrees .anim-scale-in:not(.entree-voulue), .sans-entrees .anim-bounce-in:not(.entree-voulue), .sans-entrees .dropdown-enter:not(.entree-voulue) { animation: none !important; } /* Typing dots */ .typing-dot { animation: pulseDot 1.4s ease-in-out infinite; } .typing-dot:nth-child(2) { animation-delay:.2s; } .typing-dot:nth-child(3) { animation-delay:.4s; } /* Thinking bar */ .thinking-bar { background: linear-gradient(90deg, transparent, var(--accent-glow), transparent); background-size: 200% 100%; animation: shimmer 1.8s linear infinite; } /* Voice pulse */ .voice-pulse { animation: voicePulse 1.5s ease-in-out infinite; } /* Welcome gradient bg */ .gradient-bg { background: linear-gradient(-45deg, #060912, #0f172a, #090d1f, #0c1029); background-size: 400% 400%; animation: gradMove 18s ease infinite; } html.light .gradient-bg { background: linear-gradient(-45deg, #f8fafc, #eef2ff, #f0f4ff, #e8edfe); background-size: 400% 400%; } /* --- Markdown content --- */ /* ══ LA TAILLE DU TEXTE ET LA POLICE DE LA DISCUSSION ══════════════════════ * * « Il y a plein de choses qui manquent » — deux d'entre elles sont ici. * * LA TAILLE JOUE SUR LA RACINE, pas sur chaque règle. Toute l'échelle * typographique est écrite en `max(X rem, Y px)` : changer la taille du `html` * déplace la part en `rem` et l'application entière suit, d'un coup, sans * qu'aucune règle n'ait à connaître ce réglage. * * LE PLANCHER EN PIXELS RESTE, ET C'EST VOULU. « Plus petit » resserre ce qui * est déjà grand mais ne descend jamais sous le plancher de chaque niveau : * on peut tasser une interface, on ne doit pas pouvoir la rendre illisible. * * LA POLICE NE CHANGE QUE DANS LA DISCUSSION. Elle ne touche ni les menus, ni * les réglages, ni les boutons : quelqu'un qui choisit une serif pour lire des * réponses ne demande pas à ce que toute l'application change d'habit. Le code * garde sa chasse fixe dans tous les cas — une police proportionnelle * désaligne l'indentation, et du code désaligné est du code faux à lire. */ html.crea-texte-petit { font-size: 93.75%; } html.crea-texte-grand { font-size: 112.5%; } html.crea-texte-tres-grand { font-size: 125%; } .msg-content { font-family: var(--police-discussion, inherit); } .msg-content code, .msg-content pre, .msg-content pre * { font-family: 'JetBrains Mono', ui-monospace, monospace; } .msg-content { overflow-wrap: break-word; word-break: break-word; min-width: 0; } .msg-content p { margin-bottom:.6rem; line-height:1.78; } .msg-content p:last-child { margin-bottom:0; } .msg-content ul,.msg-content ol { margin-bottom:.6rem; padding-left:1.5rem; } .msg-content ul { list-style: disc; } .msg-content ol { list-style: decimal; } .msg-content li { margin-bottom:.25rem; line-height:1.65; } .msg-content li > ul, .msg-content li > ol { margin-top:.2rem; margin-bottom:0; } .msg-content h1,.msg-content h2,.msg-content h3,.msg-content h4 { font-weight:600; margin:1rem 0 .4rem; color:var(--t-secondary); } .msg-content h1 { font-size:1.3rem; } .msg-content h2 { font-size:1.15rem; } .msg-content h3 { font-size:1.05rem; } .msg-content h4 { font-size:.95rem; } .msg-content code:not(pre code) { background: rgba(92,124,250,.1); color: var(--accent-ll); padding:.12rem .38rem; border-radius: var(--radius-xs); font-size:.84em; font-family:'JetBrains Mono',monospace; border:1px solid rgba(92,124,250,.12); } html.light .msg-content code:not(pre code) { background:rgba(76,110,245,.08); color:#4263eb; } .msg-content pre { margin-bottom:.75rem; border-radius:var(--radius); overflow-x:auto; } .msg-content blockquote { border-left:3px solid var(--accent); padding-left:1rem; margin-bottom:.75rem; color:var(--t-muted); font-style:italic; background: var(--accent-bg); padding:.5rem 1rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0; } .msg-content img { max-width:min(100%,400px); border-radius: var(--radius-lg); margin:.5rem 0; border:1px solid var(--border); } /* --- Responsive mobile --- */ .md-hide-desktop { display:none; } @media (max-width:767px) { .md-hide-desktop { display:flex; } /* burger + bouton onglets visibles sur mobile */ .banner-new { font-size:var(--texte-2); padding:var(--espace-3) var(--espace-5); } /* bannière compacte */ .banner-new span:nth-child(2) { display:none; } /* cacher texte long, garder badge */ #messages-container .mx-auto { padding-left:.75rem; padding-right:.75rem; } #crea-tabbar { display:none; } /* barre d'onglets navigateur masquée : gérée par le bouton à côté du menu */ } /* Modale Réglages — plein écran sur mobile, sidebar centrée sur desktop */ .settings-modal { height: 100dvh; max-height: 100dvh; border-radius: 0 !important; } /* LA MODALE DES RÉGLAGES EST UNE PAGE, PAS UNE ALERTE — elle a donc la taille d'une page. 620px de haut la rabotaient à 69% d'un écran de 900 : les cinq groupes du rail n'y tenaient pas, le dernier était coupé, et le panneau de droite ne faisait que 576px — les descriptions y revenaient à la ligne au troisième mot. Mesuré sur la référence : 84% de la hauteur de la fenêtre. */ @media (min-width: 640px) { .settings-modal { height: 86vh; max-height: 820px; border-radius: var(--radius-lg) !important; } } /* LE VOILE COUVRE TOUT, ET IL FLOUTE POUR DE BON. Il couvre déjà l'en-tête de l'application (vérifié), mais à 4px on lisait encore la conversation derrière et l'œil y retournait : le flou n'est pas une décoration, c'est ce qui dit que le reste attend. La saturation baissée enlève au fond ses couleurs vives, qui traversent le flou intactes. */ #settings-overlay { backdrop-filter: blur(14px) saturate(0.9); -webkit-backdrop-filter: blur(14px) saturate(0.9); } /* UNE SEULE MESURE POUR TOUT LE PANNEAU. Chaque onglet portait la sienne — max-w-lg (512px) sur Général, max-w-2xl (672) ailleurs — donc la largeur du texte changeait d'un onglet à l'autre, et sur le panneau élargi il restait jusqu'à 300px de vide à droite. La mesure appartient au panneau : c'est lui qui sait de quelle place il dispose, pas chacun de ses contenus. Bornée aux enfants DIRECTS : un formulaire imbriqué garde le droit d'être étroit là où c'est lui qui le décide. */ #settings-tab-content > * { max-width: none; } /* LE PANNEAU DES ESPACES SORT SUR LE CÔTÉ DU BLOC COMPTE, AU SURVOL. Il est dans le DOM en permanence et c'est `:hover` qui le montre : un survol qui déclencherait un rendu remplacerait le nœud sous le curseur, le navigateur tirerait un `mouseleave` sur l'élément détruit, et le panneau se refermerait tout seul — mesuré, il clignotait. Le délai à l'apparition évite qu'il jaillisse quand on ne fait que passer au dessus pour atteindre autre chose. */ /* Le panneau des espaces se rend à la RACINE (voir renderEspacesRoot) : posé dans le pied de la barre latérale, il se faisait rogner — la barre contient jusqu'aux éléments en position:fixe. Il n'a donc plus de règle ici. */ /* Onglets : border-bottom sur mobile (tabs en haut), border-right sur desktop (sidebar gauche) */ .settings-tabs { border-top: none; border-right: none; border-bottom: 1px solid var(--border); } @media (min-width: 640px) { .settings-tabs { border-bottom: none; border-right: 1px solid var(--border); } } /* Tableaux : le style complet est plus bas (« === Tableaux === »), avec la carte .md-table-card qui porte le défilement horizontal. Les anciennes règles qui vivaient ici — display:block, white-space:nowrap, bordure sur chaque cellule, en-tête vert accentué — ont été retirées : `display:block` neutralisait la largeur du tableau (colonnes tassées à gauche) et un quadrillage complet alourdissait la lecture. */ .msg-content a { color:var(--accent-l); text-decoration:underline; text-underline-offset:2px; } .msg-content a:hover { color:var(--accent-ll); } .msg-content hr { border:none; border-top:1px solid var(--border); margin:1rem 0; } .msg-content strong { color:var(--t-secondary); font-weight:600; } .msg-content em { color:var(--t-muted); } .msg-content .katex-display { margin:.75rem 0; overflow-x:auto; } .msg-content .katex { font-size:1.05em; } .mermaid-container { margin:.75rem 0; border-radius:var(--radius); overflow:hidden; background:var(--bg-tertiary); padding:1.25rem; border:1px solid var(--border); } .mermaid-container svg { max-width:100%; } /* Orbe live mini — bouton flottant au-dessus de la barre de saisie */ .live-orbe { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#f43f5e,#ec4899); display:flex; align-items:center; justify-content:center; color:white; border:none; cursor:pointer; box-shadow:0 4px 16px rgba(244,63,94,.35); transition: transform var(--duree-2) var(--courbe), box-shadow var(--duree-2) var(--courbe); } .live-orbe:hover { transform:scale(1.08); } .live-orbe:active { transform:scale(0.95); } @keyframes orbe-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(244,63,94,.5), 0 4px 16px rgba(244,63,94,.35); } 50% { box-shadow:0 0 0 10px rgba(244,63,94,0), 0 4px 16px rgba(244,63,94,.35); } } @keyframes orbe-breathe { 0%,100% { transform:scale(1); box-shadow:0 4px 16px rgba(244,63,94,.35); } 50% { transform:scale(1.12); box-shadow:0 8px 28px rgba(244,63,94,.55); } } .live-orbe-listening { animation:orbe-pulse 1.2s ease-in-out infinite; } .live-orbe-speaking { animation:orbe-breathe 1.8s ease-in-out infinite; } /* ── NAVIGATEUR DE CONVERSATION ───────────────────────────────────────────── DEUX CHOSES DISTINCTES, JAMAIS MÉLANGÉES. au repos un peigne de traits serrés, et rien d'autre au survol le peigne s'efface, LE BLOC apparaît à sa place Les traits ne « deviennent » pas les lignes du bloc — c'était mon erreur précédente, et elle donnait une chose hybride qui ne ressemblait ni à l'un ni à l'autre. Le peigne est un repère ; le bloc est une liste. L'un laisse la place à l'autre. LA DENSITÉ SE LIT, ELLE NE SE DEVINE PAS. Deux erreurs successives, dans les deux sens : d'abord des traits si espacés qu'ils formaient une colonne de tirets sans rapport entre eux ; puis, en corrigeant, des traits si serrés qu'ils se fondaient en une barre pleine. Le bon réglage est celui où CHAQUE TRAIT SE LIT SÉPARÉMENT tout en formant un ensemble : l'écart doit dépasser l'épaisseur, sans quoi l'anticrénelage les soude. Deux pixels de trait, quatre d'écart — un pas de six. */ .chat-nav { /* AU MILIEU DU BORD, pas en haut. C'est la position de la référence, et elle a une raison : le peigne représente TOUTE la conversation, donc son centre tombe naturellement au centre de la hauteur, et le repère actif s'y déplace de haut en bas comme un curseur de règle. Accroché en haut, il avait l'air d'un menu oublié dans un coin. */ position:absolute; top:50%; transform:translateY(-50%); right:16px; z-index:20; display:flex; align-items:center; justify-content:flex-end; } /* PLACE DISPONIBLE. Deux choses décident, et elles seules : la largeur de l'espace de chat, et le fait qu'un panneau latéral soit ouvert — ouvert, il a déjà pris la largeur ; refermé, la place revient et le peigne avec elle. Posé par mesurerPlace() (app.js) après chaque rendu, donc à chaque ouverture ou fermeture de panneau, et sur redimensionnement de la fenêtre. */ .chat-nav[data-place="0"] { display:none; } /* SA VOIE, quand la marge naturelle ne suffit plus (fenêtre ancrée à la moitié ou au tiers de l'écran) : la colonne de lecture lui cède 44px à droite. Il est là sans rien recouvrir, au lieu de disparaître alors que la place existe. Classe posée par mesurerPlace() (app.js), jamais en dessous d'une largeur de lecture décente. */ #messages-container.crea-peigne-voie .chat-thread { padding-right:44px; } /* ── LE PEIGNE ─────────────────────────────────────────────────────────── */ .chat-nav-ticks { display:flex; flex-direction:column; align-items:flex-end; gap:var(--espace-3); padding:var(--espace-2) var(--espace-1); cursor:pointer; transition: opacity var(--duree-1) var(--courbe); } .chat-nav-tick { display:block; width:17px; height:2px; border-radius: var(--radius-xs); background:var(--t-faint); opacity:.5; transition: width var(--duree-2) var(--courbe), opacity var(--duree-2) var(--courbe), background-color var(--duree-2) var(--courbe); } /* Le message où l'on se trouve dans le fil : le repère qui donne son sens au peigne. Sans lui, ce ne sont que des tirets. IL S'ALLONGE **ET** IL BAT. Demandé en deux temps, et je n'avais retenu que le premier : « la partie clignote en vert, elle devient plus longue que les autres, c'est stylé ». L'allongement seul se voit quand on cherche le repère ; c'est le battement qui le fait trouver sans le chercher, dans une colonne de tirets tous identiques. Un battement, pas un clignotement : l'opacité descend et remonte, le trait ne disparaît jamais. Un repère qui s'éteint cesse d'être un repère la moitié du temps, et l'œil finit par le fuir. */ @keyframes chatNavPouls { 0%, 100% { opacity:1; box-shadow:0 0 0 0 transparent; } 50% { opacity:.55; box-shadow:0 0 7px 0 var(--accent-glow); } } .chat-nav-tick[data-actif="1"] { width:26px; opacity:1; background:var(--accent); animation:chatNavPouls 1.6s ease-in-out infinite; } /* Le mouvement perpétuel au bord de l'écran est exactement ce que ce réglage système demande de couper. L'allongement, lui, reste : il ne bouge pas. */ @media (prefers-reduced-motion: reduce) { .chat-nav-tick[data-actif="1"] { animation:none; } } /* PAS DE COULEUR PARTICULIÈRE POUR LES CHAPITRES. Un peigne dit une seule chose : où l'on est dans le fil. Y ajouter une seconde information par la couleur oblige à se demander ce que veut dire chaque teinte, pour un gain nul — le repère actif suffit, et lui seul mérite d'être distingué. */ /* ── LE BLOC ───────────────────────────────────────────────────────────── */ /* Il PREND LA PLACE du peigne — il ne se pose pas à côté. C'est ce qui faisait voir la conversation en double : la liste, et le peigne encore là. */ .chat-nav:hover .chat-nav-ticks { opacity:0; pointer-events:none; } .chat-nav-panel { position:absolute; top:0; right:0; display:none; flex-direction:column; width:250px; max-height:min(60vh,430px); overflow-y:auto; padding:var(--espace-3); border-radius: var(--radius-lg); background:var(--bg-primary); border:1px solid var(--border-hov); box-shadow: var(--ombre-4); scrollbar-width:thin; } .chat-nav:hover .chat-nav-panel { display:flex; } /* IL SUIT LA TAILLE DE L'APPLICATION. 250px sur une fenêtre ancrée au tiers ou à la moitié d'un écran couvriraient une part trop large de la colonne de lecture au survol. Le peigne au repos, lui, ne bouge pas : il tient dans la marge à toutes les tailles. */ @media (max-width: 1100px) { .chat-nav-panel { width:210px; } } @media (max-width: 900px) { .chat-nav-panel { width:180px; } } /* Fenêtre courte : le bloc ne doit pas dépasser en haut et en bas. */ @media (max-height: 600px) { .chat-nav-panel { max-height:min(72vh,300px); } } /* Les lignes sont SERRÉES. Une liste de repères se parcourt du regard : de l'air entre chaque ligne oblige à défiler pour voir ce qui tenait à l'écran. */ .chat-nav-ligne { display:block; width:100%; text-align:left; /* ARRONDI VERS LE BAS ICI, ET C'EST UNE EXCEPTION ASSUMÉE. Le rythme arrondit vers le haut partout ailleurs — un texte qui frôle son bord se voit, une boîte un pixel plus large ne se voit pas. Mais cette liste est une DENSITÉ : sa garde exige qu'on la parcoure du regard sans défiler, et un pixel de plus par ligne se paie sur toute la hauteur. La règle générale cède devant une exigence nommée, elle ne l'écrase pas. */ padding:var(--espace-2) var(--espace-4); border:none; background:none; cursor:pointer; font-size:var(--texte-3); line-height:16px; border-radius: var(--radius-sm); color:var(--t-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chat-nav-ligne:hover { background:var(--bg-secondary); } /* LÀ OÙ L'ON SE TROUVE EST TOUJOURS ENCADRÉ, même sans survol — c'est le seul repère du bloc, il ne doit pas dépendre d'un geste. Un fond plus soutenu que celui du survol : sinon la ligne survolée et la ligne courante se ressemblent, et l'on ne sait plus laquelle dit quoi. */ .chat-nav-ligne[data-actif="1"] { color:var(--t-primary); font-weight:600; background:var(--bg-tertiary, var(--border)); box-shadow:inset 2px 0 0 var(--accent); } /* Écrans tactiles : sans survol, un peigne ne s'ouvre jamais. La feuille de chapitres mobile joue ce rôle. */ @media (hover:none) { .chat-nav { display:none; } } /* --- Pouls des dossiers vivants (chantier 7) : vitesse/couleur = phase de vie --- */ .folder-pulse-dot { width:6px; height:6px; border-radius:50%; background:var(--folder-pulse-color, var(--accent)); flex-shrink:0; } @keyframes folderPulse { 0%,100% { opacity:.4; box-shadow:0 0 0 0 color-mix(in srgb, var(--folder-pulse-color, var(--accent)) 50%, transparent); } 50% { opacity:1; box-shadow:0 0 0 4px color-mix(in srgb, var(--folder-pulse-color, var(--accent)) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .folder-pulse-dot { animation:none !important; } } /* Flash quand on saute à un message via la minimap / les fichiers */ .jump-flash { animation:jumpFlash 1.2s ease; border-radius: var(--radius-lg); } @keyframes jumpFlash { 0%,100%{ background:transparent } 25%{ background:var(--accent-bg) } } /* Panneau latéral fichiers du chat */ .anim-slide-in-right { animation:slideInRight .22s ease; } @keyframes slideInRight { from{ transform:translateX(12px); opacity:0 } to{ transform:translateX(0); opacity:1 } } /* Suggestions de la barre de questions (type Google) */ /* Le panneau vit DANS la barre : il n'a plus ni fond ni ombre à lui, sinon on revoit deux boîtes. `overflow:hidden` avec le rayon du haut empêche la première ligne de déborder du coin arrondi de la barre. */ .input-suggest { max-height:240px; overflow:hidden auto; animation:suggIn .14s ease; } .input-suggest button + button { border-top:1px solid var(--border); } @keyframes suggIn { from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:translateY(0) } } /* Vue Réponse / Images / Liens / + — bandeau au-dessus de TOUT l'espace chat (façon Perplexity/Comet : clic sur un onglet remplace le fil entier par la vue agrégée, pas un bandeau répété dans chaque bulle de message). */ /* Réponse / Liens / Images / Actualités / Vidéos : les onglets se suffisent — celui qui est actif est déjà marqué. Le cadre gris qui les entourait ajoutait une boîte dans une boîte au milieu de l'en-tête, sans rien distinguer. */ /* ===================================================================== MODALES — FEUILLE DU BAS SUR TÉLÉPHONE Piloté par html.uie-tier-phone, la classe que le Rendering Engine de crea-uie.js pose déjà sur . Le moteur classait l'appareil depuis le début ; personne ne lisait sa décision. Ici, on la lit. Mesuré : sur les 40 fonds de modale de l'app, 3 seulement prévoyaient le téléphone. Les 37 autres sont des boîtes de dialogue de bureau — carte centrée, max-w-* qui ne mord jamais sur un écran de 440px, et max-h de 80 à 92vh. Sur un téléphone ça donne une dalle de ~93% de large sur jusqu'à 90% de haut : l'usager voit du plein écran là où il attend une carte. Une feuille ancrée en bas règle les trois problèmes d'un coup : elle se lit comme un bloc POSÉ sur l'écran et non comme une nouvelle page, elle laisse voir le contexte derrière, et ses actions tombent sous le pouce au lieu d'être en haut de l'écran. Les panneaux latéraux (justify-end sans items-*, comme #living-backdrop) ne portent PAS la classe : leur intention est différente. ===================================================================== */ html.uie-tier-phone .crea-modale { align-items: flex-end !important; justify-content: center !important; padding: 0 !important; } html.uie-tier-phone .crea-modale > * { width: 100% !important; max-width: 100% !important; /* Jamais toute la hauteur : la bande visible au-dessus est ce qui dit « ceci est un bloc, pas une page ». Et elle reste tapable pour fermer. */ max-height: 86vh !important; margin: 0 !important; border-radius: 22px 22px 0 0 !important; /* La barre d'accueil du système ne doit pas manger les boutons du bas. */ padding-bottom: var(--crea-composer-bottom, 6px) !important; animation: creaFeuilleMonte .22s cubic-bezier(.2,.8,.2,1) both; } @keyframes creaFeuilleMonte { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } } html.uie-motion-reduced .crea-modale > * { animation: none; } /* Bloc derrière chaque rangée de boutons de l'en-tête. Sans lui, les trois groupes (menu · onglets de vue · actions) se lisaient comme une seule rangée continue : les boutons du bord d'un groupe paraissaient collés à ceux du groupe voisin. Le fond dit où commence et où finit chaque rangée ; l'écart entre groupes fait le reste. */ .crea-barre-groupe { background:var(--bg-secondary); border-radius: var(--radius-lg); padding:var(--espace-1); } .chat-view-tabs-bar { display:flex; align-items:center; gap:var(--espace-1); padding:var(--espace-1); border-radius: var(--radius-lg); background:var(--bg-secondary); min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:none; } .chat-view-tabs-bar::-webkit-scrollbar { display:none; } /* Sur les fenêtres étroites, tous les onglets ne tiennent pas — dégradé en bord droit (plutôt qu'une coupe nette en plein mot) pour signaler qu'il y a plus de contenu à faire défiler horizontalement. Classe posée par JS (bindEvents) seulement quand il reste vraiment du contenu à droite — scrollWidth > clientWidth ET pas déjà scrollé jusqu'au bout. */ .chat-view-tabs-bar.is-overflowing-right { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 18px), transparent 100%); mask-image:linear-gradient(to right, #000 calc(100% - 18px), transparent 100%); } /* Le bandeau d'onglets reste visible sur les cinq onglets. Les règles .autohide / .peek / .chat-view-tabs-handle qui l'effaçaient sur Liens/Images ont été retirées avec le mode « navigateur plein écran » auquel elles servaient. */ /* Centré DANS sa colonne, plus dans le viewport. Les colonnes latérales étaient en 1fr chacune : la droite (136px de boutons) débordait de sa moitié et venait recouvrir le bandeau — mesuré à -15px sur 440, -55px sur 360. Les côtés prennent maintenant leur largeur réelle, le centre récupère le reste et défile s'il le faut. */ .chat-view-tabs-wrap { position:relative; min-width:0; display:flex; justify-content:center; } .chat-view-tab { display:inline-flex; align-items:center; justify-content:center; gap:var(--espace-3); font-size:var(--texte-3); font-weight:600; padding:var(--espace-3) var(--espace-5); border-radius: var(--radius-rond); border:1px solid transparent; background:transparent; color:var(--t-dim); cursor:pointer; transition: all var(--duree-2) var(--courbe); white-space:nowrap; } /* Taille pilotée par le Density Engine de l'UIE (src/crea-uie.js) — fallback 17px si le script n'a pas encore tourné (première peinture) ou est indisponible. */ .chat-view-tab svg { flex-shrink:0; width:var(--uie-icon-size, 17px); height:var(--uie-icon-size, 17px); } .chat-view-tab:hover { background:rgba(0,0,0,.05); color:var(--t-secondary); } /* L'ANNEAU VERT EST PARTI. « Quand on clique dessus la page va juste s'ouvrir, il n'y aura pas cet effet vert bizarre qui entoure. Il faut trouver un autre effet pour signaler. » Il y avait TROIS signaux empilés pour dire la même chose : un fond accentué, un contour accentué et un texte accentué. Le contour est ce qui « entoure », et le fond coloré le redouble. Un onglet actif se signale comme dans une vraie barre d'onglets : il RESSORT, en relief, sans se peindre. */ .chat-view-tab.on { background:var(--bg-primary); border-color:transparent; color:var(--t-primary); font-weight:700; box-shadow: var(--ombre-1); } /* Libellé texte à côté de l'icône (façon Réponse/Liens/Images/Actualités/Vidéos des moteurs de recherche IA) — masqué sur mobile pour rester compact, l'icône seule suffit là où la place manque. */ .chat-view-tab-label { display:inline; } .chat-view-tab-count { font-size:var(--texte-1); font-weight:700; opacity:.65; } @media (max-width: 560px) { .chat-view-tab-label { display:none; } .chat-view-tab { padding:var(--espace-4) var(--espace-5); } } .chat-view-empty { padding:32px var(--espace-8); text-align:center; color:var(--t-faint); font-size:var(--texte-4); } .chat-view-aggregate { padding:var(--espace-8); overflow-y:auto; height:100%; } .msg-tab-imggrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:var(--espace-5); } .msg-tab-img { display:block; position:relative; border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:1; } .msg-tab-img img { width:100%; height:100%; object-fit:cover; display:block; } .msg-tab-img-badge { position:absolute; left:6px; bottom:6px; max-width:calc(100% - 12px); padding:var(--espace-2) var(--espace-4); border-radius: var(--radius-rond); background:rgba(0,0,0,.55); backdrop-filter:blur(2px); color:#fff; font-size:var(--texte-1); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .msg-tab-linklist { display:flex; flex-direction:column; gap:var(--espace-4); max-width:640px; } /* ── Onglet Actualités ─────────────────────────────────────────────────────── */ .chat-view-news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); gap:var(--espace-6); } .chat-news-card { display:flex; flex-direction:column; border-radius: var(--radius); border:1px solid var(--border); background:var(--bg-secondary); overflow:hidden; text-decoration:none; color:inherit; transition: box-shadow var(--duree-2),border-color var(--duree-2) var(--courbe); } .chat-news-card:hover { border-color:var(--accent); box-shadow: var(--ombre-2); } .chat-news-thumb { width:100%; aspect-ratio:16/9; background:var(--bg-tertiary,#1a1a1a); overflow:hidden; } .chat-news-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .chat-news-no-thumb { background:linear-gradient(135deg,#1e1e2e,#2d2d44); } .chat-news-card-body { padding:var(--espace-6) var(--espace-7); display:flex; flex-direction:column; gap:var(--espace-3); } .chat-news-meta { display:flex; align-items:center; gap:var(--espace-3); } .chat-news-source { font-size:var(--texte-2); font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.4px; } .chat-news-date { font-size:var(--texte-2); color:var(--t-faint); } .chat-news-title { font-size:var(--texte-4); font-weight:600; color:var(--t-primary); line-height:1.4; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* ── Onglet Vidéos ─────────────────────────────────────────────────────────── */ .chat-view-videos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--espace-6); } .chat-video-card { display:flex; flex-direction:column; border-radius: var(--radius); border:1px solid var(--border); background:var(--bg-secondary); overflow:hidden; text-decoration:none; color:inherit; transition: box-shadow var(--duree-2),border-color var(--duree-2) var(--courbe); } .chat-video-card:hover { border-color:var(--accent); box-shadow: var(--ombre-2); } .chat-video-thumb { position:relative; width:100%; aspect-ratio:16/9; background:var(--bg-tertiary,#1a1a1a) center/cover no-repeat; } .chat-video-no-thumb { background:linear-gradient(135deg,#1e1e2e,#2d2d44); } .chat-video-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--texte-12); color:#fff; background:rgba(0,0,0,.25); opacity:0; transition: opacity var(--duree-2) var(--courbe); } .chat-video-card:hover .chat-video-play { opacity:1; } .chat-video-info { padding:var(--espace-5) var(--espace-6); display:flex; flex-direction:column; gap:var(--espace-2); } .chat-video-title { font-size:var(--texte-4); font-weight:600; color:var(--t-primary); line-height:1.4; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .chat-video-channel { font-size:var(--texte-2); color:var(--t-dim); } .msg-tab-link { display:flex; flex-direction:column; gap:var(--espace-1); padding:var(--espace-5) var(--espace-7); border-radius: var(--radius); border:1px solid var(--border); background:var(--bg-secondary); text-decoration:none; transition: background var(--duree-2) var(--courbe); } .msg-tab-link:hover { background:rgba(0,0,0,.05); } .msg-tab-link-title { font-size:var(--texte-4); font-weight:600; color:var(--t-primary); } .msg-tab-link-url { font-size:var(--texte-2); color:var(--t-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* === Blocs de code ========================================================= Le bloc précédent était un pavé #050b15 (noir bleuté, plus sombre que n'importe quelle autre surface de l'app) surmonté d'un en-tête criant « POWERSHELL 1 LIGNES » et flanqué d'une gouttière de numéros — pour une commande d'une seule ligne. Ici : une surface qui appartient au thème, un en-tête calme, des numéros seulement quand ils servent, et un format compact dédié aux commandes d'une ligne. ========================================================================= */ :root { --code-bg: #fafbfc; --code-head: #f2f4f7; --code-border: #e3e6ea; --code-fg: #1f2937; --code-gutter: #b6bcc6; } html.dark { --code-bg: #191919; --code-head: #232323; --code-border: #333333; --code-fg: #e3e6ec; --code-gutter: #5c5c5c; } .code-card { margin: 1.15em 0; border: 1px solid var(--code-border); border-radius: var(--radius); background: var(--code-bg); overflow: hidden; transition: border-color var(--duree-2) var(--courbe); } .code-card:hover { border-color: var(--border-hov); } /* LA CARTE D'ARTEFACT — compacte, premium, façon Claude. Un artefact (maquette, document, composant, visuel) ne se déverse pas en pavé de code : il se pose en carte cliquable qui ouvre le visualiseur. */ .artefact-carte { display: flex; align-items: center; gap: .75rem; width: 100%; margin: 1.15em 0; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-secondary); cursor: pointer; transition: all var(--duree-2) var(--courbe); } .artefact-carte-ic svg { width: 20px; height: 20px; } .artefact-carte:hover { border-color: var(--accent); box-shadow: var(--ombre-2); transform: translateY(-1px); } .artefact-carte-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); flex-shrink: 0; color: #fff; } .artefact-carte-corps { display: flex; flex-direction: column; min-width: 0; flex: 1; } .artefact-carte-nom { font-weight: 600; font-size: max(0.84375rem, 13.5px); color: var(--t-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .artefact-carte-type { font-size: max(0.6875rem, 11px); color: var(--t-faint); text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; } .artefact-carte-actions { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; } .artefact-carte-globe, .artefact-carte-dl { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--t-dim); transition: all var(--duree-2) var(--courbe); } .artefact-carte-globe:hover, .artefact-carte-dl:hover { background: var(--accent-bg); color: var(--accent); } .artefact-carte-ouvrir { display: flex; align-items: center; gap: .35rem; font-size: max(0.75rem, 12px); font-weight: 600; color: var(--accent); padding: .35rem .6rem; border-radius: var(--radius-sm); background: var(--accent-bg); } .code-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 34px; padding: .3rem .45rem .3rem .8rem; background: var(--code-head); border-bottom: 1px solid var(--code-border); } .code-card-lang { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 500; letter-spacing: .01em; color: var(--t-muted); /* pas de text-transform : « PowerShell », pas « POWERSHELL » */ } .code-card-pastille { width: 7px; height: 7px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 8%, transparent); } .code-card-compte { font-size: .72rem; color: var(--t-faint); font-variant-numeric: tabular-nums; } .code-card-compte::before { content: '·'; margin: 0 .4rem 0 .15rem; } .code-card-actions { display: inline-flex; align-items: center; gap: .1rem; flex: none; } /* Au repos les actions s'effacent ; elles reviennent au survol du bloc ou dès qu'on les navigue au clavier. Sur écran tactile (pas de survol), elles restent visibles — sinon elles seraient inatteignables. */ @media (hover: hover) { .code-card-actions { opacity: .55; transition: opacity var(--duree-2) var(--courbe); } .code-card:hover .code-card-actions, .code-card-actions:focus-within { opacity: 1; } } .code-act { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .5rem; border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer; font-size: .74rem; font-weight: 500; color: var(--t-dim); transition: background var(--duree-2) var(--courbe), color var(--duree-2) var(--courbe); } .code-act:hover { background: var(--bg-hover); color: var(--t-primary); } .code-act:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .code-act svg { width: 13px; height: 13px; } .code-act--icone { padding: .3rem; } .code-act.copied { color: var(--success); } /* Alias conservé : d'anciens rendus (aperçus mermaid, vues studio) utilisent encore cette classe. */ .copy-btn-code { display: inline-flex; align-items: center; gap: .375rem; padding: .28rem .5rem; border-radius: var(--radius-sm); font-size: .74rem; cursor: pointer; border: none; color: var(--t-dim); background: transparent; transition: background var(--duree-2), color var(--duree-2) var(--courbe); } .copy-btn-code:hover { background: var(--bg-hover); color: var(--t-primary); } .copy-btn-code.copied { color: var(--success); } /* C'est la SOURCE qui défile, pas la carte : la gouttière de numéros reste en place quand on suit une ligne longue vers la droite. Deux conteneurs à défilement imbriqués donneraient deux barres et un décalage de la gouttière. */ .code-card-body { display: flex; align-items: stretch; overflow: hidden; } .msg-content .code-card-body { overflow: hidden; } .code-card-num { flex: none; margin: 0; padding: .8rem .65rem .8rem .85rem; text-align: right; user-select: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .8rem; line-height: 1.65; font-variant-numeric: tabular-nums; color: var(--code-gutter); border-right: 1px solid var(--code-border); background: transparent; } /* La hauteur de ligne DOIT être posée sur le 
 lui-même, pas seulement sur
   le  qu'il contient : c'est le bloc qui gouverne les boîtes de ligne. En
   la posant sur l'inline seulement, le code héritait du 1.7 de .msg-content
   pendant que la gouttière tournait à 1.65 — les numéros décrochaient d'un
   demi-interligne dès la sixième ligne. */
.code-card-src {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: .8rem 1rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: transparent; border: none; border-radius: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .8rem; line-height: 1.65; color: var(--code-fg);
}
.code-card-src code {
  font: inherit; line-height: inherit; color: inherit;
  white-space: pre; background: transparent; padding: 0; border: none;
}

/* --- L'inventaire : Artéfacts en lignes, Contenu en vignettes --------------
   Ce qui sépare les deux sections n'est pas le format, c'est l'ORIGINE : ce que
   CRÉA a construit d'un côté, ce qui est entré ou sorti comme matière de
   l'autre. Deux formes différentes parce que ce sont deux natures différentes —
   une ligne se lit, une vignette se reconnaît. */
.inv-section-titre {
  font-size: var(--texte-1); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t-faint); margin-bottom: var(--espace-4);
}
.inv-vide { font-size: var(--texte-3); color: var(--t-faint); padding: var(--espace-4) 0; }
.inv-tout-dl {
  display: inline-flex; align-items: center; gap: var(--espace-3);
  font-size: var(--texte-2); color: var(--t-secondary);
  padding: var(--espace-2) var(--espace-5); border-radius: var(--radius-sm);
}
.inv-tout-dl:hover { background: var(--bg-secondary); color: var(--t-primary); }

.inv-ligne {
  display: flex; align-items: center; gap: var(--espace-4); width: 100%;
  padding: var(--espace-4); margin-bottom: var(--espace-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-primary); text-align: left; cursor: pointer;
  transition: all var(--duree-2) var(--courbe);
}
.inv-ligne:hover { border-color: var(--accent); box-shadow: var(--ombre-2); transform: translateY(-1px); }
/* L'icône dans un carré arrondi teinté — le repère du type, à gauche, comme
   une vignette. C'est ce qui donne le rythme « premium » d'une liste de
   fichiers, plutôt qu'un pictogramme flottant. */
.inv-ligne-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: var(--accent-bg); color: var(--accent);
}
/* min-width:0 sur le conteneur ET sur l'enfant : sans les deux, un nom long
   pousse la ligne au lieu d'être tronqué, et la carte déborde du panneau. */
.inv-ligne-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; flex: 1; }
/* Le globe « ouvrir dans le navigateur » sur une ligne d'artefact web — poussé
   à droite, discret, il s'allume au survol. */
.inv-ligne-globe {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  color: var(--t-dim); transition: all var(--duree-2) var(--courbe);
}
.inv-ligne-globe:hover { background: var(--accent-bg); color: var(--accent); }
.inv-ligne-nom {
  font-size: var(--texte-3); font-weight: 600; color: var(--t-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-ligne-type {
  font-size: var(--texte-1); color: var(--t-faint);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 1px;
}

.inv-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-4); }
.inv-vignette {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-input);
}
.inv-vignette--texte {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--espace-4); text-align: left;
}
.inv-vignette-apercu {
  font-size: var(--texte-1); line-height: 1.35; color: var(--t-dim);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.inv-vignette-badge {
  align-self: flex-start; font-size: var(--texte-1); font-weight: 600;
  padding: 1px var(--espace-4); border-radius: var(--radius-rond);
  border: 1px solid var(--border); color: var(--t-faint);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Texte rédigé : la même carte, mais ce n'est pas du code ---------------
   « Il y a aussi le canvas où CRÉA rédige du texte dans un carré qui l'entoure,
    avec une icône copier. »

   Le carré existait, mais réservé au code. Un texte qui y arrivait héritait de
   la chasse fixe, des numéros de ligne et de la coloration syntaxique : une
   lettre affichée comme un fichier source.

   Même enveloppe (bordure, rayon, en-tête, bouton copier) pour qu'on les lise
   comme une famille ; ce qui change, c'est ce que la carte MONTRE.

   Le fond suit celui de la page, pas celui du code : un texte à lire n'est pas
   un extrait de programme, et le pavé sombre du code le ferait ressortir comme
   tel. C'est la remarque « le noir, c'était mal structuré, je voulais une
   couleur sobre » — appliquée ici aussi. */
.code-card--texte {
  background: var(--bg-secondary);
  border-color: var(--border);
}
.code-card--texte .code-card-head {
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.code-card-texte {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: var(--espace-6) var(--espace-8);
  /* pre-wrap et non pre : le texte se replie dans la largeur disponible. Avec
     `pre`, un paragraphe rédigé partait en défilement horizontal — illisible
     sur téléphone, et personne ne fait défiler une lettre de gauche à droite. */
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: inherit; font-size: var(--texte-5); line-height: 1.7;
  color: var(--t-primary);
}

/* --- Commande d'une ligne : format compact --------------------------------
   Un prompt, la commande, un bouton copier. Pas d'en-tête, pas de gouttière. */
.code-card--ligne {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .4rem .4rem .8rem; margin: .9em 0;
  border-radius: var(--radius);
}
.code-card--ligne .code-card-prompt {
  flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .8rem; font-weight: 600; color: var(--accent); user-select: none;
}
.code-card--ligne .code-card-src { padding: 0; overflow-x: auto; min-width: 0; }
.code-card--ligne .code-act { flex: none; }
@media (hover: hover) {
  .code-card--ligne .code-act { opacity: .5; transition:  opacity var(--duree-2) var(--courbe); }
  .code-card--ligne:hover .code-act,
  .code-card--ligne .code-act:focus-visible { opacity: 1; }
}

/* Vue « Tableau » d'un bloc JSON : héritée du style de tableau des réponses. */
.code-card .json-table-view { padding: .25rem .8rem .8rem; overflow-x: auto; }
.code-card .json-table-view table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: .78rem; }
.code-card .json-table-view th,
.code-card .json-table-view td { padding: .38em .7em; text-align: left; border-bottom: 1px solid var(--code-border); }
.code-card .json-table-view th { color: var(--t-primary); font-weight: 600; white-space: nowrap; }
.code-card .json-table-view td { color: var(--t-secondary); font-variant-numeric: tabular-nums; }
.code-card .json-table-view tr:last-child td { border-bottom: none; }

/* Surfaces studio (documents, bulles IA) : le bloc doit rester lisible sur un
   fond clair même en thème sombre. */
.studio-doc-surface .code-card,
.studio-ai-msg .code-card {
  --code-bg: #fafbfc; --code-head: #f2f4f7; --code-border: #e3e6ea;
  --code-fg: #1f2937; --code-gutter: #b6bcc6;
}

/* --- Coloration syntaxique ------------------------------------------------
   highlight.js n'est chargé qu'avec le thème « github-dark » (une seule feuille
   pour les deux thèmes de l'app). Ses couleurs, posées sur la surface claire
   d'un bloc en thème clair, virent au pastel illisible. On repose donc la
   palette ici, une fois par thème, avec des jetons qui tiennent le contraste
   des deux côtés. styles.css est chargé après la feuille CDN : ces règles
   gagnent à spécificité égale. */
.code-card .hljs, .code-card-src code.hljs { background: transparent; color: var(--code-fg); }
.code-card .hljs-comment, .code-card .hljs-quote { color: #6b7280; font-style: italic; }
.code-card .hljs-keyword, .code-card .hljs-selector-tag, .code-card .hljs-literal,
.code-card .hljs-doctag, .code-card .hljs-formula { color: #b3319b; }
.code-card .hljs-string, .code-card .hljs-regexp, .code-card .hljs-addition,
.code-card .hljs-meta .hljs-string { color: #0a7d4e; }
.code-card .hljs-number, .code-card .hljs-symbol, .code-card .hljs-bullet,
.code-card .hljs-variable, .code-card .hljs-template-variable,
.code-card .hljs-link, .code-card .hljs-selector-attr { color: #b45309; }
.code-card .hljs-title, .code-card .hljs-title.function_, .code-card .hljs-section,
.code-card .hljs-name, .code-card .hljs-selector-id, .code-card .hljs-selector-class { color: #1d5fc4; }
.code-card .hljs-attr, .code-card .hljs-attribute, .code-card .hljs-property,
.code-card .hljs-params, .code-card .hljs-type, .code-card .hljs-built_in,
.code-card .hljs-class .hljs-title { color: #0f6f8f; }
.code-card .hljs-meta, .code-card .hljs-tag { color: #5b6472; }
.code-card .hljs-deletion { color: #b91c1c; }
.code-card .hljs-emphasis { font-style: italic; }
.code-card .hljs-strong { font-weight: 600; }

html.dark .code-card .hljs-comment,
html.dark .code-card .hljs-quote { color: #7d8590; }
html.dark .code-card .hljs-keyword, html.dark .code-card .hljs-selector-tag,
html.dark .code-card .hljs-literal, html.dark .code-card .hljs-doctag,
html.dark .code-card .hljs-formula { color: #ff7b9c; }
html.dark .code-card .hljs-string, html.dark .code-card .hljs-regexp,
html.dark .code-card .hljs-addition, html.dark .code-card .hljs-meta .hljs-string { color: #7ee0a8; }
html.dark .code-card .hljs-number, html.dark .code-card .hljs-symbol,
html.dark .code-card .hljs-bullet, html.dark .code-card .hljs-variable,
html.dark .code-card .hljs-template-variable, html.dark .code-card .hljs-link,
html.dark .code-card .hljs-selector-attr { color: #ffb86b; }
html.dark .code-card .hljs-title, html.dark .code-card .hljs-title.function_,
html.dark .code-card .hljs-section, html.dark .code-card .hljs-name,
html.dark .code-card .hljs-selector-id, html.dark .code-card .hljs-selector-class { color: #79b8ff; }
html.dark .code-card .hljs-attr, html.dark .code-card .hljs-attribute,
html.dark .code-card .hljs-property, html.dark .code-card .hljs-params,
html.dark .code-card .hljs-type, html.dark .code-card .hljs-built_in,
html.dark .code-card .hljs-class .hljs-title { color: #6fd7e0; }
html.dark .code-card .hljs-meta, html.dark .code-card .hljs-tag { color: #9aa4b2; }
html.dark .code-card .hljs-deletion { color: #ff8a8a; }
/* Les surfaces studio restent claires même en thème sombre : la palette claire
   y reste donc de mise. */
html.dark .studio-doc-surface .code-card .hljs-comment,
html.dark .studio-ai-msg .code-card .hljs-comment { color: #6b7280; }
html.dark .studio-doc-surface .code-card .hljs-keyword,
html.dark .studio-ai-msg .code-card .hljs-keyword { color: #b3319b; }
html.dark .studio-doc-surface .code-card .hljs-string,
html.dark .studio-ai-msg .code-card .hljs-string { color: #0a7d4e; }
html.dark .studio-doc-surface .code-card .hljs-title,
html.dark .studio-ai-msg .code-card .hljs-title { color: #1d5fc4; }

/* --- Textarea --- */
textarea { field-sizing:content; }
/* Empêche la textarea de collapser à 0 pendant le re-render → évite le tremblement barre saisie */
#chat-input { min-height:44px; }
#chat-input-welcome { min-height:44px; }

/* --- Input toolbar buttons --- */
.input-tool-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .55rem; border-radius: var(--radius-sm);
  font-size: .72rem; font-weight: 500; cursor: pointer;
  color: var(--t-dim); background: transparent; border: none;
  transition:  all var(--duree-2) var(--courbe); white-space: nowrap; position: relative;
}
.input-tool-btn:hover { background: var(--bg-glass-hov); color: var(--t-primary); }
.input-tool-btn svg { flex-shrink: 0; }

.input-tool-toggle { border: 1px solid transparent; }
.input-tool-toggle:hover { border-color: var(--border-hov); }

.input-tool-toggle.active-web {
  background: rgba(34,197,94,.1); color: #22c55e;
  border-color: rgba(34,197,94,.25);
}
.input-tool-toggle.active-think {
  background: rgba(167,139,250,.1); color: #a78bfa;
  border-color: rgba(167,139,250,.25);
}

/* Model pill in toolbar */
.input-tool-model {
  border: 1px solid var(--border-hov);
  background: var(--bg-tertiary);
  padding: .28rem .6rem;
  gap: .4rem;
}
.input-tool-model:hover {
  border-color: var(--border-focus);
  background: var(--bg-glass-hov);
}

.input-tool-dot {
  width: 5px; height: 5px; border-radius: 50%;
  display: inline-block; margin-left: .1rem;
  animation: pulse 2s ease-in-out infinite;
}

/* --- Send button --- */
.send-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .45rem .875rem; border-radius: var(--radius);
  font-size: .8125rem; font-weight: 500; cursor: pointer;
  background: linear-gradient(135deg, #4c6ef5, #5c7cfa);
  color: white; border: none;
  box-shadow: 0 2px 8px rgba(92,124,250,.3);
  transition:  all var(--duree-2) var(--courbe); white-space: nowrap;
}
.send-btn:hover { filter: brightness(1.1); box-shadow: 0 4px 16px rgba(92,124,250,.4); }
.send-btn:active { transform: scale(.96); }

.send-btn.stop-btn {
  background: rgba(239,68,68,.12);
  color: #f87171;
  box-shadow: none;
  border: 1px solid rgba(239,68,68,.2);
}
.send-btn.stop-btn:hover { background: rgba(239,68,68,.2); }

/* --- Sidebar items --- */
.sidebar-item { transition: all var(--duree-2) var(--courbe); position:relative; }
.sidebar-item:hover { background:var(--bg-glass-hov); }
.sidebar-item.active { background:var(--accent-bg); border-color:rgba(92,124,250,.15) !important; }

/* --- Dropdown --- */
.dropdown-enter { animation:scaleIn .15s cubic-bezier(.16,1,.3,1); transform-origin:top left; }

/* --- Animations intelligentes globales --- */
/* Overlay semi-transparent derrière tout dropdown ouvert */
.panel-overlay {
  position:fixed;inset:0;z-index:49;
  background:transparent;
  cursor:default;
  pointer-events:auto;
}
/* Transitions fluides sur tous les éléments interactifs */
.modenav-btn { transition: all var(--duree-2) var(--courbe); }
.modenav-btn:active { transform:scale(.95); }

/* Sidebar slide-in/out */
#sidebar { transition: transform var(--duree-2) var(--courbe); }
#sidebar-backdrop { animation:fadeIn .18s ease-out; }

/* Input toolbar — masquer scrollbar */
.input-toolbar::-webkit-scrollbar { display:none; }

/* Modal/panel : backdrop + scale-in */
.modal-backdrop { animation:fadeIn .18s ease-out; }
.modal-panel    { animation:scaleIn .2s cubic-bezier(.16,1,.3,1); }

/* Studios nav dropdown rows */
#studios-nav-drop button { transition: all var(--duree-1) var(--courbe); }
#studios-nav-drop button:active { transform:scale(.97); }

/* Chips input — pas d'overflow visible */
.input-chip { flex-shrink:0; white-space:nowrap; }

/* ============================================================
   PREMIUM FEATURES
   ============================================================ */

/* --- Command Palette --- */
.cmd-palette-backdrop {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:14vh;
  animation: fadeIn .15s ease-out;
}
.cmd-palette {
  width:100%; max-width:580px; margin:0 1rem;
  border-radius:var(--radius-xl); overflow:hidden;
  background:var(--bg-secondary); border:1px solid var(--border-hov);
  box-shadow:0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(92,124,250,.08);
  animation: scaleIn .18s cubic-bezier(.16,1,.3,1);
}
html.light .cmd-palette { box-shadow: var(--ombre-5); }
.cmd-input-wrap {
  display:flex; align-items:center; gap:.75rem;
  padding:.875rem 1.125rem; border-bottom:1px solid var(--border);
}
.cmd-input {
  flex:1; background:transparent; border:none; outline:none;
  font-size:1rem; color:var(--t-primary); font-family:inherit;
}
.cmd-input::placeholder { color:var(--t-faint); }
.cmd-results { max-height:380px; overflow-y:auto; padding:.375rem; }
.cmd-group-label {
  padding:.375rem .75rem .25rem; font-size:.65rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--t-dim);
}
.cmd-item {
  display:flex; align-items:center; gap:.75rem; padding:.6rem .875rem;
  border-radius:var(--radius-sm); cursor:pointer; transition: all var(--duree-1) var(--courbe);
  color:var(--t-secondary);
}
.cmd-item:hover, .cmd-item.active {
  background:var(--accent-bg); color:var(--t-primary);
}
.cmd-item .cmd-icon { width:1.75rem; height:1.75rem; border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; background:var(--bg-tertiary); flex-shrink:0; font-size:.875rem; }
.cmd-item .cmd-label { flex:1; font-size:.875rem; }
.cmd-item .cmd-hint { font-size:.7rem; color:var(--t-dim); font-family:'JetBrains Mono',monospace; }
.cmd-empty { padding:2.5rem 1rem; text-align:center; color:var(--t-dim); font-size:.875rem; }

/* --- Context Menu --- */
.ctx-menu {
  position:fixed; z-index:400; min-width:180px;
  background:var(--bg-secondary); border:1px solid var(--border-hov);
  border-radius:var(--radius); padding:.3rem;
  box-shadow: var(--ombre-3);
  animation: scaleIn .12s cubic-bezier(.16,1,.3,1);
}
html.light .ctx-menu { box-shadow: var(--ombre-3); }
.ctx-item {
  display:flex; align-items:center; gap:.625rem; padding:.45rem .75rem;
  border-radius: var(--radius-sm); cursor:pointer; font-size:.8125rem; color:var(--t-secondary);
  transition: all var(--duree-1) var(--courbe); white-space:nowrap;
}
.ctx-item:hover { background:var(--accent-bg); color:var(--t-primary); }
.ctx-item.danger:hover { background:rgba(239,68,68,.1); color:var(--danger); }
.ctx-separator { height:1px; background:var(--border); margin:.25rem 0; }

/* --- Slash command autocomplete menu --- */
.slash-item { transition: background var(--duree-1) var(--courbe); }
.slash-item.slash-active, .slash-item:hover { background:var(--accent-bg); }
#slash-menu { animation:fadeInUp .12s ease; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:translateY(0) } }

/* LE TITRE DE LA CONVERSATION, EN TÊTE DU FIL — pas dans l'en-tête.
   Une ligne sobre, alignée sur la colonne, qui défile avec la conversation :
   elle ne prend aucune hauteur permanente à l'écran. Le chevron ouvre la liste
   des sessions de même nature (chat ou Work) ; il ne se colore qu'au survol,
   pour ne pas attirer l'œil plus que le titre lui-même. */
.conv-titre-fil {
  /* L'ÉCART, PAS LE COLLAGE. « Tu as trop collé l'icône qui signale le cloud ou
     l'ordinateur avec le titre. » Quatre pixels serraient l'icône contre la
     première lettre ; on passe à l'espace suivant de l'échelle, et le chevron
     de fin garde le sien — d'où un écart posé par ÉLÉMENT plutôt qu'un `gap`
     unique, qui aurait écarté les trois pareil. */
  display: inline-flex; align-items: center; gap: var(--espace-3);
  /* LA LARGEUR DÉPEND DE QUI PARTAGE LA RANGÉE.
     Dans l'application de bureau, les onglets montent dans la barre de fenêtre :
     cette rangée-ci ne porte que les icônes de gauche et les actions de droite,
     et le titre peut respirer. C'est le cas par défaut. */
  max-width: min(38vw, 460px); min-width: 0; padding: var(--espace-2) var(--espace-3);
  border-radius: var(--radius-sm); background: transparent; border: 0;
  cursor: pointer; text-align: left;
  transition: background var(--duree-2) var(--courbe);
}
.conv-titre-fil:hover { background: var(--bg-secondary); }
/* Sans barre de fenêtre (navigateur), le bandeau d'onglets retombe dans cette
   rangée. Il est en position absolue d'un bord à l'autre et ignore les groupes
   latéraux : un titre trop long passerait DESSOUS.
   La place libre a été MESURÉE dans l'application, barre latérale ouverte (le
   cas le plus serré) : 55 px à 1024, 183 à 1280, 343 à 1600 — soit la moitié de
   la largeur moins 457. On borne là-dessus, avec treize pixels de marge. */
.conv-titre-fil--serre { max-width: min(calc(50vw - 470px), 200px); }
/* En dessous de 1400 px, la place qui reste avant le bandeau tombe sous deux
   cent trente pixels : le titre y est coupé au tiers et vient toucher l'onglet
   « Réponse ». Un titre illisible collé à un onglet est pire que pas de titre —
   il reste dans la barre latérale et dans l'onglet du navigateur. Ce seuil ne
   concerne QUE le cas sans barre de fenêtre ; dans l'application de bureau, la
   rangée est libre et le titre s'affiche toujours. */
@media (max-width: 1399px) { .conv-titre-fil--serre { display: none; } }
.conv-titre-fil-nom {
  /* 15 px, pas 17 : le titre partage une rangée de 44 px avec les icônes. Plus
     gros, il la ferait grandir — et une rangée qui grandit, c'est le bandeau
     qu'on avait retiré. */
  font-size: max(0.9375rem, 15px); font-weight: 600; color: var(--t-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.conv-titre-fil-chev {
  flex: none; color: var(--t-faint); margin-left: calc(var(--espace-1) * -1);
  /* Il dit l'état du panneau qu'il ouvre, comme celui des studios. */
  transition: transform var(--duree-2) var(--courbe);
}
.conv-titre-fil-chev.est-ouvert { transform: rotate(180deg); }

/* --- Inline title edit --- */
.conv-title-input {
  background:var(--accent-bg); border:1px solid var(--border-focus);
  border-radius: var(--radius-sm); padding:.1rem .4rem; font-size:.875rem;
  color:var(--t-primary); outline:none; width:100%;
}

/* --- Token counter --- */
.token-counter {
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.2rem .5rem; border-radius: var(--radius-rond); font-size:.65rem;
  font-family:'JetBrains Mono',monospace;
  background:var(--bg-tertiary); border:1px solid var(--border);
  color:var(--t-dim); transition: all var(--duree-3) var(--courbe);
}
.token-counter.warn { border-color:rgba(245,158,11,.3); color:var(--warn); background:rgba(245,158,11,.05); }
.token-counter.crit { border-color:rgba(239,68,68,.3); color:var(--danger); background:rgba(239,68,68,.05); }

/* --- Conversation search (Ctrl+F) --- */
.conv-search-bar {
  position:absolute; top:0; right:0; z-index:20;
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border-radius:0 0 0 var(--radius);
  background:var(--bg-secondary); border:1px solid var(--border-hov);
  border-top:none; border-right:none;
  animation: slideDown .2s ease-out;
  box-shadow: var(--ombre-2);
}
.conv-search-input {
  background:transparent; border:none; outline:none;
  font-size:.8125rem; color:var(--t-primary); width:180px;
}
.conv-search-input::placeholder { color:var(--t-dim); }
.search-highlight { background:rgba(245,158,11,.3); border-radius: var(--radius-xs); padding:0 var(--espace-1); }
.search-highlight.current { background:rgba(245,158,11,.6); }

/* --- Status bar supprimée — renderStatusBar() retourne '' ---
   Le .status-bar CSS est conservé vide pour éviter les erreurs si
   l'élément existe encore dans un cache SW ancien. */
.status-bar { display:none!important; }
.status-dot  { display:none!important; }

/* Indicateur offline discret : petit point rouge sur le logo CREA dans le rail */
html.crea-offline #btn-user-rail::after,
html.crea-offline [data-rail="logo"]::after {
  content:'';
  position:absolute; top:2px; right:2px;
  width:7px; height:7px; border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 0 2px var(--bg-secondary);
  animation:pulse 1.5s ease-in-out infinite;
}
html.crea-offline #btn-user-rail { position:relative; }
html.crea-offline [data-rail="logo"] { position:relative; }

/* --- Skeleton loaders --- */
.skeleton {
  background:linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size:200% 100%;
  animation: shimmer 1.4s ease-in-out infinite; border-radius:var(--radius-sm);
}

/* --- Premium message bubbles --- */
/* Bulle user — gris clair comme ChatGPT */
.msg-user-bubble {
  background: var(--msg-user-bg);
  border:1px solid var(--border);
  /* TOTALEMENT ARRONDIE. Elle portait trois coins à 16 px et un quatrième à 8 —
     un angle plus dur que les autres, qui se lit comme un défaut plutôt que
     comme une intention. Le même rayon partout, et celui de la barre de saisie :
     ce qu'on écrit et ce qu'on a envoyé ont la même forme. */
  border-radius: var(--radius-xl);
}
html.dark .msg-user-bubble {
  background: var(--bg-secondary);
  border-color: var(--border);
}
.msg-ai-container { position:relative; }

/* --- Message timestamp --- */
.msg-ts { font-size:.6rem; color:var(--t-faint); opacity:0; transition: opacity var(--duree-2) var(--courbe); margin-top:.25rem; }
.msg-ts.visible { opacity:1; }

/* --- File chips --- */
.file-chip {
  display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .6rem;
  border-radius: var(--radius-sm); background:var(--accent-bg); border:1px solid rgba(92,124,250,.15);
  font-size:.72rem; color:var(--accent-l); transition: all var(--duree-2) var(--courbe);
}
.file-chip:hover { border-color:var(--accent); }

/* --- LES PIÈCES JOINTES ONT TOUTES LA MÊME GRAMMAIRE ---------------------
   Trois choses partaient dans le même message et s'affichaient de trois façons
   différentes : un gros collé en carte, une image en vignette nue, un fichier en
   petite puce. Trois traitements pour un même geste — « j'ajoute quelque chose à
   mon message » — et rien ne les reliait à l'œil.
   Même largeur, même hauteur, même rayon, même badge : ce qui change d'une carte
   à l'autre, c'est ce qu'elles montrent, pas comment elles sont faites. */
.piece-carte {
  width:132px; min-width:132px; height:92px;
  border-radius: var(--radius); background:var(--bg-secondary); border:1px solid var(--border);
  position:relative; overflow:hidden; cursor:pointer;
  transition:border-color .15s ease, transform .12s ease;
}
.piece-carte:hover { border-color:var(--accent); transform:translateY(-1px); }
/* L'image occupe toute la carte ; son nom repose sur un voile, lisible quel que
   soit le cliché — un texte blanc sur une photo claire ne se lit pas. */
.piece-carte-image img { width:100%; height:100%; object-fit:cover; display:block; }
.piece-carte-nom {
  position:absolute; left:0; right:0; bottom:0; padding:var(--espace-7) var(--espace-4) var(--espace-3);
  font-size:var(--texte-1); line-height:1.2; color:#fff; text-align:left;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Un fichier n'a rien à montrer : on montre donc ce qu'on sait de lui —
   son extension en grand, son nom, son poids. */
.piece-carte-fichier { display:flex; flex-direction:column; justify-content:space-between; padding:var(--espace-4) var(--espace-5); }
.piece-carte-ext {
  font-size:var(--texte-9); font-weight:700; letter-spacing:.02em; color:var(--t-faint);
  text-transform:uppercase; line-height:1;
}
.piece-carte-meta { font-size:var(--texte-1); color:var(--t-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* AVANT D'ENVOYER, ON PEUT ENCORE RETIRER — c'est la seule différence entre la
   carte du composeur et celle du message. Elle est donc un détail de la même
   carte, et non une seconde carte.

   Fond opaque, et non une simple opacité : posée sur une photo claire, une croix
   translucide devient invisible — exactement le défaut qu'on vient de corriger
   sur le nom du fichier. Elle reste visible en permanence : sur écran tactile il
   n'y a pas de survol, et une croix qui n'apparaît qu'au survol n'existe pas. */
.piece-carte-retirer {
  position:absolute; top:5px; right:5px; z-index:2;
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:none; cursor:pointer; padding:0;
  background:rgba(0,0,0,.62); color:#fff; line-height:0;
  transition: background-color var(--duree-2) var(--courbe);
}
.piece-carte-retirer:hover { background:rgba(220,38,38,.92); }
.piece-carte-badge {
  align-self:flex-start; font-size:var(--texte-1); font-weight:600; letter-spacing:.02em;
  padding:var(--espace-1) var(--espace-4); border-radius: var(--radius-rond); border:1px solid var(--border); color:var(--t-faint);
  background:var(--bg-primary);
}

/* --- Carte "collé" (gros copier-coller) : aperçu + badge, cliquable → visionneuse --- */
.paste-card {
  /* Mêmes dimensions et même rayon que .piece-carte : c'est ce qui fait que les
     trois pièces jointes se lisent comme une même rangée, et non comme trois
     objets sans rapport. Les valeurs sont répétées plutôt que factorisées pour
     ne rien changer à l'apparence existante en le faisant. */
  width:132px; min-width:132px; height:92px; padding:var(--espace-4) var(--espace-5);
  border-radius: var(--radius); background:var(--bg-secondary); border:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:space-between;
  cursor:pointer; position:relative; overflow:hidden; transition:border-color .15s ease, transform .12s ease;
}
.paste-card:hover { transform:translateY(-1px); }
.paste-card:hover { border-color:var(--accent); }
.paste-card-preview {
  font-size:var(--texte-1); line-height:1.35; color:var(--t-dim);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.paste-card-badge {
  align-self:flex-start; font-size:var(--texte-1); font-weight:600; letter-spacing:.02em;
  padding:var(--espace-1) var(--espace-4); border-radius: var(--radius-rond); border:1px solid var(--border); color:var(--t-faint);
}
.paste-card-remove {
  position:absolute; top:4px; right:4px; width:18px; height:18px; border-radius: var(--radius-rond);
  display:flex; align-items:center; justify-content:center; background:var(--bg-primary); opacity:.7;
}
.paste-card-remove:hover { opacity:1; }

/* --- Visionneuse "Contenu collé" (plein écran) --- */
#pasted-content-modal .pcm-actbtn { display:flex; flex-direction:column; align-items:center; gap:var(--espace-1); padding:var(--espace-3) var(--espace-5); border-radius: var(--radius); font-size:var(--texte-1); color:var(--t-secondary); }
#pasted-content-modal .pcm-actbtn:hover { background:rgba(0,0,0,.05); }
#pasted-content-modal .pcm-actbtn svg { width:15px; height:15px; }

/* ── LES ONGLETS DE LA BARRE DE FENÊTRE SUIVENT LA COLONNE ──────────────
   Sur le web, l'en-tête a déjà la géométrie de la colonne : .app-header-centre
   n'a rien à calculer (voir juste en dessous). Sur la coquille de bureau, les
   onglets montent dans la barre de fenêtre, qui est posée AU-DESSUS de la mise
   en page et ne connaît donc ni la barre latérale ni la colonne.

   Il ne lui manque qu'un chiffre : la largeur de la barre latérale. On le lui
   donne par la variable que l'aside utilise lui-même — pas par une mesure. Une
   mesure d'une boîte en train de bouger rend une position intermédiaire :
   relevé 234 px d'écart, cent millisecondes après l'ouverture. C'est ce que
   l'usager voyait « bouger bizarre ».

   La borne à 769 px n'est pas décorative : en dessous, la barre se pose PAR-
   DESSUS la colonne (position:fixed) au lieu de la pousser. Décaler les onglets
   là les enverrait sous les boutons de fenêtre. Même frontière que
   isMobileSidebarLayout() dans src/app.js. */
#tb-onglets { transform: translateX(-50%); }
@media (min-width: 769px) {
  /* ── ON SUIT CE QUI POUSSE, PAS CE QUI EST POSÉ ────────────────────────
     « Dès que je clique, il se décale. Son centre doit être le centre de la
      barre de questions. »
     La règle lisait `[data-barre-laterale="ouverte"]` et décalait de
     --crea-sb-largeur/2. Trois choses lui échappaient, toutes mesurées en
     navigateur réel : la carte FLOTTANTE ne pousse rien (132 px d'écart au
     premier clic), la carte ANCRÉE est détachée de --carte-marge des deux
     côtés (10 px), et le rail Créative ne fait que 84 px (80 px).
     --crea-barre-poussee dit l'emprise réelle, publiée par le rendu depuis
     l'état — jamais depuis une mesure. Zéro quand rien ne pousse : la règle
     retombe alors d'elle-même sur le centrage fenêtre, sans branche. */
  html[data-barre-laterale="ouverte"] #tb-onglets {
    transform: translateX(calc(-50% + var(--crea-barre-poussee, 0px) / 2));
  }

  /* ── ET ILS VOYAGENT COMME LE CONTENU, PAS COMME EUX-MÊMES ─────────────
     Une simple transition ne suffisait pas, et la mesure l'a montré : le
     contenu ne va PAS d'une position à l'autre. Il est mis en place large de
     sa taille finale dès la première image, puis glisse depuis la gauche
     (creaMainShiftIn) — donc son centre part de 588, saute 132 px à gauche de
     là où il était, et parcourt 264. Les onglets, eux, n'avaient que 132 à
     faire : avec la même durée ils prenaient de l'avance et se retrouvaient à
     130 px devant la barre de questions au milieu du geste.
     Ils rejouent donc le MÊME trajet, à partir des MÊMES keyframes de largeur :
     départ à une largeur de barre du point d'arrivée, comme le contenu.
     Le geste est publié pour un seul rendu (data-barre-laterale-geste), sinon
     l'animation repartirait à chaque repeinture de la barre de fenêtre. */
  /* Le trajet part de l'emprise QUI S'ACHÈVE : à la fermeture, la poussée
     courante vaut déjà zéro, et une sortie partant de zéro ne bougerait pas. */
  @keyframes creaOngletsEntree {
    from { transform: translateX(calc(-50% - var(--crea-barre-poussee-geste, 0px) / 2)); }
  }
  @keyframes creaOngletsSortie {
    from { transform: translateX(calc(-50% + var(--crea-barre-poussee-geste, 0px))); }
  }
  html[data-barre-laterale-geste="entree"] #tb-onglets {
    animation: creaOngletsEntree var(--crea-sb-duree) var(--crea-sb-courbe);
  }
  html[data-barre-laterale-geste="sortie"] #tb-onglets {
    animation: creaOngletsSortie var(--crea-sb-duree) var(--crea-sb-courbe);
  }
}

/* LE TITRE DU CHAT — SUPPRIMÉ.
   « Supprime le titre des chats, c'est bon, je n'en veux plus. »
   .crea-titre-chat, ses deux règles de hauteur d'en-tête et l'empilement qui
   les portait sont partis avec lui. Une classe orpheline finit toujours par
   être rebranchée « puisqu'elle est là ». Voir retire/README.md. */

/* ── L'ACCUEIL : DEUX PHRASES, ET LA PREMIÈRE EST GRANDE ───────────────────
   « Et être plus grand, vraiment plus grand. »

   Le salut était en 20 px et la proposition en 16 — deux lignes moyennes qui se
   partageaient l'attention sans qu'aucune ne la prenne. Fusionnées, elles n'ont
   plus à se départager : une seule phrase, à la taille de ce qu'elle est —
   la première chose qu'on lit en ouvrant CREA.

   Elle grandit avec l'écran (clamp) au lieu de sauter à un palier : sur un
   téléphone elle reste lisible, sur un grand écran elle tient son rang.

   C'est un BOUTON, parce qu'elle invite : le survol le dit, sans lui donner
   l'apparence d'une commande — une phrase soulignée d'un trait au survol, pas
   une pastille. */
.crea-phrase-accueil {
  /* Le logo ouvre la phrase, et la phrase est CENTRÉE SUR SON MILIEU.
     Posée sur la ligne de base, elle était décalée vers le bas du signe ; c'est
     le milieu du logo qui doit rencontrer le milieu du mot. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-5);
  max-width: min(96%, 40ch);
  margin: 0 auto;
  /* UNE LIGNE, jamais deux. La longueur est déjà bornée à la composition
     (phraseAccueil) ; ceci est la seconde barrière, pour les noms très longs
     et les langues qui s'étalent. */
  white-space: nowrap;
  padding: 0;
  border: none;
  background: none;
  text-align: center;
  /* « C'est trop grand, réduis vraiment un peu — mais pas petit comme avant. »
     Elle sortait à 36 px en 1440 et prenait trois lignes. Elle redescend à 28,
     ce qui reste très au-dessus des 20 px d'où elle vient. */
  font-size: clamp(1.35rem, 1.05rem + 0.95vw, 1.75rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--t-primary);
  cursor: pointer;
  transition: color var(--duree-2) var(--courbe);
}
.crea-phrase-accueil:hover { color: var(--accent); }
/* Le logo ne grandit pas avec la phrase : il l'accompagne. Aligné sur la ligne
   de base du premier mot, il se lit comme une initiale, pas comme une icône
   posée à côté. */
.crea-phrase-logo {
  /* 1em rendait le logo minuscule : l'atome occupe tout son viewBox, mais ses
     trois ellipses sont fines et l'œil ne voit qu'un point. 1,5em puis 2em
     restaient petits à côté de la référence. 2,6em : nettement plus grand que
     la ligne qu'il ouvre, sans repasser dans l'excès d'où l'on vient. */
  width: 2.6em; height: 2.6em; flex: none;
  align-self: center;
}

/* La seconde ligne porte plus loin que la journée : elle reste discrète, et
   elle change toutes les quinze secondes. Le fondu est court — assez pour que
   le changement se remarque, trop court pour qu'on l'attende. */
.crea-sagesse-accueil {
  margin-top: var(--espace-7);
  max-width: 96%;
  /* « Le texte de la Bible vaut plus que le texte du haut, même s'il est affiché
     plus grand — donc donne-lui de la taille. Et il était bien en vert. »
     Elle était à 13 px : discrète au point d'être illisible. Elle monte à 17 et
     reprend l'accent. Ce n'est pas une note de bas de page — c'est la ligne
     dont il dit qu'elle pèse le plus lourd des deux. */
  /* UNE SEULE LIGNE, elle aussi. Une parole coupée en deux se lit comme deux
     morceaux ; d'un trait, elle se lit comme une phrase. Les entrées sont
     bornées en longueur à la source (VERSES et SAGESSES). */
  white-space: nowrap;
  font-size: clamp(0.95rem, 0.88rem + 0.22vw, 1.0625rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--accent);
  /* PAS de `text-wrap: balance` ici. Il est plus récent que `white-space` et le
     ré-autorise à couper : la parole repartait sur deux lignes malgré le
     nowrap, et rien ne le disait. Encore deux déclarations pour une seule
     décision, et c'est la dernière qui gagnait. */
  transition: opacity var(--duree-2) var(--courbe);
}
.crea-sagesse-accueil.crea-sagesse-change { opacity: 0; }

.app-header-centre {
  /* D'UN BORD À L'AUTRE DE L'EN-TÊTE, ET CENTRÉ DEDANS.
     L'en-tête a déjà la géométrie de la colonne de conversation — mesuré :
     centre 852 barre ouverte, 720 barre fermée, identique à la conversation
     dans les deux cas. Il n'y a donc rien à calculer : il suffit que le centre
     s'étende sur toute la largeur au lieu de recevoir « ce qui reste » de la
     grille. Aucune mesure, aucun observateur, aucun retard. */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* LA SOURIS PASSE À TRAVERS LE BANDEAU, PAS À TRAVERS SES BOUTONS. Sans ça,
     une bande invisible couvrirait toute la largeur et avalerait les clics des
     commandes de gauche et de droite. */
  pointer-events: none;
}
.app-header-centre > * { pointer-events: auto; }

/* --- Toast : SUPPRIMÉ ---
   Le nœud flottant passait devant la barre de saisie et emportait son message
   au bout de 3,2 secondes. Tout arrive maintenant au centre de signal, sous la
   cloche : un seul organe, un historique, un badge de non-lus. Voir showToast
   dans src/app.js. La règle du dépôt : retiré de l'affichage n'est pas
   supprimé — donc la règle part avec la fonction. */

/* --- KBD --- */
.kbd {
  display:inline-block; padding:.1rem .4rem; border-radius: var(--radius-xs);
  background:var(--bg-tertiary); border:1px solid var(--border-hov);
  font-size:.625rem; font-family:'JetBrains Mono',monospace; color:var(--t-dim);
  line-height:1.5; letter-spacing:.03em;
}

/* --- Badges --- */
.badge {
  display:inline-flex; align-items:center; gap:.25rem; padding:.1rem .5rem;
  border-radius: var(--radius-rond); font-size:.65rem; font-weight:500;
}
.badge-web    { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); color:#22c55e; }
.badge-think  { background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.2); color:#a78bfa; }
.badge-folder { font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }

/* ══════════════════════════════════════════════════════════════════════════
   LA TABLETTE DROITE, D'APRÈS LA RÉFÉRENCE — ET CE QUI AVAIT ÉTÉ MAL LU

   Artefact, Aperçu, Outils, Suivi CREA, Travail arrière-plan, Suivi de tâche
   et Fichiers partagent la rangée de droite (RIGHT_TRAY_PANELS dans app.js).

   La référence, capture à l'appui : une carte DÉTACHÉE des quatre bords par un
   petit écart, coins arrondis DISCRETS sur les quatre coins, un filet d'un
   pixel pour tout contour, AUCUNE ombre, et pas un seul trait à l'intérieur —
   le titre se pose en haut, petit, et le contenu suit.

   Ce qui avait été mal lu, et qui compte pour ne pas y revenir :

   « En haut on voit les zones, ça fait comme un bloc de noir en haut et en
    bas. » Ce n'était PAS l'écart : c'était l'OMBRE. Une ombre portée peint le
   fond juste autour de la carte, donc précisément la bande que l'écart laisse
   voir — et une bande peinte en sombre ne se lit pas comme un espace, elle se
   lit comme un objet noir. Retirer l'écart était la mauvaise réponse (la
   version d'après collait la carte aux bords et perdait la référence) ; la
   bonne est de retirer l'ombre et de garder l'écart. Sans ombre, la bande
   reprend le fond de la rangée, qui ne s'écarte que de quelques niveaux du
   fond de la carte : on lit un objet posé, pas un cadre noir.

   « Des petits arrondis tranquilles, alors que toi tu as fait des gros
    arrondis. » --radius-xl (20 px) était deux fois trop. --radius (12 px) est
   l'échelon « carte » du système, et c'est ce que montre la référence.

   « Arrête de mettre des traits partout. » Voir plus bas, § 10 bis : les
   séparations internes passent en transparent.

   « Les ombres que tu as mises autour, ça fait trop — regarde la barre de
    questions, c'est léger, ça donne l'impression qu'elle est impactante. »
   Ce qui faisait « trop » n'était même pas une ombre : c'était une BANDE.
   L'écart de 10 px laissait voir le fond de la rangée (--bg-secondary) autour
   d'une carte en --bg-primary — soit un cadre plein, de couleur franche, sur
   les quatre côtés. Un cadre plein pèse toujours plus qu'une ombre, parce
   qu'il ne se dégrade pas : il commence et il s'arrête.
   La bande reprend donc le fond de la carte (le conteneur est peint), et
   l'élévation revient sous la forme exacte de la barre de questions —
   --ombre-2, voir .composer-enveloppe dans app.js. Même filet, même ombre,
   même famille d'objet.

   Tout ceci NE s'applique QUE sur desktop, parce que la classe n'est posée que
   là (voir chaque render...Panel()) : sous 769 px, chaque panneau bascule en
   plein écran (position:fixed;inset:0), où un écart et un arrondi ne
   dessineraient que des encoches sur le bord de l'écran.

   Le !important n'est pas un raccourci — chaque panneau écrit son fond et son
   border-left en style en ligne dans son propre render(), et rien d'autre
   qu'un !important ne passe devant.
   ═══════════════════════════════════════════════════════════════════════ */
.crea-panneau-carte,
.crea-panneau-carte--seule {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  box-shadow: var(--ombre-2);
  background: var(--bg-primary) !important;
  overflow: hidden;
}

/* L'écart est porté par le CONTENEUR (padding + gap), pas par les cartes : posé
   sur chacune, il doublerait entre deux panneaux ouverts côte à côte, et il n'y
   a qu'ici qu'on sait lequel est le dernier de la rangée. */
.crea-tiroir-cartes {
  /* PEINT, et c'est tout le sujet : sans ça, l'écart montre --bg-secondary de
     .crea-plan-travail, ce qui fabrique un cadre plein autour de chaque carte.
     Au même fond que les cartes, il ne reste que le filet et l'ombre. */
  background: var(--bg-primary);
  /* En HAUT, l'écart n'est pas le même qu'ailleurs, et ce n'est pas un oubli.
     « Monte-la au même niveau que le bloc des boutons. » La tablette est la
     SŒUR de la colonne principale dans .crea-plan-travail : elles démarrent
     toutes deux au même y. Ce qui décalait le panneau vers le bas, c'était les
     10 px d'écart, appliqués aussi en haut.
     La valeur juste n'est donc pas zéro mais --espace-2 (4 px) : c'est
     exactement le `py-1` de #app-header (src/app.js), donc la distance entre
     le haut de la rangée et le haut du bloc des boutons. Le panneau démarre au
     même y qu'eux. Si le rembourrage de l'en-tête change un jour, celui-ci
     doit suivre — c'est la même mesure, pas une coïncidence. */
  padding: var(--espace-2) var(--carte-marge) var(--carte-marge);
  gap: var(--carte-marge);
  align-items: stretch;
  /* SANS CECI, LE TIROIR NE PEUT PAS RÉTRÉCIR, ET C'EST LUI QUI POUSSAIT LA
     CROIX DE FERMETURE HORS DE L'ÉCRAN.

     « Le navigateur est mal structuré au niveau de l'agrandissement : la croix
      de fermeture disparaît derrière la ligne d'encadrement de l'app. »

     Un élément flex a `min-width: auto` par défaut : il refuse de descendre
     sous la taille de son contenu. Quand « Développer » demandait un panneau
     large de toute la fenêtre, le tiroir prenait cette largeur À SON TOUR et
     débordait de la rangée — en emportant le coin haut-droit du panneau, où
     vit la croix.

     Mesuré, fenêtre de 1440 : le panneau commençait à x=274 (après la barre
     latérale), finissait à 1714, et la croix se retrouvait à 265 px hors écran.
     Avec min-width:0, le tiroir rend la place qu'il n'a pas : panneau ramené à
     1156, bord droit à 1430, croix à 19 px À L'INTÉRIEUR du bord.

     Le panneau porte le reste de la réponse (max-width:100%, flex-shrink:1,
     voir renderPreview) : les deux vont ensemble, l'un sans l'autre ne corrige
     rien — vérifié en les retirant tour à tour. */
  min-width: 0;
}

/* Ceux qui se posent seuls dans une rangée (Contexte vivant, Journal vivant,
   Fichiers du chat) n'ont pas de conteneur pour eux : ils portent leur écart.
   Pas de hauteur : ce sont des éléments flex, étirés par leur rangée. Leur
   ajouter height:100 % EN PLUS de la marge les ferait dépasser du bas
   d'exactement deux écarts. */
.crea-panneau-carte--seule {
  /* LES QUATRE CÔTÉS, ET LE CÔTÉ CHAT EST LE PLUS IMPORTANT DES QUATRE.
     La marge de gauche était à zéro : ces panneaux touchaient le plan de
     travail, et le filet du bord gauche — seul pixel entre les deux — se
     lisait comme l'ancienne ligne de séparation, celle qu'on cherchait
     justement à supprimer. « Tu les as quand même laissés liés à l'espace
     chat, du coup ça donne un rendu moche. »
     Même écart partout, comme le tiroir juste au-dessus. Le haut garde
     --espace-2 pour la même raison que lui : c'est le py-1 de #app-header. */
  margin: var(--espace-2) var(--carte-marge) var(--carte-marge) var(--carte-marge);
}
@media (max-width: 768px) {
  .crea-panneau-carte--seule { margin: 0; border-radius: 0; }
}

/* La poignée de redimensionnement de l'Aperçu déborde de 4 px à gauche
   (left:-4px) pour être attrapable des deux côtés du trait. Il n'y a plus de
   trait, et overflow:hidden lui coupait la moitié qui dépasse : elle rentre
   dans le panneau et suit sa courbe. */
.crea-panneau-carte .preview-resize-handle {
  left: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}

/* --- Artifacts panel --- */
/* Le border-left ne sert plus qu'au plein écran mobile et au mode plein écran,
   qui ne portent pas la classe carte ; ailleurs .crea-panneau-carte repasse
   devant avec sa bordure complète. */
.artifacts-panel { animation:slideRight .28s cubic-bezier(.16,1,.3,1); border-left:1px solid var(--border); }
/* ── LE SÉLECTEUR APERÇU / CODE DE L'ARTEFACT ────────────────────────────────
   « Il a même trois onglets — Aperçu / Code / Split. Il faut le supprimer
    définitivement, on va en créer un nouveau. »

   La rangée d'onglets (.artifact-tab) prenait une ligne entière de hauteur pour
   deux états, et donnait à Split le rang d'un onglet alors que c'est une
   DISPOSITION, pas un contenu. Elle est remplacée par un segment compact posé
   dans l'en-tête, à deux états — la forme qu'a Claude, et celle que le reste de
   CREA emploie déjà pour dire « choisi » (fond --accent-bg, texte lisible).

   Le creux du segment porte --bg-secondary : sans lui, deux boutons côte à côte
   sur le fond du panneau ne se lisent pas comme UN choix entre deux, mais comme
   deux boutons indépendants. */
.art-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  margin-right: var(--espace-3);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.art-seg-btn {
  padding: .22rem .6rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--t-dim);
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duree-2) var(--courbe), color var(--duree-2) var(--courbe);
}
/* La bascule œil / chevrons : deux icônes, pas deux mots — c'est la forme
   relevée sur le panneau de Claude. Une icône seule a besoin d'être carrée,
   sinon elle flotte dans un bouton taillé pour du texte. */
.art-seg-btn--icone {
  padding-left: var(--espace-4); padding-right: var(--espace-4);
  display: inline-flex; align-items: center; justify-content: center;
}

/* « Copier » et son menu. L'hôte est positionné pour que le menu s'ancre sous
   la flèche ; sans lui, le menu se poserait par rapport au panneau entier et
   atterrirait n'importe où. */
.art-menu-hote { position: relative; display: inline-flex; flex-shrink: 0; }
.art-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 216px; padding: var(--espace-2);
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--ombre-4);
}

/* La bascule œil / code et les commandes de fenêtre : des icônes NUES, sans
   cadre qui les entoure. « Ils ont pas de carré qui les entoure. » Un survol
   discret, l'active teintée à l'accent — rien de plus. */
.art-icone-nue {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  color: var(--t-secondary); flex-shrink: 0;
  transition: background var(--duree-2) var(--courbe), color var(--duree-2) var(--courbe);
}
.art-icone-nue:hover { background: var(--bg-secondary); color: var(--t-primary); }
.art-icone-nue.active { color: var(--accent); background: var(--accent-bg); }

/* « Copier » : un seul bouton propre, texte + chevron, pas un segment encadré.
   C'est la commande principale — elle se voit, elle ne s'entoure pas. */
.art-copier-btn {
  display: inline-flex; align-items: center; gap: var(--espace-2);
  height: 30px; padding: 0 var(--espace-4); border-radius: var(--radius-sm);
  font-size: var(--texte-2); font-weight: 500; color: var(--t-secondary);
  transition: background var(--duree-2) var(--courbe), color var(--duree-2) var(--courbe);
}
.art-copier-btn:hover, .art-copier-btn.active { background: var(--bg-secondary); color: var(--t-primary); }

.art-seg-btn:hover { color: var(--t-primary); }
.art-seg-btn.active { background: var(--accent-bg); color: var(--accent-texte); font-weight: 600; }
.art-tool-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius: var(--radius-sm); color:var(--t-dim); cursor:pointer; transition: all var(--duree-2) var(--courbe); background:transparent; border:0; }
.art-tool-btn:hover { color:var(--t-primary); background:var(--bg-glass-hov); }

/* --- Navigateur réel (rbrowser) — Preview/onglet Web ET Simplifica, même composant --- */
.rbrowser { background:var(--bg-primary); position:relative; }
/* 26px de côté tombait bien en dessous des ~44px recommandés pour un public non technique/
   âgé — relevé à 34px (compromis avec la densité de la barre d'outils, qui compte plusieurs
   boutons côte à côte). */
.rbrowser-tool-btn { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius: var(--radius-sm); color:var(--t-dim); cursor:pointer; transition: all var(--duree-2) var(--courbe); background:transparent; border:0; font-size:var(--texte-6); flex-shrink:0; }
.rbrowser-tool-btn:hover { color:var(--t-primary); background:var(--bg-glass-hov); }
.rbrowser-tool-btn.active { color:var(--accent); background:var(--accent-bg); }
/* Rangée non-scrollable (position:relative pour ancrer les menus déroulants — surtout
   pas overflow ici, sinon un dropdown positionné en dessous se ferait couper) ; la
   zone des onglets, elle, scrolle indépendamment dans .rbrowser-tabs-scroll. */
/* LA BARRE DÉBORDAIT, ET SES BOUTONS SORTAIENT DU CADRE.
   Mesuré à 900 px de fenêtre : « Extensions » dépassait de 26 px et « Menu » de
   64 px, hors du bloc, coupés par ce qui borne la page. La barre n'avait pas de
   `min-width:0` — un enfant flex ne descend jamais sous la taille de son
   contenu sans elle — et ses outils pouvaient être compressés au lieu que les
   ONGLETS défilent, ce qui est pourtant à ça que sert leur `overflow-x:auto`.
   La barre accepte d'être contrainte, la liste d'onglets prend ce qui RESTE
   (base 0) et défile, les outils ne se compressent jamais.

   ET QUAND MÊME ÇA NE SUFFIT PAS, ELLE PASSE À LA LIGNE. Dans un studio étroit
   la barre fait 219 px : sept outils de 34 px n'y tiennent pas, même onglets
   repliés à zéro. Trois issues possibles — couper (ce qu'elle faisait), cacher
   dans un menu (une capacité qu'on ne trouve plus), ou grandir. Elle grandit.
   Rien n'est masqué, rien n'est coupé, et `overflow` reste `visible` : les deux
   panneaux qui s'ancrent dedans seraient rognés par un conteneur défilant. */
.rbrowser-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; padding:.35rem .5rem; border-bottom:1px solid var(--border); background:var(--bg-secondary); position:relative; min-width:0; }
.rbrowser-tabs-scroll { display:flex; align-items:center; gap:.25rem; overflow-x:auto; min-width:0; flex:1 1 0; scrollbar-width:none; }
.rbrowser-tab { display:flex; align-items:center; gap:.35rem; max-width:180px; min-width:90px; padding:.3rem .55rem; border-radius: var(--radius-sm); font-size:.72rem; color:var(--t-dim); cursor:pointer; background:transparent; transition: all var(--duree-2) var(--courbe); }
.rbrowser-tab:hover { background:var(--bg-glass-hov); }
.rbrowser-tab.active { color:var(--t-primary); background:var(--bg-primary); border:1px solid var(--border); }
.rbrowser-tab-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.rbrowser-tab-close { flex-shrink:0; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--t-faint); border:0; background:transparent; cursor:pointer; font-size:var(--texte-3); line-height:1; }
.rbrowser-tab-close:hover { background:var(--bg-glass-hov); color:var(--t-primary); }
.rbrowser-tab-new { flex-shrink:0; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius: var(--radius-sm); color:var(--t-dim); border:0; background:transparent; cursor:pointer; font-size:var(--texte-6); }
.rbrowser-tab-new:hover { color:var(--t-primary); background:var(--bg-glass-hov); }
.rbrowser-tabs-spacer { flex:1; min-width:.5rem; }
.rbrowser-urlbar { display:flex; align-items:center; gap:.35rem; padding:.4rem .5rem; border-bottom:1px solid var(--border); background:var(--bg-primary); position:relative; }
/* Onglet Web du chat (renderRealBrowser(..., {seamless:true})) : mêmes onglets/barre
   d'adresse fonctionnels, mais sans fond ni ligne de séparation qui les feraient
   ressortir comme une boîte à part — se fond avec l'espace chat au lieu de
   l'encadrer visiblement. */
.rbrowser-seamless.rbrowser { background:transparent; }
.rbrowser-seamless .rbrowser-tabs,
.rbrowser-seamless .rbrowser-urlbar { background:transparent; border-bottom-color:transparent; }
.rbrowser-nav-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:var(--t-dim); cursor:pointer; transition: all var(--duree-2) var(--courbe); background:transparent; border:0; font-size:var(--texte-6); flex-shrink:0; }
.rbrowser-nav-btn:hover:not(:disabled) { color:var(--t-primary); background:var(--bg-glass-hov); }
.rbrowser-nav-btn:disabled { opacity:.3; cursor:default; }
.rbrowser-url-input { flex:1; min-width:0; padding:.4rem .9rem; border-radius: var(--radius-rond); border:1px solid var(--border); background:var(--bg-input); color:var(--t-primary); font-size:.75rem; outline:none; }
.rbrowser-url-input:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg); }
.rbrowser-dropdown { position:absolute; top:100%; right:.5rem; z-index:20; min-width:200px; max-width:260px; margin-top:.25rem; padding:.3rem; border-radius: var(--radius); border:1px solid var(--border); background:var(--bg-secondary); box-shadow: var(--ombre-3); display:flex; flex-direction:column; gap:.1rem; }
.rbrowser-dropdown-item { display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; padding:.45rem .6rem; border-radius: var(--radius-sm); border:0; background:transparent; color:var(--t-primary); font-size:.75rem; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rbrowser-dropdown-item svg { flex-shrink:0; }
.rbrowser-dropdown-item .rbrowser-dropdown-check { margin-left:auto; }
.rbrowser-dropdown-item:hover { background:var(--bg-glass-hov); }
.rbrowser-dropdown-add { color:var(--accent); font-weight:600; border-top:1px solid var(--border); margin-top:.2rem; padding-top:.5rem; }
.rbrowser-dropdown-empty { padding:.45rem .6rem; font-size:.72rem; color:var(--t-faint); }
.preview-resize-handle { position:absolute; left:-4px; top:0; bottom:0; width:8px; cursor:ew-resize; z-index:10; background:transparent; }
.preview-resize-handle:hover, .preview-resize-handle.dragging { background:var(--accent); opacity:.35; }
/* Même poignée que .preview-resize-handle, mais sur le bord DROIT du panneau chat des
   Studios (Simplifica compris) — la ligne entre la colonne chat et le carré atelier. */
.studio-chat-resize-handle { position:absolute; right:-4px; top:0; bottom:0; width:8px; cursor:ew-resize; z-index:10; background:transparent; }
.studio-chat-resize-handle:hover, .studio-chat-resize-handle.dragging { background:var(--accent); opacity:.35; }
.rbrowser-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:.7rem; padding:2rem; text-align:center; color:var(--t-secondary); }
.rbrowser-empty-icon { font-size:var(--texte-13); opacity:.35; }
.rbrowser-empty-title { font-size:.85rem; font-weight:600; color:var(--t-primary); }
.rbrowser-empty-text { font-size:.72rem; opacity:.7; max-width:320px; line-height:1.5; }
.rbrowser-configdev-btn { margin-top:.3rem; padding:.45rem 1rem; border-radius: var(--radius-sm); font-size:.75rem; font-weight:600; color:var(--t-primary); background:var(--bg-input); border:1px solid var(--border); cursor:pointer; transition: all var(--duree-2) var(--courbe); }
.rbrowser-configdev-btn:hover { background:var(--bg-glass-hov); border-color:var(--accent); }
.rbrowser-annotate-canvas { position:absolute; inset:0; z-index:5; cursor:crosshair; touch-action:none; }
.rbrowser-annotate-toolbar { position:absolute; top:8px; right:8px; z-index:6; display:flex; gap:var(--espace-2); }
.rbrowser-picker-tip { position:absolute; z-index:8; pointer-events:none; max-width:280px; padding:.4rem .55rem; border-radius: var(--radius-sm); background:rgba(15,23,42,.94); color:#e2e8f0; font:500 10.5px/1.5 ui-monospace,monospace; box-shadow: var(--ombre-2); }
.rbrowser-picker-tip b { color:#93c5fd; }
.rbrowser-picker-tip .rbpt-section { color:#94a3b8; font-weight:700; text-transform:uppercase; font-size:var(--texte-1); margin-top:.3rem; }
/* Rectangle de sélection glissé sur le flux en direct (voir _rbStartPick/_rbUpdatePickRect) */
.rbrowser-picker-rect { position:absolute; z-index:7; border:2px solid #3b82f6; background:rgba(59,130,246,.15); pointer-events:none; }
.rbrowser-live-img { user-select:none; }

/* .art-launch* retiré — voir retire/extraits/bloc-apercu-interactif.md */

/* Sliders des paramètres de génération */
.gp-range { accent-color:var(--accent); height:4px; cursor:pointer; }

/* LA RÉFLEXION, DANS LE FIL — un bloc qu'on déplie, pas une fenêtre par-dessus.
   Le CSS existait déjà et n'était appliqué à rien : le seul balisage qui portait
   `.reasoning-body` vivait dans le tiroir de travail, lequel n'était plus
   dessiné. Ces règles servent enfin. */
.reasoning-box { margin:0 0 var(--espace-6); border:1px solid var(--border); border-radius: var(--radius-sm); background:var(--bg-secondary); overflow:hidden; }
.reasoning-label {
  padding:var(--espace-5) var(--espace-7); font-size:var(--texte-4); color:var(--t-dim);
  display:flex; align-items:center; gap:var(--espace-3); user-select:none; cursor:pointer;
  list-style:none; transition:color var(--duree-1) var(--courbe);
}
.reasoning-label::-webkit-details-marker { display:none; }
.reasoning-label:hover { color:var(--t-secondary); }
/* Le chevron dit dans quel sens ça va ; il tourne au lieu de sauter. */
.reasoning-label::after {
  content:'▶'; font-size:var(--texte-1); opacity:.45; margin-left:auto;
  transition:transform var(--duree-2) var(--courbe);
}
.reasoning-box[open] > .reasoning-label::after { transform:rotate(90deg); }
.reasoning-duree { color:var(--t-faint); font-variant-numeric:tabular-nums; }
.reasoning-body {
  padding:var(--espace-3) var(--espace-8) var(--espace-6); font-size:var(--texte-5);
  color:var(--t-dim); border-top:1px solid var(--border);
  max-height:22rem; overflow-y:auto;
}
/* Elle pense encore : le bloc respire tant que rien n'est écrit. */
.reasoning-box[open] > .reasoning-label > svg { opacity:.7; }
/* CREA × CREA — système de duel interne (conscience émergente) */
.duel-wrap { border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; margin-bottom:.8rem; }
.duel-phase-bar { padding:.4rem .75rem; font-size:.72rem; color:var(--t-faint); background:var(--bg-secondary); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.4rem; }
.duel-box { border-bottom:1px solid var(--border); background:var(--bg-secondary); }
.duel-box:last-child { border-bottom:0; }
.duel-box summary { padding:.5rem .75rem; font-size:.76rem; cursor:pointer; display:flex; align-items:center; gap:.5rem; list-style:none; user-select:none; }
.duel-box summary::-webkit-details-marker { display:none; }
.duel-box summary::before { content:'▶'; font-size:.6rem; opacity:.5; transition: transform var(--duree-2) var(--courbe); flex-shrink:0; }
.duel-box[open] summary::before { transform:rotate(90deg); }
.duel-a summary { color:#3b82f6; }
.duel-b summary { color:#ef4444; }
.duel-body { padding:.4rem .9rem .75rem; font-size:.8rem; color:var(--t-secondary); border-top:1px solid var(--border); }
.duel-synth-label { padding:.4rem .75rem; font-size:.72rem; color:var(--accent); background:var(--bg-secondary); border-top:1px solid var(--border); font-weight:600; letter-spacing:.01em; }
.duel-juge-wrap { border-top:1px solid rgba(245,158,11,.2); background:rgba(245,158,11,.04); }
.duel-juge-row { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem .75rem; border-bottom:1px solid rgba(245,158,11,.08); }
.duel-juge-row:last-child { border-bottom:0; }
.dj-label { font-size:.7rem; font-weight:700; color:#f59e0b; flex-shrink:0; min-width:72px; padding-top:.1rem; letter-spacing:.01em; }
.dj-val { font-size:.76rem; color:var(--t-secondary); line-height:1.5; font-style:italic; }
.dj-drift .dj-label { color:#ef4444; }
.dj-drift .dj-val { color:#fca5a5; }
.dj-questions .dj-label { color:#a78bfa; }
.dj-questions .dj-val { color:#c4b5fd; font-style:normal; }
.duel-q-chips { display:flex; flex-wrap:wrap; gap:.4rem; padding:.4rem .75rem .55rem; border-top:1px solid rgba(167,139,250,.15); background:rgba(167,139,250,.04); }
.duel-q-chip { border:1px solid rgba(167,139,250,.35); background:rgba(167,139,250,.08); color:#c4b5fd; border-radius: var(--radius-rond); padding:.25rem .75rem; font-size:.72rem; cursor:pointer; transition: all var(--duree-2) var(--courbe); text-align:left; line-height:1.4; }
.duel-q-chip:hover { background:rgba(167,139,250,.18); border-color:#a78bfa; color:#fff; }
.duel-a-reply summary { color:#60a5fa; }
.duel-compare-bar { padding:.35rem .75rem; background:var(--bg-secondary); border-top:1px solid var(--border); }
.duel-compare-btn { font-size:.72rem; color:var(--t-faint); background:none; border:1px solid var(--border); border-radius: var(--radius-rond); padding:.2rem .65rem; cursor:pointer; transition: all var(--duree-2) var(--courbe); }
.duel-compare-btn:hover { color:var(--t-primary); border-color:var(--accent); }
.duel-spiral-btn { font-size:.72rem; color:#f59e0b; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.35); border-radius: var(--radius-rond); padding:.2rem .65rem; cursor:pointer; transition: all var(--duree-2) var(--courbe); margin-left:.4rem; }
.duel-spiral-btn:hover { background:rgba(245,158,11,.18); border-color:#f59e0b; }
/* Progress dots */
.duel-progress { display:flex; align-items:center; gap:var(--espace-2); margin-left:auto; margin-right:.4rem; }
.dp-dot { width:6px; height:6px; border-radius:50%; background:var(--border); transition: all var(--duree-2) var(--courbe); }
.dp-dot.dp-done { background:var(--accent); }
.dp-dot.dp-active { background:#f59e0b; box-shadow:0 0 4px #f59e0b88; }
/* Export button */
.duel-export-btn { background:none; border:none; color:var(--t-faint); cursor:pointer; font-size:.8rem; padding:.1rem .3rem; border-radius: var(--radius-xs); transition: all var(--duree-2) var(--courbe); flex-shrink:0; }
.duel-export-btn:hover { color:var(--t-primary); background:var(--bg-hover,rgba(255,255,255,.06)); }
/* Rating buttons */
.duel-rate-btns { display:inline-flex; gap:var(--espace-1); margin-left:auto; }
.dr-btn { background:none; border:none; cursor:pointer; font-size:.75rem; opacity:.4; padding:.1rem .25rem; border-radius: var(--radius-xs); transition: all var(--duree-2) var(--courbe); }
.dr-btn:hover { opacity:1; background:rgba(255,255,255,.06); }
.dr-btn.dr-on { opacity:1; }
/* B reply box */
.duel-b-reply summary { color:#f87171; }
/* Miroir utilisateur */
.dj-miroir .dj-label { color:#22d3ee; }
.dj-miroir .dj-val { color:#67e8f9; font-style:italic; }
/* ===== MOTEUR ÉPISTÉMIQUE — Audit de vérité ===== */
.epis-wrap { border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; margin-top:.6rem; font-size:.75rem; }
.epis-wrap.epis-auto { border-style:dashed; border-color:rgba(99,102,241,.35); }
.epis-header { display:flex; align-items:center; gap:.5rem; padding:.4rem .75rem; cursor:pointer; list-style:none; background:var(--bg-secondary); flex-wrap:wrap; gap:.3rem .6rem; }
.epis-header::-webkit-details-marker { display:none; }
.epis-score { font-weight:700; font-size:.78rem; }
.epis-by { margin-left:auto; font-size:.68rem; flex-shrink:0; }
.epis-body { padding:.5rem .75rem; display:flex; flex-direction:column; gap:.35rem; border-top:1px solid var(--border); }
/* Claims */
.epis-claims { display:flex; flex-direction:column; gap:.2rem; }
.epis-claim { display:flex; align-items:baseline; gap:.4rem; }
.epis-claim-status { flex-shrink:0; font-size:.78rem; }
.epis-claim-text { color:var(--t-secondary); font-size:.75rem; line-height:1.4; }
/* Sections */
.epis-section { display:flex; align-items:flex-start; gap:.4rem; flex-wrap:wrap; }
.epis-label { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--t-faint); white-space:nowrap; padding-top:.1rem; }
/* Tags */
.epis-tag { display:inline-flex; font-size:.68rem; padding:.1rem .45rem; border-radius: var(--radius-rond); border:1px solid var(--border); color:var(--t-faint); background:var(--bg-tertiary,rgba(255,255,255,.03)); }
.epis-tag-zone { color:#818cf8; border-color:rgba(129,140,248,.35); background:rgba(129,140,248,.07); }
.epis-zones { display:inline-flex; flex-wrap:wrap; gap:.25rem; }
/* Conseil */
.epis-conseil { color:var(--t-dim); font-size:.75rem; padding:.3rem .5rem; border-radius: var(--radius-sm); background:rgba(255,255,255,.03); border-left:2px solid var(--accent); }
/* Tables interactives (tri + filtre) dans les réponses */
.md-table-wrap { overflow-x:auto; margin:.6rem 0; }
.md-table-toolbar { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.md-table-filter { width:100%; max-width:260px; font-size:.78rem; padding:.32rem .6rem; border-radius: var(--radius-sm); background:var(--bg-input); color:var(--t-primary); border:1px solid var(--border); outline:none; }
.md-table-filter:focus { border-color:var(--accent); }
.md-table-count { font-size:.7rem; color:var(--t-faint); white-space:nowrap; }
.md-th-sortable { cursor:pointer; user-select:none; white-space:nowrap; transition: color var(--duree-1) var(--courbe); }
.md-th-sortable:hover { color:var(--accent); }
.md-th-sortable::after { content:"⇅"; opacity:.3; margin-left:.3rem; font-size:.72em; }
.md-th-sortable[data-sort="asc"]::after { content:"↑"; opacity:1; color:var(--accent); }
.md-th-sortable[data-sort="desc"]::after { content:"↓"; opacity:1; color:var(--accent); }

/* Contrôles du Studio Design (style / format / nombre) */
.design-chip { font-size:.7rem; padding:.18rem .55rem; border-radius: var(--radius-rond); cursor:pointer; color:var(--t-dim); background:var(--bg-secondary); border:1px solid var(--border); transition: all var(--duree-1) var(--courbe); white-space:nowrap; }
.design-chip:hover { color:var(--t-primary); border-color:var(--border-hov); }
.design-chip-on { color:var(--accent); background:var(--accent-bg); border-color:var(--accent); font-weight:500; }

/* Puces de suggestions de questions de suivi */
.sug-chip {
  font-size:.74rem; padding:.3rem .65rem; border-radius: var(--radius-rond); cursor:pointer;
  color:var(--accent); background:var(--accent-bg); border:1px solid transparent;
  transition: all var(--duree-2) var(--courbe); text-align:left; line-height:1.2;
}
.sug-chip:hover { border-color:var(--accent); transform:translateY(-1px); }

/* Sources — une seule pastille : favicons empilés + « N sources ».
   Au clic, un popover compact ancré dessous liste les sources. */
/* Dans la rangée d'actions : poussée à l'extrémité droite, sur la même ligne. */
.src-badge-wrap { position:relative; display:inline-block; }
.chat-actions .src-badge-wrap { margin-left:auto; }
.chat-actions .src-panel { left:auto; right:0; }
.src-badge {
  display:inline-flex; align-items:center; gap:var(--espace-4);
  padding:var(--espace-1) var(--espace-2); border:none; background:transparent;
  cursor:pointer; font-family:inherit; border-radius: var(--radius-rond);
  transition: background var(--duree-2) var(--courbe);
}
.src-badge:hover { background:var(--bg-secondary); }
.src-avs { display:inline-flex; align-items:center; }
.src-av {
  width:15px; height:15px; border-radius:50%; position:relative;
  border:1.5px solid var(--bg-primary); background:var(--bg-secondary);
  object-fit:cover; flex-shrink:0;
}
.src-av + .src-av { margin-left:-6px; }
.src-badge-count { font-size:var(--texte-2); color:var(--t-faint); white-space:nowrap; }
.src-badge:hover .src-badge-count { color:var(--t-secondary); }

.src-panel {
  position:absolute; top:calc(100% + 5px); left:0; z-index:60;
  min-width:190px; max-width:300px; max-height:260px; overflow-y:auto;
  padding:var(--espace-2); border-radius: var(--radius);
  background:var(--bg-primary); border:1px solid var(--border);
  box-shadow: var(--ombre-3); scrollbar-width:thin;
}
.src-row {
  display:flex; align-items:center; gap:var(--espace-4);
  padding:var(--espace-3) var(--espace-4); border-radius: var(--radius-sm); text-decoration:none;
  color:var(--t-secondary); font-size:var(--texte-3); transition: background var(--duree-1) var(--courbe);
}
.src-row:hover { background:var(--bg-secondary); }
.src-row-fav { width:13px; height:13px; border-radius: var(--radius-xs); flex-shrink:0; }
.src-row-host { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Cards riches : YouTube, articles, produits */
.rich-card-btn {
  font-size:var(--texte-2); padding:var(--espace-2) var(--espace-5); border-radius: var(--radius-rond); cursor:pointer;
  color:var(--accent); background:var(--accent-bg); border:1px solid rgba(16,163,127,.25);
  transition: all var(--duree-2) var(--courbe); font-family:inherit; white-space:nowrap;
}
.rich-card-btn:hover { border-color:var(--accent); opacity:.8; }

/* Diagramme en cours d'écriture : on montre le source, pas un dessin qui se
   refait soixante fois par seconde (voir buildCodeBlockHtml). Même allure qu'un
   bloc de code, pour que le passage au vrai diagramme ne surprenne pas. */
.mermaid-en-cours {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--texte-3); line-height: 1.6;
  padding: var(--espace-6) var(--espace-7); margin: var(--espace-4) 0;
  border-radius: var(--radius); overflow-x: auto;
  background: var(--bg-tertiary); color: var(--t-dim);
  border: 1px solid var(--border);
}

/* ── FICHES PRODUIT / LIEU ──────────────────────────────────────────────────
   Ces deux cartes se réduisaient à un nom et un prix dans un rectangle : sans
   `image`, tout le bandeau haut disparaissait et il ne restait qu'une étiquette.
   Le champ était vide la plupart du temps (voir fetch_url, src/app.js : l'URL de
   l'image réelle était jetée avant d'arriver au modèle).
   Règle tenue ici : une fiche n'a jamais de trou. À défaut de photo, elle porte
   un visuel construit à partir de son nom — même nom, même couleur, toujours. */

.crea-fiche {
  display:flex; flex-direction:column;
  width:min(340px, 100%); margin:var(--espace-5) 0;
  border:1px solid var(--border); border-radius: var(--radius-lg);
  background:var(--bg-secondary); overflow:hidden;
  transition: border-color var(--duree-2) var(--courbe), transform var(--duree-2) var(--courbe), box-shadow var(--duree-2) var(--courbe);
}
.crea-fiche-lien { text-decoration:none; color:inherit; display:flex; }
.crea-fiche:hover {
  border-color:var(--border-hov);
  transform:translateY(-2px);
  box-shadow: var(--ombre-3);
}
/* Un appareil sans survol (doigt) ne doit pas hériter d'un état de survol collant. */
@media (hover:none) { .crea-fiche:hover { transform:none; box-shadow:none; } }
@media (prefers-reduced-motion:reduce) { .crea-fiche { transition:none } .crea-fiche:hover { transform:none } }

/* Plusieurs fiches d'affilée se rangent côte à côte au lieu de s'empiler sur
   toute la hauteur de l'écran — c'est le cas d'usage réel : « trouve-moi trois
   restaurants ». Le sélecteur ne prend QUE des suites de fiches. */
.crea-fiche + .crea-fiche { margin-top:var(--espace-5) }
@supports (display:grid) {
  .crea-fiches-grille {
    display:grid; gap:var(--espace-6); margin:var(--espace-5) 0;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  }
  .crea-fiches-grille .crea-fiche { width:auto; margin:0 }
}

.crea-fiche-visuel { position:relative; width:100%; background:var(--bg-tertiary); overflow:hidden; flex-shrink:0 }
.crea-fiche-visuel img { width:100%; height:100%; object-fit:cover; display:block }
/* L'image distante a échoué (403, lien mort) : on retombe sur le visuel de repli
   au lieu de laisser l'icône d'image cassée du navigateur. */
.crea-fiche-cassee img { display:none }
.crea-fiche-cassee { background:linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary)) }

.crea-fiche-sansimage {
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--f1), var(--f2));
}
.crea-fiche-mono {
  font-size:var(--texte-13); font-weight:700; letter-spacing:.02em;
  color:rgba(255,255,255,.95); text-shadow:0 1px 12px rgba(0,0,0,.22);
}
.crea-fiche-glyphe { position:absolute; right:10px; bottom:8px; font-size:var(--texte-6); opacity:.55 }

.crea-fiche-badge {
  position:absolute; top:10px; right:10px;
  background:rgba(17,17,17,.72); color:#fff; backdrop-filter:blur(6px);
  font-size:var(--texte-1); font-weight:600; letter-spacing:.01em;
  padding:var(--espace-2) var(--espace-5); border-radius: var(--radius-rond);
}

.crea-fiche-corps { padding:var(--espace-6) var(--espace-7) var(--espace-7); display:flex; flex-direction:column; gap:var(--espace-3); flex:1 }
.crea-fiche-entete { display:flex; align-items:flex-start; gap:var(--espace-4) }
.crea-fiche-titre {
  flex:1; min-width:0;
  font-size:var(--texte-5); font-weight: 700; line-height:1.3; color:var(--t-primary);
}
.crea-fiche-meta { font-size:var(--texte-2); color:var(--t-faint) }
.crea-fiche-desc {
  font-size:var(--texte-3); line-height:1.5; color:var(--t-secondary); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.crea-fiche-note { display:flex; align-items:center; gap:var(--espace-3); font-size:var(--texte-2); color:var(--t-secondary) }
.crea-fiche-etoiles { color:#f59e0b; letter-spacing:.5px; font-size:var(--texte-2) }
.crea-fiche-vides { color:var(--t-faint); opacity:.45 }
.crea-fiche-note b { color:var(--t-primary); font-weight: 700 }
.crea-fiche-avis { color:var(--t-faint) }

.crea-fiche-lignes { display:flex; flex-direction:column; gap:var(--espace-2); margin-top:var(--espace-1) }
.crea-fiche-ligne { display:flex; gap:var(--espace-4); align-items:flex-start; font-size:var(--texte-3); color:var(--t-dim); line-height:1.4 }
.crea-fiche-ligne > span:first-child { opacity:.6; flex-shrink:0 }
.crea-fiche-ligne a { color:var(--t-dim); text-decoration:none; border-bottom:1px dotted var(--border-hov) }
.crea-fiche-ligne a:hover { color:var(--accent); border-bottom-color:var(--accent) }

.crea-fiche-statut {
  font-size:var(--texte-1); font-weight: 700; padding:var(--espace-1) var(--espace-4); border-radius: var(--radius-rond); flex-shrink:0; white-space:nowrap;
}
.crea-fiche-statut.est-ouvert { background:rgba(34,197,94,.14); color:#16a34a }
.crea-fiche-statut.est-ferme  { background:rgba(239,68,68,.12); color:#dc2626 }

.crea-fiche-pied {
  display:flex; align-items:center; justify-content:space-between; gap:var(--espace-5);
  margin-top:auto; padding-top:var(--espace-5);
}
.crea-fiche-prix { font-size:var(--texte-7); font-weight:700; color:var(--t-primary); letter-spacing:-.01em }
.crea-fiche-cta {
  font-size:var(--texte-3); font-weight:600; padding:var(--espace-3) var(--espace-7); border-radius: var(--radius-rond);
  color:var(--accent); background:var(--accent-bg); border:1px solid rgba(16,163,127,.28);
  text-decoration:none; white-space:nowrap; transition: all var(--duree-2) var(--courbe);
}
.crea-fiche-cta:hover { background:var(--accent); color:#fff; border-color:var(--accent) }

/* Panel de présence — actions de transformation */
.presence-action-btn {
  font-size:var(--texte-2); padding:var(--espace-2) var(--espace-5); border-radius: var(--radius-rond); cursor:pointer;
  color:var(--t-secondary); background:var(--bg-primary); border:1px solid var(--border);
  transition: all var(--duree-2) var(--courbe); font-family:inherit; white-space:nowrap;
}
.presence-action-btn:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }

/* Mode focus : SUPPRIMÉ — code archivé dans retire/extraits/mode-focus.md.
   (.chat-form-focus, plus bas, est autre chose : une des sept formes de la
   fenêtre de chat, toujours active.) */

/* --- Lightbox --- */
.lightbox {
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.92); cursor:zoom-out; animation:fadeIn .2s ease-out;
}
.lightbox img { max-width:92vw; max-height:92vh; border-radius: var(--radius-sm); }

/* --- Model badge colors --- */
.model-openai   { color:#10a37f; } .model-anthropic { color:#d97706; }
.model-deepseek { color:#6366f1; } .model-google    { color:#4285f4; }
.model-local    { color:#22c55e; }
.model-groq     { color:#f55036; } .model-mistral   { color:#ff7000; }
.model-xai      { color:#1a1a1a; } .model-cerebras  { color:#7c3aed; }
.model-sambanova { color:#0ea5e9; } .model-perplexity { color:#20b2aa; }
.model-together  { color:#ff6b6b; } .model-cohere    { color:#39c5bb; }
.model-fireworks { color:#ff4500; } .model-openrouter { color:#6d28d9; }

/* --- Responsive --- */
@media (max-width:768px) {
  /* Le tiroir occupe --crea-sb-w (78% de la largeur d'écran, plafonné à 420px
     pour les tablettes — cf. la définition de la variable), PAS tout l'écran : c'est exactement la distance dont l'animation de poussée
     décale le contenu (.main-pushed), donc la carte du contenu reste visible
     à droite — comme dans la référence. En 100% la poussée décalait quelque
     chose d'entièrement recouvert. Pas de !important sur la largeur : les
     tiroirs la posent en style inline avec la même variable. */
  #sidebar { position:fixed; z-index:40; }

  /* ---- Rythme commun à TOUTES les barres latérales, mobile uniquement ----
     Chat, Studios, Espaces, Créatif et Menu partagent le même emplacement
     physique mais sont rendus par cinq fonctions distinctes. Plutôt que de
     répéter le même habillage dans chacune (et de l'oublier dans la
     prochaine), la structure de la référence est posée ici une seule fois :
     rangées à 44px (minimum tactile), libellés lisibles, titres de section
     qui ressemblent à des titres. Desktop n'est pas concerné. */

  /* Rangées pleine largeur = les vraies lignes cliquables de chaque tiroir.
     Volontairement PAS "#sidebar button" : les pastilles de couleur et les
     petits boutons en ligne (« + ouvrir », ✕ d'un onglet) deviendraient des
     ovales de 44px au milieu d'une ligne. */
  #sidebar button.w-full,
  #sidebar [data-conv-sheet],
  #sidebar [data-conv],
  #sidebar [data-tab],
  #sidebar [data-studio-quick] {
    min-height: 44px;
  }

  /* Libellés de ligne : 12/12.5/13px → 15px. Les tailles plus petites
     (badges, compteurs, « ● actif ») gardent leur rôle secondaire. */
  #sidebar .text-\[12px\],
  #sidebar .text-\[12\.5px\],
  #sidebar .text-\[13px\] { font-size: var(--texte-6); }

  /* Titres de section : la capitale 10px se lisait comme une légende. */
  #sidebar .text-\[10px\].uppercase { font-size: var(--texte-3); letter-spacing: .04em; }

  /* Garde-fou : un tiroir ne défile jamais horizontalement. Une icône dont la
     taille n'est pas appliquée retombe sur la taille intrinsèque du SVG (~300px)
     et pousse la largeur du tiroir ; à 280px ça se voit tout de suite. Ne
     change rien aux icônes correctement dimensionnées. */
  #sidebar { overflow-x: hidden; }
  #sidebar svg { max-width: 100%; }
  .sidebar-backdrop { position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.5); }
  .artifacts-panel { position:fixed; right:0; top:0; bottom:0; z-index:35; width:100%!important; max-width:100%!important; }

  /* Les modales ne sont PLUS forcees en plein ecran ici. Il y avait a cet
     endroit une liste de 27 identifiants a qui on imposait
     width/height/max-height:100% et border-radius:0 — c'est exactement le
     « les affiches s'affichent en plein ecran alors que ca devrait etre un
     bloc » remonte par l'usager. Une liste ecrite a la main, en plus : 13
     modales ajoutees depuis n'y ont jamais figure, donc l'app avait deux
     comportements selon l'age de la modale.
     La forme est maintenant decidee par la classe .crea-modale et le palier
     html.uie-tier-phone du moteur (voir plus bas) : une feuille ancree en
     bas, qui se lit comme un bloc pose sur l'ecran. Un seul endroit, et plus
     aucune liste a tenir a jour. */
}

/* ANTI-ZOOM iOS — CAUSE RACINE du « la page s'agrandit quand je tape » :
   tout champ de saisie en dessous de 16px declenche un zoom AUTO au focus sur iPhone.
   On force 16px UNIQUEMENT sur mobile pour les champs ; l'apparence desktop ne bouge pas.
   Le !important est necessaire pour battre les styles inline (ex: font-size:var(--texte-5) du composer). */
@media (max-width:767px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  textarea,
  select,
  [contenteditable="true"] { font-size:var(--texte-7) !important; }
}

/* ===== CADRE APP-LIKE — la HAUTEUR est gérée par crea-adapt.js (source unique) =====
   crea-adapt.js règle #app = 100dvh, et = var(--crea-vh) quand le clavier est ouvert
   (classe .crea-kb-open) — var(--crea-vh) = visualViewport.height exclut déjà le clavier,
   donc la barre de saisie arrive PILE au-dessus du clavier (header + composer figés,
   seules les zones .overflow-y-auto défilent). Les zones sûres (encoche / barre home) sont
   aussi gérées par crea-adapt. Ici on empêche juste le scroll/rebond de page et on garantit
   que les colonnes flex peuvent rétrécir. Zoom verrouillé via le meta viewport. */
html { overflow: hidden; }
html, body { overscroll-behavior: none; }
#app, #app main { min-height: 0; }

/* Bas des barres de saisie — valeur unique pour l'accueil ET le fil de chat.
   Définie ici en dur pour ne pas dépendre du chargement de crea-adapt.js, qui
   la redéfinit à l'identique. Le plancher couvre Android et tout écran sans
   retrait système. */
:root { --crea-composer-bottom: 6px; }

/* iPhone — zone sûre (encoche / barre home). N'a d'effet que sur les appareils concernés. */
@supports (padding:env(safe-area-inset-bottom)) {
  /* La barre d'accueil du système ne fait que ~13px de haut alors que le
     retrait annoncé en fait ~34 : on en récupère 16, il en reste ~18, la
     barre arrive au ras de la pastille sans passer dessous. */
  :root { --crea-composer-bottom: max(6px, calc(env(safe-area-inset-bottom) - 16px)); }
  /* #messages-container n'est PAS collé au bas de l'écran : la barre de saisie
     est son frère et vient après, et c'est ELLE qui porte le retrait système.
     Le mettre ici aussi le comptait deux fois et remontait tout le contenu. */
  #messages-container { padding-bottom:1rem; }
  .chat-files-panel, .input-suggest { padding-bottom:env(safe-area-inset-bottom); }
}

/* ORDINATEUR : il n'y a pas de barre d'accueil système sous la fenêtre.
   Les 6px ci-dessus sont réglés POUR elle — sur téléphone ils laissent la
   barre au ras de la pastille sans passer dessous, et c'est juste. Sur un
   écran d'ordinateur il n'y a rien en dessous : la barre touche alors le bord
   de la fenêtre. Mesuré : bas de la barre à 900px sur un écran de 900px, la
   ligne « CREA peut faire des erreurs » à 14px du bord.
   Cette règle vient APRÈS le @supports ci-dessus, et il faut qu'elle y reste :
   sur bureau env(safe-area-inset-bottom) vaut 0, donc ce bloc y recalcule 6px,
   et c'est la dernière déclaration qui gagne.
   Bornée à ≥640px : le téléphone garde son réglage, qui répond à un autre
   problème. Valeur unique, tenue à l'identique dans crea-adapt.js. */
/* ── ET « TOUT EN BAS » VEUT DIRE TOUT EN BAS ─────────────────────────────
   « Une fois qu'on a ouvert le chat, qu'on a commencé à discuter, la barre de
    questions doit descendre tout en bas. Sauf qu'elle laisse un petit espace
    tout en bas, alors que normalement elle doit vraiment descendre tout en
    bas. »
   Elle valait 20 px sur écran d'ordinateur — et la note juste au-dessus disait
   pourtant « la barre touche alors le bord de la fenêtre » : le commentaire et
   la valeur ne disaient pas la même chose. Mesuré : bas de la barre à 793 px
   dans une fenêtre de 813. Le téléphone garde ses 6 px, qui répondent à un
   autre problème — la barre d'accueil du système passe dessous. */
@media (min-width: 640px) {
  :root { --crea-composer-bottom: 0px; }
}

/* LA BARRE AU MILIEU, PAS LE GROUPE.
   « La barre de questions dans chat et work, elle est trop basse, elle n'est
     pas bien alignée au milieu. Et ce n'est pas qu'une impression. »
   Ce n'était pas qu'une impression : #welcome-screen centre l'ENSEMBLE
   salutation + barre. La barre étant dessous, elle tombe sous la ligne
   médiane — mesuré 63px trop bas, avec 284px de vide sous elle contre 260px
   au-dessus de la salutation. Le groupe était centré ; la barre, non.
   C'est la barre qu'on regarde et dans laquelle on écrit : c'est elle qui doit
   être au milieu. On donne à la salutation et au vide qui la suit la même
   hauteur souple ; la barre se retrouve pile entre les deux, la salutation
   juste au-dessus d'elle. Pas de nœud ajouté au DOM : le second bloc souple
   est un ::after.
   Bornée à ≥640px : sur téléphone la barre descend VOLONTAIREMENT tout en bas
   (règles plus loin), pour rester sous le pouce. */
@media (min-width: 640px) {
  #welcome-screen > #welcome-greeting { flex: 1 1 0; justify-content: flex-end; }
  /* L'écart `mb-6` entre la salutation et la barre vit ENTRE les deux blocs
     souples : il ne pèse donc que d'un côté et décalait la barre de sa moitié
     — 12px, mesurés. On le reflète sous la barre, où il ne se voit pas (le
     bloc est vide) mais où il rétablit la symétrie : écart 0.
     1.5rem est la valeur de `mb-6` porté par #welcome-greeting dans app.js ;
     la garde `tiroir-plus` remesure le centrage, et parlera si l'un des deux
     bouge sans l'autre. */
  #welcome-screen::after { content: ''; flex: 1 1 0; margin-top: 1.5rem; }
}

/* --- Print --- */
@media print {
  body { background:white; color:black; }
  #sidebar, header, .glass, .status-bar { display:none!important; }
  .artifacts-panel { display:none!important; }
}

@keyframes pulse { 0%,100%{opacity:1;}50%{opacity:.4;} }
.anim-pulse-soft { animation: pulse 1.4s ease-in-out infinite; }

/* ===== LOGO CRÉA VIVANT (doré, animé dans toute l'app) =====
   .crea-logo-live : respiration douce + halo doré, partout (premium, discret).
   .crea-logo-think : pulsation plus marquée pendant que l'IA répond. */
/* Plus de rotation : le logo ne doit jamais partir de travers. Une respiration
   d'intensité (halo + très léger grossissement) suffit à dire « ça travaille »,
   sans déformer la marque. */
@keyframes creaLogoThink {
  0%,100% { transform: scale(1);    filter: drop-shadow(0 0 1px rgba(16,163,127,.35)); }
  50%     { transform: scale(1.06); filter: drop-shadow(0 0 8px rgba(16,163,127,.75)); }
}
/* statique par défaut (premium, perf) ; s'illumine au survol */
.crea-logo-live  { transition:  transform var(--duree-3) var(--courbe), filter var(--duree-3) var(--courbe); }
.crea-logo-live:hover { transform: scale(1.06); filter: drop-shadow(0 0 5px rgba(16,163,127,.55)); }
/* motion PORTEUSE DE SENS : pulse doré pendant que l'IA répond */
/* ===== LOGO DU MODE AGENTIQUE — une signature de mouvement par studio =====
   Le logo est inséré en SVG dans la page (cf. creaLogoSvg) : c'est la seule façon
   d'atteindre les anneaux un par un. transform-box:view-box est ICI le point
   crucial — avec fill-box, l'origine se compterait depuis la boîte de chaque
   ellipse et les anneaux partiraient hors cadre, le bug d'origine. */
.crea-logo-svg { display:block; overflow:visible }
.crea-logo-svg .cl-r,
.crea-logo-svg .cl-noyau,
.crea-logo-svg .cl-coque { transform-origin:100px 100px; transform-box:view-box }

/* A — Orbite : les trois anneaux tournent sur eux-mêmes, à des vitesses différentes */
@keyframes clSpin    { to { transform:rotate(360deg) } }
@keyframes clSpinInv { to { transform:rotate(-360deg) } }
.cl-orbite .cl-r1 { animation:clSpin    9s   linear infinite }
.cl-orbite .cl-r2 { animation:clSpinInv 13s  linear infinite }
.cl-orbite .cl-r3 { animation:clSpin    6.5s linear infinite }

/* B — Respiration : aucune rotation, le logo inspire et le noyau bat */
@keyframes clSouffle { 0%,100% { transform:scale(1); opacity:.92 } 50% { transform:scale(1.06); opacity:1 } }
@keyframes clBattement { 0%,100% { transform:scale(1) } 50% { transform:scale(1.35) } }
.cl-respiration .cl-coque { animation:clSouffle   2.6s ease-in-out infinite }
.cl-respiration .cl-noyau { animation:clBattement 2.6s ease-in-out infinite }

/* C — Traçage : les orbites se dessinent l'une après l'autre, puis s'effacent */
@keyframes clTrace { 0% { stroke-dashoffset:352 } 55% { stroke-dashoffset:0 } 100% { stroke-dashoffset:-352 } }
.cl-tracage ellipse { stroke-dasharray:176 176; animation:clTrace 2.8s ease-in-out infinite }
.cl-tracage .cl-r2 ellipse { animation-delay:-.45s }
.cl-tracage .cl-r3 ellipse { animation-delay:-.9s }

/* D — Comète : les orbites s'effacent au second plan, un point les parcourt */
@keyframes clLueur { 0%,100% { opacity:.3 } 50% { opacity:1 } }
.cl-comete ellipse   { opacity:.3 }
.cl-comete .cl-noyau { animation:clLueur 2s ease-in-out infinite }

@media (prefers-reduced-motion: reduce) {
  .crea-logo-svg *, .crea-logo-svg { animation:none !important }
}

/* Le logo ne bouge NULLE PART, y compris pendant que CREA travaille : c'était le
   dernier endroit où il flottait encore, en haut de la barre latérale. Le mouvement
   reviendra ici, et seulement ici, quand le thème d'animation du mode agentique
   aura été choisi. La classe reste posée par le rendu pour servir d'accroche. */
.crea-logo-think { animation: none; }
/* Les anneaux du logo tournent chacun sur eux-mêmes, directement dans le SVG
   (public/crea-logo.svg) — vivant par nature, pas besoin de faire tourner
   l' entier en plus depuis la page (ça doublerait le mouvement). */
.crea-gen-logo { width:20px; height:20px; flex-shrink:0; animation: creaStepBreath 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .crea-gen-logo { animation: none; opacity: .8; } }
.crea-gen-time { font-size:var(--texte-2); color:var(--t-faint); font-variant-numeric:tabular-nums; margin-left:var(--espace-1); }
@media (prefers-reduced-motion: reduce) {
  .crea-logo-live, .crea-logo-think { animation: none; transition: none; }
}

/* --- Scroll chat ---
   scroll-behavior:smooth retiré — causait des sauts au reload/IDB hydrate (scrollIntoView instant ignoré)
   overflow-anchor:auto ancre le bas du chat quand la textarea grandit (évite le tremblement à la saisie) */
#messages-container { overflow-x:hidden; overflow-y:auto; overflow-anchor:auto; }

/* Sidebar : will-change évite le reflow du content pendant l'animation transform */
#sidebar { will-change:transform; }

/* Composer bar : contain layout évite que la textarea-resize propage un reflow au chat */
.crea-composer-bar { contain:layout; }

/* Chat épuré — sans avatars, messages pleine largeur */
/* ── LA LARGEUR DU FIL, DÉCIDÉE À UN SEUL ENDROIT ────────────────────────
   « L'écran de l'espace chat, il faut le réduire en largeur dans tous les
   espaces. Les bords, ils sont un peu plus aérés chez Claude, et là ça prend
   toute la largeur : ça laisse pas respirer. »
   Le fil ET sa barre de question portaient `max-w-4xl` — 896 px — chacun de son
   côté. Deux valeurs pour une seule colonne, c'est deux valeurs qui finissent
   par diverger : le jour où l'une bouge, le texte et le champ ne s'alignent
   plus. Une variable, deux lecteurs. */
:root { --crea-fil-max: 48rem; }
.crea-largeur-fil { max-width: var(--crea-fil-max); }
.chat-thread { width:100%; }
.chat-message-row {
  display:flex;
  flex-direction:column;
  margin-bottom:var(--espace-10);
}
.group\/convrow:hover .conv-select-cb { opacity:1 !important; }
.chat-message-ai  { align-items:flex-start; }
.chat-message-user{ align-items:flex-end; }
.chat-message-ai  .chat-message-content { text-align:left; }
.chat-message-user .chat-message-content { text-align:right; }
.chat-message-content {
  min-width:0;
  overflow-wrap:anywhere;
}
.chat-message-content-ai   { width:100%; max-width:100%; }
.chat-message-content-user { max-width:min(80%, 720px); }
.chat-avatar {
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--radius);
  overflow:hidden;
  background:var(--avatar-color, #10a37f);
  background:linear-gradient(135deg, var(--avatar-color, #10a37f), color-mix(in srgb, var(--avatar-color, #10a37f) 64%, #111827));
  border:1px solid var(--border);
  border-color:color-mix(in srgb, var(--avatar-color, #10a37f) 36%, var(--border));
  box-shadow: var(--ombre-2);
  color:#fff;
}
.chat-message-ai > .chat-avatar { grid-column:1; justify-self:end; }
.chat-message-user > .chat-avatar { grid-column:3; justify-self:start; }
.chat-avatar-img,
.chat-avatar-logo {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.chat-avatar-logo { padding:var(--espace-3); object-fit:contain; }
.chat-avatar-emoji {
  font-size:var(--texte-9);
  line-height:1;
  font-weight:700;
}
.chat-avatar-settings {
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;
  border-radius: var(--radius-xl);
}
.chat-avatar-settings .chat-avatar-emoji { font-size:var(--texte-12); }
.chat-actions {
  display:flex;
  flex-wrap:wrap;
  gap:var(--espace-2);
  margin-top:var(--espace-2);
  opacity:1;
  pointer-events:auto;
}
.chat-actions-user { justify-content:flex-end; }
.chat-actions-ai { justify-content:flex-start; align-items:center; }
.msg-action-chip {
  display:inline-flex;
  align-items:center;
  gap:var(--espace-2);
  min-height:28px;
  border-radius: var(--radius-sm);
  padding:var(--espace-2) var(--espace-4);
  font-size:var(--texte-2);
  color:var(--t-faint);
  border:1px solid transparent;
  transition: background var(--duree-2) var(--courbe), color var(--duree-2) var(--courbe), border-color var(--duree-2) var(--courbe);
}
.msg-action-chip:hover {
  color:var(--t-secondary);
  background:var(--bg-secondary);
  border-color:var(--border);
}
.img-action-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius: var(--radius-sm);
  font-size:var(--texte-3);
  background:rgba(0,0,0,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  cursor:pointer;
  backdrop-filter:blur(4px);
  transition: background var(--duree-2) var(--courbe);
}
.img-action-btn:hover { background:rgba(0,0,0,.75); }
.avatar-choice {
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--radius);
  background:var(--bg-input);
  border:1px solid var(--border);
  font-size:var(--texte-8);
  transition: transform var(--duree-1) var(--courbe), border-color var(--duree-1) var(--courbe);
}
.avatar-choice:hover { transform:translateY(-1px); border-color:var(--accent); }
.avatar-choice-active { outline:2px solid var(--accent); outline-offset:1px; }
.avatar-swatch {
  width:28px;
  height:28px;
  border-radius: var(--radius-rond);
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 1px var(--border);
}
.avatar-swatch-active { box-shadow:0 0 0 2px var(--accent); }
.crea-welcome-logo { box-shadow:0 12px 36px rgba(16,163,127,.12); }
/* Empty-state icon: scale SVG from icon size to ~40px */
.crea-icon-xl svg { width:40px; height:40px; }

@media (max-width:640px) {
  .chat-message-row { margin-bottom:var(--espace-7); }
  .chat-message-content-user { max-width:88%; }
  .chat-message-content-ai   { max-width:100%; }
  .msg-action-btn { width:26px; height:26px; }
  .msg-action-chip { min-height:26px; font-size:var(--texte-1); padding:var(--espace-2) var(--espace-3); }
}

/* --- Sidebar border glow on hover --- */
.sidebar-item:hover::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%;
  width:2px; background:var(--accent); border-radius:0 2px 2px 0; opacity:.5;
}
.sidebar-item.active::before { opacity:1; }

/* Bouton microphone — pro, discret au repos, expressif quand actif */
.mic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--t-faint);
  transition:  all var(--duree-2) var(--courbe);
  flex-shrink: 0;
}
.mic-btn:hover {
  color: var(--t-secondary);
  background: rgba(0,0,0,0.06);
}
.mic-btn.mic-listening {
  color: #ef4444;
  background: rgba(239,68,68,0.1);
  animation: micPulse 1.5s ease-in-out infinite;
}
html.dark .mic-btn:hover { background: rgba(255,255,255,0.08); }
html.dark .mic-btn.mic-listening { background: rgba(239,68,68,0.15); }

/* LE MODE LIVE A LA MÊME FORME QUE LE MICRO, PARCE QUE C'EST LA MÊME NATURE.
   Il portait un disque rose plein en dégradé et un halo qui pulsait sans
   arrêt. Dans une barre où le « + », le micro et les onglets sont des traits
   sur du vide, c'était la seule chose qui criait — et elle criait tout le
   temps, y compris quand personne ne parle. Le dessin ne dit plus « regarde
   moi » ; il dit ce que fait le bouton, et le survol répond. */
.voice-mode-btn {
  color: var(--t-faint);
  background: transparent;
}
.voice-mode-btn:hover {
  color: var(--t-secondary);
  background: rgba(0,0,0,0.06);
}
html.dark .voice-mode-btn:hover { background: rgba(255,255,255,0.08); }

@keyframes micPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* Rail d'icônes — mode réduit */
/* Quick studio buttons in sidebar */
.studio-quick-btn {
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
}
.studio-quick-btn:hover { background: rgba(0,0,0,0.07); }
html.dark .studio-quick-btn { background: rgba(255,255,255,0.04); }
html.dark .studio-quick-btn:hover { background: rgba(255,255,255,0.09); }
.studio-quick-active {
  background: rgba(16,163,127,0.12);
  border: 1px solid rgba(16,163,127,0.35);
}
html.dark .studio-quick-active { background: rgba(16,163,127,0.18); }

/* --- Chips actifs dans la toolbar input --- */
.input-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  transition: opacity .15s, transform .1s;
  font-size: var(--texte-4); border: 1px solid transparent;
}
.input-chip:hover { opacity: .75; transform: scale(1.05); }
.input-chip:active { transform: scale(.93); }
.input-chip-green  { background: rgba(34,197,94,.12);  color: #16a34a; border-color: rgba(34,197,94,.3); }
.input-chip-purple { background: rgba(139,92,246,.12); color: #7c3aed; border-color: rgba(139,92,246,.3); }
.input-chip-red    { background: rgba(239,68,68,.12);  color: #dc2626; border-color: rgba(239,68,68,.3); }
.input-chip-amber  { background: rgba(245,158,11,.12); color: #d97706; border-color: rgba(245,158,11,.3); }

/* --- Carousel infini des studios rapides --- */
.studio-carousel-wrap {
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.studio-carousel-track {
  display: flex;
  gap: var(--espace-3);
  width: max-content;
  animation: studio-scroll 22s linear infinite;
  cursor: default;
}
.studio-carousel-wrap:hover .studio-carousel-track {
  animation-play-state: paused;
}
@keyframes studio-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.rail-btn {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius: var(--radius);
  color:var(--t-faint); transition: all var(--duree-2) var(--courbe); flex-shrink:0;
}
.rail-btn:hover { background:rgba(0,0,0,0.06); color:var(--t-secondary); }
.rail-btn svg { width:18px; height:18px; }
html.dark .rail-btn:hover { background:rgba(255,255,255,0.07); }

/* Icônes dans la sidebar pleine */
.sidebar-icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius: var(--radius-sm);
  color:var(--t-faint); transition: all var(--duree-2) var(--courbe); flex-shrink:0;
}
.sidebar-icon-btn:hover { background:rgba(0,0,0,0.06); color:var(--t-secondary); }
.sidebar-icon-btn svg { width:16px; height:16px; }

/* --- CREA LM : badge Bibliothèque + bouton Retenir --- */
.crea-biblio-badge {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.7rem; color:var(--t-dim); opacity:.72;
  margin-top:var(--espace-4); user-select:none;
  padding:.2rem .55rem; border-radius: var(--radius-rond);
  background:var(--accent-bg); border:1px solid rgba(16,163,127,.15);
  transition: opacity var(--duree-2) var(--courbe);
}
.crea-biblio-badge:hover { opacity:1; }

.crea-retenir {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.7rem; color:var(--t-dim); opacity:.5;
  margin-top:var(--espace-3); padding:.2rem .55rem; border-radius: var(--radius-rond);
  background:none; border:1px solid var(--border); cursor:pointer;
  transition: all var(--duree-2) var(--courbe); font-family:inherit;
}
.crea-retenir:hover { opacity:.95; border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.crea-retenir.retenu { opacity:.8; border-color:rgba(34,197,94,.3); color:var(--success); background:rgba(34,197,94,.06); cursor:default; }

/* Modèle maison 🌱 dans le sélecteur */
.model-maison { color:#22c55e; }
.model-maison-badge {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.6rem; font-weight:600; color:#22c55e;
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2);
  border-radius: var(--radius-rond); padding:.1rem .45rem; margin-left:.3rem;
}

/* Items conversations */
.sidebar-item-hover:hover { background:rgba(0,0,0,0.05); }
.sidebar-item-active { background:rgba(0,0,0,0.08) !important; }
html.dark .sidebar-item-hover:hover { background:rgba(255,255,255,0.06); }
html.dark .sidebar-item-active { background:rgba(255,255,255,0.1) !important; }

/* Sidebar sombre façon référence (--rail-bg, cf. renderSidebar) : le noir sur noir
   de .hover\:bg-black\/5 est invisible sur ce fond plus sombre que --bg-secondary. */
.sidebar-dark { border-right:1px solid var(--rail-border); }
.sidebar-dark .hover\:bg-black\/5:hover { background:rgba(255,255,255,0.07) !important; }

/* Menu contextuel conversation / profil */
/* LES LIGNES DE MENU SONT RESSERRÉES D'UN CRAN — 10px de haut à 8px.
   Le menu du bloc compte s'ouvre VERS LE HAUT depuis le pied de la barre : sa
   hauteur ne se lit pas comme une longueur mais comme une montée, et il
   remontait jusqu'à 274px du haut d'un écran de 900. Trois entrées ont été
   retirées ou déplacées ; le cran de moins par ligne finit le travail sans
   toucher à la taille du texte ni à la surface cliquable, qui reste au-dessus
   du minimum tactile. */
.conv-menu-item {
  display:flex; align-items:center; gap:var(--espace-5);
  width:100%; padding:var(--espace-4) var(--espace-7);
  font-size:var(--texte-4); text-align:left;
  color:var(--t-secondary); transition: background var(--duree-1) var(--courbe);
}
.conv-menu-item:hover { background:rgba(0,0,0,0.05); }
/* LE TRAIT DE SÉPARATION NE TOUCHE PAS LES BORDS.
   Un 
 pleine largeur coupe la carte en deux et se voit plus que ce qu'il
   sépare : il redessine le bord du menu à chaque groupe. Rentré de douze
   pixels, il fait ce qu'on lui demande — marquer une respiration — sans
   prétendre au statut de bordure. C'est ainsi que les menus soignés le font,
   et c'était le reproche : « les traits, ils ne vont pas au bout de chaque
   côté ». */
.conv-menu-sep {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--espace-2) var(--espace-6);
}
html.dark .conv-menu-item:hover { background:rgba(255,255,255,0.06); }
.conv-menu-item svg { width:16px; height:16px; flex-shrink:0; opacity:.7; }
.conv-menu-danger { color:#ef4444; }
.conv-menu-danger:hover { background:rgba(239,68,68,0.08); }
.conv-menu-btn:hover { background:rgba(0,0,0,0.08); }
html.dark .conv-menu-btn:hover { background:rgba(255,255,255,0.1); }

/* LE TRAIT DE LA RÉFÉRENCE — 1,5 ET NON 2.
 *
 * Les icônes du dépôt sont dessinées en 2 ; celles des captures sont en 1,5.
 * C'est la différence entre un panneau qui pèse et un panneau qui respire, et
 * c'est ce qui se voit d'abord quand on met les deux écrans côte à côte.
 *
 * Une règle, pas cent icônes redessinées : `stroke-width` posé en CSS l'emporte
 * sur l'attribut de présentation écrit dans le SVG, donc les deux répertoires
 * (I.* et _icon()) s'alignent d'un coup — et sans toucher au reste de
 * l'application, qui garde son trait. Le sélecteur descend jusqu'aux enfants :
 * un  qui porte son propre stroke-width ne l'écouterait pas autrement.
 *
 * Les bouts arrondis viennent de la même comparaison : la référence n'a pas un
 * seul angle vif au bout d'un trait. */
.settings-modal svg, .settings-modal svg * {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Le logo de marque et les avatars ne sont pas des icônes au trait : les amincir
 * les abîmerait. */
.settings-modal img, .settings-modal .avatar-choice svg { stroke-width: initial; }

/* LA RANGÉE DE MÉMOIRE RESTE PROPRE JUSQU'À CE QU'ON L'APPROCHE.
 * La référence ne montre aucun bouton dans ses listes : le verbe apparaît au
 * survol. Sans ça, une corbeille rouge sur chaque ligne fait lire la page
 * comme un écran de suppression au lieu d'un écran de lecture. Au clavier, le
 * focus l'appelle aussi — sinon le verbe serait inatteignable sans souris. */
.crea-mem-verbe { opacity: 0; transition: all var(--duree-1) var(--courbe); }
.crea-mem-rangee:hover .crea-mem-verbe,
.crea-mem-verbe:focus-within { opacity: 1; }
@media (hover: none) { .crea-mem-verbe { opacity: 1; } }

/* MOUVEMENT RÉDUIT — LE RÉGLAGE AGIT VRAIMENT.
 *
 * CREA respectait déjà `prefers-reduced-motion`, mais sans laisser choisir :
 * qui trouvait l'interface trop remuante devait aller changer un réglage de
 * son système d'exploitation. La référence propose « Système / Réduit », et
 * ce choix doit AGIR — on a retiré trois interrupteurs aujourd'hui parce
 * qu'ils ne faisaient rien.
 *
 * On ne met pas 0s : une durée nulle supprime les événements transitionend,
 * dont du code dépend parfois pour enchaîner. 1ms est instantané à l'œil et
 * laisse les événements partir.
 *
 * Le curseur qui clignote au bout d'une réponse en cours d'écriture est
 * épargné : ce n'est pas une décoration, c'est ce qui dit « ça continue ». */
html.crea-mouvement-reduit *,
html.crea-mouvement-reduit *::before,
html.crea-mouvement-reduit *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}
html.crea-mouvement-reduit .crea-curseur-frappe {
  animation-duration: 1s !important;
  animation-iteration-count: infinite !important;
}

/* Onglet paramètres actif */
.settings-tab-active { background:rgba(16,163,127,0.1) !important; }
html.dark .settings-tab-active { background:rgba(16,163,127,0.15) !important; }

/* Boutons d'action sur messages (comme ChatGPT) */
.msg-action-btn {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius: var(--radius-sm);
  color:var(--t-dim); transition: all var(--duree-1) var(--courbe);
}
.msg-action-btn:hover { background:rgba(0,0,0,0.06); color:var(--t-secondary); }
html.dark .msg-action-btn:hover { background:rgba(255,255,255,0.08); }
.msg-action-btn svg { width:15px; height:15px; }
.msg-action-active { color:var(--accent) !important; }

/* Mode voix — orbe animé */
.voice-orb-wrap { position:relative; width:160px; height:160px; display:flex; align-items:center; justify-content:center; }
.voice-orb {
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #34c4a0, #10a37f 60%, #0a7a5e);
  box-shadow:0 0 60px rgba(16,163,127,0.4);
  transition: transform var(--duree-3) var(--courbe);
}
.voice-orb-active { animation:orbPulse 1.4s ease-in-out infinite; }
@keyframes orbPulse {
  0%,100% { transform:scale(1); box-shadow:0 0 60px rgba(16,163,127,0.4); }
  50%      { transform:scale(1.12); box-shadow:0 0 90px rgba(16,163,127,0.65); }
}
.voice-ring {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(16,163,127,0.25);
}
.voice-ring-1 { animation:ringExpand 2.4s ease-out infinite; }
.voice-ring-2 { animation:ringExpand 2.4s ease-out infinite .8s; }
.voice-ring-3 { animation:ringExpand 2.4s ease-out infinite 1.6s; }
@keyframes ringExpand {
  0%   { transform:scale(0.75); opacity:.8; }
  100% { transform:scale(1.5);  opacity:0; }
}

/* .voice-pulse ET @keyframes voicePulse ÉTAIENT DÉCLARÉS DEUX FOIS.
   Ligne 455, la bonne version : opacity et transform, « composite-only, pas de
   repaint » — c'est écrit juste au-dessus. Ici, quatre-vingt-dix lignes plus
   bas, une seconde déclaration en box-shadow, qui gagnait par l'ordre de la
   feuille. L'optimisation était donc annulée par sa propre copie, en silence,
   et le halo rose n'était plus le halo qu'on croyait avoir écrit.
   Une seule déclaration, celle du haut. Ce qui reste porte .voice-pulse : les
   pastilles d'état du mode vocal, où un battement d'opacité est juste et où un
   anneau de 8 px déborderait d'un point de 8 px. */

.anim-fade-up { animation: fadeUp 0.4s ease-out; }
@keyframes fadeUp {
  0% { opacity:0; transform: translateY(8px); }
  100% { opacity:1; transform: translateY(0); }
}

/* Points de saisie (IA avenante en train d'écrire) */
.typing-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  display:inline-block;
  animation: typingBounce 1.3s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay:.18s; }
.typing-dot:nth-child(3) { animation-delay:.36s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity:.4; }
  30% { transform: translateY(-5px); opacity:1; }
}

/* Bannière nouveauté */
.banner-new {
  display:flex; align-items:center; gap:var(--espace-5);
  padding:var(--espace-4) var(--espace-8); font-size:var(--texte-4);
  background:linear-gradient(90deg, rgba(16,163,127,0.08), rgba(52,196,160,0.04));
  border-bottom:1px solid var(--border);
}

/* Welcome centré dans le scroll area */
#messages-container:has(> div.flex) {
  display:flex; flex-direction:column;
}

/* ============================================================
 * MICRO-INTERACTIONS VIVANTES — le site « respire », premium et tactile.
 * Global mais sûr : transitions (n'affectent pas la mise en page) + feedback
 * d'appui momentané. Les classes Tailwind plus spécifiques gardent la priorité.
 * ============================================================ */
/* transform retiré du global — causait des repaints sur tous les boutons en continu */
button { transition:  background-color var(--duree-1) var(--courbe), border-color var(--duree-1) var(--courbe), color var(--duree-1) var(--courbe), opacity var(--duree-1) var(--courbe); }
button:not([disabled]):active { transform: scale(.97); transition: transform var(--duree-1) var(--courbe); }
a { transition:  color var(--duree-2) var(--courbe), opacity var(--duree-2) var(--courbe), background-color var(--duree-2) var(--courbe); }

/* Items de barre latérale : léger glissement vivant au survol */
.sidebar-item-hover { transition:  background-color var(--duree-2) var(--courbe); }

/* Puces d'action & chips : douceur */
.msg-action-chip, .file-chip { transition: all var(--duree-2) var(--courbe); }
.file-chip:hover { transform: translateY(-1px); }

/* Toasts : ombre colorée selon le type (plus vivant) */

/* Apparition douce des cartes média de la Médiathèque */
.media-card, [data-mode] { will-change: transform; }

/* Respiration discrète de l'accent (badges « live ») */
@keyframes creaBreathe { 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
.crea-live-dot { animation: creaBreathe 2.4s ease-in-out infinite; }

/* LE BALAYAGE LUMINEUX DU PORTAIL EST PARTI AVEC LE PORTAIL. La liste des
   studios ne se dessine plus en tuiles à dégradé animé : voir renderStudioPortal
   et .portail-studio plus bas. Une règle sans balise à qui l'appliquer se lit
   comme une mise en forme qui existe encore. */

/* L'orbe de la barre (logo vivant) respire au repos */
.crea-logo-live { transition:  filter var(--duree-3) var(--courbe), transform var(--duree-3) var(--courbe); }
.crea-logo-live:hover { transform: scale(1.05); }

/* Accessibilité + premium : anneau de focus CLAVIER net (jamais à la souris),
 * teinté par l'univers du studio courant. Purement additif (rien retiré). */
:focus-visible { outline: 2px solid var(--crea-universe, var(--accent, #10a37f)); outline-offset: 2px; border-radius: var(--radius-xs); }
input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable="true"]:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--crea-universe, var(--accent, #10a37f));
}

/* Respect des préférences d'accessibilité : on coupe les animations si demandé */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ── LES BOUTONS SYSTÈME SONT DANS LA PAGE, ET ILS PRENNENT DE LA PLACE ──────
   Sur Windows la fenêtre de bureau n'a pas de cadre : réduire / agrandir /
   fermer sont peints PAR-DESSUS le haut de la page, à droite. Rien ne le dit au
   document — pour lui, la page commence à zéro.

   En temps normal la barre de fenêtre (#crea-electron-titlebar) occupe ces
   36 px et pousse l'application d'autant : personne ne passe dessous. Mais si
   elle ne se construit pas, l'en-tête remonte tout en haut et ses boutons de
   droite — éphémère, [⋯] — finissent SOUS les trois boutons système. On les
   voit à moitié, on clique à côté, et rien n'indique pourquoi.

   Cette règle est le repli, et elle ne coûte rien quand la barre est là (le
   :not l'éteint). 138 px = la largeur des trois boutons Windows, plus une
   marge : elle ne dépend pas d'un thème, seulement de la fenêtre. */
body.crea-electron-win:not(.crea-electron-titlebar) #app-header { padding-right: 138px; }

/* ============================================================
 * CREA VISUAL POLISH — layout harmony, icons, typography
 * ============================================================ */

/* ── 1. SIDEBAR / WORKSPACE BORDER ────────────────────────────────────────
   LE TRAIT PORTE MAINTENANT TOUTE LA SÉPARATION, DONC IL SE VOIT.

   « Comme on a mis une couleur homogène, on ne voit plus la ligne de séparation
    de la barre latérale. Il faut bien la faire. »

   C'est mon défaut, et il vient d'un raisonnement à moitié fait. En unifiant la
   barre sur le fond de l'espace chat, j'ai écrit que « ce qui sépare n'est plus
   la couleur mais le liseré » — sans regarder ce liseré. Il valait 60 % de
   --border, une atténuation qui n'avait de sens que TANT QUE la couleur faisait
   le gros du travail. La couleur partie, il ne restait qu'un trait fantôme.

   Le trait est donc plein. « Doux » se règle par la valeur de --border, qui est
   déjà discrète dans les deux thèmes — pas en effaçant à moitié ce qui est
   devenu la seule frontière.

   ET IL EST DANS LA BARRE, PAS À CÔTÉ. Deuxième signalement : « je t'ai demandé
   de lui remettre son trait, il n'y est pas, il est transparent. » Exact, et
   deux fois de suite j'avais corrigé la COULEUR d'un trait qui n'était pas
   peint du tout.

   Mesuré au pixel, capture d'écran à l'appui : la barre s'arrête à x=264, la
   règle calculait bien `rgb(213,213,213) 1px 0 0 0`… et le pixel 264 valait
   (252,252,252), le fond de la page. Une ombre externe se pose HORS de la boîte,
   donc sur le territoire du voisin — et le voisin, peint après, la recouvrait.
   Elle était présente dans la feuille de style et absente de l'écran.

   Une bordure, elle, est DANS la boîte : elle est peinte avec la barre, et le
   voisin commence après. Rien ne peut passer par-dessus. C'est la même ligne,
   au même endroit, mais à un pixel qui lui appartient. */
#sidebar {
  border-right: 1px solid var(--sidebar-trait, var(--border)) !important;
  box-shadow: none;
}
/* ...SAUF SUR MOBILE, où ce trait est précisément « la ligne ».
   Elle longe toute la hauteur de la barre et CONTINUE TOUT DROIT là où la carte
   s'incurve — donc elle traverse la courbe et casse l'emboîtement.
   Sur mobile la séparation est déjà faite par la carte elle-même : elle est
   plus claire que la barre (~20 niveaux, la valeur de la référence) et son
   bord porte la courbe. Ce trait n'ajoute rien, il ne fait que la barrer. */
@media (max-width: 768px) {
  #sidebar { border-right: none !important; box-shadow: none !important; }
}

/* ── 2. INNER BORDER-RADIUS — workspace comme une carte posée sur le rail ── */
/* L'outer row prend la couleur du rail pour que le radius "creux" soit visible.

   ELLE NE VISE QUE LA RANGÉE QUI CONTIENT VRAIMENT LE PLAN DE TRAVAIL.
   « Sur la page d'inscription il y a un gros bloc gris qui vient s'afficher
    derrière les blocs d'inscription et le bloc d'image qui défile. »

   Mesuré dans un vrai navigateur : 1440 × 765 en #F6F6F6, sans aucun style
   dans le HTML. La règle ne désignait rien de particulier — elle attrapait
   TOUT élément portant ces quatre classes utilitaires, et les écrans de
   connexion et d'inscription portent exactement les mêmes. Ils héritaient donc
   du fond destiné au rail, derrière le formulaire et le diaporama.

   Sélectionner par classes utilitaires, c'est peindre par coïncidence de noms.
   Le `:has()` rétablit l'intention : cette rangée-ci, celle qui contient le
   plan de travail — et elle seule. */
.crea-plan-travail {
  /* LE SOL SUR LEQUEL LES CARTES SE POSENT — ET IL EST DEVENU VISIBLE.
     Il valait --bg-secondary, et ça n'avait aucune conséquence tant que les
     barres et les panneaux touchaient leurs voisins : on n'en voyait rien.
     Maintenant qu'ils sont détachés des quatre côtés, ce sol se voit dans
     chaque écart — et --bg-secondary contre --bg-primary, c'est une bande
     grise autour de chaque carte. Mesuré en clair : 246 contre 252.
     C'est exactement le défaut déjà corrigé sur le tiroir des panneaux de
     droite, et par le même geste : « sans ça, l'écart montre --bg-secondary,
     ce qui fabrique un cadre plein autour de chaque carte. Au même fond que
     les cartes, il ne reste que le filet et l'ombre. »
     Ce que ça retire : l'effet de rayon « creux » du plan de travail, qui
     demandait un sol d'une autre couleur pour se voir. C'est le prix, et il
     est voulu — cet effet était précisément ce qui donnait l'air « collé ». */
  background: var(--bg-primary);
}
/* Le workspace principale est une carte avec arrondis en haut-gauche/bas-gauche */
/* NOTE : #main-workspace n'existe dans AUCUN fichier de l'application — ni dans
   src/app.js, ni dans le HTML. Cette règle n'a donc jamais rien peint. Elle est
   laissée telle quelle plutôt que supprimée à l'aveugle : c'est peut-être un
   identifiant prévu et jamais posé. Mais elle ne compte pas comme un acquis. */
#main-workspace {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  overflow: hidden;
  /* Légère élévation pour détacher la carte du rail */
  background: var(--bg-primary);
}

/* ── 3. SUPPRESSION DES SÉPARATEURS INTRUSIFS ── */
/* Retirer le border-top entre sections dans le chat/studios */
.crea-composer-bar {
  border-top: none !important;
}
/* Messages container — pas de séparateur en haut */
#messages-container {
  border-top: none !important;
}

/* ── 4. CONFIRMATION BUTTON ANIMATION (remplace les toasts) ── */
@keyframes btnConfirm {
  0%   { transform:scale(1); }
  30%  { transform:scale(.88); }
  60%  { transform:scale(1.08); }
  100% { transform:scale(1); }
}
.btn-confirm-flash {
  animation: btnConfirm .32s cubic-bezier(.34,1.56,.64,1);
  color: #10a37f !important;
  border-color: #10a37f !important;
}

/* ── 5. ICÔNES MESSAGE — plus grandes, plus lisibles ── */
.msg-action-chip {
  font-size: var(--texte-3) !important;
  padding: var(--espace-2) var(--espace-4) !important;
  gap: var(--espace-3) !important;
}
.msg-action-chip svg {
  width: 13px !important;
  height: 13px !important;
}

/* ── 6. TYPOGRAPHIE — plus ancrée, moins pâle ── */
/* t-dim trop pâle sur fond dark → légèrement remontée */
:root {
  --t-dim: color-mix(in srgb, var(--t-secondary) 70%, var(--t-faint) 30%);
}
/* Corps du message AI — taille lisible garantie */
.msg-content {
  font-size: var(--texte-5) !important;
  line-height: 1.65 !important;
  color: var(--t-primary) !important;
}
/* Metadata sous les messages (model, tokens) — présent mais discret */
.msg-content + p[class*="opacity-40"] {
  opacity: .5 !important;
}
/* Labels et captions dans la sidebar — pas trop pâles */
.sidebar-item-hover,
.sidebar-item-active {
  font-size: var(--texte-4);
}

/* ── 7. SCROLL — premier message ancré en HAUT, messages multiples en BAS ── */
/* overflow-anchor guide déjà le comportement.
   On ajoute align-items:flex-start pour que le 1er message colle au haut */
#messages-container {
  display: flex;
  flex-direction: column;
}

/* ── 8. ICÔNE PROFIL (rail) — plus grande et lisible ── */
#btn-user-rail {
  width: 34px !important;
  height: 34px !important;
  font-size: var(--texte-4) !important;
  font-weight: 700 !important;
}

/* ── 9. ICONS RAIL — légèrement plus grandes ── */
.rail-btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* ── 10. SUPPRESSION des borders top/bottom superflus dans les studios ── */
/* Barre de fichiers des studios */
[style*="border-bottom:1px solid var(--border)"][class*="shrink-0"],
[style*="border-top:1px solid var(--border)"][class*="shrink-0"] {
  border-color: color-mix(in srgb, var(--border) 50%, transparent) !important;
}

/* ── ...ET PLUS UN SEUL TRAIT DANS UN PANNEAU LATÉRAL ──────────────────────
   « Tu as mis une ligne pour séparer le travail en arrière-plan. Arrête de
    mettre des traits partout. Regarde comment c'est écrit en haut : en tout
    petit, de manière simple, pour laisser le plein de la page. »

   Cette règle est ICI, juste après celle du § 10 ci-dessus, et pas avec le
   reste du style des panneaux — parce que celle du § 10 est en !important et
   la vise. Entre deux déclarations !important, c'est la spécificité qui
   tranche, puis l'ordre : `.crea-panneau-carte > *[style]` pèse une classe et
   un attribut, exactement comme `[style*=…][class*=…]`. À égalité, c'est la
   dernière écrite qui gagne. La remonter de trois cents lignes la ferait
   perdre, sans rien changer d'autre — d'où ce commentaire, pour qu'un futur
   rangement par thème ne la déplace pas par propreté.

   On ne vise que les enfants DIRECTS : ce sont exactement les zones de
   structure du panneau (titre, onglets, corps, pied). Le contenu — cartes de
   tâche, blocs de code, tableaux — est plus bas dans l'arbre et garde ses
   bordures, qui sont des objets et pas des séparations.

   Et c'est la COULEUR qui passe à transparent, pas la bordure qui passe à
   none : le pixel reste réservé, donc aucune zone ne se décale d'un cran. */
.crea-panneau-carte > *[style],
.crea-panneau-carte--seule > *[style] {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* ── Menu "⋯" actions secondaires messages ── */
.msg-more-menu {
  position:absolute; bottom:34px; left:0; z-index:9000;
  min-width:188px; background:var(--bg-secondary);
  border:1px solid var(--border-hov); border-radius: var(--radius);
  box-shadow: var(--ombre-3); padding:var(--espace-2);
  flex-direction:column; gap:var(--espace-1);
  animation:fadeIn .12s ease;
}
.msg-more-menu .msg-action-btn {
  width:100% !important; height:auto !important; justify-content:flex-start !important;
  gap:var(--espace-4); padding:var(--espace-3) var(--espace-5); border-radius: var(--radius-sm); font-size:var(--texte-3);
  color:var(--t-secondary) !important; text-align:left;
}
.msg-more-menu .msg-action-btn:hover { background:var(--bg-hover,rgba(0,0,0,.06)); color:var(--t-primary) !important; }
.msg-more-menu .msg-action-btn svg { flex-shrink:0; }
.msg-more-menu hr { border:none; border-top:1px solid var(--border); margin:var(--espace-2) 0; }
.msg-more-label { display:none; }

/* --- Indicateur de génération visible --- */
.crea-gen-indicator{display:flex;align-items:center;gap:var(--espace-3);padding:var(--espace-3) 0 var(--espace-1)}
.crea-gen-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent,#10a37f);animation:crea-gen-bounce .9s ease-in-out infinite}
@keyframes crea-gen-bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
.crea-gen-label{font-size:var(--texte-3);color:var(--t-faint,#888);margin-left:var(--espace-2);letter-spacing:.02em}

/* ===================================================================
   MOBILE FIXES — crea-ai (< 640px) — correctifs visuels profonds
   =================================================================== */
@media (max-width: 639px) {

  /* HEADER : cacher les boutons secondaires sur mobile */
  /* Sur mobile on garde SEULEMENT : Partager, Nouveau chat, Suivi CREA, ⋯ */
  #btn-work-panel,
  #btn-bgtasks-panel,
  #btn-preview-chat { display: none !important; }

  /* Bascule Chat / Work : retirée sur mobile, uniquement. Le groupe entier et
     pas seulement les deux boutons, sinon il resterait un conteneur vide dans
     la rangée. Desktop et grandes surfaces la gardent : la règle est bornée à
     ce media query, comme les boutons ci-dessus. */
  [data-bar-mode-group] { display: none !important; }

  /* ACCUEIL : rien sous la barre de questions, et la barre descend tout en bas.
     Les pastilles de suggestions (Parler / Apprendre / …) disparaissent sur
     téléphone ; elles restent sur desktop, cette règle étant bornée ici. */
  #welcome-suggestions { display: none !important; }

  /* La barre au ras du bas : seul le retrait de la barre d'accueil du système
     est conservé, sinon elle serait sous le doigt. Les marges auto du bloc de
     salutation absorbent l'espace libre, ce qui garde la salutation centrée
     au-dessus au lieu de la coller à la barre. */
  #welcome-screen {
    justify-content: flex-start !important;
    /* Même bas EXACTEMENT que la barre du chat : les deux barres de saisie
       doivent s'arrêter à la même ligne, sinon passer de l'accueil au fil
       fait sauter la barre. Valeur unique : --crea-composer-bottom. */
    padding-bottom: var(--crea-composer-bottom, 6px) !important;
  }
  /* L'accueil remplit #messages-container (min-h-full) : la respiration de
     1rem du conteneur le poussait vers le haut au lieu de séparer un dernier
     message d'une barre. Sur l'accueil il n'y a ni l'un ni l'autre. */
  #messages-container:has(#welcome-screen) { padding-bottom: 0 !important; }
  #welcome-greeting { margin-top: auto !important; margin-bottom: auto !important; }
  #welcome-input-wrap { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* SIDEBAR SEARCH : compact sur mobile — évite de toucher les boutons voisins */
  #sidebar-search {
    padding-top: var(--espace-4) !important;
    padding-bottom: var(--espace-4) !important;
    font-size: var(--texte-4) !important;
    /* `--radius` est LE palier des champs — son commentaire le dit à la ligne
       où il est déclaré. Quatorze pixels étaient deux de plus, pour personne. */
    border-radius: var(--radius) !important;
  }

  /* SIDEBAR ITEMS : aligner à gauche (bug centrage sessions) */
  .sidebar-item,
  .sidebar-item-hover,
  .sidebar-item-active { text-align: left !important; justify-content: flex-start !important; }

  /* Session titles : tronquer proprement */
  [data-conv-id] .truncate,
  [data-conv-sheet] .truncate { max-width: calc(100vw - 120px); }

  /* SIDEBAR BUTTONS : éviter le shrink sur petits écrans */
  #btn-sidebar-studios, #btn-sidebar-espaces {
    min-width: 0;
    font-size: var(--texte-2) !important;
    padding-left: var(--espace-4) !important;
    padding-right: var(--espace-4) !important;
  }

  /* Studio mode toggles : keep natural size on mobile */

  /* RAIL SIDEBAR : éviter overflow sur mobile */
  #rail-sidebar { overflow-x: hidden !important; }
}

/* < 380px — très petits écrans */
@media (max-width: 380px) {
  #btn-sidebar-studios span:not(.emoji),
  #btn-sidebar-espaces span:not(.emoji) { display: none !important; }
  #btn-sidebar-studios, #btn-sidebar-espaces { min-width: 42px; justify-content: center; }
}

/* =====================================================================
   MOBILE GLASSMORPHISM HEADER + LAYOUT ADAPTATIF
   Normes : iPhone SE (375) → iPhone 16 Pro Max (430), Android 360-430px
   ===================================================================== */

/* --- Header vitre transparente (mobile uniquement) ------------------- */
@media (max-width: 639px) {
  /* Le header sort du flux et flotte EN HAUT → les messages défilent DERRIÈRE */
  /* overflow-x:clip ne crée PAS de stacking context → backdrop-filter fonctionne */
  /* main n'a plus besoin de position:relative car le header est fixed (pas absolute) */
  main { overflow-x: clip !important; }

  /* --- LA SURFACE MONTE JUSQU'AU BORD DE L'ÉCRAN ---------------------
     Mesuré sur la référence : le fond de la barre latérale y est uniforme
     depuis y=0, sans aucune rupture sous l'horloge. Sur la capture de CREA
     il y avait au contraire une bande de 62px en --bg-primary au-dessus du
     tiroir en --bg-secondary : 62px, c'est exactement le retrait système de
     l'appareil. Deux filets, parce que la cause peut venir d'ailleurs que
     de cette feuille.

     1) Aucun retrait haut sur #app. La règle qui en mettait un a déjà été
        retirée de crea-adapt.js, mais elle y avait été réintroduite une fois
        par une autre session : ce !important la neutralise pour de bon. */
  #app { padding-top: 0 !important; }

  /* 2) Fond continu. Tiroir ouvert, la racine prend la MÊME couleur que le
        tiroir : s'il subsiste un décalage en haut, il devient invisible au
        lieu de dessiner une bande. Même principe que l'arrondi entre le
        tiroir et la carte — la continuité, pas le contraste.
        La classe est posée par render() sur  : body:has(.sb-drawer-open)
        a été essayé et mesuré non appliqué, le :has() ne se réinvalidant pas
        de façon fiable sur une classe posée profond après un innerHTML. */
  html.crea-tiroir-ouvert body,
  html.crea-tiroir-ouvert #app { background: var(--bg-secondary) !important; }

  #app-header {
    /* FIXED → ne bouge PAS quand le clavier virtuel ouvre/ferme */
    position: fixed !important;
    /* Retrait système ENTIER. Ce qui doit monter jusqu'au bord de l'écran,
       c'est la SURFACE (le fond, plus bas), pas les boutons : mesuré sur la
       référence, l'encre du titre y commence à 76px alors que le retrait en
       vaut 62 — le contenu reste franchement sous l'horloge. En reprendre
       14px plaçait un bouton de 44px à 52-96px, donc à cheval sur l'horloge
       (dont l'encre s'arrête à 51px). */
    top: env(safe-area-inset-top, 0px) !important;
    left: 0 !important; right: 0 !important;
    z-index: 20 !important;
    background: transparent !important;
    border-bottom: none !important;
    height: 48px !important;
    min-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition:  opacity var(--duree-2) var(--courbe) !important;
    overflow: visible !important;
  }

  /* Messages démarrent sous le header fixe (hauteur + safe-area notch) */
  #messages-container { padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important; }

  /* touch-action:manipulation supprime le délai 300ms sur iOS Safari */
  button, [onclick], a, .conv-menu-item, [role="button"] {
    touch-action: manipulation !important;
  }

  /* --- BOUTONS DE L'EN-TÊTE : vraie cible tactile -----------------------
     Mesuré sur 440px : #btn-burger faisait 18×48. Il est dans une colonne de
     grille en minmax(0,1fr) au milieu de plusieurs boutons, et c'est lui que
     le flex a écrasé — 18px de large pour la commande la plus utilisée de
     l'en-tête. Les onglets Réponse/Liens/Images/Actualités/Vidéos/Labs, eux,
     faisaient 37×33 : sous les 44px partout.
     La hauteur monte à 44 pour tous (l'en-tête en fait 52, c'est gratuit).
     La largeur n'est forcée QUE sur les boutons-icônes isolés : forcer 44 sur
     les six onglets ajouterait 42px à une rangée qui remplit déjà l'écran. */
  #app-header button { min-height: 44px; }
  #btn-burger, #btn-burger-studio,
  #btn-search-nav, #btn-search-nav-studio,
  #btn-notif-nav, #btn-notif-nav-studio,
  #btn-top-menu, #btn-new-chat-barre, #btn-ephemeral, #btn-categories-menu {
    min-width: 44px;
    flex-shrink: 0;
  }

  /* --- BARRE DE QUESTION DE L'ACCUEIL : même largeur que celle du chat ---
     Mesuré : la barre du fil fait 440px sur 440 (bord à bord), celle de
     l'accueil 408 — les 16px de px-4 de #welcome-screen de chaque côté. Deux
     largeurs pour la même barre, et la plus visible était la plus étroite. */
  #welcome-screen { padding-left: 0 !important; padding-right: 0 !important; }
  #welcome-greeting { padding-left: var(--espace-8); padding-right: var(--espace-8); }

  /* Filet : la deuxième ligne est raccourcie côté JS (sousTitreAccueil), mais
     elle reprend parfois un titre de conversation, donc sa longueur n'est
     jamais garantie. whitespace-nowrap la faisait alors sortir de l'écran,
     coupée net. Elle passe à la ligne plutôt que d'être tronquée — deux lignes
     lisibles valent mieux qu'une phrase amputée. */
  #welcome-subtitle {
    white-space: normal !important;
    text-wrap: balance;
    max-width: 100%;
  }

  /* Welcome screen */
  #welcome-greeting, #welcome-input-wrap { margin-top: 0; }
  #app-header .flex.items-center { height: 48px; }
}

/* --- Stats de génération : masquées sur mobile (données internes) ----- */
@media (max-width: 639px) {
  /* La ligne "· ~78 tok · 6.3s · 12 tok/s · 13:05" est invisible */
  .mt-1.text-\[10px\].opacity-40 { display: none !important; }
}

/* --- Sidebar mobile : overlays Studios / Espaces compacts ------------- */
@media (max-width: 639px) {
  /* Cards dans l'overlay Espaces/Studios : padding réduit */
  #espaces-overlay .anim-scale-in > div:last-child > button,
  #studios-overlay .anim-scale-in > div:last-child > button {
    padding: var(--espace-5) !important;
    gap: var(--espace-3) !important;
  }
  /* Grille : 2 colonnes mini sur petits écrans */
  #espaces-overlay [style*="grid-template-columns"],
  #studios-overlay [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--espace-4) !important;
    padding: var(--espace-6) !important;
  }
  /* Icônes dans les cards : plus petites */
  #espaces-overlay .anim-scale-in span[style*="width:36px"],
  #studios-overlay .anim-scale-in span[style*="width:36px"] {
    width: 28px !important; height: 28px !important;
  }
  /* Boutons Studios + Espaces dans sidebar header */
  #btn-sidebar-studios, #btn-sidebar-espaces {
    font-size: var(--texte-3) !important;
    padding: var(--espace-3) var(--espace-4) !important;
  }
  /* Folder items dans sidebar : taille cohérente */
  [data-folder-filter] { min-height: 36px !important; }
  [data-folder-filter] .text-\[13px\] { font-size: var(--texte-4) !important; }
}

/* --- Logo CREA : svg propre, pas d'écrasement ------------------------- */
img.crea-logo-live, img[alt="CREA"], img[alt="Créa"] {
  object-fit: contain !important;
  display: block !important;
}

/* --- Layout adaptatif : hauteur disponible par profil d'écran -------- */
/* Les valeurs ci-dessous couvrent les écrans les plus courants 2024-2026 :
   iPhone SE (667px), iPhone 14/15 (844px), Pro Max (926px), Android (800-900px) */

/* Petit téléphone ≤ 680px de haut → moins d'espace → composer plus compact */
@media (max-width: 639px) and (max-height: 680px) {
  .crea-composer-bar { padding-top: var(--espace-2) !important; padding-bottom: var(--crea-composer-bottom, 6px) !important; }
  #app-header { height: 44px !important; min-height: 44px !important; }
  #messages-container { padding-top: calc(48px + env(safe-area-inset-top, 0px)) !important; }
}

/* Téléphone standard ≥ 750px → espace normal */
@media (max-width: 639px) and (min-height: 750px) {
  #app-header { height: 52px !important; min-height: 52px !important; }
  #messages-container { padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important; }
}

/* --- Barre de saisie collée au bas absolu du téléphone ---------------
   Une seule valeur, --crea-composer-bottom (définie plus haut, et redéfinie à
   l'identique par crea-adapt.js), pour TOUTES les tailles d'écran. Il y avait ici trois valeurs concurrentes selon
   la hauteur (12px, 8px, 4px) qui se battaient avec celle de crea-adapt : la
   dernière chargée gagnait de toute façon, et les autres n'étaient que du
   bruit trompeur. La hauteur d'écran ne change pas où est la barre d'accueil
   du système ; elle n'a donc pas à changer ce retrait. */
@media (max-width: 639px) {
  .crea-composer-bar {
    padding-bottom: var(--crea-composer-bottom, 6px) !important;
  }
  /* Clavier ouvert : le retrait système ne s'applique plus, le clavier occupe
     déjà le bas de l'écran. */
  html.crea-kb-open .crea-composer-bar {
    padding-bottom: var(--espace-1) !important;
  }
}

/* --- Boutons header secondaires masqués sur mobile ---------------------
   Ne reste ici que Suivi de tâche : Tâches arrière-plan, Preview et Fichiers
   ne sont plus DU TOUT dans l'en-tête (ils vivent dans le menu ⋯, bloc
   « Outils » de convMenuItems) et le Mode focus est supprimé. Masquer des
   boutons qui n'existent plus ne servait à rien. */
@media (max-width: 639px) {
  #btn-work-panel { display: none !important; }
}

/* Bloc Menu+Recherche+Notifications+Mode (renderNavDuoButtons, chat ET studios) :
   Recherche et Notifications restent sur desktop/tablette — masquées uniquement
   sur mobile, où seuls Menu + Mode restent dans ce bloc. */
@media (max-width: 639px) {
  #btn-search-nav, #btn-search-nav-studio,
  #btn-search-nav-sep, #btn-search-nav-sep-studio,
  #btn-notif-nav, #btn-notif-nav-studio { display: none !important; }
}

/* =====================================================================
   MOBILE — CORRECTIFS BUGS AUDIT
   ===================================================================== */

/* Touch targets — bouton fermer onglet (audit: 16×16px → besoin ≥ 44px) */
@media (max-width: 639px) {
  [data-tabclose] {
    padding: var(--espace-5) !important;
    margin: -8px !important;
  }

  /* Dropdowns : ne pas dépasser le viewport sur mobile */
  .conv-dropdown,
  .dropdown-enter,
  [class*="absolute"][class*="shadow-xl"] {
    max-width: calc(100vw - 16px) !important;
  }

  /* Barre de sélection de texte : toujours dans le viewport */
  #sel-toolbar {
    max-width: calc(100vw - 8px) !important;
    flex-wrap: wrap !important;
  }

  /* Chat form indicator : ne pas chevaucher le composer */
  #chat-form-indicator {
    bottom: max(88px, calc(72px + env(safe-area-inset-bottom, 0px))) !important;
    right: max(12px, env(safe-area-inset-right, 12px)) !important;
  }

  /* Éviter le scroll horizontal sur main (clip ne crée pas de stacking context) */
  main { overflow-x: clip !important; }

  /* Overflow sur les titres longs dans les listes de projets */
  [style*="white-space:nowrap"] {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   ESPACES STUDIO — fond gris clair, chat épuré à gauche, atelier en carte
   claire flottante à droite. Aucune couleur propre : tout dérive des variables
   globales, donc les studios et les espaces suivent le thème sans exception.
   ============================================================ */
/* Couleurs des studios & du portail = thème CREA
   (suivent automatiquement le thème clair/sombre et l'accent CREA) */
:root {
  /* LE FOND D'UN STUDIO EST CELUI DE L'ESPACE CHAT. PAS UN GRIS À PART.
     « Le fond, ils doivent tous suivre cette couleur-là. J'ai été sur Creative,
     le fond de Creative il est gris, c'est deux couleurs différentes. »

     C'était --bg-secondary : tous les studios et tous les espaces (Découvrir,
     Finance, CFO, Éducation, Brevets, Santé) étaient peints en gris pendant que
     le chat restait blanc. C'est aussi ce qui donnait l'impression que la barre
     latérale « tirait vers le blanc » : elle ne tirait nulle part, c'est le
     studio à côté d'elle qui était gris.

     LA CARTE DE L'ATELIER NE DISPARAÎT PAS POUR AUTANT. --studio-card valait
     déjà --bg-primary : à fond égal, ce qui la détache n'est plus la couleur
     mais sa bordure et son ombre portée, toutes deux déjà posées sur
     .studio-card. Même raisonnement que pour la barre latérale et son liseré. */
  --studio-bg:          var(--bg-primary);
  --studio-card:        var(--bg-primary);
  --studio-card-border: var(--border);
  --studio-ink:         var(--t-primary);   /* encre du bouton primaire */
  --studio-ink-t:       var(--bg-primary);
}
.studio-shell { background: var(--studio-bg); --badge-ring: var(--studio-bg); }
.studio-card {
  background: var(--studio-card);
  border: 1px solid var(--studio-card-border);
  border-radius: var(--radius-lg);
  box-shadow:  var(--ombre-3);
  overflow: hidden;
}
.studio-toolbar {
  display: flex; align-items: center; gap: var(--espace-1);
  padding: var(--espace-3) var(--espace-5); flex-shrink: 0;
  border-bottom: 1px solid var(--studio-card-border);
  background: var(--studio-card);
}
.studio-tool-btn {
  font-size: var(--texte-3); font-weight: 500; color: var(--t-secondary);
  padding: var(--espace-3) var(--espace-5); border-radius: var(--radius-sm); white-space: nowrap;
  transition:  background var(--duree-1) var(--courbe); cursor: pointer;
}
.studio-tool-btn:hover { background: rgba(0,0,0,.055); }
html.dark .studio-tool-btn:hover { background: rgba(255,255,255,.08); }
.studio-share-btn {
  background: var(--studio-ink); color: var(--studio-ink-t);
  font-size: var(--texte-3); font-weight: 600;
  padding: var(--espace-3) var(--espace-7); border-radius: var(--radius-rond); white-space: nowrap;
  transition:  opacity var(--duree-1) var(--courbe); cursor: pointer;
}
.studio-share-btn:hover { opacity: .85; }
.studio-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-size: var(--texte-2); font-weight: 700;
}
.studio-toolbar-sep { width: 1px; height: 18px; background: var(--studio-card-border); margin: 0 var(--espace-3); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   L'ACCUEIL DES STUDIOS — refondu (src/app-accueil-studios.js)

   L'éventail de cartes penchées est parti avec les deux blocs du bas. La page
   se lit maintenant de haut en bas : l'accueil, deux onglets, ce qui attend
   une saisie — ou l'écran d'entrée quand rien n'attend — et la barre de
   question tout en bas, hors du défilement.
   ═══════════════════════════════════════════════════════════════════════════ */
.hub-corps { max-width: 46rem; margin: 0 auto; padding: var(--espace-10) var(--espace-7) var(--espace-8); }
/* L'ACCUEIL SE LIT À GAUCHE, COMME LE RESTE DE LA PAGE. Il vient de l'écran du
   chat, où il est centré au milieu du vide ; ici il ouvre une page qui
   s'aligne, et le logo reprend la taille d'un signe plutôt que d'un titre. */
.hub-tete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-4); margin-bottom: var(--espace-9); }
.hub-tete .crea-phrase-accueil { justify-content: flex-start; text-align: left; margin: 0; max-width: 100%; }
.hub-tete .crea-phrase-logo { width: 22px; height: 22px; }
.hub-tete .crea-sagesse-accueil { text-align: left; }
.hub-pied { flex-shrink: 0; max-width: 46rem; width: 100%; margin: 0 auto; padding: 0 var(--espace-7) var(--espace-5); }

.hub-onglets { display: flex; align-items: center; gap: var(--espace-4); margin-bottom: var(--espace-5); }
.hub-onglet {
  border: none; background: none; cursor: pointer; padding: var(--espace-2) 0;
  font-size: var(--texte-5); font-weight: 600; color: var(--t-faint);
  border-bottom: 2px solid transparent; transition: all var(--duree-1) var(--courbe);
}
.hub-onglet:hover { color: var(--t-secondary); }
.hub-onglet--vif { color: var(--t-primary); border-bottom-color: var(--accent); }
.hub-plus {
  border: none; background: none; cursor: pointer;
  font-size: var(--texte-3); color: var(--t-dim); transition: color var(--duree-1) var(--courbe);
}
.hub-plus:hover { color: var(--accent); }

/* --- Ce qui attend une saisie --- */
.hub-sessions { display: flex; flex-direction: column; gap: var(--espace-3); }
.hub-session {
  display: flex; align-items: center; gap: var(--espace-5); width: 100%; text-align: left;
  padding: var(--espace-5) var(--espace-6); cursor: pointer;
  background: var(--studio-card); border: 1px solid var(--studio-card-border);
  border-radius: var(--radius-lg); color: var(--t-faint);
  transition: all var(--duree-1) var(--courbe);
}
.hub-session:hover { border-color: var(--border-hov); transform: translateX(2px); }
.hub-session-etat {
  display: inline-flex; align-items: center; gap: var(--espace-3); flex-shrink: 0;
  font-size: var(--texte-2); font-weight: 600; color: #b45309;
}
.hub-session-point { width: 6px; height: 6px; border-radius: 50%; background: #d97706; flex-shrink: 0; }
.hub-session-titre {
  font-size: var(--texte-4); font-weight: 600; color: var(--t-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0;
}
.hub-session-detail {
  flex: 1; min-width: 0; font-size: var(--texte-2); color: var(--t-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-session-lieu {
  display: inline-flex; align-items: center; gap: var(--espace-2); flex-shrink: 0;
  font-size: var(--texte-2); color: var(--t-dim);
}
@media (max-width: 640px) {
  .hub-session-detail, .hub-session-lieu { display: none; }
}

/* --- L'écran d'entrée : ce qu'on voit quand rien n'attend --- */
.hub-creer { display: flex; flex-direction: column; align-items: center; gap: var(--espace-7); padding: var(--espace-8) 0; }
.hub-creer-titre { font-size: var(--texte-7); font-weight: 700; color: var(--t-primary); text-align: center; }
.hub-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--espace-4); width: 100%; }
.hub-carte {
  display: flex; flex-direction: column; align-items: center; gap: var(--espace-4);
  padding: var(--espace-7) var(--espace-4); cursor: pointer;
  background: var(--studio-card); border: 1px solid var(--studio-card-border);
  border-radius: var(--radius-lg); transition: all var(--duree-1) var(--courbe);
}
.hub-carte:hover { border-color: var(--accent); transform: translateY(-2px); }
.hub-carte-ill {
  width: 42px; height: 42px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); color: var(--accent);
}
.hub-carte-nom { font-size: var(--texte-3); font-weight: 600; color: var(--t-primary); text-align: center; }
.hub-explorer {
  display: inline-flex; align-items: center; gap: var(--espace-3); cursor: pointer;
  padding: var(--espace-4) var(--espace-7); border-radius: var(--radius-rond);
  background: none; border: 1px solid var(--border);
  font-size: var(--texte-3); font-weight: 600; color: var(--t-secondary);
  transition: all var(--duree-1) var(--courbe);
}
.hub-explorer:hover { border-color: var(--accent); color: var(--accent); }

/* --- L'utilisation, et le ruban de flux --- */
:root { --hub-flux-0: var(--accent); --hub-flux-1: #6366f1; --hub-flux-2: #a855f7; --hub-flux-3: #94a3b8; }
.hub-usage { display: flex; flex-direction: column; gap: var(--espace-7); }
.hub-usage-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); flex-wrap: wrap; }
.hub-sous-onglets, .hub-fenetres { display: flex; align-items: center; gap: var(--espace-2); }
.hub-sous-onglet, .hub-fenetre {
  border: none; background: none; cursor: pointer;
  padding: var(--espace-2) var(--espace-5); border-radius: var(--radius-sm);
  font-size: var(--texte-2); font-weight: 600; color: var(--t-dim);
  transition: background var(--duree-1) var(--courbe), color var(--duree-1) var(--courbe);
}
.hub-sous-onglet:hover, .hub-fenetre:hover { color: var(--t-primary); }
.hub-sous-onglet--vif, .hub-fenetre--vif { background: var(--studio-card); color: var(--t-primary); }
.hub-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--espace-3); }
.hub-chiffre {
  display: flex; flex-direction: column; gap: var(--espace-2);
  padding: var(--espace-5) var(--espace-6); border-radius: var(--radius);
  background: var(--studio-card); border: 1px solid var(--studio-card-border);
}
.hub-chiffre-nom { font-size: var(--texte-2); color: var(--t-dim); }
.hub-chiffre-val { font-size: var(--texte-6); font-weight: 700; color: var(--t-primary); }
.hub-usage-vide { padding: var(--espace-10) 0; text-align: center; font-size: var(--texte-3); color: var(--t-dim); }
/* Ce que la mesure NE COUVRE PAS, dit sous la répartition et pas à sa place :
   les échanges d'avant la mesure par studio comptent dans les totaux et n'ont
   pas de lieu. Les taire ferait croire à une somme qui ne tombe pas juste. */
.hub-usage-note { margin-top: var(--espace-3); font-size: var(--texte-2); color: var(--t-faint); line-height: 1.5; }

/* LE FLUX, PAS UN CALENDRIER. Un segment par jour : sa hauteur dit le volume,
   sa couleur dit le modèle qui a porté la journée. Une grille de cases dit
   seulement COMBIEN de jours ont été actifs — jamais quand ça monte. */
.hub-flux { display: flex; flex-direction: column; gap: var(--espace-3); }
.hub-flux-piste {
  display: flex; align-items: flex-end; gap: 2px; height: 96px;
  padding: var(--espace-4); border-radius: var(--radius);
  background: var(--studio-card); border: 1px solid var(--studio-card-border);
  overflow-x: auto;
}
.hub-flux-jour { flex: 1 1 4px; min-width: 3px; border-radius: var(--radius-xs) var(--radius-xs) 0 0; opacity: .85; transition: opacity var(--duree-1) var(--courbe); }
.hub-flux-jour:hover { opacity: 1; }
.hub-flux-bornes { display: flex; justify-content: space-between; font-size: var(--texte-1); color: var(--t-faint); }
.hub-modeles { display: flex; flex-direction: column; gap: var(--espace-3); }
.hub-modele { display: flex; align-items: center; gap: var(--espace-4); font-size: var(--texte-2); }
.hub-modele-puce { width: 9px; height: 9px; border-radius: var(--radius-xs); flex-shrink: 0; }
.hub-modele-nom { font-weight: 600; color: var(--t-primary); flex-shrink: 0; }
.hub-modele-detail { flex: 1; min-width: 0; color: var(--t-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-modele-part { font-weight: 600; color: var(--t-secondary); flex-shrink: 0; }

/* --- La destination, dans la barre de question, contre le « + » --- */
.hub-destination {
  display: inline-flex; align-items: center; gap: var(--espace-2); cursor: pointer;
  padding: var(--espace-2) var(--espace-4); border-radius: var(--radius-rond);
  background: var(--studio-card); border: 1px solid var(--studio-card-border);
  font-size: var(--texte-2); font-weight: 600; color: var(--t-primary);
  transition: all var(--duree-1) var(--courbe);
}
.hub-destination:hover { border-color: var(--accent); }
.hub-destination-liste {
  position: absolute; left: 0; bottom: 100%; margin-bottom: var(--espace-3); z-index: 50;
  min-width: 200px; max-height: 300px; overflow-y: auto; padding: var(--espace-2);
  border-radius: var(--radius-lg); background: var(--studio-card);
  border: 1px solid var(--studio-card-border); box-shadow: var(--ombre-4);
}
.hub-destination-choix {
  display: flex; align-items: center; gap: var(--espace-4); width: 100%; text-align: left;
  padding: var(--espace-3) var(--espace-5); border: none; background: none; cursor: pointer;
  border-radius: var(--radius-sm); font-size: var(--texte-3); color: var(--t-primary);
}
.hub-destination-choix:hover { background: var(--bg-secondary); }
.hub-destination-choix--vif { background: var(--accent-bg); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   CHOISIR UN STUDIO — la même langue que l'accueil des Studios

   Onze tuiles à dégradé animé sont devenues onze lignes qui se lisent. La
   couleur du studio n'a pas disparu : elle est passée dans le SIGNE, ce qui
   l'identifie, au lieu de remplir la tuile.
   ═══════════════════════════════════════════════════════════════════════════ */
.portails-cadre {
  display: flex; flex-direction: column; overflow: hidden;
  width: 100%; max-width: 40rem; max-height: 84vh;
  border-radius: var(--radius-lg); background: var(--bg-primary);
  border: 1px solid var(--border); box-shadow: var(--ombre-5);
}
.portails-tete {
  display: flex; align-items: center; gap: var(--espace-5); flex-shrink: 0;
  padding: var(--espace-6) var(--espace-7); border-bottom: 1px solid var(--border);
}
.portails-titre { font-size: var(--texte-5); font-weight: 700; color: var(--t-primary); flex-shrink: 0; }
.portails-recherche {
  display: flex; align-items: center; gap: var(--espace-3); flex: 1; min-width: 0;
  padding: var(--espace-3) var(--espace-5); border-radius: var(--radius-rond);
  background: var(--bg-secondary); border: 1px solid var(--border); color: var(--t-faint);
}
.portails-recherche input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-size: var(--texte-3); color: var(--t-primary);
}
.portails-fermer {
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  padding: var(--espace-3); border-radius: var(--radius-sm); color: var(--t-dim);
}
.portails-fermer:hover { background: var(--bg-secondary); color: var(--t-primary); }
.portails-corps { overflow-y: auto; padding: var(--espace-7); }
.portails-section + .portails-section { margin-top: var(--espace-8); }
.portails-rubrique {
  margin-bottom: var(--espace-4); font-size: var(--texte-1); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--t-faint);
}
.portails-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: var(--espace-3); }
.portails-vide { padding: var(--espace-10) 0; text-align: center; font-size: var(--texte-3); color: var(--t-dim); }

.portail-studio {
  display: flex; align-items: center; gap: var(--espace-5); width: 100%; text-align: left;
  padding: var(--espace-5) var(--espace-6); cursor: pointer;
  background: var(--studio-card); border: 1px solid var(--studio-card-border);
  border-radius: var(--radius); transition: all var(--duree-1) var(--courbe);
}
.portail-studio:hover { border-color: var(--border-hov); }
.portail-studio:active { transform: scale(.99); }
.portail-studio--ici { border-color: var(--accent); background: var(--accent-bg); }
.portail-studio-signe {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--bg-secondary);
}
.portail-studio-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.portail-studio-nom { font-size: var(--texte-3); font-weight: 600; color: var(--t-primary); }
.portail-studio-quoi {
  font-size: var(--texte-1); color: var(--t-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.portail-studio-marque {
  flex-shrink: 0; font-size: var(--texte-1); font-weight: 600; color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE TERMINAL DU STUDIO CODE

   Six couleurs étaient écrites à la main dans le gabarit — dont un fond
   `#0a0e16` qui ne bougeait dans aucun thème pendant que l'encre, elle,
   suivait. En clair : contraste 1,01 : 1, texte invisible. Tout vient
   maintenant des jetons, et `--bg-terminal` existe dans les deux thèmes.
   ═══════════════════════════════════════════════════════════════════════════ */
.term-cadre {
  display: flex; flex-direction: column; flex-shrink: 0; height: 190px;
  border-top: 1px solid var(--border); background: var(--bg-terminal);
}
.term-cadre--replie { height: auto; background: var(--bg-secondary); }
.term-entete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4);
  flex-shrink: 0; padding: var(--espace-2) var(--espace-6); min-height: 28px;
}
.term-cadre:not(.term-cadre--replie) .term-entete { border-bottom: 1px solid var(--border); }
/* LA BASCULE EST AU MÊME PIXEL, OUVERTE OU FERMÉE : c'est le même bouton, et
   seul son chevron change. Deux en-têtes écrits séparément mettaient le bouton
   qui ouvre et celui qui ferme à deux endroits différents. */
.term-bascule {
  display: flex; align-items: center; gap: var(--espace-3); min-width: 0;
  border: none; background: none; cursor: pointer; padding: 0;
  font-size: var(--texte-1); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t-dim);
  transition: all var(--duree-1) var(--courbe);
}
.term-bascule:hover { color: var(--t-primary); }
.term-compte {
  padding: 0 var(--espace-3); border-radius: var(--radius-rond);
  background: var(--bg-tertiary); color: var(--t-dim);
  font-size: var(--texte-1); font-weight: 600; letter-spacing: 0; text-transform: none;
}
.term-atelier {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--t-faint); letter-spacing: 0; text-transform: none; font-weight: 400;
}
.term-commandes { display: flex; align-items: center; gap: var(--espace-4); flex-shrink: 0; }
.term-commande {
  border: none; background: none; cursor: pointer; padding: 0;
  font-size: var(--texte-1); color: var(--t-dim); transition: all var(--duree-1) var(--courbe);
}
.term-commande:hover { color: var(--t-primary); }

.term-hote { flex: 1; overflow: hidden; padding: var(--espace-3) var(--espace-4); }
.term-sortie {
  flex: 1; overflow: auto; padding: var(--espace-4) var(--espace-6);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--texte-2); line-height: 1.65; color: var(--t-secondary);
}
.term-aide { color: var(--t-faint); }
.term-ligne { white-space: pre-wrap; color: var(--t-secondary); }
.term-ligne--erreur { color: var(--danger); }
.term-invite { color: var(--accent-texte); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.term-frappe { color: var(--t-primary); font-weight: 600; }
.term-saisie {
  display: flex; align-items: center; gap: var(--espace-4); flex-shrink: 0;
  padding: var(--espace-3) var(--espace-6); border-top: 1px solid var(--border);
}
.term-saisie input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--texte-2); color: var(--t-primary);
}

/* --- Panneau "Sessions" (💬) de l'en-tête d'un studio : largeur bornée à la
   fenêtre pour ne jamais être coupée sur le bord de l'écran (bug signalé sur
   Studio Démarches, où les libellés démarche+titre sont plus longs) --- */
.studio-sessions-panel {
  position: absolute; top: 100%; right: 0; margin-top: var(--espace-3); z-index: 30;
  padding: var(--espace-3);
  border-radius: var(--radius-lg);
  /* --bg-tertiary (#E7E7E7) est le gris des champs, pas celui des surfaces
     flottantes : ce panneau était donc nettement plus sombre que TOUTES les
     autres cartes de l'application, posées sur --bg-primary. « C'est dans un
     gris bizarre. » Il rejoint la surface commune ; c'est le filet et l'ombre
     qui le détachent du fond, comme partout ailleurs. */
  background: var(--bg-primary);
  border: 1px solid var(--border);
  box-shadow:  var(--ombre-4);
  width: 280px;
  max-width: min(280px, calc(100vw - 24px));
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-width: 480px) {
  .studio-sessions-panel { right: -8px; width: calc(100vw - 24px); }
}

/* ── UNE SEULE RANGÉE DE SESSION, POUR TOUS LES STUDIOS ──────────────────────
   Même dessin dans chaque studio et dans Simplifica : pastille d'état, nom,
   compteur discret, et des actions qui ne se montrent qu'au survol de LEUR
   rangée — la liste sert à choisir une session, pas à exposer trois outils par
   ligne. Au clavier, le focus les révèle aussi : sans ça elles seraient
   atteignables par Tab tout en restant invisibles. */
.sessions-rangee {
  display: flex; align-items: center; gap: var(--espace-2);
  padding: var(--espace-2) var(--espace-2) var(--espace-2) var(--espace-3);
  border-radius: var(--radius);
  transition: background var(--duree-2) var(--courbe);
}
.sessions-rangee:hover { background: color-mix(in srgb, var(--t-primary) 5%, transparent); }
.sessions-rangee.est-active { background: var(--accent-bg); }
.sessions-pastille {
  width: 6px; height: 6px; border-radius: var(--radius-rond); flex-shrink: 0;
  background: var(--border);
}
.sessions-nom {
  flex: 1; min-width: 0; text-align: left;
  font-size: max(0.75rem, 12px); line-height: 1.35;
  padding: var(--espace-1) 0;
  color: var(--t-primary);
  background: none; border: none; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sessions-rangee.est-active .sessions-nom { color: var(--accent); font-weight: 600; }
.sessions-compte {
  flex-shrink: 0; font-size: max(0.625rem, 10px);
  font-variant-numeric: tabular-nums;
  color: var(--t-faint);
}
.sessions-actions {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  opacity: 0; transition: opacity var(--duree-2) var(--courbe);
}
.sessions-rangee:hover .sessions-actions,
.sessions-rangee:focus-within .sessions-actions { opacity: 1; }
.sessions-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  color: var(--t-faint); background: none; border: none; cursor: pointer;
  transition: all var(--duree-2) var(--courbe);
}
.sessions-action:hover { color: var(--t-primary); background: color-mix(in srgb, var(--t-primary) 8%, transparent); }
/* Le menu natif de transfert couvre son icône sans se voir : on garde le
   comportement du système (liste déroulante, clavier, mobile) sans son dessin. */
.sessions-action--menu { position: relative; }
.sessions-action--menu > select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: none; background: none;
}
.sessions-filet { height: 1px; background: var(--border); margin: var(--espace-2) var(--espace-1); }
/* Le même panneau, ancré sous le TITRE du fil — donc à gauche, et au-dessus de
   la nappe de fermeture (#dismiss-overlay, z-49) qui couvre l'écran dès qu'un
   menu est ouvert : sans ce z-index, le panneau s'afficherait sous elle et
   aucune de ses rangées ne serait cliquable. */
.sessions-panneau--gauche { left: 0; right: auto; z-index: 9000; width: 300px; max-width: min(300px, calc(100vw - 24px)); max-height: min(60vh, 420px); }
.sessions-entete {
  padding: var(--espace-1) var(--espace-3) var(--espace-2);
  font-size: max(0.5625rem, 9px); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--t-faint);
}
.sessions-neuf {
  display: flex; width: 100%; align-items: center; gap: var(--espace-2);
  border-radius: var(--radius);
  padding: var(--espace-2) var(--espace-3);
  font-size: max(0.75rem, 12px); font-weight: 600;
  color: var(--accent); background: none; border: none; cursor: pointer;
  transition: background var(--duree-2) var(--courbe);
}
.sessions-neuf:hover { background: var(--accent-bg); }

/* --- Galerie de modèles dans l'atelier Studio (remplace l'ancien bloc Preview) :
   grandes cartes premium sur 2 rangées qui REMPLISSENT toute la largeur du bloc
   (grille à colonnes élastiques, pas de colonnes figées qui laissent du vide) —
   ne défilent horizontalement que si le nombre de modèles dépasse ce qui tient
   lisiblement (largeur de colonne minimale atteinte). --- */
.studio-template-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-9);
  width: 100%;
  max-width: 100%;
  padding: var(--espace-2) var(--espace-2) var(--espace-5);
}
.studio-template-card {
  display: flex; flex-direction: column;
  gap: var(--espace-5);
  min-width: 0;
  padding: var(--espace-6);
  border-radius: var(--radius-xl);
  background: var(--studio-card);
  border: 1px solid var(--studio-card-border);
  box-shadow:  var(--ombre-2);
  cursor: pointer;
  text-align: left;
  transition:  transform var(--duree-2) var(--courbe), box-shadow var(--duree-2) var(--courbe), border-color var(--duree-2) var(--courbe);
}
.studio-template-card:hover {
  transform: translateY(-4px);
  border-color: var(--tpl-fg, var(--accent));
  box-shadow:  var(--ombre-3);
}
.studio-template-card-label {
  font-size: var(--texte-4); font-weight: 600; line-height: 1.3;
  color: var(--t-primary);
  padding: 0 var(--espace-1);
}
/* La variante étroite est partie avec ses appels : la galerie ne s'affiche plus
   dans la colonne de chat d'un studio — « seulement sur les blocs des studios,
   pas dans l'espace de leur chat ». Une règle sans plus personne pour la porter
   est une promesse qu'on croit tenir. --- */
/* --- Miniature "esquisse de contenu" (remplace l'icône plate) : occupe la
   majorité de la carte, montre la forme réelle du modèle (lignes de texte,
   slide, page web, email, checklist, graphique) + un badge SVG du studio --- */
.tpl-thumb {
  position: relative;
  flex: 1;
  min-height: 76px;
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--tpl-bg, var(--accent-bg));
  overflow: hidden;
  padding: var(--espace-7);
  display: flex; flex-direction: column; justify-content: center; gap: var(--espace-4);
  transition:  transform var(--duree-2) var(--courbe);
}
.studio-template-card:hover .tpl-thumb { transform: scale(1.02); }
.tpl-thumb-badge {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tpl-fg, var(--accent)) 18%, transparent);
  color: var(--tpl-fg, var(--accent));
  display: flex; align-items: center; justify-content: center;
}
.tpl-thumb-badge svg { width: 12px; height: 12px; }
.tpl-thumb-bar { height: 8px; width: 38%; border-radius: var(--radius-xs); background: var(--tpl-fg, var(--accent)); opacity: .85; }
.tpl-thumb-line { height: 6px; border-radius: var(--radius-xs); background: var(--tpl-fg, var(--accent)); opacity: .28; }
.tpl-thumb-stamp { position: absolute; bottom: 12px; right: 14px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--tpl-fg, var(--accent)); opacity: .5; }
.tpl-thumb-slide { flex: 1; display: flex; flex-direction: column; gap: var(--espace-5); position: relative; }
.tpl-thumb-slide-title { height: 9px; width: 55%; border-radius: var(--radius-xs); background: var(--tpl-fg, var(--accent)); opacity: .85; }
.tpl-thumb-slide-bul { display: flex; flex-direction: column; gap: var(--espace-3); }
.tpl-thumb-slide-bul span { height: 5px; border-radius: var(--radius-xs); background: var(--tpl-fg, var(--accent)); opacity: .25; }
.tpl-thumb-slide-bul span:nth-child(1) { width: 82% } .tpl-thumb-slide-bul span:nth-child(2) { width: 64% } .tpl-thumb-slide-bul span:nth-child(3) { width: 72% }
.tpl-thumb-slide-accent { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--tpl-fg, var(--accent)); opacity: .16; }
.tpl-thumb-web-bar { display: flex; gap: var(--espace-2); }
.tpl-thumb-web-bar span { width: 6px; height: 6px; border-radius: 50%; background: var(--tpl-fg, var(--accent)); opacity: .4; }
.tpl-thumb-web-hero { height: 22px; border-radius: var(--radius-sm); background: var(--tpl-fg, var(--accent)); opacity: .22; }
.tpl-thumb-web-grid { display: flex; gap: var(--espace-3); flex: 1; min-height: 14px; }
.tpl-thumb-web-grid span { flex: 1; border-radius: var(--radius-sm); background: var(--tpl-fg, var(--accent)); opacity: .14; }
.tpl-thumb-email-row { display: flex; align-items: center; gap: var(--espace-4); }
.tpl-thumb-email-avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--tpl-fg, var(--accent)); opacity: .5; flex-shrink: 0; }
.tpl-thumb-email-lines { flex: 1; display: flex; flex-direction: column; gap: var(--espace-3); min-width: 0; }
.tpl-thumb-email-lines span { display: block; height: 6px; border-radius: var(--radius-xs); background: var(--tpl-fg, var(--accent)); opacity: .28; }
.tpl-thumb-list-row { display: flex; align-items: center; gap: var(--espace-4); }
.tpl-thumb-list-box { width: 11px; height: 11px; border-radius: var(--radius-xs); border: 2px solid var(--tpl-fg, var(--accent)); opacity: .6; flex-shrink: 0; }
.tpl-thumb-list-row span { display: block; height: 6px; border-radius: var(--radius-xs); background: var(--tpl-fg, var(--accent)); opacity: .25; }
.tpl-thumb-chart { display: flex; align-items: flex-end; gap: var(--espace-3); flex: 1; min-height: 40px; }
.tpl-thumb-chart b { flex: 1; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--tpl-fg, var(--accent)); opacity: .55; display: block; }
/* --- Page de modèles : l'en-tête au-dessus de la galerie (renderPageDeModeles).
   Même bloc dans les quatorze studios, pour que « la page d'accueil » veuille
   dire la même chose partout. --- */
.page-modeles { display: flex; flex-direction: column; gap: var(--espace-7); width: 100%; min-height: 0; }
.page-modeles-tete { text-align: center; padding: 0 var(--espace-5); }
.page-modeles-titre { font-size: var(--texte-6); font-weight: 700; color: var(--t-primary); }
.page-modeles-sous { font-size: var(--texte-3); color: var(--t-dim); margin-top: var(--espace-2); }
/* La ligne d'exemple : deux lignes au plus, sinon une carte sur cinq colonnes
   deviendrait un mur de texte. Le titre reste l'accroche, l'exemple la preuve. */
.studio-template-card-ex {
  font-size: var(--texte-1); line-height: 1.35; color: var(--t-dim);
  padding: 0 var(--espace-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-align: left;
}
@media (max-width: 640px) { .studio-template-card-ex { display: none; } }
/* Esquisses des quatre studios ajoutés — code, image, vidéo, son. Même grammaire
   que les précédentes : des formes en `--tpl-fg` sur la tuile teintée, jamais un
   pictogramme, pour qu'on reconnaisse le GENRE de sortie d'un coup d'œil. */
.tpl-thumb-code { display: flex; flex-direction: column; gap: var(--espace-3); flex: 1; justify-content: center; }
.tpl-thumb-code span { display: block; height: 6px; border-radius: var(--radius-xs); background: var(--tpl-fg, var(--accent)); opacity: .3; }
.tpl-thumb-code span:first-child { opacity: .75; }
.tpl-thumb-image { position: relative; flex: 1; min-height: 44px; border-radius: var(--radius-sm); overflow: hidden; background: color-mix(in srgb, var(--tpl-fg, var(--accent)) 12%, transparent); }
.tpl-thumb-image i { position: absolute; display: block; }
.tpl-thumb-image-sun { width: 12px; height: 12px; border-radius: 50%; top: 9px; left: 14px; background: var(--tpl-fg, var(--accent)); opacity: .6; }
.tpl-thumb-image-mont { left: 0; right: 0; bottom: 0; height: 62%; background: var(--tpl-fg, var(--accent)); opacity: .35; clip-path: polygon(0 100%, 28% 30%, 48% 100%, 68% 48%, 100% 100%); }
.tpl-thumb-video { position: relative; flex: 1; min-height: 44px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tpl-fg, var(--accent)) 12%, transparent); display: flex; align-items: center; justify-content: center; }
.tpl-thumb-video-play { display: block; width: 0; height: 0; border-left: 15px solid var(--tpl-fg, var(--accent)); border-top: 10px solid transparent; border-bottom: 10px solid transparent; opacity: .7; margin-bottom: 8px; }
.tpl-thumb-video-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; display: flex; gap: 3px; padding: 0 3px 2px; }
.tpl-thumb-video-strip i { flex: 1; display: block; border-radius: var(--radius-xs); background: var(--tpl-fg, var(--accent)); opacity: .28; }
.tpl-thumb-wave { display: flex; align-items: center; gap: 3px; flex: 1; min-height: 42px; padding-right: 18px; }
.tpl-thumb-wave b { flex: 1; border-radius: var(--radius-xs); background: var(--tpl-fg, var(--accent)); opacity: .55; display: block; }
/* Palette de tuiles — teintes douces et distinctes (façon Linear/Notion), cycle
   par index de carte pour que chaque modèle se distingue visuellement, y compris
   en thème sombre. */
.tpl-swatch-0 { --tpl-bg: #eef2ff; --tpl-fg: #4f46e5; }
.tpl-swatch-1 { --tpl-bg: #ecfdf5; --tpl-fg: #059669; }
.tpl-swatch-2 { --tpl-bg: #fff7ed; --tpl-fg: #ea580c; }
.tpl-swatch-3 { --tpl-bg: #fdf2f8; --tpl-fg: #db2777; }
.tpl-swatch-4 { --tpl-bg: #f0f9ff; --tpl-fg: #0284c7; }
.tpl-swatch-5 { --tpl-bg: #f5f3ff; --tpl-fg: #7c3aed; }
.tpl-swatch-6 { --tpl-bg: #fffbeb; --tpl-fg: #d97706; }
.tpl-swatch-7 { --tpl-bg: #f0fdfa; --tpl-fg: #0d9488; }
html.dark .tpl-swatch-0 { --tpl-bg: #26264a; --tpl-fg: #a5b4fc; }
html.dark .tpl-swatch-1 { --tpl-bg: #14332a; --tpl-fg: #6ee7b7; }
html.dark .tpl-swatch-2 { --tpl-bg: #3a2411; --tpl-fg: #fdba74; }
html.dark .tpl-swatch-3 { --tpl-bg: #3a1830; --tpl-fg: #f9a8d4; }
html.dark .tpl-swatch-4 { --tpl-bg: #122a3a; --tpl-fg: #7dd3fc; }
html.dark .tpl-swatch-5 { --tpl-bg: #241c3a; --tpl-fg: #c4b5fd; }
html.dark .tpl-swatch-6 { --tpl-bg: #382b0f; --tpl-fg: #fcd34d; }
html.dark .tpl-swatch-7 { --tpl-bg: #10322e; --tpl-fg: #5eead4; }
@media (max-width: 640px) {
  /* Deux colonnes sur téléphone : trois cartes de 122 px plus leurs gouttières
     redemanderaient le débordement horizontal qu'on vient de retirer. */
  .studio-template-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-5); }
  .studio-template-card { padding: var(--espace-5); gap: var(--espace-4); border-radius: var(--radius-lg); }
  .tpl-thumb { min-height: 58px; padding: var(--espace-5); border-radius: var(--radius); }
  .studio-template-card-label { font-size: var(--texte-2); }
}

/* ============================================================
   TRANSITION SIDEBAR — style "drawer" (DeepSeek/ChatGPT mobile) :
   la sidebar glisse, le contenu est poussé à droite et devient
   une carte arrondie visible sur le bord. Desktop : glissement fluide.
   ============================================================ */
/* LARGEUR PROPORTIONNELLE, PAS UN PLAFOND FIXE.
   C'était min(280px, 85vw) : un plafond en pixels, réglé sur un écran de 390 px
   où il valait bien 72 % — la proportion de la référence. Mais 280 px restent
   280 px : sur un téléphone de 440 px ils ne font plus que 64 %, et le tiroir
   paraît d'autant plus étroit que l'écran est grand. Mesuré sur la référence :
   70 % de la largeur d'écran, quelle que soit la taille.
   On pose 72vw et non 70 : la mesure vient d'une photo d'écran, à ±1 point
   près, et 72 était déjà la proportion obtenue sur un écran de 390 px — la
   seule taille où l'ancienne valeur tombait juste. Rester dessus évite de
   déplacer ce qui allait bien tout en corrigeant le reste.
   Le plafond ne sert plus qu'aux tablettes : 72 % d'un écran de 768 px
   feraient 553 px, et il ne resterait plus rien du contenu derrière. */
:root { --crea-sb-w: min(78vw, 420px); }
/* UN SEUL RAYON POUR LES DEUX BORDS. La carte et la barre le partagent : c'est
   ce qui fait qu'on lit UN tracé et non deux formes qui se rencontrent. Deux
   valeurs séparées avaient déjà divergé une fois. */
:root { --crea-sb-r: 78px; }

/* Mobile : contenu poussé pendant que la barre latérale est ouverte.
   L'ARRONDI EST ICI, sur le côté GAUCHE de la carte de contenu — celui qui
   donne sur la barre. La barre, elle, reste droite. Sens vérifié sur les
   captures de référence en thème clair : la barre va d'un bord à l'autre sans
   courbe, et c'est l'espace chat qui est une carte aux coins gauches arrondis.
   Coins gauches seulement : le bord droit de la carte sort de l'écran. */
.main-pushed {
  transform: translateX(var(--crea-sb-w));
  /* RAYON MESURÉ SUR LA RÉFÉRENCE — au deuxième essai, le bon.
     La première mesure donnait ~43 px : elle traversait la barre de saisie, dont
     le fort contraste captait le détecteur de bord au lieu du bord de la carte.
     En ne retenant que les lignes où le bord est franc, la verticale se lit à
     x=959 et la courbe la quitte 238 px d'image plus haut — soit ~79 px CSS en 3x.
     28 px puis 40 px donnaient donc toujours « une ligne droite avec une
     encoche » : le coin existait, mais deux fois trop court pour se lire. */
  border-top-left-radius: var(--crea-sb-r);
  border-bottom-left-radius: var(--crea-sb-r);
  overflow: hidden;
  /* OMBRE MESURÉE, PAS ESTIMÉE. Une ombre trop forte ne souligne pas le coin :
     elle creuse un angle sombre entre le bord de la barre et la courbe de la
     carte — le « creux », que la référence n'a pas. Relevé de luminance au point
     le plus sombre : référence 234, nous 191 sur 255. Divisée par quatre.
     UNE SEULE ombre, large et diffuse : une deuxième, serrée à 1 px, redessinait
     exactement le trait qu'on venait de supprimer. */
  box-shadow: -12px 0 28px -12px rgba(0,0,0,.10);
  /* La carte est PLUS CLAIRE que la barre — mesuré sur la référence : 255 pour
     la carte, 252 qui descend à 235 côté barre en approchant du bord. Ce sont ces
     ~20 niveaux qui rendent la frontière lisible sur TOUTE sa longueur, partie
     courbe comprise. Au même ton, le bord disparaît au milieu. */
  background: #fff;
}
html.dark .main-pushed { box-shadow: -3px 0 18px rgba(0,0,0,.42); }

/* Fond de la rangée = EXACTEMENT la couleur de la barre latérale. La barre et
   l'espace chat partagent UNE SEULE ligne de séparation : quand la carte se
   courbe, ce que sa découpe laisse voir doit être la barre qui se prolonge,
   pour que la ligne suive la courbe d'un seul tenant.
   Un fond contrasté (ce que j'avais mis) creuse au contraire un biseau sombre
   entre le bord droit de la barre, resté droit, et la courbe de la carte : on
   voit alors deux bords distincts et un trou entre les deux. Ce qui dessine la
   séparation, c'est l'OMBRE de la carte, pas une différence de couleur.
   !important nécessaire : une autre règle (parmi les 45 feuilles chargées,
   injectées par les modules crea-*) pose background:var(--bg-secondary) sur
   ce conteneur et gagnait la cascade — constaté en mesurant, la couleur ne
   bougeait pas quelle que soit la valeur posée ici tant qu'elle n'était pas
   en !important. */
/* Le fond derrière la carte est celui de la BARRE, pas un aplat de contraste.
   L'aplat réglait un problème en en créant un autre : un rectangle gris
   apparaissait dans l'angle, là où la carte s'incurve, et le bord se lisait
   comme deux formes qui se heurtent au lieu d'un seul tracé.
   La barre ne porte AUCUN rayon, et ce n'est pas un oubli : un border-radius
   coupe vers l'intérieur, alors qu'épouser la courbe demanderait un coin
   concave. Essayé, rendu, annulé — les deux arrondis partaient en sens opposés
   et ouvraient une lentille plus large que le creux d'origine. */
@media (max-width: 768px) {
  /* LE PUZZLE. La barre ne peint plus son propre fond : son élément s'arrête à sa
     largeur, et c'est son COIN CARRÉ qui apparaissait dans l'angle dès que la
     carte s'incurvait — deux formes, deux bords, un creux entre les deux.
     Le fond est porté par la rangée pleine largeur, qui passe SOUS la carte d'un
     bord à l'autre. La barre occupe alors exactement « tout ce que la carte ne
     couvre pas », coins arrondis compris : son bord est le négatif de la courbe,
     dessiné par elle. Une seule ligne pour les deux pièces. */
  #sidebar { background: transparent !important; }
  .sb-drawer-open { background: var(--bg-secondary) !important; }
  html.dark .sb-drawer-open { background: var(--rail-bg) !important; }
}

/* LA BARRE NE PORTE AUCUN RAYON — ET C'EST VÉRIFIÉ, PAS SUPPOSÉ.
   J'ai essayé de lui faire « suivre » la courbe avec le même rayon que la carte.
   Rendu et photographié : c'est pire. Un border-radius COUPE le coin vers
   l'intérieur ; pour épouser la courbe de la carte il faudrait un coin CONCAVE,
   que border-radius ne sait pas produire. Les deux arrondis partent donc en sens
   opposés et ouvrent une lentille — un creux plus grand que celui qu'on voulait
   supprimer.
   Ce qui fait disparaître le creux n'est pas une deuxième courbe : c'est que
   rien ne contraste dans l'angle. Le fond derrière la carte est celui de la
   barre, et l'ombre est assez faible pour ne pas creuser (mesuré : point le plus
   sombre à 231 sur 255, contre 234 sur la référence). Le seul tracé visible est
   alors celui de la carte, comme sur la référence. */
/* Rayon 0 comme .main-pushed : une animation en fill-mode:both fige sa dernière
   image ET l'emporte sur les déclarations normales. Une valeur différente ici
   redonnerait un arrondi à la carte de contenu, qui doit rester droite. */
@keyframes creaMainPush   { from { transform: translateX(0) } to { transform: translateX(var(--crea-sb-w)) } }
@keyframes creaMainUnpush { from { transform: translateX(var(--crea-sb-w)) } to { transform: translateX(0) } }
.main-anim-push   { animation: creaMainPush   .32s cubic-bezier(.16,1,.3,1) both; }
.main-anim-unpush { animation: creaMainUnpush .32s cubic-bezier(.16,1,.3,1) both; }

/* Desktop : le contenu glisse en douceur quand la sidebar s'ouvre/se ferme */
/* 264px était écrit ici en clair — cinquième copie de la largeur de la barre
   latérale, et la plus traître : celle qui décide de combien le contenu voyage.
   Elle vient maintenant de --crea-sb-largeur, comme l'aside et comme les
   onglets de la barre de fenêtre. Les trois ne peuvent plus diverger. */
/* MÊME EMPRISE QUE LES ONGLETS, ET C'EST TOUT L'INTÉRÊT. Le contenu part de
   sa place d'avant : 284 px pour une carte ancrée, pas 264. Les onglets
   rejouent ce trajet-là — deux nombres pour un seul déplacement finissent
   toujours par se séparer, et l'écart se voit au milieu du geste. */
@keyframes creaMainShiftIn  { from { transform: translateX(calc(-1 * var(--crea-barre-poussee-geste, 0px))) } to { transform: translateX(0) } }
@keyframes creaMainShiftOut { from { transform: translateX(var(--crea-barre-poussee-geste, 0px))  } to { transform: translateX(0) } }
.main-shift-in  { animation: creaMainShiftIn  var(--crea-sb-duree) var(--crea-sb-courbe) both; }
.main-shift-out { animation: creaMainShiftOut var(--crea-sb-duree) var(--crea-sb-courbe) both; }

/* Sidebar : glissement synchronisé avec le contenu (une seule réalité fluide) */
@keyframes creaSbIn  { from { transform: translateX(-100%) } to { transform: translateX(0) } }
@keyframes creaSbOut { from { transform: translateX(0) } to { transform: translateX(-100%) } }
.sidebar-glide-in  { animation: creaSbIn  var(--crea-sb-duree) var(--crea-sb-courbe) both; }
.sidebar-glide-out { animation: creaSbOut var(--crea-sb-duree) var(--crea-sb-courbe) both; pointer-events: none; }

/* --- Page de connexion : galerie promo (images/vidéos) à défilement automatique --- */
.promo-slide { opacity: 0; animation-name: promoFade; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes promoFade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  33%  { opacity: 1; }
  38%  { opacity: 0; }
  100% { opacity: 0; }
}

/* --- Widget (météo+actualités fusionnés) : carrousel crossfade Heure/Date <-> Météo --- */
.widget-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition:  opacity var(--duree-3) var(--courbe);
}

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHIE PREMIUM — lecture longue, rythme régulier, hiérarchie
   nette. Placé en fin de feuille : gagne sur les règles génériques.
   ══════════════════════════════════════════════════════════════════ */
.msg-content {
  /* 16px par défaut. La feuille annonçait 15px « lecture longue » mais
     applyTheme() imposait 14 (STATE.chatFontSize) : la valeur de repli n'était
     jamais atteinte, et le texte restait sous ce que la typographie prévoyait.
     Les deux disent 16 maintenant, et le réglage Aa continue de commander. */
  font-size: var(--msg-font-size, 16px);
  line-height: 1.8;
  letter-spacing: -0.003em;
  color: var(--t-secondary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Rythme vertical : un seul interligne entre blocs, pas de double marge. */
.msg-content > :first-child { margin-top: 0; }
.msg-content > :last-child { margin-bottom: 0; }
.msg-content p { margin: 0 0 1.15em; line-height: 1.8; }

/* Titres : hiérarchie par le poids et le tracking, pas par la taille seule. */
.msg-content h1,
.msg-content h2,
.msg-content h3,
.msg-content h4,
.msg-content h5,
.msg-content h6 {
  color: var(--t-primary);
  line-height: 1.3;
  letter-spacing: -0.018em;
  margin: 1.6em 0 .6em;
  scroll-margin-top: 1rem;
}
.msg-content h1 { font-size: 1.45em; font-weight: 700; letter-spacing: -0.024em; }
.msg-content h2 { font-size: 1.24em; font-weight: 700; }
.msg-content h3 { font-size: 1.09em; font-weight: 700; }
.msg-content h4 { font-size: 1em;    font-weight: 700; }
.msg-content h5,
.msg-content h6 {
  font-size: .92em; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--t-dim);
}

/* Listes : marqueurs discrets, interligne resserré, imbrication lisible. */
.msg-content ul,
.msg-content ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.msg-content li { margin: 0 0 .5em; line-height: 1.75; padding-left: .15em; }
.msg-content li::marker { color: var(--t-faint); font-weight: 500; }
.msg-content ol > li::marker { font-variant-numeric: tabular-nums; }
.msg-content li > ul,
.msg-content li > ol { margin: .38em 0 0; }
.msg-content li > p { margin-bottom: .38em; }

/* Emphase : le gras porte la structure, l'italique reste discret. */
.msg-content strong,
.msg-content b { color: var(--t-primary); font-weight: 700; letter-spacing: -0.006em; }
.msg-content em,
.msg-content i { font-style: italic; color: inherit; opacity: .94; }
.msg-content del { opacity: .6; }

/* Citations : un filet, pas un encadré coloré. */
.msg-content blockquote {
  margin: 1.15em 0;
  padding: .1em 0 .1em 1.05em;
  border-left: 2.5px solid var(--border-hov);
  background: transparent;
  border-radius: 0;
  color: var(--t-dim);
  font-style: normal;
}
.msg-content blockquote p { margin-bottom: .5em; }
.msg-content blockquote > :last-child { margin-bottom: 0; }

/* Code inline : neutre, sans halo coloré. */
.msg-content code:not(pre code) {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--t-primary);
  padding: .1em .36em;
  border-radius: .32em;
  font-size: .86em;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-ligatures: none;
  white-space: break-spaces;
}
html.light .msg-content code:not(pre code) { background: #f1f3f5; color: #1e293b; }

/* Liens : soulignement fin, ancré sur la ligne de base. */
.msg-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
  transition:  text-decoration-color var(--duree-2) var(--courbe);
}
.msg-content a:hover { text-decoration-color: var(--accent); }

/* === Tableaux ==============================================================
   Le conteneur .md-table-card (posé par habillerTableaux) porte la carte et le
   défilement horizontal ; le  redevient un vrai tableau et occupe toute
   la largeur disponible au lieu de se tasser à gauche.
   ========================================================================= */
.msg-content .md-table-card {
  margin: 1.15em 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-primary);
}
.msg-content table {
  border-collapse: collapse;
  width: 100%;
  min-width: max-content;
  margin: 0;
  font-size: .9em;
  white-space: normal;
}
.msg-content th,
.msg-content td {
  border: none;
  border-bottom: 1px solid var(--border-dim);
  padding: .62em 1em;
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.msg-content thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-secondary);
  color: var(--t-primary);
  font-weight: 600;
  font-size: .93em;
  letter-spacing: .01em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.msg-content td { color: var(--t-secondary); }
/* Colonnes entièrement numériques (repérées au rendu) : alignées à droite,
   chiffres de largeur fixe — les ordres de grandeur se comparent d'un coup d'œil. */
.msg-content th.num, .msg-content td.num { text-align: right; }
.msg-content tbody tr:last-child td { border-bottom: none; }
.msg-content tbody tr:hover td { background: color-mix(in srgb, var(--t-primary) 3.5%, transparent); }
/* Première colonne : c'est l'intitulé de la ligne, il porte la lecture. */
.msg-content tbody td:first-child { color: var(--t-primary); font-weight: 500; }
/* Un tableau resté hors carte (contenu injecté ailleurs) garde un défilement. */
.msg-content > table { display: block; overflow-x: auto; }

/* Séparateur : discret, respiration large. */
.msg-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* Images : coins doux, pas de cadre lourd. */
.msg-content img {
  max-width: min(100%, 480px);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 1em 0;
}

/* Blocs de code : marge cohérente avec le reste du rythme. Les 
 internes
   d'une carte de code n'en prennent pas — la carte porte déjà la marge. */
.msg-content pre,
.msg-content .code-card { margin: 1.15em 0; }
.msg-content .code-card pre { margin: 0; }
.msg-content .code-card--ligne { margin: .9em 0; }

/* Sections repliables ([details:Titre] … [/details]) : annexes, justifications
   longues, variantes.
   La règle globale `details > summary::marker { display:none }` (plus haut,
   pour les pastilles du travail en cours) supprime le triangle natif — sans
   chevron explicite ici, une section repliable dans une réponse n'aurait
   AUCUNE affordance et passerait pour un titre mort. */
.msg-content details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 1.15em 0;
  overflow: hidden;
}
.msg-content details > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .85rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
  font-size: .94em;
  color: var(--t-primary);
  transition:  background var(--duree-2) var(--courbe);
}
.msg-content details > summary:hover { background: color-mix(in srgb, var(--t-primary) 4%, transparent); }
.msg-content details > summary::before {
  content: '›';
  flex-shrink: 0;
  font-size: 1.15em;
  line-height: 1;
  opacity: .55;
  transition:  transform var(--duree-2) var(--courbe);
}
.msg-content details[open] > summary::before { transform: rotate(90deg); }
.msg-content details[open] > summary { border-bottom: 1px solid var(--border); }
.msg-content details > :not(summary) { padding: 0 .85rem; }
.msg-content details > :not(summary):first-of-type { padding-top: .7rem; }
.msg-content details > :not(summary):last-child { padding-bottom: .7rem; }

/* ══════════════════════════════════════════════════════════════════
   FORMATS RICHES — galerie, entités, tableur interactif
   ══════════════════════════════════════════════════════════════════ */

/* Galerie : plusieurs images d'affilée deviennent une grille. */
.md-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--espace-4);
  margin: 1.15em 0;
}
.md-gallery .md-img-wrap { margin: 0 !important; }
.md-gallery .md-img-wrap img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  margin: 0 !important; border-radius: var(--radius); cursor: zoom-in;
}

/* Entité cliquable : [[Nom|type]] — discrète en ligne, sans casser le texte. */
.md-entity {
  display: inline; cursor: pointer;
  color: var(--t-primary); font-weight: 600;
  border-bottom: 1px dotted var(--border-hov);
  transition:  color var(--duree-2), border-color var(--duree-2) var(--courbe);
}
.md-entity:hover,
.md-entity:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}

/* Tableur : en-têtes triables + barre d'outils au survol. Même grammaire
   visuelle que les tableaux de réponse ci-dessus — un seul tableau, pas deux
   styles selon d'où il vient. */
.crea-sheet-table { border-collapse: collapse; width: 100%; min-width: max-content; font-size: .9em; margin: 0; }
.crea-sheet-table th {
  cursor: pointer; user-select: none; white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-secondary);
  color: var(--t-primary); font-weight: 600; text-align: left; font-size: .93em;
  padding: .62em 1em; border-bottom: 1px solid var(--border);
}
.crea-sheet-table th:hover { color: var(--accent); }
.crea-sheet-table td {
  padding: .62em 1em; border-bottom: 1px solid var(--border-dim);
  color: var(--t-secondary); font-variant-numeric: tabular-nums; vertical-align: top;
}
.crea-sheet-table tbody td:first-child { color: var(--t-primary); font-weight: 500; }
.crea-sheet-table th.num, .crea-sheet-table td.num { text-align: right; }
.crea-sheet-table tbody tr:last-child td { border-bottom: none; }
.crea-sheet-table tbody tr:hover td { background: color-mix(in srgb, var(--t-primary) 3.5%, transparent); }
.crea-sheet-arrow { font-size: .8em; }

.md-table-wrap { position: relative; }
.md-table-tools {
  position: absolute; top: 5px; right: 6px; z-index: 3;
  display: flex; gap: var(--espace-2); opacity: 0; transition:  opacity var(--duree-2) var(--courbe);
}
.md-table-wrap:hover .md-table-tools,
.md-table-tools:focus-within { opacity: 1; }
.md-table-tools button {
  font-size: var(--texte-1); font-weight: 500; letter-spacing: .02em;
  padding: var(--espace-2) var(--espace-4); border-radius: var(--radius-sm); cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--t-dim); font-family: inherit; transition:  color var(--duree-2), border-color var(--duree-2) var(--courbe);
}
.md-table-tools button:hover { color: var(--accent); border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   BOUCLE AGENT — étapes à nu : pas de cadre, une flèche par ligne.
   La ligne est l'information ; la flèche ouvre ce qui s'est passé.
   ══════════════════════════════════════════════════════════════════ */
/* PAS DE CADRE. J'avais ajouté une bordure et un fond en croyant qu'on me
   demandait « un cadre » ; la référence montrée était l'inverse — des lignes
   nues, une par action, sans boîte autour. Un bloc gris posé au milieu d'une
   réponse est précisément le « gros bloc » qu'on me reprochait. */
.crea-steps { margin: 0 0 .7rem; }

/* En-tête : logo qui respire + phase, puis chrono et jetons. */
.crea-steps-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem .9rem; margin-bottom: .35rem;
}

/* LA LIGNE VIVANTE — ce que CREA fait EN CE MOMENT, sa cible qui change à
   chaque appel d'outil. C'est la partie « en mouvement » : sans elle, on voyait
   une pile d'étapes finies et rien qui bouge, donc rien qui dise que ça
   travaille encore. */
.crea-step-courant {
  display: flex; align-items: center; gap: .45rem;
  padding: .25rem 0;
  font-size: var(--texte-3); color: var(--t-secondary);
  min-width: 0;
}
.crea-step-courant .verbe { font-weight: 600; color: var(--t-primary); white-space: nowrap; }
.crea-step-courant .cible {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--texte-2); color: var(--t-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Trois points qui avancent — le signe le plus lisible que quelque chose court. */
.crea-step-courant .points::after {
  content: '';
  animation: creaPoints 1.4s steps(4, end) infinite;
}
@keyframes creaPoints {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}
/* Barre de progression indéterminée, collée au bas du cadre pendant le travail. */
.crea-steps-jauge {
  height: 2px; border-radius: var(--radius-rond); overflow: hidden;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  margin: .35rem 0 .1rem; max-width: 180px;
}
.crea-steps-jauge::after {
  content: ''; display: block; height: 100%; width: 35%;
  background: var(--accent);
  animation: creaJauge 1.5s ease-in-out infinite;
}
@keyframes creaJauge {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .crea-step-courant .points::after { animation: none; content: '…'; }
  .crea-steps-jauge::after { animation: none; width: 100%; opacity: .4; }
}
.crea-step-phase {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--texte-2); color: var(--t-dim); white-space: nowrap;
}
.crea-step-meta {
  font-size: var(--texte-2); color: var(--t-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Le logo Créa respire pendant le travail — jamais un spinner générique. */
.crea-step-spark {
  width: 12px; height: 12px; flex-shrink: 0;
  animation: creaStepBreath 1.6s ease-in-out infinite;
}
@keyframes creaStepBreath {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .crea-step-spark { animation: none; opacity: .8; }
}

/* ── LE LOGO QUI OUVRE LA BOUCLE ────────────────────────────────────────────
   « On ne le remarque même pas. » Mesuré : 13 px de côté, sous une ligne de 18
   et devant un texte de 12 — il était plus petit que ce qu'il annonce.
   C'est la première chose que CREA montre quand elle se met au travail : il
   mène la ligne au lieu de s'y fondre. La marge à droite ouvre l'espace que le
   `gap` de la ligne, réglé pour une puce, ne donnait pas. */
.crea-step-spark.est-ouverture {
  width: 20px; height: 20px; margin-right: .15rem;
}

/* Une étape = une ligne. Rien derrière elle. */
.crea-step { border: none; background: none; }
.crea-step-line {
  display: flex; align-items: center; gap: .45rem;
  padding: .25rem 0; cursor: pointer; user-select: none;
  list-style: none; outline: none; border-radius: var(--radius-sm);
  transition:  background var(--duree-1) var(--courbe);
}
.crea-step-line::-webkit-details-marker { display: none; }
.crea-step-line:hover { background: color-mix(in srgb, var(--t-primary) 4%, transparent); }
.crea-step-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.crea-step-chev {
  width: 12px; height: 12px; flex-shrink: 0;
  color: var(--t-faint); opacity: .55;
}
.crea-step-dot {
  width: 6px; height: 6px; border-radius: var(--radius-rond); flex-shrink: 0;
}
/* Une étape se lit « VERBE cible chiffre » : ce qui a été fait, sur quoi, ce
   que ça a produit. Le verbe porte, la cible suit en retrait, le chiffre ferme
   la ligne. Trois graisses, trois niveaux de gris — la ligne se lit d'un coup
   d'œil sans qu'aucune partie n'écrase les autres. */
.crea-step-label {
  font-size: var(--texte-3); color: var(--t-secondary); white-space: nowrap; font-weight: 500;
}
.crea-step-label.is-run { color: var(--t-primary); font-weight: 600; }
.crea-step-arg {
  min-width: 0; max-width: 22rem; font-size: var(--texte-2); color: var(--t-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.crea-step-chiffre {
  font-size: var(--texte-1); color: var(--t-faint); flex-shrink: 0;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.crea-step-chiffre.est-echec { color: var(--danger); }
.crea-step-spacer { flex: 1; min-width: .5rem; }
.crea-step-time {
  font-size: var(--texte-1); color: var(--t-faint); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* LA FLÈCHE FERME LA LIGNE. Elle était en tête, avant le libellé ; la référence
   montrée la met en bout, après le chrono — « Vérifier l'état des
   téléchargements ⋯ 2,4s › ». Le libellé commence alors toujours au même x,
   quelle que soit la ligne, et la colonne se lit d'un trait. */
.crea-step-line > .crea-step-chev:last-child { margin-left: .3rem; }

/* ── LA FRISE — PENSÉE, ACTION, PENSÉE, ACTION ─────────────────────────────
   Le message se montait en trois tas : toutes les étapes, toute la réflexion,
   tout le texte. On lisait donc une pile d'actions d'un côté et un pavé de
   pensée de l'autre, sans jamais savoir laquelle avait décidé laquelle. Ici
   chaque action est précédée du segment de pensée qui l'a amenée, dans l'ordre
   où les choses se sont passées. */
.crea-frise { display: flex; flex-direction: column; }
.crea-frise-pensee {
  font-size: var(--texte-2);
  line-height: 1.65;
  color: var(--t-dim);
  padding: .3rem 0 .45rem;
  /* La pensée est du texte suivi, pas une ligne d'état : elle se replie et
     respire, là où les lignes d'action tiennent sur une seule ligne. */
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Deux pensées de suite — une action sans réflexion entre elles — ne doivent
   pas creuser un trou : elles se lisent comme un seul paragraphe. */
.crea-frise-pensee + .crea-frise-pensee { padding-top: 0; }

/* CE QUE CREA DIT ENTRE DEUX ACTIONS. Pas une pensée grisée : c'est la réponse
   elle-même, écrite par morceaux au fil du travail. Elle garde donc la couleur
   et la taille du corps du message — c'est le même texte, simplement rendu là
   où il a été écrit. */
.crea-frise-dit {
  color: var(--t-primary);
  padding: .25rem 0 .5rem;
}
.crea-frise-dit > :first-child { margin-top: 0; }
.crea-frise-dit > :last-child { margin-bottom: 0; }

/* LE PLAN. Ce à quoi CREA s'est engagée, et où elle en est.

   Il ne se replie pas avec le reste : replié, il faudrait ouvrir pour voir
   qu'une étape est restée ouverte — c'est-à-dire cacher précisément ce qu'on
   veut montrer. Le détail des outils se replie ; l'engagement, non. */
.crea-plan { margin: .35rem 0 .5rem; }
.crea-plan-tete {
  margin: 0 0 .25rem; font-size: var(--texte-1); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--t-faint);
  font-variant-numeric: tabular-nums;
}
.crea-plan-ligne {
  display: flex; align-items: baseline; gap: .4rem;
  font-size: var(--texte-3); line-height: 1.55; color: var(--t-dim);
}
.crea-plan-case { flex-shrink: 0; width: .8rem; font-size: var(--texte-1); }
/* L'étape faite s'efface, celle en cours porte. Sans ce contraste, dix lignes
   grises se lisent comme un paragraphe et non comme un avancement. */
.crea-plan-ligne.est-fait { color: var(--t-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.crea-plan-ligne.est-fait .crea-plan-case { color: #22c55e; }
.crea-plan-ligne.est-courant { color: var(--t-primary); font-weight: 600; }
.crea-plan-ligne.est-courant .crea-plan-case { color: var(--accent); }

/* LE TOUR REPLIÉ. Une seule ligne pour tout ce qui a été fait — « Exécuté 2
   commandes, utilisé 2 outils » — et le détail dessous quand on l'ouvre.

   Le filet de gauche du corps est retiré ICI, et seulement ici : à l'intérieur
   du repli, chaque étape porte déjà le sien. Deux filets emboîtés font un
   escalier de traits gris, c'est-à-dire exactement le « gros bloc » qu'on
   cherchait à supprimer. */
.crea-tour > .crea-step-body {
  margin-left: .55rem; padding-left: .5rem; border-left: none;
}
/* La rotation de la flèche vient déjà de `details[open] > summary
   .step-chevron` : la redéclarer ici ferait une deuxième source de vérité pour
   le même geste, et la première divergence serait invisible. */
.crea-tour > .crea-step-line > .crea-step-label { color: var(--t-dim); }

/* CE QUI TOURNE AILLEURS. Même ligne que les étapes — c'est le même genre de
   fait — mais elle ne se déplie pas : ni curseur de main, ni surbrillance au
   survol, qui promettraient un clic qui ne vient pas. Le point pulse : c'est ce
   qui distingue « en train de tourner » de « fait ». */
.crea-tache-fond { cursor: default; }
.crea-tache-fond:hover { background: none; }
.crea-tache-fond > .crea-step-dot { animation: crea-pulse 1.4s ease-in-out infinite; }
@keyframes crea-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* Le détail : décalé sous la flèche, filet fin à gauche plutôt qu'un encadré. */
.crea-step-body {
  margin: .2rem 0 .5rem 1.05rem;
  padding-left: .75rem;
  border-left: 1px solid var(--border);
}
/* ── CE QUE L'ÉTAPE A TROUVÉ ────────────────────────────────────────────────
   Une liste de lignes nues : le titre à gauche, la provenance à droite. Ni
   fond, ni cadre, ni puce — la même sobriété que la ligne d'étape au-dessus,
   dont ceci n'est que le détail. Le survol souligne, comme partout ailleurs :
   c'est le seul signe qu'une ligne mène quelque part, et il n'apparaît qu'au
   moment où l'on vise. */

.crea-trouvailles { display: flex; flex-direction: column; margin-bottom: .45rem; }
.crea-trouvaille {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .2rem 0; min-width: 0;
  font-size: var(--texte-2); color: var(--t-secondary); text-decoration: none;
}
a.crea-trouvaille:hover .crea-trouvaille-titre,
a.crea-trouvaille:focus-visible .crea-trouvaille-titre {
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
/* Le titre cède la place en premier : une provenance coupée ne dit plus d'où
   ça vient, alors qu'un titre coupé se devine encore. */
.crea-trouvaille-titre {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--t-primary);
}
.crea-trouvaille-source {
  flex-shrink: 0; color: var(--t-faint); font-size: var(--texte-1);
  max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* « lue » : la page a vraiment été ouverte, pas seulement résumée par le
   moteur. Le serveur seul le sait — ça ne se devine pas d'une URL. */
.crea-trouvaille-lu {
  flex-shrink: 0; font-size: var(--texte-1); color: var(--accent);
  background: var(--accent-bg); border-radius: var(--radius-xs);
  padding: 0 .3rem; line-height: 1.5;
}

.crea-step-io + .crea-step-io { margin-top: .4rem; }
.crea-step-io p {
  margin: 0 0 .2rem; font-size: var(--texte-1); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--t-faint);
}
.crea-step-io pre {
  margin: 0; font-size: var(--texte-2); line-height: 1.5;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--t-secondary); white-space: pre-wrap; word-break: break-word;
  max-height: 200px; overflow-y: auto;
}
.crea-step-wait { margin: 0; font-size: var(--texte-2); color: var(--accent); }

/* Listes de tâches markdown — « - [ ] » devient une case cochable. */
.msg-content li:has(> input[type=checkbox]) { list-style: none; margin-left: -1.1em; }
.msg-content input[type=checkbox] {
  width: 14px; height: 14px; margin-right: .5em;
  vertical-align: -1px; cursor: pointer; accent-color: var(--accent);
}
.msg-content li:has(> input[type=checkbox]:checked) { color: var(--t-faint); }

/* ══════════════════════════════════════════════════════════════════
   L'ESPACE ARTÉFACTS — la galerie, rangée par surface.
   Copiée sur celle de Claude Code : titre, filtre, recherche, onglets,
   grille de cartes à vignette. Ce qui change ici, ce sont les sections :
   quatorze studios rangés à plat feraient un tas.
   ══════════════════════════════════════════════════════════════════ */
.art-espace {
  max-width: 1080px; margin: 0 auto; padding: var(--espace-10) var(--espace-9) 64px;
  overflow-y: auto; height: 100%;
}
.art-entete { display: flex; align-items: center; gap: var(--espace-7); flex-wrap: wrap; margin-bottom: var(--espace-8); }
.art-titre { font-size: var(--texte-13); font-weight: 700; color: var(--t-primary); margin: 0; flex: 1; }
.art-entete-actions { display: flex; align-items: center; gap: var(--espace-5); }
.art-filtre {
  font-size: var(--texte-4); color: var(--t-dim); background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--espace-4) var(--espace-6); transition: all var(--duree-1) var(--courbe);
}
.art-nouveau {
  font-size: var(--texte-4); font-weight: 600; color: var(--bg-primary);
  background: var(--t-primary); border: 0; border-radius: var(--radius-sm);
  padding: var(--espace-4) var(--espace-7); cursor: pointer;
  transition: all var(--duree-1) var(--courbe);
}
.art-nouveau:hover { opacity: .88; }
.art-recherche {
  display: flex; align-items: center; gap: var(--espace-5);
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--espace-5) var(--espace-7);
  color: var(--t-faint); margin-bottom: var(--espace-7);
}
.art-recherche input {
  flex: 1; background: none; border: 0; outline: none;
  font-size: var(--texte-4); color: var(--t-primary);
}
.art-onglets { display: flex; gap: var(--espace-4); margin-bottom: var(--espace-9); }
.art-onglet {
  font-size: var(--texte-4); color: var(--t-dim); background: transparent;
  border: 0; border-radius: var(--radius-sm); padding: var(--espace-4) var(--espace-6);
  cursor: pointer; transition: all var(--duree-1) var(--courbe);
}
.art-onglet.est-actif { background: var(--bg-tertiary); color: var(--t-primary); font-weight: 600; }

.art-groupe { margin-bottom: var(--espace-10); }
.art-groupe-titre {
  display: flex; align-items: center; gap: var(--espace-5);
  font-size: var(--texte-5); font-weight: 600; color: var(--t-primary);
  margin: 0 0 var(--espace-6);
}
.art-groupe-compte {
  font-size: var(--texte-2); font-weight: 500; color: var(--t-faint);
  background: var(--bg-tertiary); border-radius: var(--radius-rond);
  padding: 0 var(--espace-5); font-variant-numeric: tabular-nums;
}
/* UN GROUPE VIDE LE DIT. Le masquer laisserait croire que ce studio n'existe
   pas, alors qu'il n'a simplement rien produit — deux choses différentes. */
.art-groupe-vide { font-size: var(--texte-4); color: var(--t-faint); margin: 0; }
.art-vide-total { font-size: var(--texte-5); color: var(--t-faint); text-align: center; padding: 64px var(--espace-8); }

.art-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--espace-7); }
/* LA CARTE CONTIENT DEUX BOUTONS, elle n'en est plus un : un bouton ne peut pas
   en imbriquer un autre, et le menu « ⋮ » des photos de référence l'exigeait.
   `overflow: visible` — le menu déborde de la carte, sinon il serait coupé. */
.art-carte {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--duree-2) var(--courbe);
}
.art-carte:hover { border-color: var(--t-faint); box-shadow: var(--ombre-2); }
.art-carte-ouvrir {
  display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: var(--radius-lg); overflow: hidden;
}
/* IL N'APPARAÎT QU'AU SURVOL, comme sur les photos — mais il reste atteignable
   au clavier : `:focus-visible` le montre, sans quoi il n'existerait que pour
   la souris. */
.art-carte-menu {
  position: absolute; top: var(--espace-5); right: var(--espace-5); z-index: 2;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-primary); color: var(--t-secondary); cursor: pointer;
  opacity: 0; transition: opacity var(--duree-1) var(--courbe);
}
.art-carte:hover .art-carte-menu,
.art-carte.est-menu-ouvert .art-carte-menu,
.art-carte-menu:focus-visible { opacity: 1; }
.art-carte-menu:hover { background: var(--bg-tertiary); }
.art-carte-menu-liste {
  position: absolute; top: calc(var(--espace-5) + 28px); right: var(--espace-5); z-index: 3;
  min-width: 210px; padding: var(--espace-3);
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--ombre-3);
}
.art-carte-menu-note {
  margin: var(--espace-3) 0 0; padding: 0 var(--espace-5) var(--espace-3);
  font-size: var(--texte-2); color: var(--t-faint); line-height: 1.4;
}
.art-vignette {
  height: 148px; padding: var(--espace-7); overflow: hidden;
  background: var(--bg-primary); border-bottom: 1px solid var(--border);
}
.art-vignette--code { display: flex; align-items: center; justify-content: center; color: var(--t-faint); }
/* L'APERÇU RÉEL, EN PETIT. Le document est rendu à sa vraie largeur puis
   réduit : une page dessinée dans 148 px de haut ne ressemble à rien, alors
   qu'une page de 1000 px vue au tiers ressemble à elle-même.
   `pointer-events: none` — la carte entière est un bouton ; un clic qui
   tomberait DANS l'aperçu n'ouvrirait rien. */
.art-vignette--rendu { padding: 0; position: relative; }
.art-vignette-cadre {
  position: absolute; top: 0; left: 0; border: 0; pointer-events: none;
  width: 333.34%; height: 493px;  /* 100 / 0.3 et 148 / 0.3 — l'aperçu réduit remplit exactement la vignette */
  transform: scale(0.3); transform-origin: 0 0;
  background: #fff;
}
.art-vignette-titre { font-size: var(--texte-4); font-weight: 600; color: var(--t-secondary); line-height: 1.35; }
.art-vignette-type { font-size: var(--texte-2); color: var(--t-faint); margin-top: var(--espace-4); }
.art-carte-pied { padding: var(--espace-6) var(--espace-7); }
.art-carte-titre {
  font-size: var(--texte-4); font-weight: 500; color: var(--t-primary); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.art-carte-meta {
  display: flex; align-items: center; gap: var(--espace-4);
  font-size: var(--texte-2); color: var(--t-faint); margin: var(--espace-3) 0 0;
}
.art-note-absents {
  font-size: var(--texte-2); color: var(--t-faint); line-height: 1.6;
  border-top: 1px solid var(--border); padding-top: var(--espace-7); margin-top: var(--espace-9);
}
@media (max-width: 640px) {
  .art-espace { padding-left: var(--espace-7); padding-right: var(--espace-7); }
  .art-entete-actions { width: 100%; }
  .art-filtre { flex: 1; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   MODE RECHERCHE — les blocs des onglets Réponse/Liens/Images/
   Actualités/Vidéos. Pas de cadre lourd : de l'air, une hiérarchie
   nette (source → url → titre → extrait) et des séparateurs fins.
   ══════════════════════════════════════════════════════════════════ */

/* La barre de reglages, au-dessus des onglets. Deux menus et une phrase de
   cout : discrete tant qu'on ne la regarde pas, atteignable des qu'on la
   cherche. Meme largeur que la page pour qu'elle ne flotte pas a cote. */
.rch-reglages {
  max-width: 780px; margin: 0 auto; padding: var(--espace-6) var(--espace-10) 0;
  display: flex; align-items: center; gap: var(--espace-7); flex-wrap: wrap;
}
.rch-reglage { display: inline-flex; align-items: center; gap: var(--espace-4); }
.rch-reglage > span { font-size: var(--texte-4); color: var(--t-faint); }
.rch-reglage select {
  font-size: var(--texte-4); color: var(--t-dim);
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--espace-3) var(--espace-5);
  transition: all var(--duree-1) var(--courbe);
}
.rch-reglage select:hover { border-color: var(--t-faint); }
/* Le cout, dit SOUS les reglages : un curseur dont on ne dit pas le prix se
   regle a l'aveugle, et quand le quota tombe l'onglet se vide sans raison.
   Toujours sur sa propre ligne, alignee a gauche comme les etiquettes : pousse
   a droite, il tombait tantot au bout de la rangee tantot seul en dessous,
   selon la largeur de la fenetre — une place decidee par le hasard. */
.rch-cout {
  font-size: var(--texte-4); color: var(--t-faint);
  flex-basis: 100%; margin-top: calc(var(--espace-4) * -1);
}

.rch-page { max-width: 780px; margin: 0 auto; padding: var(--espace-9) var(--espace-10) 64px; }
.rch-entete { font-size: var(--texte-4); color: var(--t-faint); margin: 0 0 var(--espace-9); }
.rch-entete span { color: var(--t-dim); }
/* Le compte de resultats : discret, pousse a droite de la ligne d'en-tete. */
.rch-entete .rch-compte {
  float: right; color: var(--t-faint); font-variant-numeric: tabular-nums;
}
.rch-etat {
  display: flex; align-items: center; gap: var(--espace-5);
  color: var(--t-faint); font-size: var(--texte-4); padding-top: 40px; justify-content: center;
}
.rch-spin {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--t-dim);
  animation: rch-tourne .7s linear infinite;
}
@keyframes rch-tourne { to { transform: rotate(360deg) } }

/* Ligne de provenance — favicon + domaine. Commune à tous les blocs :
   c'est elle qui donne l'impression d'un moteur, pas d'un fil de chat. */
.rch-source {
  display: flex; align-items: center; gap: var(--espace-3);
  font-size: var(--texte-3); color: var(--t-dim); min-width: 0;
}
.rch-source > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rch-fav { border-radius: var(--radius-xs); flex-shrink: 0; object-fit: contain; }
.rch-lien-ext { opacity: .45; flex-shrink: 0; }
.rch-url {
  font-size: var(--texte-2); color: var(--t-faint); margin-top: var(--espace-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Liens ── */
.rch-liens { display: flex; flex-direction: column; }
.rch-lien {
  display: flex; gap: var(--espace-8); align-items: flex-start;
  padding: var(--espace-8) 0; text-decoration: none;
  border-top: 1px solid var(--border);
}
.rch-lien:first-child { border-top: none; padding-top: 0; }
.rch-lien:hover .rch-lien-titre { text-decoration: underline; }
.rch-lien-corps { flex: 1; min-width: 0; }
.rch-lien-titre {
  font-size: var(--texte-6); font-weight: 600; line-height: 1.4; margin-top: var(--espace-3);
  color: var(--t-primary);
}
.rch-lien-extrait {
  font-size: var(--texte-4); line-height: 1.55; color: var(--t-dim); margin: var(--espace-3) 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rch-lien-vignette {
  width: 108px; height: 78px; flex-shrink: 0; border-radius: var(--radius);
  overflow: hidden; background: var(--bg-tertiary);
}
.rch-lien-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Images ── grille dense, la légende sous chaque vignette */
.rch-images {
  display: grid; gap: var(--espace-7);
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.rch-image { text-decoration: none; display: block; min-width: 0; }
/* `> img` — LE CHEVRON N'EST PAS DÉCORATIF. Sans lui, la règle attrapait aussi
   le favicon de la source, niché dans .rch-image-source : un logo de 12 px
   étiré à 100 % de la tuile en 4/3. Le résultat s'est vu à l'écran — les gros
   ronds roses et bleus étaient le logo de Flickr, les damiers noir et blanc
   celui de Wikimedia Commons, tous deux pris pour des photos. */
.rch-image > img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius); background: var(--bg-tertiary);
  transition:  transform var(--duree-2) var(--courbe);
}
.rch-image:hover > img { transform: scale(1.015); }
/* Et une taille par défaut sur le favicon lui-même : la même erreur ailleurs
   ne pourrait plus le laisser s'étirer. */
.rch-image-source .rch-fav { width: 12px; height: 12px; aspect-ratio: auto; border-radius: var(--radius-xs); }
.rch-image-source {
  display: flex; align-items: center; gap: var(--espace-3); margin-top: var(--espace-3);
  font-size: var(--texte-2); color: var(--t-faint); min-width: 0;
}
.rch-image-source > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Actualités ── carte : vignette, titre, source · date */
.rch-actus {
  display: grid; gap: var(--espace-8);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.rch-actus-compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-bottom: var(--espace-5); }
.rch-actu {
  display: flex; flex-direction: column; text-decoration: none;
  border-radius: var(--radius); overflow: hidden; min-width: 0;
  transition:  background var(--duree-2) var(--courbe);
}
.rch-actu:hover { background: color-mix(in srgb, var(--t-primary) 4%, transparent); }
.rch-actu-vignette {
  width: 100%; aspect-ratio: 16 / 9; background: var(--bg-tertiary);
  border-radius: var(--radius); overflow: hidden; margin-bottom: var(--espace-4);
}
.rch-actu-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rch-actu-corps { padding: 0 var(--espace-1) var(--espace-3); min-width: 0; }
.rch-actu-titre {
  font-size: var(--texte-4); font-weight: 600; line-height: 1.4; margin: 0 0 var(--espace-3);
  color: var(--t-primary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rch-actu-meta {
  display: flex; align-items: center; gap: var(--espace-3);
  font-size: var(--texte-2); color: var(--t-faint); min-width: 0;
}
.rch-actu-source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rch-actu-date { flex-shrink: 0; }

/* ── Vidéos ── vignette + bouton lecture superposé */
.rch-videos {
  display: grid; gap: var(--espace-9);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.rch-video { text-decoration: none; display: block; min-width: 0; }
.rch-video-vignette {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden; background: var(--bg-tertiary);
}
.rch-video-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rch-video-play {
  position: absolute; inset: 0; margin: auto;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.62); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--texte-6); padding-left: var(--espace-2); box-sizing: border-box;
  transition:  transform var(--duree-2) var(--courbe), background var(--duree-2) var(--courbe);
}
.rch-video:hover .rch-video-play { transform: scale(1.08); background: rgba(0,0,0,.78); }
.rch-video-titre {
  font-size: var(--texte-4); font-weight: 600; line-height: 1.4; margin: var(--espace-5) 0 var(--espace-3);
  color: var(--t-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── En-tête de l'onglet Réponse : fiche d'entité + actualités ── */
.rch-entete-reponse { max-width: 780px; margin: 0 auto; padding: var(--espace-8) var(--espace-10) 0; }
.rch-entite {
  display: flex; gap: var(--espace-8); align-items: flex-start; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--espace-7) var(--espace-8); margin-bottom: var(--espace-9);
  transition:  background var(--duree-2) var(--courbe);
}
.rch-entite:hover { background: color-mix(in srgb, var(--t-primary) 3%, transparent); }
.rch-entite-corps { flex: 1; min-width: 0; }
.rch-entite-titre {
  font-size: var(--texte-7); font-weight: 700; margin-top: var(--espace-4); color: var(--t-primary);
}
.rch-entite-resume {
  font-size: var(--texte-4); line-height: 1.6; color: var(--t-dim); margin: var(--espace-3) 0 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.rch-entite-image {
  width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--radius);
  overflow: hidden; background: var(--bg-tertiary);
}
.rch-entite-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rch-plus {
  display: block; margin: var(--espace-2) 0 var(--espace-9); padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: var(--texte-4); color: var(--t-dim);
}
.rch-plus:hover { color: var(--t-primary); text-decoration: underline; }

/* ── Pastille de source au fil de la réponse ── */
/* La pastille de citation : un repère, pas un encart. Elle portait le domaine
   complet en monospace — « learning.google » au milieu d'une phrase forme un
   pavé plus large que les mots voisins, et une réponse qui cite dix fois
   devient illisible. Elle porte maintenant le NUMÉRO de la source, le domaine
   passant au survol. */
.rch-pastille {
  display: inline-flex; align-items: center; gap: var(--espace-2);
  vertical-align: super; margin: 0 var(--espace-1);
  padding: 0 var(--espace-2); border-radius: var(--radius-rond); height: 1.35em;
  background: color-mix(in srgb, var(--t-primary) 8%, transparent);
  font-size: .62em; line-height: 1; color: var(--t-dim);
  text-decoration: none; white-space: nowrap;
  transition:  background var(--duree-1) var(--courbe), color var(--duree-1) var(--courbe);
}
.rch-pastille .rch-fav { width: 9px; height: 9px; border-radius: var(--radius-xs); }
.rch-pastille-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.rch-pastille:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--t-primary); }
.rch-pastille-plus { opacity: .55; }

/* L'en-tête de recherche vit maintenant DANS le message : il ne doit plus se
   recentrer ni ajouter sa propre gouttière, la colonne du message la donne. */
.msg-ai-container > .rch-entete-reponse {
  max-width: none; margin: 0 0 var(--espace-7); padding: 0;
}

/* ── Mobile ── la référence passe en icônes seules et en une colonne */
@media (max-width: 640px) {
  .rch-page, .rch-entete-reponse { padding-left: var(--espace-7); padding-right: var(--espace-7); }
  .rch-reglages { padding-left: var(--espace-7); padding-right: var(--espace-7); }
  .rch-lien { gap: var(--espace-6); }
  .rch-lien-vignette { width: 84px; height: 62px; }
  .rch-images { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--espace-5); }
  .rch-actus, .rch-actus-compact { grid-template-columns: 1fr 1fr; gap: var(--espace-6); }
  .rch-videos { grid-template-columns: 1fr; }
  .rch-entite { flex-direction: column-reverse; gap: var(--espace-6); }
  .rch-entite-image { width: 100%; height: 140px; }
}

/* Ligne « N sources consultées » — repliable, discrète, au-dessus de la fiche. */
.rch-etapes { margin-bottom: var(--espace-6); }
.rch-etapes > summary {
  display: inline-flex; align-items: center; gap: var(--espace-3);
  cursor: pointer; list-style: none;
  font-size: var(--texte-3); color: var(--t-faint);
}
.rch-etapes > summary::-webkit-details-marker { display: none; }
.rch-etapes > summary::before {
  content: '›'; font-size: 1.1em; line-height: 1; opacity: .6;
  transition:  transform var(--duree-2) var(--courbe);
}
.rch-etapes[open] > summary::before { transform: rotate(90deg); }
.rch-etapes > summary:hover { color: var(--t-dim); }
.rch-etapes ul {
  margin: var(--espace-3) 0 0; padding-left: var(--espace-9);
  font-size: var(--texte-2); color: var(--t-faint); line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════
   FIL DÉCOUVRIR — cartes de sujets, défilement infini
   Une carte par SUJET (les reprises d'une même dépêche sont fondues et
   comptées en « N sources »), pas une carte par article.
   ══════════════════════════════════════════════════════════════════ */

/* Les onglets tiennent leur propre ligne, centrée, sous le titre — comme la
   référence. Collés au titre et alignés à gauche, ils se lisaient comme un
   sous-titre plutôt que comme une navigation. */
.dec-onglets {
  display: flex; align-items: center; justify-content: center;
  gap: var(--espace-3); margin: 0 0 var(--espace-10);
}
.dec-onglet {
  border-radius: var(--radius-rond); padding: var(--espace-3) var(--espace-7);
  font-size: var(--texte-3); font-weight: 600; color: var(--t-dim);
  white-space: nowrap;
}
.dec-onglet:hover { color: var(--t-secondary); }
.dec-onglet.on { background: var(--t-primary); color: var(--bg-primary); }

.dec-fil { display: block; }
.dec-grille {
  display: grid; gap: var(--espace-8); margin-top: var(--espace-8);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.dec-carte {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-secondary); border: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition:  border-color var(--duree-2) var(--courbe), box-shadow var(--duree-2) var(--courbe);
}
.dec-carte:hover { border-color: var(--accent); box-shadow:  var(--ombre-2); }
.dec-visuel { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-tertiary); }
.dec-carte-large .dec-visuel { aspect-ratio: 16 / 7; }
.dec-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dec-corps { display: flex; flex-direction: column; gap: var(--espace-4); padding: var(--espace-7) var(--espace-8) var(--espace-8); }
.dec-date { font-size: var(--texte-1); color: var(--t-faint); }
.dec-titre { font-size: var(--texte-5); font-weight: 700; line-height: 1.35; color: var(--t-primary); }
.dec-carte-large .dec-titre { font-size: var(--texte-8); line-height: 1.28; }
.dec-desc {
  font-size: var(--texte-3); line-height: 1.6; color: var(--t-dim);
  /* Trois lignes au plus : au-delà, les cartes d'une même rangée n'ont plus
     la même hauteur et la grille se déchire. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dec-carte-large .dec-desc { -webkit-line-clamp: 4; font-size: var(--texte-4); }
.dec-sources { display: flex; align-items: center; gap: var(--espace-3); margin-top: var(--espace-1); }
.dec-fav { border-radius: var(--radius-xs); flex: 0 0 auto; }
.dec-sources-n { font-size: var(--texte-1); color: var(--t-faint); margin-left: var(--espace-2); }

.dec-etat {
  display: flex; align-items: center; justify-content: center; gap: var(--espace-5);
  padding: 28px var(--espace-6); font-size: var(--texte-4); color: var(--t-faint); text-align: center;
}
.dec-etat-suite { padding: var(--espace-10) var(--espace-6); font-size: var(--texte-3); }
.dec-relancer { color: var(--accent); text-decoration: underline; }
/* La sentinelle du défilement infini : invisible, mais elle doit avoir une
   hauteur réelle — un élément de hauteur nulle n'intersecte jamais rien et
   l'observateur ne se déclencherait pas. */
.dec-sentinelle { height: 1px; width: 100%; }
.dec-maj { text-align: center; font-size: var(--texte-1); color: var(--t-faint); padding-bottom: var(--espace-4); }
.dec-spin {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: dec-tourne .7s linear infinite;
}
@keyframes dec-tourne { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .dec-grille { grid-template-columns: 1fr; gap: var(--espace-6); }
  .dec-carte-large .dec-titre { font-size: var(--texte-7); }
}

/* ══════════════════════════════════════════════════════════════════
   TOUT RESTE DANS CRÉA — lecture d'article, lecteur vidéo
   Ces vues remplacent le contenu tant qu'elles sont ouvertes ; « Retour »
   ramène exactement d'où l'on vient, y compris d'une vidéo ouverte depuis
   une autre vidéo.
   ══════════════════════════════════════════════════════════════════ */

.int-vue { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.int-barre {
  display: flex; align-items: center; gap: var(--espace-5); flex: 0 0 auto;
  padding: var(--espace-5) var(--espace-8); border-bottom: 1px solid var(--border);
  background: var(--bg-primary); position: sticky; top: 0; z-index: 5;
}
.int-retour {
  display: inline-flex; align-items: center; gap: var(--espace-3);
  border-radius: var(--radius-rond); padding: var(--espace-3) var(--espace-6) var(--espace-3) var(--espace-5);
  font-size: var(--texte-3); font-weight: 600; color: var(--t-secondary);
  border: 1px solid var(--border); background: var(--bg-secondary);
}
.int-retour:hover { color: var(--t-primary); border-color: var(--accent); }
.int-barre-titre { flex: 1; min-width: 0; font-size: var(--texte-3); color: var(--t-faint); truncate: ellipsis; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.int-fermer { color: var(--t-faint); font-size: var(--texte-6); padding: var(--espace-1) var(--espace-3); }
.int-fermer:hover { color: var(--t-primary); }

/* ── Lecture d'article ── largeur de colonne de lecture, pas pleine page :
   au-delà d'environ 70 caractères par ligne, l'œil perd la ligne suivante. */
.int-article { flex: 1; min-height: 0; overflow-y: auto; max-width: 720px; margin: 0 auto; padding: 24px 22px 72px; width: 100%; }
.int-hero { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-tertiary); margin-bottom: var(--espace-9); }
.int-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.int-titre { font-size: var(--texte-11); font-weight: 800; line-height: 1.22; color: var(--t-primary); margin: 0 0 var(--espace-5); }
.int-meta { font-size: var(--texte-3); color: var(--t-faint); margin: 0 0 var(--espace-9); }
.int-chapo { font-size: var(--texte-7); line-height: 1.62; color: var(--t-secondary); font-weight: 500; margin: 0 0 var(--espace-10); }
.int-p { font-size: var(--texte-6); line-height: 1.78; color: var(--t-secondary); margin: 0 0 var(--espace-9); }
.int-h3 { font-size: var(--texte-8); font-weight: 700; color: var(--t-primary); margin: 28px 0 var(--espace-6); }
.int-cite { border-left: 3px solid var(--accent); padding-left: var(--espace-7); margin: 0 0 var(--espace-9); font-style: italic; color: var(--t-dim); font-size: var(--texte-6); line-height: 1.7; }
.int-li { font-size: var(--texte-6); line-height: 1.72; color: var(--t-secondary); margin: 0 0 var(--espace-5) var(--espace-10); list-style: disc; }
.int-pied { margin-top: 30px; padding-top: var(--espace-9); border-top: 1px solid var(--border); }
.int-lien-nav {
  display: inline-block; margin-top: var(--espace-4); border-radius: var(--radius-rond); padding: var(--espace-4) var(--espace-8);
  font-size: var(--texte-3); font-weight: 600; color: var(--accent);
  border: 1px solid var(--border); background: var(--bg-secondary);
}
.int-lien-nav:hover { border-color: var(--accent); }
.int-lien-inline { margin: var(--espace-3) 0 0; }

/* ── Lecteur vidéo ── la vidéo en grand, les autres en colonne à droite,
   comme la référence. Sous 900 px la colonne passe dessous : côte à côte,
   aucune des deux n'aurait la place. */
.int-video { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 22px; padding: var(--espace-10); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.int-video-principal { min-width: 0; }
.int-lecteur { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.int-lecteur iframe { width: 100%; height: 100%; border: 0; display: block; }
.int-video-titre { font-size: var(--texte-8); font-weight: 700; line-height: 1.3; color: var(--t-primary); margin: var(--espace-7) 0 var(--espace-3); }
/* ── Vidéo citée dans un message ──
   Le chat montrait un lecteur nu : ni titre, ni chaîne, ni durée. On ne
   savait pas ce qu'on allait lancer. Le bloc porte maintenant sa fiche. */
/* ── LA CARTE VIDÉO ────────────────────────────────────────────────────────
   « Visuellement c'est moche comme elle structure l'affichage de la vidéo. »

   Ce qui n'allait pas, et qui se voit sur la capture : la vignette portait son
   propre arrondi À L'INTÉRIEUR d'une carte déjà arrondie — quatre coins de fond
   noir entre les deux ; le titre en 700 sur deux lignes pesait plus lourd que
   la réponse qui l'entoure ; le bouton « Ouvrir en grand » était une pastille
   bordée, aussi appuyée qu'une action principale, pour un geste secondaire.

   La carte se tait et laisse l'image parler : le titre en 600, la ligne de
   contexte juste dessous, et l'accès à la description en simple lien. */
.yt-bloc { margin: var(--espace-6) 0; max-width: 560px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-secondary); overflow: hidden; }
.yt-bloc-titre { font-size: var(--texte-4); font-weight: 600; line-height: 1.4; color: var(--t-primary); margin: var(--espace-6) var(--espace-6) 0; }
.yt-bloc-attente { color: var(--t-faint); font-weight: 500; }
.yt-bloc-meta { font-size: var(--texte-2); color: var(--t-faint); margin: var(--espace-2) var(--espace-6) 0; }
.yt-bloc-grand {
  display: block; margin: var(--espace-4) var(--espace-6) var(--espace-6); padding: 0;
  font-size: var(--texte-2); font-weight: 600; color: var(--t-dim);
  border: none; background: none; text-align: left;
}
.yt-bloc-grand:hover { color: var(--accent); }

/* La description sous le lecteur : repliée par défaut, sinon un pavé de
   2 000 caractères repousse les commentaires hors de l'écran. */
.int-desc { margin: var(--espace-2) 0 0; border-radius: var(--radius); background: var(--bg-secondary); padding: var(--espace-5) var(--espace-7); }
.int-desc summary { font-size: var(--texte-3); font-weight: 600; color: var(--t-dim); cursor: pointer; }
.int-desc p { font-size: var(--texte-4); line-height: 1.7; color: var(--t-secondary); margin: var(--espace-5) 0 0; white-space: normal; }

.int-commentaires { margin-top: var(--espace-10); padding-top: var(--espace-8); border-top: 1px solid var(--border); }
.int-comm-vide { display: flex; align-items: center; gap: var(--espace-4); flex-wrap: wrap; font-size: var(--texte-3); line-height: 1.65; color: var(--t-faint); }
.int-comm-entete { font-size: var(--texte-4); font-weight: 700; color: var(--t-primary); margin: 0 0 var(--espace-8); }
.int-comm { display: flex; gap: var(--espace-6); margin-bottom: var(--espace-9); }
/* L'initiale de la personne quand l'avatar manque ou est refusé : un rond
   vide au même endroit ferait croire à une image en train de charger. */
.int-comm-av {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center;
  font-size: var(--texte-4); font-weight: 700; color: var(--t-faint);
}
.int-comm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.int-comm-corps { min-width: 0; flex: 1; }
.int-comm-tete { display: flex; align-items: baseline; gap: var(--espace-4); margin: 0 0 var(--espace-2); }
.int-comm-auteur { font-size: var(--texte-3); font-weight: 600; color: var(--t-primary); }
.int-comm-date { font-size: var(--texte-2); color: var(--t-faint); }
.int-comm-txt { font-size: var(--texte-4); line-height: 1.6; color: var(--t-secondary); margin: 0; overflow-wrap: anywhere; }
.int-comm-pied { display: flex; gap: var(--espace-7); margin: var(--espace-3) 0 0; font-size: var(--texte-2); color: var(--t-faint); }
.int-video-cote { min-width: 0; display: flex; flex-direction: column; gap: var(--espace-5); }
.int-cote-entete { font-size: var(--texte-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--t-faint); margin: 0 0 var(--espace-1); }
.int-cote { display: flex; gap: var(--espace-5); text-align: left; border-radius: var(--radius); padding: var(--espace-3); background: transparent; }
.int-cote:hover { background: var(--bg-secondary); }
.int-cote-vig { flex: 0 0 128px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-tertiary); }
.int-cote-vig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.int-cote-txt { min-width: 0; display: flex; flex-direction: column; gap: var(--espace-2); }
.int-cote-titre {
  font-size: var(--texte-3); font-weight: 600; line-height: 1.35; color: var(--t-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.int-cote-chaine { font-size: var(--texte-2); color: var(--t-faint); }

/* ── Visionneuse d'image ──
   Une image se regarde SUR PLACE, comme une vidéo. `contain` et non `cover` :
   une photo recadrée n'est plus la photo qu'on a cliquée. La hauteur est bornée
   pour qu'un panorama ne repousse pas le reste hors de l'écran. */
.int-photo {
  width: 100%; max-height: 66vh; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center;
}
.int-photo img { max-width: 100%; max-height: 66vh; object-fit: contain; display: block; }
.int-cote-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espace-4); }
.int-cote-img { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-tertiary); padding: 0; }
.int-cote-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.int-cote-img:hover { outline: 2px solid var(--accent); }

.int-etat { display: flex; flex-direction: column; align-items: center; gap: var(--espace-5); padding: 40px var(--espace-10); color: var(--t-faint); font-size: var(--texte-4); text-align: center; }
.int-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: dec-tourne .7s linear infinite; }

@media (max-width: 900px) {
  .int-video { grid-template-columns: 1fr; }
  .int-cote-vig { flex-basis: 108px; height: 61px; }
}
@media (max-width: 640px) {
  .int-article { padding: var(--espace-8) var(--espace-7) 60px; }
  .int-titre { font-size: var(--texte-10); }
}

/* ── Le visuel d'une carte n'est jamais vide ──
   Sans image, la carte le DIT — une icône « pas de photo » et le nom complet
   de la source, sur un fond dérivé de son domaine — plutôt qu'une initiale
   géante qui se lisait comme un chargement qui traîne. Un fil où une carte
   sur trois n'a qu'un rectangle gris ne ressemble pas à un fil d'actualité ;
   celui-ci se lit d'un coup d'œil comme un état assumé. */
.dec-visuel-vide {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    hsl(var(--dec-teinte, 210deg) 42% 42%),
    hsl(calc(var(--dec-teinte, 210deg) + 38deg) 46% 30%));
}
.dec-sans-image {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 14px; color: rgba(255,255,255,.9); max-width: 100%;
}
.dec-sans-image-nom {
  font-size: var(--texte-12); font-weight: 700; letter-spacing: .01em;
  text-align: center; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dec-carte-large .dec-sans-image-nom { font-size: var(--texte-14); }

/* Les cartes sont devenues des