/* ==========================================================
FITZUNIVERSE — TABLEAU DE BORD (dashboard.html)
Repose sur les variables et le reset définis dans css/base.css
(même palette, même typographie, même système que le reste du
parcours) mais avec sa propre identité : app-shell sidebar +
contenu, pensé comme un véritable espace personnel plutôt
qu'une page marketing.
========================================================== */

:root{

--sidebar-width:260px;
--sidebar-width-collapsed:80px;
--topbar-height:72px;

/* ==========================================================
THÈME CLAIR/GLASS DU DASHBOARD — refonte 2026-08-20 : aligné sur
la palette claire de css/base.css plutôt qu'un thème sombre dédié,
pour une cohérence visuelle avec le reste du site (hero, catalogue).
Ces --shell-* restent redéclarés ICI (pas dans css/base.css) pour ne
rehue QUE les pages qui chargent dashboard.css — admin/control-center.css
et admin/login.css restent volontairement sur les valeurs neutres
sombres d'origine de base.css, hors périmètre de cette refonte. Toute
page du shell étudiant doit continuer à surcharger les tokens
génériques avec CEUX-LÀ dans son propre scope, jamais avec de
nouvelles valeurs inventées localement.
========================================================== */

/* Alignés sur les neutres PAPIER CHAUD de css/base.css le 2026-08-28
(voir le bloc "NEUTRES PAPIER" là-bas). Ces tokens sont redéclarés ici
et gagnent donc la cascade : les laisser en slate froid aurait rendu
le site public chaud et l'espace étudiant froid, avec la bascule
visible au moment exact de la connexion. Mêmes luminosités que les
valeurs slate qu'ils remplacent — les contrastes validés tiennent. */
--shell-bg:#FDFCFA;
--shell-surface:#F8F6F2;
--shell-elevated:#F1EEE8;
--shell-border:#E5E1D9;
--shell-text:#1A1714;
--shell-shadow-xs:0 1px 3px rgba(26,23,20,.05);
--shell-shadow-sm:0 4px 12px rgba(26,23,20,.08);
--shell-shadow-md:0 8px 20px rgba(26,23,20,.10);
--shell-shadow-lg:0 16px 32px rgba(26,23,20,.14);

--background:var(--shell-bg);
--background-soft:var(--shell-surface);
--background-alt:var(--shell-elevated);
/* Encre à 5 % et non bleu à 8 % (2026-08-23). Ce token est la surface
douce de TOUT l'espace : puce de formule, fond des blocs documents,
carte de style sélectionnée, badge d'en-tête. À 8 % d'un bleu franc,
il posait un voile lavande sur 90 000 px² de la page Candidatures —
la moitié de l'impression « bleu et violet », pour une valeur que
personne n'aurait été chercher. */
--background-light:rgba(26,23,20,.055);

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

--text-color:var(--shell-text);
--text-light:#57514A;
--text-muted:#6E6760;
--text-decorative:#8A837A;

--glass:rgba(255,255,255,.72);
--glass-border:rgba(255,255,255,.45);

--shadow-xs:var(--shell-shadow-xs);
--shadow-sm:var(--shell-shadow-sm);
--shadow-md:var(--shell-shadow-md);
--shadow-lg:var(--shell-shadow-lg);

}

body{

background:var(--gradient-hero);

background-attachment:fixed;

}

/* ==========================================================
ACCESSIBILITÉ CLAVIER — anneaux de focus visibles et cohérents
avec le reste du site (mêmes teintes que base.css .btn:focus-visible)
========================================================== */

.nav-link:focus-visible,
.sidebar-logout:focus-visible,
.sidebar-collapse-btn:focus-visible,
.topbar-menu-btn:focus-visible,
.topbar-plan-chip:focus-visible,
.coach-card-link:focus-visible,
.btn-upgrade:focus-visible,
.sidebar-brand:focus-visible{

outline:none;

/* Ambre et non violet (2026-08-27) : anneau de focus aligné sur
--amber-500, comme le reste des accents de l'espace étudiant depuis
le 2026-08-23 — cet anneau-ci avait été oublié dans cette passe. */
box-shadow:0 0 0 3px rgba(233,163,25,.5);

}

.upgrade-nudge .btn-upgrade:focus-visible{

box-shadow:0 0 0 3px rgba(255,255,255,.6);

}

/* ==========================================================
CHARGEMENT
========================================================== */

.auth-page-loader{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:var(--background-soft);

z-index:9999;

}

.loader-spinner{

width:44px;

height:44px;

border:4px solid rgba(255,255,255,.12);

border-top:4px solid var(--accent-color);

border-radius:50%;

animation:dashSpin .8s linear infinite;

}

@keyframes dashSpin{

100%{ transform:rotate(360deg); }

}

/* ==========================================================
RÉVÉLATION AU CHARGEMENT
========================================================== */

.reveal{

opacity:1;

transform:none;

}

html.js-ready .reveal{

opacity:0;

transform:translateY(20px);

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

}

html.js-ready .reveal.is-visible{

opacity:1;

transform:translateY(0);

}

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

.reveal{

opacity:1 !important;

transform:none !important;

transition:none !important;

}

}

/* ==========================================================
STRUCTURE GÉNÉRALE
========================================================== */

.dashboard-shell{

display:flex;

min-height:100vh;

}

.sidebar-backdrop{

display:none;

position:fixed;

inset:0;

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

z-index:40;

}

/* ==========================================================
SIDEBAR
========================================================== */

.sidebar{

position:fixed;

top:0;

left:0;

bottom:0;

z-index:50;

width:var(--sidebar-width);

display:flex;

flex-direction:column;

background:var(--glass);

backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);

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

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

transition:width .3s var(--ease-premium), transform .3s var(--ease-premium);

overflow-y:auto;

overflow-x:hidden;

}

body.sidebar-collapsed .sidebar{

width:var(--sidebar-width-collapsed);

}

.sidebar-top{

display:flex;

align-items:center;

justify-content:space-between;

gap:8px;

padding:22px 18px;

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

}

.sidebar-brand{

display:flex;

align-items:center;

gap:10px;

min-width:0;

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

font-weight:800;

font-size:1.05rem;

color:var(--text-color);

}

.sidebar-brand .logo-icon{

flex-shrink:0;

width:36px;

height:36px;

object-fit:contain;

border-radius:10px;

}

.sidebar-brand-text{

white-space:nowrap;

overflow:hidden;

transition:opacity .2s ease;

}

.sidebar-brand-text .scholar{ color:var(--primary-color); }
/* --amber-700 (pas --amber-500) : le shell est désormais à fond clair,
seul --amber-700 tient l'AA en couleur de texte sur fond clair (voir
la règle dans css/base.css ~L53-60) — même bascule que .logo .bridge
dans css/header.css. */
.sidebar-brand-text .bridge{ color:var(--amber-700); }

/* Même bascule que ci-dessus pour le nom "Fitz" dans le topbar (h1
"Fitz — Discuter" etc.) : app-shell est désormais à fond clair, donc
--amber-700 (seule valeur ambre admise comme texte sur fond clair)
plutôt que --amber-500, réservé aux fonds sombres. */
.topbar-title .fitz-name{ color:var(--amber-700); }

body.sidebar-collapsed .sidebar-brand-text{

opacity:0;

width:0;

}

.sidebar-collapse-btn{

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

width:32px;

height:32px;

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

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

background:var(--background);

color:var(--text-muted);

cursor:pointer;

transition:var(--transition);

}

.sidebar-collapse-btn:hover{

color:var(--accent-color);

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

}

.sidebar-collapse-btn i,
.sidebar-collapse-btn svg{

width:16px;

height:16px;

transition:transform .3s var(--ease-premium);

}

body.sidebar-collapsed .sidebar-collapse-btn i,
body.sidebar-collapsed .sidebar-collapse-btn svg{

transform:rotate(180deg);

}

.sidebar-plan{

display:flex;

flex-direction:column;

gap:6px;

margin:16px 18px;

padding:14px 16px;

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

background:var(--background-light);

}

body.sidebar-collapsed .sidebar-plan{

padding:10px;

align-items:center;

}

.sidebar-plan-label{

font-size:.72rem;

font-weight:700;

/* --text-light et non --text-muted : mesuré 4,49:1 sur le fond de
cette carte, pour un seuil à 4,5. L'écart est invisible à l'œil,
mais un libellé d'interface ne se joue pas au centième. 7,6:1 ici.
Corrigé DANS dashboard.css et non dans css/app-shell.css : cette
feuille est chargée après, une correction posée en amont y serait
restée sans effet (piège déjà rencontré trois fois). */
color:var(--text-light);

text-transform:uppercase;

letter-spacing:.05em;

}

body.sidebar-collapsed .sidebar-plan-label{

display:none;

}

.sidebar-plan-badge{

display:inline-flex;

align-items:center;

gap:6px;

width:max-content;

padding:5px 12px;

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

background:var(--gradient-primary);

color:#fff;

font-weight:700;

font-size:.82rem;

}

.sidebar-nav{

flex:1;

padding:6px 12px 12px;

}

.sidebar-section-label{

display:block;

margin:18px 10px 8px;

color:var(--text-muted);

font-weight:700;

font-size:.7rem;

text-transform:uppercase;

letter-spacing:.06em;

white-space:nowrap;

}

body.sidebar-collapsed .sidebar-section-label{

opacity:0;

height:0;

margin:8px 0 0;

overflow:hidden;

}

.sidebar-nav ul{

display:flex;

flex-direction:column;

gap:3px;

}

.nav-link{

position:relative;

display:flex;

align-items:center;

gap:12px;

padding:11px 12px;

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

color:var(--text-light);

font-weight:600;

font-size:.92rem;

white-space:nowrap;

transition:var(--transition);

}

.nav-link i:not(.nav-lock),
.nav-link svg:not(.nav-lock){

flex-shrink:0;

width:19px;

height:19px;

}

.nav-link span{

overflow:hidden;

text-overflow:ellipsis;

}

body.sidebar-collapsed .nav-link span{

display:none;

}

.nav-link:hover{

background:var(--background-alt);

color:var(--text-color);

}

/* Groupe "Fitz" — un panneau légèrement teinté distingue ce sous-
ensemble d'outils du reste de la navigation ("Mon espace"), plutôt
qu'une simple étiquette de section au même poids visuel que l'autre.
La teinte de la signature Fitz (--fitz-color) reste réservée à ce
groupe : ailleurs dans la nav, le survol est neutre (voir
.nav-link:hover ci-dessus). Ambre et non violet depuis le 2026-08-27,
comme --fitz-color lui-même (voir css/base.css). */
.sidebar-nav-fitz{

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

border:1px solid rgba(233,163,25,.14);

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

padding:4px;

}

.sidebar-nav-fitz .nav-link:hover{

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

color:var(--fitz-color);

}

.nav-link.is-active{

background:var(--gradient-primary);

color:#fff;

box-shadow:0 8px 18px rgba(26,23,20,.24);

}

.nav-lock{

display:none;

flex-shrink:0;

width:13px !important;

height:13px !important;

margin-left:auto;

color:var(--text-muted);

}

.nav-link.is-active .nav-lock{

color:rgba(255,255,255,.8);

}

body.sidebar-collapsed .nav-lock{

display:none;

}

.sidebar-bottom{

padding:14px 12px 20px;

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

}

.sidebar-logout{

display:flex;

align-items:center;

gap:12px;

width:100%;

padding:11px 12px;

border:none;

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

background:none;

color:var(--text-light);

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

font-weight:600;

font-size:.92rem;

cursor:pointer;

white-space:nowrap;

transition:var(--transition);

}

.sidebar-logout i,
.sidebar-logout svg{

flex-shrink:0;

width:19px;

height:19px;

}

.sidebar-logout:hover{

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

color:var(--danger);

}

body.sidebar-collapsed .sidebar-logout span{

display:none;

}

/* ==========================================================
CONTENU PRINCIPAL
========================================================== */

.dashboard-main{

flex:1;

min-width:0;

margin-left:var(--sidebar-width);

transition:margin-left .3s var(--ease-premium);

}

body.sidebar-collapsed .dashboard-main{

margin-left:var(--sidebar-width-collapsed);

}

.topbar{

position:sticky;

top:0;

z-index:20;

display:flex;

align-items:center;

gap:16px;

height:var(--topbar-height);

padding:0 32px;

background:var(--glass);

backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);

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

}

.topbar-menu-btn{

display:none;

align-items:center;

justify-content:center;

width:38px;

height:38px;

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

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

background:var(--background);

color:var(--text-color);

cursor:pointer;

}

.topbar-menu-btn i,
.topbar-menu-btn svg{

width:19px;

height:19px;

}

.topbar-title{

flex:1;

min-width:0;

}

/* .back-link (css/base.css, 2026-08-28) posé ici : sa marge par défaut
(32px, pensée pour un lien seul en haut d'un .container) est bien trop
généreuse une fois glissé au-dessus d'un h1 déjà dense dans la topbar —
resserrée à la taille d'un simple repère, pas d'un élément à part
entière. white-space:nowrap comme le h1 juste en dessous : la topbar
ne grandit jamais en hauteur, même sur un intitulé long ou un petit
écran (voir overflow:hidden/text-overflow:ellipsis du h1). */
.topbar-title .back-link{

margin-bottom:2px;

font-size:.8rem;

white-space:nowrap;

}

.topbar-title h1{

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

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

color:var(--text-color);

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

/* ==========================================================
CLOCHE DE MESSAGES (Module 3 du Control Center admin)
========================================================== */

.messages-bell-wrap{

position:relative;

flex-shrink:0;

}

.messages-bell-btn{

position:relative;

display:flex;

align-items:center;

justify-content:center;

width:40px;

height:40px;

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

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

background:var(--background);

color:var(--text-light);

cursor:pointer;

transition:var(--transition);

}

.messages-bell-btn:hover{

color:var(--accent-color);

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

}

.messages-bell-btn i,
.messages-bell-btn svg{

width:18px;

height:18px;

}

.messages-bell-dot{

position:absolute;

top:8px;

right:9px;

width:8px;

height:8px;

border-radius:50%;

background:var(--danger);

border:2px solid var(--background);

}

.messages-panel{

position:absolute;

top:calc(100% + 10px);

right:0;

z-index:60;

width:320px;

max-height:360px;

overflow-y:auto;

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

background:var(--background);

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

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

}

.messages-panel-header{

padding:14px 18px;

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

font-weight:700;

font-size:.86rem;

color:var(--text-color);

}

.messages-panel-list{

display:flex;

flex-direction:column;

}

.messages-panel-empty{

padding:24px 18px;

text-align:center;

color:var(--text-muted);

font-size:.84rem;

}

.messages-panel-item{

padding:14px 18px;

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

cursor:pointer;

transition:var(--transition);

}

.messages-panel-item:last-child{

border-bottom:none;

}

.messages-panel-item:hover{

background:var(--background-light);

}

.messages-panel-item.is-unread{

/* Ambre et non violet (2026-08-27) — même oubli que l'anneau de
focus plus haut dans ce fichier. */
background:rgba(233,163,25,.08);

}

.messages-panel-item p{

color:var(--text-color);

font-size:.86rem;

line-height:1.5;

margin-bottom:4px;

}

.messages-panel-item span{

color:var(--text-muted);

font-size:.74rem;

}

.topbar-plan-chip{

flex-shrink:0;

display:inline-flex;

align-items:center;

gap:7px;

padding:8px 16px;

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

/* AMBRE + ENCRE en permanence (2026-09-02) : l'ancien couple
--background-light/--accent-color rendait le libellé quasi invisible
hors survol (constaté sur photo utilisateur, mobile ai-chat) —
règle AA de base.css : surface --amber-500, libellé --ink-surface. */
background:var(--amber-500);

color:var(--ink-surface);

font-weight:700;

font-size:.84rem;

transition:var(--transition);

}

.topbar-plan-chip:hover{

background:var(--gradient-primary);

color:#fff;

transform:translateY(-1px);

}

.topbar-plan-chip i,
.topbar-plan-chip svg{

width:15px;

height:15px;

}

.content{

max-width:1160px;

margin:0 auto;

padding:32px 32px 80px;

}

/* ==========================================================
ALERTE DE BIENVENUE
========================================================== */

.welcome-alert{

display:flex;

align-items:flex-start;

gap:12px;

padding:16px 20px;

margin-bottom:28px;

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

background:rgba(34,197,94,.14);

border:1px solid rgba(34,197,94,.35);

}

.welcome-alert[hidden]{

display:none;

}

.welcome-alert i,
.welcome-alert svg{

flex-shrink:0;

width:20px;

height:20px;

margin-top:1px;

color:var(--success);

}

.welcome-alert strong{

display:block;

color:var(--text-color);

font-size:.95rem;

margin-bottom:2px;

}

.welcome-alert p{

color:var(--text-light);

font-size:.88rem;

}

.welcome-alert-accompagnement{

/* Ambre et non violet (2026-08-27) — l'icône juste en dessous
utilisait déjà var(--accent-color), donc déjà l'ambre : c'est le
fond et la bordure qui étaient restés violets, en décalage avec
elle. Même oubli que l'anneau de focus plus haut dans ce fichier. */
background:rgba(233,163,25,.10);

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

}

.welcome-alert-accompagnement i,
.welcome-alert-accompagnement svg{color:var(--accent-color);}

.welcome-alert-cta{

display:inline-flex;

align-items:center;

gap:6px;

margin-top:10px;

font-size:.86rem;

font-weight:700;

color:var(--accent-color);

}

.welcome-alert-cta i,
.welcome-alert-cta svg{

width:15px;

height:15px;

color:inherit;

transition:transform .2s ease;

}

.welcome-alert-cta:hover i,
.welcome-alert-cta:hover svg{transform:translateX(3px);}

/* ==========================================================
SECTIONS GÉNÉRIQUES
========================================================== */

.section-heading{

display:flex;

align-items:center;

gap:10px;

margin-bottom:6px;

}

.section-heading i,
.section-heading svg{

width:20px;

height:20px;

color:var(--text-decorative);

}

.section-heading h2{

font-size:1.2rem;

font-weight:800;

color:var(--text-color);

}

.section-subtext{

color:var(--text-light);

font-size:.9rem;

margin-bottom:18px;

}

.coach-section,
.journey-section{

margin-bottom:36px;

}

/* ==========================================================
COACH — "AUJOURD'HUI"
========================================================== */

.coach-grid{

display:grid;

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

gap:16px;

}

.coach-card{

display:flex;

flex-direction:column;

gap:10px;

padding:18px;

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

background:var(--background);

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

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

transition:var(--transition);

}

.coach-card:hover{

transform:translateY(-8px);

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

/* Ambre et non violet (2026-08-27) — même oubli que l'anneau de
focus plus haut dans ce fichier. */
border-color:rgba(233,163,25,.4);

}

/* 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. */
.coach-card-icon i,
.coach-card-icon svg{ width:22px; height:22px; }

.coach-card-body h3{

font-size:1rem;

font-weight:700;

color:var(--text-color);

margin-bottom:6px;

}

.coach-card-body p{

color:var(--text-light);

font-size:.86rem;

line-height:1.55;

margin-bottom:14px;

min-height:2.6em;

}

.coach-card-link{

display:inline-flex;

align-items:center;

gap:6px;

color:var(--accent-color);

font-weight:700;

font-size:.86rem;

}

.coach-card-link i,
.coach-card-link svg{

width:14px;

height:14px;

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

}

.coach-card:hover .coach-card-link i,
.coach-card:hover .coach-card-link svg{

transform:translateX(3px);

}

/* ==========================================================
PARCOURS — CANDIDATURE MISE EN AVANT
La CARTE qui porte le parcours sur le tableau de bord. Le stepper
lui-même (.application-journey / .journey-step) vit désormais dans
css/app-shell.css, chargé par les deux pages : il en existait ici
une copie mot pour mot de celle d'applications.css.

Ce qui reste propre au tableau de bord : les étapes y sont rendues
en <a> par js/application-journey.js — chacune mène à sa page — là
où applications.html les rend en <button> déclenchant une action
(focus-checklist, run-readiness).
========================================================== */

.journey-card{

padding:22px 24px;

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

background:var(--background);

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

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

}

.journey-card-top{

display:flex;

align-items:flex-start;

justify-content:space-between;

gap:16px;

flex-wrap:wrap;

margin-bottom:16px;

}

.journey-card-top h3{

font-size:1.05rem;

font-weight:700;

color:var(--text-color);

}

.journey-card-meta{

color:var(--text-light);

font-size:.86rem;

margin-top:4px;

}

/* La section « STATISTIQUES » (.stats-section/.stat-card et ses
sous-éléments) a été retirée le 2026-08-27, avec les cartes qu'elle
mettait en forme — voir la note dans dashboard.html à l'endroit où
vivait cette section. */

/* ==========================================================
NUDGE DE MONTÉE EN GAMME
========================================================== */

.upgrade-nudge{

display:flex;

align-items:flex-start;

gap:20px;

padding:30px 32px;

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

background:var(--gradient-primary);

color:#fff;

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

}

.upgrade-nudge[hidden]{

display:none;

}

/* 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. */
.upgrade-nudge-icon i,
.upgrade-nudge-icon svg{ width:26px; height:26px; }

.upgrade-nudge-body{

flex:1;

min-width:0;

}

.upgrade-nudge-current{

font-size:.86rem;

opacity:.85;

margin-bottom:6px;

}

.upgrade-nudge-title{

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

font-size:1.15rem;

font-weight:800;

margin-bottom:14px;

}

.upgrade-nudge-list{

display:flex;

flex-direction:column;

gap:8px;

margin-bottom:20px;

}

.upgrade-nudge-list li{

display:flex;

align-items:flex-start;

gap:9px;

font-size:.9rem;

line-height:1.5;

opacity:.95;

}

.upgrade-nudge-list i,
.upgrade-nudge-list svg{

flex-shrink:0;

width:16px;

height:16px;

margin-top:2px;

color:var(--accent-color);

}

.btn-upgrade{

display:inline-flex;

align-items:center;

gap:9px;

padding:12px 22px;

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

background:#fff;

color:var(--primary-color);

font-weight:700;

font-size:.92rem;

transition:var(--transition);

}

.btn-upgrade:hover{

transform:translateY(-1px);

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

}

.btn-upgrade i,
.btn-upgrade svg{

width:16px;

height:16px;

}

/* La « GRILLE D'OUTILS » (.tools-grid/.tool-card et ses sous-éléments,
dont l'overlay .tool-card-lock) a été retirée le 2026-08-27 : elle
dupliquait sur la page d'accueil exactement ce que la sidebar affiche
déjà en permanence. Voir la note dans dashboard.html à l'endroit où
vivait cette section. */

/* ==========================================================
VERROUILLAGE PAR FORMULE
========================================================== */

/* Module 4 : le verrouillage n'est plus déduit d'un seuil de palier
statique (data-tier) mais d'indicateurs par fonctionnalité pilotés
depuis admin/plans.js (js/plan-features.js) — bootstrapShell()
(js/app-shell.js) calcule si chaque [data-feature] doit être verrouillé
pour la formule active et pose/retire la classe .is-locked en
conséquence, sur la sidebar. */
li.is-locked .nav-lock{

display:block;

}

/* ==========================================================
RESPONSIVE — TABLETTE (768–1023px)
========================================================== */

@media(max-width:1023px){

.sidebar{

transform:translateX(-100%);

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

}

body.sidebar-open .sidebar{

transform:translateX(0);

}

body.sidebar-open .sidebar-backdrop{

display:block;

}

.dashboard-main{

margin-left:0;

}

body.sidebar-collapsed .dashboard-main{

margin-left:0;

}

.sidebar-collapse-btn{

display:none;

}

.topbar-menu-btn{

display:flex;

}

}

/* ==========================================================
RESPONSIVE — MOBILE (< 768px)
========================================================== */

@media(max-width:767px){

.content{

padding:24px 18px 70px;

}

.topbar{

padding:0 18px;

}

/* Le libellé de formule RESTE lisible en mobile (2026-09-02) —
le masquer laissait une pastille colorée muette (photo utilisateur) ;
« Signature » ou « Essentiel » tiennent très bien en compact. */
.topbar-plan-chip{

padding:6px 12px;

font-size:.78rem;

}

.upgrade-nudge{

flex-direction:column;

padding:24px;

}

}

/* ==========================================================
MESSAGERIE FITZUNIVERSE (2026-09-02) — le panneau de la cloche
devient un fil de conversation signé FitzUniverse, avec réponse de
l'étudiant (formules payantes). Uniquement des tokens : le panneau
suit le contexte clair/sombre de chaque page.
========================================================== */

.messages-panel{ display:flex; flex-direction:column; }

.messages-panel-list{

flex:1;

overflow-y:auto;

max-height:260px;

padding:12px 14px;

gap:10px;

}

.messages-thread-item{

display:flex;

flex-direction:column;

align-items:flex-start;

max-width:92%;

}

.messages-thread-item.is-student{

align-self:flex-end;

align-items:flex-end;

}

.messages-thread-author{

font-size:.68rem;

font-weight:700;

text-transform:uppercase;

letter-spacing:.04em;

color:var(--amber-700);

margin-bottom:3px;

}

.messages-thread-item.is-student .messages-thread-author{

color:var(--text-muted);

}

.messages-thread-bubble{

padding:9px 13px;

border-radius:14px;

border-top-left-radius:4px;

background:var(--background-light);

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

}

.messages-thread-item.is-student .messages-thread-bubble{

border-radius:14px;

border-top-right-radius:4px;

background:var(--ink-surface);

border-color:var(--ink-surface);

}

.messages-thread-bubble p{

color:var(--text-color);

font-size:.85rem;

line-height:1.5;

margin:0;

white-space:pre-wrap;

overflow-wrap:anywhere;

}

.messages-thread-item.is-student .messages-thread-bubble p{

color:#F5F0E7;

}

.messages-thread-item.is-unread .messages-thread-bubble{

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

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

}

.messages-thread-date{

margin-top:3px;

font-size:.68rem;

color:var(--text-muted);

}

.messages-composer{

display:flex;

align-items:flex-end;

gap:8px;

padding:10px 12px;

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

}

.messages-composer textarea{

flex:1;

/* Lot PEIGNE-FIN (2026-09-10) : sans min-width:0, un textarea garde sa
largeur intrinsèque (ses cols) et pousse le bouton d'envoi hors de la
carte à 375 px — photo de Charles, reproduit à 375. */
min-width:0;

resize:none;

max-height:90px;

padding:9px 12px;

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

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

background:var(--background);

color:var(--text-color);

font-family:"Inter",sans-serif;

font-size:.85rem;

line-height:1.4;

}

.messages-composer textarea:focus{

outline:none;

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

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

}

.messages-composer button{

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

width:38px;

height:38px;

min-height:38px;

border:none;

border-radius:50%;

background:var(--amber-500);

color:var(--ink-surface);

cursor:pointer;

transition:var(--transition);

}

.messages-composer button:hover{ background:var(--amber-600); }

.messages-composer button:disabled{ opacity:.6; cursor:default; }

.messages-composer button svg{ width:16px; height:16px; }

.messages-composer-locked{

display:flex;

flex-wrap:wrap;

align-items:center;

justify-content:space-between;

gap:6px;

padding:10px 14px;

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

font-size:.76rem;

color:var(--text-muted);

}

.messages-composer-locked a{

font-weight:700;

color:var(--amber-700);

}

/* ---- Cloche : en-tête avec lien vers la conversation complète ---- */

.messages-panel-header{

display:flex;

align-items:center;

justify-content:space-between;

gap:10px;

}

.messages-panel-openlink{

flex-shrink:0;

font-size:.74rem;

font-weight:700;

color:var(--amber-700);

}

.messages-panel-openlink:hover{ text-decoration:underline; }

/* ---- Page « Mes messages » (messages.html) ---- */

.messages-page-card{

max-width:780px;

margin:0 auto;

}

.messages-page-body{

display:flex;

flex-direction:column;

gap:0;

padding:0;

}

/* ---- Signaler un problème (grille A, 2026-09-07) ----
Lot FINITIONS-VISUELLES (2026-09-11) : plus de seconde carte sous la
conversation — un BOUTON dans l'en-tête de la carte, et une FEUILLE
(.fitz-feuille) hors du flux : fenêtre centrée sur ordinateur, feuille
ancrée en bas sur téléphone, qui suit le viewport visible (--vvh /
--vvtop posés par js/mobile-nav.js) pour rester lisible clavier ouvert.
Aucun backdrop-filter, aucun flou : fond opaque (lot DEUX-MOTEURS). */

.messages-page-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}

.messages-page-header h2{ min-width:0; }

/* Le titre de la carte : entier sur ordinateur ; sur téléphone il se
coupe (…) pour laisser le bouton sur la même ligne (voir plus bas). */
.messages-page-title{ min-width:0; }

.messages-support-btn{
display:inline-flex;
align-items:center;
gap:8px;
min-height:36px;
padding:6px 14px;
border-radius:999px;
border:1px solid var(--border-color);
background:var(--background-soft);
color:var(--text-color);
font-family:inherit;
font-size:.82rem;
font-weight:600;
cursor:pointer;
white-space:nowrap;
transition:border-color .15s ease, background .15s ease;
}

.messages-support-btn:hover{ border-color:var(--amber-700); background:#FFFFFF; }
.messages-support-btn:focus-visible{ outline:2px solid var(--primary-color); outline-offset:2px; }
.messages-support-btn i,
.messages-support-btn svg{ width:16px; height:16px; color:var(--amber-700); flex-shrink:0; }

.fitz-feuille{
position:fixed;
top:0;
left:0;
right:0;
height:var(--vvh, 100%);
transform:translateY(var(--vvtop, 0px));
z-index:2200;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(20,16,13,.58);
}

.fitz-feuille[hidden]{ display:none; }

.fitz-feuille-card{
width:100%;
max-width:520px;
max-height:100%;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:22px 24px 24px;
border-radius:var(--radius-lg);
background:#FDF9EF;
color:#14100D;
border:1px solid rgba(20,16,13,.14);
box-shadow:var(--shadow-lg);
}

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

.fitz-feuille-head h2{
display:flex;
align-items:center;
gap:10px;
margin:0;
font-size:1.05rem;
}

.fitz-feuille-head h2 i,
.fitz-feuille-head h2 svg{ width:18px; height:18px; color:var(--amber-700); flex-shrink:0; }

.fitz-feuille-close{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:999px;
border:1px solid transparent;
background:transparent;
color:var(--text-light);
cursor:pointer;
flex-shrink:0;
}

.fitz-feuille-close:hover{ background:rgba(20,16,13,.06); color:var(--text-color); }
.fitz-feuille-close:focus-visible{ outline:2px solid var(--primary-color); outline-offset:2px; }
.fitz-feuille-close i,
.fitz-feuille-close svg{ width:18px; height:18px; }

@media(max-width:720px){

.fitz-feuille{
align-items:flex-end;
padding:0;
}

.fitz-feuille-card{
max-width:none;
max-height:min(92%, 640px);
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}

/* Le bandeau d'information se replie en une ligne sur téléphone ; on
le déplie en le touchant (js/messages-page.js). */
.messages-page-notice{ cursor:pointer; }

.messages-page-notice > span{
display:block;
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.messages-page-notice.is-open > span{ white-space:normal; }

.messages-support-btn span{ display:none; }
.messages-support-btn{ padding:6px 10px; }

/* L'en-tête de la carte tient sur UNE ligne : titre et bouton côte à
côte, le titre se coupe (…) plutôt que de passer le bouton à la ligne —
mesuré à 375 × 667 : un en-tête sur deux rangées (103 px) laissait au
fil moins de la moitié de l'écran. */
.messages-page-header{ flex-wrap:nowrap; padding-top:12px; padding-bottom:12px; }
.messages-page-header h2{ flex:1 1 auto; min-width:0; }

/* Le cadre plein écran du téléphone : le rembourrage de .ai-panel-body
(22 px haut et bas, css/ai-suite.css, chargée après cette feuille)
mangeait 44 px de fil. Mesuré à 375 × 667 : fil 303 px → 359 px. */
body:has(.messages-page-card) .messages-page-body{ padding:0; }
.messages-page-header .messages-page-title{
display:block;
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

}

.messages-support-lead{
margin:0 0 14px;
font-size:.86rem;
line-height:1.55;
color:var(--text-light);
}

.messages-support-form{
display:flex;
flex-direction:column;
gap:12px;
}

.messages-support-field{
display:flex;
flex-direction:column;
gap:6px;
font-size:.8rem;
font-weight:600;
color:var(--text-color);
}

.messages-support-field select,
.messages-support-field textarea{
font:inherit;
font-weight:400;
padding:10px 12px;
border:1px solid var(--border-color);
border-radius:var(--radius-md);
background:var(--surface-color, #fff);
color:var(--text-color);
resize:vertical;
}

.messages-support-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
}

.messages-support-done{
margin:0;
font-size:.8rem;
color:var(--text-light);
}

.messages-page-notice{

display:flex;

align-items:flex-start;

gap:10px;

margin:16px 18px 0;

padding:12px 14px;

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

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

border:1px solid rgba(233,163,25,.25);

color:var(--text-light);

font-size:.84rem;

line-height:1.55;

}

.messages-page-notice i,
.messages-page-notice svg{

width:16px;

height:16px;

flex-shrink:0;

margin-top:2px;

color:var(--amber-700);

}

.messages-page-thread{

display:flex;

flex-direction:column;

gap:12px;

height:min(52vh, 520px);

overflow-y:auto;

padding:18px;

margin:14px 0 0;

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

}

/* Le composer partagé (.messages-composer) est déjà stylé plus haut ;
sur la page il garde simplement plus d'air. */

.messages-page-body .messages-composer{ padding:14px 18px; }

.messages-page-body .messages-composer-locked{ padding:14px 18px; }

@media(max-width:576px){

.messages-page-notice{ margin:12px 12px 0; font-size:.8rem; }

.messages-page-thread{ padding:14px 12px; height:min(56vh, 460px); }

.messages-page-body .messages-composer,
.messages-page-body .messages-composer-locked{ padding:12px; }

}

/* ==========================================================
MESSAGERIE PLEIN CADRE (2026-09-02) — retour utilisateur : « pas de
scroll qui vont dans tous les sens ». Avant : le fil avait sa propre
hauteur fixe (52vh) AVEC son ascenseur, posé dans une page qui
défilait aussi — deux ascenseurs côte à côte, et le FAB Fitz
recouvrait le bouton d'envoi. Désormais la page messages est un cadre
de conversation à la ai-chat : hauteur de l'écran, UN SEUL défilement
(le fil), composer épinglé en bas, FAB masqué (le raccourci vers le
chat Fitz n'a rien à faire posé sur un composer).
========================================================== */

body:has(.messages-page-card){
height:100dvh;
overflow:hidden;
}

body:has(.messages-page-card) .dashboard-shell{
height:100%;
min-height:0;
}

body:has(.messages-page-card) .dashboard-main{
height:100%;
min-height:0;
display:flex;
flex-direction:column;
}

/* La colonne éditoriale (journey-shell) garde sa largeur, mais devient
une colonne flexible qui donne au fil TOUTE la hauteur restante. */
body:has(.messages-page-card) .dashboard-main > .content{
flex:1;
min-height:0;
display:flex;
flex-direction:column;
width:100%;
padding:16px clamp(16px, 4vw, 40px) 20px;
}

body:has(.messages-page-card) .messages-page-card{
flex:1;
min-height:0;
display:flex;
flex-direction:column;
width:100%;
}

body:has(.messages-page-card) .messages-page-body{
flex:1;
min-height:0;
}

/* Le SEUL élément qui défile. La hauteur fixe de la première version
est neutralisée (cette règle vient après dans la feuille). */
body:has(.messages-page-card) .messages-page-thread{
flex:1;
min-height:0;
height:auto;
}

/* Le FAB « Discuter avec Fitz » recouvrait le bouton d'envoi — même
règle que sur le chat (body:has(#chatApp), css/chat-redesign.css). */
body:has(.messages-page-card) .fitz-fab-wrap{
display:none;
}

/* Conversation aérée : bulles bornées comme dans une messagerie
moderne, la ligne entière n'est jamais un bloc mur-à-mur. */
.messages-page-thread .messages-thread-item{
max-width:min(78%, 560px);
}

@media(max-width:576px){

body:has(.messages-page-card) .dashboard-main > .content{
padding:10px 10px 12px;
}

.messages-page-thread .messages-thread-item{
max-width:88%;
}

}

/* Correctifs mesurés au DOM réel (2026-09-02, cadre plein écran) :
- le piège section{padding:110px/64px} de base.css s'appliquait à la
  carte (<section class="ai-panel">) et mangeait ~130px de hauteur ;
- en colonne flexible, l'avis, l'en-tête et le composer se laissaient
  COMPRIMER par le fil (composer mesuré à 0px de haut) — seuls le fil
  a le droit de grandir et de rétrécir. */
body:has(.messages-page-card) .messages-page-card{
padding:0;
overflow:hidden;
}

body:has(.messages-page-card) .messages-page-card .ai-panel-header,
body:has(.messages-page-card) .messages-page-notice,
body:has(.messages-page-card) #messagesPageComposerHost{
flex-shrink:0;
}