identité (.app-entete__identite)
+ actions (.badge-circuit + bouton « Lever une alerte »)
← CONTENU PROPRE À CHAQUE PAGE →
Desktop : barre latérale fixe à gauche.
Mobile (≤ 920px) : barre compacte collée en haut, navigation repliée
derrière le bouton [data-menu-app] (bascule gérée par app.js).
========================================================================== */
/* --------------------------------------------------------------------------
1. Coquille générale
-------------------------------------------------------------------------- */
.app-coquille {
/* Largeur de la barre latérale, partagée entre la barre et le contenu. */
--app-largeur-laterale: 17rem;
min-height: 100vh;
}
/* Lien d'évitement : invisible hors focus clavier */
/* --------------------------------------------------------------------------
2. Barre latérale
-------------------------------------------------------------------------- */
.app-laterale {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
width: var(--app-largeur-laterale);
display: flex;
flex-direction: column;
background-color: var(--couleur-fond-2);
border-right: 1px solid var(--couleur-filet);
}
.app-laterale__haut {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--espace-sm);
padding: var(--espace-lg) var(--espace-lg) var(--espace-md);
}
/* La marque est légèrement plus compacte que sur la vitrine */
.app-laterale .marque {
font-size: var(--taille-base);
}
.app-laterale .marque__logo {
width: 2rem;
height: 2rem;
}
/* Bouton menu (mobile uniquement - masqué sur desktop) */
.app-laterale__burger {
display: none;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--rayon-sm);
border: 1px solid var(--couleur-filet-fort);
background-color: var(--couleur-surface);
color: var(--couleur-encre);
}
.app-laterale__burger svg {
width: 1.25rem;
height: 1.25rem;
}
/* Région repliable : navigation + pied de barre.
Sur desktop elle est toujours visible et occupe la hauteur restante. */
.app-laterale__deroulant {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--espace-xs) var(--espace-md) var(--espace-lg);
}
/* Bascule d'espace (Dirigeant ↔ Cercle) — contrôle segmenté à deux onglets,
en haut de la barre latérale. Partagée par l'espace dirigeant et l'Espace
Cercle (d'où sa place dans app.css). L'onglet courant est marqué « en dur ». */
.bascule-espace {
display: flex;
gap: var(--espace-2xs);
padding: var(--espace-2xs);
margin-bottom: var(--espace-md);
background-color: var(--couleur-fond-2);
border: 1px solid var(--couleur-filet);
border-radius: var(--rayon-sm);
}
.bascule-espace__onglet {
flex: 1;
text-align: center;
padding: 0.4rem 0.5rem;
border-radius: var(--rayon-xs);
font-size: var(--taille-sm);
font-weight: var(--graisse-moyenne);
color: var(--couleur-texte-secondaire);
text-decoration: none;
transition: background-color var(--duree-rapide) var(--courbe-standard),
color var(--duree-rapide) var(--courbe-standard);
}
.bascule-espace__onglet:hover {
color: var(--couleur-encre);
text-decoration: none;
}
.bascule-espace__onglet--actif,
.bascule-espace__onglet--actif:hover {
background-color: var(--couleur-surface);
color: var(--couleur-encre);
font-weight: var(--graisse-demi);
box-shadow: var(--ombre-douce);
}
/* Navigation principale de l'app */
.app-nav {
display: grid;
gap: var(--espace-2xs);
}
.app-nav__lien {
position: relative;
display: flex;
align-items: center;
gap: var(--espace-sm);
padding: var(--espace-sm) var(--espace-md);
border: 1px solid transparent;
border-radius: var(--rayon-sm);
font-size: var(--taille-sm);
font-weight: var(--graisse-moyenne);
color: var(--couleur-texte-secondaire);
text-decoration: none;
transition: color var(--duree-rapide) var(--courbe-standard),
background-color var(--duree-rapide) var(--courbe-standard),
border-color var(--duree-rapide) var(--courbe-standard);
}
.app-nav__lien svg {
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
}
.app-nav__lien:hover {
color: var(--couleur-encre);
background-color: var(--couleur-accent-fond);
}
/* Lien actif : main.js ajoute .lien-nav--actif au lien [data-nav]
correspondant au [data-nav-actif] du . */
.app-nav__lien.lien-nav--actif {
color: var(--couleur-encre);
font-weight: var(--graisse-demi);
background-color: var(--couleur-surface);
border-color: var(--couleur-filet);
box-shadow: var(--ombre-douce);
}
/* Repère or discret du lien actif */
.app-nav__lien.lien-nav--actif::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 1.125rem;
border-radius: var(--rayon-rond);
background-color: var(--couleur-accent);
}
/* Bas de barre : bascule de thème + retour vitrine */
.app-laterale__bas {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--espace-sm);
padding: var(--espace-lg) var(--espace-xs) 0;
border-top: 1px solid var(--couleur-filet);
}
.app-laterale__retour {
font-size: var(--taille-sm);
color: var(--couleur-texte-discret);
text-decoration: none;
transition: color var(--duree-rapide) var(--courbe-standard);
}
.app-laterale__retour:hover {
color: var(--couleur-accent-texte);
}
/* --------------------------------------------------------------------------
3. Zone de contenu (droite)
-------------------------------------------------------------------------- */
.app-contenu {
margin-left: var(--app-largeur-laterale);
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ----- En-tête de contenu : identité + badge circuit fermé + alerte ----- */
.app-entete {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--espace-sm) var(--espace-md);
padding: var(--espace-md) var(--espace-xl);
background-color: var(--couleur-fond);
border-bottom: 1px solid var(--couleur-filet);
}
.app-entete__identite {
display: flex;
align-items: center;
gap: var(--espace-sm);
min-width: 0;
}
.app-entete__nom {
font-family: var(--police-titre);
font-size: var(--taille-md);
font-weight: var(--graisse-demi);
color: var(--couleur-encre);
line-height: var(--interligne-serre);
}
.app-entete__societe {
font-size: var(--taille-xs);
color: var(--couleur-texte-secondaire);
}
.app-entete__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--espace-sm);
}
/* Badge permanent « Données en circuit fermé » */
.badge-circuit {
display: inline-flex;
align-items: center;
gap: var(--espace-xs);
padding: 0.4rem 0.875rem;
border-radius: var(--rayon-rond);
border: 1px solid var(--couleur-filet);
background-color: var(--couleur-surface);
font-size: var(--taille-xs);
font-weight: var(--graisse-moyenne);
color: var(--couleur-texte-secondaire);
cursor: help;
white-space: nowrap;
}
.badge-circuit svg {
width: 0.875rem;
height: 0.875rem;
flex-shrink: 0;
color: var(--couleur-accent-texte);
}
/* ----- Corps de page : les sections sont espacées par la grille ----- */
.app-principal {
flex: 1;
width: 100%;
padding: var(--espace-xl) clamp(var(--espace-xl), 4vw, 4.5rem) var(--espace-2xl);
display: grid;
gap: var(--rythme-section);
align-content: start;
}
.app-principal > * {
min-width: 0;
}
/* ----- Pied de contenu : mention démonstration ----- */
.app-pied {
padding: var(--espace-lg) var(--espace-xl);
border-top: 1px solid var(--couleur-filet);
text-align: center;
font-size: var(--taille-xs);
color: var(--couleur-texte-discret);
}
/* --------------------------------------------------------------------------
4. Composants génériques de l'app (réutilisables par toutes les pages)
-------------------------------------------------------------------------- */
/* En-tête de section : titre + lien d'action à droite */
.section-app__entete {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--espace-xs) var(--espace-md);
margin-bottom: var(--espace-lg);
}
.section-app__titre {
font-family: var(--police-titre);
font-size: var(--taille-xl);
font-weight: var(--graisse-demi);
color: var(--couleur-encre);
letter-spacing: -0.015em;
}
.section-app__lien {
font-size: var(--taille-sm);
font-weight: var(--graisse-moyenne);
color: var(--couleur-accent-texte);
text-decoration: none;
white-space: nowrap;
}
.section-app__lien:hover {
color: var(--couleur-accent-hover);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Ligne expert : avatar + nom + spécialité */
.ligne-expert {
display: flex;
align-items: center;
gap: var(--espace-sm);
}
.ligne-expert__nom {
display: block;
font-size: var(--taille-sm);
font-weight: var(--graisse-demi);
color: var(--couleur-encre);
line-height: var(--interligne-serre);
}
.ligne-expert__role {
display: block;
font-size: var(--taille-xs);
color: var(--couleur-texte-secondaire);
}
/* Variante compacte (pieds de carte, listes denses) */
.ligne-expert--compacte .avatar {
width: 2.25rem;
height: 2.25rem;
font-size: var(--taille-xs);
}
/* Ligne de recommandation : titre + expert à gauche, badge statut à droite */
.ligne-reco {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--espace-md);
padding: var(--espace-md) var(--espace-lg);
background-color: var(--couleur-surface);
border: 1px solid var(--couleur-filet);
border-radius: var(--rayon-md);
}
.ligne-reco__titre {
font-size: var(--taille-sm);
font-weight: var(--graisse-moyenne);
color: var(--couleur-encre);
}
.ligne-reco__expert {
font-size: var(--taille-xs);
color: var(--couleur-texte-secondaire);
margin-top: var(--espace-2xs);
}
/* --------------------------------------------------------------------------
5. Tableau de bord (dashboard.html uniquement)
-------------------------------------------------------------------------- */
/* Bandeau de bienvenue */
.tdb-bienvenue {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--espace-md);
}
.tdb-bienvenue__titre {
font-size: var(--taille-2xl);
}
.tdb-bienvenue__date {
margin-top: var(--espace-2xs);
font-size: var(--taille-sm);
color: var(--couleur-texte-secondaire);
}
.tdb-bienvenue__offre {
display: grid;
justify-items: end;
gap: var(--espace-2xs);
text-align: right;
}
/* Rangée haute : prochain CODIR (large) + alerte en cours */
.tdb-haut {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: var(--rythme-bloc);
align-items: start;
}
/* Carte « Prochain CODIR » */
.tdb-codir__details {
margin-top: var(--espace-2xs);
font-size: var(--taille-sm);
color: var(--couleur-texte-secondaire);
}
.tdb-codir__sous-titre {
font-family: var(--police-texte);
font-size: var(--taille-xs);
font-weight: var(--graisse-demi);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--couleur-texte-discret);
margin: var(--espace-lg) 0 var(--espace-sm);
}
.tdb-codir__experts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--espace-sm) var(--espace-md);
}
.tdb-codir__ordre {
margin: 0;
padding-left: 1.375rem;
display: grid;
gap: var(--espace-xs);
font-size: var(--taille-sm);
color: var(--couleur-texte-secondaire);
}
.tdb-codir__ordre li::marker {
color: var(--couleur-accent-texte);
font-weight: var(--graisse-demi);
}
.tdb-codir__pied {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--espace-sm) var(--espace-md);
}
.tdb-codir__pied .texte-discret {
flex: 1;
min-width: 12rem;
font-size: var(--taille-xs);
}
/* Carte « Alerte en cours » : filet rouge à gauche */
.tdb-alerte {
border-left: 3px solid var(--couleur-danger);
}
.tdb-alerte__contexte {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--espace-xs);
margin-bottom: var(--espace-sm);
}
.tdb-alerte__titre {
font-family: var(--police-titre);
font-size: var(--taille-base);
font-weight: var(--graisse-demi);
color: var(--couleur-encre);
line-height: var(--interligne-serre);
}
.tdb-alerte__description {
margin-top: var(--espace-xs);
font-size: var(--taille-sm);
color: var(--couleur-texte-secondaire);
}
.tdb-alerte__statut {
margin-top: var(--espace-md);
display: flex;
align-items: center;
gap: var(--espace-xs);
font-size: var(--taille-sm);
font-weight: var(--graisse-moyenne);
color: var(--couleur-danger);
}
/* Grille des chantiers */
.tdb-chantiers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--espace-lg);
}
.tdb-chantier__entete {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--espace-sm);
margin-bottom: var(--espace-md);
}
.tdb-chantier__titre {
font-family: var(--police-titre);
font-size: var(--taille-base);
font-weight: var(--graisse-demi);
color: var(--couleur-encre);
line-height: var(--interligne-serre);
}
.tdb-chantier__pied {
display: grid;
gap: var(--espace-sm);
margin-top: var(--espace-md);
padding-top: var(--espace-md);
border-top: 1px solid var(--couleur-filet);
}
.tdb-chantier__echeance {
font-size: var(--taille-xs);
color: var(--couleur-texte-discret);
}
.tdb-chantier__echeance strong {
color: var(--couleur-texte-secondaire);
}
/* Liste des recommandations */
.tdb-recos {
display: grid;
gap: var(--espace-sm);
}
/* Encart « Votre profil dirigeant » */
.tdb-profil {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--espace-lg);
}
.tdb-profil__titre {
font-size: var(--taille-lg);
margin-bottom: var(--espace-xs);
}
.tdb-profil__texte p {
font-size: var(--taille-sm);
}
.tdb-profil__action {
display: grid;
justify-items: center;
gap: var(--espace-sm);
}
.tdb-profil__pastilles {
display: flex;
gap: var(--espace-xs);
}
/* --------------------------------------------------------------------------
6. Responsive
-------------------------------------------------------------------------- */
/* La rangée haute du tableau de bord passe en une colonne */
@media (max-width: 1080px) {
.tdb-haut {
grid-template-columns: 1fr;
}
}
/* ≤ 920px : la barre latérale devient une barre compacte collée en haut,
la navigation se replie derrière le bouton [data-menu-app] (app.js). */
@media (max-width: 920px) {
.app-laterale {
position: sticky;
top: 0;
bottom: auto;
width: 100%;
border-right: none;
border-bottom: 1px solid var(--couleur-filet);
}
.app-laterale__haut {
padding: var(--espace-sm) var(--espace-md);
}
.app-laterale__burger {
display: inline-flex;
}
/* Replié par défaut ; .app-laterale--ouverte est posée par app.js */
.app-laterale__deroulant {
display: none;
padding: var(--espace-xs) var(--espace-md) var(--espace-md);
}
.app-laterale--ouverte .app-laterale__deroulant {
display: flex;
}
.app-laterale__bas {
margin-top: var(--espace-md);
padding-top: var(--espace-md);
}
.app-contenu {
margin-left: 0;
min-height: 0;
}
/* L'en-tête redevient statique : la barre du haut reste seule collée */
.app-entete {
position: static;
padding-inline: var(--espace-md);
}
.app-principal {
padding: var(--espace-lg) var(--espace-md) var(--espace-xl);
gap: var(--espace-xl);
}
.app-pied {
padding-inline: var(--espace-md);
}
}
/* Très petits écrans : les lignes de recommandation s'empilent */
@media (max-width: 540px) {
.ligne-reco {
grid-template-columns: 1fr;
gap: var(--espace-xs);
}
}