/* ==========================================================
FITZ — COQUILLE « PARCOURS » DE L'ESPACE ÉTUDIANT (2026-08-30)

Refonte demandée par l'utilisateur : « pas de sidebar cette fois-ci,
juste un espace qui guide étape par étape ». La sidebar de 17 liens
disparaît de tout l'espace étudiant ; la navigation devient LE
PARCOURS (dashboard.html), et chaque page outil porte une barre
haute légère : marque, retour au parcours, cloche de messages,
formule, profil/paramètres/déconnexion.

Cette feuille est chargée EN DERNIER sur toutes les pages de
l'espace (après app-shell.css/dashboard.css qu'elle surclasse par
cascade). Elle fait trois choses :

1. TOKENS — bascule l'espace étudiant dans l'identité « papier
   chaud » du reste du site (terracotta, Newsreader/Public Sans),
   comme les *-redesign.css l'ont fait page par page côté public.
2. COQUILLE — neutralise la grille à sidebar de app-shell.css
   (.dashboard-shell repasse en flux normal) et style la nouvelle
   barre .journey-topbar.
3. GARDE-FOUS — les éléments d'ancienne coquille encore présents
   dans une page non migrée (aside/backdrop/bouton menu) sont
   masqués, pour qu'un oubli de migration ne casse jamais la mise
   en page.
========================================================== */

:root{
--font-affirmation:'Newsreader', serif;
--font-product:'Public Sans', sans-serif;
--font-body:'Public Sans', sans-serif;
--font-display:var(--font-product);

--amber-500:#D9805A;
--amber-600:#BE6032;
--amber-700:#8F3E22;

--primary-color:var(--amber-700);
--primary-dark:#1C1610;
--primary-900:#1C1610;

--accent-100:#F7E4D3;
--accent-500:var(--amber-600);
--accent-600:var(--amber-700);
--accent-color:var(--amber-600);

--background:#FDF9EF;
--background-soft:#F3EBDA;
--background-light:#F7F1E3;
--background-alt:#EFE6D1;
--border-color:#E2D5B8;

--journey-ink:#1C1610;
--journey-ink-2:#2A211A;
--journey-paper:#FDF9EF;
--journey-done:#2F7A46;
}

body{
background:
radial-gradient(circle at top left,#F7F1E3 0%,transparent 45%),
radial-gradient(circle at bottom right,#EFE6D1 0%,transparent 35%),
#F5EFE2;
font-family:var(--font-body);
}

/* ==========================================================
2. COQUILLE — plus de grille à sidebar
========================================================== */
.dashboard-shell{
display:block;
min-height:100vh;
}

.dashboard-main{
display:block;
min-height:auto;
margin-left:0 !important;
width:auto;
}

/* Garde-fous : toute trace de l'ancienne coquille disparaît, même si
une page n'a pas (encore) été purgée de son markup. */
.sidebar,
.sidebar-backdrop,
.topbar-menu-btn,
#sidebarOpenBtn{
display:none !important;
}

/* ==========================================================
BARRE HAUTE DU PARCOURS
========================================================== */
.journey-topbar{
position:sticky;
top:0;
z-index:60;
display:flex;
align-items:center;
gap:18px;
padding:12px clamp(16px, 4vw, 40px);
background:rgba(253,249,239,.92);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--border-color);
}

.journey-brand{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:var(--journey-ink);
}

.journey-brand .logo-icon{
width:30px;
height:30px;
flex-shrink:0;
border-radius:0;
object-fit:unset;
}

/* Le lockup vit dans css/base.css (.fitz-lockup). Ces regles-ci
donnaient au nom de la marque une TROISIEME typographie
(var(--font-affirmation)) et au descripteur un terracotta
(var(--amber-700)) propres a l'espace etudiant : la meme marque ne se
lisait pas pareil ici et sur la page d'accueil. */

/* Contexte de page (pages outils) : retour au parcours + nom d'outil. */
.journey-context{
display:flex;
align-items:center;
gap:12px;
min-width:0;
flex:1 1 auto;
}

.journey-context .back-link{
display:inline-flex;
align-items:center;
gap:6px;
font-size:.85rem;
font-weight:600;
color:var(--amber-700);
text-decoration:none;
white-space:nowrap;
}

.journey-context .back-link:hover{ text-decoration:underline; }

.journey-context .back-link i,
.journey-context .back-link svg{ width:15px; height:15px; }

.journey-context h1,
.journey-context h2{
margin:0;
font-family:var(--font-affirmation);
font-size:1.05rem;
font-weight:600;
color:var(--journey-ink);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* L'ancien H1 de topbar (pages non migrées) suit la même échelle. */
.topbar-title h1{
font-family:var(--font-affirmation);
font-size:1.05rem;
}

.journey-topbar-actions{
display:flex;
align-items:center;
gap:8px;
margin-left:auto;
}

.journey-top-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border:1px solid transparent;
border-radius:10px;
background:none;
color:var(--journey-ink);
cursor:pointer;
transition:var(--transition);
}

.journey-top-icon:hover{
background:var(--background-light);
border-color:var(--border-color);
}

.journey-top-icon i,
.journey-top-icon svg{ width:18px; height:18px; }

/* La cloche existante reprend la géométrie des icônes voisines. */
.journey-topbar .messages-bell-btn{
width:36px;
height:36px;
border-radius:10px;
}

.journey-topbar .topbar-plan-chip{
white-space:nowrap;
}

/* ==========================================================
CONTENU — colonne éditoriale centrée
========================================================== */
.dashboard-main > .content{
max-width:1000px;
margin:0 auto;
padding:28px clamp(16px, 4vw, 40px) 80px;
}

@media (max-width: 720px){

.fitz-lockup-text{ display:none; }

.journey-context h1,
.journey-context h2{ font-size:.95rem; }

/* Profil/paramètres passent dans le parcours sur mobile — la barre
garde cloche, formule et déconnexion. */
.journey-top-icon--secondary{ display:none; }

}

/* Sous-titre hérité de l'ancien topbar (profile.html) — l'information
vit déjà dans la page, la barre reste une barre. */
.journey-context p{ display:none; }

/* ==========================================================
« DISCUTER AVEC FITZ » — bouton flottant (2026-08-30)
Injecté par js/app-shell.js sur toutes les pages de l'espace (sauf
le chat lui-même). Pastille encre chaude avec le symbole Fitz —
toujours au même endroit, comme la bulle d'aide d'une application
moderne. Le wrapper porte data-feature="ai_chat" : verrouillé par
applyFeatureLocks sur les formules sans chat (cadenas + lien vers
les forfaits), sans aucune ligne de code par page.
========================================================== */
.fitz-fab-wrap{
position:fixed;
right:22px;
bottom:22px;
z-index:70;
}

.fitz-fab{
display:flex;
align-items:center;
gap:10px;
padding:12px 20px 12px 14px;
border-radius:999px;
text-decoration:none;
color:#FDF9EF;
background:linear-gradient(158deg, #2A211A 0%, #1E1712 60%, #15100B 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.09),
0 2px 6px rgba(21,16,11,.25),
0 16px 32px -12px rgba(21,16,11,.5);
transition:transform .18s ease, box-shadow .18s ease;
}

.fitz-fab:hover{
transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.09),
0 4px 10px rgba(21,16,11,.28),
0 22px 40px -12px rgba(21,16,11,.55);
}

.fitz-fab svg{
width:26px;
height:26px;
flex-shrink:0;
}

.fitz-fab-label{
font-family:var(--font-product, 'Public Sans', sans-serif);
font-size:.86rem;
font-weight:700;
letter-spacing:.01em;
white-space:nowrap;
}

/* Cadenas — visible seulement quand applyFeatureLocks a posé
is-locked sur le wrapper (formule sans chat). */
.fitz-fab-lock{ display:none; }

.fitz-fab-wrap.is-locked .fitz-fab-lock{
display:flex;
align-items:center;
}

.fitz-fab-lock i,
.fitz-fab-lock svg{
width:13px;
height:13px;
color:#F3D9C8;
}

.fitz-fab-wrap.is-locked .fitz-fab{ opacity:.88; }

/* Mobile : pastille ronde, symbole seul — le libellé prendrait la
largeur du pouce. Remontée au-dessus de la zone de gestes. */
@media (max-width: 720px){

.fitz-fab{ padding:13px; }

.fitz-fab-label{ display:none; }

}

@media print{ .fitz-fab-wrap{ display:none; } }

/* ==========================================================
   BASCULE D'ESPACE (lot S4)
   ==========================================================
   Visible UNIQUEMENT pour un client qui a les deux
   accompagnements — pour tous les autres, elle n'est pas dans
   le DOM (js/app-shell.js, initBasculeEspace). Un client qui
   n'a acheté qu'un accompagnement ne doit pas apprendre
   l'existence de l'autre par un bouton grisé dans sa barre
   haute : ce serait vendre au milieu de ce qu'il a déjà payé.
   ========================================================== */
.espace-bascule{
display:inline-flex;
align-items:center;
gap:2px;
padding:3px;
margin-right:6px;
border:1px solid var(--border-soft, rgba(0,0,0,.10));
border-radius:999px;
background:var(--surface-2, rgba(0,0,0,.03));
}

.espace-bascule-btn{
padding:5px 12px;
border-radius:999px;
font-size:var(--fs-caption);
font-weight:600;
line-height:1;
color:var(--text-muted);
text-decoration:none;
white-space:nowrap;
transition:background .15s ease, color .15s ease;
}

.espace-bascule-btn:hover{ color:var(--text-color); }

.espace-bascule-btn.is-active{
background:var(--surface-1, #fff);
color:var(--text-color);
box-shadow:0 1px 2px rgba(0,0,0,.06);
}

.espace-bascule-btn{
display:inline-flex;
align-items:center;
gap:6px;
}

.espace-bascule-btn i,
.espace-bascule-btn svg{ width:14px; height:14px; flex-shrink:0; }

/* Le libellé : règle de base HORS @media (test icone-btn 3 : aucune
   classe ne vit uniquement dans un @media) ; masqué sous 400 px. */
.espace-bascule-libelle{ display:inline; }

/* Sous 720px la barre haute est déjà dense : on garde la bascule,
   mais compacte — c'est la seule façon de changer d'espace. */
@media (max-width: 720px){
.espace-bascule{ margin-right:2px; }
.espace-bascule-btn{ padding:5px 9px; }
}

/* Lot FITZ-CHOISIT, partie 0 (2026-09-11) : sous 400 px, la bascule
   (183 px avec ses libellés) + la cloche + la pastille « Dossier
   France » débordaient de 2 à 32 px sur quatre pages de l'espace (vu
   par le harnais sous les deux moteurs). Icône seule : le libellé
   reste dans aria-label et title (js/app-shell.js), l'état actif
   reste le fond plein. Règle mobile : zéro débordement, jamais une
   barre sur deux lignes. */
@media (max-width: 400px){
.espace-bascule-btn{ padding:6px 8px; }
.espace-bascule-btn i,
.espace-bascule-btn svg{ width:16px; height:16px; }
.espace-bascule-libelle{ display:none; }
}

/* ==================================================================
LOT FITZ-RECOURS (2026-09-10) — « Bloqué ? Demandez à Fitz », à l'endroit
du blocage. Un seul composant, six contextes : sous la prochaine action,
à la place d'un outil verrouillé, sur une étape prématurée, sur chaque
étape de procédure, sur une échéance proche, sur un élément de dossier.
Discret — c'est un recours, pas un appel à l'action commercial.
================================================================== */
.fitz-recours{
display:inline-flex;
align-items:center;
gap:6px;
font-size:var(--fs-caption);
font-weight:600;
color:var(--amber-700);
text-decoration:none;
padding:4px 0;
}
.fitz-recours i, .fitz-recours svg{ width:14px; height:14px; flex:none; }
.fitz-recours:hover, .fitz-recours:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
.fitz-recours--bloc{ display:flex; margin-top:6px; }
.fitz-recours--outil{ font-size:var(--fs-small); padding:8px 12px; border:1px dashed var(--border-color); border-radius:var(--radius-full); }

/* Le diagnostic rendu à un compte SANS accès au chat : calculé, donc
gratuit. C'est la conversation qui est réservée — et c'est le moment où
l'étudiant voit exactement ce qui le débloquerait. */
.fitz-recours-diagnostic{ max-width:720px; margin:0 auto 22px; padding:18px 20px; border:1px solid var(--border-color); border-left:3px solid var(--amber-700); border-radius:var(--radius-md, 16px); background:var(--background-soft); line-height:1.6; }
.fitz-recours-diagnostic h3{ margin:0 0 8px; font-size:var(--fs-h4); }
.fitz-recours-diagnostic p{ margin:0 0 8px; }
.fitz-recours-diagnostic ul{ margin:8px 0 0; padding-left:18px; }