/* =================================================================
sidebar-signature.css - LA sidebar signature de Crise et Resilience.
Le modele qui remplace progressivement sidebar.css. Les deux
cohabitent : une app migre quand on la touche, pas avant.
TROIS PLANS qui se chevauchent, du plus proche au plus lointain :
1. le RAIL (56px) : le sceau + les gestes GLOBAUX du programme.
Noir, incruste avec 2px de jeu, il flotte sur la carte.
2. le PANNEAU (300px): la navigation. Pas de fond a lui, il repose
sur la carte porteuse et se resorbe au repli.
3. la SCENE : le contenu, une carte DETACHEE a droite.
La lumiere vient de DERRIERE la sidebar : son halo dore sort par la
droite et vient eclairer le lisere de la scene. La scene ne fait que
recevoir, elle n'emet pas.
L'OR EST RATIONNE. Il ne marque que trois choses : la marque (le
sceau), l'endroit ou tu es (l'item actif), et ce qui urge. Tout le
reste est gris et s'allume au survol.
LE GABARIT COMPLET, pret a copier : _SHARED/modele-sidebar-signature.html
Le JS (repli, accordeon exclusif, horloge) : _SHARED/web/js/ui-sidebar-signature.js
Structure minimale :
Demande buttons.css (pour .btn-close-panel) et theme.css.
================================================================= */
:root {
--pli-duree: 380ms;
--pli-courbe: cubic-bezier(0.4, 0, 0.2, 1);
--pied-h: 34px; /* hauteur de la ligne de pied = du bandeau */
--scene-jeu: 10px; /* retrait haut/bas du contenu dans la scene */
/* Le noir du rail. SEULE valeur litterale du composant : il ne suit
pas le theme, c'est justement ce qui fait la marque. */
--rail-fond: #0a0b0d;
/* Le phenix sert de POCHOIR (mask), sa couleur vient du degrade dore.
⚠️ En file:// (page ouverte au double-clic), Edge REFUSE de charger
une image appelee depuis le CSS : la marque disparait. Servie en
HTTP c'est bon. Pour une page locale, redeclarer --phenix dans la
page avec le PNG embarque en data:base64.
C'est LE phenix de la marque, celui du site de l'Academie, de la
Radio et du Magazine : `phenix-net.png`, binarise a 224 pour lui
retirer son ombre (en pochoir, une ombre se remplit d'or et fait un
halo). On pointe la version reduite a 96px de haut. Sources img/. */
--phenix: url('../../img/phenix-net-96.png');
}
/* Le layout de la page : sidebar a gauche, scene a droite. */
body.sig-layout {
flex-direction: row;
padding: var(--gap-lg) 0;
}
/* =================================================================
LA CARTE PORTEUSE. Elle tient le fond et l'arrondi ; le rail et la
nav vivent dedans.
================================================================= */
.sig-sidebar {
display: flex;
flex-direction: row;
flex-shrink: 0;
margin-left: var(--gap-md);
background: linear-gradient(180deg, var(--bg-card-hover) 0%, var(--bg-card) 45%, var(--bg-surface) 100%);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow:
var(--shadow-card),
5px 0 12px -4px rgba(var(--accent-rgb), 0.45); /* le halo, vers la scene */
position: relative;
z-index: 2;
}
/* Le bandeau du pied appartient a la CARTE et pas au panneau : il file
jusqu'au bord gauche et passe SOUS le rail, qui le recouvre. */
.sig-sidebar::after {
content: '';
position: absolute;
left: 1px; right: 1px; bottom: 1px;
height: var(--pied-h);
background: var(--glass-tint);
border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
z-index: 0;
pointer-events: none;
transition: opacity var(--pli-duree) var(--pli-courbe);
}
.sig-sidebar.collapsed::after { opacity: 0; }
/* =================================================================
1. LE RAIL
INCRUSTE : 2px de jeu en haut, en bas et a gauche, le fond de la
carte se voit tout autour. Son ombre le decolle du plan.
Noir a 90% : ce qui reste de la carte remonte au travers et
l'eclaircit legerement, plus fort en haut.
================================================================= */
.sig-rail {
width: 56px;
flex-shrink: 0;
background: color-mix(in srgb, var(--rail-fond) 90%, transparent);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-xs);
padding: var(--gap-md) 0;
margin: 2px 0 2px 2px;
border-radius: calc(var(--radius-lg) - 2px); /* suit l'arrondi de la carte */
box-shadow: var(--shadow-lg);
position: relative;
z-index: 2;
transition: margin var(--pli-duree) var(--pli-courbe);
/* Sur un ecran court le rail doit pouvoir defiler sans emporter le
sceau ni l'horloge, mais une barre dans 56px de large mangerait le
centrage des icones : on la masque. */
overflow-y: auto;
}
.sig-rail::-webkit-scrollbar { width: 0; height: 0; }
/* Replie, la carte ne disparait pas : elle se resserre autour du rail
avec le meme jeu qu'a gauche. Le rail, lui, ne bouge pas d'un pixel. */
.sig-sidebar.collapsed .sig-rail { margin-right: 2px; }
/* LE SCEAU : cercle sombre cercle d'un trait dore fin, le phenix au
centre, et la lumiere qui sort de dessous en trois couches. */
.sig-logo {
width: 40px; height: 40px;
flex-shrink: 0;
border-radius: 50%;
background: radial-gradient(circle at 32% 26%, var(--bg-card-hover) 0%, var(--bg-base) 72%);
border: 1px solid rgba(var(--accent-rgb), 0.5);
box-shadow:
0 0 4px 0 rgba(var(--accent-rgb), 0.55),
0 0 11px 2px rgba(var(--accent-rgb), 0.30),
0 0 24px 5.5px rgba(var(--accent-rgb), 0.15);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--gap-lg);
user-select: none;
}
/* Le PNG ne sert que de pochoir : la couleur vient du degrade, donc la
marque suit l'accent du theme au lieu d'etre figee. */
/* Le pochoir fait 65x96 : en carre il n'occuperait que les deux tiers
de la largeur. Memes proportions que le sceau du site de l'Academie
(27x39 dans un cercle de 54), ramenees au cercle de 40. */
.sig-logo-mark {
width: 20px; height: 29px;
background: linear-gradient(155deg, var(--accent-hover) 0%, var(--accent) 55%, var(--accent-dark) 100%);
-webkit-mask: var(--phenix) center / contain no-repeat;
mask: var(--phenix) center / contain no-repeat;
}
/* Un bouton du rail. Ajouter .js-action a ceux qui DECLENCHENT quelque
chose (ils ne restent jamais allumes) ; sans elle, le bouton est une
destination et prend .active. */
.sig-rail-btn {
width: 40px; height: 40px;
border-radius: var(--radius-sm);
border: none;
background: transparent;
color: var(--text-muted);
font-family: var(--font-icon), var(--font);
font-size: 17px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: var(--transition-norm);
position: relative;
}
.sig-rail-btn:hover { background: var(--bg-card-hover); color: var(--text); }
.sig-rail-btn.active {
background: var(--bg-card-hover);
color: var(--accent);
box-shadow: var(--shadow-glow);
}
/* Le repere de position : un trait dore colle au bord gauche du rail. */
.sig-rail-btn.active::before {
content: '';
position: absolute;
left: -4px; /* reste DANS le rail : bouton de 40 dans 56 */
width: 3px; height: 20px;
border-radius: var(--radius-pill);
background: var(--accent);
}
.sig-rail-spacer { flex: 1; }
/* L'horloge ferme le rail. Grise : ce n'est ni la marque, ni ou tu es,
ni une urgence. La date au-dessus, l'heure en dessous. */
.sig-rail-horloge {
margin-top: var(--gap-sm);
text-align: center;
font-family: var(--font-mono);
line-height: 1.25;
user-select: none;
}
.sig-rail-date { font-size: 10px; color: var(--text-comment); }
.sig-rail-heure {
font-size: 14px;
font-weight: 600;
color: var(--text-dim);
letter-spacing: 0.02em;
}
/* =================================================================
2. LE PANNEAU
================================================================= */
.sig-panel {
width: 300px;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
z-index: 1;
border-radius: 0 var(--radius-lg) var(--radius-lg) 0; /* le pied epouse la carte */
transition: width var(--pli-duree) var(--pli-courbe);
}
.sig-sidebar.collapsed .sig-panel { width: 0; }
/* Le contenu s'efface AVANT que la largeur se referme, et il revient
APRES que la place soit faite. Sans ce decalage, le texte se ferait
ecraser par le bord du panneau au lieu de disparaitre. */
.sig-panel-head,
.sig-panel-univers,
.sig-nav,
.sig-foot {
opacity: 1;
transition: opacity 200ms ease calc(var(--pli-duree) - 120ms);
}
.sig-sidebar.collapsed .sig-panel-head,
.sig-sidebar.collapsed .sig-panel-univers,
.sig-sidebar.collapsed .sig-nav,
.sig-sidebar.collapsed .sig-foot {
opacity: 0;
transition: opacity 120ms ease 0ms;
}
/* --- Les deux boutons de repli. Un seul est visible a la fois : celui
du panneau quand il est ouvert, celui du rail quand il ne reste que
le rail. --- */
/* Celui du rail se retracte en HAUTEUR au lieu de disparaitre : un
display:none ferait sauter toutes les icones d'un coup. */
.js-pli {
overflow: hidden;
transition: height var(--pli-duree) var(--pli-courbe),
margin var(--pli-duree) var(--pli-courbe),
opacity 160ms ease;
}
.sig-sidebar:not(.collapsed) .js-pli {
height: 0;
opacity: 0;
pointer-events: none;
margin-top: calc(var(--gap-xs) * -1); /* absorbe le gap du rail */
}
.sig-sidebar.collapsed .js-pli { transform: rotate(180deg); }
/* Celui du panneau se cale sur la ligne du nom, dans la colonne des
compteurs. Eteint : replier est un geste de confort, pas une urgence. */
.js-pli-haut {
position: absolute;
top: calc(var(--gap-md) + 4px);
right: calc(var(--gap-sm) + 7px);
z-index: 3;
width: 19px; height: 19px;
font-size: 7px;
border-color: var(--border-light);
color: var(--text-muted);
transition: opacity 160ms ease, var(--transition-norm);
}
.js-pli-haut:hover { border-color: var(--accent); color: var(--accent); }
.sig-sidebar.collapsed .js-pli-haut { opacity: 0; pointer-events: none; }
/* --- Tete : nom du programme + signature maison. Le padding droit
reserve la place du bouton pour que le titre ne passe pas dessous. --- */
.sig-panel-head {
padding: var(--gap-md) 34px var(--gap-sm) var(--gap-lg);
display: flex;
align-items: center;
gap: var(--gap-sm);
min-height: 62px;
}
.sig-panel-titles { flex: 1; min-width: 0; }
.sig-panel-titles strong {
display: block;
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* La signature vire du clair au dore, comme le lettrage des visuels.
Georgia et pas Cormorant : la serif du socle n'est pas embarquee et
une app doit tenir hors-ligne. */
.sig-panel-titles small {
display: block;
font-family: Georgia, var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.02em;
margin-top: 3px;
background: linear-gradient(95deg,
var(--text) 0%,
var(--accent-hover) 58%,
var(--accent-dark) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* --- La ligne de contexte : sur QUOI on travaille (le client, le
dossier, l'exercice). Ses raccourcis a gauche, son nom a droite :
ils lui appartiennent, ils vivent donc a cote de lui. --- */
.sig-panel-univers {
padding: calc(var(--gap-sm) - 5px) var(--gap-lg) calc(var(--gap-xs) + 10px);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-sm);
}
.sig-client-nom {
font-size: 16px;
font-weight: 600;
color: var(--text);
text-align: right;
min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sig-client-liens { display: flex; gap: 2px; flex-shrink: 0; }
.sig-lien-btn {
width: 26px; height: 26px;
border: none;
background: transparent;
border-radius: var(--radius-xs);
color: var(--text-muted);
font-family: var(--font-icon), var(--font);
font-size: 14px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: var(--transition-norm);
}
.sig-lien-btn:hover { color: var(--accent); background: var(--bg-card-hover); }
/* --- La navigation --- */
.sig-nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--gap-xs) 0 var(--gap-md);
display: flex;
flex-direction: column;
}
/* La nav va plus loin que le filet du socle : son ascenseur DISPARAIT au
repos. Un menu tient presque toujours dans la hauteur, la barre n'a
donc rien a signaler, et elle tomberait pile dans la colonne des
compteurs. Le contenu de la scene, lui, garde le filet visible du
socle : la ou il y a vraiment a defiler, il faut le voir.
(Rien en `scrollbar-color` ici : cette propriete standard desactive
tout le style ::-webkit-scrollbar du socle. Voir theme.css.) */
.sig-nav::-webkit-scrollbar-thumb { background: transparent; }
.sig-nav:hover::-webkit-scrollbar-thumb { background: var(--border-light); }
.sig-item {
display: flex;
align-items: center;
gap: 10px;
margin: 1px var(--gap-sm);
padding: 8px 10px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--text-dim);
font-family: inherit;
font-size: 12.5px;
text-align: left;
cursor: pointer;
transition: var(--transition-norm);
user-select: none;
}
.sig-item:hover { background: var(--bg-card-hover); color: var(--text); }
/* Item actif : degrade qui s'estompe vers la droite. Pas de barre. */
.sig-item.active {
background: linear-gradient(to right, rgba(var(--accent-rgb), 0.22) 0%, rgba(var(--accent-rgb), 0.06) 55%, transparent 100%);
color: var(--text);
}
.sig-item-icon {
font-family: var(--font-icon), var(--font);
font-size: 15px;
width: 20px;
flex-shrink: 0;
text-align: center;
color: var(--text-muted);
transition: color var(--transition-fast);
}
.sig-item:hover .sig-item-icon,
.sig-item.active .sig-item-icon { color: var(--accent); }
/* Variante pastille : un point de couleur au lieu d'un glyphe, pour un
etat ou une categorie. Une icone laissee VIDE garde la gouttiere et
l'alignement : c'est mieux qu'un glyphe generique repete. */
.sig-item-icon.dot { font-size: 9px; }
/* Les vrais libelles sont longs ("Plan de gestion de crise (comite de
crise operationnelle TI)"). La sidebar ne s'elargit pas : le texte
s'adapte. Deux lignes au maximum, puis coupure. Le title de l'item
donne le texte entier au survol. */
.sig-item-label {
flex: 1;
min-width: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.25;
}
/* Compteur : GRIS. L'or ne marque que la marque, l'actif, l'urgence. */
.sig-item-count {
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--text-muted);
flex-shrink: 0;
}
/* --- Un chapitre. Pas d'icone sur un chapitre : c'est un titre, pas
une destination. Le JS n'en ouvre qu'un a la fois. --- */
.sig-group {
display: flex;
flex-direction: column;
margin-top: var(--gap-md);
padding-top: var(--gap-md);
border-top-width: 1px;
border-top-style: solid;
border-image: linear-gradient(90deg, transparent, var(--border) 14%, var(--border) 86%, transparent) 1;
}
.sig-group-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--gap-lg) 4px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
cursor: pointer;
user-select: none;
transition: color var(--transition-fast);
}
.sig-group-title:hover { color: var(--text-dim); }
.sig-group-title .chev {
font-family: var(--font-icon), var(--font);
font-size: 9px;
transition: transform 0.2s ease;
}
.sig-group.closed .chev { transform: rotate(-90deg); }
.sig-group.closed .sig-item,
.sig-group.closed .sig-add { display: none; }
/* Ligne "Ajouter ..." en fin de chapitre : discrete, s'allume au survol. */
.sig-add {
display: flex;
align-items: center;
gap: 10px;
margin: 1px var(--gap-sm);
padding: 8px 10px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--text-comment);
font-family: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
transition: var(--transition-norm);
}
.sig-add:hover { color: var(--accent); background: var(--bg-card-hover); }
.sig-add .sig-item-icon { font-size: 13px; color: inherit; }
/* --- Pied : UNE seule ligne. Etat a gauche, version a droite. Son fond
est le bandeau porte par la carte (voir .sig-sidebar::after). --- */
.sig-foot {
height: var(--pied-h);
flex-shrink: 0;
padding: 0 var(--gap-lg);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--gap-sm);
font-size: 11px;
color: var(--text-muted);
}
.sig-foot-status { display: flex; align-items: center; gap: 6px; }
.sig-foot-version { font-size: 10px; color: var(--text-comment); }
/* PROD ou DEV, en tete de la ligne de version. Se lit d'un coup d'oeil :
on ne veut pas corriger la production en croyant etre en dev. Le tiret
est pose par le CSS pour qu'il n'apparaisse pas si le marqueur n'a pas
ete rempli (le JS pose la classe en meme temps que le texte). */
.sig-foot-env { font-weight: 700; color: var(--text-dim); letter-spacing: .3px; }
.sig-foot-env.dev { color: var(--error); }
.sig-foot-env::after {
content: ' - ';
font-weight: 400;
color: var(--text-comment);
letter-spacing: 0;
}
/* Le point d'etat. Repris de sidebar.css pour que le composant tienne
seul : une app migree ne charge plus l'ancienne sidebar. */
.save-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.save-dot.idle { background: var(--text-muted); }
.save-dot.saving { background: var(--warning); }
.save-dot.ok { background: var(--success); }
.save-dot.error { background: var(--error); }
/* =================================================================
3. LA SCENE
================================================================= */
.sig-main {
position: relative;
z-index: 3; /* passe devant le halo de la sidebar */
flex: 1;
min-width: 0;
display: flex;
padding: 0 var(--gap-lg) 0 var(--gap-xl);
}
/* La carte DETACHEE : elle ne touche ni le haut ni le bas, et elle
RECOIT la lumiere (lisere dore a gauche), elle n'en emet pas. */
.sig-stage {
position: relative;
flex: 1;
min-width: 0;
margin: 1px 0; /* meme hauteur que la sidebar, moins 2px */
/* Le contenu defile a l'INTERIEUR de la carte : sans ce retrait, un
tableau plus haut que la scene passait au ras du bord arrondi,
coupe net. Le retrait est porte par la carte (qui ne defile pas),
pas par le corps : un padding sur l'element qui defile s'en va avec
le contenu. */
padding-block: var(--scene-jeu);
background: var(--glass-surface);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow:
-6px 0 14px -4px rgba(0, 0, 0, 0.45),
var(--shadow-card);
}
/* Le lisere. En pseudo-element et PAS en border-image : des qu'une
border-image est posee, le border-radius ne clippe plus la bordure
et les coins redeviennent carres. */
.sig-stage::before {
content: '';
position: absolute;
/* Le lisere borde la CARTE, pas la zone de defilement : il ressort du
retrait pose ci-dessus. */
left: 0;
top: calc(var(--scene-jeu) * -1);
bottom: calc(var(--scene-jeu) * -1);
width: 1px;
border-radius: var(--radius-pill);
background: linear-gradient(180deg,
transparent 0%,
rgba(var(--accent-rgb), 0.75) 18%,
rgba(var(--accent-rgb), 0.75) 82%,
transparent 100%);
pointer-events: none;
z-index: 2;
}
/* Le corps scrolle a l'interieur, sinon l'overflow de la carte
emporterait le lisere. */
.sig-stage-body {
height: 100%;
overflow-y: auto;
padding: var(--gap-lg) var(--gap-xl);
}
/* =================================================================
MODE CLAIR : le rail reste NOIR, c'est la signature.
On rend au sous-arbre du rail les tokens du theme sombre : tout ce
qu'il contient (icones, sceau, horloge) reste lisible sans avoir a
traiter chaque element. Et il passe opaque, sinon la carte claire
remonterait au travers.
================================================================= */
body.theme-light .sig-rail {
--bg-base: #0a0b0d;
--bg-card-hover:#22252d;
--text: #ede8f5;
--text-dim: #b8b0d0;
--text-muted: #8e87a3;
--text-comment: #6e6e78;
background: var(--rail-fond);
}