/* ==========================================================
FITZUNIVERSE — SUITE FITZ AI (composants partagés)
Repose sur css/base.css + dashboard.css : sidebar/topbar et les
tokens --primary-color, --accent-color, --radius-…, --shadow-…,
--ease-premium. Chargé par ai-chat.html, ai-letter.html,
ai-email.html, ai-translate.html, ai-check.html en plus de leur propre
CSS de mise en page. Aucune nouvelle couleur : uniquement les tokens
existants, pour que ces pages semblent avoir été créées avec le reste
du site.

ATTENTION — CE COMMENTAIRE SE FERMAIT TOUT SEUL (corrigé 2026-08-22).
Il écrivait deux noms de tokens abrégés en terminant par une étoile,
immédiatement suivie de la barre oblique de fin de ligne. Or les
commentaires CSS ne s'imbriquent PAS : la toute première séquence
étoile-barre rencontrée ferme le commentaire, où qu'elle se trouve.
Le commentaire se refermait donc dès sa 4e ligne, et les six lignes
suivantes se retrouvaient analysées comme du CSS.

Conséquence mesurée dans le navigateur, en relisant la liste des
règles réellement analysées : la PREMIÈRE était
.ai-application-context — tout le bloc garde-fou [hidden] juste en
dessous avait été avalé par la récupération d'erreur de l'analyseur.
Il n'a donc jamais été appliqué, sur aucune page, depuis sa création.
Les éléments .ai-field, .ai-tool-layout, .ai-panel,
.ai-preview-content et .ai-preview-edit restaient visibles alors que
le JavaScript les avait masqués.

RÈGLE : ne jamais faire figurer la séquence de fermeture d'un
commentaire à l'intérieur d'un commentaire, pas même dans un nom de
token abrégé. Écrire --radius-… avec des points de suspension.

Cette note elle-même est tombée dans le piège à sa première
rédaction : elle citait la séquence entre guillemets, ce qui la
refermait au même endroit. D'où la formulation en toutes lettres.
========================================================== */

/* ==========================================================
GARDE-FOU POUR L'ATTRIBUT "hidden" — plusieurs composants ci-dessous
(.ai-field, .ai-tool-layout...) fixent leur propre valeur de
"display" (flex/grid). Comme l'attribut HTML "hidden" et une classe
ont la même spécificité CSS, la classe l'emporterait sinon sur la
règle native de mise en retrait et l'élément resterait visible malgré
element.hidden = true réglé en JavaScript.
========================================================== */

.ai-field[hidden],
.ai-tool-layout[hidden],
.ai-panel[hidden],
.ai-preview-content[hidden],
.ai-preview-edit[hidden]{

display:none;

}

/* ==========================================================
CONTEXTE CANDIDATURE — bandeau affiché quand un outil Fitz est ouvert
depuis une candidature précise (applications.html?...), voir Phase 3
du pivot tarifaire 2026-07-30.
========================================================== */

.ai-application-context{

display:flex;

align-items:center;

gap:10px;

padding:12px 18px;

margin-bottom:20px;

border-radius:var(--radius-md);

background:var(--background-light);

font-size:.88rem;

color:var(--text-color);

}

.ai-application-context i,
.ai-application-context svg{width:16px;height:16px;color:var(--accent-color);flex-shrink:0;}

/* ==========================================================
FITZ — POINT DE CONTACT UNIFIÉ (avatar + badge + statut)
Identité visuelle unique du "moment Fitz vous parle", partagée par
eligibility-test.html, eligibility-questions.html et les 5 pages
ai-*.html. Avant cette section, chaque page réinventait son propre
.ai-badge/.assistant-avatar avec de légères variations (tailles,
couleurs) — désormais une seule base + des modificateurs de taille,
pour que le vrai Fitz (pas encore branché) puisse s'installer
partout sans retouche visuelle.
========================================================== */

/* ==========================================================
LE HALO — Fitz n'a pas d'icône (2026-08-22)
==========================================================
Fitz était représenté par un carré arrondi de 44px en dégradé, avec
une étincelle dedans. Trois choses n'allaient pas :

  1. C'est un CONTENEUR d'icône, précisément ce que la règle
     « Icônes » de DESIGN_SYSTEM.md proscrit depuis août.
  2. L'étincelle est le cliché de l'IA depuis 2023 — le glyphe que
     tout le monde utilise, donc celui qui n'appartient à personne.
  3. Un assistant n'est pas un bouton. Lui donner la forme d'une
     tuile d'application le range visuellement du côté des outils,
     alors qu'il est censé être une présence.

Le traitement retenu existait déjà sur eligibility-questions.html —
un halo flou qui respire, sans contour, sans fond plein, sans
glyphe. Il est remonté ici pour valoir sur TOUTES les pages Fitz :
en-têtes d'outils, fil de discussion, états vides.

Ce n'est pas un logo, c'est un signal de présence : on ne le lit
pas, on le remarque. Et il ne peut ressembler à aucun autre service,
parce qu'il n'emprunte aucun symbole.
========================================================== */

.fitz-avatar{

position:relative;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

width:44px;

height:44px;

/* Ni fond, ni ombre, ni rayon : la boîte est invisible, elle ne
sert plus qu'à réserver la place du halo. */
background:none;

box-shadow:none;

border-radius:50%;

overflow:visible;

isolation:isolate;

}

/* Le glyphe éventuellement laissé dans le HTML est masqué plutôt que
retiré de chaque page : ai-chat, ai-letter, ai-check, ai-email,
ai-translate et les deux pages d'éligibilité en portent un. Une
seule règle ici évite sept modifications de balisage, et empêche
surtout qu'une future page réintroduise l'étincelle sans le voir. */
.fitz-avatar > i,
.fitz-avatar > svg{

display:none;

}

/* L'ancien anneau conique en rotation est remplacé par un halo radial
qui respire : une rotation suppose un contour, or il n'y en a plus.
La pulsation est lente et de faible amplitude — on doit la sentir,
jamais la décrire comme « une animation ». */
.fitz-avatar::after{

content:"";

position:absolute;

inset:4px;

border-radius:50%;

/* Ambre et non violet (2026-08-27) : halo copié de --gradient-fitz
(css/base.css), qui est passé du violet à l'ambre ce même jour —
voir la note à cet endroit. */
background:radial-gradient(circle, #E9A319 0%, #8A5D00 45%, transparent 72%);

filter:blur(6px);

animation:fitzPulse 2.2s ease-in-out infinite;

}

@media (prefers-reduced-motion: reduce){

.fitz-avatar::after{ animation:none; }

}

/* (les règles de taille de glyphe ont été retirées : le halo n'en
contient plus — voir .fitz-avatar > i ci-dessus) */

/* @keyframes fitzHalo retiré : il faisait tourner l'anneau conique
du carré, qui n'existe plus. Le halo respire (fitzPulse) au lieu de
tourner — une rotation suppose un contour. */

/* Compact — badge d'intro (ex. eligibility-test.html) */
.fitz-avatar--sm{

width:40px;

height:40px;

}

/* halo mis à l'échelle plutôt qu'un glyphe */
.fitz-avatar--sm::after{ inset:3px; }

/* Grand — en-tête de page outil (ai-*.html) */
.fitz-avatar--lg{

width:52px;

height:52px;

}

/* halo mis à l'échelle plutôt qu'un glyphe */
.fitz-avatar--lg::after{ inset:5px; }

/* Très grand — état vide / accueil d'un outil */
/* Le halo de l'état vide est le plus grand point de la page : c'est
lui qui dit « Fitz est là » avant qu'un mot ne soit échangé. */
.fitz-avatar--xl{

width:64px;

height:64px;

}

/* halo mis à l'échelle plutôt qu'un glyphe */
.fitz-avatar--xl::after{ inset:6px; }

/* .fitz-badge a déménagé dans css/base.css le 2026-08-22 (section
"BADGE FITZ — signature unique"), avec .ai-badge en alias.
Raison du déménagement : results.html, offers.html et payment.html
affichent le même badge mais ne chargent PAS cette feuille — la
définition ne pouvait donc pas les atteindre d'ici, et chacune
avait fini par réécrire la sienne. base.css est chargée par les
cinq pages concernées, et se donne déjà pour rôle d'héberger les
composants partagés.
Ne pas redéfinir .fitz-badge ici : cette feuille est chargée APRÈS
base.css, toute règle réintroduite ici écraserait silencieusement
la signature commune sur les seules pages d'éligibilité. */

.fitz-status{

display:flex;

align-items:center;

gap:7px;

margin-top:6px;

min-height:20px;

color:var(--text-light);

font-size:.85rem;

font-style:italic;

transition:opacity .3s ease;

}

/* Point pulsant — même signal visuel qu'un statut "en train
d'écrire", cohérent avec la nature conversationnelle de Fitz sans
recourir à un gros indicateur "typing..." générique. */
.fitz-status::before{

content:"";

flex-shrink:0;

width:6px;

height:6px;

border-radius:50%;

background:var(--fitz-color);

animation:fitzPulse 1.6s ease-in-out infinite;

}

@media (prefers-reduced-motion: reduce){

.fitz-status::before{ animation:none; }

}

@keyframes fitzPulse{

0%,100%{ opacity:.4; transform:scale(.85); }

50%{ opacity:1; transform:scale(1); }

}

/* ==========================================================
EN-TÊTE DE PAGE OUTIL
========================================================== */

.ai-page-header{

display:flex;

align-items:flex-start;

justify-content:space-between;

gap:20px;

margin-bottom:28px;

}

.ai-page-header-main{

display:flex;

align-items:center;

gap:16px;

}

/* account.html référence cette classe pour son icône d'en-tête
(page de réglages, pas un outil Fitz) sans qu'aucune règle n'existe
jamais eu — l'icône s'affichait nue, sans chip, à côté du titre. */
/* Pastille supprimée le 2026-08-22 — règle « Icônes » de
DESIGN_SYSTEM.md : aucun conteneur derrière une icône. L'icône
porte elle-même la couleur, et cette couleur signifie quelque
chose. Le fond, la taille fixe et le rayon ont été retirés ;
la mise en page (flex, marges) reste. */
.ai-page-header-icon i,
.ai-page-header-icon svg{ width:24px; height:24px; }

.ai-page-header h1{

font-family:var(--font-display);

font-size:var(--fs-page-title);

font-weight:var(--fw-extrabold);

color:var(--text-color);

margin-bottom:4px;

}

.ai-page-header p{

color:var(--text-light);

font-size:var(--fs-subtitle);

max-width:520px;

line-height:1.55;

}

.ai-page-header-badge{

flex-shrink:0;

display:inline-flex;

align-items:center;

gap:7px;

padding:8px 14px;

border-radius:var(--radius-full);

background:var(--background-light);

color:var(--accent-color);

font-weight:700;

font-size:.78rem;

white-space:nowrap;

}

.ai-page-header-badge i,
.ai-page-header-badge svg{

width:14px;

height:14px;

}

/* ==========================================================
ÉTAT VERROUILLÉ (accès direct à l'URL sans la formule requise)
========================================================== */

.ai-locked-hero{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:16px;

max-width:520px;

margin:60px auto;

padding:48px 40px;

border-radius:var(--radius-lg);

background:var(--background);

border:1px solid var(--border-color);

box-shadow:var(--shadow-md);

}

/* Pastille supprimée le 2026-08-22 — règle « Icônes » de
DESIGN_SYSTEM.md : aucun conteneur derrière une icône. L'icône
porte elle-même la couleur, et cette couleur signifie quelque
chose. Le fond, la taille fixe et le rayon ont été retirés ;
la mise en page (flex, marges) reste. */
.ai-locked-icon i,
.ai-locked-icon svg{ width:34px; height:34px; }

.ai-locked-hero h2{

font-family:var(--font-display);

font-size:1.3rem;

font-weight:800;

color:var(--text-color);

}

.ai-locked-hero p{

color:var(--text-light);

font-size:.92rem;

line-height:1.6;

}

/* ==========================================================
MISE EN PAGE FORMULAIRE + APERÇU (Lettre / E-mail)
========================================================== */

.ai-tool-layout{

display:grid;

grid-template-columns:minmax(0,1fr) minmax(0,1fr);

gap:24px;

align-items:start;

}

.ai-panel{

border-radius:var(--radius-lg);

background:var(--background);

border:1px solid var(--border-color);

box-shadow:var(--shadow-xs);

overflow:hidden;

}

.ai-panel-header{

display:flex;

align-items:center;

justify-content:space-between;

gap:12px;

padding:18px 22px;

border-bottom:1px solid var(--border-color);

}

.ai-panel-header h2{

font-family:var(--font-display);

font-size:1rem;

font-weight:800;

color:var(--text-color);

display:flex;

align-items:center;

gap:8px;

}

.ai-panel-header h2 i,
.ai-panel-header h2 svg{

width:18px;

height:18px;

color:var(--text-decorative);

}

.ai-panel-body{

padding:22px;

}

/* ==========================================================
CHAMPS DE FORMULAIRE
========================================================== */

.ai-field{

display:flex;

flex-direction:column;

gap:6px;

margin-bottom:16px;

}

.ai-field label{

font-size:.82rem;

font-weight:700;

color:var(--text-light);

}

.ai-field-hint{

font-size:.74rem;

color:var(--text-muted);

}

.ai-field input,
.ai-field select,
.ai-field textarea{

width:100%;

padding:12px 14px;

border-radius:var(--radius-sm);

border:1px solid var(--border-color);

background:var(--background-soft);

color:var(--text-color);

font-family:inherit;   /* était "Inter" en dur (corrigé le 2026-08-23) */

font-size:.9rem;

transition:var(--transition);

}

.ai-field textarea{

resize:vertical;

min-height:90px;

line-height:1.55;

}

.ai-field input:focus,
.ai-field select:focus,
.ai-field textarea:focus{

outline:none;

border-color:var(--accent-color);

box-shadow:0 0 0 3px rgba(233,163,25,.18);

}

.ai-field-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

}

/* ==========================================================
GRILLE DE CARTES DE SÉLECTION (styles de lettre, types d'e-mail)
========================================================== */

.ai-style-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(150px,1fr));

gap:10px;

margin-bottom:18px;

}

.ai-style-card{

display:flex;

flex-direction:column;

align-items:flex-start;

gap:8px;

padding:14px;

border-radius:var(--radius-md);

border:1px solid var(--border-color);

background:var(--background-soft);

cursor:pointer;

text-align:left;

transition:var(--transition);

}

.ai-style-card:hover{

border-color:rgba(233,163,25,.45);

transform:translateY(-2px);

}

.ai-style-card.is-selected{

border-color:var(--accent-color);

background:var(--background-light);

box-shadow:0 0 0 1px var(--accent-color) inset;

}

/* Icône neutre par défaut — seule la carte sélectionnée (voir
.is-selected ci-dessous) porte la signature bleu/violet de l'accent ;
une icône de catégorie non sélectionnée est purement décorative, pas
un point de présence Fitz. */
/* Pastille supprimée le 2026-08-22 — règle « Icônes » de
DESIGN_SYSTEM.md : aucun conteneur derrière une icône. L'icône
porte elle-même la couleur, et cette couleur signifie quelque
chose. Le fond, la taille fixe et le rayon ont été retirés ;
la mise en page (flex, marges) reste. */
.ai-style-card.is-selected .ai-style-card-icon{

background:var(--gradient-primary);

color:#fff;

}

.ai-style-card-icon i,
.ai-style-card-icon svg{ width:18px; height:18px; }

.ai-style-card strong{

font-size:.86rem;

color:var(--text-color);

}

.ai-style-card span{

font-size:.74rem;

color:var(--text-muted);

line-height:1.4;

}

/* ==========================================================
APERÇU / RÉSULTAT
========================================================== */

.ai-preview-toolbar{

display:flex;

align-items:center;

justify-content:flex-end;

gap:8px;

flex-wrap:wrap;

}

.ai-icon-btn{

display:inline-flex;

align-items:center;

gap:6px;

padding:8px 12px;

border-radius:var(--radius-sm);

border:1px solid var(--border-color);

background:var(--background-soft);

color:var(--text-light);

font-size:.78rem;

font-weight:700;

cursor:pointer;

transition:var(--transition);

}

.ai-icon-btn:hover:not(:disabled){

border-color:var(--accent-color);

color:var(--accent-color);

}

.ai-icon-btn:disabled{

opacity:.45;

cursor:not-allowed;

}

.ai-icon-btn i,
.ai-icon-btn svg{

width:14px;

height:14px;

}

.ai-preview-content{

margin-top:16px;

padding:20px;

border-radius:var(--radius-md);

background:var(--background-soft);

border:1px solid var(--border-color);

color:var(--text-color);

font-size:.92rem;

line-height:1.7;

white-space:pre-wrap;

min-height:220px;

}

.ai-preview-content:empty::before,
.ai-preview-empty{

content:"";

}

.ai-preview-empty{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:10px;

height:220px;

color:var(--text-muted);

text-align:center;

font-size:.86rem;

}

.ai-preview-empty i,
.ai-preview-empty svg{

width:26px;

height:26px;

color:var(--text-decorative);

}

.ai-preview-edit{

width:100%;

margin-top:16px;

padding:20px;

border-radius:var(--radius-md);

background:var(--background-soft);

border:1px solid var(--accent-color);

color:var(--text-color);

font-family:inherit;   /* était "Inter" en dur (corrigé le 2026-08-23) */

font-size:.92rem;

line-height:1.7;

min-height:220px;

resize:vertical;

}

.ai-preview-edit:focus{

outline:none;

box-shadow:0 0 0 3px rgba(233,163,25,.18);

}

.ai-preview-meta{

display:flex;

align-items:center;

gap:14px;

margin-top:12px;

color:var(--text-muted);

font-size:.78rem;

}

/* ==========================================================
INDICATEUR DE GÉNÉRATION ("Fitz réfléchit…")
========================================================== */

.ai-thinking{

display:inline-flex;

align-items:center;

gap:10px;

color:var(--text-light);

font-size:.86rem;

font-weight:600;

}

.ai-thinking-dots{

display:inline-flex;

gap:4px;

}

.ai-thinking-dots span{

width:6px;

height:6px;

border-radius:var(--radius-full);

background:var(--accent-color);

animation:aiDotBounce 1.1s ease-in-out infinite;

}

.ai-thinking-dots span:nth-child(2){ animation-delay:.15s; }
.ai-thinking-dots span:nth-child(3){ animation-delay:.3s; }

@keyframes aiDotBounce{

0%, 60%, 100%{ transform:translateY(0); opacity:.5; }

30%{ transform:translateY(-4px); opacity:1; }

}

/* ==========================================================
CHAT — le panneau remplit la hauteur de viewport réellement
disponible (pas une carte à hauteur fixe qui laisse un vide sombre
en dessous). main.content devient flex-column uniquement sur cette
page (:has(#chatApp) la scope à ai-chat.html sans affecter les
autres pages qui partagent .content), #chatApp/.ai-chat-shell se
répartissent l'espace restant — robuste à toute variation de la
hauteur de .ai-page-header au-dessus, contrairement à un calc() en
dur qui devait deviner cette hauteur.
========================================================== */

/* ==========================================================
TROIS ZONES DE DÉFILEMENT DISTINCTES (refonte 2026-08-22)
==========================================================
Modèle ChatGPT / Claude : la PAGE ne défile jamais. Trois zones
défilent indépendamment à l'intérieur d'un cadre figé à la hauteur
de la fenêtre :

  1. la liste des conversations, à gauche ;
  2. le fil de messages, au centre ;
  3. rien d'autre — l'en-tête et le champ de saisie restent fixes,
     toujours au même endroit, quel que soit le nombre de messages.

CE QUI NE MARCHAIT PAS
----------------------
Deux causes, qui se cumulaient :

a) `min-height` au lieu de `height` sur le conteneur. min-height
   fixe un plancher, pas un plafond : à partir du 15e message la
   page entière s'allongeait au lieu de garder son cadre. Mesuré
   avec 30 messages : .content passait à 3562px de haut et c'est la
   FENÊTRE qui défilait, emportant l'en-tête et le champ de saisie
   hors de l'écran. L'inverse exact d'une application de chat.

b) `.ai-chat-scroll` avait bien `overflow-y:auto`, mais pas
   `min-height:0`. Un élément flex a `min-height:auto` par défaut :
   il refuse de descendre sous la taille de son contenu, donc il
   pousse au lieu de défiler et l'overflow ne se déclenche jamais.
   C'est LE piège classique du flex imbriqué, et il fallait le
   corriger à CHAQUE étage de la chaîne — un seul maillon oublié et
   toute la colonne repart en hauteur.

Le cadre perd aussi ses arrondis, sa bordure et son ombre : une
application de chat occupe toute la surface qu'on lui donne, elle
ne flotte pas au milieu d'une page comme une carte de contenu.
========================================================== */

main.content:has(#chatApp){

display:flex;

flex-direction:column;

/* height, PAS min-height : c'est ce qui plafonne le cadre. */
height:calc(100vh - var(--topbar-height));

min-height:0;

/* Le cadre ne déborde jamais : tout défilement se passe à
l'intérieur, dans les zones prévues pour ça. */
overflow:hidden;

/* Plein cadre : le rembourrage de .content laissait une gouttière
autour du chat, qui le faisait ressembler à une carte posée sur
une page plutôt qu'à une application. */
padding:0;

}

#chatApp{

flex:1;

display:flex;

flex-direction:column;

min-height:0;

}

.ai-chat-shell{

flex:1;

display:flex;

flex-direction:row;

min-height:0;

background:var(--background);

/* Ni arrondi, ni ombre, ni bordure extérieure : le cadre touche
les bords de la zone de contenu. Seule reste la séparation
verticale entre l'historique et le fil (voir .ai-chat-history). */
overflow:hidden;

position:relative;

}

/* ==========================================================
HISTORIQUE DES CONVERSATIONS — colonne façon ChatGPT/Claude, à
gauche du volet de chat. Persistance multi-conversations en
localStorage (js/ai/chat-store.js), pas de backend.
========================================================== */

.ai-chat-history{

flex:0 0 260px;

display:flex;

flex-direction:column;

border-right:1px solid var(--border-color);

background:var(--background-soft);

min-height:0;

}

.ai-chat-history-header{

display:flex;

align-items:center;

gap:8px;

padding:14px;

border-bottom:1px solid var(--border-color);

}

.ai-chat-new-btn{

flex:1;

display:flex;

align-items:center;

justify-content:center;

gap:8px;

padding:10px 14px;

border-radius:var(--radius-sm);

border:1px solid var(--border-color);

background:var(--background);

color:var(--text-color);

font-size:.86rem;

font-weight:600;

cursor:pointer;

transition:var(--transition);

}

.ai-chat-new-btn:hover{

border-color:var(--fitz-color);

color:var(--fitz-color);

}

.ai-chat-new-btn i,
.ai-chat-new-btn svg{ width:16px; height:16px; }

.ai-chat-history-close{

display:none;

width:34px;

height:34px;

align-items:center;

justify-content:center;

border-radius:var(--radius-sm);

border:none;

background:transparent;

color:var(--text-muted);

cursor:pointer;

}

.ai-chat-history-close i,
.ai-chat-history-close svg{ width:18px; height:18px; }

/* La géométrie de ce champ vit maintenant dans `.fitz-recherche`
   (css/base.css) : il ne garde ici que sa place dans la colonne. */
.ai-chat-history-search{

margin:0 0 10px;

}







.ai-chat-history-empty{

padding:20px 14px;

font-size:.82rem;

line-height:1.5;

color:var(--text-muted);

text-align:center;

}

.ai-chat-history-list{

flex:1;

overflow-y:auto;

padding:8px;

display:flex;

flex-direction:column;

gap:2px;

}

.ai-chat-history-item{

display:flex;

align-items:center;

gap:2px;

border-radius:var(--radius-sm);

}

.ai-chat-history-item:hover,
.ai-chat-history-item.is-active{

background:var(--background-alt);

}

.ai-chat-history-item-select{

flex:1;

display:flex;

align-items:center;

gap:10px;

min-width:0;

padding:10px 10px;

border:none;

background:transparent;

color:var(--text-light);

font-size:.85rem;

text-align:left;

cursor:pointer;

}

.ai-chat-history-item.is-active .ai-chat-history-item-select{

color:var(--text-color);

font-weight:600;

}

.ai-chat-history-item-select i,
.ai-chat-history-item-select svg{

width:15px;

height:15px;

flex-shrink:0;

}

.ai-chat-history-item-select span{

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

.ai-chat-history-item-actions{

display:none;

align-items:center;

gap:2px;

padding-right:6px;

flex-shrink:0;

}

.ai-chat-history-item:hover .ai-chat-history-item-actions{ display:flex; }

/* Lot ICONE-BTN (2026-09-11) : ces boutons héritent de .ai-icon-btn un
rembourrage de 8px 12px et une bordure — dans une boîte de 26px, il ne
restait 0px à l'icône : « Renommer » et « Supprimer » étaient VIDES sur
ordinateur (photo de Charles). Sur téléphone, le renfort tactile de
css/mobile-nav.css (min 40×40) leur rendait la place, d'où le défaut
invisible là-bas. Le rembourrage tombe, l'icône (14px) est centrée.
Vu dans l'inspecteur : le <svg> existait, à 0×0. */
.ai-chat-history-item-actions .ai-icon-btn{

width:26px;

height:26px;

padding:0;

justify-content:center;

}

.ai-chat-history-item-actions i,
.ai-chat-history-item-actions svg{ width:14px; height:14px; }

.ai-chat-history-backdrop{

display:none;

}

/* ==========================================================
VOLET DE CHAT — reprend l'ancien rôle vertical de .ai-chat-shell,
désormais la seconde colonne à côté de l'historique.
========================================================== */

.ai-chat-main{

flex:1;

display:flex;

flex-direction:column;

min-height:0;

min-width:0;

}

.ai-chat-main-topbar{

display:none;

align-items:center;

gap:10px;

padding:12px 16px;

border-bottom:1px solid var(--border-color);

}

.ai-chat-history-toggle{

width:32px;

height:32px;

display:flex;

align-items:center;

justify-content:center;

border-radius:var(--radius-sm);

border:1px solid var(--border-color);

background:var(--background);

color:var(--text-light);

cursor:pointer;

flex-shrink:0;

}

.ai-chat-history-toggle i,
.ai-chat-history-toggle svg{ width:16px; height:16px; }

.ai-chat-current-title{

font-size:.86rem;

font-weight:700;

color:var(--text-color);

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

.ai-chat-scroll{

flex:1;

/* min-height:0 — SANS LUI, RIEN NE DÉFILE. Un élément flex a
min-height:auto par défaut et refuse de descendre sous la hauteur
de son contenu : il pousse la colonne au lieu de défiler, et
`overflow-y:auto` ne se déclenche jamais. */
min-height:0;

overflow-y:auto;

/* Le défilement s'arrête aux extrémités du fil au lieu de se
propager à la page derrière — le « scroll chaining » qui fait
sauter l'arrière-plan quand on arrive en haut de la conversation. */
overscroll-behavior:contain;

/* Le fil garde sa propre gouttière maintenant que le cadre n'en a
plus. Colonne de lecture centrée et bornée : au-delà d'environ
760px une ligne de texte devient pénible à suivre — même largeur
utile que ChatGPT ou Claude. */
padding:26px 24px 8px;

display:flex;

flex-direction:column;

gap:18px;

position:relative;

/* scroll-padding : quand le JS fait défiler vers un message, il ne
se colle pas au bord haut de la zone. */
scroll-padding-block:20px;

}

.ai-chat-scroll > *{

width:100%;

max-width:760px;

margin-inline:auto;

}

/* Respiration (2026-08-22, demande utilisateur « je veux que ça
respire »). L'écran d'accueil de Fitz est le premier contact : il
doit paraître calme, pas rempli. Écarts et largeur augmentés,
colonne de lecture élargie à 560px, et un vrai blanc au-dessus du
halo plutôt qu'un centrage mathématique qui collait le bloc au
milieu exact. */
.ai-empty-state{

margin:auto;

max-width:560px;

text-align:center;

display:flex;

flex-direction:column;

align-items:center;

gap:22px;

padding:40px 24px;

}

.ai-empty-state h2{

font-family:var(--font-display);

font-size:1.5rem;

font-weight:var(--fw-extrabold);

letter-spacing:-.02em;

line-height:1.25;

color:var(--text-color);

/* Le titre suivait immédiatement le halo, à 14px. Il lui faut de
l'air : c'est la phrase qu'on lit en premier. */
margin-top:2px;

}

.ai-empty-state p{

color:var(--text-light);

font-size:.88rem;

line-height:1.6;

}

.ai-help-cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(232px,1fr));

gap:12px;

width:100%;

margin-top:10px;

}

.ai-help-card{

display:flex;

flex-direction:column;

gap:6px;

padding:16px 18px;

border-radius:var(--radius-md);

background:var(--background);

border:1px solid var(--border-color);

text-align:left;

cursor:pointer;

transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);

}

/* Bordure ambrée au survol, comme les cartes des catalogues : c'est
la couleur d'interaction du site, le violet reste celle de Fitz. */
.ai-help-card:hover{

border-color:var(--amber-500);

transform:translateY(-2px);

box-shadow:var(--shadow-sm);

}

/* Icônes retirées des cartes de suggestion (2026-08-22). Chaque carte
portait un petit glyphe violet au-dessus de sa question — une
décoration qui n'ajoutait rien : la question se lit, elle ne
s'identifie pas par un pictogramme. Règle « Icônes ».
Masquées en CSS plutôt que supprimées du JS : renderHelpCards()
peut continuer à les poser sans qu'on ait à y toucher, et le repli
HTML statique en contient aussi. */
.ai-help-card > i,
.ai-help-card > svg{

display:none;

}

.ai-help-card span{

font-size:.88rem;

color:var(--text-color);

line-height:1.5;

}

.ai-msg{

display:flex;

gap:12px;

/* La réponse de Fitz occupe TOUTE la colonne de lecture — c'est un
texte long, il n'a aucune raison d'être bridé à 80%. Seule la
question de l'étudiant reste courte (voir .ai-msg-user). */
width:100%;

animation:aiMsgIn .4s var(--ease-premium) both;

}

@keyframes aiMsgIn{

from{ opacity:0; transform:translateY(8px); }

to{ opacity:1; transform:translateY(0); }

}

@media (prefers-reduced-motion: reduce){

.ai-msg{ animation:none; }

}

.ai-msg-user{

align-self:flex-end;

flex-direction:row-reverse;

/* La bulle de l'étudiant s'arrête à 78% : une question tient en une
ou deux lignes, l'étirer sur toute la largeur en ferait un bloc
aussi lourd que la réponse. */
width:auto;

max-width:78%;

}

/* ==========================================================
PLUS D'AVATAR DANS LE FIL (2026-08-22)
==========================================================
Claude n'en met pas, et la raison tient en une phrase : répéter le
même symbole à côté de chaque message n'apprend rien après le
premier, et vole de la largeur de lecture à chaque ligne.

L'alternance suffit à dire qui parle — la question de l'étudiant est
une bulle alignée à droite, la réponse de Fitz est du texte à plat
sur toute la colonne. On ne confond pas.

Les avatars sont masqués plutôt que retirés du JS : messageAvatar()
(ai-chat.js) continue de les produire, et les conversations déjà
enregistrées en localStorage contiennent l'ancien balisage. Une
règle ici couvre les deux cas. */
.ai-msg-avatar{

display:none;

}

.ai-msg-user .ai-msg-avatar{

background:var(--background-alt);

color:var(--text-color);

}

.ai-msg-avatar i,
.ai-msg-avatar svg{

width:16px;

height:16px;

}

.ai-msg-col{

display:flex;

flex-direction:column;

gap:6px;

min-width:0;

}

/* ==========================================================
LE FIL — MODÈLE CLAUDE (refonte 2026-08-22)
==========================================================
Ce qui définit le fil de Claude, et qui manquait ici : **la réponse
de l'assistant n'est PAS dans une bulle**. Elle coule comme un
document, sur le fond de la page, en pleine largeur de lecture.
Seul le message de l'étudiant est une bulle, discrète, alignée à
droite.

Pourquoi ça compte, au-delà du style : une réponse de Fitz fait
souvent quinze lignes avec des titres, des listes et du gras.
Enfermée dans une boîte grise à bord arrondi, elle se lit comme une
notification. Posée à plat, elle se lit comme un conseil — et c'est
exactement ce qu'elle est.

Corollaire : plus d'avatar dans le fil. Claude n'en met pas, et pour
une bonne raison — répéter le même halo à côté de chaque réponse
n'apprend rien après le premier message, et vole 42px de largeur de
lecture à chaque ligne.

TAILLE DE TEXTE : 0,9rem (14,4px) mesurés avant correction. C'est
une taille d'interface, pas une taille de lecture. Un étudiant lit
ici des paragraphes entiers de conseils : 1rem avec une interligne
de 1,7, comme un article. */

.ai-msg-bubble{

padding:0;

border:none;

background:none;

border-radius:0;

color:var(--text-color);

font-size:1rem;

line-height:1.72;

}

.ai-msg-bubble p{ margin-bottom:8px; }
.ai-msg-bubble p:last-child{ margin-bottom:0; }

.ai-msg-bubble strong{ color:var(--text-color); }

.ai-msg-bubble code{

padding:2px 6px;

border-radius:var(--radius-xs);

background:rgba(255,255,255,.08);

font-size:.84em;

}

.ai-md-code{

margin:8px 0;

padding:14px;

border-radius:var(--radius-sm);

background:var(--background-soft-code, rgba(0,0,0,.28));

border:1px solid var(--border-color);

overflow-x:auto;

font-size:.82rem;

}

.ai-md-list{

margin:4px 0 10px 18px;

display:flex;

flex-direction:column;

gap:4px;

}

.ai-md-table{

width:100%;

border-collapse:collapse;

margin:8px 0;

font-size:.84rem;

}

.ai-md-table th,
.ai-md-table td{

padding:8px 10px;

border:1px solid var(--border-color);

text-align:left;

}

.ai-md-table th{

background:var(--background-light);

color:var(--accent-color);

}

/* Message de l'étudiant — la SEULE bulle du fil.
Elle était en --gradient-primary avec du texte blanc : un rectangle
bleu saturé, la chose la plus lourde de l'écran alors que c'est la
plus courte à lire. Sur la capture d'un écran réel, le texte y
devenait difficile à distinguer.
Fond neutre très clair et texte sombre : 15,4:1, et surtout la
question de l'étudiant cesse de crier plus fort que la réponse
qu'il attend. */
.ai-msg-user .ai-msg-bubble{

padding:11px 16px;

border-radius:18px;

background:var(--background-alt);

color:var(--text-color);

font-size:.97rem;

}

.ai-msg-user .ai-msg-bubble strong{ color:var(--text-color); }

/* Bulle de Fitz — dégradé Fitz (violet→indigo), pas un aplat gris
générique comme le reste du site, pour qu'un "moment Fitz parle" se
reconnaisse même sans l'avatar dans le cadre (liste longue, mobile...). */
/* La réponse de Fitz n'a plus de cadre du tout : ni fond, ni bordure,
ni liséré violet à gauche. C'est du texte posé sur la page.
Le liséré disait « ceci vient de Fitz » — mais dans un fil, un
message sur deux vient de Fitz : l'alternance suffit à le dire, et
c'est comme ça que le lisent ChatGPT et Claude. */
.ai-msg-bot .ai-msg-bubble{

background:none;

border:none;

}

.ai-msg-actions{

display:flex;

gap:6px;

opacity:0;

transition:opacity .2s ease;

}

.ai-msg:hover .ai-msg-actions,
.ai-msg-actions.is-visible{

opacity:1;

}

.ai-msg-actions button{

display:inline-flex;

align-items:center;

gap:5px;

padding:5px 9px;

border-radius:var(--radius-sm);

border:1px solid var(--border-color);

background:var(--background-soft);

color:var(--text-muted);

font-size:.72rem;

cursor:pointer;

transition:var(--transition);

}

.ai-msg-actions button:hover{

color:var(--accent-color);

border-color:var(--accent-color);

}

.ai-msg-actions button i,
.ai-msg-actions button svg{

width:12px;

height:12px;

}

.ai-scroll-to-bottom{

position:absolute;

bottom:16px;

right:24px;

display:none;

align-items:center;

justify-content:center;

width:38px;

height:38px;

border-radius:var(--radius-full);

background:var(--gradient-primary);

color:#fff;

border:none;

box-shadow:var(--shadow-sm);

cursor:pointer;

}

.ai-scroll-to-bottom.is-visible{ display:flex; }

.ai-scroll-to-bottom i,
.ai-scroll-to-bottom svg{ width:16px; height:16px; }

/* .ai-suggestions / .ai-suggestion-chip retirées le 2026-08-22.
La rangée de pastilles qu'elles habillaient a disparu du HTML : elle
répétait les questions des cartes de l'état vide et restait collée
au-dessus du champ de saisie pendant toute la conversation. Plus
aucune page ne porte ces classes (vérifié) — règles supprimées
plutôt que laissées en place, pour qu'on ne croie pas le composant
encore vivant. Les suggestions vivent désormais dans
.ai-help-cards, à l'intérieur de l'état vide. */

/* ==========================================================
PIÈCES JOINTES — aperçu local uniquement (js/ai/attachments.js),
avant envoi (dans le composer) et une fois envoyées (dans la bulle).
========================================================== */

.ai-chat-attachments{

display:flex;

flex-wrap:wrap;

gap:8px;

padding:0 20px 12px;

}

.ai-attachment-chip{

display:flex;

align-items:center;

gap:8px;

padding:6px 10px 6px 6px;

border-radius:var(--radius-full);

background:var(--background-alt);

border:1px solid var(--border-color);

max-width:200px;

}

.ai-attachment-chip img{

width:26px;

height:26px;

border-radius:var(--radius-xs);

object-fit:cover;

flex-shrink:0;

}

/* Pastille supprimée le 2026-08-22 — règle « Icônes » de
DESIGN_SYSTEM.md : aucun conteneur derrière une icône. L'icône
porte elle-même la couleur, et cette couleur signifie quelque
chose. Le fond, la taille fixe et le rayon ont été retirés ;
la mise en page (flex, marges) reste. */
.ai-attachment-chip-icon i,
.ai-attachment-chip-icon svg{ width:16px; height:16px; }

.ai-attachment-chip-name{

font-size:.78rem;

color:var(--text-light);

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

.ai-attachment-chip-remove{

width:18px;

height:18px;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

border:none;

background:var(--background-soft);

color:var(--text-muted);

cursor:pointer;

}

.ai-attachment-chip-remove i,
.ai-attachment-chip-remove svg{ width:11px; height:11px; }

.ai-msg-attachments{

display:flex;

flex-wrap:wrap;

gap:8px;

margin-bottom:8px;

}

.ai-msg-attachment-thumb{

width:120px;

height:90px;

border-radius:var(--radius-sm);

object-fit:cover;

border:1px solid var(--border-color);

}

.ai-msg-attachment-file{

display:inline-flex;

align-items:center;

gap:6px;

padding:8px 12px;

border-radius:var(--radius-sm);

background:var(--background-soft);

border:1px solid var(--border-color);

font-size:.8rem;

color:var(--text-light);

}

.ai-msg-attachment-file i,
.ai-msg-attachment-file svg{ width:14px; height:14px; }

/* Le champ de saisie ne défile jamais : il est le seul point fixe de
la colonne, comme sur ChatGPT ou Claude. flex-shrink:0 l'empêche
d'être comprimé par un fil de messages qui grandit. */
.ai-chat-composer{

flex-shrink:0;

display:flex;

align-items:flex-end;

gap:10px;

/* Aligné sur la colonne de lecture du fil (max-width:760px) : sans
ça, le champ s'étalait sur toute la largeur pendant que les
messages restaient centrés au milieu — deux axes différents dans
la même colonne. */
width:100%;

max-width:808px;

margin-inline:auto;

padding:14px 24px 18px;

background:var(--background);

transition:background-color .15s var(--ease-standard);

}

/* La bordure haute est portée par un conteneur pleine largeur, pas par
le composer lui-même : le filet doit traverser toute la colonne,
alors que le champ, lui, s'arrête à la largeur de lecture. */
.ai-chat-composer-wrap{

flex-shrink:0;

border-top:1px solid var(--border-color);

background:var(--background);

}

.ai-chat-composer.is-dragover{

background:rgba(233,163,25,.08);

}

.ai-chat-attach-btn{

width:40px;

height:40px;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

border-radius:var(--radius-md);

border:1px solid var(--border-color);

background:var(--background-soft);

color:var(--text-light);

cursor:pointer;

transition:var(--transition);

}

.ai-chat-attach-btn:hover{

color:var(--fitz-color);

border-color:var(--fitz-color);

}

.ai-chat-attach-btn i,
.ai-chat-attach-btn svg{ width:18px; height:18px; }

.ai-chat-textarea{

flex:1;

resize:none;

max-height:140px;

padding:12px 16px;

border-radius:var(--radius-md);

border:1px solid var(--border-color);

background:var(--background-soft);

color:var(--text-color);

font-family:inherit;   /* était "Inter" en dur (corrigé le 2026-08-23) */

font-size:.92rem;

line-height:1.5;

}

.ai-chat-textarea:focus{

outline:none;

border-color:var(--accent-color);

box-shadow:0 0 0 3px rgba(233,163,25,.18);

}

.ai-chat-send-btn,
.ai-chat-stop-btn{

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

width:46px;

height:46px;

border-radius:var(--radius-full);

border:none;

background:var(--gradient-primary);

color:#fff;

cursor:pointer;

transition:var(--transition);

}

.ai-chat-stop-btn{

background:var(--danger);

}

.ai-chat-send-btn:disabled{

opacity:.4;

cursor:not-allowed;

}

.ai-chat-send-btn:hover:not(:disabled),
.ai-chat-stop-btn:hover{

transform:translateY(-2px);

box-shadow:var(--shadow-sm);

}

.ai-chat-send-btn i,
.ai-chat-stop-btn i,
.ai-chat-send-btn svg,
.ai-chat-stop-btn svg{

width:19px;

height:19px;

}

/* ==========================================================
ANNEAU DE SCORE + BARRES DE CATÉGORIE
========================================================== */

.ai-score-ring{

--ai-score:0;

position:relative;

width:132px;

height:132px;

border-radius:var(--radius-full);

flex-shrink:0;

background:

radial-gradient(closest-side, var(--background) 72%, transparent 73% 100%),

conic-gradient(var(--accent-color) calc(var(--ai-score) * 1%), rgba(255,255,255,.08) 0);

display:flex;

align-items:center;

justify-content:center;

transition:background 1s var(--ease-premium);

}

.ai-score-ring-value{

font-family:var(--font-display);

font-size:1.7rem;

font-weight:800;

color:var(--text-color);

}

.ai-score-ring-value small{

display:block;

font-size:.7rem;

font-weight:700;

color:var(--text-muted);

}

.ai-category-list{

display:flex;

flex-direction:column;

gap:12px;

flex:1;

min-width:220px;

}

.ai-category-row{

display:flex;

flex-direction:column;

gap:5px;

}

.ai-category-row-top{

display:flex;

align-items:center;

justify-content:space-between;

font-size:.82rem;

color:var(--text-light);

}

.ai-category-row-top strong{

color:var(--text-color);

}

.ai-category-bar-track{

height:8px;

border-radius:var(--radius-full);

background:var(--background-alt);

overflow:hidden;

}

.ai-category-bar-fill{

height:100%;

border-radius:var(--radius-full);

background:var(--gradient-primary);

transition:width 1s var(--ease-premium);

}

.ai-score-summary{

display:flex;

gap:28px;

align-items:center;

flex-wrap:wrap;

margin-bottom:24px;

}

.ai-insight-columns{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

margin-top:24px;

}

.ai-insight-card{

padding:18px;

border-radius:var(--radius-md);

background:var(--background-soft);

border:1px solid var(--border-color);

}

.ai-insight-card h3{

display:flex;

align-items:center;

gap:8px;

font-size:.9rem;

font-weight:700;

color:var(--text-color);

margin-bottom:10px;

}

.ai-insight-card h3 i,
.ai-insight-card h3 svg{ width:16px; height:16px; }

.ai-insight-card.is-strengths h3 i,
.ai-insight-card.is-strengths h3 svg{ color:var(--success); }
.ai-insight-card.is-weaknesses h3 i,
.ai-insight-card.is-weaknesses h3 svg{ color:var(--warning); }

/* Carte "Suggestions/Conseils de Fitz" — un conseil qui vient de Fitz
lui-même (pas un simple constat force/faiblesse), donc il porte la
même signature chaude que le reste de l'identité Fitz plutôt que le
fond neutre générique de .ai-insight-card. */
.ai-insight-card.is-fitz{

/* Passée du lavis violet au lavis ambre (2026-08-23). Le commentaire
au-dessus disait déjà « la même signature chaude que le reste de
l'identité Fitz » — mais la recette, elle, était violette. Elle l'est
désormais vraiment. */
background:linear-gradient(100deg, rgba(233,163,25,.14) 0%, rgba(233,163,25,.05) 100%);

border-color:rgba(233,163,25,.34);

}

.ai-insight-card.is-fitz h3 i,
.ai-insight-card.is-fitz h3 svg{ color:var(--accent-color); }

.ai-insight-card ul{

display:flex;

flex-direction:column;

gap:8px;

font-size:.84rem;

color:var(--text-light);

line-height:1.5;

}

.ai-checklist{

display:flex;

flex-direction:column;

gap:8px;

margin-top:14px;

}

.ai-checklist-item{

display:flex;

align-items:center;

gap:10px;

padding:10px 14px;

border-radius:var(--radius-sm);

background:var(--background-soft);

border:1px solid var(--border-color);

font-size:.84rem;

color:var(--text-light);

}

.ai-checklist-item i,
.ai-checklist-item svg{

width:16px;

height:16px;

color:var(--text-muted);

flex-shrink:0;

}

.ai-checklist-item.is-done{

color:var(--text-color);

}

.ai-checklist-item.is-done i,
.ai-checklist-item.is-done svg{

color:var(--success);

}

/* ==========================================================
ZONE DE DÉPÔT DE FICHIERS
========================================================== */

.ai-dropzone{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:10px;

padding:36px 20px;

border-radius:var(--radius-lg);

border:2px dashed var(--border-color);

background:var(--background-soft);

text-align:center;

cursor:pointer;

transition:var(--transition);

}

.ai-dropzone i,
.ai-dropzone svg{

width:30px;

height:30px;

color:var(--accent-color);

}

.ai-dropzone strong{

color:var(--text-color);

font-size:.92rem;

}

.ai-dropzone span{

color:var(--text-muted);

font-size:.78rem;

}

.ai-file-list{

display:flex;

flex-direction:column;

gap:10px;

margin-top:16px;

}

.ai-file-row{

display:flex;

align-items:center;

gap:12px;

padding:12px 14px;

border-radius:var(--radius-sm);

background:var(--background-soft);

border:1px solid var(--border-color);

}

/* Pastille supprimée le 2026-08-22 — règle « Icônes » de
DESIGN_SYSTEM.md : aucun conteneur derrière une icône. L'icône
porte elle-même la couleur, et cette couleur signifie quelque
chose. Le fond, la taille fixe et le rayon ont été retirés ;
la mise en page (flex, marges) reste. */
.ai-file-row-icon{

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;





color:var(--text-muted);
}

.ai-file-row-icon i,
.ai-file-row-icon svg{ width:20px; height:20px; }

.ai-file-row-info{

flex:1;

min-width:0;

display:flex;

flex-direction:column;

gap:2px;

}

.ai-file-row-info strong{

font-size:.84rem;

color:var(--text-color);

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.ai-file-row-info span{

font-size:.72rem;

color:var(--text-muted);

}

.ai-file-row select{

padding:7px 10px;

border-radius:var(--radius-sm);

border:1px solid var(--border-color);

background:var(--background);

color:var(--text-color);

font-size:.78rem;

}

.ai-file-row-remove{

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

width:28px;

height:28px;

border-radius:var(--radius-full);

border:none;

background:transparent;

color:var(--text-muted);

cursor:pointer;

}

.ai-file-row-remove:hover{

background:rgba(239,68,68,.12);

color:var(--danger);

}

.ai-file-row-remove i,
.ai-file-row-remove svg{ width:15px; height:15px; }

/* ==========================================================
TRADUCTION — inversion de langues
========================================================== */

.ai-lang-row{

display:grid;

grid-template-columns:1fr auto 1fr;

align-items:end;

gap:10px;

margin-bottom:18px;

}

.ai-lang-swap-btn{

display:flex;

align-items:center;

justify-content:center;

width:40px;

height:40px;

border-radius:var(--radius-full);

border:1px solid var(--border-color);

background:var(--background-soft);

color:var(--text-light);

cursor:pointer;

transition:var(--transition);

margin-bottom:2px;

}

.ai-lang-swap-btn:hover{

transform:rotate(180deg);

border-color:var(--accent-color);

color:var(--accent-color);

}

.ai-lang-swap-btn i,
.ai-lang-swap-btn svg{ width:16px; height:16px; }

.ai-mode-tabs{

display:inline-flex;

padding:4px;

border-radius:var(--radius-full);

background:var(--background-soft);

border:1px solid var(--border-color);

margin-bottom:18px;

}

.ai-mode-tab{

padding:8px 18px;

border-radius:var(--radius-full);

border:none;

background:transparent;

color:var(--text-light);

font-size:.82rem;

font-weight:700;

cursor:pointer;

transition:var(--transition);

}

.ai-mode-tab.is-active{

background:var(--gradient-primary);

color:#fff;

}

.ai-history-list{

display:flex;

flex-direction:column;

gap:10px;

margin-top:16px;

}

.ai-history-item{

display:flex;

align-items:center;

justify-content:space-between;

gap:10px;

padding:12px 14px;

border-radius:var(--radius-sm);

background:var(--background-soft);

border:1px solid var(--border-color);

cursor:pointer;

transition:var(--transition);

}

.ai-history-item:hover{

border-color:rgba(233,163,25,.4);

}

.ai-history-item-text{

min-width:0;

}

.ai-history-item-text strong{

display:block;

font-size:.82rem;

color:var(--text-color);

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

max-width:280px;

}

.ai-history-item-text span{

font-size:.72rem;

color:var(--text-muted);

}

/* ==========================================================
SQUELETTES DE CHARGEMENT
========================================================== */

.ai-skeleton{

border-radius:var(--radius-sm);

background:linear-gradient(90deg, var(--background-soft) 25%, var(--background-alt) 37%, var(--background-soft) 63%);

background-size:400% 100%;

animation:shimmer-sweep 1.4s ease infinite;

}

.ai-skeleton-line{

height:12px;

margin-bottom:8px;

}

/* ==========================================================
TOASTS
========================================================== */

.ai-toast-viewport{

position:fixed;

bottom:24px;

right:24px;

z-index:9999;

display:flex;

flex-direction:column;

gap:10px;

max-width:340px;

}

.ai-toast{

padding:13px 18px;

border-radius:var(--radius-md);

background:var(--background);

border:1px solid var(--border-color);

box-shadow:var(--shadow-lg);

color:var(--text-color);

font-size:.86rem;

opacity:0;

transform:translateY(12px);

transition:opacity .25s var(--ease-premium), transform .25s var(--ease-premium);

}

.ai-toast.is-visible{

opacity:1;

transform:translateY(0);

}

.ai-toast-error{

border-color:rgba(239,68,68,.4);

}

.ai-toast-success{

border-color:rgba(34,197,94,.35);

}

/* `type: "warning"` est utilisé à quatre endroits d'applications.js
   (proposition finale de Fitz, aucune remplaçante trouvée, statut
   refusé) et n'avait AUCUN style : ces avertissements sortaient avec la
   bordure neutre, indiscernables d'une confirmation. */
.ai-toast-warning{

border-color:rgba(190,96,50,.45);

}

/* ==========================================================
RESPONSIVE
========================================================== */

@media(max-width:900px){

.ai-tool-layout{

grid-template-columns:1fr;

}

.ai-insight-columns{

grid-template-columns:1fr;

}

.ai-score-summary{

flex-direction:column;

align-items:flex-start;

}

/* Historique de conversation Fitz : tiroir superposé plutôt qu'une
colonne fixe, sous 900px (mêmes principes que le tiroir de sidebar
principal du site — .sidebar-backdrop). */

.ai-chat-main-topbar{

display:flex;

}

.ai-chat-history{

position:absolute;

top:0;

left:0;

bottom:0;

z-index:20;

width:280px;

flex-basis:280px;

transform:translateX(-100%);

transition:transform .25s var(--ease-standard);

box-shadow:var(--shadow-lg);

}

body.ai-chat-history-open .ai-chat-history{

transform:translateX(0);

}

.ai-chat-history-close{

display:flex;

}

body.ai-chat-history-open .ai-chat-history-backdrop{

display:block;

position:absolute;

inset:0;

z-index:19;

background:rgba(23,19,16,.5);

}

}

@media(max-width:640px){

.ai-page-header{

flex-direction:column;

}

.ai-field-row{

grid-template-columns:1fr;

}

.ai-lang-row{

grid-template-columns:1fr;

}

.ai-lang-swap-btn{

justify-self:center;

transform:rotate(90deg);

}

.ai-msg{

max-width:92%;

}

}

/* ==========================================================
ÉTAT VERROUILLÉ — CONSEILLER (2026-08-23)
==========================================================
La carte ne disait que « pas disponible avec votre formule », suivie
d'un bouton d'achat. Un étudiant y arrivait avec une question et en
repartait avec un tarif : un cul-de-sac, au milieu d'un écran vide.

Elle porte maintenant ce que le conseiller apporte réellement, deux
actions à hauteur égale — dont une gratuite — et ce que Fitz fait
déjà. D'où l'élargissement : 520px suffisaient à une phrase, pas à
trois arguments.

Le texte passe à gauche : trois lignes centrées se lisent mal, l'œil
perd le début de chaque ligne. Seuls le titre et l'icône restent
centrés.
========================================================== */

.ai-locked-hero:has(.advisor-value){

max-width:620px;

text-align:left;

align-items:stretch;

}

.ai-locked-hero:has(.advisor-value) > .ai-locked-icon,
.ai-locked-hero:has(.advisor-value) > h2{

align-self:center;

text-align:center;

}

.advisor-value{

display:flex;

flex-direction:column;

gap:12px;

margin:4px 0 8px;

padding:0;

list-style:none;

}

/* Un trait ambre en tête de ligne plutôt qu'une puce ou une icône :
la règle « icônes rares » de DESIGN_SYSTEM.md vaut ici comme
ailleurs, et trois pictogrammes n'auraient rien dit de plus que
les trois phrases. */
.advisor-value li{

position:relative;

padding-left:18px;

color:var(--text-light);

font-size:.92rem;

line-height:1.6;

}

.advisor-value li::before{

content:"";

position:absolute;

left:0;

top:.62em;

width:9px;

height:2px;

border-radius:1px;

background:var(--amber-500);

}

.advisor-locked-actions{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:4px;

}

.advisor-locked-note{

margin-top:4px;

padding-top:16px;

border-top:1px solid var(--border-color);

font-size:.86rem;

}

@media(max-width:560px){

/* Les deux actions passent l'une sous l'autre et prennent toute la
largeur : sur un téléphone, deux boutons côte à côte se
rétrécissent jusqu'à couper leurs libellés (défaut déjà corrigé
sur l'accueil le 2026-08-23). */
.advisor-locked-actions{

flex-direction:column;

}

.advisor-locked-actions .btn{

width:100%;

justify-content:center;

}

}

/* ==========================================================
« CE QUE FITZ SAIT DÉJÀ » (2026-09-02) — carte de contexte PARTAGÉE
par les outils Fitz (ai-email, ai-letter, ai-check) : l'étudiant ne
re-saisit pas ce que Fitz connaît déjà — profil + candidature
sélectionnée s'affichent en pastilles, les champs d'ajustement
restent disponibles, repliés sous « Ajuster ». Née dans ai-email.css,
déménagée ici quand le patron a été répliqué.
========================================================== */

.ai-context-card{
border:1px solid var(--border-color);
background:var(--background-soft);
border-radius:var(--radius-sm);
padding:16px;
margin-bottom:18px;
}

.ai-context-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:12px;
}

.ai-context-head h3{
display:flex;
align-items:center;
gap:8px;
font-family:var(--font-display);
font-size:var(--fs-small);
font-weight:700;
color:var(--text-color);
margin:0;
}

.ai-context-head h3 i,
.ai-context-head h3 svg{width:16px;height:16px;color:var(--amber-700);}

.ai-context-adjust{
background:none;
border:none;
padding:0;
font-size:var(--fs-caption);
font-weight:700;
color:var(--text-light);
text-decoration:underline;
text-decoration-color:rgba(233,163,25,.45);
text-underline-offset:3px;
cursor:pointer;
}

.ai-context-adjust:hover{color:var(--text-color);text-decoration-color:var(--amber-500);}

.ai-context-application{margin-bottom:12px;}

.ai-context-chips{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
gap:8px;
margin:0;
}

.ai-context-chip{
background:#FFFFFF;
border:1px solid var(--border-color);
border-radius:var(--radius-sm);
padding:8px 10px;
min-width:0;
}

.ai-context-chip dt{
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.05em;
color:var(--text-muted);
margin:0 0 2px;
}

.ai-context-chip dd{
font-size:var(--fs-caption);
font-weight:600;
color:var(--text-color);
margin:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

/* Valeur manquante : pastille cliquable qui ouvre les champs — ambre
discret, jamais un rouge d'erreur (rien n'est encore « faux »). */
.ai-context-chip.is-missing{
border-style:dashed;
border-color:rgba(233,163,25,.5);
background:rgba(233,163,25,.06);
cursor:pointer;
}

.ai-context-chip.is-missing dd{color:var(--amber-700);}

.ai-context-chip.is-missing:hover,
.ai-context-chip.is-missing:focus-visible{border-color:var(--amber-500);}

/* Les champs d'ajustement repliés reprennent la respiration du
formulaire quand ils s'ouvrent. */
#contextDetails{margin-bottom:6px;}


/* ==========================================================
LOT ACCEPTATION (2026-09-11)
— la ligne de blocage des outils : « Acceptez d'abord cette université
  dans Mes candidatures » / « Choisissez d'abord une université acceptée » ;
— le temps qui reste au Pass Découverte, dans la barre du chat.
========================================================== */
.ai-outil-blocage{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px 14px;
margin:0 0 16px;
padding:12px 16px;
border:1px solid var(--border-color);
border-radius:var(--radius-md);
background:var(--background-alt);
font-weight:600;
color:var(--text-color);
}
.ai-outil-blocage i,
.ai-outil-blocage svg{ width:18px; height:18px; flex-shrink:0; color:var(--amber-600); }
.ai-outil-blocage .btn{ margin-left:auto; }
.ai-chat-pass-restant{
margin-left:auto;
font-size:var(--fs-caption);
font-weight:600;
color:var(--text-muted);
white-space:nowrap;
}