ne fassent pas overflow */
}
.app-sidebar {
width: 260px;
flex-shrink: 0;
background: #FFFFFF;
border-right: 1px solid var(--border);
position: sticky;
top: 60px;
align-self: flex-start;
height: calc(100vh - 60px);
overflow-y: auto;
z-index: 50;
display: flex;
flex-direction: column;
}
/* Bandeau brand en haut, dégradé bleu nuit + accent bleu Isitec en pied */
.app-sidebar-brand {
padding: 18px 20px 14px;
background: linear-gradient(135deg, var(--isitec-blue-night) 0%, var(--isitec-blue-night-soft) 100%);
color: #FFFFFF;
border-bottom: 3px solid var(--isitec-blue);
}
.app-sidebar-brand .brand-name {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.3px;
}
.app-sidebar-brand .brand-tag {
font-size: 11px;
opacity: 0.7;
margin-top: 2px;
}
/* Groupes pliables */
.app-sidebar-groups {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
.app-sidebar-group {
border-bottom: 1px solid #F0F2F5;
}
.app-sidebar-group:last-child { border-bottom: none; }
.app-sidebar-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--muted);
cursor: pointer;
user-select: none;
}
.app-sidebar-section:hover {
background: #F6F8FB;
color: var(--isitec-blue-night);
}
.app-sidebar-section .chevron {
transition: transform 0.15s ease-out;
}
.app-sidebar-group.is-open .app-sidebar-section .chevron {
transform: rotate(90deg);
}
/* Liste des liens — masqués si groupe fermé */
.app-sidebar-nav {
list-style: none;
margin: 0;
padding: 0 0 6px;
max-height: 0;
overflow: hidden;
transition: max-height 0.18s ease-out;
}
.app-sidebar-group.is-open .app-sidebar-nav {
max-height: 800px; /* assez large pour ne pas couper, sans auto qui casse la transition */
}
/* Liens individuels — alignés à gauche avec icône, bordure gauche bleue au focus/active
(style SAGE/Isinet exact : bord 4px, fond 10% bleu Isitec). */
.app-sidebar-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 18px 8px 20px;
font-size: 13px;
color: var(--isitec-blue-night);
text-decoration: none;
border-left: 4px solid transparent;
transition: background 0.1s ease-out, color 0.1s ease-out, border-color 0.1s ease-out;
}
.app-sidebar-link:hover {
background: #F6F8FB;
color: var(--isitec-blue);
}
.app-sidebar-link.active {
background: var(--isitec-blue-light);
color: var(--isitec-blue);
font-weight: 600;
border-left-color: var(--isitec-blue);
}
.app-sidebar-link svg {
flex-shrink: 0;
color: inherit;
}
/* Footer sidebar */
.app-sidebar-footer {
padding: 10px 18px;
border-top: 1px solid var(--border);
font-size: 11px;
background: #FAFBFC;
}
.app-sidebar-footer .muted { color: var(--muted); }
/* Responsive : sous 1100px, la sidebar passe au-dessus du contenu (largeur full).
Garde-le accessible sans plein écran, mais évite qu'elle squeeze le main sur tablette. */
@media (max-width: 1100px) {
.app-shell { flex-direction: column; }
.app-sidebar {
width: 100%;
position: static;
height: auto;
border-right: none;
border-bottom: 1px solid var(--border);
}
.app-sidebar-groups { padding: 0; }
}
/* ───────────────────────────── Tableau clé / valeur ─────────────────────────────
Pour les "fiches" type enveloppe mail, dépouillé : | dans la 1re colonne =
libellé, | = valeur. Pas de cellules en surbrillance pour rester sobre.
*/
table.kv {
border: none;
width: auto;
box-shadow: none;
}
table.kv th,
table.kv td {
padding: 4px 12px 4px 0;
border: none;
text-align: left;
vertical-align: top;
background: transparent;
}
table.kv th {
color: var(--muted);
font-weight: 500;
white-space: nowrap;
}
.muted { color: var(--muted); }
.empty {
padding: 36px;
text-align: center;
color: var(--muted);
background: #FFFFFF;
border: 1px dashed var(--border);
border-radius: 10px;
}
/* ───────────────────────────── Validation split-screen ─────────────────────────────
Page /admin/validation/{id} : mail original à gauche, formulaire pré-rempli à droite.
En dessous de 1024px le layout passe en colonnes empilées (mail au-dessus du form).
*/
.validation-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
margin-bottom: 16px;
}
@media (max-width: 1024px) {
.validation-split { grid-template-columns: 1fr; }
}
.validation-pane {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 1px 2px rgba(28, 29, 61, 0.04);
min-width: 0; /* pour que le pre ne fasse pas déborder le grid */
}
.validation-pane .pane-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.validation-pane h2 { margin: 0; }
.validation-pane .pane-subheader {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
color: var(--isitec-blue-night);
margin: 18px 0 6px;
}
.validation-pane-mail {
/* Le panneau mail peut être très long → scroll interne pour ne pas étirer la page */
max-height: 70vh;
overflow: auto;
background: #F6F8FB;
}
.mail-source {
white-space: pre-wrap;
word-wrap: break-word;
font-family: 'Menlo', 'Consolas', monospace;
font-size: 12px;
color: var(--isitec-blue-night);
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
margin: 0;
line-height: 1.5;
}
.attachments {
margin: 8px 0 0;
padding-left: 20px;
font-size: 13px;
}
.attachments li { margin-bottom: 4px; }
/* ───────────────────────────── Responsive mobile (≤ 720px) ─────────────────────────────
Cible : un commercial ou un admin qui ouvre le back-office depuis son téléphone pour
saisir un lead (cas usage : personne sans APK Android, ou intervention rapide en
déplacement). Toutes les pages doivent rester utilisables au format vertical.
*/
@media (max-width: 720px) {
body { font-size: 13px; }
.topbar { padding: 0 14px; height: 54px; }
.topbar .brand a { font-size: 14px; gap: 6px; }
.topnav { gap: 10px; }
.topnav .who { display: none; } /* libère de la place pour le bouton Déconnexion */
.container { padding: 0 12px; margin: 16px auto; }
h1 { font-size: 19px; margin-bottom: 12px; }
h2 { font-size: 15px; }
.card { padding: 14px; border-radius: 8px; }
.kpi { padding: 12px 14px; }
.kpi .value { font-size: 22px; }
.form-row { gap: 10px; }
.form-field { flex-basis: 100%; } /* 1 champ par ligne sur mobile */
/* Boutons d'action en bas de formulaire : pleine largeur empilée pour faciliter
le tap au pouce. L'ordre reste celui du DOM (Annuler à gauche, Submit à droite
devient Annuler en haut, Submit en bas — on inverse pour que le primaire reste
sous le pouce). */
.form-actions {
flex-direction: column-reverse;
align-items: stretch;
gap: 10px;
}
.form-actions .btn { width: 100%; text-align: center; padding: 12px 14px; }
/* Tables : scroll horizontal plutôt que crop. On les wrap dans un overflow-x via
le sélecteur :not(.kv) pour préserver les tables clé/valeur qui ne dépassent pas. */
table:not(.kv) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
th, td { padding: 10px 10px; font-size: 12px; }
/* Sidebar : déjà repliée au-dessus du contenu via la media query 1100px existante.
Sur mobile, on rend les groupes encore plus compacts. */
.app-sidebar-brand { padding: 12px 14px; }
.app-sidebar-section { padding: 8px 14px; }
.app-sidebar-link { padding: 10px 14px 10px 16px; font-size: 14px; }
/* Login card : retire les marges hautes énormes (80px → 24px) sur petits écrans. */
.login-card { margin: 24px auto; max-width: 100%; }
/* Filter bar : inputs full-width pour pouvoir taper au clavier mobile. */
.filter-bar { flex-direction: column; align-items: stretch; }
.filter-bar input, .filter-bar select { width: 100%; }
/* Galerie médias : tuiles plus petites pour tenir sur l'écran. */
.media-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
|